Update app.py

app.py

@@ -3,20 +3,17 @@ import pandas as pd
 from apscheduler.schedulers.background import BackgroundScheduler
 
 """
-MLE‑Dojo Benchmark Leaderboard — Dark Elegance Edition
-=====================================================
-A refined, low‑glare UI with larger table text, richer surface layering, and a
-subtle neon accent that pops on dark slate backgrounds.
-
-HOW TO
-------
-* `pip install gradio pandas apscheduler`
-* `python mle_dojo_leaderboard_app.py`
-* Replace placeholder copy (TITLE …) with your own or keep the try/except.
+MLE‑Dojo Benchmark Leaderboard — Dark Elegance v2
+================================================
+Upgrades:
+* richer heading with emoji icon
+* larger fonts throughout
+* medal icons for top‑3 ranks
+* scrollable leaderboard (fixed height)
 """
 
 # ---------------------------------------------------------------------------
-#  Import app copy (falls back to placeholders if src/ is absent)
+#  Import app copy (fallback placeholders if src/ missing)
 # ---------------------------------------------------------------------------
 try:
     from src.about import (
@@ -26,15 +23,14 @@ try:
         LLM_BENCHMARKS_TEXT,
         TITLE,
     )
-    from src.display.css_html_js import custom_css  # optional extra rules
+    from src.display.css_html_js import custom_css  # may exist
     from src.envs import REPO_ID
     from src.submission.submit import add_new_eval
 except ImportError:
-    # ── Placeholders ───────────────────────────────────────────────────────────
     CITATION_BUTTON_LABEL = "Citation"
     CITATION_BUTTON_TEXT  = "Please cite us if you use this benchmark…"
