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.
4. Adjusted font sizes for Radio button labels per user request.
"""

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: Arial;
    font-size: 1.3rem !important;  /* ≈22–23 px */
    line-height: 1.75;
    color: #344054;
    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;
}
@media (max-width: 768px) {
    .introduction-wrapper, .introduction-section {
        font-size: 1.3rem !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;
}

#leaderboard-table {
    border-radius: 0.75rem;
    overflow: hidden;          
    border: 1px solid #dee2e6;   
}

#leaderboard-table th,
#leaderboard-table td {
    padding: 0.9rem 1.2rem;      
    line-height: 1.4;            
}

#intro-image img {
    max-width: 800px;
    height: auto;
    display: block;
    margin: 0 auto;     
}
"""

markdown_css = """
/* ===============================
   About  Tab – Markdown Typography
   =============================== */
.markdown-text, .markdown-text p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;    
    line-height: 1.75;      
    color: #344054;
    margin-bottom: 0.9rem;
}


.markdown-text h1,
.markdown-text h2,
.markdown-text h3 {
    color: #212529;
    font-weight: 600;
    line-height: 1.3;
    margin: 1.4rem 0 0.8rem 0;
}
.markdown-text h1 { font-size: 1.7rem; }   /* ≈32 px */
.markdown-text h2 { font-size: 1.5rem; }   /* ≈26 px */
.markdown-text h3 { font-size: 1.3rem; }   /* ≈23 px */


.markdown-text ul,
.markdown-text ol {
    padding-left: 1.6rem;   
    margin-bottom: 1.1rem;
}


.markdown-text pre, .markdown-text code {
    font-family: "Source Code Pro", "Menlo", monospace;
    background-color: #f1f3f5;
    border-radius: 0.4rem;
}
.markdown-text pre {
    padding: 1rem 1.2rem;
    overflow-x: auto;
}
.markdown-text code {
    padding: 0.15rem 0.4rem;
    font-size: 0.95rem;
}


@media (max-width: 768px) {
    .markdown-text, .markdown-text p {
        font-size: 1.1rem;   /* ≈18 px */
    }
    .markdown-text h1 { font-size: 1.6rem; }
    .markdown-text h2 { font-size: 1.4rem; }
    .markdown-text h3 { font-size: 1.25rem; }
}
"""

tab_css = """
/* Tabs ▸ target ALL tab buttons using the actual structure */
.tabs .tab-container > button {
    /* Add your desired styles here */
    font-size: 1.6rem !important;   /* Example: Adjust size */
    font-weight: 500;              /* Example: Adjust weight */
    font-style: normal;            /* Example: Set style */
    color: #333;                   /* Example: Set color */
    /* Add any other font/format properties */
}

/* Optional: Style for the selected tab button if needed */
.tabs .tab-container > button.selected {
    font-weight: 700; /* Example: Make selected tab bold */
    color: #0056b3;   /* Example: Different color for selected */
}
"""

# --- MODIFIED CSS FOR RADIO BUTTONS ---
radio_css = """
/* --- Radio Button Styling --- */

/* Style for the main label ("Select Category:") */
.gradio-radio > label span { /* This targets the "Select Category:" part */
    font-size: 1.6rem !important; /* <<< INCREASED from 1.2rem */
    font-weight: 600;
    color: #2a6099;
    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; /* <<< DECREASED from 1.2rem */
    font-family: Verdana, Geneva, sans-serif;
    color: #444;
    font-weight: normal;
    font-style: normal;
    padding-left: 6px;
}

/* Optional: Style for the selected option's text */
.gradio-radio .wrap > label.selected > span { /* <--- Style for selected option */
     font-weight: bold;
     color: #111;
}

/* Optional: Style the container for options if needed */
/* .gradio-radio .wrap { } */ /* Previously suggested .gr-form, but .wrap is correct */

"""

citation_css = """
/* Accordion Header Text ("📙 Citation") */
.gradio-accordion button.label-wrap > span.svelte-1w6vloh {
    font-size: 1.4rem !important;    /* Adjust size */
    font-weight: 600;                /* Adjust weight */
    color: #8B4513;                  /* Adjust color (SaddleBrown example) */
    font-family: Georgia, serif;     /* Adjust font */
}

/* Citation Textbox Label ("Copy the following snippet...") */
#citation-button span.svelte-1gfkn6j {
    font-size: 0.95rem !important; /* Adjust size */
    color: #666;                   /* Adjust color */
    font-style: normal;            /* Adjust style (e.g., italic) */
    display: block;                /* Make it a block to add margin */
    margin-bottom: 5px;            /* Add space below label */
}

/* Citation Textbox Content (The actual text) */
#citation-button textarea {
    font-size: 1.0rem !important;  /* Adjust size */
    font-family: monospace;        /* Adjust font (monospace often used for citations) */
    color: #222;                   /* Adjust text color */
    line-height: 1.6;              /* Adjust line spacing */
    background-color: #fdfdfd;     /* Adjust background color */
    border: 1px solid #ccc;        /* Adjust border */
}
"""

about_image_css = """
/* --- CSS for the Image in the About Tab --- */
#intro-image img { /* Target the actual <img> tag inside the Gradio component */
    display: block;         /* Treat the image as a block element */
    max-width: 800px;       /* Set a maximum width (adjust as needed) */
    width: 90%;             /* Make width responsive (e.g., 90% of its container) */
    height: auto;           /* Maintain aspect ratio */
    margin-top: 2rem;       /* Add space above the image */
    margin-bottom: 1rem;    /* Add space below the image */
    margin-left: auto;      /* Center the image horizontally */
    margin-right: auto;     /* Center the image horizontally */
    border-radius: 8px;     /* Optional: add rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow */
}

/* Optional: Different styles for smaller screens */
@media (max-width: 768px) {
    #intro-image img {
        max-width: 100%; /* Allow it to use full width on small screens */
        width: 95%;      /* Adjust percentage if needed */
        margin-top: 1.5rem;
    }
}
"""

final_css = f"{custom_css}\n{base_css}\n{intro_css}\n{markdown_css}\n{tab_css}\n{radio_css}\n{citation_css}\n{about_image_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")

    
    # NEW ⭐: image immediately below the introduction
    # with gr.Row():
    #     gr.Image(
    #         value="overview.jpg",  
    #         show_label=False,                
    #         elem_id="intro-image",            
    #     )

    with gr.Tabs(elem_classes="tab-buttons"):
        # ------------------ Leaderboard tab ------------------
        with gr.TabItem("🏅 MLE-Dojo Benchmark", id=0):
            with gr.Column():
                # --- This is the title you mentioned. "虚拟" is not present here. ---
                # gr.Markdown("## Model Elo Rankings by Category", elem_classes="markdown-text")

                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 introduction
        with gr.Row():
            gr.Image(
                value="overview.jpg",  
                show_label=False,                
                elem_id="intro-image",            
            )

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