Update app.py

app.py

@@ -1,141 +1,581 @@
 import gradio as gr
 import pandas as pd
 from apscheduler.schedulers.background import BackgroundScheduler
+# Removed Hugging Face Hub imports as they are not needed for the simplified leaderboard
 
-"""
-MLE‑Dojo Benchmark Leaderboard — Dark Elegance v4
-=================================================
-* Removed "Asc. order" toggle (always sorted high→low).
-* Rank column back to plain numbers.
-* Category selector restyled via CSS.
-* Horizontal scrollbar hidden; vertical scrollbar retained.
-"""
-
-# ---------------------------------------------------------------------------
-#  Import copy or fallback placeholders
-# ---------------------------------------------------------------------------
+# --- Make sure these imports work relative to your file structure ---
+# Option 1: If src is a directory in the same folder as your script:
 try:
     from src.about import (
         CITATION_BUTTON_LABEL,
         CITATION_BUTTON_TEXT,
+        EVALUATION_QUEUE_TEXT, # Keep if used by commented-out submit tab
         INTRODUCTION_TEXT,
         LLM_BENCHMARKS_TEXT,
-        TITLE,
+        TITLE as ORIGINAL_TITLE, # Rename original import
     )
-    from src.display.css_html_js import custom_css
-    from src.envs import REPO_ID
-    from src.submission.submit import add_new_eval
+    from src.display.css_html_js import custom_css as original_css # Rename original import
+    from src.envs import REPO_ID # Keep if needed for restart_space or other functions
+    from src.submission.submit import add_new_eval # Keep if using the submit tab
+    print("Successfully imported from src module.")
+    # Start with original CSS if available
+    custom_css = original_css if isinstance(original_css, str) else ""
+    # Use original title if available, otherwise create a default
+    TITLE = ORIGINAL_TITLE if isinstance(ORIGINAL_TITLE, str) else "<h1>🏆 MLE-Dojo Benchmark Leaderboard</h1>"
+
+# Option 2: If you don't have these files, define placeholders (REMOVE THIS if using Option 1)
 except ImportError:
