UI: eval countdown bar, refresh leaderboard only on eval complete.

Remove 60s display reload timer; poll eval state internally and refresh
tables when a run starts or finishes. Progress bar shows time until next
hourly eval cycle.

Co-authored-by: Cursor <cursoragent@cursor.com>

README.md

@@ -28,7 +28,6 @@ Optional variables (Settings → Variables):
 | Variable | Default | Purpose |
 |---|---|---|
 | `TSFM_BENCH_INTERVAL_SECONDS` | `3600` | Collect + eval cycle (1 hour) |
-| `TSFM_REFRESH_SECONDS` | `60` | UI reload from disk (seconds) |
 
 Without `TSFM_API_KEY`, the leaderboard only reloads static CSV files and **does not** call the API.
 

app.py

@@ -11,12 +11,12 @@ from src.about import (
     LLM_BENCHMARKS_TEXT,
     TITLE,
 )
+from src.benchmark_config import BENCHMARK_INTERVAL_SECONDS, EVAL_WATCH_POLL_SECONDS
 from src.display.css_html_js import (
     build_custom_css,
-    refresh_countdown_head_js,
-    refresh_countdown_markup,
+    eval_countdown_head_js,
+    eval_countdown_markup,
 )
-from src.benchmark_config import BENCHMARK_INTERVAL_SECONDS, DISPLAY_REFRESH_SECONDS
 from src.eval_scheduler import get_scheduler, start_live_eval_scheduler
 from src.utils import (
     get_grouped_dfs,
@@ -28,6 +28,8 @@ RESULTS_PATH = os.getenv("TSFM_RESULTS_PATH", "results")
 
 start_live_eval_scheduler()
 
+_last_seen_eval_token: str | None = None
+
 
 def load_online_status(results_path: str = RESULTS_PATH) -> dict:
     status_path = Path(results_path) / "online_status.json"
@@ -36,6 +38,16 @@ def load_online_status(results_path: str = RESULTS_PATH) -> dict:
     return json.loads(status_path.read_text())
 
 
+def build_countdown_html() -> str:
+    scheduler = get_scheduler()
+    running = scheduler.is_running()
+    return eval_countdown_markup(
+        next_eval_at_unix=scheduler.next_eval_at_unix(),
+        interval_seconds=BENCHMARK_INTERVAL_SECONDS,
+        running=running,
+    )
+
+
 def build_status_line(status: dict) -> str:
     eval_state = get_scheduler().snapshot()
     finished = status.get("finished_at", "n/a")
@@ -47,17 +59,13 @@ def build_status_line(status: dict) -> str:
     elif eval_status == "disabled":
         live_hint = f"**Live eval off** — {eval_message}"
     else:
-        secs = get_scheduler().seconds_until_next_run()
-        next_hint = f" · Next eval in ~{secs}s" if secs is not None else ""
         live_hint = (
             f"**Live eval** · Last run `{finished}` · "
-            f"collect + eval every **{BENCHMARK_INTERVAL_SECONDS // 60} min**{next_hint}"
+            f"collect + eval every **{BENCHMARK_INTERVAL_SECONDS // 60} min** · "
+            f"leaderboard refreshes when each run completes"
         )
 
-    return (
-        f"{live_hint} · "
-        f"Display reloads every {DISPLAY_REFRESH_SECONDS}s"
-    )
+    return live_hint
 
 
 def refresh_leaderboard() -> tuple:
@@ -68,6 +76,7 @@ def refresh_leaderboard() -> tuple:
         prepare_values_table(grouped["overall_values"]),
         prepare_ranks_table(grouped["overall_ranks"]),
         build_status_line(status),
+        build_countdown_html(),
     ]
     for domain in DOMAINS:
         values_df = grouped["domain_values"].get(domain)
@@ -83,19 +92,37 @@ def refresh_leaderboard() -> tuple:
     return tuple(outputs)
 
 
