Replace Gradio Blocks with gradio.Server: own HTML shell, own CSS, no selector rewriting

README.md

@@ -59,13 +59,24 @@ keyword search rather than erroring.
 | `MOMENTS_EMBED_MODEL` | query embedder (default `BAAI/bge-m3`, must match the dataset's) |
 | `HF_TOKEN` | required while the dataset is private, and for Inference Providers |
 
-## Notes for anyone editing the CSS
-
-Gradio 6 rewrites every selector passed to `css=` to sit under
-`.gradio-container… .contain`, so a rule aimed at the container itself becomes a
-descendant of it and silently matches nothing. Shell-level rules therefore live
-in `wide.css`, injected through `head=`, where they are not rewritten — and need
-`!important`, because head styles load before Gradio's own.
+## Why `gradio.Server` and not Blocks
+
+The page is hand-written HTML/CSS/JS served by `gradio.Server` (a FastAPI
+subclass): `index.html` for the shell, `static/app.css`, `static/app.js`, and one
+`/api/search` endpoint returning rendered HTML. Spaces still runs it under the
+gradio SDK.
+
+Blocks was the original approach and cost more than it gave. Gradio 6 rewrites
+every selector passed to `css=` to sit under `.gradio-container… .contain`, so
+rules aimed at the shell silently match nothing; Buttons land in a Row with
+`flex: 1 1 0` and divide the width regardless of content; and its component
+styling reaches raw markup inside `gr.HTML`, so `<button>`/`<img>` resets had to
+be fought with `!important` — and lost anyway on at least one real Android
+device while passing in emulation. The UI here only ever needed a text input,
+six links, two selects and a checkbox, so the framework was carrying no weight.
+
+There is no `!important` in `app.css`. If a rule does not win, that is a bug in
+the file rather than a fight with a framework.
 
 ## Caveats
 

app.py

@@ -2,8 +2,11 @@
 
 The dataset is the API; this is thin client #1 over it. Search runs server-side
 in DuckDB against a single parquet, results are plain HTML, and playback is a
-`<video>` pointed straight at the public bucket (range requests, so seeking into
-the middle of a film costs nothing).
+`<video>` pointed at the public bucket.
+
+Served by `gradio.Server` (a FastAPI subclass) rather than Gradio Blocks: the
+page is hand-written HTML/CSS/JS, so nothing rewrites the stylesheet or injects
+component styling over it. Spaces still runs it under the gradio SDK.
 """
 
 from __future__ import annotations
@@ -11,12 +14,13 @@ from __future__ import annotations
 import logging
 import os
 import time
+from functools import lru_cache
 from pathlib import Path
 
 import numpy as np
-
-import gradio as gr
-from functools import lru_cache
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from gradio import Server
 from huggingface_hub import InferenceClient
 
 import render
@@ -27,11 +31,6 @@ logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(mess
 log = logging.getLogger("moments")
 
 HERE = Path(__file__).parent
-CSS = (HERE / "style.css").read_text()
-HEAD = (
-    f"<style>{(HERE / 'wide.css').read_text()}</style>"
-    f"<script>{(HERE / 'player.js').read_text()}</script>"
-)
 
 SUGGESTIONS = [
     "children washing hands",
@@ -42,144 +41,153 @@ SUGGESTIONS = [
     "family at dinner",
 ]
 
-STAGE = """
-<div class="stage" id="stage" hidden>
-  <div class="screen">
-    <video id="player" controls playsinline preload="metadata"></video>
-    <button type="button" id="stage-play" aria-label="Play">
-      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l11-6.5z"/></svg>
-    </button>
-  </div>
-  <p class="stage-meta" id="stage-meta"></p>
-  <div id="stage-list"></div>
-</div>
-"""
+app = Server()
+app.mount("/static", StaticFiles(directory=HERE / "static"), name="static")
+
+
+# --- data -------------------------------------------------------------------
+
+DATA = None
+BACKENDS: list = []
+BY_NAME: dict = {}
+LOAD_ERROR: str | None = None
 
 try:
     DATA = store.load()
 except Exception as exc:  # most likely: private dataset, no HF_TOKEN secret
     log.exception("could not load the dataset")
-    with gr.Blocks(css=CSS, theme=gr.themes.Base(), title="Prelinger moments") as demo:
-        gr.HTML(
-            '<div class="masthead"><h1>Prelinger moments</h1>'
-            f"<p>Could not read <code>{store.DATASET_ID}</code>. While the dataset "
-            "is private this Space needs an <code>HF_TOKEN</code> secret with read "
-            f"access.</p><p><code>{type(exc).__name__}: {exc}</code></p></div>"
-        )
-    if __name__ == "__main__":
-        demo.launch()
-    raise SystemExit(0)
+    LOAD_ERROR = f"{type(exc).__name__}: {exc}"
 
-# The one external call in the whole design: everything else is DuckDB over a
-# single parquet. Cached because the same query gets re-run on every facet change.
 EMBED_MODEL = os.environ.get("MOMENTS_EMBED_MODEL", "BAAI/bge-m3")
 _client = InferenceClient()
 
 
 @lru_cache(maxsize=512)
-def embed_query(text: str) -> tuple[float, ...]:
+def _embed_cached(text: str) -> tuple[float, ...]:
     vec = _client.feature_extraction(text, model=EMBED_MODEL)
     return tuple(float(x) for x in np.asarray(vec).ravel())
 
 
-def _embed(text: str) -> list[float]:
-    return list(embed_query(text))
+def embed_query(text: str) -> list[float]:
+    return list(_embed_cached(text))
 
 
-try:
-    _embed("warm up")
-    EMBEDDER = _embed
-except Exception as exc:
-    log.warning("query embedder unavailable, keyword search only: %s", exc)
-    EMBEDDER = None
+if DATA is not None:
+    try:
+        embed_query("warm up")
+        embedder = embed_query
+    except Exception as exc:
+        log.warning("query embedder unavailable, keyword search only: %s", exc)
+        embedder = None
+    BACKENDS = search.build(DATA, embed_query=embedder)
+    BY_NAME = {b.blurb: b for b in BACKENDS}
+    OPENING = render.opening(search.sample(DATA))
+    DECADES = ["any decade", *DATA.decades, "undated"]
+else:
+    OPENING, DECADES = "", ["any decade"]
+
+
+# --- page -------------------------------------------------------------------
+
+
+def _options(values: list[str], selected: str) -> str:
+    return "".join(
+        f'<option value="{v}"{" selected" if v == selected else ""}>{v}</option>'
+        for v in values
+    )
+
+
+def page() -> str:
+    shell = (HERE / "index.html").read_text()
+    if DATA is None:
+        body = (
+            '<header class="masthead"><h1>Prelinger moments</h1>'
+            f"<p>Could not read <code>{store.DATASET_ID}</code>. While the dataset "
+            "is private this Space needs an <code>HF_TOKEN</code> secret with read "
+            f"access.</p><p class='stamp'>{LOAD_ERROR}</p></header>"
+        )
+        return shell.replace("<!--BODY-->", body)
 
-BACKENDS = search.build(DATA, embed_query=EMBEDDER)
-BY_NAME = {b.blurb: b for b in BACKENDS}
-MODES = list(BY_NAME)
-BACKEND = BACKENDS[0]
+    modes = list(BY_NAME)
+    mode_select = (
+        '<select id="mode" aria-label="Search mode">' + _options(modes, modes[0]) + "</select>"
+        if len(modes) > 1
+        else ""
+    )
+    chips = "".join(f'<button type="button" class="chip">{s}</button>' for s in SUGGESTIONS)
+    body = f"""
+<header class="masthead">
+  <h1>Prelinger moments</h1>
+  <p>{DATA.n_moments:,} minute-long moments from {DATA.n_films:,} public-domain films in
+  the <a href="https://archive.org/details/prelinger" target="_blank" rel="noopener">Prelinger
+  Archives</a>, each described second by second by a video model. Search for what you want to
+  <em>see</em> — results play from the moment it happens.</p>
+</header>
+
+<form id="search" autocomplete="off">
+  <input id="q" name="q" type="search" placeholder="children washing hands"
+         aria-label="Search the captions" enterkeyhint="search">
+  <div class="suggest">{chips}</div>
+  <div class="facets">
+    <select id="decade" aria-label="Decade">{_options(DECADES, "any decade")}</select>
+    <label class="check"><input type="checkbox" id="spread" checked>
+      <span>at most two moments per film</span></label>
+    {mode_select}
+  </div>
+</form>
 
-DECADES = ["any decade", *DATA.decades, "undated"]
+<div class="stage" id="stage" hidden>
+  <div class="screen">
+    <video id="player" controls playsinline preload="metadata"></video>
+    <button type="button" id="stage-play" aria-label="Play">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l11-6.5z"/></svg>
+    </button>
+  </div>
+  <p class="stage-meta" id="stage-meta"></p>
+  <div id="stage-list"></div>
+</div>
+
+<main id="results" aria-live="polite">{OPENING}</main>
+"""
+    return shell.replace("<!--BODY-->", body)
 
 
-OPENING = render.opening(search.sample(DATA))
+@app.get("/", response_class=HTMLResponse)
+async def index():
+    return page()
 
 
-def run(query: str, decade: str, spread: bool, mode: str = "") -> str:
-    if not query or not query.strip():
-        return OPENING
-    q = search.Query(
-        text=query.strip(),
+@app.get("/api/search")
+async def api_search(
+    q: str = "",
+    decade: str = "any decade",
+    spread: str = "1",
+    mode: str = "",
+):
+    if DATA is None:
+        return JSONResponse({"html": "", "ms": 0})
+    if not q.strip():
+        return JSONResponse({"html": OPENING, "ms": 0})
+
+    query = search.Query(
+        text=q.strip(),
         limit=60,
         decade=int(decade[:4]) if decade and decade[0].isdigit() else None,
         undated=decade == "undated",
-        per_film=2 if spread else None,
+        per_film=2 if spread in ("1", "true", "on") else None,
     )
-    backend = BY_NAME.get(mode, BACKEND)
+    backend = BY_NAME.get(mode) or BACKENDS[0]
     t0 = time.perf_counter()
     try:
-        hits = backend.search(q)
+        hits = backend.search(query)
     except Exception as exc:  # provider hiccup — keyword search still works
         log.warning("%s search failed, falling back to keyword: %s", backend.name, exc)
         backend = BY_NAME["keyword"]
-        hits = backend.search(q)
+        hits = backend.search(query)
     ms = (time.perf_counter() - t0) * 1000
-    log.info("%r -> %d hits in %.0f ms (%s)", q.text, len(hits), ms, backend.name)
-    return render.results(hits, q.text, ms)
-
-
-with gr.Blocks(css=CSS, head=HEAD, theme=gr.themes.Base(), title="Prelinger moments",
-               analytics_enabled=False) as demo:
-    gr.HTML(
-        '<div class="masthead"><h1>Prelinger moments</h1><p>'
-        f"{DATA.n_moments:,} minute-long moments from {DATA.n_films:,} public-domain films in the "
-        '<a href="https://archive.org/details/prelinger" target="_blank" rel="noopener">'
-        "Prelinger Archives</a>, each described second by second by a video model. "
-        "Search for what you want to <em>see</em> — results play from the moment it happens."
-        "</p></div>"
-    )
-
-    q = gr.Textbox(
-        label="",
-        placeholder="children washing hands",
-        lines=1,
-        max_lines=1,
-        elem_id="q",
-        show_label=False,
-        container=False,
-        autofocus=True,
-    )
-
-    with gr.Row(elem_classes="suggest"):
-        chips = [gr.Button(s, size="sm", variant="secondary") for s in SUGGESTIONS]
-
-    with gr.Row(elem_id="facets"):
-        decade = gr.Dropdown(
-            DECADES, value="any decade", show_label=False, container=False, scale=0
-        )
-        spread = gr.Checkbox(
-            value=True, label="at most two moments per film", container=False, scale=0
-        )
-        # Only offered when the data supports more than one way of searching.
-        mode = gr.Dropdown(
-            MODES,
-            value=MODES[0],
-            show_label=False,
-            container=False,
-            scale=0,
-            visible=len(MODES) > 1,
-        )
-
-    gr.HTML(STAGE)
-    out = gr.HTML(OPENING)
-
-    inputs = [q, decade, spread, mode]
-    q.submit(run, inputs, out)
-    decade.change(run, inputs, out)
-    spread.change(run, inputs, out)
-    mode.change(run, inputs, out)
-    for chip, text in zip(chips, SUGGESTIONS):
-        chip.click(lambda t=text: t, None, q).then(run, inputs, out)
+    log.info("%r -> %d hits in %.0f ms (%s)", query.text, len(hits), ms, backend.name)
+    return JSONResponse({"html": render.results(hits, query.text, ms), "ms": ms})
 
 
 if __name__ == "__main__":
-    demo.launch()
+    app.launch(show_error=True)

index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<!-- Ours, not a framework's: no text-autosizing surprises, no forced scaling. -->
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="color-scheme" content="light">
+<title>Prelinger moments</title>
+<link rel="stylesheet" href="/static/app.css">
+</head>
+<body>
+<div class="shell">
+<!--BODY-->
+</div>
+<script src="/static/app.js" defer></script>
+</body>
+</html>

style.css → static/app.css

@@ -1,57 +1,67 @@
-/* Prelinger moments — paper, ink, and one rust-coloured accent that only ever
-   means "this is where your query landed". Everything else is type and rules. */
-
-:root, .dark {
-  /* Grounded in the editing bench rather than in stationery: the cool grey of
-     a grey card, the near-black of film leader, and one amber that stands for
-     light coming through the film base. Amber is reserved for a single meaning
-     — this is the second your query landed on. */
+/* Prelinger moments.
+
+   Grounded in the editing bench rather than in stationery: the cool grey of a
+   grey card, the near-black of film leader, and one amber that stands for light
+   through the film base. Amber is reserved for a single meaning — this is the
+   second your query landed on. Everything else is type and hairlines.
+
+   No framework underneath this, so no !important anywhere. If a rule here
+   doesn't win, it's a bug in this file. */
+
+:root {
   --paper:  #e6e7e3;
-  --panel:  #dcdedA;
+  --panel:  #dcdeda;
   --ink:    #16181a;
   --muted:  #6d726d;
   --rule:   #c7cbc5;
   --accent: #9a5a12;
 
-  /* Industrial film speaks in two voices: gothic title cards and typewritten
-     continuity sheets. No book serif — this was never a printed page. */
+  /* Industrial film spoke in gothic title cards and typewritten continuity
+     sheets, never in a book serif. Falls to Roboto on Android by design. */
   --display: Futura, "Century Gothic", "Avenir Next", "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
-  --sans:  ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
-
-  --layout-gap: 0px;
-  --block-padding: 0px;
-  --body-background-fill: var(--paper);
-  --background-fill-primary: var(--paper);
-  --background-fill-secondary: var(--paper);
-  --block-background-fill: var(--paper);
-  --border-color-primary: var(--rule);
-  --body-text-color: var(--ink);
-  --block-label-text-color: var(--muted);
-}
-
-html, body, gradio-app { background: var(--paper) !important; }
-
-/* Gradio ships a themed box around every component. Take them all off; the few
-   rules this design wants are added back by hand. */
-.gradio-container .block,
-.gradio-container .form,
-.gradio-container .wrap,
-.gradio-container .wrap-inner,
-.gradio-container .secondary-wrap,
-.gradio-container .input-container {
-  border: none !important;
-  box-shadow: none !important;
-  background: transparent !important;
-  border-radius: 0 !important;
-  padding: 0 !important;
-}
-.gradio-container .block { overflow: visible !important; min-width: 0 !important; }
-.gradio-container .html-container { padding: 0 !important; }
-footer { display: none !important; }
-
-/* --- masthead ----------------------------------------------------------- */
+  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+/* Controls inherit nothing useful by default; say it once, here. */
+button, input, select {
+  font: inherit;
+  color: inherit;
+  margin: 0;
+}
+button {
+  background: none;
+  border: none;
+  padding: 0;
+  border-radius: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+img { display: block; max-width: 100%; }
+
+.shell {
+  max-width: 62rem;
+  margin: 0 auto;
+  padding: 0 1.25rem 4rem;
+  transition: padding-right 180ms ease;
+}
+
+/* --- masthead ------------------------------------------------------------ */
 
 .masthead { padding: 2.6rem 0 0.9rem; }
 .masthead h1 {
@@ -60,204 +70,98 @@ footer { display: none !important; }
   font-weight: 400;
   letter-spacing: 0.01em;
   margin: 0;
-  color: var(--ink);
 }
 .masthead p {
   margin: 0.45rem 0 0;
   color: var(--muted);
   font-size: 0.86rem;
-  line-height: 1.5;
-  max-width: 40rem;
-}
-/* Gradio pads anchors inside HTML blocks; take it back off. */
-.gradio-container .masthead a, .gradio-container .stamp a {
-  padding: 0 !important;
-  margin: 0 !important;
-}
-.masthead a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
-
-/* --- search ------------------------------------------------------------- */
-
-#q .input-container { border-bottom: 1px solid var(--ink) !important; }
-#q:focus-within .input-container { border-bottom-color: var(--accent) !important; }
-#q input, #q textarea {
-  font-family: var(--display) !important;
-  font-size: 1.35rem !important;
-  line-height: 1.6 !important;
-  color: var(--ink) !important;
-  background: transparent !important;
-  border: none !important;
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  padding: 0.35rem 0 0.5rem !important;
-  resize: none !important;
-}
-#q input::placeholder, #q textarea::placeholder { color: #a4a9a3 !important; }
-#q input:focus, #q textarea:focus { outline: none !important; }
+  line-height: 1.55;
+  max-width: 42rem;
+}
+.masthead a { color: var(--muted); text-underline-offset: 2px; }
+.masthead em { font-style: italic; color: var(--ink); }
+
+/* --- search -------------------------------------------------------------- */
+
+#q {
+  width: 100%;
+  font-family: var(--display);
+  font-size: 1.35rem;
+  line-height: 1.6;
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--ink);
+  border-radius: 0;
+  padding: 0.35rem 0 0.5rem;
+  -webkit-appearance: none;
+  appearance: none;
+}
+#q::placeholder { color: #a4a9a3; }
+#q:focus { outline: none; border-bottom-color: var(--accent); }
+#q::-webkit-search-cancel-button { -webkit-appearance: none; }
 
 .suggest {
-  display: flex !important;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.2rem 1.2rem;
   padding: 0.7rem 0 0;
+}
+.chip {
   font-size: 0.8rem;
   color: var(--muted);
-  flex-wrap: wrap;
-  justify-content: flex-start !important;
-  gap: 0 1.2rem !important;
-}
-/* Gradio puts Buttons directly in the Row with `flex: 1 1 0`, so six of them
-   divide the width equally however wide the page is — and squash on a phone
-   instead of wrapping. These read as links: each should be the width of its own
-   words, and the row should wrap when it runs out of room. */
-.suggest > button,
-.suggest > .block {
-  flex: 0 0 auto !important;
-  min-width: 0 !important;
-  width: auto !important;
-}
-.gradio-container .suggest button {
-  background: none !important;
-  border: none !important;
-  box-shadow: none !important;
-  color: var(--muted) !important;
-  font-family: var(--sans) !important;
-  font-size: 0.8rem !important;
-  padding: 0.15rem 0 !important;
-  min-width: 0 !important;
-  text-align: left;
-  border-bottom: 1px solid var(--rule) !important;
-  border-radius: 0 !important;
+  padding: 0.3rem 0;
+  border-bottom: 1px solid var(--rule);
   white-space: nowrap;
 }
-.gradio-container .suggest button:hover { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
+.chip:hover, .chip:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
 
-#facets {
-  margin-top: 0.9rem;
-  gap: 0 1.6rem !important;
-  align-items: center;
+.facets {
+  display: flex;
   flex-wrap: wrap;
+  align-items: center;
+  gap: 0.6rem 1.6rem;
+  margin-top: 0.9rem;
+  font-size: 0.78rem;
+  color: var(--muted);
 }
-.gradio-container #facets > .block {
-  flex: 0 0 auto !important;
-  min-width: 0 !important;
-  width: auto !important;
-  margin: 0 !important;
-}
-#facets label { font-size: 0.78rem !important; color: var(--muted) !important; gap: 0.4rem; }
-#facets input[type="checkbox"] {
-  accent-color: var(--accent);
-  width: 0.85rem; height: 0.85rem;
-  border-radius: 0 !important;
-}
-#facets input[role="combobox"], #facets select {
-  font-family: var(--mono) !important;
-  font-size: 0.78rem !important;
-  color: var(--muted) !important;
-  border-bottom: 1px solid var(--rule) !important;
-  padding: 0.1rem 1.1rem 0.1rem 0 !important;
-  cursor: pointer;
-  width: 8.5rem;
-}
-#facets .icon-wrap { width: 0.6rem; color: var(--muted); }
-#facets .options, .gradio-container .options {
-  background: var(--paper) !important;
-  border: 1px solid var(--rule) !important;
-  border-radius: 0 !important;
-  font-family: var(--mono) !important;
-  font-size: 0.78rem !important;
-}
-.gradio-container .options .item.selected,
-.gradio-container .options .item:hover { background: var(--panel) !important; color: var(--ink) !important; }
-
-/* --- stage -------------------------------------------------------------- */
-
-/* A fixed panel, not a sticky banner: results are a long list, and playing the
-   fortieth one must not move the page. Sticky can't do this — the stage's
-   containing block is its own Gradio node, so it scrolls away rather than
-   pinning. Fixed also means you can keep scanning while a clip runs. */
-.stage {
-  position: fixed;
-  right: 1.5rem;
-  bottom: 1.5rem;
-  z-index: 40;
-  width: 22rem;
-  max-width: calc(100vw - 3rem);
-  background: var(--paper);
-  border: 1px solid var(--ink);
-  padding: 0.55rem 0.6rem 0.5rem;
-}
-.stage[hidden] { display: none; }
-/* Only the shot list scrolls. Scrolling the whole panel pushed the video out of
-   view while the audio kept playing — you could hear the film but not see it. */
-.stage { display: flex; flex-direction: column; max-height: calc(100vh - 3rem); }
-.stage .screen, .stage .stage-meta { flex: 0 0 auto; }
-#stage-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
-/* The source derivatives are 320 px wide; the panel is sized close to native
-   so playback is not just magnified grain. */
-.stage video {
-  display: block;
-  width: 100%;
-  max-height: 40vh;
-  background: #12100e;
-}
-.stage-meta {
+.facets select {
   font-family: var(--mono);
-  font-size: 0.7rem;
+  font-size: 0.78rem;
   color: var(--muted);
-  margin: 0.45rem 0 0;
-  display: flex;
-  gap: 0.6rem;
-  align-items: baseline;
-  flex-wrap: wrap;
-}
-/* Keep the last results clear of the panel while it is open. */
-body.has-stage .gradio-container { padding-bottom: 20rem; }
-
-@media (max-width: 640px) {
-  .stage {
-    right: 0; bottom: 0;
-    width: 100%; max-width: 100%;
-    border-width: 1px 0 0;
-    max-height: 76vh;
-  }
-  .stage video { max-height: 34vh; }
-  /* Comfortable tap targets, and timestamps that read as tappable. */
-  .events .at { padding: 0.35rem 0 !important; text-decoration: underline; text-underline-offset: 3px; }
-  .events li { padding: 0.3rem 0; }
-  body.has-stage .gradio-container { padding-bottom: 16rem; }
-}
-.stage-meta b {
-  font-family: var(--display);
-  font-weight: 400;
-  font-size: 0.85rem;
-  color: var(--ink);
-  flex: 1 1 100%;
-  line-height: 1.3;
-}
-.stage-meta .cut { color: var(--accent); }
-.stage-meta button {
-  margin-left: auto;
   background: none;
-  border: 1px solid var(--rule);
-  padding: 0.3rem 0.7rem;
-  font-family: var(--mono);
-  font-size: 0.72rem;
-  color: var(--ink);
-  cursor: pointer;
-}
-.stage-meta button:hover { border-color: var(--accent); color: var(--accent); }
+  border: none;
+  border-bottom: 1px solid var(--rule);
+  border-radius: 0;
+  padding: 0.25rem 1.2rem 0.25rem 0;
+  -webkit-appearance: none;
+  appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
+                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
+  background-position: right 0.35rem center, right 0.05rem center;
+  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
+  background-repeat: no-repeat;
+}
+.check { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; }
+.check input { accent-color: var(--accent); width: 0.9rem; height: 0.9rem; }
 
-/* --- results ------------------------------------------------------------ */
+/* --- results ------------------------------------------------------------- */
 
 .count {
+  display: flex;
+  gap: 0.7rem;
   font-family: var(--mono);
   font-size: 0.74rem;
   color: var(--muted);
-  margin: 1.4rem 0 0.2rem;
-  display: flex;
-  gap: 0.7rem;
+  margin: 1.6rem 0 0.2rem;
 }
 .count .ms { margin-left: auto; color: #a4a9a3; }
-.empty { color: var(--muted); font-size: 0.92rem; line-height: 1.65; margin: 2rem 0; max-width: 34rem; }
+.empty {
+  color: var(--muted);
+  font-size: 0.92rem;
+  line-height: 1.65;
+  margin: 2rem 0;
+  max-width: 34rem;
+}
 .empty em { font-style: italic; color: var(--ink); }
 
 .moment {
@@ -271,49 +175,34 @@ body.has-stage .gradio-container { padding-bottom: 20rem; }
 
 .frame {
   position: relative;
-  display: block !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  border: none !important;
-  background: var(--panel) !important;
-  box-shadow: none !important;
-  cursor: pointer;
-  line-height: 0;
-  width: 100% !important;
+  display: block;
+  width: 100%;
   aspect-ratio: 4 / 3;
+  background: var(--panel);
   overflow: hidden;
-  border-radius: 0 !important;
-  -webkit-appearance: none;
-  appearance: none;
-}
-.frame img {
-  width: 100% !important;
-  height: 100% !important;
-  max-width: none !important;
-  object-fit: cover;
-  display: block !important;
-  border-radius: 0 !important;
+  line-height: 0;
 }
+.frame img { width: 100%; height: 100%; object-fit: cover; }
 .frame .cue {
   position: absolute;
-  left: 0; bottom: 0;
+  left: 0;
+  bottom: 0;
   font-family: var(--mono);
   font-size: 0.66rem;
   color: var(--paper);
-  background: rgba(20, 18, 15, 0.72);
+  background: rgba(20, 18, 15, 0.74);
   padding: 0.12rem 0.35rem;
   line-height: 1.4;
 }
 .frame:hover .cue, .moment.playing .frame .cue { background: var(--accent); }
-.moment.playing .frame { outline: 2px solid var(--accent); outline-offset: 0; }
+.moment.playing .frame { outline: 2px solid var(--accent); }
 
 .meta h2 {
   font-family: var(--display);
   font-size: 1.08rem;
-  font-weight: 400 !important;
-  margin: -0.15rem 0 0.2rem;
+  font-weight: 400;
   line-height: 1.35;
-  color: var(--ink);
+  margin: -0.15rem 0 0.2rem;
 }
 .stamp {
   font-family: var(--mono);
@@ -330,7 +219,7 @@ body.has-stage .gradio-container { padding-bottom: 20rem; }
   grid-template-columns: 3.4rem 1fr;
   gap: 0.6rem;
   align-items: baseline;
-  padding: 0.14rem 0;
+  padding: 0.16rem 0;
   font-size: 0.88rem;
   line-height: 1.5;
   color: var(--muted);
@@ -340,15 +229,8 @@ body.has-stage .gradio-container { padding-bottom: 20rem; }
   font-family: var(--mono);
   font-size: 0.72rem;
   color: var(--muted);
-  background: none !important;
-  border: none !important;
-  box-shadow: none !important;
-  border-radius: 0 !important;
-  padding: 0;
   text-align: left;
-  cursor: pointer;
-  -webkit-appearance: none;
-  appearance: none;
+  padding: 0.1rem 0;
 }
 .events li.hit .at { color: var(--accent); }
 .events .at:hover { text-decoration: underline; text-underline-offset: 2px; }
@@ -371,13 +253,7 @@ body.has-stage .gradio-container { padding-bottom: 20rem; }
   max-width: 42rem;
 }
 
-@media (max-width: 640px) {
-  .moment { grid-template-columns: 1fr; gap: 0.7rem; }
-  .frame { max-width: 18rem; }
-  #q textarea { font-size: 1.15rem !important; }
-}
-
-/* --- opening: a few moments, at random ---------------------------------- */
+/* --- opening: a few moments, at random ----------------------------------- */
 
 .opening {
   display: grid;
@@ -386,37 +262,42 @@ body.has-stage .gradio-container { padding-bottom: 20rem; }
   gap: 1.1rem 1rem;
   margin: 0.4rem 0 0;
 }
-.opening .tile { display: block; }
-.opening .frame { aspect-ratio: 4 / 3; }
 .opening h3 {
   font-family: var(--display);
   font-size: 0.82rem;
-  font-weight: 400 !important;
+  font-weight: 400;
   line-height: 1.3;
   margin: 0.4rem 0 0;
-  color: var(--ink);
 }
 .opening .stamp { margin: 0.15rem 0 0; }
 
-/* --- the shot list in the rail ------------------------------------------ */
+/* --- the player ---------------------------------------------------------- */
 
-/* Shown at every width: segments beneath the video is what people reach for,
-   and on a phone the card behind the panel is covered anyway. */
-#stage-list { display: block; }
-#stage-list .events { margin-top: 0.6rem; border-top: 1px solid var(--rule); padding-top: 0.5rem; }
-#stage-list .events li { grid-template-columns: 3.1rem 1fr; font-size: 0.82rem; }
-#stage-list .scene-text {
-  font-size: 0.78rem;
-  line-height: 1.55;
-  color: var(--muted);
-  margin: 0.7rem 0 0;
-  border-top: 1px solid var(--rule);
-  padding-top: 0.5rem;
+/* A fixed panel, not a sticky banner: playing the fortieth result must not move
+   the page. Only the shot list scrolls — scrolling the whole panel used to push
+   the video out of view while the audio kept going. */
+.stage {
+  position: fixed;
+  right: 1.5rem;
+  bottom: 1.5rem;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  width: 22rem;
+  max-width: calc(100vw - 3rem);
+  max-height: calc(100vh - 3rem);
+  background: var(--paper);
+  border: 1px solid var(--ink);
+  padding: 0.55rem 0.6rem 0.5rem;
 }
-
-/* --- play affordance ----------------------------------------------------- */
+.stage[hidden] { display: none; }
+.stage .screen, .stage .stage-meta { flex: 0 0 auto; }
 
 .screen { position: relative; line-height: 0; }
+/* The source derivatives are 320 px wide; sized so playback is not just
+   magnified grain. */
+.stage video { display: block; width: 100%; max-height: 40vh; background: #12100e; }
+
 #stage-play {
   position: absolute;
   inset: 0;
@@ -426,14 +307,102 @@ body.has-stage .gradio-container { padding-bottom: 20rem; }
   display: none;
   align-items: center;
   justify-content: center;
-  padding: 0;
-  border: none;
+  border: 2px solid var(--paper);
   border-radius: 50%;
   background: rgba(22, 24, 26, 0.78);
-  border: 2px solid var(--paper);
-  cursor: pointer;
 }
 /* Shown only while the video is actually paused — never decoration. */
 .stage.paused #stage-play { display: flex; }
 #stage-play svg { width: 2.2rem; height: 2.2rem; fill: var(--paper); }
 #stage-play:hover { background: var(--accent); }
+
+.stage-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.6rem;
+  font-family: var(--mono);
+  font-size: 0.7rem;
+  color: var(--muted);
+  margin: 0.5rem 0 0;
+}
+.stage-meta b {
+  flex: 1 1 100%;
+  font-family: var(--display);
+  font-weight: 400;
+  font-size: 0.85rem;
+  color: var(--ink);
+  line-height: 1.3;
+}
+.stage-meta .cut { color: var(--accent); }
+.stage-meta button {
+  margin-left: auto;
+  border: 1px solid var(--rule);
+  padding: 0.3rem 0.7rem;
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  color: var(--ink);
+}
+.stage-meta button:hover { border-color: var(--accent); color: var(--accent); }
+
+#stage-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
+#stage-list .events { margin-top: 0.6rem; border-top: 1px solid var(--rule); padding-top: 0.5rem; }
+#stage-list .events li { grid-template-columns: 3.1rem 1fr; font-size: 0.82rem; }
+#stage-list .scene-text {
+  font-size: 0.78rem;
+  line-height: 1.55;
+  color: var(--muted);
+  margin: 0.7rem 0 0;
+  border-top: 1px solid var(--rule);
+  padding-top: 0.5rem;
+}
+
+body.has-stage .shell { padding-bottom: 20rem; }
+
+/* --- phones -------------------------------------------------------------- */
+
+@media (max-width: 640px) {
+  .shell { padding: 0 1rem 3rem; }
+  .masthead { padding-top: 1.8rem; }
+  #q { font-size: 1.15rem; }
+  .moment { grid-template-columns: 1fr; gap: 0.7rem; }
+  .frame { max-width: 18rem; }
+  /* Comfortable tap targets, and timestamps that read as tappable. */
+  .events li { padding: 0.3rem 0; }
+  .events .at { padding: 0.35rem 0; text-decoration: underline; text-underline-offset: 3px; }
+  .stage {
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    max-width: 100%;
+    max-height: 76vh;
+    border-width: 1px 0 0;
+    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
+  }
+  .stage video { max-height: 34vh; }
+  body.has-stage .shell { padding-bottom: 16rem; }
+}
+
+/* --- wide: the player gets its own column -------------------------------- */
+
+@media (min-width: 1560px) {
+  .shell { max-width: 94rem; }
+  /* Reserved only while something is playing; an empty reservation is dead
+     space, and the opening grid wants the full width. */
+  body.has-stage .shell { padding-right: 29rem; padding-bottom: 4rem; }
+  .stage {
+    top: 2.2rem;
+    bottom: auto;
+    right: max(1.5rem, calc((100vw - 94rem) / 2));
+    width: 27rem;
+    max-height: calc(100vh - 4.4rem);
+  }
+  .moment { grid-template-columns: 17rem 1fr; }
+  .opening { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shell { transition: none; }
+}
+
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

player.js → static/app.js

@@ -1,16 +1,77 @@
-// One delegated listener for the whole page. Any element carrying
-// data-src/data-t is a seek: load the film if it is not already loaded, jump to
-// the second the caption points at, play.
+// Search and playback. One delegated click listener for the whole page: any
+// element carrying data-src/data-t is a seek.
 (function () {
+  var form = document.getElementById("search");
+  var results = document.getElementById("results");
+  var q = document.getElementById("q");
+
   function stage() { return document.getElementById("stage"); }
   function player() { return document.getElementById("player"); }
 
-  // Safari cannot play a bucket `resolve/` URL directly. The URL 302s to a
-  // per-request signed CDN URL; Safari's follow-up range requests don't re-sign
-  // and come back 403 (first range 206, second 403, then
-  // MEDIA_ERR_SRC_NOT_SUPPORTED). Chrome re-follows the redirect every time and
-  // never notices. Resolving the signed URL once and handing *that* to the
-  // element works in both. Cached per film so repeat clicks stay synchronous.
+  // --- search -------------------------------------------------------------
+
+  var inFlight = null;
+
+  function params() {
+    var p = new URLSearchParams();
+    p.set("q", q ? q.value : "");
+    var d = document.getElementById("decade");
+    var s = document.getElementById("spread");
+    var m = document.getElementById("mode");
+    if (d) p.set("decade", d.value);
+    if (s) p.set("spread", s.checked ? "1" : "0");
+    if (m) p.set("mode", m.value);
+    return p;
+  }
+
+  function run(push) {
+    if (!results) return;
+    var p = params();
+    if (inFlight) inFlight.abort();
+    inFlight = new AbortController();
+    fetch("/api/search?" + p.toString(), { signal: inFlight.signal })
+      .then(function (r) { return r.json(); })
+      .then(function (data) { results.innerHTML = data.html; })
+      .catch(function (e) { if (e.name !== "AbortError") console.error(e); });
+    // Results become linkable, which a search tool should be.
+    if (push !== false) {
+      var qs = p.get("q") ? "?" + p.toString() : location.pathname;
+      history.replaceState(null, "", qs);
+    }
+  }
+
+  if (form) {
+    form.addEventListener("submit", function (e) { e.preventDefault(); run(); });
+    form.addEventListener("change", function (e) {
+      if (e.target.id === "decade" || e.target.id === "spread" || e.target.id === "mode") run();
+    });
+  }
+  document.addEventListener("click", function (e) {
+    var chip = e.target.closest && e.target.closest(".chip");
+    if (chip && q) { q.value = chip.textContent.trim(); run(); }
+  });
+
+  // Restore state from the URL so a shared link opens the same search.
+  (function restore() {
+    var p = new URLSearchParams(location.search);
+    if (!p.get("q")) return;
+    if (q) q.value = p.get("q");
+    var d = document.getElementById("decade");
+    var s = document.getElementById("spread");
+    var m = document.getElementById("mode");
+    if (d && p.get("decade")) d.value = p.get("decade");
+    if (s && p.get("spread")) s.checked = p.get("spread") === "1";
+    if (m && p.get("mode")) m.value = p.get("mode");
+    run(false);
+  })();
+
+  // --- playback -----------------------------------------------------------
+
+  // A bucket `resolve/` URL 302s to a per-request signed CDN URL. Safari's
+  // follow-up range requests don't re-sign and come back 403 (206, then 403,
+  // then MEDIA_ERR_SRC_NOT_SUPPORTED); Chrome re-follows and never notices.
+  // Resolving the signed URL once and handing that to the element works in
+  // both. Cached per film so repeat taps stay synchronous.
   var resolved = Object.create(null);
 
   function resolve(src) {
@@ -22,36 +83,24 @@
     }).catch(function () { return src; });
   }
 
-  function seek(video, t) {
-    // Range requests on the CDN make this cheap even mid-film.
-    try { video.currentTime = t; } catch (e) { /* metadata not in yet */ }
+  function seek(v, t) {
+    try { v.currentTime = t; } catch (e) { /* metadata not in yet */ }
   }
 
   function load(v, url, t) {
-    // An element left in error state (code 4) rejects play() before it can be
-    // unlocked, so a second tap shows a frame that will not start. Reset it
-    // properly before reusing it.
-    if (v.error) {
-      v.removeAttribute("src");
-      v.load();
-    }
+    // An element left in error state rejects play() before it can be unlocked,
+    // so a second tap would show a frame that never starts. Reset it first.
+    if (v.error) { v.removeAttribute("src"); v.load(); }
     // #t= is a media fragment: the browser starts there itself, and being
-    // client-side it never touches the URL's signature. The loadedmetadata
-    // handler stays as a fallback for anything that ignores it.
+    // client-side it never touches the URL's signature.
     v.src = url + "#t=" + t.toFixed(2);
     v.addEventListener("loadedmetadata", function once() {
       v.removeEventListener("loadedmetadata", once);
       if (Math.abs(v.currentTime - t) > 1) seek(v, t);
     });
     v.load();
-    start(v);
-  }
-
-  function start(v) {
-    // Try to play, because a click is usually enough and one tap beats two.
-    // Never force it: if the browser says no, the paused state shows a play
-    // control and the viewer is one tap away. No muted fallback — silent
-    // playback of a narrated film is worse than a still frame.
+    // Try to play, because a tap is usually enough and one tap beats two. Never
+    // force it: if the browser declines, the paused state shows a play control.
     v.play().catch(function () {});
   }
 
@@ -72,8 +121,7 @@
 
     var meta = document.getElementById("stage-meta");
     if (meta) {
-      meta.innerHTML =
-        "<b></b><span class='cut'></span>" +
+      meta.innerHTML = "<b></b><span class='cut'></span>" +
         "<button type='button' id='stage-close'>close</button>";
       meta.querySelector("b").textContent = el.getAttribute("data-title") || "";
       meta.querySelector(".cut").textContent = "at " + (el.getAttribute("data-when") || "");
@@ -102,29 +150,25 @@
     v.setAttribute("data-src", src);
     v.dataset.wanted = String(t);
 
-    if (same) {
-      seek(v, t);
-      // Synchronous, inside the click: iOS Safari only honours play() while the
-      // user gesture is still on the stack.
-      start(v);
-      return;
-    }
-
-    if (resolved[src]) {
-      load(v, resolved[src], t);      // fast path, still inside the gesture
-      return;
-    }
-
-    // Not resolved yet (pointerdown didn't get there first). The fetch pushes
-    // play() outside the gesture, so `start` may have to fall back to muted.
+    if (same) { seek(v, t); v.play().catch(function () {}); return; }
+    if (resolved[src]) { load(v, resolved[src], t); return; }
     resolve(src).then(function (url) {
-      if (v.getAttribute("data-src") !== src) return;   // superseded by another click
+      if (v.getAttribute("data-src") !== src) return;   // superseded by another tap
       load(v, url, t);
     });
   }
 
-  // A signed URL eventually expires. Drop it and try once more rather than
-  // leaving the viewer looking at a dead player.
+  // Autoplay rules differ per browser, platform, and prior engagement. Rather
+  // than predict them, tell the truth: if it is paused, show a play control.
+  ["play", "pause", "ended", "loadeddata", "emptied"].forEach(function (evt) {
+    document.addEventListener(evt, function (e) {
+      var v = player(), s = stage();
+      if (!v || !s || e.target !== v) return;
+      s.classList.toggle("paused", v.paused);
+    }, true);
+  });
+
+  // A signed URL eventually expires. Drop it and try once more.
   document.addEventListener("error", function (e) {
     var v = player();
     if (!v || e.target !== v) return;
@@ -132,43 +176,31 @@
     if (!src || !resolved[src] || v.dataset.retried === src) return;
     v.dataset.retried = src;
     delete resolved[src];
-    resolve(src).then(function (url) {
-      load(v, url, parseFloat(v.dataset.wanted) || 0);
-    });
+    resolve(src).then(function (url) { load(v, url, parseFloat(v.dataset.wanted) || 0); });
   }, true);
 
   // pointerdown fires before click, so the fetch is usually already done by the
-  // time the tap completes — which keeps the play() call inside the gesture.
+  // time the tap completes, which keeps play() inside the gesture.
   document.addEventListener("pointerdown", function (e) {
     var el = e.target.closest && e.target.closest("[data-src][data-t]");
     if (el) resolve(el.getAttribute("data-src"));
   }, true);
 
-  // Autoplay rules differ per browser, per platform, and per how much the
-  // viewer has used the site. Rather than predict them, just tell the truth:
-  // if it is paused, show a play control.
-  ["play", "pause", "ended", "loadeddata", "emptied"].forEach(function (evt) {
-    document.addEventListener(evt, function (e) {
-      var v = player(), s = stage();
-      if (!v || !s || e.target !== v) return;
-      s.classList.toggle("paused", v.paused);
-    }, true);
-  });
-
   document.addEventListener("click", function (e) {
     var big = e.target.closest && e.target.closest("#stage-play");
     if (big) { player().play().catch(function () {}); return; }
-    var close = e.target.closest && e.target.closest("#stage-close");
-    if (close) {
+
+    if (e.target.closest && e.target.closest("#stage-close")) {
       var s = stage(), v = player();
-      if (v) { v.pause(); }
-      if (s) { s.hidden = true; }
+      if (v) v.pause();
+      if (s) s.hidden = true;
       document.body.classList.remove("has-stage");
       document.querySelectorAll(".moment.playing").forEach(function (m) {
         m.classList.remove("playing");
       });
       return;
     }
+
     var el = e.target.closest && e.target.closest("[data-src][data-t]");
     if (el) { e.preventDefault(); play(el); }
   });

wide.css

@@ -1,48 +0,0 @@
-/* Loaded through `head=`, not `css=`.
-
-   Gradio 6 rewrites every selector in `css=` to sit under
-   `.gradio-container.gradio-container-6-20-0 .contain`, so a rule aimed at the
-   container itself becomes a descendant of the container and matches nothing.
-   Layout that has to reach the shell lives here instead. Rules here also land
-   before Gradio's own stylesheets, hence !important on the overrides. */
-
-/* The shell itself — width, ground colour, base face. These have to live in the
-   head for the same scoping reason. */
-.gradio-container {
-  max-width: 62rem !important;
-  background: var(--paper) !important;
-  color: var(--ink) !important;
-  font-family: var(--sans) !important;
-}
-
-/* Below this width the player floats over the results — a compromise. Above it,
-   the reserved column means the player never covers a result, and it has room
-   to carry the shot list of whatever is playing. */
-@media (min-width: 1560px) {
-  .gradio-container {
-    max-width: 94rem !important;
-    transition: padding-right 180ms ease;
-  }
-  /* Reserved only while something is playing: an empty reservation is dead
-     space, and the opening grid wants the full width. */
-  body.has-stage .gradio-container { padding-right: 29rem !important; }
-  body.has-stage .gradio-container { padding-bottom: 0 !important; }
-
-  .stage {
-    top: 2.2rem !important;
-    bottom: auto !important;
-    right: max(1.5rem, calc((100vw - 94rem) / 2)) !important;
-    width: 27rem !important;
-    max-height: calc(100vh - 4.4rem) !important;
-    overflow-y: auto !important;
-  }
-  #stage-list { display: block !important; }
-
-  .moment { grid-template-columns: 17rem 1fr !important; }
-  .opening { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)) !important; }
-  .masthead p { max-width: 46rem !important; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .gradio-container { transition: none !important; }
-}