Update app.py

app.py

@@ -14,7 +14,7 @@ try:
         LLM_BENCHMARKS_TEXT,
         TITLE,
     )
-    from src.display.css_html_js import custom_css # Assuming this might exist
+    from src.display.css_html_js import custom_css
     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...\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
+    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
-
+    # 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 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).
+    
+    ## 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
     """
     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 (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).
+    
+    - **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]
     """
-    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
+    TITLE = "<h1>🏆 MLE-Dojo Benchmark Leaderboard</h1>"
+    custom_css = ""
+    REPO_ID = "your/space-id"
+    def add_new_eval(*args): return "Submission placeholder."
 
 # --- 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': '📱',  # Replace with actual icon URLs or keep emojis
+    'OpenAI': '📱',  # You can replace these with actual icon URLs in production
     'DeepSeek': '🔍',
     'Google': '🌐',
     'Default': '🤖'
@@ -81,50 +81,51 @@ org_logos = {
 master_df = pd.DataFrame(data)
 
 # Add last updated timestamp
-last_updated = datetime.now().strftime("%B %d, %Y at %H:%M:%S %Z") # Added Timezone
+last_updated = datetime.now().strftime("%B %d, %Y at %H:%M:%S")
 
 # 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_LABEL = "🏆 Overall" # Use the label for default value
-DEFAULT_CATEGORY_VALUE = "Overall" # The actual value
+DEFAULT_CATEGORY = "Overall"
 
-# Map user-facing category *values* to DataFrame column names
+# Map user-facing categories 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 and numerical rank.
+    Enhanced function to update the leaderboard with visual improvements
     """
-    # 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)
+    # 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)
     if score_column is None or score_column not in master_df.columns:
-        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
+        print(f"Warning: Invalid category '{category}' or column '{score_column}'. Falling back to default.")
+        score_column = category_to_column[DEFAULT_CATEGORY]
         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": [], "Organization": [], "License": [], f"Elo Score ({category_value})": []
+                "Rank": [],
+                "Model": [],
+                "Organizer": [],
+                "License": [],
+                "Elo Score": []
             })
 
     # Select base columns + the score column for sorting
@@ -134,15 +135,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 (numerical)
+    # Add Rank with just numbers (no medals)
     df.reset_index(drop=True, inplace=True)
-    df.insert(0, 'Rank', df.index + 1) # Insert numerical rank starting from 1
-
-    # Add organization icons to model names with clickable links
+    df.insert(0, 'Rank', df.index.map(lambda idx: f"{idx + 1}"))
+    
+    # Add organization icons to model names
     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>
@@ -150,34 +151,33 @@ def update_leaderboard(category_label):
         axis=1
     )
 
-    # Format Elo scores with visual indicators (bar + color)
+    # Format Elo scores with visual indicators
     df['Elo Display'] = df[score_column].apply(
-        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'}">
+        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'}">
                 {score}
             </span>
-            <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 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>
         </div>"""
     )
 
     # Rename columns for display
-    df.rename(columns={'organizer': 'Organization', 'license': 'License'}, inplace=True) # Renamed for clarity
+    df.rename(columns={score_column: 'Elo Score'}, inplace=True)
+    df.rename(columns={'organizer': 'Organizer', 'license': 'License'}, inplace=True)
 
     # Select and reorder columns for final display
-    # 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
+    final_columns = ["Rank", "Model", "Organizer", "License", "Elo Display"]
+    df = df[final_columns]
 
+    # 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.")
+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"])
@@ -186,14 +186,11 @@ EVAL_TYPES = ["str", "str", "str", "str"]
 
 # --- Keep restart function if relevant ---
 def restart_space():
