Update app.py

app.py

@@ -63,33 +63,31 @@ def update_leaderboard(category):
     df.rename(columns={col:'Elo Score','organizer':'Organizer','license':'License'}, inplace=True)
     return df[['Rank','Model','Organizer','License','Elo Score']]
 
-# --- Advanced Styling ---
-# Base font-size bump (if any)
+# --- Dark Mode Styling ---
 font_size_css = """
 body { font-size: 1em !important; }
 """
 custom_css += font_size_css
 
-# Import fonts & icons + component styling
-advanced_css = """
+dark_css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
 
 body {
     font-family: 'Inter', sans-serif;
-    background-color: #f8f9fa;
-    color: #333;
+    background-color: #121212;
+    color: #e0e0e0;
 }
 
 /* Hero Section */
 .hero-section {
-    background: linear-gradient(135deg, #6c63ff, #8f94fb);
-    color: #fff;
+    background: linear-gradient(135deg, #333, #222);
+    color: #e0e0e0;
     padding: 2rem 1rem;
     border-radius: .75rem;
     margin-bottom: 1.5rem;
     text-align: center;
-    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
 }
 .hero-section h1 {
     margin: 0;
@@ -100,7 +98,7 @@ body {
     margin: .5rem 0 0 !important;
     font-size: 1.25rem !important;
     font-weight: 400 !important;
-    opacity: 0.9;
+    opacity: 0.8;
 }
 
 /* Tab Buttons */
@@ -108,17 +106,17 @@ body {
     border-radius: 20px !important;
     padding: 0.5rem 1rem !important;
     margin-right: 0.5rem !important;
-    background: #e0e0e0 !important;
-    color: #333 !important;
+    background: #1e1e1e !important;
+    color: #e0e0e0 !important;
     border: none !important;
     transition: background 0.3s !important;
     font-weight: 500 !important;
 }
 .tab-buttons button:hover {
-    background: #d0d0d0 !important;
+    background: #2c2c2c !important;
 }
 .tab-buttons button[aria-selected="true"] {
-    background: #6c63ff !important;
+    background: #444 !important;
     color: #fff !important;
 }
 
@@ -129,60 +127,84 @@ body {
     padding: 0.5rem 1rem;
     margin-right: 0.5rem;
     border-radius: 999px;
-    background: #e0e0e0;
+    background: #1e1e1e;
     cursor: pointer;
     transition: background 0.3s, color 0.3s;
     font-weight: 500;
+    color: #e0e0e0;
 }
 #category-selector input[type="radio"]:checked + label {
-    background: #6c63ff;
+    background: #444;
     color: #fff;
 }
 
 /* Table Styling */
-table {
+.dataframe-container table {
     width: 100%;
     border: none;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
     border-radius: 0.5rem;
     overflow: hidden;
-    margin: 1rem 0;
 }
-th {
-    background: #6c63ff;
-    color: #fff;
+.dataframe-container table th {
+    background: #2c2c2c;
+    color: #e0e0e0;
+}
+.dataframe-container table tr:nth-child(odd) {
+    background-color: #1e1e1e !important;
+}
+.dataframe-container table tr:nth-child(even) {
+    background-color: #252525 !important;
 }
-td, th {
+.dataframe-container table td, .dataframe-container table th {
     padding: 0.75rem 1rem;
+    color: #e0e0e0;
 }
-tr:nth-child(even) { background: #f7f5ff; }
-tr:hover { background: #edeaff; }
-td a {
-    color: #6c63ff;
+.dataframe-container table td a {
+    color: #8ab4f8;
     text-decoration: none;
 }
-td a:hover {
-    color: #534bbe;
+.dataframe-container table td a:hover {
+    color: #a3c9ff;
     text-decoration: underline;
 }
+
+/* Enable scrollbar */
+#leaderboard-table .dataframe-container {
+    max-height: 400px !important;
+    overflow-y: auto !important;
+}
 """
-custom_css += advanced_css
+custom_css += dark_css
 
 # --- Override Title ---
 TITLE = """
-<div class="hero-section">
-  <h1><i class="fas fa-trophy"></i> MLE-Dojo Benchmark Leaderboard</h1>
+<div class=\"hero-section\">
+  <h1><i class=\"fas fa-trophy\"></i> MLE-Dojo Benchmark Leaderboard</h1>
   <h2>Improving LLM Agents for Machine Learning Engineering</h2>
 </div>
 """
 
 # --- Build App ---
-demo = gr.Blocks(css=custom_css, theme=gr.themes.Soft())
+# Use Dark theme for Gradio
+ demo = gr.Blocks(css=custom_css, theme=gr.themes.Dark())
 
 with demo:
+    # Inject FontAwesome JS/CSS explicitly
+    gr.HTML("""
+      <link rel=\"stylesheet\"
+            href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css\"
+            crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"/>
+      <script src=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js\"
+              crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>
+    """
+    )
+
+    # Header & Intro
     gr.HTML(TITLE)
     gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
 
+    # Tabs
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
         with gr.TabItem("<i class='fas fa-list'></i> Leaderboard"):
             gr.Markdown("## Model Elo Rankings by Category")
@@ -212,6 +234,7 @@ with demo:
         with gr.TabItem("<i class='fas fa-info-circle'></i> About"):
             gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")
 
+    # Citation Accordion
     with gr.Accordion("📙 Citation", open=False):
         gr.Textbox(
             value=CITATION_BUTTON_TEXT,
@@ -222,8 +245,5 @@ with demo:
         )
 
 if __name__ == "__main__":
-    print("Launching Gradio App...")
-    try:
-        demo.launch()
-    except Exception as e:
-        print(f"Error launching app: {e}")
+    print("Launching Gradio App in Dark Mode...")
+    demo.launch()