Update app.py

app.py

@@ -433,35 +433,43 @@ with gr.Blocks(title="Sahara Benchmark Leaderboards", css=google_style_css) as d
                     outputs=[model_title_component, model_table_component]
                 )
             # --- NEW TAB TO COMPARE MODELS ---
-            with gr.Tab("Compare Models", id="compare", elem_id="models_comparasion_table"):
+            with gr.Tab("Compare Models", id="compare"):
                 gr.HTML("<br><br><center><h2>Compare Two Models</h2></center><br>")
                 with gr.Row():
                     model_1_dd = gr.Dropdown(MODEL_NAME_LIST, label="Select Model 1", interactive=True)
                     model_2_dd = gr.Dropdown(MODEL_NAME_LIST, label="Select Model 2", interactive=True)
                 compare_btn = gr.Button("Compare")
-                # --- NEW: Add explanatory note for the 'Difference' column ---
+
+                # Note for the 'Difference' column
                 explanation_note = """
                 **Note on the 'Difference' Column:**
                 * This value is calculated as: `(Score of Model 1) - (Score of Model 2)`.
                 * A positive value in <span style='color:green; font-weight:bold;'>green</span> indicates that **Model 1** performed better on that task.
                 * A negative value in <span style='color:red; font-weight:bold;'>red</span> indicates that **Model 2** performed better on that task.
                 """
-                gr.Markdown(explanation_note)
-                comparison_output = gr.HTML("<p style='text-align:center;'>Select two models and click Compare to see the results.</p>")
-    
+                # --- MODIFIED: Make the note invisible by default ---
+                explanation_note_md = gr.Markdown(explanation_note, visible=False)
+
+                # Create a container with a unique ID for the comparison table
+                with gr.Column(elem_id="models_comparasion_table"):
+                    comparison_output = gr.HTML("<p style='text-align:center;'>Select two models and click Compare to see the results.</p>")
+
+                # --- MODIFIED: The function now returns TWO values (visibility and html) ---
                 def update_comparison_table(m1, m2):
                     if not m1 or not m2:
-                        # Use gr.Info for a non-blocking alert
                         gr.Info("Please select both models before clicking Compare.")
-                        return "<p style='text-align:center;'>Please select two models to compare.</p>"
-                    # Call the new comparison function
+                        # Return an update to hide the note and the placeholder text
+                        return gr.update(visible=False), "<p style='text-align:center;'>Please select two models to compare.</p>"
+                    
                     df = compare_models(m1, m2)
-                    return df_to_html(df)
-    
+                    # Return an update to SHOW the note and the results table
+                    return gr.update(visible=True), df_to_html(df)
+
+                # --- MODIFIED: Update the outputs list to target both components ---
                 compare_btn.click(
                     fn=update_comparison_table,
                     inputs=[model_1_dd, model_2_dd],
-                    outputs=[comparison_output]
+                    outputs=[explanation_note_md, comparison_output]
                 )
     with gr.Group(elem_classes="content-card"):
         gr.Markdown("<br>")