todo added and bertviz base success

app.py

@@ -8,6 +8,8 @@ import pandas as pd
 import plotly.express as px
 import matplotlib.pyplot as plt
 import numpy as np
+from datetime import datetime
+import scipy
 # os.system('git clone https://github.com/EleutherAI/lm-evaluation-harness')
 # os.system('cd lm-evaluation-harness')
 # os.system('pip install -e .')
@@ -94,12 +96,14 @@ def plotly_plot_text():#(df, x, y, color,title, x_title, y_title):
     # fig.update_layout()
     return fig
 
-def plotly_plot_question(use_start=True):#(df, x, y, color,title, x_title, y_title):
+def plotly_plot_question(use_start=True,gjo=True,time_diff=False):#(df, x, y, color,title, x_title, y_title):
         # plotly_plot(sample_df, 'date', 'loss_mean_at_1000', 'model','ppl with time', 'time', 'ppl')
-    df=pd.read_csv('./data/meta_gjo_df.csv')
-    df['date'] = pd.to_datetime(df['End Time'])
+    data=pd.read_csv('./data/0309_merge_gjo.csv')
+# Model_x,Release Date,model,MMLU,GSM8,Humanities,SocialSciences,STEM,Other,Longbench,Question,Model_y,Start Time,End Time,Acc,Right Possibility
+
+    data['date'] = pd.to_datetime(data['End Time'])
     # sort by date
-    df.sort_values(by='date', inplace=True)
+    data.sort_values(by='date', inplace=True)
 
     # use a dic to filter the dataframe
     # df = df[df['file_name'] == 'arxiv_computer_science']
@@ -162,13 +166,13 @@ def plotly_plot_question(use_start=True):#(df, x, y, color,title, x_title, y_tit
         if not before.empty:
             after = pd.concat([before.iloc[[-1]], after])
 
-        # ================================================================================
-        before = CubicSpline(before['Time Difference (Months)'], before['Acc'])
-        after = CubicSpline(after['Time Difference (Months)'], after['Acc'])
+        # # ================================================================================
+        # before = CubicSpline(before['Time Difference (Months)'], before['Acc'])
+        # after = CubicSpline(after['Time Difference (Months)'], after['Acc'])
 
-        before = CubicSpline(before['Time Difference (Months)'], before['Right Possibility'])
-        after = CubicSpline(after['Time Difference (Months)'], after['Right Possibility'])
-        # ================================================================================
+        # before = CubicSpline(before['Time Difference (Months)'], before['Right Possibility'])
+        # after = CubicSpline(after['Time Difference (Months)'], after['Right Possibility'])
+        # # ================================================================================
 
         
         # Plot 'Acc' on the first subplot

gradio_samples/bertviz/app.py

@@ -0,0 +1,199 @@
+import gradio as gr
+import inseq
+import captum
+
+import torch
+import os
+# import nltk
+import argparse
+import random
+import numpy as np
+import pandas as pd
+
+from argparse import Namespace
+from tqdm.notebook import tqdm
+from torch.utils.data import DataLoader
+from functools import partial
+
+from transformers import AutoTokenizer, MarianTokenizer, AutoModel, AutoModelForSeq2SeqLM, MarianMTModel
+
+from bertviz import model_view, head_view
+from bertviz_gradio import head_view_mod
+
+
+
+model_es = "Helsinki-NLP/opus-mt-en-es"
+# model_fr = "Helsinki-NLP/opus-mt-en-fr"
+# model_zh = "Helsinki-NLP/opus-mt-en-zh"
+# model_sw = "Helsinki-NLP/opus-mt-en-sw"
+
+tokenizer_es = AutoTokenizer.from_pretrained(model_es)
+# tokenizer_fr = AutoTokenizer.from_pretrained(model_fr)
+# tokenizer_zh = AutoTokenizer.from_pretrained(model_zh)
+# tokenizer_sw = AutoTokenizer.from_pretrained(model_sw)
+
+model_tr_es = MarianMTModel.from_pretrained(model_es)
+# model_tr_fr = MarianMTModel.from_pretrained(model_fr)
+# model_tr_zh = MarianMTModel.from_pretrained(model_zh)
+# model_tr_sw = MarianMTModel.from_pretrained(model_sw)
+
+model_es = inseq.load_model("Helsinki-NLP/opus-mt-en-es", "input_x_gradient")
+# model_fr = inseq.load_model("Helsinki-NLP/opus-mt-en-fr", "input_x_gradient")
+# model_zh = inseq.load_model("Helsinki-NLP/opus-mt-en-zh", "input_x_gradient")
+# model_sw = inseq.load_model("Helsinki-NLP/opus-mt-en-sw", "input_x_gradient")
+
+dict_models = {
+	'en-es': model_es,
+	# 'en-fr': model_fr,
+	# 'en-zh': model_zh,
+	# 'en-sw': model_sw,
+}
+
+dict_models_tr = {
+	'en-es': model_tr_es,
+	# 'en-fr': model_tr_fr,
+	# 'en-zh': model_tr_zh,
+	# 'en-sw': model_tr_sw,
+}
+
+dict_tokenizer_tr = {
+	'en-es': tokenizer_es,
+	# 'en-fr': tokenizer_fr,
+	# 'en-zh': tokenizer_zh,
+	# 'en-sw': tokenizer_sw,
+}
+
+saliency_examples = [
+	"Peace of Mind: Protection for consumers.",
+	"The sustainable development goals report: towards a rescue plan for people and planet",
+	"We will leave no stone unturned to hold those responsible to account.",
+	"The clock is now ticking on our work to finalise the remaining key legislative proposals presented by this Commission to ensure that citizens and businesses can reap the benefits of our policy actions.",
+	"Pumpkins, squash and gourds, fresh or chilled, excluding courgettes",
+	"The labour market participation of mothers with infants has even deteriorated over the past two decades, often impacting their career and incomes for years.",
+]
+
+contrastive_examples = [
+["Peace of Mind: Protection for consumers.",
+"Paz mental: protección de los consumidores",
+"Paz de la mente: protección de los consumidores"],
+["the slaughterer has finished his work.",
+"l'abatteur a terminé son travail.",
+"l'abatteuse a terminé son travail."],
+['A fundamental shift is needed - in commitment, solidarity, financing and action - to put the world on a better path.',
+ '需要在承诺、团结、筹资和行动方面进行根本转变,使世界走上更美好的道路。',
+ '我们需要从根本上转变承诺、团结、资助和行动，使世界走上更美好的道路。',]
+	]
+
+#Load challenge set examples
+df_challenge_set = pd.read_csv("challenge_sets.csv")
+arr_challenge_set = df_challenge_set.values
+arr_challenge_set = [[x[2], x[3], x[4], x[5]] for x in arr_challenge_set]
+
+
+
+def get_bertvis_data(input_text, lg_model):
+	tokenizer_tr = dict_tokenizer_tr[lg_model]
+	model_tr = dict_models_tr[lg_model]
+
+	input_ids = tokenizer_tr(input_text, return_tensors="pt", padding=True)
+	result_att = model_tr.generate(**input_ids,
+		return_dict_in_generate=True,
+		output_attentions =True,
+		output_scores=True,
+	)
+
+	# tokenizer_tr.convert_ids_to_tokens(result_att.sequences[0])
+	# tokenizer_tr.convert_ids_to_tokens(input_ids.input_ids[0])
+
+	tgt_text = tokenizer_tr.decode(result_att.sequences[0], skip_special_tokens=True)
+
+	print(tgt_text)
+	outputs = model_tr(input_ids=input_ids.input_ids,
+					decoder_input_ids=result_att.sequences,
+					output_attentions =True,
+					)
+	print(tokenizer_tr.convert_ids_to_tokens(result_att.sequences[0]))
+	# print(tokenizer_tr.convert_ids_to_tokens(input_ids.input_ids[0]), tokenizer_tr.convert_ids_to_tokens(result_att.sequences[0]))
+	html_attentions = head_view_mod(
+		encoder_attention = outputs.encoder_attentions,
+		cross_attention = outputs.cross_attentions,
+		decoder_attention = outputs.decoder_attentions,
+		encoder_tokens = tokenizer_tr.convert_ids_to_tokens(input_ids.input_ids[0]),
+		decoder_tokens = tokenizer_tr.convert_ids_to_tokens(result_att.sequences[0]),
+		html_action='gradio'
+		)
+	return html_attentions, tgt_text
+
+
+
+## First create html and divs
+html = """
+<html>
+<script async src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min"></script>
+<script async data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
+
+  <body>
+    <div id="bertviz"></div>
+    <div id="d3_beam_search"></div>
+  </body>
+</html>
+"""
+
+def sentence_maker(w1, model, var2={}):
+  #translate and get internal values
+  params,tgt = get_bertvis_data(w1, model)
+  ### get translation
+
+  return [tgt, params['params'],params['html2'].data]
+
+def sentence_maker2(w1,j2):
+  #  json_value = {'one':1}
+  #  return f"{w1['two']} in sentence22..."
+   print(w1,j2)
+   return "in sentence22..."
+
+
+with gr.Blocks(js="plotsjs_bertviz.js") as demo:
+	gr.Markdown("""
+			 # MAKE NMT Workshop \t `BertViz` \n
+			 https://github.com/jessevig/bertviz
+			 """)
+	with gr.Row():
+		with gr.Column(scale=1):
+			with gr.Row():
+				with gr.Column(scale=1):
+					gr.Markdown(
+						"""
+						### Translate
+						""")
+					in_text = gr.Textbox(label="Source Text")
+					out_text  = gr.Textbox(label="Target Text")
+					out_text2  = gr.Textbox(visible=False)
+					var2 = gr.JSON(visible=False)
+				with gr.Column(scale=1):
+					gr.Markdown(
+						"""
+						### If challenge is selected from the challenge set list bellow
+						""")
+					challenge_ex  = gr.Textbox(label="Challenge", interactive=False)
+					category_minor  = gr.Textbox(label="category_minor", interactive=False)
+					category_major  = gr.Textbox(label="category_major", interactive=False)
+					with gr.Accordion("Challenge selection:",open=False):
+						gr.Examples(arr_challenge_set,[in_text, challenge_ex,category_minor,category_major], label="")	
+			radio_c = gr.Radio(choices=['en-zh', 'en-es', 'en-fr', 'en-sw'], value="en-zh", label= '', container=False)
+			btn = gr.Button("Translate")
+		with gr.Column(scale=2):
+			gr.Markdown("Attentions: ")
+			input_mic = gr.HTML(html)
+			out_html = gr.HTML()
+		btn.click(sentence_maker, [in_text,radio_c], [out_text,var2,out_html], js="(in_text,radio_c) => testFn_out(in_text,radio_c)") #should return an output comp.
+		out_text.change(sentence_maker2, [out_text, var2], out_text2, js="(out_text,var2) => testFn_out_json(var2)") #
+      # out_text.change(sentence_maker2, [out_text, var2], out_text2, js="(out_text,var2) => testFn_out_json(var2)") #
+
+
+    # run script function on load,
+    # demo.load(None,None,None,js="plotsjs.js")
+
+if __name__ == "__main__":
+    demo.launch()