-    INTRODUCTION_TEXT     = "Welcome to the **MLE‑Dojo Benchmark Leaderboard** — compare LLM agents across realistic ML engineering tasks."
-    LLM_BENCHMARKS_TEXT   = "Further details about tasks, metrics and evaluation pipelines."
+    INTRODUCTION_TEXT     = "Welcome to the **MLE‑Dojo Benchmark Leaderboard** — compare LLM agents across realistic ML‑engineering tasks."
+    LLM_BENCHMARKS_TEXT   = "Further details about tasks, metrics, and evaluation pipelines."
     TITLE = (
         "<h1 class='hero-title gradient-text'>🏆 MLE‑Dojo Benchmark Leaderboard</h1>"
         "<p class='subtitle'>Interactive, reproducible &amp; community‑driven ML‑agent benchmarking</p>"
@@ -72,6 +68,8 @@ CATEGORY_MAP = {
     "CV": "CV_Elo",
 }
 
+MEDALS = {1: "🥇", 2: "🥈", 3: "🥉"}
+
 def update_leaderboard(category: str, ascending: bool):
     col = CATEGORY_MAP.get(category, CATEGORY_MAP[DEFAULT_CATEGORY])
     df = (
@@ -79,49 +77,45 @@ def update_leaderboard(category: str, ascending: bool):
         .sort_values(by=col, ascending=ascending)
         .reset_index(drop=True)
     )
+
     df.insert(0, "Rank", df.index + 1)
+    df["Rank"] = df["Rank"].apply(lambda r: MEDALS.get(r, str(r)))
     df["Model"] = df.apply(lambda r: f"<a href='{r.url}' target='_blank'>{r.model_name}</a>", axis=1)
+
     df.rename(columns={"organizer": "Organizer", "license": "License", col: "Elo Score"}, inplace=True)
     return df[["Rank", "Model", "Organizer", "License", "Elo Score"]]
 
 # ---------------------------------------------------------------------------
-#  Dark‑mode CSS & Larger Table Fonts
+#  CSS (dark + bigger fonts + heading icon)
 # ---------------------------------------------------------------------------
 custom_css += """
-/* —————  Core Typography ————— */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
-html,body {
-    font-family: 'Inter', sans-serif !important;
-    font-size: 18px !important;
-    line-height: 1.55;
-    color: #e2e8f0;
-    background:#0f172a;
-}
+html,body{font-family:'Inter',sans-serif!important;font-size:18px!important;line-height:1.6;color:#e2e8f0;background:#0f172a;}
 
-/* Accent gradient for titles */
-.gradient-text {
-    background:linear-gradient(90deg,#6366f1 0%,#06b6d4 100%);
-    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
-}
+.gradient-text{background:linear-gradient(90deg,#6366f1 0%,#06b6d4 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
 
-/* Markdown headings */
-.markdown-text h2{font-weight:600;margin-top:1.3em;color:#f1f5f9;}
+/* Section title */
+.section-title{font-size:1.7rem;font-weight:700;color:#f1f5f9;display:flex;align-items:center;gap:.4em;margin:1.1em 0 .8em;}
+.section-title .icon{font-size:1.4em;}
 
-/* Radio & checkbox containers */
-.gr-radio, .gr-checkbox{background:#1e293b;border-radius:8px;padding:6px 12px;box-shadow:0 1px 3px rgba(0,0,0,.4);} 
-.gr-radio input:checked+label, .gr-checkbox input:checked+label{color:#38bdf8;}
+/* Radio & checkbox */
+.gr-radio,.gr-checkbox{background:#1e293b;border-radius:8px;padding:6px 12px;box-shadow:0 1px 3px rgba(0,0,0,.4);} 
+.gr-radio input:checked+label,.gr-checkbox input:checked+label{color:#38bdf8;}
 
-/* Table Styling */
+/* Leaderboard table */
 #leaderboard-table table{width:100%;border-collapse:collapse;background:#1e293b;border-radius:8px;overflow:hidden;}
-#leaderboard-table th{background:#334155;font-size:0.9rem;font-weight:600;padding:0.7em;color:#f1f5f9;text-transform:uppercase;letter-spacing:.04em;}
-#leaderboard-table td{padding:0.6em;font-size:1.05rem;border-top:1px solid #334155;}
+#leaderboard-table th{background:#334155;font-size:1rem;font-weight:600;padding:.8em;color:#f1f5f9;text-transform:uppercase;letter-spacing:.04em;}
+#leaderboard-table td{padding:.7em;font-size:1.15rem;border-top:1px solid #334155;}
 #leaderboard-table tr:nth-child(even){background:#1c2431;}
 #leaderboard-table tr:hover{background:#475569;}
 
+/* Scrollbar styling */
+#leaderboard-table tbody{display:block;max-height:520px;overflow-y:auto;}
+#leaderboard-table thead, #leaderboard-table tbody tr{display:table;width:100%;table-layout:fixed;}
+
 /* Links */
 a{color:#38bdf8;} a:hover{text-decoration:underline;}
 
-/* Accordion */
 .gr-accordion .label{font-weight:600;font-size:1rem;color:#f1f5f9;}
 """
 
@@ -136,18 +130,20 @@ with app:
 
     with gr.Tabs():
         with gr.TabItem("🏅 Leaderboard"):
-            gr.Markdown("### Model Elo Rankings by Category", elem_classes="markdown-text")
+            gr.HTML("<h3 class='section-title'><span class='icon'>📊</span>Model Elo Rankings by Category</h3>")
             with gr.Row():
                 category_radio = gr.Radio(CATEGORIES, value=DEFAULT_CATEGORY, label="Category")
-                asc_check      = gr.Checkbox(label="⬆️ Ascending order", value=False)
+                asc_check      = gr.Checkbox(label="⬆️ Asc. order", value=False)
+
             board = gr.Dataframe(
                 value=update_leaderboard(DEFAULT_CATEGORY, False),
                 headers=["Rank", "Model", "Organizer", "License", "Elo Score"],
-                datatype=["number", "html", "str", "str", "number"],
+                datatype=["html", "html", "str", "str", "number"],
                 row_count=(len(master_df), "fixed"),
                 col_count=(5, "fixed"),
                 interactive=False,
                 elem_id="leaderboard-table",
+                height=560,
             )
             category_radio.change(update_leaderboard, [category_radio, asc_check], board)
             asc_check.change(update_leaderboard, [category_radio, asc_check], board)