-    """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.
+    print(f"Attempting to restart space: {REPO_ID}")
+    # Replace with your actual space restart mechanism if needed
 
 # --- Enhanced CSS for beauty and readability ---
-# (Your enhanced_css string remains the same as provided in the prompt)
+# FIXED CSS with better contrast, improved scrolling for tables, and other fixes
 enhanced_css = """
 /* Base styling */
 :root {
@@ -201,11 +198,11 @@ enhanced_css = """
     --secondary-color: #2ec27e;
     --accent-color: #e5a50a;
     --warning-color: #ff7800;
-    --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.08);
+    --text-color: #333333;
+    --background-color: #e9edf1;  /* Lightened background */
+    --card-background: #ffffff;
+    --border-color: #c0c9d6;  /* Darkened border */
+    --shadow-color: rgba(0, 0, 0, 0.12);  /* Increased shadow opacity */
 }
 
 /* Typography */
@@ -214,7 +211,7 @@ body, .gradio-container {
     font-size: 16px !important;
     line-height: 1.6 !important;
     color: var(--text-color) !important;
-    background-color: var(--background-color) !important; /* Ensure body background is set */
+    background-color: var(--background-color) !important;
 }
 
 /* Headings */
@@ -251,7 +248,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 */
+    background-color: var(--card-background);
 }
 
 .tab-nav button {
@@ -261,75 +258,64 @@ h3 {
     border-radius: 0 !important;
     transition: all 0.2s ease !important;
     border-bottom: 2px solid transparent !important;
-    background-color: transparent !important; /* Ensure buttons are transparent */
+    background-color: transparent !important;
     color: var(--text-color) !important;
 }
 
 .tab-nav button.selected {
-    background-color: transparent !important; /* Keep transparent */
+    background-color: transparent !important;
     color: var(--primary-color) !important;
     font-weight: 600 !important;
     border-bottom: 2px solid var(--primary-color) !important;
 }
 
 /* Card styling */
-.gradio-container .gr-block { /* Target blocks for card styling */
+.gradio-container .gr-box, .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; /* 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;
+    background-color: var(--card-background) !important;
 }
 
+/* Table styling - FIXING SCROLLING ISSUES */
 table {
     width: 100% !important;
-    border-collapse: separate !important; /* Needed for spacing and rounded corners */
+    border-collapse: separate !important;
     border-spacing: 0 !important;
-    background-color: var(--card-background); /* White background for table */
+    margin: 1.5rem 0 !important;
+    border-radius: 8px !important;
+    overflow: visible !important; /* Changed from hidden to visible */
+    box-shadow: 0 4px 12px var(--shadow-color) !important;
+    background-color: var(--card-background);
+}
+
+/* Data table container - ensure scrolling works */
+.gr-table-container {
+    overflow: auto !important;
+    max-height: 600px !important; /* Add max height to ensure scrolling */
+    margin-bottom: 20px !important;
 }
 
 th {
-    background-color: #f0f5ff !important; /* Lighter blue for header */
+    background-color: #e0ebff !important; /* Darker header background */
     color: var(--primary-color) !important;
     font-weight: 600 !important;
-    padding: 1rem 1.2rem !important; /* Adjust padding */
-    font-size: 1.05rem !important; /* Slightly smaller header font */
+    padding: 1rem !important;
+    font-size: 1.1rem !important;
     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 */
+    position: sticky !important; /* Keep headers visible when scrolling */
+    top: 0 !important;
+    z-index: 10 !important;
 }
 
 td {
-    padding: 0.9rem 1.2rem !important; /* Adjust padding */
+    padding: 1rem !important;
     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 */
+    background-color: var(--card-background);
 }
 
 tr:last-child td {
@@ -337,11 +323,11 @@ tr:last-child td {
 }
 
 tr:nth-child(even) td {
-    background-color: #f8fafd !important; /* Very light blue for alternating rows */
+    background-color: #f0f5ff !important; /* Increased contrast for even rows */
 }
 
 tr:hover td {
-    background-color: #edf2fb !important; /* Slightly darker blue on hover */
+    background-color: #e0ebff !important; /* Darker hover color */
 }
 
 /* Button styling */
@@ -369,14 +355,10 @@ 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 { /* Target the label inside gr-radio */
-    background-color: #f5f7fa !important;
+.gr-radio label {
+    background-color: #f0f5ff !important; /* Darker radio button background */
     border: 1px solid var(--border-color) !important;
     border-radius: 8px !important;
     padding: 0.7rem 1.2rem !important;
@@ -388,32 +370,22 @@ button.primary:hover, .gr-button.primary:hover {
     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;
+    background-color: #e0e9f7 !important;
+    border-color: #a0b0c0 !important; /* Darker border on hover */
 }
 
 .gr-radio label.selected {
-    background-color: #e0e9f7 !important;
+    background-color: #d0dfff !important; /* Darker selected background */
     border-color: var(--primary-color) !important;
     color: var(--primary-color) !important;
     font-weight: 600 !important;
 }
 
 /* Input fields */
-input[type="text"], textarea, select { /* Be more specific */
+input, textarea, select {
     font-size: 1rem !important;
     padding: 0.8rem !important;
     border-radius: 8px !important;
@@ -421,11 +393,9 @@ input[type="text"], textarea, select { /* Be more specific */
     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[type="text"]:focus, textarea:focus, select:focus {
+input: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;
@@ -437,48 +407,28 @@ input[type="text"]: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 */
+    background-color: var(--card-background);
 }
 
-.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;
+.gr-accordion-header {
+    padding: 1rem !important;
+    background-color: #f0f5ff !important; /* Darker accordion header */
     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;
 }
 
-/* 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 */
+.gr-accordion-content {
+    padding: 1rem !important;
+    background-color: var(--card-background) !important;
 }
 
-
 /* Markdown text improvements */
-.markdown-text { /* Might need a more specific selector like .gr-markdown */
+.markdown-text {
     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 {
@@ -494,26 +444,12 @@ input[type="text"]:focus, textarea:focus, select:focus {
     margin-bottom: 0.5rem !important;
 }
 
-.markdown-text strong, .markdown-text b {
+.markdown-text strong {
     font-weight: 600 !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;
+    color: #111 !important;
 }
 
-/* Status indicators (if used in submission tab) */
+/* Status indicators */
 .status-badge {
     display: inline-block;
     padding: 0.3rem 0.7rem;
@@ -522,7 +458,24 @@ input[type="text"]:focus, textarea:focus, select:focus {
     font-weight: 500;
     text-align: center;
 }
-/* Add specific styles for statuses if needed */
+
+.status-pending {
+    background-color: #fff3cc;
+    color: #b58a00;
+    border: 1px solid #ffd74d;
+}
+
+.status-running {
+    background-color: #ccebff;
+    color: #0066cc;
+    border: 1px solid #66b3ff;
+}
+
+.status-completed {
+    background-color: #d6f5e6;
+    color: #00875a;
+    border: 1px solid #57d9a3;
+}
 
 /* Footer */
 .footer {
@@ -530,132 +483,146 @@ input[type="text"]:focus, textarea:focus, select:focus {
     padding: 1.5rem 1rem;
     text-align: center;
     font-size: 0.9rem;
-    color: #555;
+    color: #333;
     border-top: 1px solid var(--border-color);
-    background-color: #e9edf1; /* Light background for footer */
+    background-color: #d9e0e8; /* Darker footer background */
 }
 
 /* Enhanced leaderboard title area */
 .leaderboard-header {
     display: flex;
-    flex-direction: column; /* Stack elements vertically on small screens */
-    align-items: center; /* Center items */
+    align-items: center;
     justify-content: space-between;
     margin-bottom: 1.5rem;
     padding: 1.5rem;
-    background-color: var(--card-background); /* White background */
+    background-color: var(--card-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.0rem; /* Adjusted size */
+    font-size: 2.2rem;
     font-weight: 700;
     color: var(--primary-color);
-    margin: 0 0 0.5rem 0; /* Add bottom margin */
+    margin: 0;
     display: flex;
     align-items: center;
-    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 */
-    }
+    gap: 0.5rem;
 }
 
 .leaderboard-subtitle {
     font-size: 1.1rem;
-    color: #666;
-    margin: 0 0 1rem 0; /* Add bottom margin */
-}
-@media (min-width: 768px) {
-     .leaderboard-subtitle { margin-bottom: 0; } /* Remove bottom margin on large screens */
+    color: #444; /* Darker subtitle text */
+    margin-top: 0.5rem;
 }
 
 .timestamp {
     font-size: 0.85rem;
-    color: #666;
+    color: #444; /* Darker timestamp text */
     font-style: italic;
-    background-color: #f5f7fa;
+    background-color: #f0f5ff; /* Darker timestamp background */
     padding: 5px 10px;
     border-radius: 6px;
-    margin-top: 0.5rem; /* Add space above timestamp */
 }
-@media (min-width: 768px) {
-    .timestamp { margin-top: 0; } /* Remove top margin on large screens */
+
+/* Category selector buttons */
+.category-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 1.5rem;
+}
+
+.category-button {
+    padding: 0.7rem 1.2rem;
+    background-color: #e0ebff; /* Darker button background */
+    border: 1px solid #b0d0ff;
+    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: #c0d0ff; /* Darker hover state */
+    border-color: #80a0ff;
+}
 
-/* Category selector buttons (Already styled via .gr-radio) */
+.category-button.active {
+    background-color: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+}
 
 /* Logo and brand styling */
 .logo {
-    font-size: 2.5em; /* Keep logo size */
+    font-size: 2.5em;
     margin-right: 0.5rem;
 }
 
+/* Properly display sorting arrows */
+table th.sort-asc::after {
+    content: " ↑";
+    color: var(--primary-color);
+}
+
+table th.sort-desc::after {
+    content: " ↓";
+    color: var(--primary-color);
+}
+
 /* Style for About section cards */
 .about-card {
-    background-color: #f5f7fa; /* Lighter background for these cards */
+    background-color: #f0f5ff; /* Darker card background */
     padding: 20px;
     border-radius: 12px;
-    height: 100%; /* Make cards in a row equal height */
+    height: 100%;
     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 */
 }
 .about-card h3 {
     text-align: center;
     margin-top: 0;
-    margin-bottom: 10px; /* Space below heading */
     color: var(--primary-color);
 }
 .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;
+
+/* Ensure the table container has a fixed height and scrolls properly */
+#leaderboard-table {
+    overflow: auto !important;
+    max-height: 500px !important;
+}
+
+/* Fix for dataframe component scrolling */
+.gradio-dataframe {
+    overflow: auto !important;
+    max-height: 500px !important;
+}
+
+/* Fix sorting issues */
+.sort-column {
+    cursor: pointer;
 }
 """
 
-# 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
+# Combine with any existing CSS
+custom_css = enhanced_css
 
 # --- Gradio App Definition ---
-# REMOVED theme=gr.themes.Soft() to allow custom CSS to dominate
-demo = gr.Blocks(css=custom_css)
+demo = gr.Blocks(css=custom_css, theme=gr.themes.Soft())
 
 with demo:
     # Enhanced header with timestamp
@@ -675,173 +642,250 @@ with demo:
     </div>
     """)
 
-    # 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")
+    # Introduction with enhanced styling
+    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
-                        # 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("""
-                <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>
+                <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>
                 """)
-
-                # 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>
+                
+                # 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>
                         </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>
+                    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>
                         </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>
+                    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>
                         </div>
                         """)
