Usage guide to be completed

.gitignore

@@ -1,3 +1,4 @@
 *.pyc
 *.html
-*.json
+*.json
+.DS_Store

README.md

@@ -4,7 +4,7 @@ emoji: 🐑 🐑
 colorFrom: blue
 colorTo: green
 sdk: gradio
-sdk_version: 4.15.0
+sdk_version: 4.21.0
 app_file: app.py
 pinned: false
 license: apache-2.0

app.py

@@ -7,10 +7,15 @@ from contents import (
     citation,
     description,
     examples,
-    how_it_works,
+    how_it_works_intro,
+    cti_explanation,
+    cci_explanation,
     how_to_use,
+    example_explanation,
     subtitle,
     title,
+    powered_by,
+    support,
 )
 from gradio_highlightedtextbox import HighlightedTextbox
 from presets import (
@@ -21,6 +26,7 @@ from presets import (
     set_towerinstruct_preset,
     set_zephyr_preset,
     set_gemma_preset,
+    set_mistral_instruct_preset,
 )
 from style import custom_css
 from utils import get_formatted_attribute_context_results
@@ -50,8 +56,9 @@ def pecore(
     attribution_std_threshold: float,
     attribution_topk: int,
     input_template: str,
-    contextless_input_current_text: str,
     output_template: str,
+    contextless_input_template: str,
+    contextless_output_template: str,
     special_tokens_to_keep: str | list[str] | None,
     decoder_input_output_separator: str,
     model_kwargs: str,
@@ -62,7 +69,7 @@ def pecore(
     global loaded_model
     if "{context}" in output_template and not output_context_text:
         raise gr.Error(
-            "Parameter 'Generated context' is required when using {context} in the output template."
+            "Parameter 'Generation context' must be set when including {context} in the output template."
         )
     if loaded_model is None or model_name_or_path != loaded_model.model_name:
         gr.Info("Loading model...")
@@ -109,16 +116,29 @@ def pecore(
         input_current_text=input_current_text,
         input_template=input_template,
         output_template=output_template,
-        contextless_input_current_text=contextless_input_current_text,
+        contextless_input_current_text=contextless_input_template,
+        contextless_output_current_text=contextless_output_template,
         handle_output_context_strategy="pre",
         **kwargs,
     )
     out = attribute_context_with_model(pecore_args, loaded_model)
     tuples = get_formatted_attribute_context_results(loaded_model, out.info, out)
     if not tuples:
-        msg = f"Output: {out.output_current}\nWarning: No pairs were found by PECoRe. Try adjusting Results Selection parameters."
+        msg = f"Output: {out.output_current}\nWarning: No pairs were found by PECoRe.\nTry adjusting Results Selection parameters to soften selection constraints (e.g. setting Context sensitivity threshold to 0)."
         tuples = [(msg, None)]
-    return tuples, gr.Button(visible=True), gr.Button(visible=True)
+    return [
+        tuples,
+        gr.DownloadButton(
+            label="📂 Download output",
+            value=os.path.join(os.path.dirname(__file__), "outputs/output.json"),
+            visible=True,
+        ),
+        gr.DownloadButton(
+            label="🔍 Download HTML",
+            value=os.path.join(os.path.dirname(__file__), "outputs/output.html"),
+            visible=True,
+        )
+    ]
 
 
 @spaces.GPU()
@@ -140,19 +160,25 @@ def preload_model(
 
 
 with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown(title)
-    gr.Markdown(subtitle)
+    with gr.Row():
+        with gr.Column(scale=0.1, min_width=100):
+            gr.HTML(f'<img src="file/img/pecore_logo_white_contour.png" width=100px />')
+        with gr.Column(scale=0.8):
+            gr.Markdown(title)
+            gr.Markdown(subtitle)
+        with gr.Column(scale=0.1, min_width=100):
+            gr.HTML(f'<img src="file/img/pecore_logo_white_contour.png" width=100px />')
     gr.Markdown(description)
-    with gr.Tab("🐑 Attributing Context"):
+    with gr.Tab("🐑 Demo"):
         with gr.Row():
             with gr.Column():
                 input_context_text = gr.Textbox(
-                    label="Input context", lines=4, placeholder="Your input context..."
+                    label="Input context", lines=3, placeholder="Your input context..."
                 )
                 input_current_text = gr.Textbox(
                     label="Input query", placeholder="Your input query..."
                 )
-                attribute_input_button = gr.Button("Submit", variant="primary")
+                attribute_input_button = gr.Button("Run PECoRe", variant="primary")
             with gr.Column():
                 pecore_output_highlights = HighlightedTextbox(
                     value=[
@@ -163,8 +189,8 @@ with gr.Blocks(css=custom_css) as demo:
                         (" tokens.", None),
                     ],
                     color_map={
-                        "Context sensitive": "green",
-                        "Influential context": "blue",
+                        "Context sensitive": "#5fb77d",
+                        "Influential context": "#80ace8",
                     },
                     show_legend=True,
                     label="PECoRe Output",
@@ -172,30 +198,31 @@ with gr.Blocks(css=custom_css) as demo:
                     interactive=False,
                 )
                 with gr.Row(equal_height=True):
-                    download_output_file_button = gr.Button(
-                        "⇓ Download output",
+                    download_output_file_button = gr.DownloadButton(
+                        "📂 Download output",
                         visible=False,
-                        link=os.path.join(
-                            os.path.dirname(__file__), "/file=outputs/output.json"
-                        ),
                     )
-                    download_output_html_button = gr.Button(
+                    download_output_html_button = gr.DownloadButton(
                         "🔍 Download HTML",
                         visible=False,
-                        link=os.path.join(
-                            os.path.dirname(__file__), "/file=outputs/output.html"
+                        value=os.path.join(
+                            os.path.dirname(__file__), "outputs/output.html"
                         ),
                     )
-
+                preset_comment = gr.Markdown(
+                    "<i>The <a href='https://huggingface.co/gsarti/cora_mgen' target='_blank'>CORA Multilingual QA</a> model by <a href='https://openreview.net/forum?id=e8blYRui3j' target='_blank'>Asai et al. (2021)</a> is set as default and can be used with the examples below. Explore other presets in the ⚙️ Parameters tab.</i>"
+                )
         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:
         gr.Markdown(
-            "## ✨ Presets\nSelect a preset to load default parameters into the fields below. ⚠️ This will overwrite existing parameters."
+            "## ✨ Presets\nSelect a preset to load the selected model and its default parameters (e.g. prompt template, special tokens, etc.) into the fields below.<br>⚠️ **This will overwrite existing parameters. If you intend to use large models that could crash the demo, please clone this Space and allocate appropriate resources for them to run comfortably.**"
         )
+        check_enable_large_models = gr.Checkbox(False, label = "I understand, enable large models presets")
         with gr.Row(equal_height=True):
             with gr.Column():
                 default_preset = gr.Button("Default", variant="secondary")
@@ -208,9 +235,9 @@ with gr.Blocks(css=custom_css) as demo:
                     "Preset for the <a href='https://huggingface.co/gsarti/cora_mgen' target='_blank'>CORA Multilingual QA</a> model.\nUses special templates for inputs."
                 )
             with gr.Column():
-                zephyr_preset = gr.Button("Zephyr Template", variant="secondary")
+                zephyr_preset = gr.Button("Zephyr Template", variant="secondary", interactive=False)
                 gr.Markdown(
-                    "Preset for models using the <a href='https://huggingface.co/HuggingFaceH4/zephyr-7b-beta' target='_blank'>Zephyr conversational template</a>.\nUses <code><|system|></code>, <code><|user|></code> and <code><|assistant|></code> special tokens."
+                    "Preset for models using the <a href='https://huggingface.co/stabilityai/stablelm-2-zephyr-1_6b' target='_blank'>StableLM 2 Zephyr conversational template</a>.\nUses <code><|system|></code>, <code><|user|></code> and <code><|assistant|></code> special tokens."
                 )
         with gr.Row(equal_height=True):
             with gr.Column(scale=1):
@@ -227,7 +254,7 @@ with gr.Blocks(css=custom_css) as demo:
                 )
             with gr.Column(scale=1):
                 towerinstruct_template = gr.Button(
-                    "Unbabel TowerInstruct", variant="secondary"
+                    "Unbabel TowerInstruct", variant="secondary", interactive=False
                 )
                 gr.Markdown(
                     "Preset for models using the <a href='https://huggingface.co/Unbabel/TowerInstruct-7B-v0.1' target='_blank'>Unbabel TowerInstruct</a> conversational template.\nUses <code><|im_start|></code>, <code><|im_end|></code> special tokens."
@@ -235,16 +262,23 @@ with gr.Blocks(css=custom_css) as demo:
         with gr.Row(equal_height=True):
             with gr.Column(scale=1):
                 gemma_template = gr.Button(
-                    "Gemma Chat Template", variant="secondary"
+                    "Gemma Chat Template", variant="secondary", interactive=False
                 )
                 gr.Markdown(
                     "Preset for <a href='https://huggingface.co/google/gemma-2b-it' target='_blank'>Gemma</a> instruction-tuned models."
                 )
+            with gr.Column(scale=1):
+                mistral_instruct_template = gr.Button(
+                    "Mistral Instruct", variant="secondary", interactive=False
+                )
+                gr.Markdown(
+                    "Preset for models using the <a href='https://huggingface.co/mistralai/Mistral-7B-Instruct-v0.2' target='_blank'>Mistral Instruct template</a>.\nUses <code>[INST]...[/INST]</code> special tokens."
+                )         
         gr.Markdown("## ⚙️ PECoRe Parameters")
         with gr.Row(equal_height=True):
             with gr.Column():
                 model_name_or_path = gr.Textbox(
-                    value="gpt2",
+                    value="gsarti/cora_mgen",
                     label="Model",
                     info="Hugging Face Hub identifier of the model to analyze with PECoRe.",
                     interactive=True,
@@ -277,7 +311,7 @@ with gr.Blocks(css=custom_css) as demo:
         gr.Markdown("#### Results Selection Parameters")
         with gr.Row(equal_height=True):
             context_sensitivity_std_threshold = gr.Number(
-                value=1.0,
+                value=0.0,
                 label="Context sensitivity threshold",
                 info="Select N to keep context sensitive tokens with scores above N * std. 0 = above mean.",
                 precision=1,
@@ -306,33 +340,39 @@ with gr.Blocks(css=custom_css) as demo:
                 interactive=True,
             )
             attribution_topk = gr.Number(
-                value=0,
+                value=5,
                 label="Attribution top-k",
                 info="Select N to keep top N attributed tokens in the context. 0 = keep all.",
                 interactive=True,
                 precision=0,
                 minimum=0,
-                maximum=50,
+                maximum=100,
             )
 
         gr.Markdown("#### Text Format Parameters")
         with gr.Row(equal_height=True):
             input_template = gr.Textbox(
-                value="{current} <P>:{context}",
-                label="Input template",
-                info="Template to format the input for the model. Use {current} and {context} placeholders.",
+                value="<Q>:{current} <P>:{context}",
+                label="Contextual input template",
+                info="Template to format the input for the model. Use {current} and {context} placeholders for Input Query and Input Context, respectively.",
                 interactive=True,
             )
             output_template = gr.Textbox(
                 value="{current}",
-                label="Output template",
-                info="Template to format the output from the model. Use {current} and {context} placeholders.",
+                label="Contextual output template",
+                info="Template to format the output from the model. Use {current} and {context} placeholders for Generation Output and Generation Context, respectively.",
                 interactive=True,
             )
-            contextless_input_current_text = gr.Textbox(
+            contextless_input_template = gr.Textbox(
                 value="<Q>:{current}",
-                label="Input current text template",
-                info="Template to format the input query for the model. Use {current} placeholder.",
+                label="Contextless input template",
+                info="Template to format the input query in the non-contextual setting. Use {current} placeholder for Input Query.",
+                interactive=True,
+            )
+            contextless_output_template = gr.Textbox(
+                value="{current}",
+                label="Contextless output template",
+                info="Template to format the output from the model. Use {current} placeholder for Generation Output.",
                 interactive=True,
             )
         with gr.Row(equal_height=True):
@@ -401,16 +441,34 @@ with gr.Blocks(css=custom_css) as demo:
                 )
             with gr.Column():
                 attribution_kwargs = gr.Code(
-                    value="{}",
+                    value='{\n\t"logprob": true\n}',
                     language="json",
                     label="Attribution kwargs (JSON)",
                     interactive=True,
                     lines=1,
                 )
+    with gr.Tab("🔍 How Does It Work?"):
+        gr.Markdown(how_it_works_intro)
+        with gr.Row(equal_height=True):
+            with gr.Column(scale=0.60):
+                gr.Markdown(cti_explanation)
+            with gr.Column(scale=0.30):
+                gr.HTML('<img src="file/img/cti_white_outline.png" width=100% />')
+        with gr.Row(equal_height=True):
+            with gr.Column(scale=0.35):
+                gr.HTML('<img src="file/img/cci_white_outline.png" width=100% />')
+            with gr.Column(scale=0.65):
+                gr.Markdown(cci_explanation)
+    with gr.Tab("🔧 Usage Guide"):
+        gr.Markdown(how_to_use)
+        gr.HTML('<img src="file/img/pecore_ui_output_example.png" width=100% />')
+        gr.Markdown(example_explanation)
+    with gr.Tab("📚 Citing PECoRe"):
+        gr.Markdown(citation)
+    with gr.Row(elem_classes="footer-container"):
+        gr.Markdown(powered_by)
+        gr.Markdown(support)
 
-    gr.Markdown(how_it_works)
-    gr.Markdown(how_to_use)
-    gr.Markdown(citation)
 
     # Main logic
 
@@ -422,6 +480,10 @@ with gr.Blocks(css=custom_css) as demo:
     ]
 
     attribute_input_button.click(
+        lambda *args: [gr.DownloadButton(visible=False), gr.DownloadButton(visible=False)],
+        inputs=[],
+        outputs=[download_output_file_button, download_output_html_button],
+    ).then(
         pecore,
         inputs=[
             input_current_text,
@@ -437,8 +499,9 @@ with gr.Blocks(css=custom_css) as demo:
             attribution_std_threshold,
             attribution_topk,
             input_template,
-            contextless_input_current_text,
             output_template,
+            contextless_input_template,
+            contextless_output_template,
             special_tokens_to_keep,
             decoder_input_output_separator,
             model_kwargs,
@@ -461,11 +524,18 @@ with gr.Blocks(css=custom_css) as demo:
 
     # Preset params
 
+    check_enable_large_models.input(
+        lambda checkbox, *buttons: [gr.Button(interactive=checkbox) for _ in buttons],
+        inputs=[check_enable_large_models, zephyr_preset, towerinstruct_template, gemma_template, mistral_instruct_template],
+        outputs=[zephyr_preset, towerinstruct_template, gemma_template, mistral_instruct_template],
+    )
+
     outputs_to_reset = [
         model_name_or_path,
         input_template,
-        contextless_input_current_text,
         output_template,
+        contextless_input_template,
+        contextless_output_template,
         special_tokens_to_keep,
         decoder_input_output_separator,
         model_kwargs,
@@ -485,7 +555,7 @@ with gr.Blocks(css=custom_css) as demo:
 
     cora_preset.click(**reset_kwargs).then(
         set_cora_preset,
-        outputs=[model_name_or_path, input_template, contextless_input_current_text],
+        outputs=[model_name_or_path, input_template, contextless_input_template],
     ).success(preload_model, inputs=load_model_args, cancels=load_model_event)
 
     zephyr_preset.click(**reset_kwargs).then(
@@ -493,8 +563,9 @@ with gr.Blocks(css=custom_css) as demo:
         outputs=[
             model_name_or_path,
             input_template,
-            contextless_input_current_text,
+            contextless_input_template,
             decoder_input_output_separator,
+            special_tokens_to_keep,
         ],
     ).success(preload_model, inputs=load_model_args, cancels=load_model_event)
 
@@ -508,7 +579,7 @@ with gr.Blocks(css=custom_css) as demo:
         outputs=[
             model_name_or_path,
             input_template,
-            contextless_input_current_text,
+            contextless_input_template,
             decoder_input_output_separator,
             special_tokens_to_keep,
         ],
@@ -519,7 +590,7 @@ with gr.Blocks(css=custom_css) as demo:
         outputs=[
             model_name_or_path,
             input_template,
-            contextless_input_current_text,
+            contextless_input_template,
             decoder_input_output_separator,
             special_tokens_to_keep,
         ],
@@ -530,10 +601,20 @@ with gr.Blocks(css=custom_css) as demo:
         outputs=[
             model_name_or_path,
             input_template,
-            contextless_input_current_text,
+            contextless_input_template,
             decoder_input_output_separator,
             special_tokens_to_keep,
         ],
     ).success(preload_model, inputs=load_model_args, cancels=load_model_event)
 
-demo.launch(allowed_paths=["outputs/"])
+    mistral_instruct_template.click(**reset_kwargs).then(
+        set_mistral_instruct_preset,
+        outputs=[
+            model_name_or_path,
+            input_template,
+            contextless_input_template,
+            decoder_input_output_separator,
+        ],
+    ).success(preload_model, inputs=load_model_args, cancels=load_model_event)
+
+demo.launch(allowed_paths=["outputs/", "img/"])

contents.py

@@ -3,31 +3,52 @@ title = "<h1 class='demo-title'>🐑 Plausibility Evaluation of Context Reliance
 subtitle = "<h2 class='demo-subtitle'>An Interpretability Framework to Detect and Attribute Context Reliance in Language Models</h2>"
 
 description = """
-Given a query and a context passed as inputs to a LM, PECoRe will identify which tokens in the generated
-response were dependant on context, and match them with context tokens contributing to their prediction.
-For more information, check out our <a href="https://openreview.net/forum?id=XTHfNGI3zT" target='_blank'>ICLR 2024 paper</a>.
+PECoRe is a framework for trustworthy language generation using only model internals to detect and attribute model
+generations to its available input context. Given a query-context input pair, PECoRe identifies which tokens in the generated
+response were more dependant on context (<span class="category-label" style="background-color:#5fb77d; color: black; font-weight: var(--weight-semibold)">Context sensitive </span>), and match them with context tokens contributing the most to their prediction (<span class="category-label" style="background-color:#80ace8; color: black; font-weight: var(--weight-semibold)">Influential context </span>).
+
+Check out <a href="https://openreview.net/forum?id=XTHfNGI3zT" target='_blank'>our ICLR 2024 paper</a> for more details. A new paper applying PECoRe to retrieval-augmented QA is forthcoming ✨ stay tuned!
+"""
+
+how_it_works_intro = """
+The PECoRe (Plausibility Evaluation of Context Reliance) framework is designed to <b>detect and quantify context usage</b> throughout language model generations. Its final goal is to return <b>one or more pairs</b> representing tokens in the generated response that were influenced by the presence of context (<span class="category-label" style="background-color:#5fb77d; color: black; font-weight: var(--weight-semibold)">Context sensitive </span>), and their corresponding influential context tokens (<span class="category-label" style="background-color:#80ace8; color: black; font-weight: var(--weight-semibold)">Influential context </span>).
+
+The PECoRe procedure involves two contrastive comparison steps:
+"""
+
+cti_explanation = """
+<h3>1. Context-sensitive Token Identification (CTI)</h3>
+<p>In this step, the goal is to identify which tokens in the generated text were influenced by the preceding context.</p>
+<p>First, a context-aware generation is produced using the model's inputs augmented with available context. Then, the same generation is force-decoded using the contextless inputs. During both processes, a <b>contrastive metric</b> (KL-divergence is used as default for the <code>Context sensitivity metric</code> parameter) are collected for every generated token. Intuitively, higher metric scores indicate that the current generation step was more influenced by the presence of context.</p>
+<p>The generated tokens are ranked according to their metric scores, and the most salient tokens are selected for the next step (This demo provides a <code>Context sensitivity threshold</code> parameter to select tokens above <code>N</code> standard deviations from the in-example metric average, and <code>Context sensitivity top-k</code> to pick the K most salient tokens.)</p>
+<p>In the example shown in the figure, <code>elle</code> is selected as the only context-sensitive token by the procedure.</p>
+"""
+
+cci_explanation = """
+<h3>2. Contextual Cue Imputation (CCI)</h3>
+<p>Once context-sensitive tokens are identified, the next step is to link every one of these tokens to specific contextual cues that justified its prediction.</p>
+<p>This is achieved by means of <b>contrastive feature attribution</b> (<a href="https://aclanthology.org/2022.emnlp-main.14/" target="_blank">Yin and Neubig, 2022</a>). More specifically, for a given context-sensitive token, a contrastive alternative to it is generated in absence of input context, and a function of the probabilities of the pair is used to identify salient parts of the context (By default, in this demo we use <code>saliency</code>, i.e. raw gradients, for the <code>Attribution method</code> and <code>contrast_prob_diff</code>, i.e. the probability difference between the two options, for the <code>Attributed function</code>).</p>
+<p>Gradients are collected and aggregated to obtain a single score per context token, which is then used to rank the tokens and select the most influential ones (This demo provides a <code>Attribution threshold</code> parameter to select tokens above <code>N</code> standard deviations from the in-example metric average, and <code>Attribution top-k</code> to pick the K most salient tokens.)</p>
+<p>In the example shown in the figure, the attribution process links <code>elle</code> to <code>dishes</code> and <code>assiettes</code> in the source and target contexts, respectively. This makes sense intuitively, as <code>they</code> in the original input is gender-neutral in English, and the presence of its gendered coreferent disambiguates the choice for the French pronoun in the translation.</p>
 """
 
-how_it_works = r"""
-<details>
-    <summary><h3 class="summary-label">⚙️ How Does It Work?</h3></summary>
-    <br/>
-    PECoRe uses a contrastive approach to attribute context reliance in language models.
-    It compares the model's predictions when the context is present and when it is absent, and attributes the difference in predictions to the context tokens.
-</details>
+how_to_use = """
+<h3>How to use this demo</h3>
+
+<p>This demo provides a convenient UI for the Inseq implementation of PECoRe (the <a href="https://inseq.org/en/latest/main_classes/cli.html#attribute-context"><code>inseq attribute-context</code></a> CLI command).</p>
+<p>In the demo tab, fill in the input and context fields with the text you want to analyze, and click the <code>Run PECoRe</code> button to produce an output where the tokens selected by PECoRe in the model generation and context are highlighted. For more details on the parameters and their meaning, check the <code>Parameters</code> tab.</p>
+
+<h3>Interpreting PECoRe results</h3>
 """
 
-how_to_use = r"""
-<details>
-<summary><h3 class="summary-label">🔧 How to Use PECoRe</h3></summary>
+example_explanation = """
+<p>The example shows the output of the <a href='https://huggingface.co/gsarti/cora_mgen' target='_blank'>CORA Multilingual QA</a> model used as default in the interface, using default settings.</p>
+<p>
 
-</details>
 """
 
 citation = r"""
-<details>
-    <summary><h3 class="summary-label">📚 Citing PECoRe</h3></summary>
-    <p>To refer to the PECoRe framework for context usage detection, cite:</p>
+<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>
@@ -47,8 +68,7 @@ citation = r"""
 }
 </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>), please also cite:
+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>
@@ -56,11 +76,11 @@ If you use the Inseq implementation of PECoRe (<a href="https://inseq.org/en/lat
 @inproceedings{sarti-etal-2023-inseq,
     title = "Inseq: An Interpretability Toolkit for Sequence Generation Models",
     author = "Sarti, Gabriele  and
-    Feldhus, Nils  and
-    Sickert, Ludwig  and
-    van der Wal, Oskar and
-    Nissim, Malvina and
-    Bisazza, Arianna",
+        Feldhus, Nils  and
+        Sickert, Ludwig  and
+        van der Wal, Oskar and
+        Nissim, Malvina and
+        Bisazza, Arianna",
     booktitle = "Proceedings of the 61st Annual Meeting of the Association for Computational Linguistics (Volume 3: System Demonstrations)",
     month = jul,
     year = "2023",
@@ -70,13 +90,27 @@ If you use the Inseq implementation of PECoRe (<a href="https://inseq.org/en/lat
     pages = "421--435",
 }
 </code></pre></div>
-
-</details>
 """
 
+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>With the support of</b> <a href='https://projects.illc.uva.nl/indeep/' target='_blank'><img src="file/img/indeep_logo_white_contour.png" width=120px /></a><a href='https://www.esciencecenter.nl/' target='_blank'><img src="file/img/escience_logo_white_contour.png" width=160px /></a></div>"""
+
 examples = [
+    [
+        "How many inhabitants does Groningen have?",
+        "Groningen is the capital city and main municipality of Groningen province in the Netherlands. The capital of the north, Groningen is the largest place as well as the economic and cultural centre of the northern part of the country as of December 2021, it had 235,287 inhabitants, making it the sixth largest city/municipality in the Netherlands and the second largest outside the Randstad. Groningen was established more than 950 years ago and gained city rights in 1245."
+    ],
     [
         "When was Banff National Park established?",
         "Banff National Park is Canada's oldest national park, established in 1885 as Rocky Mountains Park. Located in Alberta's Rocky Mountains, 110-180 kilometres (68-112 mi) west of Calgary, Banff encompasses 6,641 square kilometres (2,564 sq mi) of mountainous terrain.",
+    ],
+    [
+        "约翰·埃尔维目前在野马队中担任什么角色？",
+        "培顿·曼宁成为史上首位带领两支不同球队多次进入超级碗的四分卫。他也以 39 岁高龄参加超级碗而成为史上年龄最大的四分卫。过去的记录是由约翰·埃尔维保持的，他在 38岁时带领野马队赢得第 33 届超级碗，目前担任丹佛的橄榄球运营执行副总裁兼总经理。",
+    ],
+    [
+        "Qual'è il porto più settentrionale della Slovenia?",
+        "Trieste si trova a nordest dell'Italia. La città dista solo alcuni chilometri dal confine con la Slovenia e si trova fra la penisola italiana e la penisola istriana. Il porto triestino è il più settentrionale tra quelli situati nel mare Adriatico. Questa particolare posizione ha da sempre permesso alle navi di approdare direttamente nell'Europa centrale. L'incredibile sviluppo che la città conobbe nell'800 grazie al suo porto franco, indusse a trasferirsi qui una moltitudine di lavoratori provenienti dall'Italia nonché tanti uomini d'affari da tutta Europa. Questa crescita così vorticosa, indotta dalla costituzione del porto franco, portò in poco più di un secolo la popolazione a crescere da poche migliaia fino a più di 200 000 persone, disseminando la città di chiese di tutte le maggiori religioni europee. La nuova città multietnica così formata ha nel tempo sviluppato un proprio linguaggio, infatti il Triestino moderno è un dialetto della lingua veneta. Nella provincia di Trieste vive la minoranza autoctona slovena, infatti nei paesi che circondano il capoluogo giuliano, i cartelli stradali e le insegne di molti negozi sono bilingui. La Provincia è la meno estesa d'Italia ed è quarta per densità abitativa, dopo Napoli, Milano e Monza."
     ]
 ]

presets.py

@@ -1,3 +1,5 @@
+SYSTEM_PROMPT = "You are a helpful assistant that provide concise and accurate answers."
+
 def set_cora_preset():
     return (
         "gsarti/cora_mgen",  # model_name_or_path
@@ -10,8 +12,9 @@ def set_default_preset():
     return (
         "gpt2",  # model_name_or_path
         "{current} {context}",  # input_template
-        "{current}",  # input_current_template
         "{current}",  # output_template
+        "{current}",  # contextless_input_template
+        "{current}",  # contextless_output_template
         [],  # special_tokens_to_keep
         "",  # decoder_input_output_separator
         "{}",  # model_kwargs
@@ -24,18 +27,19 @@ def set_default_preset():
 def set_zephyr_preset():
     return (
         "stabilityai/stablelm-2-zephyr-1_6b",  # model_name_or_path
-        "<|system|>\n{context}</s>\n<|user|>\n{current}</s>\n<|assistant|>\n",  # input_template
-        "<|user|>\n{current}</s>\n<|assistant|>\n",  # input_current_text_template
+        "<|system|>{system_prompt}<|endoftext|>\n<|user|>\n{context}\n\n{current}<|endoftext|>\n<|assistant|>".format(system_prompt=SYSTEM_PROMPT),  # input_template
+        "<|system|>{system_prompt}<|endoftext|>\n<|user|>\n{current}<|endoftext|>\n<|assistant|>".format(system_prompt=SYSTEM_PROMPT),  # input_current_text_template
         "\n",  # decoder_input_output_separator
+        ["<|im_start|>", "<|im_end|>", "<|endoftext|>"],  # special_tokens_to_keep
     )
 
 
 def set_chatml_preset():
     return (
         "Qwen/Qwen1.5-0.5B-Chat",  # model_name_or_path
-        "<|im_start|>system\n{context}<|im_end|>\n<|im_start|>user\n{current}<|im_end|>\n<|im_start|>assistant\n",  # input_template
-        "<|im_start|>user\n{current}<|im_end|>\n<|im_start|>assistant\n",  # input_current_text_template
-        "",  # decoder_input_output_separator
+        "<|im_start|>system\n{system_prompt}<|im_end|>\n<|im_start|>user\n{context}\n\n{current}<|im_end|>\n<|im_start|>assistant".format(system_prompt=SYSTEM_PROMPT),  # input_template
+        "<|im_start|>system\n{system_prompt}<|im_end|>\n<|im_start|>user\n{current}<|im_end|>\n<|im_start|>assistant".format(system_prompt=SYSTEM_PROMPT),  # input_current_text_template
+        "\n",  # decoder_input_output_separator
         ["<|im_start|>", "<|im_end|>"],  # special_tokens_to_keep
     )
 
@@ -52,17 +56,25 @@ def set_mmt_preset():
 def set_towerinstruct_preset():
     return (
         "Unbabel/TowerInstruct-7B-v0.1",  # model_name_or_path
-        "<|im_start|>user\nSource: {current}\nContext: {context}\nTranslate the above text into French. Use the context to guide your answer.\nTarget:<|im_end|>\n<|im_start|>assistant\n",  # input_template
-        "<|im_start|>user\nSource: {current}\nTranslate the above text into French.\nTarget:<|im_end|>\n<|im_start|>assistant\n",  # input_current_text_template
-        "",  # decoder_input_output_separator
+        "<|im_start|>user\nSource: {current}\nContext: {context}\nTranslate the above text into French. Use the context to guide your answer.\nTarget:<|im_end|>\n<|im_start|>assistant",  # input_template
+        "<|im_start|>user\nSource: {current}\nTranslate the above text into French.\nTarget:<|im_end|>\n<|im_start|>assistant",  # input_current_text_template
+        "\n",  # decoder_input_output_separator
         ["<|im_start|>", "<|im_end|>"],  # special_tokens_to_keep
     )
 
 def set_gemma_preset():
     return (
         "google/gemma-2b-it", # model_name_or_path
-        "<start_of_turn>user\n{context}\n{current}<end_of_turn>\n<start_of_turn>model\n", # input_template
-        "<start_of_turn>user\n{current}<end_of_turn>\n<start_of_turn>model\n", # input_current_text_template
-        "", # decoder_input_output_separator
+        "<start_of_turn>user\n{context}\n{current}<end_of_turn>\n<start_of_turn>model", # input_template
+        "<start_of_turn>user\n{current}<end_of_turn>\n<start_of_turn>model", # input_current_text_template
+        "\n", # decoder_input_output_separator
         ["<start_of_turn>", "<end_of_turn>"], # special_tokens_to_keep
     )
+
+def set_mistral_instruct_preset():
+    return (
+        "mistralai/Mistral-7B-Instruct-v0.2" # model_name_or_path
+        "[INST]{context}\n{current}[/INST]" # input_template
+        "[INST]{current}[/INST]" # input_current_text_template
+        "\n" # decoder_input_output_separator
+    )

style.py

@@ -3,17 +3,39 @@ custom_css = """
     text-align: center;
     display: block;
     margin-bottom: 0;
-    font-size: 2em;
+    font-size: 1.7em;
 }
 
 .demo-subtitle {
     text-align: center;
     display: block;
     margin-top: 0;
-    font-size: 1.5em;
+    font-size: 1.3em;
 }
 
 .summary-label {
     display: inline;
 }
+
+.prose a:visited {
+  color: var(--link-text-color);
+}
+
+.footer-container {
+    align-items: center;
+}
+
+.footer-custom-block {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.footer-custom-block b {
+    margin-right: 10px;
+}
+
+.footer-custom-block a {
+    margin-right: 15px;
+}
 """