Switch leaderboard to interactive Gradio dataframe

README.md

@@ -3,7 +3,10 @@ title: Persian ASR Double Benchmark
 emoji: 🎙️
 colorFrom: red
 colorTo: pink
-sdk: static
+sdk: gradio
+sdk_version: 5.22.0
+app_file: app.py
+python_version: 3.11
 pinned: false
 ---
 

app.py

@@ -5,58 +5,275 @@ import gradio as gr
 import pandas as pd
 
 
-DATA = Path(__file__).parent / "results.json"
-
-
-def load_rows():
-    rows = json.loads(DATA.read_text())
-    df = pd.DataFrame(rows)
-    if df.empty:
-        return df
-    ordered = [
-        "model",
-        "family",
-        "precision",
-        "params_b",
-        "gold69_wer",
-        "gold69_cer",
-        "fleurs_wer",
-        "fleurs_cer",
-        "mean_decode_ms",
-        "status",
-        "repo",
-        "notes",
-    ]
-    df = df[[c for c in ordered if c in df.columns]]
-    for col in ["gold69_wer", "gold69_cer", "fleurs_wer", "fleurs_cer"]:
-        if col in df.columns:
-            df[col] = df[col].map(lambda x: None if pd.isna(x) else round(float(x), 2))
-    if "params_b" in df.columns:
-        df["params_b"] = df["params_b"].map(lambda x: None if pd.isna(x) else round(float(x), 3))
-    return df.sort_values(["fleurs_wer", "gold69_wer"], na_position="last")
-
-
-with gr.Blocks(title="Persian ASR Double Benchmark") as demo:
-    gr.Markdown(
-        """
-# Persian ASR Double Benchmark
+ROOT = Path(__file__).parent
+RESULTS_PATH = ROOT / "results.json"
+MODELS_PATH = ROOT / "models.json"
+
+COLUMNS = [
+    "Rank",
+    "Model",
+    "Family",
+    "Params",
+    "gold69 WER",
+    "gold69 CER",
+    "FLEURS WER",
+    "FLEURS CER",
+    "Decode",
+    "Status",
+    "Notes",
+]
+
+DATATYPES = [
+    "number",
+    "markdown",
+    "str",
+    "number",
+    "number",
+    "number",
+    "number",
+    "number",
+    "number",
+    "str",
+    "str",
+]
+
+STATUS_RANK = {"complete": 0, "running": 1, "queued": 2, "failed": 3}
+SORTS = {
+    "gold69 WER": ("gold69 WER", True),
+    "FLEURS WER": ("FLEURS WER", True),
+    "Params": ("Params", True),
+    "Decode": ("Decode", True),
+    "Status": ("_status_rank", True),
+    "Model": ("_model_text", True),
+}
+
+
+def read_json(path: Path) -> list[dict]:
+    if not path.exists():
+        return []
+    return json.loads(path.read_text())
+
+
+def pct(value):
+    return None if value is None or pd.isna(value) else round(float(value), 2)
+
+
+def num(value, digits=3):
+    return None if value is None or pd.isna(value) else round(float(value), digits)
+
+
+def model_link(row: dict) -> str:
+    model = row.get("model", "")
+    repo = row.get("repo", "")
+    if isinstance(repo, str) and repo.startswith("http"):
+        return f"[{model}]({repo})"
+    return model
+
+
+def combined_rows() -> pd.DataFrame:
+    result_rows = {row.get("model"): row for row in read_json(RESULTS_PATH)}
+    model_rows = read_json(MODELS_PATH)
+
+    merged = []
+    seen = set()
+    for model_row in model_rows:
+        model = model_row.get("model")
+        row = {**model_row, **result_rows.get(model, {})}
+        merged.append(row)
+        seen.add(model)
+
+    for model, row in result_rows.items():
+        if model not in seen:
+            merged.append(row)
+
+    records = []
+    completed_rank = 1
+    for row in sorted(merged, key=lambda item: (STATUS_RANK.get(item.get("status", "queued"), 9), item.get("gold69_wer", 999), item.get("model", ""))):
+        is_complete = row.get("status") == "complete"
+        records.append(
+            {
+                "Rank": completed_rank if is_complete else None,
+                "Model": model_link(row),
+                "Family": row.get("family", ""),
+                "Params": num(row.get("params_b"), 3),
+                "gold69 WER": pct(row.get("gold69_wer")),
+                "gold69 CER": pct(row.get("gold69_cer")),
+                "FLEURS WER": pct(row.get("fleurs_wer")),
+                "FLEURS CER": pct(row.get("fleurs_cer")),
+                "Decode": num(row.get("mean_decode_ms"), 1),
+                "Status": row.get("status", "queued"),
+                "Notes": row.get("notes", ""),
+                "_status_rank": STATUS_RANK.get(row.get("status", "queued"), 9),
+                "_model_text": row.get("model", ""),
+            }
+        )
+        if is_complete:
+            completed_rank += 1
 
-Full-precision ASR benchmark on two Persian eval sets. Lower WER/CER is better.
+    return pd.DataFrame(records)
 
-`gold69` is the Golha 69-clip stress/domain set. `fleurs` is the Persian FLEURS eval parquet set.
-Rows are added as models finish, so pending and failed runs can stay visible without pretending they are results.
+
+def display_frame(sort_by: str = "gold69 WER", status: str = "All") -> pd.DataFrame:
+    df = combined_rows()
+    if status != "All":
+        df = df[df["Status"].eq(status)]
+
+    sort_col, ascending = SORTS.get(sort_by, SORTS["gold69 WER"])
+    if sort_col in df.columns:
+        df = df.sort_values(sort_col, ascending=ascending, na_position="last")
+
+    return df[COLUMNS].reset_index(drop=True)
+
+
+def summary_cards() -> str:
+    df = combined_rows()
+    completed = df[df["Status"].eq("complete")]
+    best_gold = completed["gold69 WER"].min() if not completed.empty else None
+    best_fleurs = completed["FLEURS WER"].min() if not completed.empty else None
+    return f"""
+<div class="cards">
+  <div><span>Completed models</span><strong>{len(completed)}</strong></div>
+  <div><span>Best gold69 WER</span><strong>{best_gold:.2f}%</strong></div>
+  <div><span>Best FLEURS WER</span><strong>{best_fleurs:.2f}%</strong></div>
+  <div><span>Queued baselines</span><strong>{len(df) - len(completed)}</strong></div>
+</div>
+"""
+
+
+CSS = """
+:root {
+  --body-background-fill: #12070a;
+  --body-text-color: #fff7f7;
+  --block-background-fill: #241014;
+  --block-border-color: #5b2430;
+  --button-primary-background-fill: #ef4444;
+  --button-primary-background-fill-hover: #dc2626;
+}
+.gradio-container {
+  max-width: 1220px !important;
+  margin: 0 auto !important;
+}
+.hero h1 {
+  font-size: clamp(34px, 5vw, 58px);
+  line-height: 1.05;
+  margin-bottom: 8px;
+}
+.hero p {
+  color: #f0b7bd;
+  font-size: 18px;
+  line-height: 1.55;
+}
+.cards {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  margin: 12px 0 18px;
+}
+.cards div {
+  border: 1px solid #5b2430;
+  background: linear-gradient(180deg, #35151c, #241014);
+  border-radius: 8px;
+  padding: 14px 16px;
+}
+.cards span {
+  display: block;
+  color: #f0b7bd;
+  margin-bottom: 6px;
+}
+.cards strong {
+  font-size: 28px;
+}
+#leaderboard table {
+  table-layout: auto !important;
+}
+#leaderboard table,
+#leaderboard thead,
+#leaderboard tbody,
+#leaderboard th,
+#leaderboard td {
+  color: #2a090e !important;
+}
+#leaderboard * {
+  color: #2a090e !important;
+}
+#leaderboard th,
+#leaderboard td {
+  font-size: 15px !important;
+  line-height: 1.32 !important;
+  vertical-align: top !important;
+}
+#leaderboard th {
+  background: #ffe4e6 !important;
+  color: #4c0519 !important;
+}
+#leaderboard td {
+  white-space: normal !important;
+  overflow-wrap: anywhere !important;
+}
+#leaderboard td a {
+  color: #1d4ed8 !important;
+  font-weight: 700;
+}
+@media (max-width: 760px) {
+  .cards { grid-template-columns: 1fr; }
+  .hero h1 { font-size: 32px; }
+}
+"""
+
+
+with gr.Blocks(title="Persian ASR Double Benchmark", css=CSS, theme=gr.themes.Soft(primary_hue="red", neutral_hue="rose")) as demo:
+    gr.HTML(
+        """
+<section class="hero">
+  <h1>Persian ASR Double Benchmark</h1>
+  <p>
+    A same-test leaderboard for Persian speech recognition models. gold69 is the tougher real-world set;
+    FLEURS is the cleaner public reference set. Lower WER/CER is better.
+  </p>
+</section>
 """
     )
+    gr.HTML(summary_cards)
+
+    with gr.Row():
+        sort_by = gr.Dropdown(
+            choices=list(SORTS.keys()),
+            value="gold69 WER",
+            label="Default sort",
+            scale=1,
+        )
+        status = gr.Dropdown(
+            choices=["All", "complete", "running", "queued", "failed"],
+            value="All",
+            label="Status filter",
+            scale=1,
+        )
+        refresh = gr.Button("Refresh", variant="primary", scale=0)
+
     table = gr.Dataframe(
-        value=load_rows,
+        value=display_frame,
+        inputs=[sort_by, status],
+        headers=COLUMNS,
+        datatype=DATATYPES,
         interactive=False,
         wrap=True,
-        label="Leaderboard",
+        line_breaks=True,
+        label="Sortable leaderboard",
+        elem_id="leaderboard",
+        max_height=760,
+        show_search="filter",
+        show_copy_button=True,
+        show_fullscreen_button=True,
+        show_row_numbers=True,
+        pinned_columns=2,
+        max_chars=120,
+        column_widths=[72, 270, 190, 100, 116, 116, 116, 116, 96, 104, 420],
     )
-    refresh = gr.Button("Refresh")
-    refresh.click(load_rows, outputs=table)
+
+    refresh.click(display_frame, inputs=[sort_by, status], outputs=table)
+    sort_by.change(display_frame, inputs=[sort_by, status], outputs=table)
+    status.change(display_frame, inputs=[sort_by, status], outputs=table)
 
 
 if __name__ == "__main__":
     demo.launch()
-

index.html

@@ -6,203 +6,430 @@
   <title>Persian ASR Double Benchmark</title>
   <style>
     :root {
-      color-scheme: light dark;
-      --bg: #15070a;
-      --panel: #231015;
-      --panel2: #32151b;
+      color-scheme: dark;
+      --bg: #12070a;
+      --panel: #241014;
+      --panel-2: #35151c;
       --ink: #fff7f7;
-      --muted: #f2b8bd;
-      --line: #54242d;
+      --muted: #f0b7bd;
+      --soft: #ffd8dd;
+      --line: #5b2430;
       --accent: #ef4444;
-      --accent2: #fb7185;
+      --accent-2: #fb7185;
       --gold: #fbbf24;
+      --green: #34d399;
+      --shadow: rgba(0, 0, 0, 0.32);
     }
+
+    * { box-sizing: border-box; }
+
+    html,
+    body {
+      max-width: 100%;
+      overflow-x: hidden;
+    }
+
     body {
       margin: 0;
       font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       background:
-        radial-gradient(circle at top left, rgba(239, 68, 68, 0.28), transparent 34%),
-        linear-gradient(180deg, #20080d 0%, var(--bg) 46%, #0f0507 100%);
+        radial-gradient(circle at 16% 0%, rgba(239, 68, 68, 0.30), transparent 34%),
+        linear-gradient(180deg, #21080d 0%, var(--bg) 50%, #0c0406 100%);
       color: var(--ink);
     }
+
     main {
-      max-width: 1120px;
+      width: min(calc(100% - 28px), 1180px);
       margin: 0 auto;
-      padding: 34px 16px 48px;
+      padding: 34px 0 48px;
     }
+
     header {
-      margin-bottom: 24px;
+      display: grid;
+      gap: 16px;
+      margin-bottom: 22px;
     }
+
     .eyebrow {
+      max-width: 100%;
       color: #fecdd3;
-      font-size: 16px;
-      font-weight: 800;
+      font-size: 15px;
+      font-weight: 850;
       letter-spacing: 0.08em;
       text-transform: uppercase;
-      margin-bottom: 10px;
+      overflow-wrap: anywhere;
     }
+
     h1 {
-      margin: 0 0 10px;
-      font-size: clamp(38px, 5.8vw, 68px);
+      max-width: min(100%, 960px);
+      margin: 0;
+      font-size: clamp(36px, 5vw, 62px);
+      line-height: 1.04;
       letter-spacing: 0;
-      line-height: 1.02;
+      overflow-wrap: anywhere;
     }
+
     p {
+      max-width: min(100%, 940px);
+      margin: 0;
       color: var(--muted);
-      line-height: 1.55;
-      max-width: 920px;
       font-size: 20px;
+      line-height: 1.55;
+      overflow-wrap: anywhere;
     }
+
     .stats {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+      grid-template-columns: repeat(4, minmax(0, 1fr));
       gap: 10px;
-      margin: 24px 0;
+      margin: 24px 0 14px;
     }
+
     .stat {
+      min-width: 0;
       border: 1px solid var(--line);
-      background: linear-gradient(180deg, var(--panel2), var(--panel));
+      background: linear-gradient(180deg, var(--panel-2), var(--panel));
       border-radius: 8px;
       padding: 14px 16px;
-      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
+      box-shadow: 0 16px 40px var(--shadow);
     }
+
     .stat span {
       display: block;
       color: var(--muted);
-      font-size: 16px;
+      font-size: 15px;
       margin-bottom: 6px;
     }
+
     .stat strong {
-      font-size: 30px;
+      display: block;
+      font-size: 29px;
+      line-height: 1.1;
+      overflow-wrap: anywhere;
+    }
+
+    .toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      margin: 18px 0 10px;
+    }
+
+    .hint {
+      color: var(--muted);
+      font-size: 15px;
+      line-height: 1.35;
+      max-width: 100%;
+      overflow-wrap: anywhere;
     }
-    .table-wrap {
-      overflow-x: auto;
+
+    .segmented {
+      display: inline-flex;
+      gap: 4px;
+      max-width: 100%;
+      padding: 4px;
       border: 1px solid var(--line);
       border-radius: 8px;
-      background: var(--panel);
-      box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
+      background: rgba(0, 0, 0, 0.16);
     }
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      table-layout: fixed;
+
+    .segmented button,
+    .sort-button {
+      border: 0;
+      border-radius: 6px;
+      color: var(--soft);
+      background: transparent;
+      font: inherit;
+      cursor: pointer;
     }
-    th, td {
-      padding: 10px 9px;
-      text-align: left;
+
+    .segmented button {
+      padding: 8px 11px;
+      font-size: 15px;
+      white-space: nowrap;
+    }
+
+    .segmented button[aria-pressed="true"] {
+      background: rgba(239, 68, 68, 0.22);
+      color: #fff;
+    }
+
+    .leaderboard {
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      overflow: hidden;
+      background: rgba(35, 16, 21, 0.94);
+      box-shadow: 0 20px 58px var(--shadow);
+    }
+
+    .grid-head,
+    .row-main {
+      display: grid;
+      grid-template-columns: minmax(260px, 1.8fr) minmax(114px, 0.58fr) minmax(122px, 0.72fr) minmax(122px, 0.72fr) minmax(102px, 0.58fr) minmax(98px, 0.52fr);
+      gap: 0;
+      align-items: stretch;
+    }
+
+    .grid-head {
+      background: #3a141c;
       border-bottom: 1px solid var(--line);
-      vertical-align: top;
-      font-size: 16px;
-      overflow-wrap: anywhere;
     }
-    th {
+
+    .sort-button {
+      width: 100%;
+      min-height: 46px;
+      padding: 10px 12px;
+      text-align: left;
       color: #ffe4e6;
-      font-weight: 700;
-      background: #3a141c;
-      position: sticky;
-      top: 0;
+      font-size: 15px;
+      font-weight: 800;
+      white-space: normal;
+    }
+
+    .sort-button:hover,
+    .sort-button:focus-visible {
+      outline: none;
+      background: rgba(255, 255, 255, 0.055);
     }
-    tbody tr:nth-child(even) {
+
+    .sort-button.num { text-align: right; }
+
+    .sort-indicator {
+      color: var(--accent-2);
+      font-size: 13px;
+      margin-left: 4px;
+    }
+
+    .leader-row {
+      border-bottom: 1px solid var(--line);
+    }
+
+    .leader-row:last-child { border-bottom: 0; }
+
+    .leader-row:nth-child(even) {
       background: rgba(255, 255, 255, 0.025);
     }
-    tr:last-child td {
-      border-bottom: 0;
+
+    .cell {
+      min-width: 0;
+      padding: 13px 12px;
+      font-size: 16px;
+      line-height: 1.35;
+      overflow-wrap: anywhere;
     }
-    .num {
+
+    .cell.num {
       text-align: right;
       font-variant-numeric: tabular-nums;
       white-space: nowrap;
     }
-    th:nth-child(1), td:nth-child(1) { width: 22%; }
-    th:nth-child(2), td:nth-child(2) { width: 14%; }
-    th:nth-child(3), td:nth-child(3) { width: 7%; }
-    th:nth-child(4), td:nth-child(4),
-    th:nth-child(5), td:nth-child(5),
-    th:nth-child(6), td:nth-child(6),
-    th:nth-child(7), td:nth-child(7) { width: 8%; }
-    th:nth-child(8), td:nth-child(8) { width: 7%; }
-    th:nth-child(9), td:nth-child(9) { width: 7%; }
-    th:nth-child(10), td:nth-child(10) { width: 22%; }
-    .badge {
+
+    .model-name {
+      display: flex;
+      align-items: flex-start;
+      gap: 9px;
+      min-width: 0;
+      font-weight: 820;
+    }
+
+    .rank {
+      flex: 0 0 auto;
+      min-width: 28px;
+      padding-top: 1px;
+      color: var(--accent-2);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .model-copy {
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    .model-link {
       display: inline-block;
-      padding: 3px 8px;
+      max-width: 100%;
+      color: #fff1f2;
+      text-decoration: none;
+      overflow-wrap: anywhere;
+      word-break: break-word;
+    }
+
+    .model-link:hover { text-decoration: underline; }
+
+    .family {
+      display: block;
+      margin-top: 4px;
+      color: var(--muted);
+      font-size: 14px;
+      font-weight: 650;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 82px;
+      padding: 5px 8px;
       border: 1px solid #7f1d1d;
       border-radius: 999px;
       color: #fecdd3;
-      font-size: 15px;
+      font-size: 14px;
+      font-weight: 760;
       white-space: nowrap;
     }
+
     .complete {
       color: #fee2e2;
       border-color: #ef4444;
       background: rgba(239, 68, 68, 0.16);
     }
+
     .queued {
       color: #fde68a;
       border-color: #b45309;
-      background: rgba(251, 191, 36, 0.1);
+      background: rgba(251, 191, 36, 0.10);
     }
+
     .running {
       color: #ffedd5;
       border-color: #f97316;
       background: rgba(249, 115, 22, 0.16);
     }
-    a {
-      color: #fecdd3;
-      text-decoration: none;
+
+    .details {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 6px;
+      padding: 0 12px 14px 52px;
+      color: var(--muted);
+      font-size: 15px;
+      line-height: 1.45;
     }
-    a:hover {
-      text-decoration: underline;
+
+    .details strong {
+      color: #ffe4e6;
     }
+
     footer {
       margin-top: 18px;
       color: var(--muted);
       font-size: 16px;
+      line-height: 1.45;
     }
-    @media (max-width: 760px) {
-      main { padding-inline: 10px; }
-      th, td { padding: 8px 6px; font-size: 13px; }
-      .badge { padding: 2px 6px; }
+
+    @media (max-width: 940px) {
+      main { width: min(calc(100% - 20px), 1180px); }
+      .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+      .grid-head { display: none; }
+      .leaderboard {
+        display: grid;
+        gap: 10px;
+        padding: 10px;
+        border-radius: 8px;
+        background: transparent;
+        box-shadow: none;
+        border: 0;
+      }
+      .leader-row {
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        overflow: hidden;
+        background: var(--panel);
+        box-shadow: 0 14px 34px var(--shadow);
+      }
+      .row-main {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .cell:first-child {
+        grid-column: 1 / -1;
+      }
+      .cell {
+        padding: 11px 12px;
+        font-size: 16px;
+      }
+      .cell.num {
+        text-align: left;
+        white-space: normal;
+      }
+      .cell::before {
+        display: block;
+        margin-bottom: 4px;
+        color: var(--muted);
+        font-size: 12px;
+        font-weight: 820;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+      .cell[data-label]::before { content: attr(data-label); }
+      .details {
+        padding: 0 12px 13px;
+      }
+      .toolbar {
+        align-items: flex-start;
+        flex-direction: column;
+      }
+      .segmented {
+        width: 100%;
+        overflow-x: auto;
+        scrollbar-width: thin;
+      }
+      .segmented button {
+        flex: 1 1 0;
+        min-width: max-content;
+      }
+    }
+
+    @media (max-width: 560px) {
+      main { width: min(calc(100% - 16px), 1180px); padding-top: 24px; }
+      h1 { font-size: 31px; }
+      p { font-size: 18px; }
+      .stats { grid-template-columns: 1fr; }
+      .row-main { grid-template-columns: 1fr; }
+      .stat strong { font-size: 27px; }
+      .model-name { gap: 7px; }
+      .rank { min-width: 24px; }
+      .segmented button {
+        padding-inline: 9px;
+      }
     }
   </style>
 </head>
 <body>
   <main>
     <header>
-      <div class="eyebrow">🎧 Persian speech recognition leaderboard</div>
+      <div class="eyebrow">Persian speech recognition leaderboard</div>
       <h1>Which Persian ASR models actually hear better?</h1>
       <p>
         This leaderboard compares Persian automatic speech recognition models on two complementary tests.
-        <strong>gold69</strong> is a small but tougher real-world Persian set, while <strong>FLEURS</strong>
-        is a cleaner public-style reference set. Lower WER/CER means fewer transcription mistakes. 🔥
+        <strong>gold69</strong> is a small, tougher real-world Persian set. <strong>FLEURS</strong>
+        is cleaner and more public-benchmark-like. Lower WER/CER means fewer transcription mistakes.
       </p>
     </header>
 
     <section class="stats" id="stats"></section>
-    <section class="table-wrap">
-      <table>
-        <thead>
-          <tr>
-            <th>Model</th>
-            <th>Family</th>
-            <th class="num">Params / Size</th>
-            <th class="num">gold69 WER</th>
-            <th class="num">gold69 CER</th>
-            <th class="num">FLEURS WER</th>
-            <th class="num">FLEURS CER</th>
-            <th class="num">Decode</th>
-            <th>Status</th>
-            <th>Notes</th>
-          </tr>
-        </thead>
-        <tbody id="rows"></tbody>
-      </table>
+
+    <section class="toolbar" aria-label="Leaderboard controls">
+      <div class="hint">Click a column to sort. Queued models stay visible, but completed rows rank first by default.</div>
+      <div class="segmented" role="group" aria-label="Quick sort">
+        <button type="button" data-preset="gold69_wer" aria-pressed="true">gold69 WER</button>
+        <button type="button" data-preset="fleurs_wer" aria-pressed="false">FLEURS WER</button>
+        <button type="button" data-preset="params_b" aria-pressed="false">Params</button>
+        <button type="button" data-preset="status_rank" aria-pressed="false">Status</button>
+      </div>
+    </section>
+
+    <section class="leaderboard" aria-label="Persian ASR leaderboard">
+      <div class="grid-head" id="head"></div>
+      <div id="rows"></div>
     </section>
+
     <footer>
-      🧪 WER is word error rate; CER is character error rate. Both are normalized with the same Persian text cleanup.
+      WER is word error rate; CER is character error rate. Both are normalized with the same Persian text cleanup.
       Public baseline rows are added as their runs complete on the same two-test setup.
     </footer>
   </main>
+
   <script>
     const results = [
       {
@@ -216,7 +443,7 @@
         fleurs_cer: 5.764774608119949,
         mean_decode_ms: 18.51,
         status: "complete",
-        notes: "Small, fast CTC model trained on a larger relabeled Persian batch. Stronger on the harder gold69 set. ⚡"
+        notes: "Small, fast CTC model trained on a larger relabeled Persian batch. Stronger on the harder gold69 set."
       },
       {
         model: "student_mms1b",
@@ -242,7 +469,7 @@
         fleurs_cer: 4.992697887255379,
         mean_decode_ms: 714.62,
         status: "complete",
-        notes: "Persian Whisper Large v3 finetune. Public baseline run completed on the same double benchmark. 🎙️"
+        notes: "Persian Whisper Large v3 finetune. Public baseline run completed on the same double benchmark."
       }
     ];
 
@@ -297,50 +524,156 @@
       }
     ];
 
+    const columns = [
+      { key: "model", label: "Model", type: "text" },
+      { key: "params_b", label: "Params", type: "number", className: "num", formatter: params },
+      { key: "gold69_wer", label: "gold69 WER", type: "number", className: "num", formatter: pct },
+      { key: "fleurs_wer", label: "FLEURS WER", type: "number", className: "num", formatter: pct },
+      { key: "mean_decode_ms", label: "Decode", type: "number", className: "num", formatter: ms },
+      { key: "status_rank", label: "Status", type: "number", formatter: statusBadge }
+    ];
+
+    const statusRank = { complete: 0, running: 1, queued: 2 };
+    const allRows = [...results, ...queued].map(row => ({
+      ...row,
+      status_rank: statusRank[row.status] ?? 3
+    }));
+
+    let sortState = { key: "gold69_wer", direction: "asc" };
+
     function pct(v) {
-      return typeof v === "number" ? `${v.toFixed(2)}%` : "";
+      return typeof v === "number" ? `${v.toFixed(2)}%` : "pending";
     }
+
     function params(v) {
-      if (typeof v === "number") return `${v.toFixed(3)}B`;
-      return "";
+      return typeof v === "number" ? `${v.toFixed(3)}B` : "pending";
     }
+
     function ms(v) {
-      return typeof v === "number" ? `${v.toFixed(1)} ms` : "";
+      return typeof v === "number" ? `${v.toFixed(1)} ms` : "pending";
     }
-    function modelCell(row) {
-      const label = row.model;
-      if (row.repo && row.repo.startsWith("http")) return `<a href="${row.repo}">${label}</a>`;
-      return label;
+
+    function escapeHtml(value) {
+      return String(value ?? "")
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#039;");
     }
 
-    const allRows = [
-      ...results.sort((a, b) => (a.gold69_wer ?? 999) - (b.gold69_wer ?? 999)),
-      ...queued
-    ];
+    function modelCell(row, rank) {
+      const safeModel = escapeHtml(row.model);
+      const model = row.repo && row.repo.startsWith("http")
+        ? `<a class="model-link" href="${escapeHtml(row.repo)}" target="_blank" rel="noreferrer">${safeModel}</a>`
+        : `<span class="model-link">${safeModel}</span>`;
+      return `
+        <div class="model-name">
+          <span class="rank">${rank}</span>
+          <span class="model-copy">${model}<span class="family">${escapeHtml(row.family || "")}</span></span>
+        </div>
+      `;
+    }
+
+    function statusBadge(_value, row) {
+      const status = escapeHtml(row.status || "queued");
+      return `<span class="badge ${status}">${status}</span>`;
+    }
+
+    function compareRows(a, b) {
+      const column = columns.find(item => item.key === sortState.key);
+      const direction = sortState.direction === "asc" ? 1 : -1;
+      const aMissing = a[sortState.key] === undefined || a[sortState.key] === null;
+      const bMissing = b[sortState.key] === undefined || b[sortState.key] === null;
+      if (aMissing && bMissing) return a.status_rank - b.status_rank || a.model.localeCompare(b.model);
+      if (aMissing) return 1;
+      if (bMissing) return -1;
+      if (column?.type === "text") {
+        return direction * String(a[sortState.key]).localeCompare(String(b[sortState.key]));
+      }
+      return direction * (Number(a[sortState.key]) - Number(b[sortState.key]));
+    }
+
+    function setSort(key) {
+      if (sortState.key === key) {
+        sortState = { key, direction: sortState.direction === "asc" ? "desc" : "asc" };
+      } else {
+        sortState = { key, direction: "asc" };
+      }
+      render();
+    }
+
+    function renderHead() {
+      document.getElementById("head").innerHTML = columns.map(column => {
+        const active = sortState.key === column.key;
+        const marker = active ? (sortState.direction === "asc" ? "↑" : "↓") : "";
+        return `
+          <button type="button" class="sort-button ${column.className || ""}" data-sort="${column.key}" aria-sort="${active ? sortState.direction : "none"}">
+            ${column.label}<span class="sort-indicator">${marker}</span>
+          </button>
+        `;
+      }).join("");
+    }
+
+    function renderRows() {
+      const sorted = [...allRows].sort(compareRows);
+      document.getElementById("rows").innerHTML = sorted.map((row, index) => {
+        const rank = row.status === "complete" ? `#${index + 1}` : "—";
+        return `
+          <article class="leader-row">
+            <div class="row-main">
+              <div class="cell" data-label="Model">${modelCell(row, rank)}</div>
+              <div class="cell num" data-label="Params">${params(row.params_b)}</div>
+              <div class="cell num" data-label="gold69 WER">${pct(row.gold69_wer)}</div>
+              <div class="cell num" data-label="FLEURS WER">${pct(row.fleurs_wer)}</div>
+              <div class="cell num" data-label="Decode">${ms(row.mean_decode_ms)}</div>
+              <div class="cell" data-label="Status">${statusBadge(row.status_rank, row)}</div>
+            </div>
+            <div class="details">
+              <div><strong>CER:</strong> gold69 ${pct(row.gold69_cer)} · FLEURS ${pct(row.fleurs_cer)}</div>
+              <div>${escapeHtml(row.notes || "")}</div>
+            </div>
+          </article>
+        `;
+      }).join("");
+    }
+
+    function renderStats() {
+      const completed = allRows.filter(row => row.status === "complete");
+      const bestGold = completed.reduce((best, row) => !best || row.gold69_wer < best.gold69_wer ? row : best, null);
+      const bestFleurs = completed.reduce((best, row) => !best || row.fleurs_wer < best.fleurs_wer ? row : best, null);
+      document.getElementById("stats").innerHTML = `
+        <div class="stat"><span>Completed models</span><strong>${completed.length}</strong></div>
+        <div class="stat"><span>Best hard-set WER</span><strong>${pct(bestGold?.gold69_wer)}</strong></div>
+        <div class="stat"><span>Best FLEURS WER</span><strong>${pct(bestFleurs?.fleurs_wer)}</strong></div>
+        <div class="stat"><span>Queued baselines</span><strong>${allRows.length - completed.length}</strong></div>
+      `;
+    }
+
+    function renderPresets() {
+      document.querySelectorAll("[data-preset]").forEach(button => {
+        button.setAttribute("aria-pressed", String(button.dataset.preset === sortState.key));
+      });
+    }
+
+    function render() {
+      renderHead();
+      renderRows();
+      renderStats();
+      renderPresets();
+    }
+
+    document.addEventListener("click", event => {
+      const sortButton = event.target.closest("[data-sort]");
+      if (sortButton) setSort(sortButton.dataset.sort);
+      const presetButton = event.target.closest("[data-preset]");
+      if (presetButton) {
+        sortState = { key: presetButton.dataset.preset, direction: "asc" };
+        render();
+      }
+    });
 
-    document.getElementById("rows").innerHTML = allRows.map(row => `
-      <tr>
-        <td>${modelCell(row)}</td>
-        <td>${row.family || ""}</td>
-        <td class="num">${row.size_label || params(row.params_b)}</td>
-        <td class="num">${pct(row.gold69_wer)}</td>
-        <td class="num">${pct(row.gold69_cer)}</td>
-        <td class="num">${pct(row.fleurs_wer)}</td>
-        <td class="num">${pct(row.fleurs_cer)}</td>
-        <td class="num">${ms(row.mean_decode_ms)}</td>
-        <td><span class="badge ${row.status === "complete" ? "complete" : row.status === "running" ? "running" : "queued"}">${row.status}</span></td>
-        <td>${row.notes || ""}</td>
-      </tr>
-    `).join("");
-
-    const bestGold = results.reduce((a, b) => a.gold69_wer < b.gold69_wer ? a : b);
-    const bestFleurs = results.reduce((a, b) => a.fleurs_wer < b.fleurs_wer ? a : b);
-    document.getElementById("stats").innerHTML = `
-      <div class="stat"><span>✅ Completed models</span><strong>${results.length}</strong></div>
-      <div class="stat"><span>🔥 Best hard-set WER</span><strong>${pct(bestGold.gold69_wer)}</strong></div>
-      <div class="stat"><span>🌸 Best FLEURS WER</span><strong>${pct(bestFleurs.fleurs_wer)}</strong></div>
-      <div class="stat"><span>⏳ Queued baselines</span><strong>${queued.length}</strong></div>
-    `;
+    render();
   </script>
 </body>
 </html>

requirements.txt

@@ -1,4 +1 @@
-gradio==4.44.1
-huggingface_hub>=0.30,<1.0
-pandas>=2.0
-audioop-lts>=0.2.2; python_version >= "3.13"
+pandas>=2.0,<3