gradio_samples/bertviz/bertviz_gradio.py

@@ -0,0 +1,248 @@
+
+import json
+import os
+import uuid
+
+from IPython.core.display import display, HTML, Javascript
+
+from bertviz.util import format_special_chars, format_attention, num_layers
+
+
+def head_view_mod(
+        attention=None,
+        tokens=None,
+        sentence_b_start=None,
+        prettify_tokens=True,
+        layer=None,
+        heads=None,
+        encoder_attention=None,
+        decoder_attention=None,
+        cross_attention=None,
+        encoder_tokens=None,
+        decoder_tokens=None,
+        include_layers=None,
+        html_action='view'
+):
+    """Render head view
+
+        Args:
+            For self-attention models:
+                attention: list of ``torch.FloatTensor``(one for each layer) of shape
+                    ``(batch_size(must be 1), num_heads, sequence_length, sequence_length)``
+                tokens: list of tokens
+                sentence_b_start: index of first wordpiece in sentence B if input text is sentence pair (optional)
+            For encoder-decoder models:
+                encoder_attention: list of ``torch.FloatTensor``(one for each layer) of shape
+                    ``(batch_size(must be 1), num_heads, encoder_sequence_length, encoder_sequence_length)``
+                decoder_attention: list of ``torch.FloatTensor``(one for each layer) of shape
+                    ``(batch_size(must be 1), num_heads, decoder_sequence_length, decoder_sequence_length)``
+                cross_attention: list of ``torch.FloatTensor``(one for each layer) of shape
+                    ``(batch_size(must be 1), num_heads, decoder_sequence_length, encoder_sequence_length)``
+                encoder_tokens: list of tokens for encoder input
+                decoder_tokens: list of tokens for decoder input
+            For all models:
+                prettify_tokens: indicates whether to remove special characters in wordpieces, e.g. Ġ
+                layer: index (zero-based) of initial selected layer in visualization. Defaults to layer 0.
+                heads: Indices (zero-based) of initial selected heads in visualization. Defaults to all heads.
+                include_layers: Indices (zero-based) of layers to include in visualization. Defaults to all layers.
+                    Note: filtering layers may improve responsiveness of the visualization for long inputs.
+                html_action: Specifies the action to be performed with the generated HTML object
+                    - 'view' (default): Displays the generated HTML representation as a notebook cell output
+                    - 'return' : Returns an HTML object containing the generated view for further processing or custom visualization
+    """
+
+    attn_data = []
+    if attention is not None:
+        if tokens is None:
+            raise ValueError("'tokens' is required")
+        if encoder_attention is not None or decoder_attention is not None or cross_attention is not None \
+                or encoder_tokens is not None or decoder_tokens is not None:
+            raise ValueError("If you specify 'attention' you may not specify any encoder-decoder arguments. This"
+                             " argument is only for self-attention models.")
+        if include_layers is None:
+            include_layers = list(range(num_layers(attention)))
+        attention = format_attention(attention, include_layers)
+        if sentence_b_start is None:
+            attn_data.append(
+                {
+                    'name': None,
+                    'attn': attention.tolist(),
+                    'left_text': tokens,
+                    'right_text': tokens
+                }
+            )
+        else:
+            slice_a = slice(0, sentence_b_start)  # Positions corresponding to sentence A in input
+            slice_b = slice(sentence_b_start, len(tokens))  # Position corresponding to sentence B in input
+            attn_data.append(
+                {
+                    'name': 'All',
+                    'attn': attention.tolist(),
+                    'left_text': tokens,
+                    'right_text': tokens
+                }
+            )
+            attn_data.append(
+                {
+                    'name': 'Sentence A -> Sentence A',
+                    'attn': attention[:, :, slice_a, slice_a].tolist(),
+                    'left_text': tokens[slice_a],
+                    'right_text': tokens[slice_a]
+                }
+            )
+            attn_data.append(
+                {
+                    'name': 'Sentence B -> Sentence B',
+                    'attn': attention[:, :, slice_b, slice_b].tolist(),
+                    'left_text': tokens[slice_b],
+                    'right_text': tokens[slice_b]
+                }
+            )
+            attn_data.append(
+                {
+                    'name': 'Sentence A -> Sentence B',
+                    'attn': attention[:, :, slice_a, slice_b].tolist(),
+                    'left_text': tokens[slice_a],
+                    'right_text': tokens[slice_b]
+                }
+            )
+            attn_data.append(
+                {
+                    'name': 'Sentence B -> Sentence A',
+                    'attn': attention[:, :, slice_b, slice_a].tolist(),
+                    'left_text': tokens[slice_b],
+                    'right_text': tokens[slice_a]
+                }
+            )
+    elif encoder_attention is not None or decoder_attention is not None or cross_attention is not None:
+        if encoder_attention is not None:
+            if encoder_tokens is None:
+                raise ValueError("'encoder_tokens' required if 'encoder_attention' is not None")
+            if include_layers is None:
+                include_layers = list(range(num_layers(encoder_attention)))
+            encoder_attention = format_attention(encoder_attention, include_layers)
+            attn_data.append(
+                {
+                    'name': 'Encoder',
+                    'attn': encoder_attention.tolist(),
+                    'left_text': encoder_tokens,
+                    'right_text': encoder_tokens
+                }
+            )
+        if decoder_attention is not None:
+            if decoder_tokens is None:
+                raise ValueError("'decoder_tokens' required if 'decoder_attention' is not None")
+            if include_layers is None:
+                include_layers = list(range(num_layers(decoder_attention)))
+            decoder_attention = format_attention(decoder_attention, include_layers)
+            attn_data.append(
+                {
+                    'name': 'Decoder',
+                    'attn': decoder_attention.tolist(),
+                    'left_text': decoder_tokens,
+                    'right_text': decoder_tokens
+                }
+            )
+        if cross_attention is not None:
+            if encoder_tokens is None:
+                raise ValueError("'encoder_tokens' required if 'cross_attention' is not None")
+            if decoder_tokens is None:
+                raise ValueError("'decoder_tokens' required if 'cross_attention' is not None")
+            if include_layers is None:
+                include_layers = list(range(num_layers(cross_attention)))
+            cross_attention = format_attention(cross_attention, include_layers)
+            attn_data.append(
+                {
+                    'name': 'Cross',
+                    'attn': cross_attention.tolist(),
+                    'left_text': decoder_tokens,
+                    'right_text': encoder_tokens
+                }
+            )
+    else:
+        raise ValueError("You must specify at least one attention argument.")
+
+    if layer is not None and layer not in include_layers:
+        raise ValueError(f"Layer {layer} is not in include_layers: {include_layers}")
+
+    # Generate unique div id to enable multiple visualizations in one notebook
+    # vis_id = 'bertviz-%s'%(uuid.uuid4().hex)
+    vis_id = 'bertviz'#-%s'%(uuid.uuid4().hex)
+
+    # Compose html
+    if len(attn_data) > 1:
+        options = '\n'.join(
+            f'<option value="{i}">{attn_data[i]["name"]}</option>'
+            for i, d in enumerate(attn_data)
+        )
+        select_html = f'Attention: <select id="filter">{options}</select>'
+    else:
+        select_html = ""
+    vis_html = f"""      
+        <div id="{vis_id}" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;">
+            <span style="user-select:none">
+                Layer: <select id="layer"></select>
+                {select_html}
+            </span>
+            <div id='vis'></div>
+        </div>
+    """
+
+    for d in attn_data:
+        attn_seq_len_left = len(d['attn'][0][0])
+        if attn_seq_len_left != len(d['left_text']):
+            raise ValueError(
+                f"Attention has {attn_seq_len_left} positions, while number of tokens is {len(d['left_text'])} "
+                f"for tokens: {' '.join(d['left_text'])}"
+            )
+        attn_seq_len_right = len(d['attn'][0][0][0])
+        if attn_seq_len_right != len(d['right_text']):
+            raise ValueError(
+                f"Attention has {attn_seq_len_right} positions, while number of tokens is {len(d['right_text'])} "
+                f"for tokens: {' '.join(d['right_text'])}"
+            )
+        if prettify_tokens:
+            d['left_text'] = format_special_chars(d['left_text'])
+            d['right_text'] = format_special_chars(d['right_text'])
+    params = {
+        'attention': attn_data,
+        'default_filter': "0",
+        'root_div_id': vis_id,
+        'layer': layer,
+        'heads': heads,
+        'include_layers': include_layers
+    }
+
+    # require.js must be imported for Colab or JupyterLab:
+
+    if html_action == 'gradio': 
+        html1 = HTML('<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>')
+        html2 = HTML(vis_html)
+
+        return {'html1': html1, 'html2' : html2, 'params': params }
+
+
+    if html_action == 'view':
+        display(HTML('<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>'))
+        display(HTML(vis_html))
+        __location__ = os.path.realpath(
+            os.path.join(os.getcwd(), os.path.dirname(__file__)))
+        vis_js = open(os.path.join(__location__, 'head_view.js')).read().replace("PYTHON_PARAMS", json.dumps(params))
+        display(Javascript(vis_js))
+
+    elif html_action == 'return':
+        html1 = HTML('<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>')
+
+        html2 = HTML(vis_html)
+
+        __location__ = os.path.realpath(
+            os.path.join(os.getcwd(), os.path.dirname(__file__)))
+        vis_js = open(os.path.join(__location__, 'head_view.js')).read().replace("PYTHON_PARAMS", json.dumps(params))
+        html3 = Javascript(vis_js)
+        script = '\n<script type="text/javascript">\n' + html3.data + '\n</script>\n'
+
+        head_html = HTML(html1.data + html2.data + script)
+        return head_html
+
+    else:
+        raise ValueError("'html_action' parameter must be 'view' or 'return")

