first final design

app.py

@@ -52,6 +52,7 @@ def extract_size(model_name):
     return 0
 
 df['Size'] = df['Model Name'].apply(extract_size)
+df['Size_Display'] = df['Size'].apply(lambda x: f"{x}B" if x > 0 else "Unknown")
 
 # Add size category for filtering
 def get_size_category(size):
@@ -87,13 +88,17 @@ def filter_and_search_models(search_query, size_ranges, sort_by):
     if sort_by in filtered_df.columns:
         filtered_df = filtered_df.sort_values(sort_by, ascending=False)
     
-    # Select only the columns to display
-    display_df = filtered_df[['Model Name', 'Separate Grounding Score', 
+    # Select columns to display (including Size)
+    display_df = filtered_df[['Model Name', 'Size_Display', 'Separate Grounding Score', 
                               'Separate Quality Score', 'Combined Score']]
     
+    # Rename Size_Display to Size for cleaner display
+    display_df = display_df.rename(columns={'Size_Display': 'Size'})
+    
     # Round numerical values for better display
     for col in ['Separate Grounding Score', 'Separate Quality Score', 'Combined Score']:
-        display_df.loc[:, col] = display_df[col].round(6)
+        display_df = display_df.copy()  # Create a copy to avoid SettingWithCopyWarning
+        display_df[col] = display_df[col].round(6)
     
     return display_df
 
@@ -102,61 +107,60 @@ with gr.Blocks(title="FACT Leaderboard", theme=gr.themes.Base()) as app:
     gr.Markdown("# 🏆 FACT Leaderboard")
     gr.Markdown("### Benchmark for evaluating factuality in language models")
     
+    # Filters at the top
     with gr.Row():
-        with gr.Column(scale=1):
-            # Search box
+        with gr.Column(scale=2):
             search_box = gr.Textbox(
                 label="Model Search",
-                placeholder="Search for a model...",
+                placeholder="Search for a model name...",
                 value=""
             )
-            
-            # Size range filter
-            gr.Markdown("**Filter by Model Size**")
-            size_checkboxes = gr.CheckboxGroup(
-                choices=["0-5B", "5-10B", "10-20B", "20-40B", "40-80B", ">80B"],
-                value=["0-5B", "5-10B", "10-20B", "20-40B", "40-80B", ">80B"],
-                label="",
-                elem_classes="size-filter"
-            )
-            
-            # Sort by dropdown
-            gr.Markdown("**Sort by Metric**")
+        
+        with gr.Column(scale=1):
             sort_dropdown = gr.Dropdown(
                 choices=["Combined Score", "Separate Grounding Score", "Separate Quality Score"],
                 value="Combined Score",
-                label="",
+                label="Sort by",
                 elem_classes="sort-dropdown"
             )
-            
-            # Add legend/explanation
-            gr.Markdown("---")
-            gr.Markdown("**Metric Explanations:**")
-            gr.Markdown("""
-            - **Grounding Score**: Measures factual accuracy
-            - **Quality Score**: Measures response quality
-            - **Combined Score**: Overall performance metric
-            """)
-        
-        with gr.Column(scale=3):
-            # Results table
-            results_table = gr.Dataframe(
-                value=filter_and_search_models("", ["0-5B", "5-10B", "10-20B", "20-40B", "40-80B", ">80B"], "Combined Score"),
-                headers=["Model Name", "Separate Grounding Score", 
-                        "Separate Quality Score", "Combined Score"],
-                datatype=["str", "number", "number", "number"],
-                elem_id="leaderboard-table",
-                interactive=False,
-                wrap=True
-            )
-            
-            # Add statistics
-            total_models = gr.Markdown(f"**Total Models: {len(df)}**")
+    
+    # Size filters in a row
+    with gr.Row():
+        gr.Markdown("**Filter by Model Size:**")
+        size_checkboxes = gr.CheckboxGroup(
+            choices=["0-5B", "5-10B", "10-20B", "20-40B", "40-80B", ">80B"],
+            value=["0-5B", "5-10B", "10-20B", "20-40B", "40-80B", ">80B"],
+            label="",
+            elem_classes="size-filter",
+            container=False
+        )
+    
+    # Model count
+    total_models = gr.Markdown(f"**Showing {len(df)} models**")
+    
+    # Results table below filters
+    results_table = gr.Dataframe(
+        value=filter_and_search_models("", ["0-5B", "5-10B", "10-20B", "20-40B", "40-80B", ">80B"], "Combined Score"),
+        headers=["Model Name", "Size", "Separate Grounding Score", 
+                "Separate Quality Score", "Combined Score"],
+        datatype=["str", "str", "number", "number", "number"],
+        elem_id="leaderboard-table",
+        interactive=False,
+        wrap=True
+    )
+    
+    # Metric explanations at the bottom
+    with gr.Accordion("Metric Explanations", open=False):
+        gr.Markdown("""
+        - **Grounding Score**: Measures the model's ability to provide factually accurate responses based on given context
+        - **Quality Score**: Evaluates the overall quality of the model's responses including coherence and relevance
+        - **Combined Score**: A weighted combination of grounding and quality scores representing overall performance
+        """)
     
     # Update table when filters change
     def update_table(search, sizes, sort_by):
         filtered_df = filter_and_search_models(search, sizes, sort_by)
-        model_count = f"**Total Models: {len(filtered_df)}**"
+        model_count = f"**Showing {len(filtered_df)} models**"
         return filtered_df, model_count
     
     # Connect all inputs to the update function
@@ -182,28 +186,41 @@ with gr.Blocks(title="FACT Leaderboard", theme=gr.themes.Base()) as app:
     app.css = """
     #leaderboard-table {
         font-size: 14px;
+        margin-top: 20px;
+        max-height: 600px;
+        overflow-y: auto;
     }
     
     #leaderboard-table td:first-child {
         font-weight: 500;
+        max-width: 400px;
     }
     
-    #leaderboard-table td:not(:first-child) {
+    #leaderboard-table td:nth-child(2) {
+        text-align: center;
+        font-weight: 500;
+        color: #666;
+    }
+    
+    #leaderboard-table td:nth-child(n+3) {
         text-align: center;
     }
     
+    .size-filter {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 15px;
+        margin-top: 10px;
+    }
+    
     .size-filter label {
         display: flex;
         align-items: center;
-        margin: 5px 0;
+        margin: 0;
     }
     
     .size-filter input[type="checkbox"] {
-        margin-right: 8px;
-    }
-    
-    .sort-dropdown {
-        margin-top: 10px;
+        margin-right: 5px;
     }
     
     /* Highlight rows based on model family */
@@ -216,12 +233,18 @@ with gr.Blocks(title="FACT Leaderboard", theme=gr.themes.Base()) as app:
     }
     
     #leaderboard-table tr:has(td:contains("Qwen")) {
-        background-color: #f0fff0;
+        background-color: #f5fff5;
     }
     
     #leaderboard-table tr:has(td:contains("google")) {
         background-color: #fff0f5;
     }
+    
+    /* Header styling */
+    #leaderboard-table th {
+        background-color: #f8f9fa;
+        font-weight: 600;
+    }
     """
 
 # To load from CSV file, replace the sample data with:
@@ -230,4 +253,4 @@ with gr.Blocks(title="FACT Leaderboard", theme=gr.themes.Base()) as app:
 
 # Launch the app
 if __name__ == "__main__":
-    app.launch(share=True)
+    app.launch()