Update app.py

app.py

@@ -446,4 +446,208 @@ citation_css = """
 
 # Combined Image CSS (Intro + About) - Adjusted shadow
 image_css = """
-/* --- CSS for Image
+/* --- 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: 800px;
+    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 ⭐ ---
+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;
+    }
+
+    /* Dark mode for Citation Textbox */
+    #citation-button textarea {
+        /* background-color: #22272e; */ /* Darker input bg */
+        /* color: #adbac7; */ /* Lighter input text */
+        /* border-color: #444c56; */ /* Darker border */
+        background-color: var(--input-background-fill); /* Rely on theme dark vars */
+        color: var(--input-text-color);
+        border: 1px solid var(--border-color-accent);
+    }
+    /* Ensure Citation Accordion Header text is visible */
+     .gradio-accordion button.label-wrap > span.svelte-1w6vloh {
+         /* color: var(--neutral-300, #D2B48C); */ /* Lighter brown/tan */
+     }
+      /* Ensure Citation Textbox Label is visible */
+     #citation-button span.svelte-1gfkn6j {
+        /* color: var(--neutral-400, #999); */ /* Lighter grey */
+     }
+
+
+    /* 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_long.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()