+                
+                # Link the radio button change to the update function
+                category_selector.change(
+                    fn=update_leaderboard,
+                    inputs=category_selector,
+                    outputs=leaderboard_df_component
+                )
 
-        # 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
+        with gr.TabItem("📚 About", elem_id="llm-benchmark-tab-about", id=1):
+            # Enhanced about section
             gr.HTML("""
-            <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 15px;">
-                <div style="font-size: 2.5em;">📄</div>
+            <div class="about-header" style="display: flex; align-items: center; gap: 20px; margin-bottom: 20px;">
+                <div style="font-size: 4em;">🧪</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>
+                    <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>
             """)
+            
+            # 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>
+                    """)
 
-            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)
+        # 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
     gr.HTML("""
     <div class="footer">
         <p>© 2025 MLE-Dojo Benchmark. All rights reserved.</p>
-        <p style="margin-top: 5px; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px;">
+        <p style="margin-top: 5px; display: flex; justify-content: center; 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>
@@ -850,16 +894,12 @@ 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":
-                 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.add_job(restart_space, "interval", seconds=1800)  # Restart every 30 mins
                  scheduler.start()
              else:
                  print("Warning: REPO_ID not set or is placeholder; space restart job not scheduled.")
@@ -871,6 +911,4 @@ if __name__ == "__main__":
 # --- Launch the app ---
 if __name__ == "__main__":
     print("Launching Enhanced Gradio App...")
-    # 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
+    demo.launch()