Update app.py

app.py

@@ -1,3 +1,4 @@
+# -*- coding: utf-8 -*-
 import gradio as gr
 import pandas as pd
 from apscheduler.schedulers.background import BackgroundScheduler
@@ -60,12 +61,10 @@ Models are ranked based on their Elo score within each category. Higher scores i
 
 # --- Elo Leaderboard Configuration ---
 # Enhanced data with Rank (placeholder), Organizer, License, and URL
-# !!! IMPORTANT: Replace placeholder URLs with actual model/project pages. !!!
-# Verify organizer and license information for accuracy.
 data = [
 {'model_name': 'gpt-4o-mini', 'url': 'https://openai.com/index/gpt-4o-mini-advancing-cost-efficient-intelligence/', 'organizer': 'OpenAI', 'license': 'Proprietary', 'MLE-Lite_Elo': 753, 'Tabular_Elo': 839, 'NLP_Elo': 758, 'CV_Elo': 754, 'Overall': 778},
 {'model_name': 'gpt-4o', 'url': 'https://openai.com/index/hello-gpt-4o/', 'organizer': 'OpenAI', 'license': 'Proprietary', 'MLE-Lite_Elo': 830, 'Tabular_Elo': 861, 'NLP_Elo': 903, 'CV_Elo': 761, 'Overall': 841},
-{'model_name': 'o3-mini', 'url': 'https://openai.com/index/openai-o3-mini/', 'organizer': 'OpenAI', 'license': 'Proprietary', 'MLE-Lite_Elo': 1108, 'Tabular_Elo': 1019, 'NLP_Elo': 1056, 'CV_Elo': 1207, 'Overall': 1096}, # Fill details later
+{'model_name': 'o3-mini', 'url': 'https://openai.com/index/openai-o3-mini/', 'organizer': 'OpenAI', 'license': 'Proprietary', 'MLE-Lite_Elo': 1108, 'Tabular_Elo': 1019, 'NLP_Elo': 1056, 'CV_Elo': 1207, 'Overall': 1096},
 {'model_name': 'deepseek-v3', 'url': 'https://api-docs.deepseek.com/news/news1226', 'organizer': 'DeepSeek', 'license': 'DeepSeek', 'MLE-Lite_Elo': 1004, 'Tabular_Elo': 1015, 'NLP_Elo': 1028, 'CV_Elo': 1067, 'Overall': 1023},
 {'model_name': 'deepseek-r1', 'url': 'https://api-docs.deepseek.com/news/news250120', 'organizer': 'DeepSeek', 'license': 'DeepSeek', 'MLE-Lite_Elo': 1137, 'Tabular_Elo': 1053, 'NLP_Elo': 1103, 'CV_Elo': 1083, 'Overall': 1100},
 {'model_name': 'gemini-2.0-flash', 'url': 'https://ai.google.dev/gemini-api/docs/models#gemini-2.0-flash', 'organizer': 'Google', 'license': 'Proprietary', 'MLE-Lite_Elo': 847, 'Tabular_Elo': 923, 'NLP_Elo': 860, 'CV_Elo': 978, 'Overall': 895},
@@ -169,19 +168,19 @@ enhanced_css = """
 body, .gradio-container {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Modern Font Stack */
     font-size: 16px !important; /* Base font size */
-    color: #333;
-    background-color: #f8f9fa; /* Light background */
+    color: #212529; /* Slightly darker base text for better contrast on lighter bg */
+    background-color: #f8f9fa; /* Light gray page background */
     line-height: 1.6;
 }
 
 /* --- Headings --- */
-h1, .markdown-text h1 { /* Target Gradio's Markdown output too */
-    font-size: 2.6em !important; /* Larger main title */
+h1, .markdown-text h1 {
+    font-size: 2.6em !important;
     font-weight: 700 !important;
     color: #212529;
     margin-bottom: 0.7em !important;
     line-height: 1.3 !important;
-    text-align: center; /* Center main title if not using custom HTML */
+    text-align: center;
 }
 h2, .markdown-text h2 {
     font-size: 1.8em !important;
@@ -204,7 +203,7 @@ h3, .markdown-text h3 {
 .markdown-text p {
     margin-bottom: 1.2em !important;
     font-size: 1.05em !important;
-    color: #454545;
+    color: #343a40; /* Darker paragraph text */
 }
 .markdown-text ul, .markdown-text ol {
     padding-left: 1.8em !important;
@@ -216,7 +215,7 @@ h3, .markdown-text h3 {
 }
 .markdown-text strong {
     font-weight: 600;
-    color: #0056b3; /* Highlight strong text */
+    color: #0056b3;
 }
 .markdown-text a {
     color: #0056b3;
@@ -228,69 +227,70 @@ h3, .markdown-text h3 {
 
 /* --- Gradio Components Styling --- */
 .gradio-container {
-    max-width: 1200px; /* Limit max width for better readability on wide screens */
-    margin: 20px auto !important; /* Center container with margin */
-    padding: 25px !important;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Softer shadow */
-    border-radius: 12px; /* Rounded corners */
-    background-color: #ffffff; /* White background for content area */
+    max-width: 1300px !important; /* Increased max width */
+    margin: 25px auto !important; /* Center container with margin */
+    padding: 30px !important; /* Increased padding */
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); /* Slightly adjusted shadow */
+    border-radius: 12px !important; /* Rounded corners */
+    background-color: #fafafa !important; /* Slightly off-white background */
+    border: 1px solid #e9ecef; /* Subtle border */
 }
 
 /* --- Tabs --- */
-.tab-buttons button { /* Target tab buttons */
-    font-size: 1.1em !important; /* Slightly larger tab text */
+.tab-buttons button {
+    font-size: 1.1em !important;
     padding: 12px 20px !important;
-    border-radius: 8px 8px 0 0 !important; /* Rounded top corners */
+    border-radius: 8px 8px 0 0 !important;
     border: 1px solid #dee2e6 !important;
     border-bottom: none !important;
-    background-color: #f8f9fa !important; /* Default tab background */
+    background-color: #f1f3f5 !important; /* Default tab background slightly darker */
     color: #495057 !important;
     margin-right: 4px !important;
     transition: background-color 0.3s ease, color 0.3s ease;
 }
-.tab-buttons button.selected { /* Selected tab style */
-    background-color: #ffffff !important;
-    color: #0056b3 !important; /* Highlight selected tab */
+.tab-buttons button.selected {
+    background-color: #fafafa !important; /* Match container background */
+    color: #0056b3 !important;
     font-weight: 600 !important;
-    border-color: #dee2e6 #dee2e6 #ffffff !important; /* Hide bottom border */
+    border-color: #dee2e6 #dee2e6 #fafafa !important; /* Hide bottom border */
     position: relative;
-    top: 1px; /* Align with content area */
+    top: 1px;
 }
 
 /* --- Radio Buttons (Category Selector) --- */
-#category-selector-radio .gr-form { /* Target the form containing radio buttons */
+#category-selector-radio .gr-form {
     display: flex;
-    flex-wrap: wrap; /* Allow wrapping */
-    gap: 12px; /* Space between buttons */
+    flex-wrap: wrap;
+    gap: 12px;
     border: 1px solid #ced4da;
     padding: 15px;
     border-radius: 8px;
-    background-color: #f8f9fa;
-    margin-bottom: 20px;
+    background-color: #f1f3f5; /* Match default tab background */
+    margin-bottom: 25px; /* Increased margin */
 }
-#category-selector-radio .gr-form .gr-input-label { /* Hide the main "Select Category:" label if needed */
-     display: none; /* Optional: Hide label if context is clear */
+#category-selector-radio .gr-form .gr-input-label {
+     display: none;
 }
-#category-selector-radio .gr-form > div { /* Target individual radio button containers */
-    flex-grow: 1; /* Allow buttons to grow */
-    min-width: 150px; /* Minimum width */
+#category-selector-radio .gr-form > div {
+    flex-grow: 1;
+    min-width: 150px;
 }
-#category-selector-radio .gr-form label { /* Style individual radio labels */
-    display: block; /* Make label take full width */
+#category-selector-radio .gr-form label {
+    display: block;
     padding: 10px 15px;
     border: 1px solid #ced4da;
     border-radius: 6px;
-    background-color: #ffffff;
+    background-color: #ffffff; /* White buttons */
     cursor: pointer;
     text-align: center;
     transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
-    font-size: 1.05em; /* Make radio text slightly larger */
+    font-size: 1.05em;
 }
-#category-selector-radio .gr-form input[type="radio"] { /* Hide the actual radio button */
+#category-selector-radio .gr-form input[type="radio"] {
     display: none;
 }
-#category-selector-radio .gr-form input[type="radio"]:checked + label { /* Style for selected radio label */
-    background-color: #0056b3; /* Use primary color for selected */
+#category-selector-radio .gr-form input[type="radio"]:checked + label {
+    background-color: #0056b3;
     color: #ffffff;
     border-color: #004494;
     font-weight: 600;
@@ -300,7 +300,7 @@ h3, .markdown-text h3 {
     border-color: #adb5bd;
 }
 #category-selector-radio .gr-form input[type="radio"]:checked + label:hover {
-    background-color: #004a9e; /* Slightly darker hover for selected */
+    background-color: #004a9e;
 }
 
 
@@ -308,49 +308,52 @@ h3, .markdown-text h3 {
 #leaderboard-table {
     margin-top: 20px;
     border: 1px solid #dee2e6;
-    border-radius: 8px; /* Rounded corners for the table wrapper */
-    overflow: hidden; /* Clip content to rounded corners */
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* Refined shadow */
 }
-#leaderboard-table .gr-dataframe { /* Target the inner dataframe structure */
-    border: none !important; /* Remove default border if needed */
-    border-radius: 0 !important; /* Reset inner radius if container has one */
+#leaderboard-table .gr-dataframe {
+    border: none !important;
+    border-radius: 0 !important;
 }
 
 #leaderboard-table table {
     width: 100%;
-    border-collapse: collapse; /* Ensure borders touch */
+    border-collapse: collapse;
+    table-layout: auto; /* Let browser handle column widths based on content */
 }
 #leaderboard-table th, #leaderboard-table td {
-    padding: 14px 18px !important; /* More padding */
-    border: none !important; /* Remove individual cell borders */
-    border-bottom: 1px solid #e9ecef !important; /* Use bottom borders as separators */
+    padding: 16px 18px !important; /* Increased vertical padding */
+    border: none !important;
+    border-bottom: 1px solid #e9ecef !important;
     text-align: left;
-    vertical-align: middle; /* Center content vertically */
-    font-size: 1em !important; /* Table text size */
-    white-space: normal; /* Allow text wrapping */
+    vertical-align: middle;
+    font-size: 1.1em !important; /* <<< Increased leaderboard font size */
+    white-space: normal;
+    /* Removed fixed widths */
 }
 #leaderboard-table th {
-    background-color: #f8f9fa !important; /* Lighter header background */
+    background-color: #f1f3f5 !important; /* Match other subtle backgrounds */
     font-weight: 600 !important;
-    color: #495057;
-    font-size: 1.05em !important;
-    border-bottom-width: 2px !important; /* Thicker border under header */
+    color: #343a40; /* Darker header text */
+    font-size: 1.15em !important; /* Slightly larger header font */
+    border-bottom-width: 2px !important;
     border-color: #dee2e6 !important;
+    white-space: nowrap; /* Prevent header text wrapping */
 }
 #leaderboard-table tr:last-child td {
-    border-bottom: none !important; /* Remove border from last row */
+    border-bottom: none !important;
 }
 #leaderboard-table tr:nth-child(even) {
-    background-color: #fdfdfe !important; /* Very subtle striping */
+    background-color: #f8f9fa !important; /* Subtle striping slightly darker */
 }
 #leaderboard-table tr:hover {
-    background-color: #e9f5ff !important; /* Light blue hover */
+    background-color: #e9f5ff !important;
 }
 #leaderboard-table td a {
     color: #0056b3;
     text-decoration: none;
-    font-weight: 500; /* Make links slightly bolder */
+    font-weight: 500;
 }
 #leaderboard-table td a:hover {
     text-decoration: underline;
@@ -360,25 +363,27 @@ h3, .markdown-text h3 {
 #leaderboard-table th:first-child {
     text-align: center;
     font-weight: 600;
-    width: 60px; /* Fixed width for Rank */
+    /* width: auto; Let browser decide width */
 }
 #leaderboard-table td:last-child, /* Elo Score column */
 #leaderboard-table th:last-child {
     text-align: right;
     font-weight: 600;
-    width: 120px; /* Fixed width for Score */
+    white-space: nowrap; /* Prevent Elo score wrapping */
+    /* width: auto; Let browser decide width */
 }
 
 /* --- Accordion --- */
-.gradio-accordion { /* Custom class if needed, else target default */
+.gradio-accordion {
     border: 1px solid #dee2e6 !important;
     border-radius: 8px !important;
     margin-bottom: 15px !important;
     overflow: hidden;
+    background-color: #ffffff; /* White background for accordion content area */
 }
-.gradio-accordion > button, /* Target accordion button */
-.gradio-accordion > .gr-panel > button { /* Alternative selector if needed */
-    background-color: #f8f9fa !important;
+.gradio-accordion > button,
+.gradio-accordion > .gr-panel > button {
+    background-color: #f1f3f5 !important;
     border: none !important;
     border-bottom: 1px solid #dee2e6 !important;
     padding: 12px 18px !important;
@@ -389,20 +394,24 @@ h3, .markdown-text h3 {
     text-align: left;
     cursor: pointer;
 }
+.gradio-accordion > button[open] { /* Style when accordion is open */
+     border-bottom: 1px solid #dee2e6 !important;
+}
 .gradio-accordion > button:hover,
 .gradio-accordion > .gr-panel > button:hover {
     background-color: #e9ecef !important;
 }
 .gradio-accordion > div { /* Accordion content */
     padding: 15px 18px !important;
-    background-color: #ffffff;
+    background-color: #ffffff; /* Ensure content background is white */
 }
-#citation-button textarea { /* Style citation textbox */
+#citation-button textarea {
     font-family: 'Courier New', Courier, monospace;
     font-size: 0.95em !important;
-    background-color: #e9ecef;
+    background-color: #f1f3f5; /* Match other subtle backgrounds */
     border-radius: 6px;
     padding: 12px;
+    border: 1px solid #dee2e6; /* Add border */
 }
 #citation-button label {
     font-weight: 600;
@@ -433,6 +442,7 @@ h3, .markdown-text h3 {
     border-radius: 6px !important;
     border: 1px solid #ced4da !important;
     padding: 10px 12px !important;
+    background-color: #ffffff; /* Ensure inputs have white background */
 }
 .gr-input:focus, .gr-dropdown:focus, .gr-textbox textarea:focus {
     border-color: #80bdff !important;
@@ -446,7 +456,6 @@ h3, .markdown-text h3 {
     margin-bottom: 5px !important;
 }
 
-
 """
 # Combine original CSS (if any) with new enhancements
 final_css = custom_css + enhanced_css
@@ -456,41 +465,36 @@ demo = gr.Blocks(css=final_css, theme=gr.themes.Soft(
     primary_hue=gr.themes.colors.blue,
     secondary_hue=gr.themes.colors.sky,
     neutral_hue=gr.themes.colors.gray,
-    font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"], # Explicitly define font stack
+    font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"],
     radius_size=gr.themes.sizes.radius_md,
 ))
 
 with demo:
-    # Use the enhanced TITLE HTML
     gr.HTML(TITLE)
-
-    # Use the INTRODUCTION_TEXT variable
     gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
 
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
-        # Added Emojis to Tab Titles
         with gr.TabItem("🏅 Leaderboard", elem_id="llm-benchmark-tab-table", id=0):
             with gr.Column():
-                gr.Markdown("## Select Category to View Rankings", elem_classes="markdown-text") # More descriptive title
+                gr.Markdown("## Select Category to View Rankings", elem_classes="markdown-text")
                 category_selector = gr.Radio(
                     choices=CATEGORIES,
-                    label=None, # Hide the default label, rely on section title and button styling
+                    label=None,
                     value=DEFAULT_CATEGORY,
                     interactive=True,
-                    elem_id="category-selector-radio" # ID for specific CSS styling
+                    elem_id="category-selector-radio"
                 )
                 leaderboard_df_component = gr.Dataframe(
                     value=update_leaderboard(DEFAULT_CATEGORY),
                     headers=["Rank", "Model", "Organizer", "License", "Elo Score"],
-                    # Ensure datatypes match the formatted output
                     datatype=["number", "html", "str", "str", "number"],
                     interactive=False,
-                    row_count=(len(master_df), "fixed"), # Display all rows
+                    row_count=(len(master_df), "fixed"),
                     col_count=(5, "fixed"),
-                    wrap=True, # Allow text wrapping in cells
-                    elem_id="leaderboard-table" # CSS hook for table styling
+                    wrap=True,
+                    elem_id="leaderboard-table",
+                    allow_sort=False # <<< Disable sorting arrows
                 )
-                # Link the radio button change to the update function
                 category_selector.change(
                     fn=update_leaderboard,
                     inputs=category_selector,
@@ -498,72 +502,32 @@ with demo:
                 )
 
         with gr.TabItem("ℹ️ About", elem_id="llm-benchmark-tab-about", id=1):
-             with gr.Column(scale=2, min_width=600): # Give about tab more space
+             with gr.Column(scale=2, min_width=600):
                  gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")
 
-        # --- Submit Tab (Commented out as in original request) ---
-        # Make sure EVALUATION_QUEUE_TEXT and add_new_eval are imported/defined if uncommented
+        # --- Submit Tab (Commented out) ---
         # with gr.TabItem("🚀 Submit Model", elem_id="llm-benchmark-tab-submit", id=2):
-        #     with gr.Column():
-        #         with gr.Row():
-        #             gr.Markdown(EVALUATION_QUEUE_TEXT, elem_classes="markdown-text") # Requires import/definition
-        #         with gr.Column():
-        #             with gr.Accordion(f"✅ Finished Evaluations ({len(finished_eval_queue_df)})", open=False, elem_classes="gradio-accordion"):
-        #                 finished_eval_table = gr.components.Dataframe(
-        #                     value=finished_eval_queue_df, headers=EVAL_COLS, datatype=EVAL_TYPES, row_count=5,
-        #                 )
-        #             with gr.Accordion(f"🔄 Running Evaluation Queue ({len(running_eval_queue_df)})", open=True, elem_classes="gradio-accordion"): # Open running by default
-        #                 running_eval_table = gr.components.Dataframe(
-        #                     value=running_eval_queue_df, headers=EVAL_COLS, datatype=EVAL_TYPES, row_count=5,
-        #                 )
-        #             with gr.Accordion(f"⏳ Pending Evaluation Queue ({len(pending_eval_queue_df)})", open=True, elem_classes="gradio-accordion"): # Open pending by default
-        #                 pending_eval_table = gr.components.Dataframe(
-        #                     value=pending_eval_queue_df, headers=EVAL_COLS, datatype=EVAL_TYPES, row_count=5,
-        #                 )
-        #         gr.Markdown("--- \n # ✨ Submit Your Model for Evaluation!", elem_classes="markdown-text") # Enhanced submit section title
-        #         with gr.Row():
-        #             with gr.Column(scale=1):
-        #                 model_name_textbox = gr.Textbox(label="Model Name (Hugging Face Hub ID)", placeholder="e.g., openai-community/gpt2")
-        #                 revision_name_textbox = gr.Textbox(label="Revision / Commit Hash", placeholder="main")
-        #                 model_type = gr.Dropdown(choices=["Encoder-Decoder", "Decoder Only", "Encoder Only", "Other"], label="Model Architecture Type", multiselect=False, value=None, interactive=True)
-        #             with gr.Column(scale=1):
-        #                 precision = gr.Dropdown(choices=["float16", "bfloat16", "float32", "int8", "auto"], label="Precision", multiselect=False, value="auto", interactive=True)
-        #                 weight_type = gr.Dropdown(choices=["Original", "Adapter", "Delta"], label="Weights Type", multiselect=False, value="Original", interactive=True)
-        #                 base_model_name_textbox = gr.Textbox(label="Base Model HF ID (if using Adapter/Delta weights)", placeholder="e.g., meta-llama/Llama-2-7b-hf")
-        #         with gr.Row():
-        #              submit_button = gr.Button("🚀 Submit for Evaluation", variant="primary", elem_id="submit_button") # Added variant and ID
-        #         with gr.Row():
-        #             submission_result = gr.Markdown()
-        #         # Ensure add_new_eval is correctly imported/defined and handles these inputs
-        #         submit_button.click(
-        #             add_new_eval, # Requires import/definition
-        #             [ model_name_textbox, base_model_name_textbox, revision_name_textbox, precision, weight_type, model_type, ],
-        #             submission_result,
-        #         )
-
-    # --- Citation Accordion (at the bottom, outside Tabs) ---
+        #     ... (Submit tab code remains the same) ...
+
     with gr.Accordion("📙 Citation", open=False, elem_classes="gradio-accordion"):
-        # Use the CITATION_BUTTON_TEXT and CITATION_BUTTON_LABEL variables
         citation_button = gr.Textbox(
             value=CITATION_BUTTON_TEXT,
             label=CITATION_BUTTON_LABEL,
-            lines=8, # Adjusted lines slightly
+            lines=8,
             elem_id="citation-button",
             show_copy_button=True,
-            # interactive=False # Make it non-editable if it's just for display/copy
         )
 
-# --- Keep scheduler if relevant ---
-# Only start scheduler if the script is run directly
+# --- Scheduler ---
 if __name__ == "__main__":
     try:
-        scheduler = BackgroundScheduler(daemon=True) # Run as daemon thread
-        # Add job only if restart_space is callable and REPO_ID is valid
+        scheduler = BackgroundScheduler(daemon=True)
         if callable(restart_space) and REPO_ID and REPO_ID != "your/space-id":
             print(f"Scheduling space restart for {REPO_ID} every 30 minutes.")
-            scheduler.add_job(restart_space, "interval", seconds=1800) # Restart every 30 mins
+            scheduler.add_job(restart_space, "interval", seconds=1800)
             scheduler.start()
         else:
+            # Print appropriate warnings
             if not callable(restart_space):
                  print("Warning: restart_space function not available; space restart job not scheduled.")
             if not REPO_ID or REPO_ID == "your/space-id":
@@ -573,9 +537,7 @@ if __name__ == "__main__":
 
 
 # --- Launch the app ---
-# Ensures the app launches only when the script is run directly
 if __name__ == "__main__":
-    # Ensure you have installed necessary libraries: pip install gradio pandas apscheduler
-    # Make sure your src module files (about.py etc.) are accessible OR use the placeholder definitions.
     print("Launching Gradio App...")
+    # Use share=True if you need a public link for testing on different devices/networks
     demo.launch()