diff --git a/src/app.css b/src/app.css index 3e03e1e..4ae0e8b 100644 --- a/src/app.css +++ b/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; diff --git a/src/app.js b/src/app.js index 79a7b63..c7c23f9 100644 --- a/src/app.js +++ b/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 } \ No newline at end of file diff --git a/src/app.py b/src/app.py index f8e450a..ec88785 100644 --- a/src/app.py +++ b/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 diff --git a/src/utils.py b/src/utils.py index f963791..da70cef 100644 --- a/src/utils.py +++ b/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), )