Update app.py

app.py

@@ -71,7 +71,6 @@ 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;
@@ -93,6 +92,13 @@ body {
     margin: 0;
     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;
@@ -102,85 +108,183 @@ body {
 }
 
 /* Tab Buttons */
-.tab-buttons button {
+.tab-nav-buttons button {
     border-radius: 20px !important;
-    padding: 0.5rem 1rem !important;
-    margin-right: 0.5rem !important;
+    padding: 0.75rem 1.25rem !important;
+    margin-right: 0.75rem !important;
     background: #1e1e1e !important;
     color: #e0e0e0 !important;
     border: none !important;
-    transition: background 0.3s !important;
-    font-weight: 500 !important;
+    transition: all 0.3s ease !important;
+    font-weight: 600 !important;
+    font-size: 1.05rem !important;
+    letter-spacing: 0.02em !important;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
 }
-.tab-buttons button:hover {
+.tab-nav-buttons button:hover {
     background: #2c2c2c !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
 }
-.tab-buttons button[aria-selected="true"] {
-    background: #444 !important;
+.tab-nav-buttons button[aria-selected="true"] {
+    background: linear-gradient(to bottom, #444, #333) !important;
     color: #fff !important;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
 }
 
-/* Category Selector Pills */
+/* Category Selector */
+#category-selector .wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+#category-selector .label-wrap {
+    font-size: 1.15rem !important;
+    font-weight: 600 !important;
+    color: #e0e0e0 !important;
+    letter-spacing: 0.02em !important;
+    margin-bottom: 0.25rem !important;
+}
 #category-selector input[type="radio"] { display: none; }
+#category-selector .options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+}
 #category-selector label {
     display: inline-block;
-    padding: 0.5rem 1rem;
-    margin-right: 0.5rem;
+    padding: 0.65rem 1.25rem;
     border-radius: 999px;
     background: #1e1e1e;
     cursor: pointer;
-    transition: background 0.3s, color 0.3s;
+    transition: all 0.3s ease;
     font-weight: 500;
     color: #e0e0e0;
+    letter-spacing: 0.02em;
+    font-size: 1.05rem;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
+}
+#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: #444;
+    background: linear-gradient(to bottom, #444, #333);
     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;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
-    border-radius: 0.5rem;
-    overflow: hidden;
+    border-collapse: collapse;
 }
 .dataframe-container table th {
-    background: #2c2c2c;
-    color: #e0e0e0;
+    background: linear-gradient(to bottom, #333, #2c2c2c);
+    color: #fff;
+    font-weight: 600;
+    font-size: 1.1rem;
+    text-align: left;
+    letter-spacing: 0.02em;
+    padding: 1rem 1.25rem;
+    position: sticky;
+    top: 0;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    z-index: 10;
 }
 .dataframe-container table tr:nth-child(odd) {
-    background-color: #1e1e1e !important;
+    background-color: #1a1a1a !important;
 }
 .dataframe-container table tr:nth-child(even) {
-    background-color: #252525 !important;
+    background-color: #222 !important;
+}
+.dataframe-container table tr:hover {
+    background-color: #2c2c2c !important;
+    transition: background-color 0.2s ease;
 }
-.dataframe-container table td, .dataframe-container table th {
-    padding: 0.75rem 1rem;
+.dataframe-container table td {
+    padding: 0.9rem 1.25rem;
     color: #e0e0e0;
+    font-size: 1.05rem;
+    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;
+}
+
 /* Enable scrollbar */
 #leaderboard-table .dataframe-container {
-    max-height: 400px !important;
+    max-height: 500px !important;
     overflow-y: auto !important;
 }
+
+/* Custom Scrollbar for WebKit browsers */
+.dataframe-container::-webkit-scrollbar {
+    width: 8px;
+}
+.dataframe-container::-webkit-scrollbar-track {
+    background: #1a1a1a;
+    border-radius: 4px;
+}
+.dataframe-container::-webkit-scrollbar-thumb {
+    background: #444;
+    border-radius: 4px;
+}
+.dataframe-container::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}
+
+/* Markdown text styling */
+.markdown-text {
+    line-height: 1.6;
+    font-size: 1.05rem;
+    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 p {
+    margin-bottom: 1rem;
+}
 """
 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="fa fa-trophy" style="color: gold;"></i> MLE-Dojo Benchmark Leaderboard</h1>
   <h2>Improving LLM Agents for Machine Learning Engineering</h2>
 </div>
 """
@@ -190,24 +294,27 @@ TITLE = """
 demo = gr.Blocks(css=custom_css, theme=gr.themes.Base())
 
 with demo:
-    # Inject FontAwesome JS/CSS explicitly
+    # Inject FontAwesome CSS and JS explicitly in the head
     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>
-    """
-    )
+      <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>
+    """)
 
     # 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")
+    # 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")
             category_selector = gr.Radio(
                 choices=CATEGORIES,
                 label="Select Category:",
@@ -231,7 +338,7 @@ with demo:
                 outputs=leaderboard_df
             )
 
-        with gr.TabItem("<i class='fas fa-info-circle'></i> About"):
+        with gr.TabItem("ℹ️ About"):
             gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")
 
     # Citation Accordion
@@ -246,4 +353,4 @@ with demo:
 
 if __name__ == "__main__":
     print("Launching Gradio App in Dark Mode...")
-    demo.launch()
+    demo.launch()