Spaces:
Running
Running
| # -*- coding: utf-8 -*- | |
| """Gradio frontend for the MLE‑Dojo leaderboard. | |
| Changes made in this version | |
| ---------------------------- | |
| 1. **Fixed CSS syntax errors** (missing semicolons, misplaced `!important`). | |
| 2. **Introduced a single, clean rule‑set** for the introduction block so the | |
| font size, family and alignment are now reliably applied. | |
| 3. All new comments are in English for clarity. | |
| 4. Adjusted font sizes for Radio button labels per user request. | |
| 5. **Added dark mode support** using `@media (prefers-color-scheme: dark)` | |
| to override conflicting styles and ensure readability in dark themes. | |
| """ | |
| import gradio as gr | |
| import pandas as pd | |
| from apscheduler.schedulers.background import BackgroundScheduler | |
| # --------------------------------------------------------------------------- | |
| # Optional imports from the project package. If they fail we fall back to | |
| # placeholders so the app still launches locally. | |
| # --------------------------------------------------------------------------- | |
| try: | |
| from src.about import ( | |
| CITATION_BUTTON_LABEL, | |
| CITATION_BUTTON_TEXT, | |
| EVALUATION_QUEUE_TEXT, # still referenced in commented‑out submit tab | |
| INTRODUCTION_TEXT, | |
| LLM_BENCHMARKS_TEXT, | |
| TITLE, # contains <h1 id="main-leaderboard-title"> | |
| ) | |
| try: | |
| from src.display.css_html_js import custom_css # extra project CSS | |
| except ImportError: | |
| print("Warning: src.display.css_html_js not found. Using empty CSS.") | |
| custom_css = "" | |
| from src.envs import REPO_ID | |
| from src.submission.submit import add_new_eval | |
| except ImportError: | |
| # -------- PLACEHOLDERS so the Space can still run -------- | |
| print("Warning: using placeholder values because src module imports failed.") | |
| CITATION_BUTTON_LABEL = "Citation" | |
| CITATION_BUTTON_TEXT = """@misc{qiang2025mledojointeractiveenvironmentsempowering, | |
| title={MLE-Dojo: Interactive Environments for Empowering LLM Agents in Machine Learning Engineering}, | |
| author={Rushi Qiang and Yuchen Zhuang and Yinghao Li and Dingu Sagar V K and Rongzhi Zhang and Changhao Li and Ian Shu-Hei Wong and Sherry Yang and Percy Liang and Chao Zhang and Bo Dai}, | |
| year={2025}, | |
| eprint={2505.07782}, | |
| archivePrefix={arXiv}, | |
| primaryClass={cs.LG}, | |
| url={https://arxiv.org/abs/2505.07782}, | |
| }""" | |
| EVALUATION_QUEUE_TEXT = "Current evaluation queue:" | |
| TITLE = ( | |
| "<h1 id=\"main-leaderboard-title\" align=\"center\">🏆 MLE-Dojo " | |
| "Benchmark Leaderboard (Placeholder)</h1>" | |
| ) | |
| INTRODUCTION_TEXT = ( | |
| "<div class=\"introduction-section\">" | |
| "<p>Welcome to the MLE‑Dojo Benchmark Leaderboard (placeholder).</p>" | |
| "<p>Edit <code>src/about.py</code> to change this text.</p>" | |
| "</div>" | |
| ) | |
| LLM_BENCHMARKS_TEXT = ( | |
| "## About Section (placeholder)\nInformation about the benchmarks goes here." | |
| ) | |
| custom_css = "" | |
| REPO_ID = "your/space-id" | |
| # Dummy function so the callback in the (commented) submit tab still works | |
| def add_new_eval(*_): | |
| return "Submission placeholder." | |
| # icons_html = """ | |
| # <p align="center" style="font-family:'Segoe UI', Roboto, sans-serif; font-weight:bold; text-transform:uppercase;"> | |
| # <a href="https://arxiv.org/abs/1706.03762"> | |
| # <img src="https://img.shields.io/badge/Arxiv-1706.03762-000000.svg?style=flat-square&logo=arxiv&logoColor=%23FFD700&labelColor=000000" height="28"> | |
| # </a> | |
| # | |
| # <a href="https://mle-dojo.github.io/MLE-Dojo-page/"> | |
| # <img src="https://img.shields.io/badge/Project%20Website-%20-000000.svg?style=flat-square&logo=Google-Chrome&logoColor=%23FFD700&labelColor=000000" height="28"> | |
| # </a> | |
| # | |
| # <a href="https://huggingface.co/spaces/MLE-Dojo/Leaderboard"> | |
| # <img src="https://img.shields.io/badge/Leaderboard-000000.svg?style=flat-square&logo=github&logoColor=%23FFD700&labelColor=000000" height="28"> | |
| # </a> | |
| # </p> | |
| # """ | |
| # Append the icons HTML to the INTRODUCTION_TEXT | |
| # It's important that INTRODUCTION_TEXT is a string here. | |
| # If IMPORTED_INTRODUCTION_TEXT from src.about could be non-string, you'd need more checks. | |
| # INTRODUCTION_TEXT += icons_html | |
| # --------------------------------------------------------------------------- | |
| # Leaderboard data (static demo data for now) | |
| # --------------------------------------------------------------------------- | |
| data = [ | |
| { | |
| "model_name": "gpt-4o-mini (24-07-18)", | |
| "url": "https://openai.com/index/gpt-4o-mini-advancing-cost-efficient-intelligence/", | |
| "organizer": "OpenAI", | |
| "license": "Proprietary", | |
| "MLE-Lite_Elo": 753, | |
| "Tabular_Elo": 839, | |
| "NLP_Elo": 758, | |
| "CV_Elo": 754, | |
| "Overall": 778, | |
| }, | |
| { | |
| "model_name": "gpt-4o (24-11-20)", | |
| "url": "https://openai.com/index/hello-gpt-4o/", | |
| "organizer": "OpenAI", | |
| "license": "Proprietary", | |
| "MLE-Lite_Elo": 830, | |
| "Tabular_Elo": 861, | |
| "NLP_Elo": 903, | |
| "CV_Elo": 761, | |
| "Overall": 841, | |
| }, | |
| { | |
| "model_name": "o3-mini (25-01-31)", | |
| "url": "https://openai.com/index/openai-o3-mini/", | |
| "organizer": "OpenAI", | |
| "license": "Proprietary", | |
| "MLE-Lite_Elo": 1108, | |
| "Tabular_Elo": 1019, | |
| "NLP_Elo": 1056, | |
| "CV_Elo": 1207, | |
| "Overall": 1096, | |
| }, | |
| { | |
| "model_name": "deepseek-v3 (25-03-24)", | |
| "url": "https://api-docs.deepseek.com/news/news1226", | |
| "organizer": "DeepSeek", | |
| "license": "DeepSeek", | |
| "MLE-Lite_Elo": 1004, | |
| "Tabular_Elo": 1015, | |
| "NLP_Elo": 1028, | |
| "CV_Elo": 1067, | |
| "Overall": 1023, | |
| }, | |
| { | |
| "model_name": "deepseek-r1", | |
| "url": "https://api-docs.deepseek.com/news/news250120", | |
| "organizer": "DeepSeek", | |
| "license": "DeepSeek", | |
| "MLE-Lite_Elo": 1137, | |
| "Tabular_Elo": 1053, | |
| "NLP_Elo": 1103, | |
| "CV_Elo": 1083, | |
| "Overall": 1100, | |
| }, | |
| { | |
| "model_name": "gemini-2.0-flash", | |
| "url": "https://ai.google.dev/gemini-api/docs/models#gemini-2.0-flash", | |
| "organizer": "Google", | |
| "license": "Proprietary", | |
| "MLE-Lite_Elo": 847, | |
| "Tabular_Elo": 923, | |
| "NLP_Elo": 860, | |
| "CV_Elo": 978, | |
| "Overall": 895, | |
| }, | |
| { | |
| "model_name": "gemini-2.0-pro (exp)", | |
| "url": "https://blog.google/technology/google-deepmind/gemini-model-updates-february-2025/", | |
| "organizer": "Google", | |
| "license": "Proprietary", | |
| "MLE-Lite_Elo": 1064, | |
| "Tabular_Elo": 1139, | |
| "NLP_Elo": 1028, | |
| "CV_Elo": 973, | |
| "Overall": 1054, | |
| }, | |
| { | |
| "model_name": "gemini-2.5-pro (exp-3-25)", | |
| "url": "https://deepmind.google/technologies/gemini/pro/", | |
| "organizer": "Google", | |
| "license": "Proprietary", | |
| "MLE-Lite_Elo": 1257, | |
| "Tabular_Elo": 1150, | |
| "NLP_Elo": 1266, | |
| "CV_Elo": 1177, | |
| "Overall": 1214, | |
| }, | |
| ] | |
| master_df = pd.DataFrame(data) | |
| CATEGORIES = ["Overall", "MLE-Lite", "Tabular", "NLP", "CV"] | |
| DEFAULT_CATEGORY = "Overall" | |
| category_to_column = { | |
| "MLE-Lite": "MLE-Lite_Elo", | |
| "Tabular": "Tabular_Elo", | |
| "NLP": "NLP_Elo", | |
| "CV": "CV_Elo", | |
| "Overall": "Overall", | |
| } | |
| # --------------------------------------------------------------------------- | |
| # Helper to slice & rank the DataFrame when category radio changes | |
| # --------------------------------------------------------------------------- | |
| def update_leaderboard(category: str) -> pd.DataFrame: | |
| """Return a DataFrame limited to the selected category and sorted by score.""" | |
| score_column = category_to_column.get(category, category_to_column[DEFAULT_CATEGORY]) | |
| cols = ["model_name", "url", "organizer", "license", score_column] | |
| df = master_df[cols].copy() | |
| df = df.sort_values(score_column, ascending=False).reset_index(drop=True) | |
| df.insert(0, "Rank", df.index + 1) | |
| # Convert model name → clickable link (HTML will be rendered in the table) | |
| df["Model"] = df.apply( | |
| lambda r: ( | |
| f"<a href='{r.url if pd.notna(r.url) else '#'}' target='_blank' " | |
| f"class='model-link'>{r.model_name}</a>" | |
| ), | |
| axis=1, | |
| ) | |
| df = df.rename(columns={ | |
| score_column: "Elo Score", | |
| "organizer": "Organizer", | |
| "license": "License", | |
| }) | |
| return df[["Rank", "Model", "Organizer", "License", "Elo Score"]] | |
| # --------------------------------------------------------------------------- | |
| # Basic placeholder DataFrames for the (currently disabled) evaluation queue | |
| # --------------------------------------------------------------------------- | |
| print("Warning: evaluation queue fetching is disabled/mocked.") | |
| empty_queue_df = pd.DataFrame(columns=["Model", "Status", "Requested", "Started"]) | |
| # --------------------------------------------------------------------------- | |
| # Helper for HF Spaces restart (optional) | |
| # --------------------------------------------------------------------------- | |
| def restart_space(): | |
| """Restart the current Hugging Face Space (if running in one).""" | |
| print(f"Attempting to restart space: {REPO_ID}") | |
| # Insert actual restart logic if needed. | |
| # --------------------------------------------------------------------------- | |
| # CSS: project CSS (custom_css) + enhanced overrides + DARK MODE SUPPORT | |
| # --------------------------------------------------------------------------- | |
| # --- CLEAN introduction typography override --- | |
| intro_css = """ | |
| /* -------------------------------------------------- | |
| INTRODUCTION BLOCK (font, size, alignment) | |
| -------------------------------------------------- */ | |
| .introduction-wrapper, .introduction-section { | |
| font-family: Arial, sans-serif; /* Added sans-serif fallback */ | |
| font-size: 1.3rem !important; /* ≈22–23 px */ | |
| line-height: 1.75; | |
| /* color: #344054; */ /* Rely on theme for base text color */ | |
| text-align: center; | |
| max-width: 1000px; | |
| margin: 0 auto 1rem auto; | |
| } | |
| .introduction-wrapper p, .introduction-section p { | |
| font-size: 1.3rem !important; /* ≈22–23 px */ | |
| margin-bottom: 0.5rem; | |
| /* color: inherit; */ /* Inherit color from parent/theme */ | |
| } | |
| @media (max-width: 768px) { | |
| .introduction-wrapper, .introduction-section { | |
| font-size: 1.3rem !important; /* Maintain size on mobile */ | |
| } | |
| } | |
| """ | |
| # --- Existing CSS (base layout, table, etc.) --- | |
| # Removed hardcoded light background/text colors where possible | |
| # Kept structural styles and specific element styling | |
| base_css = """ | |
| /* Base & layout overrides (truncated for brevity) */ | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, | |
| Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| font-size: 1.3em; /* Slightly increased base size */ | |
| line-height: 1.6; | |
| /* background-color: #f8f9fa; REMOVED - Rely on theme */ | |
| /* color: #343a40; REMOVED - Rely on theme */ | |
| } | |
| .gradio-container { | |
| max-width: 1200px !important; | |
| margin: 0 auto !important; | |
| padding: 2rem !important; | |
| } | |
| #main-leaderboard-title { | |
| font-size: 3.2em; | |
| font-weight: 700; | |
| /* color: #212529; REMOVED - Rely on theme */ | |
| text-align: center; | |
| margin-bottom: 1.5rem; | |
| padding-bottom: 0.5rem; | |
| border-bottom: 2px solid var(--border-color-primary); /* Use Gradio variable */ | |
| } | |
| /* Leaderboard table */ | |
| #leaderboard-table th { | |
| /* background-color: #e9ecef; REMOVED - Rely on theme header bg */ | |
| font-size: 1.3em; | |
| font-weight: 500; | |
| /* color: var(--table-header-text-color, inherit); */ /* Use theme variable or inherit */ | |
| } | |
| #leaderboard-table td { | |
| font-size: 1.1em; | |
| /* color: var(--table-body-text-color, inherit); */ /* Use theme variable or inherit */ | |
| } | |
| #leaderboard-table .model-link { | |
| color: var(--link-text-color, #0056b3); /* Use theme link color or fallback */ | |
| font-weight: 500; | |
| text-decoration: none; | |
| } | |
| #leaderboard-table .model-link:hover { | |
| text-decoration: underline; | |
| } | |
| #leaderboard-table { | |
| border-radius: 0.75rem; | |
| overflow: hidden; | |
| border: 1px solid var(--border-color-primary); /* Use Gradio variable */ | |
| } | |
| #leaderboard-table th, | |
| #leaderboard-table td { | |
| padding: 0.9rem 1.2rem; | |
| line-height: 1.4; | |
| } | |
| """ | |
| markdown_css = """ | |
| /* =============================== | |
| About Tab – Markdown Typography (Updated) | |
| =============================== */ | |
| .markdown-text, .markdown-text p { | |
| font-family: "Segoe UI", "Helvetica Neue", sans-serif; | |
| font-size: 1.2rem; | |
| line-height: 1.8; | |
| margin-bottom: 1rem; | |
| } | |
| .markdown-text h1, | |
| .markdown-text h2, | |
| .markdown-text h3 { | |
| font-weight: 600; | |
| line-height: 1.3; | |
| margin: 1.5rem 0 0.9rem 0; | |
| } | |
| .markdown-text h1 { font-size: 1.9rem; } | |
| .markdown-text h2 { font-size: 1.6rem; } | |
| .markdown-text h3 { font-size: 1.4rem; } | |
| .markdown-text ul, | |
| .markdown-text ol { | |
| padding-left: 1.8rem; | |
| margin-bottom: 1.2rem; | |
| } | |
| /* Code blocks - light mode */ | |
| .markdown-text pre, .markdown-text code { | |
| font-family: "Source Code Pro", "Menlo", monospace; | |
| background-color: #f1f3f5; | |
| color: #333; | |
| border-radius: 0.4rem; | |
| border: 1px solid #dee2e6; | |
| } | |
| .markdown-text pre { | |
| padding: 1rem 1.2rem; | |
| overflow-x: auto; | |
| } | |
| .markdown-text code { | |
| padding: 0.2rem 0.45rem; | |
| font-size: 1rem; | |
| } | |
| @media (max-width: 768px) { | |
| .markdown-text, .markdown-text p { font-size: 1.15rem; } | |
| .markdown-text h1 { font-size: 1.75rem; } | |
| .markdown-text h2 { font-size: 1.5rem; } | |
| .markdown-text h3 { font-size: 1.35rem; } | |
| } | |
| """ | |
| tab_css = """ | |
| /* Tabs ▸ target ALL tab buttons using the actual structure */ | |
| .tabs .tab-container > button { | |
| font-size: 1.6rem !important; | |
| font-weight: 500; | |
| font-style: normal; | |
| /* color: #333; REMOVED - Rely on theme */ | |
| /* Using theme variables where possible might be better, but direct styling is okay */ | |
| } | |
| /* Optional: Style for the selected tab button if needed */ | |
| .tabs .tab-container > button.selected { | |
| font-weight: 700; | |
| /* color: #0056b3; */ /* Use theme's primary color if possible */ | |
| color: var(--primary-500, #0056b3); /* Example using a common theme variable name */ | |
| } | |
| """ | |
| # --- MODIFIED CSS FOR RADIO BUTTONS --- | |
| radio_css = """ | |
| /* --- Radio Button Styling --- */ | |
| /* Style for the main label ("Select Category:") */ | |
| .gradio-radio > label span { /* Targets the main label text */ | |
| font-size: 1.6rem !important; | |
| font-weight: 600; | |
| color: var(--primary-500, #2a6099); /* Use theme primary or fallback */ | |
| padding-bottom: 10px; | |
| display: inline-block; | |
| } | |
| /* Style for the individual option labels (Overall, MLE-Lite, etc.) */ | |
| .gradio-radio .wrap > label > span { /* Targets the individual option text */ | |
| font-size: 1.0rem !important; | |
| font-family: Verdana, Geneva, sans-serif; | |
| /* color: #444; REMOVED - Rely on theme for base option color */ | |
| font-weight: normal; | |
| font-style: normal; | |
| padding-left: 6px; | |
| } | |
| /* Style for the selected option's text */ | |
| .gradio-radio .wrap > label.selected > span { /* Style for selected option */ | |
| font-weight: bold; /* Make selected bold for emphasis */ | |
| color: var(--primary-500, #0056b3); /* Use theme's primary color */ | |
| /* color: #87CEEB; Original light blue - might lack contrast in light mode */ | |
| } | |
| """ | |
| citation_css = """ | |
| /* Accordion Header Text ("📙 Citation") */ | |
| .gradio-accordion button.label-wrap > span.svelte-1w6vloh { | |
| font-size: 1.4rem !important; | |
| font-weight: 400; | |
| color: var(--neutral-800, #8B4513); /* Use theme neutral or fallback brown */ | |
| font-family: Georgia, serif; | |
| } | |
| /* Citation Textbox Label ("Copy the following snippet...") */ | |
| #citation-button span.svelte-1gfkn6j { | |
| font-size: 0.95rem !important; | |
| /* color: #666; REMOVED - Rely on theme secondary text color */ | |
| color: var(--neutral-500, #666); | |
| font-style: normal; | |
| display: block; | |
| margin-bottom: 5px; | |
| } | |
| /* Citation Textbox Content (The actual text) - Light mode */ | |
| #citation-button textarea { | |
| font-size: 1.0rem !important; | |
| font-family: monospace; | |
| /* color: #222; REMOVED - Rely on theme */ | |
| line-height: 1.6; | |
| /* background-color: #fdfdfd; REMOVED - Rely on theme input bg */ | |
| /* border: 1px solid #ccc; REMOVED - Rely on theme border */ | |
| border: 1px solid var(--border-color-accent); | |
| background-color: var(--input-background-fill); | |
| color: var(--input-text-color); | |
| } | |
| """ | |
| # Combined Image CSS (Intro + About) - Adjusted shadow | |
| image_css = """ | |
| /* --- CSS for Image containers (Intro/About) --- */ | |
| #intro-image, #about-image { | |
| background-color: transparent !important; | |
| padding: 0 !important; | |
| border: none !important; | |
| box-shadow: none !important; /* Remove container shadow if any */ | |
| } | |
| /* --- CSS for Image tags themselves (Intro/About) --- */ | |
| #intro-image img, #about-image img { /* Target the actual <img> tag */ | |
| display: block; | |
| height: auto; | |
| margin: 0rem auto 1rem auto; /* Center and add bottom margin */ | |
| border-radius: 8px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Default shadow for light mode */ | |
| } | |
| #intro-image img { | |
| max-width: 500px; | |
| width: 90%; | |
| } | |
| #about-image img { | |
| max-width: 1000px; | |
| width: 90%; | |
| } | |
| /* Optional: Different styles for smaller screens */ | |
| @media (max-width: 768px) { | |
| #intro-image img, #about-image img { | |
| max-width: 100%; | |
| width: 95%; | |
| margin-top: 1.5rem; | |
| } | |
| } | |
| """ | |
| # --- ⭐ NEW: Dark Mode Overrides ⭐ --- | |
| # --- ⭐ NEW: Dark Mode Overrides ⭐ --- | |
| dark_mode_css = """ | |
| @media (prefers-color-scheme: dark) { | |
| body { | |
| /* Ensure theme handles dark bg/text */ | |
| } | |
| #main-leaderboard-title { | |
| /* color: var(--body-text-color); */ /* Ensure title color matches theme */ | |
| border-bottom-color: var(--border-color-primary); /* Ensure border matches theme */ | |
| } | |
| /* Make links slightly brighter if needed */ | |
| #leaderboard-table .model-link { | |
| /* color: var(--link-text-color-dark, #58a6ff); */ /* Optional: specific dark link color */ | |
| } | |
| #leaderboard-table { | |
| border-color: var(--border-color-primary); /* Ensure border matches theme */ | |
| } | |
| /* Ensure table header/cell text contrasts with dark theme background */ | |
| #leaderboard-table th { | |
| /* color: var(--table-header-text-color); */ | |
| } | |
| #leaderboard-table td { | |
| /* color: var(--table-body-text-color); */ | |
| } | |
| /* Dark mode for Markdown Code blocks */ | |
| .markdown-text pre, .markdown-text code { | |
| background-color: #2d333b; /* Dark background */ | |
| color: #c9d1d9; /* Light text */ | |
| border: 1px solid #444c56; /* Darker border */ | |
| } | |
| /* Dark mode for Radio Button selected option */ | |
| .gradio-radio .wrap > label.selected > span { | |
| color: var(--primary-300, #add8e6); /* Lighter blue for dark background */ | |
| font-weight: bold; | |
| } | |
| /* --- START: Citation Dark Mode Fixes --- */ | |
| /* Dark mode for Citation Accordion Header ("📙 Citation") */ | |
| .gradio-accordion button.label-wrap > span.svelte-1w6vloh { | |
| /* Use a lighter, more visible color for dark backgrounds */ | |
| color: var(--neutral-300, #D2B48C) !important; /* Lighter brown/tan - uncommented and made important */ | |
| } | |
| /* Dark mode for Citation Textbox Label ("Copy the following snippet...") */ | |
| #citation-button span.svelte-1gfkn6j { | |
| /* Use a lighter grey for better visibility */ | |
| color: var(--neutral-400, #b0b0b0) !important; /* Lighter grey - uncommented, slightly lighter, and made important */ | |
| } | |
| /* Dark mode for Citation Textbox Content (The actual text) */ | |
| #citation-button textarea { | |
| /* Rely on theme variables first, but provide explicit fallbacks if needed */ | |
| background-color: var(--input-background-fill, #22272e); /* Rely on theme dark vars or fallback dark bg */ | |
| color: var(--input-text-color, #adbac7); /* Rely on theme dark vars or fallback light text */ | |
| border: 1px solid var(--border-color-accent, #444c56); /* Rely on theme dark vars or fallback dark border */ | |
| } | |
| /* --- END: Citation Dark Mode Fixes --- */ | |
| /* Dark mode for Image shadows */ | |
| #intro-image img, #about-image img { | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Darker shadow for dark mode */ | |
| /* Or use a light shadow: */ | |
| /* box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1); */ | |
| } | |
| } | |
| """ | |
| # Combine all CSS parts | |
| final_css = f"{custom_css}\n{base_css}\n{intro_css}\n{markdown_css}\n{tab_css}\n{radio_css}\n{citation_css}\n{image_css}\n{dark_mode_css}" | |
| # --------------------------------------------------------------------------- | |
| # Build the Gradio UI | |
| # --------------------------------------------------------------------------- | |
| # Use a theme that supports dark mode well, like Soft or Default | |
| demo = gr.Blocks(css=final_css, theme=gr.themes.Soft()) # Soft theme is generally good | |
| with demo: | |
| # NEW ⭐: image immediately below the title (Moved from below intro for better flow) | |
| with gr.Row(): | |
| gr.Image( | |
| value="icon.jpg", | |
| show_label=False, | |
| elem_id="intro-image", # Keep ID for CSS targeting | |
| # container=False # Optional: removes Gradio's container styling if needed | |
| ) | |
| # Title | |
| gr.HTML(TITLE) | |
| # Introduction (Markdown wrapped so CSS can target .introduction-wrapper) | |
| with gr.Row(): | |
| gr.Markdown(INTRODUCTION_TEXT, elem_classes="introduction-wrapper") | |
| with gr.Tabs(elem_classes="tab-buttons"): | |
| # ------------------ Leaderboard tab ------------------ | |
| with gr.TabItem("🏅 MLE-Dojo Benchmark", id=0): | |
| with gr.Column(): | |
| # gr.Markdown("## Model Elo Rankings by Category", elem_classes="markdown-text") # Optional sub-header | |
| category_selector = gr.Radio( | |
| choices=CATEGORIES, | |
| label="Select Category:", # The label whose size is increased via CSS | |
| value=DEFAULT_CATEGORY, | |
| interactive=True, | |
| elem_classes="gradio-radio", # Class used for CSS targeting | |
| ) | |
| leaderboard_df_component = gr.Dataframe( | |
| value=update_leaderboard(DEFAULT_CATEGORY), | |
| headers=["Rank", "Model", "Organizer", "License", "Elo Score"], | |
| datatype=["number", "html", "str", "str", "number"], | |
| interactive=False, | |
| row_count=(len(master_df), "fixed"), | |
| col_count=(5, "fixed"), | |
| wrap=True, | |
| elem_id="leaderboard-table", | |
| ) | |
| category_selector.change(update_leaderboard, category_selector, leaderboard_df_component) | |
| # ------------------ About tab ------------------ | |
| with gr.TabItem("📝 About", id=1): | |
| # NEW: wrap in a full-width column | |
| with gr.Column(): | |
| gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text") | |
| # NEW ⭐: image immediately below the text in the About tab | |
| with gr.Row(): | |
| gr.Image( | |
| value="overview.jpg", | |
| show_label=False, | |
| elem_id="about-image", # Keep ID for CSS targeting | |
| # container=False # Optional: removes Gradio's container styling | |
| ) | |
| # Citation accordion (bottom of page) | |
| with gr.Accordion("📙 Citation", open=False, elem_classes="gradio-accordion"): | |
| gr.Textbox( | |
| value=CITATION_BUTTON_TEXT, | |
| label=CITATION_BUTTON_LABEL, | |
| lines=8, | |
| elem_id="citation-button", | |
| show_copy_button=True, | |
| ) | |
| # --------------------------------------------------------------------------- | |
| # Scheduler (optional) & launch | |
| # --------------------------------------------------------------------------- | |
| if __name__ == "__main__": | |
| try: | |
| if callable(restart_space) and REPO_ID != "your/space-id": | |
| scheduler = BackgroundScheduler() | |
| # Schedule restart every 30 minutes (1800 seconds) | |
| scheduler.add_job(restart_space, "interval", seconds=1800) | |
| scheduler.start() | |
| print("Scheduler started for space restart.") | |
| else: | |
| print("Space restart scheduler not started (no REPO_ID or restart function).") | |
| except Exception as exc: | |
| print(f"Scheduler init failed: {exc}") | |
| print("Launching Gradio app…") | |
| demo.launch() |