Update app.py

app.py

@@ -14,7 +14,7 @@ try:
         LLM_BENCHMARKS_TEXT,
         TITLE,
     )
-    from src.display.css_html_js import custom_css
+    from src.display.css_html_js import custom_css # Assuming this might exist
     from src.envs import REPO_ID
     from src.submission.submit import add_new_eval
     print("Successfully imported from src module.")
@@ -22,39 +22,39 @@ try:
 except ImportError:
     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:"
+    CITATION_BUTTON_TEXT = "Please cite us if you use this benchmark...\n@misc{mledojo2025benchmark,\n  title={MLE-Dojo Benchmark},\n  author={MLE-Dojo Team},\n  year={2025},\n  howpublished={\\url{https://your-benchmark-url.example.com}},\n}" # Added example citation text
+    EVALUATION_QUEUE_TEXT = "### Current evaluation queue:" # Use Markdown heading
     INTRODUCTION_TEXT = """
-    # Welcome to the MLE-Dojo Benchmark Leaderboard
-    
+    ## Welcome to the MLE-Dojo Benchmark Leaderboard
+
     This leaderboard tracks the performance of various AI models across multiple machine learning engineering domains.
     Our comprehensive evaluation system uses ELO ratings to provide a fair comparison between different models.
-    
-    ## How to read this leaderboard
-    - Select a domain category to view specialized rankings
-    - Higher ELO scores indicate better performance
-    - Click on any model name to learn more about it
+
+    ### How to read this leaderboard
+    - Select a domain category using the radio buttons below to view specialized rankings.
+    - Higher ELO scores indicate better performance within that category.
+    - Click on a model name to visit its page (if available).
     """
     LLM_BENCHMARKS_TEXT = """
-    # About the MLE-Dojo Benchmark
-    
-    ## Evaluation Methodology
+    ## About the MLE-Dojo Benchmark
+
+    ### Evaluation Methodology
     The MLE-Dojo benchmark evaluates models across various domains including:
-    
-    - **MLE-Lite**: Basic machine learning engineering tasks
-    - **Tabular**: Data manipulation, analysis, and modeling with structured data
-    - **NLP**: Natural language processing tasks including classification, generation, and understanding
-    - **CV**: Computer vision tasks including image classification, object detection, and generation
-    
-    Our evaluation uses a sophisticated ELO rating system that considers the relative performance of models against each other.
-    
-    ## Contact
-    For more information or to submit your model, please contact us at [email protected]
+
+    - **MLE-Lite**: Basic machine learning engineering tasks (data preprocessing, feature engineering, model selection).
+    - **Tabular**: Data manipulation, analysis, and modeling with structured data.
+    - **NLP**: Natural language processing tasks (classification, generation, understanding).
+    - **CV**: Computer vision tasks (image classification, object detection, generation).
+
+    Our evaluation uses a sophisticated ELO rating system that considers the relative performance of models against each other based on competitions within each domain.
+
+    ### Contact
+    For more information or to submit your model, please contact us at `[email protected]` (replace with actual contact).
     """
-    TITLE = "<h1>🏆 MLE-Dojo Benchmark Leaderboard</h1>"
-    custom_css = ""
-    REPO_ID = "your/space-id"
-    def add_new_eval(*args): return "Submission placeholder."
+    TITLE = "<h1>🏆 MLE-Dojo Benchmark Leaderboard</h1>" # Keep title simple for header
+    custom_css = "" # Will be populated by enhanced_css later
+    REPO_ID = "your/space-id" # Replace with your actual Hugging Face Space ID if restarting
+    def add_new_eval(*args): return "Submission placeholder." # Placeholder function
 
 # --- Elo Leaderboard Configuration ---
 # Enhanced data with Rank (placeholder), Organizer, License, and URL