+def maybe_refresh_after_eval() -> tuple:
+    """Refresh leaderboard only when eval state changes (start or finish)."""
+    global _last_seen_eval_token
+
+    eval_state = get_scheduler().snapshot()
+    token = "|".join(
+        [
+            str(eval_state.get("status", "")),
+            str(eval_state.get("updated_at", "")),
+            str(eval_state.get("finished_at", "")),
+        ]
+    )
+    if token == _last_seen_eval_token:
+        raise gr.Skip()
+    _last_seen_eval_token = token
+    return refresh_leaderboard()
+
+
 grouped_initial = get_grouped_dfs(RESULTS_PATH)
 DOMAINS: list[str] = grouped_initial["domains"]
 INITIAL_OUTPUTS = refresh_leaderboard()
 
 demo = gr.Blocks(
-    css=build_custom_css(DISPLAY_REFRESH_SECONDS),
-    head=refresh_countdown_head_js(DISPLAY_REFRESH_SECONDS),
+    css=build_custom_css(),
+    head=eval_countdown_head_js(),
 )
 with demo:
     gr.HTML(TITLE)
     gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
     status = gr.Markdown(INITIAL_OUTPUTS[2], elem_classes="markdown-text")
-    gr.HTML(refresh_countdown_markup(DISPLAY_REFRESH_SECONDS))
+    countdown = gr.HTML(INITIAL_OUTPUTS[3])
 
     domain_tables: list[tuple[gr.Dataframe, gr.Dataframe]] = []
     with gr.Tabs():
@@ -116,13 +143,13 @@ with demo:
         for i, domain in enumerate(DOMAINS):
             with gr.Tab(domain):
                 values_df = gr.Dataframe(
-                    value=INITIAL_OUTPUTS[3 + i * 2],
+                    value=INITIAL_OUTPUTS[4 + i * 2],
                     interactive=False,
                     wrap=True,
                     label="Metric values (lower is better)",
                 )
                 ranks_df = gr.Dataframe(
-                    value=INITIAL_OUTPUTS[4 + i * 2],
+                    value=INITIAL_OUTPUTS[5 + i * 2],
                     interactive=False,
                     wrap=True,
                     label="Ranks (lower is better)",
@@ -140,13 +167,13 @@ with demo:
             show_copy_button=True,
         )
 
-    refresh_outputs = [overall_values_df, overall_ranks_df, status]
+    refresh_outputs = [overall_values_df, overall_ranks_df, status, countdown]
     for values_df, ranks_df in domain_tables:
         refresh_outputs.extend([values_df, ranks_df])
 
     demo.load(refresh_leaderboard, inputs=[], outputs=refresh_outputs)
