Final style update

app.py

@@ -4,7 +4,8 @@ import os
 import gradio as gr
 import spaces
 from contents import (
-    citation,
+    pecore_citation,
+    inseq_citation,
     description,
     examples,
     how_it_works_intro,
@@ -12,12 +13,14 @@ from contents import (
     cci_explanation,
     how_to_use,
     example_explanation,
+    show_code_modal,
     subtitle,
     title,
     powered_by,
     support,
 )
 from gradio_highlightedtextbox import HighlightedTextbox
+from gradio_modal import Modal
 from presets import (
     set_chatml_preset,
     set_cora_preset,
@@ -178,7 +181,9 @@ with gr.Blocks(css=custom_css) as demo:
                 input_current_text = gr.Textbox(
                     label="Input query", placeholder="Your input query..."
                 )
-                attribute_input_button = gr.Button("Run PECoRe", variant="primary")
+                with gr.Row(equal_height=True):
+                    show_code_btn = gr.Button("Show code", variant="secondary")
+                    attribute_input_button = gr.Button("Run PECoRe", variant="primary")
             with gr.Column():
                 pecore_output_highlights = HighlightedTextbox(
                     value=[
@@ -215,7 +220,6 @@ with gr.Blocks(css=custom_css) as demo:
         attribute_input_examples = gr.Examples(
             examples,
             inputs=[input_current_text, input_context_text],
-            outputs=pecore_output_highlights,
             examples_per_page=1,
         )
     with gr.Tab("⚙️ Parameters") as params_tab:
@@ -478,7 +482,16 @@ with gr.Blocks(css=custom_css) as demo:
     with gr.Tab("🔧 Usage Guide"):
         gr.Markdown(how_to_use)
         gr.Markdown(example_explanation)
-        update_code_snippets = gr.Button("Update code snippets", variant="primary")
+    with gr.Tab("📚 Citing PECoRe"):
+        gr.Markdown("To refer to the PECoRe framework for context usage detection, cite:")
+        gr.Code(pecore_citation, interactive=False, label="PECoRe (Sarti et al., 2024)")
+        gr.Markdown("If you use the Inseq implementation of PECoRe (<a href=\"https://inseq.org/en/latest/main_classes/cli.html#attribute-context\"><code>inseq attribute-context</code></a>, including this demo), please also cite:")
+        gr.Code(inseq_citation, interactive=False, label="Inseq (Sarti et al., 2023)")
+    with gr.Row(elem_classes="footer-container"):
+        gr.Markdown(powered_by)
+        gr.Markdown(support)
+    with Modal(visible=False) as code_modal:
+        gr.Markdown(show_code_modal)
         with gr.Row(equal_height=True):
             python_code_snippet = gr.Code(
                 value="""Generate Python code snippet by pressing the button.""",
@@ -494,12 +507,6 @@ with gr.Blocks(css=custom_css) as demo:
                 interactive=False,
                 show_label=True,
             )
-    with gr.Tab("📚 Citing PECoRe"):
-        gr.Markdown(citation)
-    with gr.Row(elem_classes="footer-container"):
-        gr.Markdown(powered_by)
-        gr.Markdown(support)
-
 
     # Main logic
 
@@ -650,11 +657,10 @@ with gr.Blocks(css=custom_css) as demo:
         ],
     ).success(preload_model, inputs=load_model_args, cancels=load_model_event)
 
-    update_code_snippets.click(
+    show_code_btn.click(
         update_code_snippets_fn,
         inputs=pecore_args,
         outputs=[python_code_snippet, shell_code_snippet],
-    
-    )
+    ).then(lambda: Modal(visible=True), None, code_modal)
 
 demo.launch(allowed_paths=["outputs/", "img/"])

contents.py

@@ -54,19 +54,15 @@ example_explanation = """
     <li>When using a model, make sure that the <b>contextual and contextless templates are set to match the expected format</b>. You can use presets to auto-fill these for the provided models.</li>
     <li>If you are using an encoder-decoder expecting an output context (e.g. the multilingual MT preset), the <b>output context should be provided manually</b> before running PECoRe in the <code>Generation context</code> parameter. This is a requirement for the demo because the splitting between output context and current cannot be reliably performed in an automatic way. However, the <code>inseq attribute-context</code> CLI command actually support various strategies, including prompting users for a split and/or trying an automatic source-target alignment. </li>
 </ol>
-<h2>Using PECoRe from Python with Inseq</h3>
+"""
+
+show_code_modal = """
+<h2>Using PECoRe CLI</h3>
 <p>This demo is useful for testing out various models and methods for PECoRe attribution, but the <a href="https://inseq.org/en/latest/main_classes/cli.html#attribute-context"><code>inseq attribute-context</code></a> CLI command is the way to go if you want to run experiments on several examples, or if you want to exploit the full customizability of the Inseq API.</p>
-<p>The utility we provide in this section allows you to generate Python and Shell code calling the Inseq CLI with the parameters you set in the interface. <b>We recommend using the Python version for repeated evaluation, since it allows for model-preloading.</b></p>
-<p>Once you are satisfied with the parameters you set (including context/query strings in the <code>🐑 Demo</code> tab), just press the button and get your code snippets ready for usage! 🤗</p>
+<p>The snippets provided below are updated based on the current parameter configuration of the demo, and allow you to use Python and Shell code to call the Inseq CLI. <b>We recommend using the Python version for repeated evaluation, since it allows for model-preloading.</b></p>
 """
 
-citation = r"""
-<p>To refer to the PECoRe framework for context usage detection, cite:</p>
-<div class="code_wrap"><button class="copy_code_button" title="copy">
-<span class="copy-text"><svg viewBox="0 0 32 32" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z" fill="currentColor"></path><path d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" fill="currentColor"></path></svg></span>
-<span class="check"><svg stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
-</button><pre><code>
-@inproceedings{sarti-etal-2023-quantifying,
+pecore_citation = """@inproceedings{sarti-etal-2023-quantifying,
     title = "Quantifying the Plausibility of Context Reliance in Neural Machine Translation",
     author = "Sarti, Gabriele and
         Chrupa{\l}a, Grzegorz and
@@ -78,15 +74,9 @@ citation = r"""
     address = "Vienna, Austria",
     publisher = "OpenReview",
     url = "https://openreview.net/forum?id=XTHfNGI3zT"
-}
-</code></pre></div>
-
-If you use the Inseq implementation of PECoRe (<a href="https://inseq.org/en/latest/main_classes/cli.html#attribute-context"><code>inseq attribute-context</code></a>, including this demo), please also cite:
-<div class="code_wrap"><button class="copy_code_button" title="copy">
-<span class="copy-text"><svg viewBox="0 0 32 32" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z" fill="currentColor"></path><path d="M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z" fill="currentColor"></path></svg></span>
-<span class="check"><svg stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
-</button><pre><code>
-@inproceedings{sarti-etal-2023-inseq,
+}"""
+
+inseq_citation = """@inproceedings{sarti-etal-2023-inseq,
     title = "Inseq: An Interpretability Toolkit for Sequence Generation Models",
     author = "Sarti, Gabriele  and
         Feldhus, Nils  and
@@ -101,13 +91,11 @@ If you use the Inseq implementation of PECoRe (<a href="https://inseq.org/en/lat
     publisher = "Association for Computational Linguistics",
     url = "https://aclanthology.org/2023.acl-demo.40",
     pages = "421--435",
-}
-</code></pre></div>
-"""
+}"""
 
 powered_by = """<div class="footer-custom-block"><b>Powered by</b> <a href='https://github.com/inseq-team/inseq' target='_blank'><img src="file/img/inseq_logo_white_contour.png" width=150px /></a></div>"""
 
-support = """<div class="footer-custom-block"><b>Built by <a href="https://gsarti.com" target="_blank">Gabriele Sarti</a> with the support of</b> <a href='https://www.rug.nl/research/clcg/research/cl/' target='_blank'><img src="file/img/rug_logo_white_contour.png" width=170px /></a><a href='https://projects.illc.uva.nl/indeep/' target='_blank'><img src="file/img/indeep_logo_white_contour.png" width=100px /></a><a href='https://www.esciencecenter.nl/' target='_blank'><img src="file/img/escience_logo_white_contour.png" width=120px /></a></div>"""
+support = """<div class="footer-custom-block"><b>Built by <a href="https://gsarti.com" target="_blank">Gabriele Sarti</a><br> with the support of</b> <a href='https://www.rug.nl/research/clcg/research/cl/' target='_blank'><img src="file/img/rug_logo_white_contour.png" width=170px /></a><a href='https://projects.illc.uva.nl/indeep/' target='_blank'><img src="file/img/indeep_logo_white_contour.png" width=100px /></a><a href='https://www.esciencecenter.nl/' target='_blank'><img src="file/img/escience_logo_white_contour.png" width=120px /></a></div>"""
 
 examples = [
     [

presets.py

@@ -107,6 +107,10 @@ def update_code_snippets_fn(
 ) -> tuple[str, str]:
     if not input_current_text:
         input_current_text = "<MISSING INPUT CURRENT TEXT, REQUIRED>"
+    nl = "\n"
+    tq = "\"\"\""
+    def escape_quotes(s: str) -> str:
+        return s.replace('"', '\\"')
     def py_get_kwargs_str(kwargs: str, name: str, pad: str = " " * 4) -> str:
         kwargs_dict = json.loads(kwargs)
         return nl + pad + name + '=' + str(kwargs_dict) + ',' if kwargs_dict else ''
@@ -120,18 +124,16 @@ def update_code_snippets_fn(
         else:
             return nl + pad + name + "=" + str(arg) + ","
     def sh_get_kwargs_str(kwargs: str, name: str, pad: str = " " * 4) -> str:
-        return nl + pad + f"--{name} " + '"' + str(kwargs).replace("\n", "").replace('"', '\\"') + '"' + " \\\\" if json.loads(kwargs) else ''
+        return nl + pad + f"--{name} " + '"' + escape_quotes("".join(x.strip() for x in str(kwargs).split("\n"))) + '"' + " \\" if json.loads(kwargs) else ''
     def sh_get_if_specified(arg: str | int | float | list | None, name: str, pad: str = " " * 4) -> str:
         if arg is None or (isinstance(arg, (str, list)) and not arg) or (isinstance(arg, (int, float)) and arg <= 0):
             return ""
         elif isinstance(arg, str):
-            return nl + pad + f"--{name} " + '"' + arg.replace('"', '\\"') + '"' + " \\\\" 
+            return nl + pad + f"--{name} " + '"' + escape_quotes(arg) + '"' + " \\" 
         elif isinstance(arg, list):
-            return nl + pad + f"--{name} " + " ".join(str(arg)) + " \\\\"
+            return nl + pad + f"--{name} " + " ".join(str(arg)) + " \\"
         else:
-            return nl + pad + f"--{name} " + str(arg) + " \\\\"
-    nl = "\n"
-    tq = "\"\"\""
+            return nl + pad + f"--{name} " + str(arg) + " \\"
     # Python
     python = f"""#!pip install inseq
 import inseq
@@ -161,20 +163,19 @@ pecore_args = AttributeContextArgs(
 out = attribute_context_with_model(pecore_args, loaded_model)"""
     # Bash
     bash = f"""# pip install inseq
-inseq attribute-context \\\\
-    --model-name-or-path "{model_name_or_path}" \\\\
-    --attribution-method "{attribution_method}" \\\\
-    --attributed-fn "{attributed_fn}" \\\\
-    --context-sensitivity-metric "{context_sensitivity_metric}" \\\\
-    --context-sensitivity-std-threshold {context_sensitivity_std_threshold} \\\\{sh_get_if_specified(context_sensitivity_topk, "context-sensitivity-topk")}
-    --attribution-std-threshold {attribution_std_threshold} \\\\{sh_get_if_specified(attribution_topk, "attribution-topk")}
-    --input-current-text "{input_current_text}" \\\\{sh_get_if_specified(input_context_text, "input-context-text")}
-    --contextless-input-current-text "{contextless_input_template}" \\\\
-    --input-template "{input_template}" \\\\{sh_get_if_specified(output_current_text, "output-current-text")}{sh_get_if_specified(output_context_text, "output-context-text")}
-    --contextless-output-current-text "{contextless_output_template}" \\\\
-    --output-template "{output_template}" \\\\{sh_get_if_specified(special_tokens_to_keep, "special_tokens_to_keep")}{sh_get_if_specified(decoder_input_output_separator, "decoder-input-output-separator")}
-    --save-path pecore_output.json \\\\
-    --viz-path pecore_output.html \\\\{sh_get_kwargs_str(model_kwargs, "model-kwargs")}{sh_get_kwargs_str(tokenizer_kwargs, "tokenizer-kwargs")}{sh_get_kwargs_str(generation_kwargs, "generation-kwargs")}{sh_get_kwargs_str(attribution_kwargs, "attribution-kwargs")}
-"""
+inseq attribute-context \\
+    --model_name_or_path "{model_name_or_path}" \\
+    --attribution_method "{attribution_method}" \\
+    --attributed_fn "{attributed_fn}" \\
+    --context_sensitivity_metric "{context_sensitivity_metric}" \\
+    --context_sensitivity_std_threshold {context_sensitivity_std_threshold} \\{sh_get_if_specified(context_sensitivity_topk, "context_sensitivity_topk")}
+    --attribution_std_threshold {attribution_std_threshold} \\{sh_get_if_specified(attribution_topk, "attribution_topk")}
+    --input_current_text "{escape_quotes(input_current_text)}" \\{sh_get_if_specified(input_context_text, "input_context_text")}
+    --contextless_input_current_text "{escape_quotes(contextless_input_template)}" \\
+    --input_template "{escape_quotes(input_template)}" \\{sh_get_if_specified(output_current_text, "output_current_text")}{sh_get_if_specified(output_context_text, "output_context_text")}
+    --contextless_output_current_text "{escape_quotes(contextless_output_template)}" \\
+    --output_template "{escape_quotes(output_template)}" \\{sh_get_if_specified(special_tokens_to_keep, "special_tokens_to_keep")}{sh_get_if_specified(decoder_input_output_separator, "decoder_input_output_separator")}
+    --save_path "pecore_output.json" \\
+    --viz_path "pecore_output.html" \\{sh_get_kwargs_str(model_kwargs, "model_kwargs")}{sh_get_kwargs_str(tokenizer_kwargs, "tokenizer_kwargs")}{sh_get_kwargs_str(generation_kwargs, "generation_kwargs")}{sh_get_kwargs_str(attribution_kwargs, "attribution_kwargs")}""".strip("\\")
     return python, bash
     

requirements.txt

@@ -1,3 +1,4 @@
 spaces
 git+https://github.com/inseq-team/inseq.git@main
-gradio_highlightedtextbox
+gradio_highlightedtextbox
+gradio_modal

style.py

@@ -35,7 +35,7 @@ custom_css = """
     margin-right: 10px;
 }
 
-.footer-custom-block a {
+.footer-custom-block img {
     margin-right: 15px;
 }