Update app.py

app.py

@@ -65,12 +65,13 @@ def update_leaderboard(category):
 
 # --- Dark Mode Styling ---
 font_size_css = """
-body { font-size: 1.1em !important; }
+body { font-size: 1em !important; }
 """
 custom_css += font_size_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;
@@ -90,213 +91,96 @@ body {
 }
 .hero-section h1 {
     margin: 0;
-    font-size: 2.8rem !important;
+    font-size: 2.5rem !important;
     font-weight: 700 !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.hero-section h1 i {
-    margin-right: 0.5rem;
-    color: gold;
 }
 .hero-section h2 {
     margin: .5rem 0 0 !important;
-    font-size: 1.4rem !important;
+    font-size: 1.25rem !important;
     font-weight: 400 !important;
     opacity: 0.8;
 }
 
 /* Tab Buttons */
-.tab-nav-buttons button {
+.tab-buttons button {
     border-radius: 20px !important;
-    padding: 0.75rem 1.25rem !important;
-    margin-right: 0.75rem !important;
+    padding: 0.5rem 1rem !important;
+    margin-right: 0.5rem !important;
     background: #1e1e1e !important;
     color: #e0e0e0 !important;
     border: none !important;
-    transition: all 0.3s ease !important;
-    font-weight: 600 !important;
-    font-size: 1.2rem !important;
-    letter-spacing: 0.02em !important;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
+    transition: background 0.3s !important;
+    font-weight: 500 !important;
 }
-.tab-nav-buttons button:hover {
+.tab-buttons button:hover {
     background: #2c2c2c !important;
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
 }
-.tab-nav-buttons button[aria-selected="true"] {
-    background: linear-gradient(to bottom, #444, #333) !important;
+.tab-buttons button[aria-selected="true"] {
+    background: #444 !important;
     color: #fff !important;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
 }
 
-/* Category Selector */
-#category-selector .wrap {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-}
-#category-selector .label-wrap {
-    font-size: 1.4rem !important;
-    font-weight: 600 !important;
-    color: #e0e0e0 !important;
-    letter-spacing: 0.02em !important;
-    margin-bottom: 0.5rem !important;
-}
+/* Category Selector Pills */
 #category-selector input[type="radio"] { display: none; }
-#category-selector .options {
-    display: flex;
-    flex-direction: row !important;
-    flex-wrap: wrap;
-    gap: 0.75rem;
-    justify-content: space-between;
-}
 #category-selector label {
     display: inline-block;
-    padding: 0.75rem 1.5rem;
+    padding: 0.5rem 1rem;
+    margin-right: 0.5rem;
     border-radius: 999px;
     background: #1e1e1e;
     cursor: pointer;
-    transition: all 0.3s ease;
+    transition: background 0.3s, color 0.3s;
     font-weight: 500;
     color: #e0e0e0;
-    letter-spacing: 0.02em;
-    font-size: 1.15rem;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
-    text-align: center;
-    width: 18%;
-    margin: 0 !important;
-}
-#category-selector label:hover {
-    background: #2a2a2a;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
 }
 #category-selector input[type="radio"]:checked + label {
-    background: linear-gradient(to bottom, #444, #333);
+    background: #444;
     color: #fff;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
-    font-weight: 600;
 }
 
 /* Table Styling */
-.dataframe-container {
-    margin-top: 1.5rem;
-    border-radius: 0.75rem;
-    overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-}
 .dataframe-container table {
     width: 100%;
     border: none;
-    border-collapse: collapse;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
+    border-radius: 0.5rem;
+    overflow: hidden;
 }
 .dataframe-container table th {
-    background: linear-gradient(to bottom, #333, #2c2c2c);
-    color: #fff;
-    font-weight: 600;
-    font-size: 1.25rem;
-    text-align: left;
-    letter-spacing: 0.02em;
-    padding: 1.2rem 1.5rem;
-    position: sticky;
-    top: 0;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-    z-index: 10;
+    background: #2c2c2c;
+    color: #e0e0e0;
 }
 .dataframe-container table tr:nth-child(odd) {
-    background-color: #1a1a1a !important;
+    background-color: #1e1e1e !important;
 }
 .dataframe-container table tr:nth-child(even) {
-    background-color: #222 !important;
-}
-.dataframe-container table tr:hover {
-    background-color: #2c2c2c !important;
-    transition: background-color 0.2s ease;
+    background-color: #252525 !important;
 }
-.dataframe-container table td {
-    padding: 1.1rem 1.5rem;
+.dataframe-container table td, .dataframe-container table th {
+    padding: 0.75rem 1rem;
     color: #e0e0e0;
-    font-size: 1.2rem;
-    letter-spacing: 0.01em;
-    border-bottom: 1px solid #333;
 }
 .dataframe-container table td a {
     color: #8ab4f8;
     text-decoration: none;
-    font-weight: 500;
-    transition: all 0.2s ease;
 }
 .dataframe-container table td a:hover {
     color: #a3c9ff;
     text-decoration: underline;
 }
 
-/* Column-specific styles */
-.dataframe-container table td:first-child, 
-.dataframe-container table th:first-child {
-    text-align: center;
-    width: 80px;
-}
-.dataframe-container table td:last-child, 
-.dataframe-container table th:last-child {
-    text-align: center;
-    font-weight: 600;
-    font-size: 1.3rem;
-    color: #ffcc00;
-}
-
 /* Enable scrollbar */
 #leaderboard-table .dataframe-container {
-    max-height: 550px !important;
+    max-height: 400px !important;
     overflow-y: auto !important;
 }
-
-/* Custom Scrollbar for WebKit browsers */
-.dataframe-container::-webkit-scrollbar {
-    width: 10px;
-}
-.dataframe-container::-webkit-scrollbar-track {
-    background: #1a1a1a;
-    border-radius: 5px;
-}
-.dataframe-container::-webkit-scrollbar-thumb {
-    background: #444;
-    border-radius: 5px;
-}
-.dataframe-container::-webkit-scrollbar-thumb:hover {
-    background: #555;
-}
-
-/* Markdown text styling */
-.markdown-text {
-    line-height: 1.6;
-    font-size: 1.2rem;
-    color: #d0d0d0;
-}
-.markdown-text h1, .markdown-text h2, .markdown-text h3 {
-    color: #fff;
-    font-weight: 600;
-    margin-top: 1.5rem;
-    margin-bottom: 1rem;
-}
-.markdown-text h2 {
-    font-size: 1.8rem !important;
-    border-bottom: 1px solid #333;
-    padding-bottom: 0.5rem;
-}
-.markdown-text p {
-    margin-bottom: 1rem;
-}
 """
 custom_css += dark_css
 
 # --- Override Title ---
 TITLE = """
-<div class="hero-section">
-  <h1><i class="fa fa-trophy" style="color: gold;"></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>
 """
@@ -306,27 +190,24 @@ TITLE = """
 demo = gr.Blocks(css=custom_css, theme=gr.themes.Base())
 
 with demo:
-    # Inject FontAwesome CSS and JS explicitly in the head
+    # Inject FontAwesome JS/CSS explicitly
     gr.HTML("""
-      <head>
-        <link rel="stylesheet" 
-              href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" 
-              integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" 
-              crossorigin="anonymous" referrerpolicy="no-referrer" />
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" 
-                integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow==" 
-                crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-      </head>
-    """)
+      <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 - Fix icons by using Font Awesome classes correctly
-    with gr.Tabs(elem_classes="tab-nav-buttons") as tabs:
-        with gr.TabItem("📋 Leaderboard"):
-            gr.Markdown("## Model Elo Rankings by Category", 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")
             category_selector = gr.Radio(
                 choices=CATEGORIES,
                 label="Select Category:",
@@ -350,7 +231,7 @@ with demo:
                 outputs=leaderboard_df
             )
 
-        with gr.TabItem("ℹ️ About"):
+        with gr.TabItem("<i class='fas fa-info-circle'></i> About"):
             gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")
 
     # Citation Accordion