Replace broken Gradio Lite runtime with static leaderboard

README.md

@@ -15,12 +15,12 @@ tags:
 
 # Sphragis Leaderboard
 
-A serverless Gradio-Lite leaderboard for the nine Sphragis Ancient Greek
+A serverless HTML leaderboard for the nine Sphragis Ancient Greek
 authorship-attribution tasks. It runs entirely in the visitor's browser and
-does not require CPU or GPU Space hardware.
+does not require Python, Pyodide, CPU, or GPU Space hardware.
 
-Scores are embedded as `results.csv` in `index.html` and are test macro-F1
-percentages. Add one row per reproducible model configuration. If validation
+Scores are embedded in `index.html` and are test macro-F1 percentages. Add one
+row per reproducible model configuration. If validation
 produces statistically or numerically tied candidates, report every tied test
 result (or a range); never select a winner using the test split.
 

index.html

@@ -5,90 +5,206 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Sphragis benchmark leaderboard</title>
     <meta name="description" content="Leaderboard for the Sphragis Ancient Greek authorship-attribution benchmark." />
-    <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
     <style>
-      html, body { margin: 0; min-height: 100%; }
-      gradio-lite { display: block; min-height: 100vh; }
+      :root {
+        color-scheme: light dark;
+        --background: #ffffff;
+        --panel: #ffffff;
+        --text: #171717;
+        --muted: #656565;
+        --border: #e5e7eb;
+        --header: #f7f7f8;
+        --input: #ffffff;
+        --focus: #2563eb;
+        --shadow: 0 1px 2px rgb(0 0 0 / 5%);
+      }
+
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --background: #0b0f19;
+          --panel: #111827;
+          --text: #f3f4f6;
+          --muted: #a1a1aa;
+          --border: #303744;
+          --header: #1b2432;
+          --input: #111827;
+          --focus: #60a5fa;
+          --shadow: none;
+        }
+      }
+
+      * { box-sizing: border-box; }
+
+      body {
+        margin: 0;
+        background: var(--background);
+        color: var(--text);
+        font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      }
+
+      main {
+        width: min(100% - 32px, 1440px);
+        margin: 0 auto;
+        padding: 40px 0 64px;
+      }
+
+      h1 { margin: 0 0 14px; font-size: clamp(1.8rem, 4vw, 2.35rem); line-height: 1.2; }
+      h2 { margin: 34px 0 12px; font-size: 1.2rem; }
+      p { max-width: 880px; margin: 10px 0; }
+      a { color: var(--focus); }
+      code { font-size: 0.92em; }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        margin: 28px 0 10px;
+      }
+
+      label {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      }
+
+      input[type="search"] {
+        width: min(100%, 320px);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        background: var(--input);
+        color: var(--text);
+        padding: 9px 12px;
+        font: inherit;
+        box-shadow: var(--shadow);
+      }
+
+      input[type="search"]:focus {
+        outline: 2px solid var(--focus);
+        outline-offset: 1px;
+      }
+
+      .table-wrap {
+        overflow-x: auto;
+        border: 1px solid var(--border);
+        border-radius: 9px;
+        background: var(--panel);
+        box-shadow: var(--shadow);
+      }
+
+      table { width: 100%; border-collapse: collapse; white-space: nowrap; }
+      th, td { padding: 11px 13px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: left; }
+      th:last-child, td:last-child { border-right: 0; }
+      tbody tr:last-child td { border-bottom: 0; }
+      th { background: var(--header); font-size: 0.86rem; font-weight: 650; }
+      td { font-size: 0.9rem; }
+      tbody tr:hover { background: color-mix(in srgb, var(--focus) 5%, transparent); }
+      .empty { display: none; padding: 18px; color: var(--muted); text-align: center; }
+      .resource-list { margin: 8px 0; padding-left: 22px; }
     </style>
   </head>
   <body>
