Update app.py

app.py

@@ -79,14 +79,10 @@ with gr.Blocks() as demo:
     input_text = gr.Textbox(lines=2, label="Input Text", placeholder="Enter your query here")
     selected_models = gr.CheckboxGroup(choices=MODEL_OPTIONS, label="Select Models", value=[MODEL_OPTIONS[0]])
     
-    # Define output components with tabs
-    with gr.Tabs() as tabs:
-        # Dynamically create one gr.JSON component for each model
-        output_comparisons = {}
-        for model in MODEL_OPTIONS:
-            output_comparisons[model] = gr.JSON(label=model)
-    
+    # Define output components with scrollable containers
+    output_comparisons = gr.JSON(label="Model Comparisons", elem_id="output-comparisons")
     output_history = gr.JSON(label="History", elem_id="output-history")
+    
     clear_history_button = gr.Button("Clear History")
 
     # Add a button to clear the history
@@ -94,9 +90,7 @@ with gr.Blocks() as demo:
     
     # Define the button to trigger generating comparisons
     generate_button = gr.Button("Generate Comparisons")
-    
-    # Ensure output_comparisons is defined before use
-    generate_button.click(generate_comparisons_with_history, inputs=[input_text, selected_models, gr.State()], outputs=[*output_comparisons.values(), output_history])
+    generate_button.click(generate_comparisons_with_history, inputs=[input_text, selected_models, gr.State()], outputs=[output_comparisons, output_history])
 
     # Insert custom CSS using gr.HTML()
     gr.HTML("""