updated interruption handling for the "try a new question" + user experience improvement (#16)

- updated interruption handling for the "try a new question" + user experience improvement (0bcf8d6e41b22949a90b8c80327678ce5e5345f8)


Co-authored-by: Kai <kai-aizip@users.noreply.huggingface.co>

app.py

@@ -3,6 +3,7 @@ import random
 import pandas as pd
 import os
 import threading
+import time  # Added for sleep
 from utils.data_loader import get_random_example
 from utils.models import generate_summaries, model_names
 from utils.ui_helpers import toggle_context_display, update_feedback, get_context_html
@@ -161,6 +162,33 @@ def handle_vote_submission(example, m_a, m_b, winner, feedback, summary_a, summa
     # Update Elo ratings and get UI updates
     return submit_vote_with_elo(m_a, m_b, winner, feedback, current_results)
 
+def show_loading_state():
+    """Show loading state while fetching new content"""
+    return [
+        gr.update(value="Loading new question and summaries...", interactive=False),
+        gr.update(value="Loading new question and summaries...", interactive=False),
+        gr.update(interactive=False),
+        gr.update(interactive=False),
+        gr.update(interactive=False),
+        gr.update(interactive=False)
+    ]
+
+def handle_new_example_click():
+    """Handle clicking 'Get new example' button"""
+    generation_interrupt.set()  # Interrupt any ongoing generation
+    time.sleep(0.2)  # Added delay to allow threads to detect the interrupt
+    return load_context()[0]
+
+def update_ui_for_new_context(example):
+    """Update UI with new context information"""
+    return [
+        gr.update(value=example['question']),
+        gr.update(value=example.get('processed_context_desc', ''), visible=bool(example.get('processed_context_desc', ''))),
+        gr.update(value=get_context_html(example, False)),
+        gr.update(value="Show Full Context", elem_classes=["context-toggle-button"]),
+        False
+    ]
+
 # Create Gradio interface
 with gr.Blocks(theme=gr.themes.Default(
     primary_hue=gr.themes.colors.orange,
@@ -168,9 +196,22 @@ with gr.Blocks(theme=gr.themes.Default(
 )) as demo:
     # Load CSS
     css_path = os.path.join(os.getcwd(), 'static', 'styles.css')
+    
+    # Make sure the JavaScript directory exists
+    os.makedirs(os.path.join(os.getcwd(), 'static', 'js'), exist_ok=True)
+    
+    # Load the files
     with open(css_path, 'r') as f:
         css_content = f.read()
+    
+    # Create HTML components with CSS and JavaScript links
     gr.HTML(f"<style>{css_content}</style>")
+    
+    # Load JavaScript file via script tag
+    js_path = os.path.join(os.getcwd(), 'static', 'js', 'scroll_helpers.js')
+    # Use relative path for the script source
+    js_path_relative = 'static/js/scroll_helpers.js'
+    gr.HTML(f'<script src="{js_path_relative}"></script>')
 
     # State Variables
     current_example = gr.State({})
@@ -204,10 +245,9 @@ with gr.Blocks(theme=gr.themes.Default(
 
                 with gr.Row(elem_id="query-container"):
                     with gr.Row(elem_classes="query-box-row"):
-                        query_display = gr.Markdown(value="Loading question...", elem_classes="query-text")
+                        query_display = gr.Markdown(value="Loading question...", elem_classes="query-text", elem_id="query-section")
                     random_question_btn = gr.Button("🔄 Try a New Question", elem_classes="query-button")
                 
-
                 # Context description and display
                 context_description = gr.Markdown("", elem_classes="context-description")
                 
@@ -222,14 +262,28 @@ with gr.Blocks(theme=gr.themes.Default(
                 gr.Markdown("---")
                 gr.Markdown("### 🔍 Compare Answers from Models", elem_classes="section-heading")
 
-                # Model summaries
-                with gr.Row():
+                # Model summaries - Add ID for JavaScript to target and disable autoscroll
+                with gr.Row(elem_id="summary-containers"):
                     with gr.Column(scale=1):
                         with gr.Group(elem_classes=["summary-card", "summary-card-a"]):
-                            summary_a_display = gr.Textbox(label="Model A", lines=10, interactive=False, show_copy_button=True)
+                            summary_a_display = gr.Textbox(
+                                label="Model A", 
+                                lines=10, 
+                                interactive=False, 
+                                show_copy_button=True, 
+                                autoscroll=False,  # Disable auto-scrolling
+                                elem_id="summary-a-display"
+                            )
                     with gr.Column(scale=1):
                         with gr.Group(elem_classes=["summary-card", "summary-card-b"]):
-                            summary_b_display = gr.Textbox(label="Model B", lines=10, interactive=False, show_copy_button=True)
+                            summary_b_display = gr.Textbox(
+                                label="Model B", 
+                                lines=10, 
+                                interactive=False, 
+                                show_copy_button=True,
+                                autoscroll=False,  # Disable auto-scrolling
+                                elem_id="summary-b-display"
+                            )
 
                 gr.HTML("<hr>")
 
@@ -283,31 +337,6 @@ The Elo rating system provides a more accurate ranking than simple win rates:
             
             results_table_display = gr.HTML(label="Model Performance")
 
-    # Generic function to handle starting a new example
-    def handle_new_example_click():
-        generation_interrupt.set()  # Interrupt any ongoing generation
-        return load_context()[0]
-        
-    def update_ui_for_new_context(example):
-        return [
-            gr.update(value=example['question']),
-            gr.update(value=example.get('processed_context_desc', ''), visible=bool(example.get('processed_context_desc', ''))),
-            gr.update(value=get_context_html(example, False)),
-            gr.update(value="Show Full Context", elem_classes=["context-toggle-button"]),
-            False
-        ]
-
-    # Add this new function to show a loading state
-    def show_loading_state():
-        return [
-            gr.update(value="Loading new question and summaries...", interactive=False),
-            gr.update(value="Loading new question and summaries...", interactive=False),
-            gr.update(interactive=False),
-            gr.update(interactive=False),
-            gr.update(interactive=False),
-            gr.update(interactive=False)
-        ]
-
     # Event handling
     # Toggle context display
     context_toggle_btn.click(