-    CITATION_BUTTON_LABEL = "Citation"
-    CITATION_BUTTON_TEXT  = "Please cite us if you use this benchmark…"
-    INTRODUCTION_TEXT     = "Welcome to the **MLE‑Dojo Benchmark Leaderboard** — compare LLM agents across realistic ML‑engineering tasks."
-    LLM_BENCHMARKS_TEXT   = "Further details about tasks, metrics, and evaluation pipelines."
-    TITLE = (
-        "<h1 class='hero-title gradient-text'>🏆 MLE‑Dojo Benchmark Leaderboard</h1>"
-        "<p class='subtitle'>Interactive, reproducible &amp; community‑driven ML‑agent benchmarking</p>"
-    )
-    custom_css = ""
-    REPO_ID = "your/space-id"
-    def add_new_eval(*_):
-        return "Submission placeholder."
+    print("Warning: Using placeholder values because src module imports failed.")
+    CITATION_BUTTON_LABEL="Citation"
+    CITATION_BUTTON_TEXT="Please cite us if you use this benchmark..."
+    EVALUATION_QUEUE_TEXT="Current evaluation queue:"
+    INTRODUCTION_TEXT="Welcome to the **MLE-Dojo Benchmark Leaderboard**, showcasing the performance of various models across different machine learning tasks. Select a category below to see the rankings based on Elo scores."
+    LLM_BENCHMARKS_TEXT="""
+## About the Benchmarks
+
+This leaderboard tracks model performance using Elo ratings across several key areas:
 
-# ---------------------------------------------------------------------------
-#  Data (unchanged)
-# ---------------------------------------------------------------------------
+* **Overall:** A combined score reflecting performance across all categories.
+* **MLE-Lite:** Benchmarks focusing on lightweight machine learning engineering tasks.
+* **Tabular:** Performance on tasks involving structured, tabular data.
+* **NLP:** Natural Language Processing capabilities.
+* **CV:** Computer Vision tasks.
 
+Models are ranked based on their Elo score within each category. Higher scores indicate better relative performance. Click on a model name to visit its associated page (if available).
+"""
+    # Define an enhanced TITLE with an icon
+    TITLE = """
+    <div style="display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
+        <span style="font-size: 2.5em; margin-right: 15px;">🏆</span>
+        <h1 style="font-size: 2.8em; font-weight: 600; color: #333; margin: 0; line-height: 1.2;">
+            MLE-Dojo Benchmark Leaderboard
+        </h1>
+    </div>
+    """
+    custom_css="" # Start with empty CSS if not imported
+    REPO_ID="your/space-id" # Replace with actual ID if needed
+    def add_new_eval(*args): return "Submission placeholder."
+# --- End Placeholder Definitions ---
+
+
+# --- 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},
-    {"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},
-    {"model_name": "gemini-2.0-pro",   "url": "https://blog.google/technology/google-deepmind/gemini-model-updates-february-2025/", "organizer": "Google",  "license": "Proprietary", "MLE-Lite_Elo": 1064, "Tabular_Elo": 1139, "NLP_Elo": 1028, "CV_Elo": 973,  "Overall": 1054},
-    {"model_name": "gemini-2.5-pro",   "url": "https://deepmind.google/technologies/gemini/pro/",                           "organizer": "Google",  "license": "Proprietary", "MLE-Lite_Elo": 1257, "Tabular_Elo": 1150, "NLP_Elo": 1266, "CV_Elo": 1177, "Overall": 1214},
+{'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': '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},
+{'model_name': 'gemini-2.0-pro', 'url': 'https://blog.google/technology/google-deepmind/gemini-model-updates-february-2025/', 'organizer': 'Google', 'license': 'Proprietary', 'MLE-Lite_Elo': 1064, 'Tabular_Elo': 1139, 'NLP_Elo': 1028, 'CV_Elo': 973, 'Overall': 1054},
+{'model_name': 'gemini-2.5-pro', 'url': 'https://deepmind.google/technologies/gemini/pro/', 'organizer': 'Google', 'license': 'Proprietary', 'MLE-Lite_Elo': 1257, 'Tabular_Elo': 1150, 'NLP_Elo': 1266, 'CV_Elo': 1177, 'Overall': 1214},
 ]
+
+# Create a master DataFrame
 master_df = pd.DataFrame(data)
 
-# ---------------------------------------------------------------------------
-#  Helpers
-# ---------------------------------------------------------------------------
-CATEGORIES = ["Overall", "MLE-Lite", "Tabular", "NLP", "CV"]
-DEFAULT_CATEGORY = "Overall"
-CATEGORY_MAP = {
-    "Overall": "Overall",
-    "MLE-Lite": "MLE-Lite_Elo",
-    "Tabular": "Tabular_Elo",
-    "NLP": "NLP_Elo",
-    "CV": "CV_Elo",
-}
-
-def update_leaderboard(category: str):
-    col = CATEGORY_MAP.get(category, CATEGORY_MAP[DEFAULT_CATEGORY])
-    df = (
-        master_df[["model_name", "url", "organizer", "license", col]]
-        .sort_values(by=col, ascending=False)
-        .reset_index(drop=True)
+# Define categories for selection (user-facing) - Emojis added
+CATEGORIES = ["🏆 Overall", "💡 MLE-Lite", "📊 Tabular", "💬 NLP", "👁️ CV"]
+DEFAULT_CATEGORY = "🏆 Overall" # Set a default category
+
+# Map user-facing categories (WITHOUT emojis) to DataFrame column names
+category_to_column = {
+    "Overall": "Overall", # Mapped from "🏆 Overall"
+    "MLE-Lite": "MLE-Lite_Elo", # Mapped from "💡 MLE-Lite"
+    "Tabular": "Tabular_Elo", # Mapped from "📊 Tabular"
+    "NLP": "NLP_Elo", # Mapped from "💬 NLP"
+    "CV": "CV_Elo", # Mapped from "👁️ CV"
+}
+
+# --- Helper function to update leaderboard ---
+def update_leaderboard(category_with_emoji):
+    """
+    Selects relevant columns, sorts by the chosen category's Elo score,
+    adds Rank, formats model name as a link, and returns the DataFrame.
+    Handles category names with emojis.
+    """
+    # Extract the base category name by removing the emoji and leading space
+    base_category = category_with_emoji.split(" ", 1)[-1]
+    score_column = category_to_column.get(base_category)
+
+    if score_column is None or score_column not in master_df.columns:
+        print(f"Warning: Invalid category '{base_category}' or column '{score_column}'. Falling back to default.")
+        default_base_category = DEFAULT_CATEGORY.split(" ", 1)[-1]
+        score_column = category_to_column[default_base_category]
+        # Check fallback column too
+        if score_column not in master_df.columns:
+            print(f"Error: Default column '{score_column}' also not found.")
+            # Return empty df with correct columns
+            return pd.DataFrame({
+                "Rank": [],
+                "Model": [],
+                "Elo Score": [],
+                "Organizer": [],
+                "License": []
+            })
+
+    # Select base columns + the score column for sorting
+    cols_to_select = ['model_name', 'url', 'organizer', 'license', score_column]
+    df = master_df[cols_to_select].copy()
+
+    # Sort by the selected 'Elo Score' descending
+    df.sort_values(by=score_column, ascending=False, inplace=True)
+
+    # Add Rank based on the sorted order
+    df.reset_index(drop=True, inplace=True)
+    df.insert(0, 'Rank', df.index + 1)
+
+    # Format Model Name as HTML Hyperlink with improved styling
+    df['Model'] = df.apply(
+        lambda row: f"<a href='{row['url'] if pd.notna(row['url']) else '#'}' target='_blank' "
+                    f"style='color: #0056b3; text-decoration: none; font-weight: 500;'>"
+                    f"{row['model_name']}</a>",
+        axis=1
     )
-    df.insert(0, "Rank", df.index + 1)
-    df["Model"] = df.apply(lambda r: f"<a href='{r.url}' target='_blank'>{r.model_name}</a>", axis=1)
-    df.rename(columns={"organizer": "Organizer", "license": "License", col: "Elo Score"}, inplace=True)
-    return df[["Rank", "Model", "Organizer", "License", "Elo Score"]]
-
-# ---------------------------------------------------------------------------
-#  CSS tweaks — category radio beautify & horizontal scroll hidden
-# ---------------------------------------------------------------------------
-custom_css += """
-/* Category radio stylish pill */
-.gr-radio input+label{
-  background:#1e293b; color:#e2e8f0; padding:6px 14px; border-radius:9999px; margin-right:8px; cursor:pointer;
-  transition:background .2s, color .2s;
-}
-.gr-radio input:checked+label{background:#38bdf8;color:#0f172a;font-weight:600;}
-
-/* Remove horizontal scrollbar; keep vertical */
-#leaderboard-table tbody{overflow-y:auto;overflow-x:hidden;max-height:520px;display:block;}
-#leaderboard-table thead, #leaderboard-table tbody tr{display:table;width:100%;table-layout:fixed;}
-
-#leaderboard-table td{padding:.7em;font-size:1.05rem;border-top:1px solid #334155;}
+
+    # Rename the score column to 'Elo Score' for consistent display
+    df.rename(columns={score_column: 'Elo Score'}, inplace=True)
+
+    # Rename 'organizer' and 'license' to match desired display headers
+    df.rename(columns={'organizer': 'Organizer', 'license': 'License'}, inplace=True)
+
+    # Select and reorder columns for final display
+    final_columns = ["Rank", "Model", "Organizer", "License", "Elo Score"]
+    df = df[final_columns]
+
+    return df
+
+# --- Mock/Placeholder functions/data for other tabs ---
+# (If the Submit tab is used, ensure these variables are appropriately populated or handled)
+print("Warning: Evaluation queue data fetching is disabled/mocked due to leaderboard changes.")
+finished_eval_queue_df = pd.DataFrame(columns=["Model", "Status", "Requested", "Started"])
+running_eval_queue_df = pd.DataFrame(columns=["Model", "Status", "Requested", "Started"])
+pending_eval_queue_df = pd.DataFrame(columns=["Model", "Status", "Requested", "Started"])
+EVAL_COLS = ["Model", "Status", "Requested", "Started"] # Define for the dataframe headers
+EVAL_TYPES = ["str", "str", "str", "str"] # Define for the dataframe types
+
+# --- Keep restart function if relevant ---
+def restart_space():
+    # Make sure REPO_ID is correctly defined/imported if this function is used
+    print(f"Attempting to restart space: {REPO_ID}")
+    # Replace with your actual space restart mechanism if needed (e.g., HfApi().restart_space(REPO_ID))
+
+
+# --- Enhanced CSS ---
+enhanced_css = """
+/* --- Overall Body and Font --- */
+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 */
+    line-height: 1.6;
+}
+
+/* --- Headings --- */
+h1, .markdown-text h1 { /* Target Gradio's Markdown output too */
+    font-size: 2.6em !important; /* Larger main title */
+    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 */
+}
+h2, .markdown-text h2 {
+    font-size: 1.8em !important;
+    font-weight: 600 !important;
+    color: #343a40;
+    margin-top: 1.5em !important;
+    margin-bottom: 0.8em !important;
+    border-bottom: 2px solid #dee2e6;
+    padding-bottom: 0.3em;
+}
+h3, .markdown-text h3 {
+    font-size: 1.4em !important;
+    font-weight: 600 !important;
+    color: #495057;
+    margin-top: 1.2em !important;
+    margin-bottom: 0.6em !important;
+}
+
+/* --- Markdown & Text --- */
+.markdown-text p {
+    margin-bottom: 1.2em !important;
+    font-size: 1.05em !important;
+    color: #454545;
+}
+.markdown-text ul, .markdown-text ol {
+    padding-left: 1.8em !important;
+    margin-bottom: 1.2em !important;
+    font-size: 1.05em !important;
+}
+.markdown-text li {
+    margin-bottom: 0.6em !important;
+}
+.markdown-text strong {
+    font-weight: 600;
+    color: #0056b3; /* Highlight strong text */
+}
+.markdown-text a {
+    color: #0056b3;
+    text-decoration: none;
+}
+.markdown-text a:hover {
+    text-decoration: underline;
+}
+
+/* --- 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 */
+}
+
+/* --- Tabs --- */
+.tab-buttons button { /* Target tab buttons */
+    font-size: 1.1em !important; /* Slightly larger tab text */
+    padding: 12px 20px !important;
+    border-radius: 8px 8px 0 0 !important; /* Rounded top corners */
+    border: 1px solid #dee2e6 !important;
+    border-bottom: none !important;
+    background-color: #f8f9fa !important; /* Default tab background */
+    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 */
+    font-weight: 600 !important;
+    border-color: #dee2e6 #dee2e6 #ffffff !important; /* Hide bottom border */
+    position: relative;
+    top: 1px; /* Align with content area */
+}
+
+/* --- Radio Buttons (Category Selector) --- */
+#category-selector-radio .gr-form { /* Target the form containing radio buttons */
+    display: flex;
+    flex-wrap: wrap; /* Allow wrapping */
+    gap: 12px; /* Space between buttons */
+    border: 1px solid #ced4da;
+    padding: 15px;
+    border-radius: 8px;
+    background-color: #f8f9fa;
+    margin-bottom: 20px;
+}
+#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 > div { /* Target individual radio button containers */
+    flex-grow: 1; /* Allow buttons to grow */
+    min-width: 150px; /* Minimum width */
+}
+#category-selector-radio .gr-form label { /* Style individual radio labels */
+    display: block; /* Make label take full width */
+    padding: 10px 15px;
+    border: 1px solid #ced4da;
+    border-radius: 6px;
+    background-color: #ffffff;
+    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 */
+}
+#category-selector-radio .gr-form input[type="radio"] { /* Hide the actual radio button */
+    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 */
+    color: #ffffff;
+    border-color: #004494;
+    font-weight: 600;
+}
+#category-selector-radio .gr-form label:hover {
+    background-color: #e9ecef;
+    border-color: #adb5bd;
+}
+#category-selector-radio .gr-form input[type="radio"]:checked + label:hover {
+    background-color: #004a9e; /* Slightly darker hover for selected */
+}
+
+
+/* --- Dataframe (Leaderboard Table) --- */
+#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);
+}
+#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 table {
+    width: 100%;
+    border-collapse: collapse; /* Ensure borders touch */
+}
+#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 */
+    text-align: left;
+    vertical-align: middle; /* Center content vertically */
+    font-size: 1em !important; /* Table text size */
+    white-space: normal; /* Allow text wrapping */
+}
+#leaderboard-table th {
+    background-color: #f8f9fa !important; /* Lighter header background */
+    font-weight: 600 !important;
+    color: #495057;
+    font-size: 1.05em !important;
+    border-bottom-width: 2px !important; /* Thicker border under header */
+    border-color: #dee2e6 !important;
+}
+#leaderboard-table tr:last-child td {
+    border-bottom: none !important; /* Remove border from last row */
+}
+#leaderboard-table tr:nth-child(even) {
+    background-color: #fdfdfe !important; /* Very subtle striping */
+}
+#leaderboard-table tr:hover {
+    background-color: #e9f5ff !important; /* Light blue hover */
+}
+#leaderboard-table td a {
+    color: #0056b3;
+    text-decoration: none;
+    font-weight: 500; /* Make links slightly bolder */
+}
+#leaderboard-table td a:hover {
+    text-decoration: underline;
+    color: #003d80;
+}
+#leaderboard-table td:first-child, /* Rank column */
+#leaderboard-table th:first-child {
+    text-align: center;
+    font-weight: 600;
+    width: 60px; /* Fixed width for Rank */
+}
+#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 */
+}
+
+/* --- Accordion --- */
+.gradio-accordion { /* Custom class if needed, else target default */
+    border: 1px solid #dee2e6 !important;
+    border-radius: 8px !important;
+    margin-bottom: 15px !important;
+    overflow: hidden;
+}
+.gradio-accordion > button, /* Target accordion button */
+.gradio-accordion > .gr-panel > button { /* Alternative selector if needed */
+    background-color: #f8f9fa !important;
+    border: none !important;
+    border-bottom: 1px solid #dee2e6 !important;
+    padding: 12px 18px !important;
+    font-size: 1.1em !important;
+    font-weight: 600 !important;
+    color: #343a40 !important;
+    width: 100%;
+    text-align: left;
+    cursor: pointer;
+}
+.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;
+}
+#citation-button textarea { /* Style citation textbox */
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 0.95em !important;
+    background-color: #e9ecef;
+    border-radius: 6px;
+    padding: 12px;
+}
+#citation-button label {
+    font-weight: 600;
+    color: #343a40;
+}
+
+/* --- Buttons (General / Submit) --- */
+.gr-button {
+    font-size: 1.05em !important;
+    padding: 10px 20px !important;
+    border-radius: 6px !important;
+    font-weight: 500 !important;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+/* Style specific buttons if needed */
+#submit_button { /* Example if you add an ID to the submit button */
+    background-color: #0069d9 !important;
+    color: white !important;
+    border: none !important;
+}
+#submit_button:hover {
+    background-color: #0056b3 !important;
+}
+
+/* --- Textbox / Dropdown --- */
+.gr-input, .gr-dropdown, .gr-textbox textarea {
+    font-size: 1em !important;
+    border-radius: 6px !important;
+    border: 1px solid #ced4da !important;
+    padding: 10px 12px !important;
+}
+.gr-input:focus, .gr-dropdown:focus, .gr-textbox textarea:focus {
+    border-color: #80bdff !important;
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
+}
+.gr-input-label > span, /* Label text */
+.gr-checkbox-label > span {
+    font-size: 1em !important;
+    font-weight: 500 !important;
+    color: #495057 !important;
+    margin-bottom: 5px !important;
+}
+
+
 """
+# Combine original CSS (if any) with new enhancements
+final_css = custom_css + enhanced_css
 
-# ---------------------------------------------------------------------------
-#  Gradio App
-# ---------------------------------------------------------------------------
-app = gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue="sky", neutral_hue="slate", font=["Inter",]))
+# Use a theme for better default styling
+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
+    radius_size=gr.themes.sizes.radius_md,
+))
 
-with app:
+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():
-        with gr.TabItem("🏅 Leaderboard"):
-            gr.HTML("<h3 class='section-title'><span class='icon'>📊</span>Model Elo Rankings by Category</h3>")
-            category_radio = gr.Radio(CATEGORIES, value=DEFAULT_CATEGORY, label="Category")
-            board = gr.Dataframe(
-                value=update_leaderboard(DEFAULT_CATEGORY),
-                headers=["Rank", "Model", "Organizer", "License", "Elo Score"],
-                datatype=["number", "html", "str", "str", "number"],
-                row_count=(len(master_df), "fixed"),
-                col_count=(5, "fixed"),
-                interactive=False,
-                elem_id="leaderboard-table",
-            )
-            category_radio.change(update_leaderboard, category_radio, board)
-        with gr.TabItem("ℹ️ About"):
-            gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")
-    with gr.Accordion("📖 Citation", open=False):
-        gr.Textbox(value=CITATION_BUTTON_TEXT, label=CITATION_BUTTON_LABEL, lines=10, show_copy_button=True)
-
-# ---------------------------------------------------------------------------
-#  Optional scheduler
-# ---------------------------------------------------------------------------
 
-def restart_space():
-    print(f"Restarting space → {REPO_ID}")
+    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
+                category_selector = gr.Radio(
+                    choices=CATEGORIES,
+                    label=None, # Hide the default label, rely on section title and button styling
+                    value=DEFAULT_CATEGORY,
+                    interactive=True,
+                    elem_id="category-selector-radio" # ID for specific CSS styling
+                )
+                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
+                    col_count=(5, "fixed"),
+                    wrap=True, # Allow text wrapping in cells
+                    elem_id="leaderboard-table" # CSS hook for table styling
+                )
+                # Link the radio button change to the update function
+                category_selector.change(
+                    fn=update_leaderboard,
+                    inputs=category_selector,
+                    outputs=leaderboard_df_component
+                )
+
+        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
+                 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
+        # 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) ---
+    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
+            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
+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
+        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.start()
+        else:
+            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":
+                 print("Warning: REPO_ID not set or is placeholder; space restart job not scheduled.")
+    except Exception as e:
+        print(f"Failed to initialize or start scheduler: {e}")
+
 
+# --- Launch the app ---
+# Ensures the app launches only when the script is run directly
 if __name__ == "__main__":
-    if REPO_ID != "your/space-id":
-        scheduler = BackgroundScheduler()
-        scheduler.add_job(restart_space, "interval", seconds=1800)
-        scheduler.start()
-    print("Launching app…")
-    app.launch()
+    # 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...")
+    demo.launch()