-    <gradio-lite>
-      <gradio-file name="app.py" entrypoint>
-import csv
-
-import gradio as gr
-
-
-def load_results():
-    with open("results.csv", encoding="utf-8", newline="") as source:
-        rows = [
-            row
-            for row in csv.reader(source)
-            if any(cell.strip() for cell in row)
-        ]
-    if len(rows) &lt; 2:
-        raise ValueError("No leaderboard rows found in results.csv")
-    return rows[0], rows[1:]
-
-
-INTRODUCTION = """
-# Sphragis benchmark leaderboard
-
-Author attribution for Ancient Greek prose, sentence-aligned verse, and
-metrical lines. Every score is **test macro-F1 (%)**. The suffix is the number
-of sentences—or lines for `verse_metre`—in each evaluation example.
-
-Models are compared on the fixed, provenance-preserving Sphragis splits.
-Validation selects checkpoints and hyperparameters; test results are reported
-without using test performance to break validation ties.
-"""
-
-METHODOLOGY = """
-### Notes
-
-† Four GreBerta heads tied at validation macro-F1 1.0000 for
-`verse_sentence_100`. Their test macro-F1 scores were **92.82, 100.00, 100.00,
-and 92.51**, so the table reports the full **92.51–100.00** range rather than
-choosing the best test result.
-
-‡ Four GreBerta heads tied at validation macro-F1 1.0000 for
-`verse_metre_100`; all four obtained test macro-F1 **96.10**.
-
-The variable-chunk GreBerta `_100` repair experiment is marked exploratory
-because its design followed inspection of an earlier `_100` test failure.
-
-### Benchmark resources
-
-- [Dataset](https://huggingface.co/datasets/Urdatorn/sphragis)
-- [Model implementations](https://github.com/Urdatorn/sphragis_models)
-"""
-
-
-headers, values = load_results()
-
-with gr.Blocks(title="Sphragis Leaderboard") as demo:
-    gr.Markdown(INTRODUCTION)
-    gr.Dataframe(
-        headers=headers,
-        value=values,
-        datatype=["str"] * len(headers),
-        interactive=False,
-        show_search="filter",
-        show_row_numbers=False,
-        wrap=True,
-        elem_id="sphragis-leaderboard",
-    )
-    gr.Markdown(METHODOLOGY)
-
-
-demo.launch()
-      </gradio-file>
-
-      <gradio-file name="results.csv">
-Model,Representation / classifier,Prose 1,Prose 10,Prose 100,Verse sentence 1,Verse sentence 10,Verse sentence 100,Verse metre 1,Verse metre 10,Verse metre 100,Status
-bowphs/GreBerta,"Frozen mean-pooled embeddings + MLP",83.50,96.36,97.69,74.63,80.77,92.51–100.00†,78.85,92.52,96.10‡,"Verse 100 exploratory"
-      </gradio-file>
-    </gradio-lite>
+    <main>
+      <h1>Sphragis benchmark leaderboard</h1>
+      <p>
+        Author attribution for Ancient Greek prose, sentence-aligned verse, and
+        metrical lines. Every score is <strong>test macro-F1 (%)</strong>. The suffix is the
+        number of sentences—or lines for <code>verse_metre</code>—in each evaluation example.
+      </p>
+      <p>
+        Models are compared on the fixed, provenance-preserving Sphragis splits.
+        Validation selects checkpoints and hyperparameters; test results are reported
+        without using test performance to break validation ties.
+      </p>
+
+      <div class="toolbar">
+        <label for="table-search">Filter leaderboard</label>
+        <input id="table-search" type="search" placeholder="Filter leaderboard…" autocomplete="off" />
+      </div>
+
+      <div class="table-wrap">
+        <table id="leaderboard">
+          <thead>
+            <tr>
+              <th>Model</th>
+              <th>Representation / classifier</th>
+              <th>Prose 1</th>
+              <th>Prose 10</th>
+              <th>Prose 100</th>
+              <th>Verse sentence 1</th>
+              <th>Verse sentence 10</th>
+              <th>Verse sentence 100</th>
+              <th>Verse metre 1</th>
+              <th>Verse metre 10</th>
+              <th>Verse metre 100</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>bowphs/GreBerta</td>
+              <td>Frozen mean-pooled embeddings + MLP</td>
+              <td>83.50</td>
+              <td>96.36</td>
+              <td>97.69</td>
+              <td>74.63</td>
+              <td>80.77</td>
+              <td>92.51–100.00†</td>
+              <td>78.85</td>
+              <td>92.52</td>
+              <td>96.10‡</td>
+              <td>Verse 100 exploratory</td>
+            </tr>
+          </tbody>
+        </table>
+        <div id="empty-message" class="empty">No leaderboard rows match this filter.</div>
+      </div>
+
+      <h2>Notes</h2>
+      <p>
+        † Four GreBerta heads tied at validation macro-F1 1.0000 for
+        <code>verse_sentence_100</code>. Their test macro-F1 scores were
+        <strong>92.82, 100.00, 100.00, and 92.51</strong>, so the table reports the full
+        <strong>92.51–100.00</strong> range rather than choosing the best test result.
+      </p>
+      <p>
+        ‡ Four GreBerta heads tied at validation macro-F1 1.0000 for
+        <code>verse_metre_100</code>; all four obtained test macro-F1 <strong>96.10</strong>.
+      </p>
+      <p>
+        The variable-chunk GreBerta <code>_100</code> repair experiment is marked exploratory
+        because its design followed inspection of an earlier <code>_100</code> test failure.
+      </p>
+
+      <h2>Benchmark resources</h2>
+      <ul class="resource-list">
+        <li><a href="https://huggingface.co/datasets/Urdatorn/sphragis">Dataset</a></li>
+        <li><a href="https://github.com/Urdatorn/sphragis_models">Model implementations</a></li>
+      </ul>
+    </main>
+
+    <script>
+      const search = document.querySelector("#table-search");
+      const rows = [...document.querySelectorAll("#leaderboard tbody tr")];
+      const empty = document.querySelector("#empty-message");
+
+      search.addEventListener("input", () => {
+        const query = search.value.trim().toLocaleLowerCase();
+        let visible = 0;
+
+        for (const row of rows) {
+          const matches = row.textContent.toLocaleLowerCase().includes(query);
+          row.hidden = !matches;
+          visible += Number(matches);
+        }
+
+        empty.style.display = visible ? "none" : "block";
+      });
+    </script>
   </body>
 </html>