Scroll to results / outputs on submit / clear, shorten pulse anim del…

…ay, remove pulse on clear

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 {

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
 }

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,