gradio_samples/bertviz/challenge_sets.csv

@@ -0,0 +1,109 @@
+name,Lang.,Source sentence,Challenge,category_minor,category_major,Interesting?
+Isabel challenge set,EN,The repeated calls from his mother [should] have alerted us.,Is subject-verb agrement correct? (Possible interference from distractors between the subject's head and the verb).,"S-V agreement, across distractors",Morpho-Syntactic,
+Isabel challenge set,EN,The sudden noise in the upper rooms [should] have alerted us.,Is subject-verb agrement correct? (Possible interference from distractors between the subject's head and the verb).,"S-V agreement, across distractors",Morpho-Syntactic,
+Isabel challenge set,EN,Their repeated failures to report the problem [should] have alerted us.,Is subject-verb agrement correct? (Possible interference from distractors between the subject's head and the verb).,"S-V agreement, across distractors",Morpho-Syntactic,
+Isabel challenge set,EN,She asked her brother not to be [arrogant].,Does the flagged adjective agree correctly with its subject? (Subject-control versus object-control verbs).,"S-V agreement, through control verbs",Morpho-Syntactic,
+Isabel challenge set,EN,She promised her brother not to be [arrogant].,Does the flagged adjective agree correctly with its subject? (Subject-control versus object-control verbs).,"S-V agreement, through control verbs",Morpho-Syntactic,
+Isabel challenge set,EN,She promised her doctor to remain [active] after retiring.,Does the flagged adjective agree correctly with its subject? (Subject-control versus object-control verbs).,"S-V agreement, through control verbs",Morpho-Syntactic,
+Isabel challenge set,EN,My mother promised my father to be more [prudent] on the road.,Does the flagged adjective agree correctly with its subject? (Subject-control versus object-control verbs).,"S-V agreement, through control verbs",Morpho-Syntactic,
+Isabel challenge set,EN,The woman was very [tall] and extremely [strong].,Do the marked verbs/adjective agree correctly with their subject? (Agreement distribution over coordinated predicates),"S-V agreement, coordinated targets",Morpho-Syntactic,
+Isabel challenge set,EN,Their politicians were more [ignorant] than [stupid].,Do the marked verbs/adjective agree correctly with their subject? (Agreement distribution over coordinated predicates),"S-V agreement, coordinated targets",Morpho-Syntactic,
+Isabel challenge set,EN,We [shouted] an insult and [left] abruptly.,Do the marked verbs/adjective agree correctly with their subject? (Agreement distribution over coordinated predicates),"S-V agreement, coordinated targets",Morpho-Syntactic,
+Isabel challenge set,EN,The cat and the dog [should] be [watched].,Do the marked verbs/adjective agree correctly with their subject? (Masculine singular ET masculine singular yields masculine plural).,"S-V agreement, feature calculus on coordinated source",Morpho-Syntactic,
+Isabel challenge set,EN,My father and my brother [will] be [happy] tomorrow.,Do the marked verbs/adjective agree correctly with their subject? (Masculine singular ET masculine singular yields masculine plural).,"S-V agreement, feature calculus on coordinated source",Morpho-Syntactic,
+Isabel challenge set,EN,My book and my pencil [could] be [stolen].,Do the marked verbs/adjective agree correctly with their subject? (Masculine singular ET masculine singular yields masculine plural).,"S-V agreement, feature calculus on coordinated source",Morpho-Syntactic,
+Isabel challenge set,EN,The cow and the hen [must] be [fed].,Do the marked verbs/adjectives agree correctly with their subject? (Feminine singular ET feminine singular yields feminine plural).,"S-V agreement, feature calculus on coordinated source",Morpho-Syntactic,
+Isabel challenge set,EN,My mother and my sister [will be happy] tomorrow.,Do the marked verbs/adjectives agree correctly with their subject? (Feminine singular ET feminine singular yields feminine plural).,"S-V agreement, feature calculus on coordinated source",Morpho-Syntactic,
+Isabel challenge set,EN,My shoes and my socks [will] be [found].,Do the marked verbs/adjectives agree correctly with their subject? (Feminine singular ET feminine singular yields feminine plural).,"S-V agreement, feature calculus on coordinated source",Morpho-Syntactic,
+Isabel challenge set,EN,The dog and the cow [are] [nervous].,Do the marked verbs/adjectives agree correctly with their subject? (Masculine singular ET feminine singular yields masculine plural.),"S-V agreement, feature calculus on coordinated source",Morpho-Syntactic,
+Isabel challenge set,EN,My father and my mother will be happy tomorrow.,Do the marked verbs/adjectives agree correctly with their subject? (Masculine singular ET feminine singular yields masculine plural.),"S-V agreement, feature calculus on coordinated source",Morpho-Syntactic,
+Isabel challenge set,EN,My refrigerator and my kitchen table [were] [stolen].,Do the marked verbs/adjectives agree correctly with their subject? (Masculine singular ET feminine singular yields masculine plural.),"S-V agreement, feature calculus on coordinated source",Morpho-Syntactic,
+Isabel challenge set,EN,Paul and I [could] easily be [convinced] to join you.,Do the marked verbs/adjectives agree correctly with their subject? (Smallest coordinated grammatical person wins.),"S-V agreement, feature calculus on coordinated source",Morpho-Syntactic,
+Isabel challenge set,EN,You and he [could] be [surprised] by her findings.,Do the marked verbs/adjectives agree correctly with their subject? (Smallest coordinated grammatical person wins.),"S-V agreement, feature calculus on coordinated source",Morpho-Syntactic,
+Isabel challenge set,EN,We and they [are] on different courses.,Do the marked verbs/adjectives agree correctly with their subject? (Smallest coordinated grammatical person wins.),"S-V agreement, feature calculus on coordinated source",Morpho-Syntactic,
+Isabel challenge set,EN,The woman who [saw] a mouse in the corridor is charming.,Are the agreement marks of the flagged participles the correct ones? (Past participle placed after auxiliary AVOIR agrees with verb object iff object precedes auxiliary. Otherwise participle is in masculine singular form).,"S-V agreement, past participles",Morpho-Syntactic,
+Isabel challenge set,EN,The woman that your brother [saw] in the corridor is charming.,Are the agreement marks of the flagged participles the correct ones? (Past participle placed after auxiliary AVOIR agrees with verb object iff object precedes auxiliary. Otherwise participle is in masculine singular form).,"S-V agreement, past participles",Morpho-Syntactic,
+Isabel challenge set,EN,The house that John has [visited] is crumbling.,Are the agreement marks of the flagged participles the correct ones? (Past participle placed after auxiliary AVOIR agrees with verb object iff object precedes auxiliary. Otherwise participle is in masculine singular form).,"S-V agreement, past participles",Morpho-Syntactic,
+Isabel challenge set,EN,John sold the car that he had [won] in a lottery.,Are the agreement marks of the flagged participles the correct ones? (Past participle placed after auxiliary AVOIR agrees with verb object iff object precedes auxiliary. Otherwise participle is in masculine singular form).,"S-V agreement, past participles",Morpho-Syntactic,
+Isabel challenge set,EN,He will come provided that you [come] too.,"Is the flagged verb in the correct mood? (Certain triggering verbs, adjectives or subordinate conjunctions, induce the subjunctive mood in the subordinate clause that they govern).",Subjunctive mood,Morpho-Syntactic,
+Isabel challenge set,EN,It is unfortunate that he is not [coming] either.,"Is the flagged verb in the correct mood? (Certain triggering verbs, adjectives or subordinate conjunctions, induce the subjunctive mood in the subordinate clause that they govern).",Subjunctive mood,Morpho-Syntactic,
+Isabel challenge set,EN,I requested that families not [be] separated.,"Is the flagged verb in the correct mood? (Certain triggering verbs, adjectives or subordinate conjunctions, induce the subjunctive mood in the subordinate clause that they govern).",Subjunctive mood,Morpho-Syntactic,
+Isabel challenge set,EN,[Mary] sorely misses [Jim].,Are the experiencer and the object of the ``missing'' situation correctly preserved in the French translation? (Argument switch).,Argument switch,Lexico-Syntactic,
+Isabel challenge set,EN,[My sister] is really missing [New York.],Are the experiencer and the object of the ``missing'' situation correctly preserved in the French translation? (Argument switch).,Argument switch,Lexico-Syntactic,
+Isabel challenge set,EN,What [he] misses most is [his dog].,Are the experiencer and the object of the ``missing'' situation correctly preserved in the French translation? (Argument switch).,Argument switch,Lexico-Syntactic,
+Isabel challenge set,EN,John gave [his wonderful wife] a nice present.,Are ``gift'' and ``recipient'' arguments correctly rendered in French? (English double-object constructions),Double-object verbs,Lexico-Syntactic,
+Isabel challenge set,EN,John told [the kids] a nice story.,Are ``gift'' and ``recipient'' arguments correctly rendered in French? (English double-object constructions),Double-object verbs,Lexico-Syntactic,
+Isabel challenge set,EN,John sent [his mother] a nice postcard.,Are ``gift'' and ``recipient'' arguments correctly rendered in French? (English double-object constructions),Double-object verbs,Lexico-Syntactic,
+Isabel challenge set,EN,John [failed to] see the relevance of this point.,Is the meaning of ``fail to'' correctly rendered in the French translation?,Fail to,Lexico-Syntactic,
+Isabel challenge set,EN,He failed to respond.,Is the meaning of ``fail to'' correctly rendered in the French translation?,Fail to,Lexico-Syntactic,
+Isabel challenge set,EN,Those who fail to comply with this requirement will be penalized.,Is the meaning of ``fail to'' correctly rendered in the French translation?,Fail to,Lexico-Syntactic,
+Isabel challenge set,EN,John would like to [swim across] the river.,Is the movement action expressed in the English source correctly rendered in French? (Manner-of-movement verbs with path argument may need to be rephrased in French).,Manner-of-movement verbs,Lexico-Syntactic,
+Isabel challenge set,EN,They [ran into] the room.,Is the movement action expressed in the English source correctly rendered in French? (Manner-of-movement verbs with path argument may need to be rephrased in French).,Manner-of-movement verbs,Lexico-Syntactic,
+Isabel challenge set,EN,The man [ran out of] the park.,Is the movement action expressed in the English source correctly rendered in French? (Manner-of-movement verbs with path argument may need to be rephrased in French).,Manner-of-movement verbs,Lexico-Syntactic,
+Isabel challenge set,EN,John [guitared his way] to San Francisco.,Hard example featuring spontaneous noun-to-verb derivation (``nonce verb'').,Manner-of-movement verbs,Lexico-Syntactic,
+Isabel challenge set,EN,Paul [knows] that this is a fact.,Is the French verb for ``know'' correctly chosen? (Choice between ``savoir''/``connaître'' depends on syntactic nature of its object),Overlapping subcat frames,Lexico-Syntactic,
+Isabel challenge set,EN,Paul [knows] this story.,Is the French verb for ``know'' correctly chosen? (Choice between ``savoir''/``connaître'' depends on syntactic nature of its object),Overlapping subcat frames,Lexico-Syntactic,
+Isabel challenge set,EN,Paul [knows] this story is hard to believe.,Is the French verb for ``know'' correctly chosen? (Choice between ``savoir''/``connaître'' depends on syntactic nature of its object),Overlapping subcat frames,Lexico-Syntactic,
+Isabel challenge set,EN,He [knows] my sister will not take it.,Is the French verb for ``know'' correctly chosen? (Choice between ``savoir''/``connaître'' depends on syntactic nature of its object),Overlapping subcat frames,Lexico-Syntactic,
+Isabel challenge set,EN,My sister [knows] your son is reliable.,Is the French verb for ``know'' correctly chosen? (Choice between ``savoir''/``connaître'' depends on syntactic nature of its object),Overlapping subcat frames,Lexico-Syntactic,
+Isabel challenge set,EN,John believes [Bill to be dishonest].,Is the English ``NP to VP'' complement correctly rendred in the French translation? (Sometimes one needs to translate this structure as a finite clause).,NP to VP,Lexico-Syntactic,
+Isabel challenge set,EN,He liked [his father to tell him stories].,Is the English ``NP to VP'' complement correctly rendred in the French translation? (Sometimes one needs to translate this structure as a finite clause).,NP to VP,Lexico-Syntactic,
+Isabel challenge set,EN,She wanted [her mother to let her go].,Is the English ``NP to VP'' complement correctly rendred in the French translation? (Sometimes one needs to translate this structure as a finite clause).,NP to VP,Lexico-Syntactic,
+Isabel challenge set,EN,John [cooked] a big chicken.,Is the English verb correctly rendered in the French translation? (Agentive use of some French verbs require embedding under ``faire'').,Factitives,Lexico-Syntactic,
+Isabel challenge set,EN,John [melted] a lot of ice.,Is the English verb correctly rendered in the French translation? (Agentive use of some French verbs require embedding under ``faire'').,Factitives,Lexico-Syntactic,
+Isabel challenge set,EN,She likes to [grow] flowers.,Is the English verb correctly rendered in the French translation? (Agentive use of some French verbs require embedding under ``faire'').,Factitives,Lexico-Syntactic,
+Isabel challenge set,EN,Use the meat knife.,Is the English nominal compound rendered with the right preposition in the French translation?,Noun Compounds,Lexico-Syntactic,
+Isabel challenge set,EN,Use the butter knife.,Is the English nominal compound rendered with the right preposition in the French translation?,Noun Compounds,Lexico-Syntactic,
+Isabel challenge set,EN,Use the steak knife.,Is the English nominal compound rendered with the right preposition in the French translation?,Noun Compounds,Lexico-Syntactic,
+Isabel challenge set,EN,Clean the water filter.,Is the English nominal compound rendered with the right preposition in the French translation?,Noun Compounds,Lexico-Syntactic,
+Isabel challenge set,EN,Clean the juice filter.,Is the English nominal compound rendered with the right preposition in the French translation?,Noun Compounds,Lexico-Syntactic,
+Isabel challenge set,EN,Clean the tea filter.,Is the English nominal compound rendered with the right preposition in the French translation?,Noun Compounds,Lexico-Syntactic,
+Isabel challenge set,EN,Clean the cloth filter.,Is the English nominal compound rendered with the right preposition in the French translation?,Noun Compounds,Lexico-Syntactic,
+Isabel challenge set,EN,Clean the metal filter.,Is the English nominal compound rendered with the right preposition in the French translation?,Noun Compounds,Lexico-Syntactic,
+Isabel challenge set,EN,Clean the paper filter.,Is the English nominal compound rendered with the right preposition in the French translation?,Noun Compounds,Lexico-Syntactic,
+Isabel challenge set,EN,Stop [beating around the bush].,Is the English idiomatic expression correctly rendered with a suitable French idiomatic expression?,Common idioms,Lexico-Syntactic,
+Isabel challenge set,EN,You are [putting the cart before the horse].,Is the English idiomatic expression correctly rendered with a suitable French idiomatic expression?,Common idioms,Lexico-Syntactic,
+Isabel challenge set,EN,His comment proved to be [the straw that broke the camel's back].,Is the English idiomatic expression correctly rendered with a suitable French idiomatic expression?,Common idioms,Lexico-Syntactic,
+Isabel challenge set,EN,His argument really [hit the nail on the head].,Is the English idiomatic expression correctly rendered with a suitable French idiomatic expression?,Common idioms,Lexico-Syntactic,
+Isabel challenge set,EN,It's [no use crying over spilt milk].,Is the English idiomatic expression correctly rendered with a suitable French idiomatic expression?,Common idioms,Lexico-Syntactic,
+Isabel challenge set,EN,It is [no use crying over spilt milk].,Is the English idiomatic expression correctly rendered with a suitable French idiomatic expression?,Common idioms,Lexico-Syntactic,
+Isabel challenge set,EN,The cart has been put before the horse.,Is the English idiomatic expression correctly rendered with a suitable French idiomatic expression?,Syntactically flexible idioms,Lexico-Syntactic,
+Isabel challenge set,EN,"With this argument, [the nail has been hit on the head].",Is the English idiomatic expression correctly rendered with a suitable French idiomatic expression?,Syntactically flexible idioms,Lexico-Syntactic,
+Isabel challenge set,EN,[Have the kids] ever watched that movie?,Is the English question correctly rendered as a French question?,Yes-no question syntax,Syntactic,
+Isabel challenge set,EN,[Hasn't your boss denied you] a promotion?,Is the English question correctly rendered as a French question?,Yes-no question syntax,Syntactic,
+Isabel challenge set,EN,[Shouldn't I attend] this meeting?,Is the English question correctly rendered as a French question?,Yes-no question syntax,Syntactic,
+Isabel challenge set,EN,"Mary looked really happy tonight, [didn't she]?",Is the English ``tag question'' element correctly rendered in the translation?,Tag questions,Syntactic,
+Isabel challenge set,EN,"We should not do that again, [should we]?",Is the English ``tag question'' element correctly rendered in the translation?,Tag questions,Syntactic,
+Isabel challenge set,EN,"She was perfect tonight, [was she not]?",Is the English ``tag question'' element correctly rendered in the translation?,Tag questions,Syntactic,
+Isabel challenge set,EN,The guy [that] she is going out [with] is handsome.,Is the dangling preposition of the English sentence correctly placed in the French translation?,WH-MVT and stranded preps,Syntactic,
+Isabel challenge set,EN,[Whom] is she going out [with] these days?,Is the dangling preposition of the English sentence correctly placed in the French translation?,WH-MVT and stranded preps,Syntactic,
+Isabel challenge set,EN,The girl [that] he has been talking [about] is smart.,Is the dangling preposition of the English sentence correctly placed in the French translation?,WH-MVT and stranded preps,Syntactic,
+Isabel challenge set,EN,[Who] was he talking [to] when you left?,Is the dangling preposition of the English sentence correctly placed in the French translation?,WH-MVT and stranded preps,Syntactic,
+Isabel challenge set,EN,The city [that] he is arriving [from] is dangerous.,Is the dangling preposition of the English sentence correctly placed in the French translation?,WH-MVT and stranded preps,Syntactic,
+Isabel challenge set,EN,[Where] is he arriving [from]?,Is the dangling preposition of the English sentence correctly placed in the French translation?,WH-MVT and stranded preps,Syntactic,
+Isabel challenge set,EN,Rarely [did the dog] run.,Is the adverb-triggered subject-verb inversion in the English sentence correctly rendered in the French translation?,Adverb-triggered inversion,Syntactic,
+Isabel challenge set,EN,Never before [had she been] so unhappy.,Is the adverb-triggered subject-verb inversion in the English sentence correctly rendered in the French translation?,Adverb-triggered inversion,Syntactic,
+Isabel challenge set,EN,Nowhere [were the birds] so colorful.,Is the adverb-triggered subject-verb inversion in the English sentence correctly rendered in the French translation?,Adverb-triggered inversion,Syntactic,
+Isabel challenge set,EN,Soup [is eaten] with a large spoon.,Is the generic statement made in the English sentence correctly and naturally rendered in the French translation?,Middle voice,Syntactic,
+Isabel challenge set,EN,Masonry [is cut] using a diamond blade.,Is the generic statement made in the English sentence correctly and naturally rendered in the French translation?,Middle voice,Syntactic,
+Isabel challenge set,EN,Champagne [is drunk] in a glass called a flûte.,Is the generic statement made in the English sentence correctly and naturally rendered in the French translation?,Middle voice,Syntactic,
+Isabel challenge set,EN,"[Should] Paul leave, I would be sad.",Fronted ``should'' is interpreted as a conditional subordinator. It is normally translated as ``si'' with imperfect tense.,Fronted ``should'',Syntactic,
+Isabel challenge set,EN,"Should he become president, she would be promoted immediately.",Fronted ``should'' is interpreted as a conditional subordinator. It is normally translated as ``si'' with imperfect tense.,Fronted ``should'',Syntactic,
+Isabel challenge set,EN,"[Should] he fall, he would get up again immediately.",Fronted ``should'' is interpreted as a conditional subordinator. It is normally translated as ``si'' with imperfect tense.,Fronted ``should'',Syntactic,
+Isabel challenge set,EN,She had a lot of money but he did not have [any].,Are the English pronouns correctly rendered in the French translations?,Clitic pronouns,Syntactic,
+Isabel challenge set,EN,He did not talk [to them] very often.,Are the English pronouns correctly rendered in the French translations?,Clitic pronouns,Syntactic,
+Isabel challenge set,EN,The men are watching [each other].,Are the English pronouns correctly rendered in the French translations?,Clitic pronouns,Syntactic,
+Isabel challenge set,EN,He gave [it] to the man.,Are the English pronouns correctly rendered in the French translations?,Clitic pronouns,Syntactic,
+Isabel challenge set,EN,He did not give [it] to [her].,Are the English pronouns correctly rendered in the French translations?,Clitic pronouns,Syntactic,
+Isabel challenge set,EN,The [first four] men were exhausted.,Is the relative order of the ordinals and numerals correct in the French tranlation?,Ordinal placement,Syntactic,
+Isabel challenge set,EN,The [last three] candidates were eliminated.,Is the relative order of the ordinals and numerals correct in the French tranlation?,Ordinal placement,Syntactic,
+Isabel challenge set,EN,The [other two] guys left without paying.,Is the relative order of the ordinals and numerals correct in the French tranlation?,Ordinal placement,Syntactic,
+Isabel challenge set,EN,He washed [his] hands.,Is the French translation correct and natural both in: a) its use of a particular determiner on the body part noun; and b) the presence or absence of a reflexive pronoun before the verb?,Inalienable possession,Syntactic,
+Isabel challenge set,EN,I brushed [my] teeth.,Is the French translation correct and natural both in: a) its use of a particular determiner on the body part noun; and b) the presence or absence of a reflexive pronoun before the verb?,Inalienable possession,Syntactic,
+Isabel challenge set,EN,You brushed [your] teeth.,Is the French translation correct and natural both in: a) its use of a particular determiner on the body part noun; and b) the presence or absence of a reflexive pronoun before the verb?,Inalienable possession,Syntactic,
+Isabel challenge set,EN,I raised [my] hand.,Is the French translation correct and natural both in: a) its use of a particular determiner on the body part noun; and b) the presence or absence of a reflexive pronoun before the verb?,Inalienable possession,Syntactic,
+Isabel challenge set,EN,He turned [his] head.,Is the French translation correct and natural both in: a) its use of a particular determiner on the body part noun; and b) the presence or absence of a reflexive pronoun before the verb?,Inalienable possession,Syntactic,
+Isabel challenge set,EN,He raised his eyes to heaven.,Is the French translation correct and natural both in: a) its use of a particular determiner on the body part noun; and b) the presence or absence of a reflexive pronoun before the verb?,Inalienable possession,Syntactic,
+Isabel challenge set,EN,The strangers [] the woman saw were working.,Is the English zero relative pronoun correctly translated as a non-zero one in the French translation?,Zero REL PRO,Syntactic,
+Isabel challenge set,EN,The man [] your sister hates is evil.,Is the English zero relative pronoun correctly translated as a non-zero one in the French translation?,Zero REL PRO,Syntactic,
+Isabel challenge set,EN,The girl [] my friend was talking about is gone.,Is the English zero relative pronoun correctly translated as a non-zero one in the French translation?,Zero REL PRO,Syntactic,

