Update app.py

app.py

@@ -229,15 +229,39 @@ div[class*="gradio-container"]  .prose td:first-child {
 }
 div[class*="gradio-container"]  .prose th:not(:first-child),
 div[class*="gradio-container"]  .prose td:not(:first-child) {
-    min-width: 90px;
-    /* max-width: 140px; */
-    width:auto !important;
+    /* min-width: 90px;
+    max-width: 140px;
+    width:auto !important; */
     text-align: center;
 }
 /* --- CUSTOM RULE FOR THE SECOND CHILD --- */
 #model_specific_table .prose td:nth-child(2) {
     text-align: left;         /* Example: A custom alignment */
 }
+/* --- Styles for the Model Comparison Table --- */
+
+/* Rule for the Second Column (Task Name) */
+#models_comparasion_table .prose th:nth-child(2),
+#models_comparasion_table .prose td:nth-child(2) {
+    width: 200px !important;  /* Give it enough width */
+    text-align: left !important;
+    white-space: nowrap;          /* Prevent text from wrapping */
+}
+
+/* Rule for the First Column (Cluster) */
+#models_comparasion_table .prose th:first-child,
+#models_comparasion_table .prose td:first-child {
+    width: 130px !important;
+    text-align: left !important;
+}
+
+/* Rule for other columns (Task ID, Metric, Scores, etc.) */
+#models_comparasion_table .prose th:not(:nth-child(1)):not(:nth-child(2)),
+#models_comparasion_table .prose td:not(:nth-child(1)):not(:nth-child(2)) {
+    width: 95px !important;  /* Set a consistent width for other columns */
+    text-align: center;
+}
+
 """
 
 introduction_text = """
@@ -408,6 +432,29 @@ with gr.Blocks(title="Sahara Benchmark Leaderboards", css=google_style_css) as d
                     inputs=model_dropdown, 
                     outputs=[model_title_component, model_table_component]
                 )
+            # --- NEW TAB TO COMPARE MODELS ---
+            with gr.Tab("Compare Models", id="compare", elem_id="models_comparasion_table"):
+                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")
+                comparison_output = gr.HTML("<p style='text-align:center;'>Select two models and click Compare to see the results.</p>")
+    
+                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
+                    df = compare_models(m1, m2)
+                    return df_to_html(df)
+    
+                compare_btn.click(
+                    fn=update_comparison_table,
+                    inputs=[model_1_dd, model_2_dd],
+                    outputs=[comparison_output]
+                )
     with gr.Group(elem_classes="content-card"):
         gr.Markdown("<br>")
         gr.HTML("<h2>Citation</h2>If you use the Sahara benchmark for your scientific publication, or if you find the resources in this website useful, please cite our <a href='https://africa.dlnlp.ai/sahara/'>ACL2025 paper </a>as well as the papers of the <a href='https://africa.dlnlp.ai/sahara/tasks'>original authors</a>.")