-    gr.Timer(value=DISPLAY_REFRESH_SECONDS).tick(
-        refresh_leaderboard, inputs=[], outputs=refresh_outputs
+    gr.Timer(value=EVAL_WATCH_POLL_SECONDS).tick(
+        maybe_refresh_after_eval, inputs=[], outputs=refresh_outputs
     )
 
 demo.queue(default_concurrency_limit=20).launch()

src/about.py

@@ -14,8 +14,8 @@ LLM_BENCHMARKS_TEXT = """
 
 1. **Background scheduler** runs every **`TSFM_BENCH_INTERVAL_SECONDS`** (default **3600 = 1 hour**):
    TS-Bench collect → TSFM.ai eval → update `results/`.
-2. Each run calls **TSFM.ai** for all configured models.
-3. The Gradio UI reloads tables every **`TSFM_REFRESH_SECONDS`** (default 60s) from disk.
+2. The leaderboard **refreshes once** when each eval run starts or finishes.
+3. The progress bar shows **time until the next eval cycle**.
 
 ### Required HF Space secret
 
@@ -29,7 +29,6 @@ LLM_BENCHMARKS_TEXT = """
 |---|---|---|
 | `TSFM_BENCH_INTERVAL_SECONDS` | `3600` | **Main knob**: seconds between collect+eval cycles (1 h) |
 | `TSFM_EVAL_INTERVAL_SECONDS` | (alias) | Same as above if `TSFM_BENCH_INTERVAL_SECONDS` unset |
-| `TSFM_REFRESH_SECONDS` | `60` | UI table reload interval (display only) |
 | `TS_BENCH_ROOT` | `vendor/ts_bench` | Path to TS-Bench collect scripts |
 
 ## Metrics

src/benchmark_config.py

@@ -5,7 +5,6 @@ from __future__ import annotations
 import os
 
 # One full cycle: TS-Bench collect → TSFM.ai eval → write results → leaderboard reload.
-# Override with TSFM_BENCH_INTERVAL_SECONDS (preferred) or TSFM_EVAL_INTERVAL_SECONDS.
 BENCHMARK_INTERVAL_SECONDS = int(
     os.getenv(
         "TSFM_BENCH_INTERVAL_SECONDS",
@@ -13,7 +12,7 @@ BENCHMARK_INTERVAL_SECONDS = int(
     )
 )
 
-# UI table reload (reads results/ from disk; does not call TSFM.ai).
-DISPLAY_REFRESH_SECONDS = int(os.getenv("TSFM_REFRESH_SECONDS", "60"))
+# Background poll interval: detect eval completion and refresh UI once (not shown to users).
+EVAL_WATCH_POLL_SECONDS = int(os.getenv("TSFM_EVAL_WATCH_POLL_SECONDS", "15"))
 
 BENCHMARK_INTERVAL_MINUTES = BENCHMARK_INTERVAL_SECONDS // 60

src/display/css_html_js.py

@@ -1,84 +1,106 @@
-def build_custom_css(refresh_seconds: int) -> str:
-    return f"""
-.markdown-text {{ font-size: 16px !important; }}
-.tab-buttons button {{ font-size: 20px; }}
-#leaderboard-table {{ margin-top: 15px; }}
-.auto-refresh-wrap {{
+def build_custom_css() -> str:
+    return """
+.markdown-text { font-size: 16px !important; }
+.tab-buttons button { font-size: 20px; }
+#leaderboard-table { margin-top: 15px; }
+.eval-countdown-wrap {
     margin: 0.75rem 0 1.25rem 0;
     padding: 0;
-}}
-.auto-refresh-label {{
+}
+.eval-countdown-label {
     font-size: 0.9rem;
     color: #94a3b8;
     margin-bottom: 0.45rem;
-}}
-.auto-refresh-track {{
+}
+.eval-countdown-track {
     width: 100%;
     height: 8px;
     border-radius: 999px;
     background: rgba(148, 163, 184, 0.2);
     overflow: hidden;
-}}
-.auto-refresh-fill {{
+}
+.eval-countdown-fill {
     height: 100%;
     width: 0%;
     border-radius: 999px;
     background: linear-gradient(90deg, #f97316, #fb923c);
-    animation: tsfm-refresh-progress {refresh_seconds}s linear infinite;
-}}
-@keyframes tsfm-refresh-progress {{
-    from {{ width: 0%; }}
-    to {{ width: 100%; }}
-}}
+    transition: width 1s linear;
+}
 """
 
 
-def refresh_countdown_markup(seconds: int) -> str:
-    """Static HTML only — Gradio on HF Spaces strips <script> inside gr.HTML."""
+def eval_countdown_markup(next_eval_at_unix: int, interval_seconds: int, running: bool = False) -> str:
+    if running:
+        label = "Evaluation in progress…"
+        progress = 0
+    else:
+        label = "Next eval cycle loading…"
+        progress = 0
+
     return f"""
-<div class="auto-refresh-wrap" id="tsfm-refresh-widget">
-  <div class="auto-refresh-label" id="tsfm-refresh-label">Next display reload in {seconds}s</div>
-  <div class="auto-refresh-track">
-    <div class="auto-refresh-fill" id="tsfm-refresh-fill"></div>
+<div class="eval-countdown-wrap" id="tsfm-eval-countdown"
+     data-next-at="{next_eval_at_unix}"
+     data-interval="{interval_seconds}"
+     data-running="{'1' if running else '0'}">
+  <div class="eval-countdown-label" id="tsfm-eval-countdown-label">{label}</div>
+  <div class="eval-countdown-track">
+    <div class="eval-countdown-fill" id="tsfm-eval-countdown-fill" style="width: {progress}%;"></div>
   </div>
 </div>
 """
 
 
-def refresh_countdown_head_js(seconds: int) -> str:
-    """Inject via Blocks(head=...) so countdown JS runs on Hugging Face Spaces."""
-    return f"""
+def eval_countdown_head_js() -> str:
+    """Countdown to next eval cycle; progress bar fills as the interval elapses."""
+    return """
 <script>
-(function () {{
-  const total = {seconds};
+(function () {
+  function formatRemaining(totalSeconds) {
+    const h = Math.floor(totalSeconds / 3600);
+    const m = Math.floor((totalSeconds % 3600) / 60);
+    const s = totalSeconds % 60;
+    if (h > 0) {
+      return h + "h " + m + "m " + s + "s";
+    }
+    if (m > 0) {
+      return m + "m " + s + "s";
+    }
+    return s + "s";
+  }
 
-  function render(remaining) {{
-    const label = document.getElementById("tsfm-refresh-label");
-    if (label) {{
-      label.textContent = "Next display reload in " + remaining + "s";
-    }}
-  }}
+  function tick() {
+    const root = document.getElementById("tsfm-eval-countdown");
+    const label = document.getElementById("tsfm-eval-countdown-label");
+    const fill = document.getElementById("tsfm-eval-countdown-fill");
+    if (!root || !label || !fill) return;
 
-  function startTimer() {{
-    if (window.__tsfmRefreshTimerId) return;
-    const label = document.getElementById("tsfm-refresh-label");
-    if (!label) {{
-      setTimeout(startTimer, 250);
+    if (root.dataset.running === "1") {
+      label.textContent = "Evaluation in progress…";
+      fill.style.width = "0%";
       return;
-    }}
-    let remaining = total;
-    render(remaining);
-    window.__tsfmRefreshTimerId = setInterval(function () {{
-      remaining = remaining <= 0 ? total : remaining - 1;
-      render(remaining);
-    }}, 1000);
-  }}
+    }
+
+    const nextAt = parseInt(root.dataset.nextAt || "0", 10);
+    const interval = parseInt(root.dataset.interval || "3600", 10);
+    const remaining = Math.max(0, nextAt - Math.floor(Date.now() / 1000));
+    const elapsed = Math.max(0, interval - remaining);
+    const pct = interval > 0 ? Math.min(100, (elapsed / interval) * 100) : 0;
+
+    label.textContent = "Next eval in " + formatRemaining(remaining);
+    fill.style.width = pct + "%";
+  }
+
+  function start() {
+    if (window.__tsfmEvalCountdownId) return;
+    tick();
+    window.__tsfmEvalCountdownId = setInterval(tick, 1000);
+  }
 
-  if (document.readyState === "loading") {{
-    document.addEventListener("DOMContentLoaded", startTimer);
-  }} else {{
-    startTimer();
-  }}
-}})();
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", start);
+  } else {
+    start();
+  }
+})();
 </script>
 """

src/eval_scheduler.py

@@ -12,7 +12,7 @@ import time
 from datetime import datetime, timezone
 from pathlib import Path
 
-from src.benchmark_config import BENCHMARK_INTERVAL_SECONDS, DISPLAY_REFRESH_SECONDS
+from src.benchmark_config import BENCHMARK_INTERVAL_SECONDS
 
 logger = logging.getLogger(__name__)
 
@@ -76,6 +76,15 @@ class LiveEvalScheduler:
             return None
         return max(0, int(self._next_run_at - time.monotonic()))
 
+    def next_eval_at_unix(self) -> int:
+        remaining = self.seconds_until_next_run()
+        if remaining is None:
+            return int(time.time()) + self.interval_seconds
+        return int(time.time()) + remaining
+
+    def is_running(self) -> bool:
+        return self.snapshot().get("status") == "running"
+
     def _loop(self) -> None:
         if self.run_on_startup:
             self._run_once()