Various layout improvements

src/app.css

@@ -12,8 +12,42 @@ textarea::placeholder {
     margin-bottom: -6px;
 }
 
-.question-target label span::after {
-    content: " (optional, will not be compressed)";
+.has-info + div {
+    display: inline-block;
+}
+
+.rate .head {
+    align-items: center;
+}
+
+.rate .head::after {
+    content: "%";
+}
+
+.rate .head input {
+    margin: 0 5px 0 auto;
+    appearance: textfield;
+}
+
+/* Tabs */
+.tabs {
+    margin-bottom: -42px;
+}
+
+.tabs .tab-nav {
+    border-bottom: none;
+}
+
+.tabs button {
+    padding-bottom: 10px;
+}
+
+.tabs .tab-nav .selected {
+    background: var(--block-background-fill);
+}
+
+.tabs .tabitem {
+    opacity: 0;
 }
 
 /* Accordion component (about text) */
@@ -55,6 +89,22 @@ textarea::placeholder {
     scrollbar-width: none;
 }
 
+/* Outputs */
+.outputs {
+    border-color: var(--border-color-primary);
+}
+
+.responses > div {
+    background: transparent;
+    border: none;
+    gap: var(--layout-gap);
+}
+
+.responses .block {
+    padding: 0;
+    background: transparent;
+}
+
 /* Examples component */
 #examples .label {
     display: none;

src/app.js

@@ -34,7 +34,7 @@
         const ui_settings = document.querySelectorAll('.ui-settings input');
         const promptCheckbox = ui_settings[1];
         if (!promptCheckbox.checked) promptCheckbox.click();
-        const promptInput = document.querySelector('.question-target input');
+        const promptInput = document.querySelector('.question-target textarea');
         promptInput.value = event.target.innerText;
         const inputEvent = new Event("input");
         Object.defineProperty(inputEvent, "target", { value: promptInput });
@@ -52,4 +52,6 @@
         });
     });
     observer.observe(document.querySelector('.qa-pairs .table tbody'), { childList: true });
+
+    // TODO: add synchronous resize for llm response textareas
 }

src/app.py

@@ -26,7 +26,7 @@
     create_llm_response,
     create_metrics_df,
     get_api_info,
-    handle_model_change,
+    handle_tabs,
     handle_ui_settings,
     metrics_to_df,
     prepare_flagged_data,
@@ -173,6 +173,7 @@ def run_demo(
     force_digits: list[str],
     request: gr.Request,
 ):
