Update app.py

app.py

@@ -78,20 +78,24 @@ def clear_history():
 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 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
-    clear_history_button.click(clear_history, outputs=output_history)
-    
     # Define the button to trigger generating comparisons
     generate_button = gr.Button("Generate Comparisons")
     generate_button.click(generate_comparisons_with_history, inputs=[input_text, selected_models, gr.State()], outputs=[output_comparisons, output_history])
+    
+    # Define output components with tabs
+    with gr.Tabs() as tabs:
+        output_comparisons = []
+        for model in MODEL_OPTIONS:
+            with gr.Tab(model):
+                output_comparisons.append(gr.JSON(label=model, elem_id=f"output-{model}"))
+    
+    output_history = gr.JSON(label="History", elem_id="output-history")
+    clear_history_button = gr.Button("Clear History")
 
+    # Add a button to clear the history
+    clear_history_button.click(clear_history, outputs=output_history)  
+   
     # Insert custom CSS using gr.HTML()
     gr.HTML("""
         <style>