Update app.py

app.py

@@ -8,6 +8,8 @@ Changes made in this version
    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
@@ -25,7 +27,7 @@ try:
         EVALUATION_QUEUE_TEXT,  # still referenced in commented‑out submit tab
         INTRODUCTION_TEXT,
         LLM_BENCHMARKS_TEXT,
-        TITLE,            # contains <h1 id="main-leaderboard-title">
+        TITLE,          # contains <h1 id="main-leaderboard-title">
     )
 
     try:
@@ -213,19 +215,19 @@ def restart_space():
     # Insert actual restart logic if needed.
 
 # ---------------------------------------------------------------------------
-# CSS: project CSS (custom_css) + enhanced overrides
+# CSS: project CSS (custom_css) + enhanced overrides + DARK MODE SUPPORT
 # ---------------------------------------------------------------------------
 
-# --- CLEAN introduction typography override (this replaces the buggy version) ---
+# --- CLEAN introduction typography override ---
 intro_css = """
 /* --------------------------------------------------
    INTRODUCTION BLOCK  (font, size, alignment)
    -------------------------------------------------- */
 .introduction-wrapper, .introduction-section {
-    font-family: Arial;
+    font-family: Arial, sans-serif; /* Added sans-serif fallback */
     font-size: 1.3rem !important;  /* ≈22–23 px */
     line-height: 1.75;
-    color: #344054;
+    /* color: #344054; */ /* Rely on theme for base text color */
     text-align: center;
     max-width: 1000px;
     margin: 0 auto 1rem auto;
@@ -233,24 +235,27 @@ intro_css = """
 .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;
+        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;
+    font-size: 1.3em; /* Slightly increased base size */
     line-height: 1.6;
-    background-color: #f8f9fa;
-    color: #343a40;
+    /* background-color: #f8f9fa; REMOVED - Rely on theme */
+    /* color: #343a40; REMOVED - Rely on theme */
 }
 
 .gradio-container {
@@ -262,24 +267,26 @@ body {
 #main-leaderboard-title {
     font-size: 3.2em;
     font-weight: 700;
-    color: #212529;
+    /* color: #212529; REMOVED - Rely on theme */
     text-align: center;
     margin-bottom: 1.5rem;
     padding-bottom: 0.5rem;
-    border-bottom: 2px solid #dee2e6;
+    border-bottom: 2px solid var(--border-color-primary); /* Use Gradio variable */
 }
 
-/* Leaderboard table (only key parts kept) */
+/* Leaderboard table */
 #leaderboard-table th {
-    background-color: #e9ecef;
+    /* 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: #0056b3;
+    color: var(--link-text-color, #0056b3); /* Use theme link color or fallback */
     font-weight: 500;
     text-decoration: none;
 }
@@ -289,21 +296,14 @@ body {
 
 #leaderboard-table {
     border-radius: 0.75rem;
-    overflow: hidden;          
-    border: 1px solid #dee2e6;   
+    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;            
-}
-
-#intro-image img {
-    max-width: 800px;
-    height: auto;
-    display: block;
-    margin: 0 auto;     
+    padding: 0.9rem 1.2rem;
+    line-height: 1.4;
 }
 """
 
@@ -313,37 +313,37 @@ markdown_css = """
    =============================== */
 .markdown-text, .markdown-text p {
     font-family: Arial, Helvetica, sans-serif;
-    font-size: 1.1rem;    
-    line-height: 1.75;      
-    color: #344054;
+    font-size: 1.1rem;
+    line-height: 1.75;
+    /* color: #344054; REMOVED - Rely on theme */
     margin-bottom: 0.9rem;
 }
 
