app.py

# -*- 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.
"""

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 = "Please cite us if you use this benchmark…"
    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."

# ---------------------------------------------------------------------------
# Leaderboard data (static demo data for now)
# ---------------------------------------------------------------------------

data = [
    {
        "model_name": "gpt-4o-mini",
        "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",
        "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",
        "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",
        "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",
        "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",
        "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
# ---------------------------------------------------------------------------

# --- CLEAN introduction typography override (this replaces the buggy version) ---
intro_css = """
/* --------------------------------------------------
   INTRODUCTION BLOCK  (font, size, alignment)
   -------------------------------------------------- */
.introduction-wrapper, .introduction-section {
    font-family: Georgia, serif;
    font-size: 1.4rem !important;  /* ≈22–23 px */
    line-height: 1.75;
    color: #344054;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 3rem auto;
}
.introduction-wrapper p, .introduction-section p {
    margin-bottom: 1rem;
}
@media (max-width: 768px) {
    .introduction-wrapper, .introduction-section {
        font-size: 1.2rem !important;
    }
}
"""

# --- Existing CSS (base layout, table, etc.) ---
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;
    line-height: 1.6;
    background-color: #f8f9fa;
    color: #343a40;
}

.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;
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #dee2e6;
}

/* Leaderboard table (only key parts kept) */
#leaderboard-table th {
    background-color: #e9ecef;
    font-size: 1.3em;
    font-weight: 500;
}
#leaderboard-table td {
    font-size: 1.1em;
}
#leaderboard-table .model-link {
    color: #0056b3;
    font-weight: 500;
    text-decoration: none;
}
#leaderboard-table .model-link:hover {
    text-decoration: underline;
}
"""

# Concatenate user‑defined, base and intro CSS (order = priority)
final_css = f"{custom_css}\n{base_css}\n{intro_css}"

# ---------------------------------------------------------------------------
# Build the Gradio UI
# ---------------------------------------------------------------------------

demo = gr.Blocks(css=final_css, theme=gr.themes.Soft())

with demo:
    # 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")

                category_selector = gr.Radio(
                    choices=CATEGORIES,
                    label="Select Category:",
                    value=DEFAULT_CATEGORY,
                    interactive=True,
                    elem_classes="gradio-radio",
                )

                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):
            gr.Markdown(LLM_BENCHMARKS_TEXT, elem_classes="markdown-text")

    # 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()
            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()