Add styling

README.md

@@ -1,8 +1,8 @@
 ---
 title: "Evaluating LLMs on Athena: a practical introduction to Slurm"
 emoji: 💻
-colorFrom: indigo
-colorTo: yellow
+colorFrom: purple
+colorTo: blue
 sdk: gradio
 sdk_version: 6.30.0
 python_version: '3.12'

app.py

@@ -139,18 +139,18 @@ def score(samples, benchmark):
 
 
 def tables(results, categories):
-    headers = ["Login", "Submission", "Accuracy (%)"] + [f"{category} (%)" for category in categories]
+    headers = ["Login", "Accuracy (%)"] + [f"{category} (%)" for category in categories] + ["Submission"]
 
     def row(result):
-        return [result["login"], result["submission_id"], round(100 * result["accuracy"], 2)] + [
+        return [result["login"], round(100 * result["accuracy"], 2)] + [
             round(100 * result["by_category"][category]["accuracy"], 2) for category in categories
-        ]
+        ] + [result["submission_id"]]
 
     recent = sorted(results, key=lambda result: result["created_at"], reverse=True)[:RECENT_LIMIT]
     submissions = gr.update(
-        headers=["Submitted (UTC)"] + headers + ["Correct / total"] + list(ERROR_TYPES),
+        headers=headers + ["Submitted (UTC)", "Correct / total"] + list(ERROR_TYPES),
         value=[
-            [result["created_at"]] + row(result) + [f"{result['correct']} / {result['total']}"]
+            row(result) + [result["created_at"][:19].replace("T", " "), f"{result['correct']} / {result['total']}"]
             + [result["error_counts"][error] for error in ERROR_TYPES]
             for result in recent
         ],
@@ -229,28 +229,56 @@ def submit(login, filepath):
         return status + " Results are temporarily unavailable — click Refresh.", gr.skip(), gr.skip()
 
 
-CSS = """
-.gradio-container { max-width: 1280px !important; margin: auto !important; }
-#workshop { width: 100%; margin: auto; }
-#intro, #scoring, #status { text-align: center; }
-#workshop input, #workshop th, #workshop td { text-align: center !important; }
-#workshop .tab-nav { justify-content: center; }
-"""
+CSS = Path(__file__).with_name("styles.css").read_text(encoding="utf-8")
+THEME = gr.themes.Base(
+    primary_hue="teal", secondary_hue="purple", neutral_hue="slate",
+).set(
+    body_background_fill="#f5f5fa", body_background_fill_dark="#19172e",
+    body_text_color="#2b2661", body_text_color_dark="#eeecfa",
+    body_text_color_subdued="#69667e", body_text_color_subdued_dark="#bab5d1",
+    block_background_fill="#ffffff", block_background_fill_dark="#24213d",
+    panel_background_fill="#ffffff", panel_background_fill_dark="#24213d",
+    block_border_color="#e4e2ee", block_border_color_dark="#403b5e",
+    input_background_fill="#fafafe", input_background_fill_dark="#19172e",
+    input_border_color="#d8d5e5", input_border_color_dark="#504969",
+    input_border_color_focus="#17bcaf", input_border_color_focus_dark="#17bcaf",
+    button_primary_background_fill="#17bcaf", button_primary_background_fill_dark="#17bcaf",
+    button_primary_background_fill_hover="#38cec2", button_primary_background_fill_hover_dark="#38cec2",
+    button_primary_text_color="#172943", button_primary_text_color_dark="#172943",
+    button_primary_text_color_hover="#172943", button_primary_text_color_hover_dark="#172943",
+    button_primary_border_color="#17bcaf", button_primary_border_color_dark="#17bcaf",
+    button_secondary_background_fill="#f3f0f8", button_secondary_background_fill_dark="#352c4e",
+    button_secondary_text_color="#59358c", button_secondary_text_color_dark="#e0cfef",
+    table_even_background_fill="#f8f7fc", table_even_background_fill_dark="#2b2746",
+    table_odd_background_fill="#ffffff", table_odd_background_fill_dark="#24213d",
+    table_border_color="#e4e2ee", table_border_color_dark="#403b5e",
+    table_row_focus="#e4f7f4", table_row_focus_dark="#234340",
+    link_text_color="#59358c", link_text_color_dark="#70dfd5",
+)
 
 with gr.Blocks(title="Evaluating LLMs on Athena: a practical introduction to Slurm") as demo:
     with gr.Column(elem_id="workshop"):
-        gr.Markdown("""# Evaluating LLMs on Athena: a practical introduction to Slurm
-Enter your tutorial login and upload **samples.json** from a full benchmark evaluation
-(e.g. `$SCRATCH/pllum-slurm-lab/evaluation/samples.json`). Click **Submit** to score your run.
-**Leaderboard** shows the best run per login; **Submissions** shows the 50 latest runs.
-All accuracy values are percentages. For equal scores, the earliest run wins.
+        gr.HTML("""<header class="workshop-hero">
+            <div class="hero-shapes" aria-hidden="true"><i></i><i></i><i></i></div>
+            <p class="eyebrow">MLinPL Tutorial · PLLuM</p>
+            <h1>Evaluating LLMs on Athena:<span>a practical introduction to Slurm</span></h1>
+            <p class="hero-note">Run an experiment. Evaluate your model. Compare the results.</p>
+        </header>""", elem_id="hero")
+        with gr.Column(elem_id="submit-panel"):
+            gr.Markdown("""## Submit your evaluation
+Enter your assigned login and upload **samples.json** from a full benchmark evaluation.
+
+`$SCRATCH/pllum-slurm-lab/evaluation/samples.json`
 """, elem_id="intro")
-        with gr.Row():
-            login = gr.Textbox(label="Login", placeholder="tutorial001", info="tutorial001–tutorial033")
-            upload = gr.File(label="samples.json", file_types=[".json"], type="filepath")
-        send = gr.Button("Submit", variant="primary")
-        status = gr.Markdown(elem_id="status")
-        with gr.Accordion("How scoring works", open=False):
+            with gr.Row(elem_id="upload-fields"):
+                login = gr.Textbox(label="Login", placeholder="tutorial001", info="tutorial001–tutorial033",
+                                   elem_id="login-field", scale=1, min_width=220)
+                upload = gr.File(label="samples.json", file_types=[".json"], type="filepath",
+                                 elem_id="upload-field", scale=2, min_width=280, height=160)
+            with gr.Row(elem_id="submit-actions"):
+                send = gr.Button("Submit", variant="primary", elem_id="submit-button", scale=0, min_width=240)
+            status = gr.Markdown(elem_id="status")
+        with gr.Accordion("How scoring works", open=False, elem_id="scoring-accordion"):
             gr.Markdown("""Upload the full benchmark. A prediction is correct if it matches the reference within **1e-6**
 and has no evaluator error. **Accuracy = correct / all questions**, overall and per category.
 
@@ -271,16 +299,22 @@ over the prediction. Error columns show **counts of failed questions**, so corre
 The saved `results.json` includes per-question outcomes, reference answers and absolute differences.
 Both tabs show results for the current benchmark only.
 """, elem_id="scoring")
-        with gr.Tabs():
-            with gr.Tab("Leaderboard"):
-                leaderboard_table = gr.Dataframe(interactive=False, label="Best result per login")
-            with gr.Tab("Submissions"):
-                submissions_table = gr.Dataframe(interactive=False, label="Latest submissions")
-        refresh = gr.Button("Refresh")
+        with gr.Column(elem_id="results-panel"):
+            with gr.Tabs(elem_id="results-tabs"):
+                with gr.Tab("Leaderboard"):
+                    leaderboard_table = gr.Dataframe(interactive=False, label="Best result per login",
+                                                     elem_id="leaderboard-table", max_height=420)
+                with gr.Tab("Submissions"):
+                    submissions_table = gr.Dataframe(interactive=False, label="Latest submissions",
+                                                     elem_id="submissions-table", max_height=420)
+            gr.Markdown("Accuracy is shown in %. Equal scores are ranked by earliest submission. "
+                        "Submissions shows the 50 latest runs.", elem_id="results-note")
+            with gr.Row(elem_id="refresh-actions"):
+                refresh = gr.Button("Refresh", elem_id="refresh-button", scale=0, min_width=160)
         outputs = [submissions_table, leaderboard_table]
         send.click(submit, inputs=[login, upload], outputs=[status, *outputs], concurrency_limit=1)
         refresh.click(refresh_tables, outputs=outputs)
         demo.load(refresh_tables, outputs=outputs)
 
 if __name__ == "__main__":
-    demo.queue().launch(css=CSS)
+    demo.queue().launch(theme=THEME, css=CSS)

styles.css

@@ -0,0 +1,75 @@
+/* Palette and quarter-circle motif from MLinPL Tutorial.pdf. */
+body { background: var(--body-background-fill); }
+.gradio-container { width: 100% !important; min-width: 0 !important; box-sizing: border-box; max-width: 1200px !important; margin: auto !important; padding: 32px 24px !important; }
+.gradio-container .main { width: 100%; min-width: 0; padding: 0 !important; }
+.gradio-container .main > .wrap, .gradio-container main { min-width: 0; width: 100%; }
+#workshop { width: 100%; gap: 22px; min-width: 0 !important; }
+#hero { padding: 0; border: 0; background: transparent; }
+.workshop-hero { position: relative; overflow: hidden; isolation: isolate; padding: 46px 90px; border-radius: 24px; background: #2b2661; color: white; text-align: center; }
+.workshop-hero .eyebrow { margin: 0 0 20px; color: #70dfd5; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
+.workshop-hero h1 { max-width: 820px; margin: auto; color: white; font-size: clamp(27px, 3.3vw, 43px); line-height: 1.2; font-weight: 700; letter-spacing: -.035em; text-wrap: balance; }
+.workshop-hero h1 span { display: block; margin-top: 10px; color: #ded3ef; font-size: .65em; font-weight: 400; letter-spacing: -.015em; }
+.workshop-hero .hero-note { margin: 24px 0 0; color: #c9c5e2; font-size: 14px; }
+.hero-shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
+.hero-shapes i { position: absolute; width: 80px; height: 80px; }
+.hero-shapes i:nth-child(1) { top: 0; right: 0; border-radius: 0 0 100% 0; background: #8a389e; }
+.hero-shapes i:nth-child(2) { top: 80px; right: 80px; border-radius: 0 0 100% 0; background: #17bcaf; }
+.hero-shapes i:nth-child(3) { bottom: 0; left: 0; border-radius: 0 100% 0 0; background: #59358c; }
+#submit-panel, #results-panel { padding: 26px; border: 1px solid var(--block-border-color); border-radius: 20px; background: var(--block-background-fill); box-shadow: 0 8px 28px #2b266108; min-width: 0; }
+#intro, #status { text-align: center; }
+#intro h2 { margin: 0 0 10px; font-size: 23px; letter-spacing: -.025em; }
+#intro p { margin: 8px auto; max-width: 760px; color: var(--body-text-color-subdued); line-height: 1.7; }
+#intro code { font-size: 12px; overflow-wrap: anywhere; }
+#upload-fields { gap: 18px; margin-top: 12px; align-items: center; }
+#login-field, #upload-field { border-radius: 14px; }
+#login-field textarea { text-align: center; min-height: 50px; }
+#upload-field { border-style: dashed; border-color: #17bcaf80; }
+#upload-field .upload-container { min-height: 0 !important; padding: 24px !important; }
+#upload-field:hover { border-color: #17bcaf; }
+#submit-actions, #refresh-actions { justify-content: center; }
+#submit-button, #refresh-button { min-height: 46px; border-radius: 12px; font-weight: 600; }
+#submit-button { box-shadow: 0 4px 14px #17bcaf25; }
+#submit-button:hover { box-shadow: 0 6px 18px #17bcaf40; }
+#workshop button:focus-visible, #workshop textarea:focus-visible { outline: 3px solid #17bcaf; outline-offset: 3px; }
+#status:empty { display: none; }
+#status p { overflow-wrap: anywhere; }
+#scoring-accordion { border-radius: 14px; }
+#scoring { text-align: center; }
+#scoring table { text-align: left; font-size: 13px; }
+#scoring code { white-space: normal; overflow-wrap: anywhere; }
+#results-tabs [role="tablist"] { justify-content: center; gap: 8px; border-bottom: 1px solid var(--block-border-color); padding-bottom: 12px; }
+#results-tabs [role="tablist"] button { min-height: 44px; border: 0; border-radius: 10px; padding: 10px 24px; color: var(--body-text-color-subdued); font-weight: 600; }
+#results-tabs [role="tablist"] button.selected { background: #8a389e; color: white; }
+#results-tabs [role="tablist"] button:hover:not(.selected) { background: #8a389e12; }
+#results-tabs { min-width: 0; width: 100%; }
+#results-panel .column { min-width: 0 !important; }
+#results-panel .tabitem { padding: 20px 0 0; border: 0; min-width: 0; }
+#results-panel .block { min-width: 0 !important; }
+#leaderboard-table, #submissions-table { max-width: 100%; border-radius: 12px; }
+#results-panel th, #results-panel td { text-align: center !important; font-variant-numeric: tabular-nums; }
+#results-panel th { font-weight: 600; }
+#results-panel td { font-size: 13px; }
+#results-panel .cell-wrap { text-align: center; font-variant-numeric: tabular-nums; }
+#results-note { text-align: center; color: var(--body-text-color-subdued); font-size: 12px; }
+#refresh-actions { margin-top: 8px; }
+@media (max-width: 640px) {
+    .gradio-container { padding: 14px 12px !important; }
+#workshop { width: 100%; gap: 14px; }
+    .workshop-hero { padding: 36px 24px; border-radius: 18px; }
+    .workshop-hero .eyebrow { font-size: 10px; letter-spacing: .12em; }
+    .workshop-hero .hero-note { font-size: 12px; }
+    .hero-shapes i { width: 40px; height: 40px; }
+    .hero-shapes i:nth-child(2) { top: 40px; right: 40px; }
+    #submit-panel, #results-panel { padding: 18px 14px; border-radius: 16px; }
+    #intro h2 { font-size: 20px; }
+    #intro p { font-size: 14px; }
+    #upload-fields { flex-direction: column; gap: 12px; }
+    #upload-fields > * { width: 100%; min-width: 0 !important; }
+    #submit-button, #refresh-button { width: 100%; flex-grow: 1; }
+    #results-tabs [role="tablist"] { gap: 4px; }
+    #results-tabs [role="tablist"] button { min-height: 44px; padding: 10px 18px; font-size: 14px; }
+    #scoring { overflow-x: auto; }
+}
+@media (prefers-reduced-motion: reduce) {
+    #workshop * { scroll-behavior: auto !important; transition: none !important; }
+}