gradio_samples/bertviz/plotsjs_bertviz.js

@@ -0,0 +1,430 @@
+
+
+
+async () => {
+	// set testFn() function on globalThis, so you html onlclick can access it
+ 
+	
+	 globalThis.testFn = () => {
+	   document.getElementById('demo').innerHTML = "Hello-bertviz?"
+	 }; 
+
+	//  await import * as mod from "/my-module.js";
+
+	 const d3 = await import("https://cdn.jsdelivr.net/npm/d3@5/+esm");
+	 const $ = await import("https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js");
+	 
+	 globalThis.$ = $;
+
+	//  const $ = await import("https://cdn.jsdelivr.net/npm/jquery@2/+esm");
+	// import $ from "jquery"; 
+	// import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
+	//  await import("https://cdn.jsdelivr.net/npm/jquery@2/+esm");
+
+	// export for others scripts to use
+	// window.$ = window.jQuery = jQuery;
+
+	// const d3 = await import("https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min");
+	// const $ = await import("https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min");
+
+	globalThis.d3Fn = () => {
+		d3.select('#viz').append('svg')
+				.append('rect')
+				.attr('width', 50)
+				.attr('height', 50)
+				.attr('fill', 'black')
+				.on('mouseover', function(){d3.select(this).attr('fill', 'red')})
+				.on('mouseout', function(){d3.select(this).attr('fill', 'black')});
+
+    }; 
+
+	
+
+	// 
+
+	globalThis.testFn_out = (val,model) => {
+		// document.getElementById('demo').innerHTML = val
+		console.log(val); 
+		// globalThis.d3Fn(); 
+		return([val,model]);
+	  }; 
+
+	globalThis.testFn_out_json = (data) => {
+		console.log(data); 
+		var $ = jQuery;
+		console.log($('#viz')); 
+
+		attViz(data);
+
+		return(['string', {}])
+
+	};
+
+
+
+	function attViz(PYTHON_PARAMS) {
+		var $ = jQuery;
+	const params = PYTHON_PARAMS; // HACK: PYTHON_PARAMS is a template marker that is replaced by actual params.
+	const TEXT_SIZE = 15;
+	const BOXWIDTH = 110;
+	const BOXHEIGHT = 22.5;
+	const MATRIX_WIDTH = 115;
+	const CHECKBOX_SIZE = 20;
+	const TEXT_TOP = 30;
+
+	console.log("d3 version in ffuntions", d3.version)
+	let headColors;
+	try {
+		headColors = d3.scaleOrdinal(d3.schemeCategory10);
+	} catch (err) {
+		console.log('Older d3 version')
+		headColors = d3.scale.category10();
+	}
+	let config = {};
+	// globalThis.
+	initialize();
+	renderVis();
+
+	function initialize() {
+		// globalThis.initialize = () => {
+
+			console.log("init")
+		config.attention = params['attention'];
+		config.filter = params['default_filter'];
+		config.rootDivId = params['root_div_id'];
+		config.nLayers = config.attention[config.filter]['attn'].length;
+		config.nHeads = config.attention[config.filter]['attn'][0].length;
+		config.layers = params['include_layers']
+
+		if (params['heads']) {
+			config.headVis = new Array(config.nHeads).fill(false);
+			params['heads'].forEach(x => config.headVis[x] = true);
+		} else {
+			config.headVis = new Array(config.nHeads).fill(true);
+		}
+		config.initialTextLength = config.attention[config.filter].right_text.length;
+		config.layer_seq = (params['layer'] == null ? 0 : config.layers.findIndex(layer => params['layer'] === layer));
+		config.layer = config.layers[config.layer_seq]
+		
+		// '#' + temp1.root_div_id+ ' #layer'
+		$('#' + config.rootDivId+ ' #layer').empty();
+		
+		let layerEl = $('#' + config.rootDivId+ ' #layer');
+		console.log(layerEl)
+		for (const layer of config.layers) {
+			layerEl.append($("<option />").val(layer).text(layer));
+		}
+		layerEl.val(config.layer).change();
+		layerEl.on('change', function (e) {
+			config.layer = +e.currentTarget.value;
+			config.layer_seq = config.layers.findIndex(layer => config.layer === layer);
+			renderVis();
+		});
+
+		$('#'+config.rootDivId+' #filter').on('change', function (e) {
+		// $(`#${config.rootDivId} #filter`).on('change', function (e) {
+
+			config.filter = e.currentTarget.value;
+			renderVis();
+		});
+	}
+
+	function renderVis() {
+
+		// Load parameters
+		const attnData = config.attention[config.filter];
+		const leftText = attnData.left_text;
+		const rightText = attnData.right_text;
+
+		// Select attention for given layer
+		const layerAttention = attnData.attn[config.layer_seq];
+
+		// Clear vis
+		$('#'+config.rootDivId+' #vis').empty();
+
+		// Determine size of visualization
+		const height = Math.max(leftText.length, rightText.length) * BOXHEIGHT + TEXT_TOP;
+		const svg = d3.select('#'+ config.rootDivId +' #vis')
+			.append('svg')
+			.attr("width", "100%")
+			.attr("height", height + "px");
+
+		// Display tokens on left and right side of visualization
+		renderText(svg, leftText, true, layerAttention, 0);
+		renderText(svg, rightText, false, layerAttention, MATRIX_WIDTH + BOXWIDTH);
+
+		// Render attention arcs
+		renderAttention(svg, layerAttention);
+
+		// Draw squares at top of visualization, one for each head
+		drawCheckboxes(0, svg, layerAttention);
+	}
+
+	function renderText(svg, text, isLeft, attention, leftPos) {
+
+		const textContainer = svg.append("svg:g")
+			.attr("id", isLeft ? "left" : "right");
+
+		// Add attention highlights superimposed over words
+		textContainer.append("g")
+			.classed("attentionBoxes", true)
+			.selectAll("g")
+			.data(attention)
+			.enter()
+			.append("g")
+			.attr("head-index", (d, i) => i)
+			.selectAll("rect")
+			.data(d => isLeft ? d : transpose(d)) // if right text, transpose attention to get right-to-left weights
+			.enter()
+			.append("rect")
+			.attr("x", function () {
+				var headIndex = +this.parentNode.getAttribute("head-index");
+				return leftPos + boxOffsets(headIndex);
+			})
+			.attr("y", (+1) * BOXHEIGHT)
+			.attr("width", BOXWIDTH / activeHeads())
+			.attr("height", BOXHEIGHT)
+			.attr("fill", function () {
+				return headColors(+this.parentNode.getAttribute("head-index"))
+			})
+			.style("opacity", 0.0);
+
+		const tokenContainer = textContainer.append("g").selectAll("g")
+			.data(text)
+			.enter()
+			.append("g");
+
+		// Add gray background that appears when hovering over text
+		tokenContainer.append("rect")
+			.classed("background", true)
+			.style("opacity", 0.0)
+			.attr("fill", "lightgray")
+			.attr("x", leftPos)
+			.attr("y", (d, i) => TEXT_TOP + i * BOXHEIGHT)
+			.attr("width", BOXWIDTH)
+			.attr("height", BOXHEIGHT);
+
+		// Add token text
+		const textEl = tokenContainer.append("text")
+			.text(d => d)
+			.attr("font-size", TEXT_SIZE + "px")
+			.style("cursor", "default")
+			.style("-webkit-user-select", "none")
+			.attr("x", leftPos)
+			.attr("y", (d, i) => TEXT_TOP + i * BOXHEIGHT);
+
+		if (isLeft) {
+			textEl.style("text-anchor", "end")
+				.attr("dx", BOXWIDTH - 0.5 * TEXT_SIZE)
+				.attr("dy", TEXT_SIZE);
+		} else {
+			textEl.style("text-anchor", "start")
+				.attr("dx", +0.5 * TEXT_SIZE)
+				.attr("dy", TEXT_SIZE);
+		}
+
+		tokenContainer.on("mouseover", function (d, index) {
+
+			// Show gray background for moused-over token
+			textContainer.selectAll(".background")
+				.style("opacity", (d, i) => i === index ? 1.0 : 0.0)
+
+			// Reset visibility attribute for any previously highlighted attention arcs
+			svg.select("#attention")
+				.selectAll("line[visibility='visible']")
+				.attr("visibility", null)
+
+			// Hide group containing attention arcs
+			svg.select("#attention").attr("visibility", "hidden");
+
+			// Set to visible appropriate attention arcs to be highlighted
+			if (isLeft) {
+				svg.select("#attention").selectAll("line[left-token-index='" + index + "']").attr("visibility", "visible");
+			} else {
+				svg.select("#attention").selectAll("line[right-token-index='" + index + "']").attr("visibility", "visible");
+			}
+
+			// Update color boxes superimposed over tokens
+			const id = isLeft ? "right" : "left";
+			const leftPos = isLeft ? MATRIX_WIDTH + BOXWIDTH : 0;
+			svg.select("#" + id)
+				.selectAll(".attentionBoxes")
+				.selectAll("g")
+				.attr("head-index", (d, i) => i)
+				.selectAll("rect")
+				.attr("x", function () {
+					const headIndex = +this.parentNode.getAttribute("head-index");
+					return leftPos + boxOffsets(headIndex);
+				})
+				.attr("y", (d, i) => TEXT_TOP + i * BOXHEIGHT)
+				.attr("width", BOXWIDTH / activeHeads())
+				.attr("height", BOXHEIGHT)
+				.style("opacity", function (d) {
+					const headIndex = +this.parentNode.getAttribute("head-index");
+					if (config.headVis[headIndex])
+						if (d) {
+							return d[index];
+						} else {
+							return 0.0;
+						}
+					else
+						return 0.0;
+				});
+		});
+
+		textContainer.on("mouseleave", function () {
+
+			// Unhighlight selected token
+			d3.select(this).selectAll(".background")
+				.style("opacity", 0.0);
+
+			// Reset visibility attributes for previously selected lines
+			svg.select("#attention")
+				.selectAll("line[visibility='visible']")
+				.attr("visibility", null) ;
+			svg.select("#attention").attr("visibility", "visible");
+
+			// Reset highlights superimposed over tokens
+			svg.selectAll(".attentionBoxes")
+				.selectAll("g")
+				.selectAll("rect")
+				.style("opacity", 0.0);
+		});
+	}
+
+	function renderAttention(svg, attention) {
+
+		// Remove previous dom elements
+		svg.select("#attention").remove();
+
+		// Add new elements
+		svg.append("g")
+			.attr("id", "attention") // Container for all attention arcs
+			.selectAll(".headAttention")
+			.data(attention)
+			.enter()
+			.append("g")
+			.classed("headAttention", true) // Group attention arcs by head
+			.attr("head-index", (d, i) => i)
+			.selectAll(".tokenAttention")
+			.data(d => d)
+			.enter()
+			.append("g")
+			.classed("tokenAttention", true) // Group attention arcs by left token
+			.attr("left-token-index", (d, i) => i)
+			.selectAll("line")
+			.data(d => d)
+			.enter()
+			.append("line")
+			.attr("x1", BOXWIDTH)
+			.attr("y1", function () {
+				const leftTokenIndex = +this.parentNode.getAttribute("left-token-index")
+				return TEXT_TOP + leftTokenIndex * BOXHEIGHT + (BOXHEIGHT / 2)
+			})
+			.attr("x2", BOXWIDTH + MATRIX_WIDTH)
+			.attr("y2", (d, rightTokenIndex) => TEXT_TOP + rightTokenIndex * BOXHEIGHT + (BOXHEIGHT / 2))
+			.attr("stroke-width", 2)
+			.attr("stroke", function () {
+				const headIndex = +this.parentNode.parentNode.getAttribute("head-index");
+				return headColors(headIndex)
+			})
+			.attr("left-token-index", function () {
+				return +this.parentNode.getAttribute("left-token-index")
+			})
+			.attr("right-token-index", (d, i) => i)
+		;
+		updateAttention(svg)
+	}
+
+	function updateAttention(svg) {
+		svg.select("#attention")
+			.selectAll("line")
+			.attr("stroke-opacity", function (d) {
+				const headIndex = +this.parentNode.parentNode.getAttribute("head-index");
+				// If head is selected
+				if (config.headVis[headIndex]) {
+					// Set opacity to attention weight divided by number of active heads
+					return d / activeHeads()
+				} else {
+					return 0.0;
+				}
+			})
+	}
+
+	function boxOffsets(i) {
+		const numHeadsAbove = config.headVis.reduce(
+			function (acc, val, cur) {
+				return val && cur < i ? acc + 1 : acc;
+			}, 0);
+		return numHeadsAbove * (BOXWIDTH / activeHeads());
+	}
+
+	function activeHeads() {
+		return config.headVis.reduce(function (acc, val) {
+			return val ? acc + 1 : acc;
+		}, 0);
+	}
+
+	function drawCheckboxes(top, svg) {
+		const checkboxContainer = svg.append("g");
+		const checkbox = checkboxContainer.selectAll("rect")
+			.data(config.headVis)
+			.enter()
+			.append("rect")
+			.attr("fill", (d, i) => headColors(i))
+			.attr("x", (d, i) => i * CHECKBOX_SIZE)
+			.attr("y", top)
+			.attr("width", CHECKBOX_SIZE)
+			.attr("height", CHECKBOX_SIZE);
+
+		function updateCheckboxes() {
+			checkboxContainer.selectAll("rect")
+				.data(config.headVis)
+				.attr("fill", (d, i) => d ? headColors(i): lighten(headColors(i)));
+		}
+
+		updateCheckboxes();
+
+		checkbox.on("click", function (d, i) {
+			if (config.headVis[i] && activeHeads() === 1) return;
+			config.headVis[i] = !config.headVis[i];
+			updateCheckboxes();
+			updateAttention(svg);
+		});
+
+		checkbox.on("dblclick", function (d, i) {
+			// If we double click on the only active head then reset
+			if (config.headVis[i] && activeHeads() === 1) {
+				config.headVis = new Array(config.nHeads).fill(true);
+			} else {
+				config.headVis = new Array(config.nHeads).fill(false);
+				config.headVis[i] = true;
+			}
+			updateCheckboxes();
+			updateAttention(svg);
+		});
+	}
+
+	function lighten(color) {
+		const c = d3.hsl(color);
+		const increment = (1 - c.l) * 0.6;
+		c.l += increment;
+		c.s -= increment;
+		return c;
+	}
+
+	function transpose(mat) {
+		return mat[0].map(function (col, i) {
+			return mat.map(function (row) {
+				return row[i];
+			});
+		});
+	}
+
+	}
+	// );
+
+
+
+}
+

gradio_samples/bertviz/requirements.txt

@@ -0,0 +1,3 @@
+inseq
+bertviz
+jupyter