@@ -71,7 +71,7 @@ data = [
 
 # Add organization logos (for visual enhancement)
 org_logos = {
-    'OpenAI': '📱',  # You can replace these with actual icon URLs in production
+    'OpenAI': '📱',  # Replace with actual icon URLs or keep emojis
     'DeepSeek': '🔍',
     'Google': '🌐',
     'Default': '🤖'
@@ -81,51 +81,50 @@ org_logos = {
 master_df = pd.DataFrame(data)
 
 # Add last updated timestamp
-last_updated = datetime.now().strftime("%B %d, %Y at %H:%M:%S")
+last_updated = datetime.now().strftime("%B %d, %Y at %H:%M:%S %Z") # Added Timezone
 
 # Define categories with fancy icons
 CATEGORIES = [
-    ("🏆 Overall", "Overall"), 
-    ("💡 MLE-Lite", "MLE-Lite"), 
-    ("📊 Tabular", "Tabular"), 
-    ("📝 NLP", "NLP"), 
+    ("🏆 Overall", "Overall"),
+    ("💡 MLE-Lite", "MLE-Lite"),
+    ("📊 Tabular", "Tabular"),
+    ("📝 NLP", "NLP"),
     ("👁️ CV", "CV")
 ]
-DEFAULT_CATEGORY = "Overall"
+DEFAULT_CATEGORY_LABEL = "🏆 Overall" # Use the label for default value
+DEFAULT_CATEGORY_VALUE = "Overall" # The actual value
 
-# Map user-facing categories to DataFrame column names
+# Map user-facing category *values* to DataFrame column names
 category_to_column = {
+    "Overall": "Overall",
     "MLE-Lite": "MLE-Lite_Elo",
     "Tabular": "Tabular_Elo",
     "NLP": "NLP_Elo",
     "CV": "CV_Elo",
-    "Overall": "Overall"
 }
 
 # --- Helper function to update leaderboard ---
 def update_leaderboard(category_label):
     """
-    Enhanced function to update the leaderboard with visual improvements
+    Enhanced function to update the leaderboard with visual improvements and numerical rank.
     """
-    # Extract the category value from the label if it's a tuple (icon, value)
-    if isinstance(category_label, tuple):
-        category = category_label[1]
-    else:
-        # For backward compatibility or direct values
-        category = category_label.split(" ")[-1] if " " in category_label else category_label
-    
-    score_column = category_to_column.get(category)
+    # Find the category value corresponding to the selected label
+    category_value = DEFAULT_CATEGORY_VALUE # Default fallback
+    for label, value in CATEGORIES:
+        if label == category_label:
+            category_value = value
+            break
+
+    score_column = category_to_column.get(category_value)
     if score_column is None or score_column not in master_df.columns:
-        print(f"Warning: Invalid category '{category}' or column '{score_column}'. Falling back to default.")
-        score_column = category_to_column[DEFAULT_CATEGORY]
+        print(f"Warning: Invalid category value '{category_value}' or column '{score_column}'. Falling back to default.")
+        score_column = category_to_column[DEFAULT_CATEGORY_VALUE] # Fallback to default value
+        category_value = DEFAULT_CATEGORY_VALUE # Ensure category value matches fallback
         if score_column not in master_df.columns:
             print(f"Error: Default column '{score_column}' also not found.")
+            # Return an empty DataFrame with the correct structure
             return pd.DataFrame({
-                "Rank": [],
-                "Model": [],
-                "Organizer": [],
-                "License": [],
-                "Elo Score": []
+                "Rank": [], "Model": [], "Organization": [], "License": [], f"Elo Score ({category_value})": []
             })
 
     # Select base columns + the score column for sorting
@@ -135,27 +134,15 @@ def update_leaderboard(category_label):
     # Sort by the selected 'Elo Score' descending
     df.sort_values(by=score_column, ascending=False, inplace=True)
 
-    # Add Rank with medal emojis for top 3
+    # Add Rank (numerical)
     df.reset_index(drop=True, inplace=True)
-    
-    # Create fancy rank with medals for top positions
-    def get_rank_display(idx):
-        if idx == 0:
-            return "🥇 1"
-        elif idx == 1:
-            return "🥈 2"
-        elif idx == 2:
-            return "🥉 3"
-        else:
-            return f"{idx + 1}"
-    
-    df.insert(0, 'Rank', df.index.map(get_rank_display))
-    
-    # Add organization icons to model names
+    df.insert(0, 'Rank', df.index + 1) # Insert numerical rank starting from 1
+
+    # Add organization icons to model names with clickable links
     df['Model'] = df.apply(
         lambda row: f"""<div style="display: flex; align-items: center;">
             <span style="font-size: 1.5em; margin-right: 10px;">{org_logos.get(row['organizer'], org_logos['Default'])}</span>
-            <a href='{row['url'] if pd.notna(row['url']) else '#'}' target='_blank' 
+            <a href='{row['url'] if pd.notna(row['url']) else '#'}' target='_blank'
                style='color: #0066cc; text-decoration: none; font-weight: 500; font-size: 1.05em;'>
                {row['model_name']}
             </a>
@@ -163,33 +150,34 @@ def update_leaderboard(category_label):
         axis=1
     )
 
-    # Format Elo scores with visual indicators
+    # Format Elo scores with visual indicators (bar + color)
     df['Elo Display'] = df[score_column].apply(
-        lambda score: f"""<div style="display: flex; align-items: center;">
-            <span style="font-weight: bold; color: {'#1a5fb4' if score >= 1000 else '#2ec27e' if score >= 900 else '#e5a50a' if score >= 800 else '#ff7800'}">
+        lambda score: f"""<div style="display: flex; align-items: center; justify-content: flex-start;">
+            <span style="font-weight: bold; min-width: 40px; text-align: right; color: {'#1a5fb4' if score >= 1000 else '#2ec27e' if score >= 900 else '#e5a50a' if score >= 800 else '#ff7800'}">
                 {score}
             </span>
-            <div style="margin-left: 10px; height: 12px; width: 60px; background-color: #eaeaea; border-radius: 6px; overflow: hidden;">
-                <div style="height: 100%; width: {min(100, max(5, (score-700)/7))}%; background-color: {'#1a5fb4' if score >= 1000 else '#2ec27e' if score >= 900 else '#e5a50a' if score >= 800 else '#ff7800'};"></div>
+            <div style="margin-left: 10px; height: 12px; width: 80px; background-color: #eaeaea; border-radius: 6px; overflow: hidden;">
+                <div style="height: 100%; width: {min(100, max(5, (score - 700) / 7))}%; background-color: {'#1a5fb4' if score >= 1000 else '#2ec27e' if score >= 900 else '#e5a50a' if score >= 800 else '#ff7800'};"></div>
             </div>
         </div>"""
     )
 
     # Rename columns for display
-    df.rename(columns={score_column: 'Elo Score'}, inplace=True)
-    df.rename(columns={'organizer': 'Organizer', 'license': 'License'}, inplace=True)
+    df.rename(columns={'organizer': 'Organization', 'license': 'License'}, inplace=True) # Renamed for clarity
 
     # Select and reorder columns for final display
-    final_columns = ["Rank", "Model", "Organizer", "License", "Elo Display"]
-    df = df[final_columns]
+    # Use the determined category_value for the score column header
+    final_columns = ["Rank", "Model", "Organization", "License", "Elo Display"]
+    df_display = df[final_columns].copy()
+
+    # Rename the score column dynamically
+    df_display.rename(columns={"Elo Display": f"Elo Score ({category_value})"}, inplace=True)
+
+    return df_display
 
-    # Rename for display
-    df.columns = ["Rank", "Model", "Organization", "License", f"Elo Score ({category})"]
-    
-    return df
 
 # --- Mock/Placeholder functions/data for other tabs ---
-print("Warning: Evaluation queue data fetching is disabled/mocked due to leaderboard changes.")
+print("Warning: Evaluation queue data fetching is disabled/mocked.")
 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"])
@@ -198,10 +186,14 @@ EVAL_TYPES = ["str", "str", "str", "str"]
 
 # --- Keep restart function if relevant ---
 def restart_space():
-    print(f"Attempting to restart space: {REPO_ID}")
-    # Replace with your actual space restart mechanism if needed
+    """Placeholder for Hugging Face space restart logic."""
+    print(f"Attempting to trigger restart for space: {REPO_ID} (placeholder action)")
+    # In a real HF Space, you might use the hf_hub API client if it supports this,
+    # or trigger a webhook, or rely on built-in auto-restart features.
+    # This function likely cannot directly restart the space from within itself.
 
 # --- Enhanced CSS for beauty and readability ---
+# (Your enhanced_css string remains the same as provided in the prompt)
 enhanced_css = """
 /* Base styling */
 :root {
@@ -209,11 +201,11 @@ enhanced_css = """
     --secondary-color: #2ec27e;
     --accent-color: #e5a50a;
     --warning-color: #ff7800;
-    --text-color: #333333;
-    --background-color: #ffffff;
-    --card-background: #f9f9f9;
+    --text-color: #333333; /* Darker text for better contrast */
+    --background-color: #f4f6f8; /* Light grey background */
+    --card-background: #ffffff; /* White background for cards/tables */
     --border-color: #e0e0e0;
-    --shadow-color: rgba(0, 0, 0, 0.1);
+    --shadow-color: rgba(0, 0, 0, 0.08);
 }
 
 /* Typography */
@@ -222,7 +214,7 @@ body, .gradio-container {
     font-size: 16px !important;
     line-height: 1.6 !important;
     color: var(--text-color) !important;
-    background-color: var(--background-color) !important;
+    background-color: var(--background-color) !important; /* Ensure body background is set */
 }
 
 /* Headings */
@@ -259,6 +251,7 @@ h3 {
     border-radius: 12px !important;
     overflow: hidden !important;
     box-shadow: 0 4px 12px var(--shadow-color) !important;
+    background-color: var(--card-background); /* White background for tabs container */
 }
 
 .tab-nav button {
@@ -267,60 +260,88 @@ h3 {
     padding: 0.8rem 1.5rem !important;
     border-radius: 0 !important;
     transition: all 0.2s ease !important;
+    border-bottom: 2px solid transparent !important;
+    background-color: transparent !important; /* Ensure buttons are transparent */
+    color: var(--text-color) !important;
 }
 
 .tab-nav button.selected {
-    background-color: var(--primary-color) !important;
-    color: white !important;
+    background-color: transparent !important; /* Keep transparent */
+    color: var(--primary-color) !important;
     font-weight: 600 !important;
+    border-bottom: 2px solid var(--primary-color) !important;
 }
 
 /* Card styling */
-.gradio-container .gr-box, .gradio-container .gr-panel {
+.gradio-container .gr-block { /* Target blocks for card styling */
     border-radius: 12px !important;
     border: 1px solid var(--border-color) !important;
     box-shadow: 0 4px 12px var(--shadow-color) !important;
     overflow: hidden !important;
+    background-color: var(--card-background) !important; /* White background */
+    padding: 1.5rem !important; /* Add padding to cards */
+    margin-bottom: 1.5rem !important; /* Add space between cards */
 }
+/* Ensure panels also get card styling */
+.gradio-container .gr-panel {
+     border-radius: 12px !important;
+     border: 1px solid var(--border-color) !important;
+     box-shadow: 0 4px 12px var(--shadow-color) !important;
+     overflow: hidden !important;
+     background-color: var(--card-background) !important;
+     padding: 1.5rem !important;
+     margin-bottom: 1.5rem !important;
+}
+
 
 /* Table styling */
+.gr-dataframe { /* Target the dataframe component specifically */
+     border-radius: 8px !important;
+     overflow: hidden !important; /* Needed for border-radius on table */
+     box-shadow: 0 4px 12px var(--shadow-color) !important;
+     border: 1px solid var(--border-color) !important; /* Add border around table */
+     margin: 1.5rem 0 !important;
+}
+
 table {
     width: 100% !important;
-    border-collapse: separate !important;
+    border-collapse: separate !important; /* Needed for spacing and rounded corners */
     border-spacing: 0 !important;
-    margin: 1.5rem 0 !important;
-    border-radius: 8px !important;
-    overflow: hidden !important;
-    box-shadow: 0 4px 12px var(--shadow-color) !important;
+    background-color: var(--card-background); /* White background for table */
 }
 
 th {
-    background-color: #f0f5ff !important;
+    background-color: #f0f5ff !important; /* Lighter blue for header */
     color: var(--primary-color) !important;
     font-weight: 600 !important;
-    padding: 1rem !important;
-    font-size: 1.1rem !important;
+    padding: 1rem 1.2rem !important; /* Adjust padding */
+    font-size: 1.05rem !important; /* Slightly smaller header font */
     text-align: left !important;
     border-bottom: 2px solid var(--primary-color) !important;
+    position: sticky !important; /* Make header sticky */
+    top: 0 !important; /* Stick to the top */
+    z-index: 1 !important; /* Ensure header is above scrolling content */
 }
 
 td {
-    padding: 1rem !important;
+    padding: 0.9rem 1.2rem !important; /* Adjust padding */
     border-bottom: 1px solid var(--border-color) !important;
     font-size: 1rem !important;
     vertical-align: middle !important;
+    background-color: var(--card-background); /* Ensure cell background is white */
+    color: var(--text-color); /* Ensure text color is applied */
 }
 
-tr:nth-child(even) {
-    background-color: #f8fafd !important;
+tr:last-child td {
+    border-bottom: none !important;
 }
 
-tr:hover {
-    background-color: #edf2fb !important;
+tr:nth-child(even) td {
+    background-color: #f8fafd !important; /* Very light blue for alternating rows */
 }
 
-tr:first-child td {
-    border-top: none !important;
+tr:hover td {
+    background-color: #edf2fb !important; /* Slightly darker blue on hover */
 }
 
 /* Button styling */
@@ -348,9 +369,13 @@ button.primary:hover, .gr-button.primary:hover {
     flex-wrap: wrap !important;
     gap: 10px !important;
     margin: 1rem 0 !important;
+    background-color: transparent !important; /* Ensure container is transparent */
+    border: none !important; /* Remove default border */
+    box-shadow: none !important; /* Remove default shadow */
+    padding: 0 !important; /* Remove default padding */
 }
 
-.gr-radio label {
+.gr-radio > label { /* Target the label inside gr-radio */
     background-color: #f5f7fa !important;
     border: 1px solid var(--border-color) !important;
     border-radius: 8px !important;
@@ -362,8 +387,19 @@ button.primary:hover, .gr-button.primary:hover {
     display: flex !important;
     align-items: center !important;
     gap: 8px !important;
+    color: var(--text-color) !important;
+    box-shadow: none !important; /* Override potential inner shadows */
+}
+/* Remove inner block styling if gradio adds extra divs */
+.gr-radio > div {
+     background: none !important;
+     border: none !important;
+     padding: 0 !important;
+     margin: 0 !important;
+     box-shadow: none !important;
 }
 
+
 .gr-radio label:hover {
     background-color: #eaeef3 !important;
     border-color: #c0c9d6 !important;
@@ -377,15 +413,19 @@ button.primary:hover, .gr-button.primary:hover {
 }
 
 /* Input fields */
-input, textarea, select {
+input[type="text"], textarea, select { /* Be more specific */
     font-size: 1rem !important;
     padding: 0.8rem !important;
     border-radius: 8px !important;
     border: 1px solid var(--border-color) !important;
     transition: all 0.2s ease !important;
+    background-color: #ffffff !important;
+    color: var(--text-color) !important;
+    width: 100%; /* Make inputs take full width */
+    box-sizing: border-box; /* Include padding in width */
 }
 
-input:focus, textarea:focus, select:focus {
+input[type="text"]:focus, textarea:focus, select:focus {
     border-color: var(--primary-color) !important;
     box-shadow: 0 0 0 2px rgba(26, 95, 180, 0.2) !important;
     outline: none !important;
@@ -397,25 +437,48 @@ input:focus, textarea:focus, select:focus {
     overflow: hidden !important;
     margin: 1rem 0 !important;
     border: 1px solid var(--border-color) !important;
+    background-color: var(--card-background) !important; /* White background */
+    box-shadow: 0 2px 6px var(--shadow-color) !important; /* Lighter shadow for accordion */
 }
 
-.gr-accordion-header {
-    padding: 1rem !important;
+.gr-accordion > .gr-block { /* Target inner block of accordion */
+     border: none !important;
+     box-shadow: none !important;
+     padding: 0 !important; /* Remove padding from inner block */
+     margin: 0 !important;
+}
+
+
+.gr-accordion-header { /* Check Gradio structure for header class */
+    padding: 1rem 1.2rem !important; /* Adjust padding */
     background-color: #f5f7fa !important;
     font-weight: 600 !important;
     font-size: 1.1rem !important;
     color: var(--text-color) !important;
+    border-bottom: 1px solid var(--border-color) !important;
+    cursor: pointer; /* Indicate clickable */
+}
+/* Style for open accordion header */
+.gr-accordion[open] > .gr-accordion-header { /* Might need adjustment based on Gradio version */
+     border-bottom: 1px solid var(--border-color) !important;
 }
 
-.gr-accordion-content {
-    padding: 1rem !important;
-    background-color: white !important;
+/* Style for accordion content (might be nested) */
+.gr-accordion .gr-panel, .gr-accordion .gr-box { /* Check which element holds content */
+    padding: 1.2rem !important; /* Add padding to content */
+    background-color: var(--card-background) !important; /* White background */
+    border: none !important; /* Remove borders inside accordion */
+    box-shadow: none !important;
+    border-radius: 0 0 8px 8px !important; /* Round bottom corners */
 }
 
+
 /* Markdown text improvements */
-.markdown-text {
+.markdown-text { /* Might need a more specific selector like .gr-markdown */
     font-size: 1.05rem !important;
     line-height: 1.7 !important;
+    color: var(--text-color) !important;
+    background-color: transparent !important; /* Ensure markdown bg is transparent */
 }
 
 .markdown-text p {
@@ -431,12 +494,26 @@ input:focus, textarea:focus, select:focus {
     margin-bottom: 0.5rem !important;
 }
 
-.markdown-text strong {
+.markdown-text strong, .markdown-text b {
     font-weight: 600 !important;
-    color: #333 !important;
+    color: #111 !important; /* Slightly darker for emphasis */
+}
+.markdown-text code { /* Style inline code */
+    background-color: #eef0f2;
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+    font-size: 0.9em;
+    color: #3a4a5b;
+}
+.markdown-text a { /* Style links */
+    color: var(--primary-color);
+    text-decoration: none;
+}
+.markdown-text a:hover {
+    text-decoration: underline;
 }
 
-/* Status indicators */
+/* Status indicators (if used in submission tab) */
 .status-badge {
     display: inline-block;
     padding: 0.3rem 0.7rem;
@@ -445,127 +522,140 @@ input:focus, textarea:focus, select:focus {
     font-weight: 500;
     text-align: center;
 }
-
-.status-pending {
-    background-color: #fff8e0;
-    color: #b58a00;
-    border: 1px solid #ffd74d;
-}
-
-.status-running {
-    background-color: #e0f2ff;
-    color: #0066cc;
-    border: 1px solid #66b3ff;
-}
-
-.status-completed {
-    background-color: #e6f7ef;
-    color: #00875a;
-    border: 1px solid #57d9a3;
-}
+/* Add specific styles for statuses if needed */
 
 /* Footer */
 .footer {
     margin-top: 2rem;
-    padding: 1rem;
+    padding: 1.5rem 1rem;
     text-align: center;
     font-size: 0.9rem;
-    color: #666;
+    color: #555;
     border-top: 1px solid var(--border-color);
+    background-color: #e9edf1; /* Light background for footer */
 }
 
-/* Enhanced leaderboard title */
+/* Enhanced leaderboard title area */
 .leaderboard-header {
     display: flex;
-    align-items: center;
+    flex-direction: column; /* Stack elements vertically on small screens */
+    align-items: center; /* Center items */
     justify-content: space-between;
     margin-bottom: 1.5rem;
-    padding-bottom: 1rem;
-    border-bottom: 2px solid var(--border-color);
+    padding: 1.5rem;
+    background-color: var(--card-background); /* White background */
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
+    box-shadow: 0 4px 12px var(--shadow-color);
+    text-align: center; /* Center text */
+}
+@media (min-width: 768px) { /* Apply side-by-side layout on larger screens */
+    .leaderboard-header {
+        flex-direction: row;
+        text-align: left;
+    }
 }
 
+
 .leaderboard-title {
-    font-size: 2.2rem;
+    font-size: 2.0rem; /* Adjusted size */
     font-weight: 700;
     color: var(--primary-color);
-    margin: 0;
+    margin: 0 0 0.5rem 0; /* Add bottom margin */
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.7rem; /* Increase gap */
+    justify-content: center; /* Center on small screens */
+}
+@media (min-width: 768px) {
+    .leaderboard-title {
+        justify-content: flex-start; /* Align left on large screens */
+         font-size: 2.2rem; /* Restore size */
+    }
 }
 
 .leaderboard-subtitle {
     font-size: 1.1rem;
     color: #666;
-    margin-top: 0.5rem;
+    margin: 0 0 1rem 0; /* Add bottom margin */
+}
+@media (min-width: 768px) {
+     .leaderboard-subtitle { margin-bottom: 0; } /* Remove bottom margin on large screens */
 }
 
 .timestamp {
     font-size: 0.85rem;
     color: #666;
     font-style: italic;
+    background-color: #f5f7fa;
+    padding: 5px 10px;
+    border-radius: 6px;
+    margin-top: 0.5rem; /* Add space above timestamp */
 }
-
-/* Category selector buttons */
-.category-buttons {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin-bottom: 1.5rem;
+@media (min-width: 768px) {
+    .timestamp { margin-top: 0; } /* Remove top margin on large screens */
 }
 
-.category-button {
-    padding: 0.7rem 1.2rem;
-    background-color: #f0f5ff;
-    border: 1px solid #d0e0ff;
-    border-radius: 8px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
 
-.category-button:hover {
-    background-color: #e0ebff;
-    border-color: #b0d0ff;
-}
-
-.category-button.active {
-    background-color: var(--primary-color);
-    color: white;
-    border-color: var(--primary-color);
-}
+/* Category selector buttons (Already styled via .gr-radio) */
 
 /* Logo and brand styling */
 .logo {
-    font-size: 2.5em;
+    font-size: 2.5em; /* Keep logo size */
     margin-right: 0.5rem;
 }
 
-/* Medal styling for top ranks */
-.rank-1 {
-    color: #ffd700;
-    font-weight: bold;
+/* Style for About section cards */
+.about-card {
+    background-color: #f5f7fa; /* Lighter background for these cards */
+    padding: 20px;
+    border-radius: 12px;
+    height: 100%; /* Make cards in a row equal height */
+    border: 1px solid var(--border-color);
+    display: flex; /* Use flexbox for alignment */
+    flex-direction: column; /* Stack content vertically */
+    text-align: center; /* Center text */
+    box-shadow: 0 2px 6px var(--shadow-color); /* Add subtle shadow */
 }
-
-.rank-2 {
-    color: #c0c0c0;
-    font-weight: bold;
+.about-card h3 {
+    text-align: center;
+    margin-top: 0;
+    margin-bottom: 10px; /* Space below heading */
+    color: var(--primary-color);
 }
-
-.rank-3 {
-    color: #cd7f32;
-    font-weight: bold;
+.about-card p {
+    color: var(--text-color);
+    font-size: 0.95rem;
+    line-height: 1.6;
+    flex-grow: 1; /* Allow paragraph to take up space */
+}
+.about-card-icon {
+    font-size: 2.5em;
+    text-align: center;
+    margin-bottom: 15px;
+    display: block;
+    color: var(--secondary-color); /* Use secondary color for icons */
+}
+/* Ensure citation textbox has good contrast */
+#citation-button textarea {
+    background-color: #f5f7fa !important;
+    color: var(--text-color) !important;
+    border: 1px solid var(--border-color) !important;
+    font-family: monospace !important; /* Use monospace for citation */
+    font-size: 0.95rem !important;
 }
 """
 
-# Combine with any existing CSS
-custom_css = enhanced_css + custom_css
+# Combine with any existing CSS (if custom_css was loaded from src)
+# If custom_css from src exists, append enhanced_css. Otherwise, just use enhanced_css.
+if custom_css:
+    custom_css += "\n" + enhanced_css
+else:
+    custom_css = enhanced_css
 
 # --- Gradio App Definition ---
-demo = gr.Blocks(css=custom_css, theme=gr.themes.Soft())
+# REMOVED theme=gr.themes.Soft() to allow custom CSS to dominate
+demo = gr.Blocks(css=custom_css)
 
 with demo:
     # Enhanced header with timestamp
@@ -585,250 +675,175 @@ with demo:
     </div>
     """)
 
-    # Introduction with enhanced styling
-    gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
+    # Introduction moved outside Tabs for permanent visibility
+    with gr.Blocks(elem_classes="gr-block"): # Wrap intro in a styled block
+        gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
 
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
         with gr.TabItem("📊 Leaderboard", elem_id="llm-benchmark-tab-table", id=0):
             with gr.Column():
+                with gr.Blocks(elem_classes="gr-block"): # Wrap leaderboard controls/table
+                    gr.HTML("""
+                    <h2 style="display: flex; align-items: center; gap: 10px; margin-bottom: 0.5rem;">
+                        <span style="font-size: 1.3em;">📈</span> Model Performance Rankings
+                    </h2>
+                    <p class="leaderboard-subtitle" style="margin-top: 0;">Select a category to view specialized performance metrics</p>
+                    """)
+
+                    # Enhanced category selector
+                    category_selector = gr.Radio(
+                        # Use labels from CATEGORIES
+                        choices=[label for label, value in CATEGORIES],
+                        label="Select Performance Domain:",
+                        value=DEFAULT_CATEGORY_LABEL, # Default to the label
+                        interactive=True,
+                        elem_classes="gr-radio" # Apply custom radio styling
+                    )
+
+                    # Visual separator (Optional)
+                    # gr.HTML('<div style="height: 1px; background-color: #e0e0e0; margin: 20px 0;"></div>')
+
+                    # Enhanced leaderboard table with scrolling
+                    leaderboard_df_component = gr.Dataframe(
+                        # Initialize with default category value
+                        value=update_leaderboard(DEFAULT_CATEGORY_LABEL),
+                        # Headers will be set dynamically by the update function's output DataFrame
+                        # Set datatypes for correct rendering (Rank is now number)
+                        datatype=["number", "html", "str", "str", "html"],
+                        interactive=False, # IMPORTANT: Keep False to disable UI sorting/editing
+                        # Set explicit height for scrolling
+                        height=600,
+                        # row_count=(10, "dynamic"), # Alternative: show 10 rows, scroll others
+                        col_count=(5, "fixed"), # We have 5 columns
+                        wrap=True, # Allow text wrapping in cells
+                        elem_id="leaderboard-table", # ID for potential CSS targeting
+                    )
+
+                # Stats cards (visual enhancement) - Placed after leaderboard table
+                with gr.Blocks(elem_classes="gr-block"): # Wrap stats in a styled block
+                     gr.HTML("<h2>Benchmark Statistics</h2>") # Add title for stats section
+                     with gr.Row(equal_height=True):
+                        with gr.Column(scale=1):
+                            gr.HTML(f"""
+                            <div class="about-card" style="text-align: center;">
+                                <div class="about-card-icon">🔍</div>
+                                <div style="font-size: 2em; font-weight: bold; color: #1a5fb4;">{len(master_df)}</div>
+                                <div style="font-size: 1.1em; color: #666;">Models Evaluated</div>
+                            </div>
+                            """)
+                        with gr.Column(scale=1):
+                            gr.HTML(f"""
+                            <div class="about-card" style="text-align: center;">
+                                <div class="about-card-icon">🌐</div>
+                                <div style="font-size: 2em; font-weight: bold; color: #00875a;">{50}</div>
+                                <div style="font-size: 1.1em; color: #666;">Competitions (Example)</div>
+                            </div>
+                            """)
+                        with gr.Column(scale=1):
+                            gr.HTML(f"""
+                            <div class="about-card" style="text-align: center;">
+                                <div class="about-card-icon">🏅</div>
+                                <div style="font-size: 2em; font-weight: bold; color: #b58a00;">{len(CATEGORIES)-1}</div>
+                                <div style="font-size: 1.1em; color: #666;">Performance Domains</div>
+                            </div>
+                            """)
+
+                # 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):
+             # Wrap content in a styled block for consistent padding/background
+            with gr.Blocks(elem_classes="gr-block"):
+                # Enhanced about section header
                 gr.HTML("""
-                <h2 style="display: flex; align-items: center; gap: 10px;">
-                    <span style="font-size: 1.3em;">📈</span> Model Performance Rankings
-                </h2>
-                <p class="leaderboard-subtitle">Select a category to view specialized performance metrics</p>
+                <div class="about-header" style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
+                    <div style="font-size: 4em;">🧪</div>
+                    <div>
+                        <h2 style="margin: 0;">About the MLE-Dojo Benchmark</h2>
+                        <p style="margin: 5px 0 0 0; color: #666;">A comprehensive evaluation framework for AI models</p>
+                    </div>
+                </div>
                 """)
-                
-                # Enhanced category selector
-                category_selector = gr.Radio(
-                    choices=[x[0] for x in CATEGORIES],
-                    label="Select Performance Domain:",
-                    value="🏆 Overall",
-                    interactive=True,
-                    elem_classes="fancy-radio"
-                )
-                
-                # Visual separator
-                gr.HTML('<div style="height: 1px; background-color: #e0e0e0; margin: 20px 0;"></div>')
-                
-                # Enhanced leaderboard table
-                leaderboard_df_component = gr.Dataframe(
-                    value=update_leaderboard(DEFAULT_CATEGORY),
-                    headers=["Rank", "Model", "Organization", "License", f"Elo Score ({DEFAULT_CATEGORY})"],
-                    datatype=["html", "html", "str", "str", "html"],
-                    interactive=False,
-                    row_count=(len(master_df), "fixed"),
-                    col_count=(5, "fixed"),
-                    wrap=True,
-                    elem_id="leaderboard-table",
-                )
-                
-                # Stats cards (visual enhancement)
-                with gr.Row():
-                    with gr.Column(scale=1):
-                        gr.HTML(f"""
-                        <div style="background-color: #f0f5ff; padding: 20px; border-radius: 12px; text-align: center;">
-                            <div style="font-size: 2em;">🔍</div>
-                            <div style="font-size: 2em; font-weight: bold; color: #1a5fb4;">{len(master_df)}</div>
-                            <div style="font-size: 1.1em; color: #666;">Models Evaluated</div>
+
+                # Use the LLM_BENCHMARKS_TEXT variable
+                gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")
+
+                # Add methodology cards for visual enhancement
+                gr.HTML("<h2 style='margin-top: 2rem;'>Evaluation Domains</h2>") # Title for cards
+                with gr.Row(equal_height=True):
+                    with gr.Column():
+                        gr.HTML("""
+                        <div class="about-card">
+                            <div class="about-card-icon">💡</div>
+                            <h3>MLE-Lite</h3>
+                            <p>Evaluates basic ML engineering tasks: data preprocessing, feature engineering, model selection, and basic deployment concepts.</p>
+                        </div>
+                        """)
+                    with gr.Column():
+                        gr.HTML("""
+                        <div class="about-card">
+                            <div class="about-card-icon">📊</div>
+                            <h3>Tabular</h3>
+                            <p>Tests processing, analysis, and modeling of structured data, including statistical analysis, predictive modeling, and visualization.</p>
                         </div>
                         """)
-                    with gr.Column(scale=1):
-                        gr.HTML(f"""
-                        <div style="background-color: #e6f7ef; padding: 20px; border-radius: 12px; text-align: center;">
-                            <div style="font-size: 2em;">🌐</div>
-                            <div style="font-size: 2em; font-weight: bold; color: #00875a;">{master_df['organizer'].nunique()}</div>
-                            <div style="font-size: 1.1em; color: #666;">Organizations</div>
+
+                with gr.Row(equal_height=True):
+                    with gr.Column():
+                        gr.HTML("""
+                        <div class="about-card">
+                            <div class="about-card-icon">📝</div>
+                            <h3>NLP</h3>
+                            <p>Evaluates natural language processing: text classification, sentiment analysis, entity recognition, text generation, and understanding.</p>
                         </div>
                         """)
-                    with gr.Column(scale=1):
-                        gr.HTML(f"""
-                        <div style="background-color: #fff8e0; padding: 20px; border-radius: 12px; text-align: center;">
-                            <div style="font-size: 2em;">🏅</div>
-                            <div style="font-size: 2em; font-weight: bold; color: #b58a00;">{len(CATEGORIES)}</div>
-                            <div style="font-size: 1.1em; color: #666;">Performance Domains</div>
+                    with gr.Column():
+                        gr.HTML("""
+                        <div class="about-card">
+                            <div class="about-card-icon">👁️</div>
+                            <h3>CV</h3>
+                            <p>Tests computer vision capabilities: image classification, object detection, image generation, and visual understanding tasks.</p>
                         </div>
                         """)
-                
-                # 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):
-            # Enhanced about section
+        # Optional: Uncomment if you want to re-enable the Submit tab
+        # with gr.TabItem("🚀 Submit Model", elem_id="llm-benchmark-tab-submit", id=2):
+        #     with gr.Blocks(elem_classes="gr-block"): # Wrap in styled block
+        #         # ... (Your submission form code here) ...
+        #         gr.Markdown("Submit tab content goes here.") # Placeholder
+
+
+    # Enhanced citation section (outside tabs, inside main demo block)
+    with gr.Blocks(elem_classes="gr-block"): # Wrap in styled block
+        with gr.Accordion("📄 Citation", open=False): # Accordion itself doesn't need gr-block
             gr.HTML("""
-            <div class="about-header" style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
-                <div style="font-size: 4em;">🧪</div>
+            <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 15px;">
+                <div style="font-size: 2.5em;">📄</div>
                 <div>
-                    <h2 style="margin: 0;">About the MLE-Dojo Benchmark</h2>
-                    <p style="margin: 5px 0 0 0; color: #666;">A comprehensive evaluation framework for AI models</p>
+                    <h3 style="margin: 0;">How to Cite This Benchmark</h3>
+                    <p style="margin: 5px 0 0 0; color: #666;">Please use the following citation if you use this benchmark in your research.</p>
                 </div>
             </div>
             """)
-            
-            # Use the LLM_BENCHMARKS_TEXT variable
-            gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")
-            
-            # Add methodology cards for visual enhancement
-            with gr.Row():
-                with gr.Column():
-                    gr.HTML("""
-                    <div style="background-color: #f5f7fa; padding: 20px; border-radius: 12px; height: 100%;">
-                        <div style="font-size: 2em; text-align: center; margin-bottom: 15px;">💡</div>
-                        <h3 style="text-align: center; margin-top: 0;">MLE-Lite</h3>
-                        <p>Evaluates a model's ability to handle basic machine learning engineering tasks including 
-                        data preprocessing, feature engineering, model selection, and basic deployment.</p>
-                    </div>
-                    """)
-                with gr.Column():
-                    gr.HTML("""
-                    <div style="background-color: #f5f7fa; padding: 20px; border-radius: 12px; height: 100%;">
-                        <div style="font-size: 2em; text-align: center; margin-bottom: 15px;">📊</div>
-                        <h3 style="text-align: center; margin-top: 0;">Tabular</h3>
-                        <p>Tests a model's ability to process, analyze and model structured data, including 
-                        statistical analysis,statistical analysis, predictive modeling, and data visualization with tabular datasets.</p>
-                    </div>
-                    """)
-            
-            with gr.Row():
-                with gr.Column():
-                    gr.HTML("""
-                    <div style="background-color: #f5f7fa; padding: 20px; border-radius: 12px; height: 100%;">
-                        <div style="font-size: 2em; text-align: center; margin-bottom: 15px;">📝</div>
-                        <h3 style="text-align: center; margin-top: 0;">NLP</h3>
-                        <p>Evaluates natural language processing capabilities including text classification, 
-                        sentiment analysis, entity recognition, text generation, and language understanding.</p>
-                    </div>
-                    """)
-                with gr.Column():
-                    gr.HTML("""
-                    <div style="background-color: #f5f7fa; padding: 20px; border-radius: 12px; height: 100%;">
-                        <div style="font-size: 2em; text-align: center; margin-bottom: 15px;">👁️</div>
-                        <h3 style="text-align: center; margin-top: 0;">CV</h3>
-                        <p>Tests computer vision capabilities including image classification, object detection, 
-                        image generation, and visual understanding tasks across various domains.</p>
-                    </div>
-                    """)
 
-        # Optional: Uncomment if you want to re-enable the Submit tab
-        # with gr.TabItem("🚀 Submit Model", elem_id="llm-benchmark-tab-submit", id=2):
-        #     with gr.Column():
-        #         gr.HTML("""
-        #         <div class="about-header" style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
-        #             <div style="font-size: 4em;">🚀</div>
-        #             <div>
-        #                 <h2 style="margin: 0;">Submit Your Model for Evaluation</h2>
-        #                 <p style="margin: 5px 0 0 0; color: #666;">Add your model to the MLE-Dojo leaderboard</p>
-        #             </div>
-        #         </div>
-        #         """)
-        #
-        #         with gr.Row():
-        #             gr.Markdown(EVALUATION_QUEUE_TEXT, elem_classes="markdown-text")
-        #         
-        #         with gr.Column():
-        #             with gr.Accordion(f"✅ Finished Evaluations ({len(finished_eval_queue_df)})", open=False):
-        #                  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=False):
-        #                  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=False):
-        #                 pending_eval_table = gr.components.Dataframe(
-        #                     value=pending_eval_queue_df, headers=EVAL_COLS, datatype=EVAL_TYPES, row_count=5,
-        #                 )
-        #         
-        #         gr.HTML('<div style="height: 1px; background-color: #e0e0e0; margin: 20px 0;"></div>')
-        #         
-        #         gr.HTML("""
-        #         <h2 style="display: flex; align-items: center; gap: 10px;">
-        #             <span style="font-size: 1.3em;">📝</span> Model Submission Form
-        #         </h2>
-        #         """)
-        #         
-        #         with gr.Row():
-        #             with gr.Column():
-        #                 model_name_textbox = gr.Textbox(
-        #                     label="Model Name (on Hugging Face Hub)",
-        #                     placeholder="Enter your model name...",
-        #                     elem_classes="enhanced-input"
-        #                 )
-        #                 revision_name_textbox = gr.Textbox(
-        #                     label="Revision / Commit Hash",
-        #                     placeholder="main",
-        #                     elem_classes="enhanced-input"
-        #                 )
-        #                 model_type = gr.Dropdown(
-        #                     choices=["Type A", "Type B", "Type C"],
-        #                     label="Model Type",
-        #                     multiselect=False,
-        #                     value=None,
-        #                     interactive=True,
-        #                     elem_classes="enhanced-dropdown"
-        #                 )
-        #             with gr.Column():
-        #                 precision = gr.Dropdown(
-        #                     choices=["float16", "bfloat16", "float32", "int8", "auto"],
-        #                     label="Precision",
-        #                     multiselect=False,
-        #                     value="auto",
-        #                     interactive=True,
-        #                     elem_classes="enhanced-dropdown"
-        #                 )
-        #                 weight_type = gr.Dropdown(
-        #                     choices=["Original", "Adapter", "Delta"],
-        #                     label="Weights Type",
-        #                     multiselect=False,
-        #                     value="Original",
-        #                     interactive=True,
-        #                     elem_classes="enhanced-dropdown"
-        #                 )
-        #                 base_model_name_textbox = gr.Textbox(
-        #                     label="Base Model (for delta or adapter weights)",
-        #                     placeholder="Only needed for adapter/delta weights",
-        #                     elem_classes="enhanced-input"
-        #                 )
-        #         
-        #         submit_button = gr.Button(
-        #             "Submit for Evaluation",
-        #             elem_classes="primary-button"
-        #         )
-        #         submission_result = gr.Markdown()
-        #         submit_button.click(
-        #             add_new_eval,
-        #             [model_name_textbox, base_model_name_textbox, revision_name_textbox, precision, weight_type, model_type],
-        #             submission_result,
-        #         )
-
-    # Enhanced citation section
-    with gr.Accordion("📄 Citation", open=False, elem_classes="citation-accordion"):
-        gr.HTML("""
-        <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 15px;">
-            <div style="font-size: 2.5em;">📄</div>
-            <div>
-                <h3 style="margin: 0;">How to Cite This Benchmark</h3>
-                <p style="margin: 5px 0 0 0; color: #666;">Please use the following citation if you use this benchmark in your research</p>
-            </div>
-        </div>
-        """)
-        
-        citation_button = gr.Textbox(
-            value=CITATION_BUTTON_TEXT,
-            label=CITATION_BUTTON_LABEL,
-            lines=10,
-            elem_id="citation-button",
-            show_copy_button=True,
-        )
-    
-    # Footer
+            citation_button = gr.Textbox(
+                value=CITATION_BUTTON_TEXT,
+                label=CITATION_BUTTON_LABEL,
+                lines=5, # Adjust lines as needed
+                elem_id="citation-button", # Use this ID for CSS
+                show_copy_button=True,
+                interactive=False # Textbox is not meant for user input here
+            )
+
+    # Footer (outside tabs, inside main demo block)
     gr.HTML("""
     <div class="footer">
         <p>© 2025 MLE-Dojo Benchmark. All rights reserved.</p>
-        <p style="margin-top: 5px; display: flex; justify-content: center; gap: 20px;">
+        <p style="margin-top: 5px; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px;">
             <a href="#" style="color: #1a5fb4; text-decoration: none;">Privacy Policy</a>
             <a href="#" style="color: #1a5fb4; text-decoration: none;">Terms of Service</a>
             <a href="#" style="color: #1a5fb4; text-decoration: none;">Contact Us</a>
@@ -837,12 +852,16 @@ with demo:
     """)
 
 # --- Keep scheduler if relevant ---
+# Note: Scheduler might not work reliably in all Gradio deployment environments (like Spaces free tier)
 if __name__ == "__main__":
     try:
         scheduler = BackgroundScheduler()
         if callable(restart_space):
+             # Ensure REPO_ID is set correctly for your HF Space
              if REPO_ID and REPO_ID != "your/space-id":
-                 scheduler.add_job(restart_space, "interval", seconds=1800)  # Restart every 30 mins
+                 print(f"Scheduling space restart job for {REPO_ID} every 30 minutes.")
+                 # Restart interval might need adjustment based on environment limits
+                 scheduler.add_job(restart_space, "interval", seconds=1800)
                  scheduler.start()
              else:
                  print("Warning: REPO_ID not set or is placeholder; space restart job not scheduled.")
@@ -854,4 +873,6 @@ if __name__ == "__main__":
 # --- Launch the app ---
 if __name__ == "__main__":
     print("Launching Enhanced Gradio App...")
-    demo.launch()
+    # share=True is needed for public access if running locally and want others to see it
+    # demo.launch(share=True)
+    demo.launch() # Launches locally by default