+    rate = rate / 100
     print(
         f"RUN DEMO - question: {len(question.split())}, prompt: {len(prompt.split())}, rate: {rate},",
         f"model: {target_model.split('/')[-1]} - from {request.cookies['session']}",
@@ -258,54 +259,57 @@ def run_demo(
                     )
 
     # Inputs
+    prompt_target, compress_only = gr.Tab("Prompt target LLM"), gr.Tab("Compress only")
     question = gr.Textbox(
         label="Question",
+        info="(will not be compressed)",
         lines=1,
         placeholder=example_dataset[1]["QA_pairs"][6][0],
         elem_classes="question-target",
     )
     prompt = gr.Textbox(
-        label="Prompt (Context)",
+        label="Prompt / Context",
         lines=8,
         max_lines=8,
         autoscroll=False,
         placeholder=example_dataset[1]["original_prompt"],
         elem_classes="word-count",
     )
-    rate = gr.Slider(0.1, 1, 0.5, step=0.05, label="Rate")
+    rate = gr.Slider(10, 100, 50, step=1, label="Rate", info="(compressed / uncompressed)", elem_classes="rate")
     target_model = gr.Radio(label="Target LLM", choices=LLM_LIST, value=LLM_LIST[0])
     with gr.Row():
         clear = gr.Button("Clear", elem_classes="clear")
         submit = gr.Button("Submit", variant="primary", interactive=False)
 
     # Outputs
-    metrics = gr.Dataframe(
-        label="Metrics",
-        headers=[*create_metrics_df().columns],
-        row_count=1,
-        height=75,
-        show_label=False,
-        interactive=False,
-        elem_classes="dataframe",
-    )
-    compressed = gr.Textbox(label="Compressed Prompt", lines=2, max_lines=2, visible=False, interactive=False)
-    compressedDiff = gr.HighlightedText(
-        label="Compressed Prompt",
-        visible=False,
-        show_inline_category=False,
-        combine_adjacent=True,
-        adjacent_separator=DiffSeparator(" "),
-        color_map={"+": "green"},
-        elem_id="compressed-diff",
-        elem_classes="no-content",
-    )
-    with gr.Column(variant="panel") as responses:
-        with gr.Row():
+    gr.Markdown("## Results:")
+    with gr.Column(variant="panel", elem_classes="outputs"):
+        metrics = gr.Dataframe(
+            label="Metrics",
+            headers=[*create_metrics_df().columns],
+            row_count=1,
+            height=75,
+            show_label=False,
+            interactive=False,
+            elem_classes="dataframe",
+        )
+        compressed = gr.Textbox(label="Compressed Prompt", lines=2, max_lines=2, visible=False, interactive=False)
+        compressedDiff = gr.HighlightedText(
+            label="Compressed Prompt",
+            visible=False,
+            show_inline_category=False,
+            combine_adjacent=True,
+            adjacent_separator=DiffSeparator(" "),
+            color_map={"+": "green"},
+            elem_id="compressed-diff",
+            elem_classes="no-content",
+        )
+        with gr.Row(elem_classes="responses") as responses:
             response_a = gr.Textbox(label="LLM Response A", lines=10, max_lines=10, autoscroll=False, interactive=False)
             response_a_obj = gr.Textbox(label="Response A", visible=False)
             response_b = gr.Textbox(label="LLM Response B", lines=10, max_lines=10, autoscroll=False, interactive=False)
             response_b_obj = gr.Textbox(label="Response B", visible=False)
-        with gr.Row():
+        with gr.Row() as flag_buttons:
             flag_a = gr.Button("A is better", interactive=False)
             flag_n = gr.Button("Neither is better", interactive=False)
             flag_b = gr.Button("B is better", interactive=False)
@@ -327,6 +331,10 @@ def run_demo(
     )
 
     # Event handlers
+    for tab in [prompt_target, compress_only]:
+        tab.select(
+            handle_tabs, inputs=[ui_settings], outputs=[question, target_model, compressedDiff, responses, flag_buttons]
+        )
     prompt.change(activate_button, inputs=prompt, outputs=submit)
     submit.click(
         run_demo,
@@ -346,7 +354,7 @@ def run_demo(
     )
     clear.click(
         lambda: [None] * 8
-        + [0.5, create_metrics_df(), gr.DataFrame(visible=False)]
+        + [50, create_metrics_df(), gr.DataFrame(visible=False)]
         + [gr.Button(interactive=False)] * 3,
         outputs=[
             question,
@@ -368,7 +376,6 @@ def run_demo(
     ui_settings.change(
         handle_ui_settings, inputs=[ui_settings, target_model], outputs=[question, prompt, compressedDiff, metrics]
     )
-    target_model.change(handle_model_change, inputs=[target_model, ui_settings], outputs=[compressedDiff, responses])
     compressed.change(lambda x: update_label(x, compressedDiff), inputs=compressed, outputs=compressedDiff)
     response_a.change(lambda x: update_label(x, response_a), inputs=response_a, outputs=response_a)
     response_b.change(lambda x: update_label(x, response_b), inputs=response_b, outputs=response_b)
@@ -392,7 +399,7 @@ def flag(prompt, context, compr_prompt, rate, metrics, res_a_obj, res_b_obj, fla
         print(
             f"FLAG - model: {model.group(1) if model else ''}, flag: {flag_button[0]} - from {request.cookies['session']}"
         )
-        args = [prompt, context, compr_prompt, rate, metrics, res_a_obj, res_b_obj]
+        args = [prompt, context, compr_prompt, rate / 100, metrics, res_a_obj, res_b_obj]
         flagging_callback.flag(args, flag_option=flag_button[0], username=request.cookies["session"])
         gr.Info("Preference saved. Thank you for your feedback.")
         return [gr.Button(interactive=False)] * 3

src/utils.py

@@ -36,7 +36,7 @@ def get_api_info() -> list[str]:
                 print(f"Error while loading models from API: {response.status_code} - {response.text}")
             else:
                 models = [model["id"] for model in response.json()["data"]]
-    return endpoint, token, models + ["Compress only"]
+    return endpoint, token, models
 
 
 def create_metrics_df(result: dict = None) -> pd.DataFrame:
@@ -77,11 +77,14 @@ def handle_ui_settings(
     )
 
 
-def handle_model_change(value: str, options: list[str]) -> tuple[gr.HighlightedText, gr.Column]:
-    compress_only = value == "Compress only"
+def handle_tabs(event: gr.SelectData, options: list[str]) -> tuple[gr.HighlightedText, gr.Column]:
+    compress_only = event.value == "Compress only"
     return (
-        gr.HighlightedText(visible="Show Compressed Prompt" in options or compress_only),
-        gr.Column(visible=not compress_only),
+        gr.Textbox(visible=not compress_only),
+        gr.Radio(visible=not compress_only),
+        gr.HighlightedText(visible=compress_only or "Show Compressed Prompt" in options),
+        gr.Row(visible=not compress_only),
+        gr.Row(visible=not compress_only),
     )