From f34e6dc1c53f48031942b5c0e5177170daa518e1 Mon Sep 17 00:00:00 2001
From: cornzz <39997278+cornzz@users.noreply.github.com>
Date: Fri, 25 Oct 2024 16:43:27 +0200
Subject: [PATCH] Scroll to results / outputs on submit / clear, shorten pulse
 anim delay, remove pulse on clear

---
 src/app.css | 6 +-----
 src/app.js  | 9 ++++++++-
 src/app.py  | 8 ++++----
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/app.css b/src/app.css
index 7c85b86..9faea7f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -150,10 +150,6 @@ textarea::placeholder {
 }
 
 /* Outputs */
-.outputs {
-    border-color: var(--border-color-primary);
-}
-
 .responses > div {
     background: transparent;
     border: none;
@@ -166,7 +162,7 @@ textarea::placeholder {
 }
 
 .button-pulse {
-    animation: 4s 3s 8 pulse-scale, 4s 3s 8 pulse-shadow;
+    animation: 4s 0.5s 8 pulse-scale, 4s 0.5s 8 pulse-shadow;
 }
 
 .button-hint {
diff --git a/src/app.js b/src/app.js
index 38c4f8f..cb3dd26 100644
--- a/src/app.js
+++ b/src/app.js
@@ -16,7 +16,7 @@
     wordCountFields.forEach((t) => t.addEventListener('input', wordCountHandler));
 
     // Add listener to example prompt buttons to set wordcount on selection
-    document.querySelectorAll('.gallery, button.clear')?.forEach((item) => {
+    document.querySelectorAll('.gallery, #clear')?.forEach((item) => {
         item.addEventListener('click', () => setTimeout(() => {
             wordCountFields.forEach((t) => wordCountHandler({ target: t }))
         }, 300));
@@ -60,5 +60,12 @@
         observer.observe(qa_pairs, { childList: true });
     }
 
+    // Scroll to results on submit, scroll to top on clear
+    document.getElementById('submit').addEventListener('click', () => {
+        const results = document.getElementById('outputs');
+        window.scrollTo({ top: results.offsetTop, behavior: 'smooth' });
+    })
+    document.getElementById('clear').addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
+
     // TODO: add synchronized resize for llm response textareas
 }
\ No newline at end of file
diff --git a/src/app.py b/src/app.py
index 4059cd2..0161c10 100644
--- a/src/app.py
+++ b/src/app.py
@@ -296,11 +296,11 @@ def run_demo(
     rate = gr.Slider(10, 100, 50, step=1, label="Rate", info="(compression target)", 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)
+        clear = gr.Button("Clear", elem_id="clear")
+        submit = gr.Button("Submit", variant="primary", elem_id="submit", interactive=False)
 
     # Outputs
-    with gr.Column(variant="panel", elem_classes="outputs"):
+    with gr.Column(variant="panel", elem_id="outputs"):
         gr.Markdown('<h2 style="text-align: center">Results</h2>')
         metrics = gr.Dataframe(
             label="Metrics",
@@ -369,7 +369,7 @@ def run_demo(
     clear.click(
         lambda: [None] * 8
         + [50, create_metrics_df(), gr.Dataset(visible=True), gr.Button(visible=False), gr.DataFrame(visible=False)]
-        + [gr.Button(interactive=False)] * 4
+        + [gr.Button(elem_classes="", interactive=False)] * 4
         + [[None, None]],
         outputs=[
             question,