-
 .markdown-text h1,
 .markdown-text h2,
 .markdown-text h3 {
-    color: #212529;
+    /* color: #212529; REMOVED - Rely on theme */
     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 h1 { font-size: 1.7rem; }
+.markdown-text h2 { font-size: 1.5rem; }
+.markdown-text h3 { font-size: 1.3rem; }
 
 .markdown-text ul,
 .markdown-text ol {
-    padding-left: 1.6rem;   
+    padding-left: 1.6rem;
     margin-bottom: 1.1rem;
 }
 
-
+/* Code blocks - light mode */
 .markdown-text pre, .markdown-text code {
     font-family: "Source Code Pro", "Menlo", monospace;
-    background-color: #f1f3f5;
+    background-color: #f1f3f5; /* Light background for light mode */
+    color: #333; /* Dark text for light mode */
     border-radius: 0.4rem;
+    border: 1px solid #dee2e6; /* Light border */
 }
 .markdown-text pre {
     padding: 1rem 1.2rem;
@@ -354,11 +354,8 @@ markdown_css = """
     font-size: 0.95rem;
 }
 
-
 @media (max-width: 768px) {
-    .markdown-text, .markdown-text p {
-        font-size: 1.1rem;   /* ≈18 px */
-    }
+    .markdown-text, .markdown-text p { font-size: 1.1rem; }
     .markdown-text h1 { font-size: 1.6rem; }
     .markdown-text h2 { font-size: 1.4rem; }
     .markdown-text h3 { font-size: 1.25rem; }
@@ -368,18 +365,18 @@ markdown_css = """
 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 */
+    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; /* Example: Make selected tab bold */
-    color: #0056b3;   /* Example: Different color for 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 */
 }
 """
 
@@ -388,211 +385,65 @@ 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 */
+.gradio-radio > label span { /* Targets the main label text */
+    font-size: 1.6rem !important;
     font-weight: 600;
-    color: #2a6099;
+    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; /* <<< DECREASED from 1.2rem */
+.gradio-radio .wrap > label > span { /* Targets the individual option text */
+    font-size: 1.0rem !important;
     font-family: Verdana, Geneva, sans-serif;
-    color: #444;
+    /* color: #444; REMOVED - Rely on theme for base option color */
     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: normal;
-     color: #87CEEB;
+/* 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 */
 }
-
-/* 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 */
+    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; /* 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 container in the About Tab --- */
-#about-image {
-    background-color: transparent !important; 
-    padding: 0 !important; 
-    border: none !important; 
-}
-
-/* --- CSS for the Image tag itself in the About Tab --- */
-#about-image img { /* Target the actual <img> tag */
-    display: block;
-    max-width: 1000px;
-    width: 90%;
-    height: auto;
-    margin: 0rem auto 0rem auto; /* Adjusted margin slightly */
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-/* Optional: Different styles for smaller screens */
-@media (max-width: 768px) {
-    #about-image img {
-        max-width: 100%;
-        width: 95%;
-        margin-top: 1.5rem;
-    }
-}
-"""
-
-
-intro_image_css = """
-/* --- CSS for the Image container in the About Tab --- */
-#intro-image {
-    background-color: transparent !important; 
-    padding: 0 !important; 
-    border: none !important; 
-}
-
-/* --- CSS for the Image tag itself in the About Tab --- */
-#intro-image img { /* Target the actual <img> tag */
+    font-size: 0.95rem !important;
+    /* color: #666; REMOVED - Rely on theme secondary text color */
+    color: var(--neutral-500, #666);
+    font-style: normal;
     display: block;
-    max-width: 800px;
-    width: 90%;
-    height: auto;
-    margin: 0rem auto 0rem auto; /* Adjusted margin slightly */
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    margin-bottom: 5px;
 }
 
-/* Optional: Different styles for smaller screens */
-@media (max-width: 768px) {
-    #intro-image img {
-        max-width: 100%;
-        width: 95%;
-        margin-top: 1.5rem;
-    }
+/* 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);
 }
 """
-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}\n{intro_image_css}"
 
-# ---------------------------------------------------------------------------
-# Build the Gradio UI
-# ---------------------------------------------------------------------------
-
-demo = gr.Blocks(css=final_css, theme=gr.themes.Soft())
-
-with demo:
-    # NEW ⭐: image immediately below the introduction
-    with gr.Row():
-        gr.Image(
-            value="icon_long.jpg",  
-            show_label=False,                
-            elem_id="intro-image",            
-        )
-    # 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():
-                # --- 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="about-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()
+# Combined Image CSS (Intro + About) - Adjusted shadow
+image_css = """
+/* --- CSS for Image