Delete web/src/app/experiments/ExperimentsView.tsx with huggingface_hub

web/src/app/experiments/ExperimentsView.tsx

@@ -1,260 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import { getJSON, type Experiments, type GridRow, type PerQuery, type View } from "@/lib/api";
-import { bytes, fmtTs, pct } from "@/lib/format";
-import { VIEW_INFO, VIEW_ORDER } from "@/lib/views";
-import { ClipPlayer, type ClipRef } from "@/components/ClipPlayer";
-import { Segmented, ViewSwatch } from "@/components/Controls";
-import { Heatmap } from "@/components/charts/Heatmap";
-import { MetricByDimChart, type Point } from "@/components/charts/MetricByDimChart";
-
-const METRICS = ["recall@1", "recall@5", "recall@10", "mrr@10", "neighbor_recall@5", "video_hit@1"] as const;
-type Metric = (typeof METRICS)[number];
-const METRIC_HELP: Record<Metric, string> = {
-  "recall@1": "Exact source segment ranked first",
-  "recall@5": "Exact source segment in the top 5",
-  "recall@10": "Exact source segment in the top 10",
-  "mrr@10": "Mean reciprocal rank of the source segment (0 if outside top 10)",
-  "neighbor_recall@5": "Source segment or an adjacent one (±30s) in the top 5",
-  "video_hit@1": "Top result comes from the right video",
-};
-const QTYPES = ["all", "spoken", "visual"] as const;
-type QType = (typeof QTYPES)[number];
-
-function Tile({ label, value, sub }: { label: string; value: string; sub?: string }) {
-  return (
-    <div className="rounded-xl border border-line bg-surface p-4">
-      <div className="text-xs text-muted">{label}</div>
-      <div className="mt-1 text-2xl font-semibold">{value}</div>
-      {sub && <div className="mt-0.5 text-xs text-ink-2">{sub}</div>}
-    </div>
-  );
-}
-
-function rankCell(rank: number | undefined) {
-  if (rank == null) return <td />;
-  const good = rank === 1 ? "bg-[#1c5cab] text-white" : rank <= 5 ? "bg-[#104281] text-white" : rank <= 10 ? "bg-surface-2 text-ink-2" : "text-muted";
-  return <td className={`rounded px-2 py-1 text-right text-xs tabular ${good}`}>{rank > 99 ? "99+" : rank}</td>;
-}
-
-export function ExperimentsView() {
-  const [data, setData] = useState<Experiments | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [metric, setMetric] = useState<Metric>("recall@5");
-  const [qtype, setQtype] = useState<QType>("all");
-  const [heatMode, setHeatMode] = useState<"absolute" | "retained">("absolute");
-  const [hoverView, setHoverView] = useState<View | null>(null);
-  const [tableDim, setTableDim] = useState(768);
-  const [filter, setFilter] = useState("");
-  const [clip, setClip] = useState<ClipRef | null>(null);
-  const [transcripts, setTranscripts] = useState<string | null>(null);
-
-  useEffect(() => {
-    getJSON<Experiments>(`/api/experiments${transcripts ? `?transcripts=${transcripts}` : ""}`)
-      .then(setData)
-      .catch((e) => setError(String(e)));
-  }, [transcripts]);
-
-  const views = useMemo(() => VIEW_ORDER.filter((v) => data?.views.includes(v)), [data]);
-  const dimsAsc = useMemo(() => [...(data?.dims ?? [])].sort((a, b) => a - b), [data]);
-  const cell = useMemo(() => {
-    const m = new Map<string, GridRow>();
-    data?.grid.forEach((g) => m.set(`${g.view}|${g.dim}|${g.query_type}`, g));
-    return (view: View, dim: number) => m.get(`${view}|${dim}|${qtype}`);
-  }, [data, qtype]);
-
-  if (error) return <p className="text-sm text-ink-2">{error}</p>;
-  if (!data) return <p className="text-sm text-muted">Loading…</p>;
-
-  const points: Point[] = dimsAsc.map((d) => ({ dim: d, ...Object.fromEntries(views.map((v) => [v, cell(v, d)?.[metric] ?? 0])) }));
-  const best = data.grid.filter((g) => g.query_type === qtype).sort((a, b) => b[metric] - a[metric])[0];
-  const best768 = (v: View) => cell(v, 768)?.[metric] ?? 0;
-  const fused256 = cell("fused", 256)?.[metric];
-  const fused768 = best768("fused");
-  const bestView = views.reduce((a, v) => (best768(v) > best768(a) ? v : a), views[0]);
-
-  const queries = data.per_query.filter(
-    (q) => (qtype === "all" || q.type === qtype) && (!filter || q.query.toLowerCase().includes(filter.toLowerCase())),
-  );
-
-  return (
-    <div className="space-y-8">
-      <section>
-        <h1 className="text-2xl font-semibold">Experiments</h1>
-        <p className="mt-1 max-w-3xl text-sm text-ink-2">
-          {data.num_queries} queries ({data.query_types.spoken} spoken, {data.query_types.visual} visual) written by Gemma 4 12B after
-          watching sampled segments, each with one known source segment, run against {data.num_segments} segments for every embedding
-          view and Matryoshka dimension, with {data.transcripts === "whisper" ? "Whisper" : data.transcripts === "gemma" ? "Gemma 4" : "unlabelled"}{" "}
-          transcripts behind the text and fused views. Run {new Date(data.created_at).toLocaleString()}.
-        </p>
-      </section>
-
-      {/* Filters: one row, scope everything below */}
-      <div className="flex flex-wrap items-center gap-x-6 gap-y-3 rounded-xl border border-line bg-surface p-3">
-        <Segmented label="Metric" value={metric} options={METRICS} onChange={setMetric} />
-        <Segmented label="Queries" value={qtype} options={QTYPES} onChange={setQtype} />
-        {data.variants && data.variants.length > 1 && data.transcripts && (
-          <Segmented
-            label="Transcripts"
-            value={data.transcripts}
-            options={data.variants}
-            onChange={setTranscripts}
-            render={(e) => (e === "gemma" ? "Gemma 4" : e === "whisper" ? "Whisper" : e)}
-          />
-        )}
-        <span className="text-xs text-muted">{METRIC_HELP[metric]}</span>
-      </div>
-
-      <section className="grid grid-cols-2 gap-3 md:grid-cols-4">
-        <Tile label={`Best config · ${metric}`} value={best ? best[metric].toFixed(3) : "–"} sub={best ? `${VIEW_INFO[best.view].label} @ ${best.dim}d` : ""} />
-        <Tile label="Best view at 768d" value={VIEW_INFO[bestView].label} sub={`${best768(bestView).toFixed(3)} ${metric}`} />
-        <Tile
-          label="Fused at 256d keeps"
-          value={fused256 != null && fused768 ? pct(fused256 / fused768) : "–"}
-          sub={`of 768d ${metric} at 1/3 the storage`}
-        />
-        <Tile label="Query embed" value={`${data.query_embed_ms.toFixed(1)} ms`} sub="per query (batched, bf16)" />
-      </section>
-
-      <section className="rounded-xl border border-line bg-surface p-5">
-        <div className="flex flex-wrap items-baseline justify-between gap-2">
-          <h2 className="font-medium">
-            {metric} by Matryoshka dimension <span className="text-sm font-normal text-muted">· {qtype} queries</span>
-          </h2>
-        </div>
-        {/* Legend (always present for >1 series); hover a key to emphasise its line. */}
-        <div className="mt-3 flex flex-wrap gap-x-5 gap-y-1">
-          {views.map((v) => (
-            <button
-              key={v}
-              onMouseEnter={() => setHoverView(v)}
-              onMouseLeave={() => setHoverView(null)}
-              onFocus={() => setHoverView(v)}
-              onBlur={() => setHoverView(null)}
-              className="flex items-center gap-1.5 text-sm text-ink-2"
-            >
-              <span className="inline-block h-0.5 w-4 rounded" style={{ background: VIEW_INFO[v].color }} />
-              {VIEW_INFO[v].label}
-              <span className="text-xs text-muted">{VIEW_INFO[v].blurb}</span>
-            </button>
-          ))}
-        </div>
-        <MetricByDimChart data={points} views={views} metric={metric} highlight={hoverView} />
-      </section>
-
-      <section className="grid gap-6 lg:grid-cols-[1fr_380px]">
-        <div className="rounded-xl border border-line bg-surface p-5">
-          <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
-            <h2 className="font-medium">
-              {heatMode === "absolute" ? metric : `% of 768d ${metric} retained`}{" "}
-              <span className="text-sm font-normal text-muted">· {qtype} queries</span>
-            </h2>
-            <Segmented label="Show" value={heatMode} options={["absolute", "retained"] as const} onChange={setHeatMode} />
-          </div>
-          <Heatmap
-            views={views}
-            dims={[...dimsAsc].reverse()}
-            value={(v, d) => {
-              const x = cell(v, d)?.[metric];
-              if (x == null) return undefined;
-              if (heatMode === "absolute") return x;
-              const base = cell(v, 768)?.[metric];
-              return base ? x / base : undefined;
-            }}
-            format={(x) => (heatMode === "absolute" ? x.toFixed(3) : pct(x))}
-          />
-        </div>
-        <div className="rounded-xl border border-line bg-surface p-5">
-          <h2 className="mb-3 font-medium">Storage (float32)</h2>
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="text-xs text-muted">
-                <th className="pb-2 text-left font-normal">Dims</th>
-                <th className="pb-2 text-right font-normal">Per vector</th>
-                <th className="pb-2 text-right font-normal">Per view</th>
-                <th className="pb-2 text-right font-normal">All views</th>
-              </tr>
-            </thead>
-            <tbody className="tabular">
-              {data.storage.map((s) => (
-                <tr key={s.dim} className="border-t border-line">
-                  <td className="py-2">
-                    {s.dim}d <span className="text-xs text-muted">{s.dim === 768 ? "" : `÷${(768 / s.dim).toFixed(1)}`}</span>
-                  </td>
-                  <td className="py-2 text-right">{bytes(s.bytes_per_vector)}</td>
-                  <td className="py-2 text-right">{bytes(s.bytes_per_view)}</td>
-                  <td className="py-2 text-right">{bytes(s.bytes_all_views)}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-          <p className="mt-3 text-xs text-muted">
-            Tiny at this corpus size; the ratios are what matter at scale. Model card: ~lossless to 256d, 128d drops sharply for
-            multimodal inputs.
-          </p>
-        </div>
-      </section>
-
-      <section className="rounded-xl border border-line bg-surface p-5">
-        <div className="mb-3 flex flex-wrap items-center gap-4">
-          <h2 className="font-medium">Per-query ranks</h2>
-          <Segmented label="Dims" value={tableDim} options={data.dims} onChange={setTableDim} render={(d) => `${d}d`} />
-          <input
-            value={filter}
-            onChange={(e) => setFilter(e.target.value)}
-            placeholder="Filter queries…"
-            className="ml-auto w-64 rounded-lg border border-line bg-page px-3 py-1.5 text-sm outline-none focus:border-accent"
-          />
-        </div>
-        <p className="mb-3 text-xs text-muted">Rank of the source segment for each view (1 = perfect). Click a row to play the source segment.</p>
-        <div className="max-h-[560px] overflow-y-auto">
-          <table className="w-full border-separate text-sm" style={{ borderSpacing: "2px" }}>
-            <thead className="sticky top-0 bg-surface">
-              <tr className="text-xs text-muted">
-                <th className="py-1 text-left font-normal">Query</th>
-                <th className="py-1 text-left font-normal">Type</th>
-                {views.map((v) => (
-                  <th key={v} className="py-1 text-right font-normal">
-                    <span className="inline-flex items-center gap-1">
-                      <ViewSwatch view={v} />
-                      {VIEW_INFO[v].label}
-                    </span>
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {queries.map((q: PerQuery, i) => (
-                <tr
-                  key={i}
-                  onClick={() => q.segment && setClip({ ...q.segment, text: q.evidence ? `On screen: ${q.evidence}` : undefined })}
-                  className="cursor-pointer hover:bg-surface-2"
-                >
-                  <td className="py-1 pr-3">
-                    <div>{q.query}</div>
-                    {q.segment && (
-                      <div className="text-xs text-muted">
-                        {q.segment.title} @ {fmtTs(q.segment.start)}
-                      </div>
-                    )}
-                  </td>
-                  <td className="py-1 pr-2 text-xs text-ink-2">{q.type}</td>
-                  {views.map((v) => (
-                    <RankTd key={v} rank={q.ranks[`${v}@${tableDim}`]} />
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </section>
-
-      <ClipPlayer clip={clip} onClose={() => setClip(null)} />
-    </div>
-  );
-}
-
-function RankTd({ rank }: { rank?: number }) {
-  return rankCell(rank);
-}