Spaces:

TIGER-Lab
/

VisPhyWorld-Comparator

Running

App Files Files Community

lllqaq commited on 29 days ago

Commit

31443df

verified ·

1 Parent(s): d95996a

Add VisPhyWorld static comparator Space

Browse files

Upload static comparator app, manifest, and Space metadata.

Files changed (6) hide show

README.md +30 -4
index.html +137 -17
static/app.js +685 -0
static/manifest.json +0 -0
static/style.css +537 -0
style.css +0 -28

README.md CHANGED Viewed

@@ -1,10 +1,36 @@
 ---
 title: VisPhyWorld Comparator
-emoji: 👁
-colorFrom: yellow
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: VisPhyWorld Comparator
+emoji: 🎞️
+colorFrom: red
+colorTo: blue
 sdk: static
+app_file: index.html
 pinned: false
+datasets:
+  - TIGER-Lab/VisPhyBench-Data
+  - TIGER-Lab/VisPhyWorld-Sub-Generated-Videos
+tags:
+  - visphyworld
+  - physics
+  - video-comparison
+  - benchmark
 ---
+# VisPhyWorld Comparator
+Interactive sample-level comparator for VisPhyWorld.
+This Space lets you:
+- browse the `sub` split sample by sample
+- keep the ground-truth video as the first card
+- compare matching generated videos from all supported engines and models
+- filter by engine and model
+- share the current state via URL parameters
+Data sources:
+- Ground-truth videos: [`TIGER-Lab/VisPhyBench-Data`](https://huggingface.co/datasets/TIGER-Lab/VisPhyBench-Data)
+- Generated videos: [`TIGER-Lab/VisPhyWorld-Sub-Generated-Videos`](https://huggingface.co/datasets/TIGER-Lab/VisPhyWorld-Sub-Generated-Videos)
+The Space is static HTML and reads video assets directly from the public dataset repositories at runtime.

index.html CHANGED Viewed

@@ -1,19 +1,139 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>VisPhyWorld Comparator</title>
+    <link rel="icon" href="data:," />
+    <link rel="stylesheet" href="./static/style.css" />
+  </head>
+  <body>
+    <div class="page-shell">
+      <header class="hero">
+        <div class="hero-copy">
+          <div class="eyebrow">VisPhyWorld Demo</div>
+          <h1 class="title">Ground Truth vs Generated Video Comparator</h1>
+          <p class="subtitle">
+            Browse the `sub` split sample by sample. Keep the ground-truth video fixed and compare matching
+            generated videos across engines and models.
+          </p>
+        </div>
+        <div class="hero-actions">
+          <div class="source-toggle" role="radiogroup" aria-label="Asset source">
+            <button type="button" class="source-btn" id="source-local">Local</button>
+            <button type="button" class="source-btn" id="source-hub">Hugging Face</button>
+          </div>
+          <div class="hero-tool-row">
+            <button type="button" class="action-btn accent-outline" id="random-sample">Random sample</button>
+            <button type="button" class="action-btn accent-outline" id="copy-link">Copy link</button>
+          </div>
+          <div class="hero-note" id="source-note"></div>
+        </div>
+      </header>
+      <main class="layout">
+        <aside class="control-panel">
+          <section class="panel">
+            <div class="panel-label">Navigation</div>
+            <div class="nav-row">
+              <button class="nav-btn" id="prev-sample" title="Previous sample">←</button>
+              <button class="nav-btn" id="next-sample" title="Next sample">→</button>
+              <div class="counter" id="sample-counter">0/0</div>
+            </div>
+            <label class="field-label" for="sample-search">Search task</label>
+            <input id="sample-search" class="text-input" type="search" placeholder="task10021_014" />
+            <label class="field-label" for="sample-select">Task</label>
+            <select id="sample-select" class="sample-select" aria-label="Sample selector"></select>
+          </section>
+          <section class="panel">
+            <div class="panel-label">Sample Metadata</div>
+            <div class="chip-row" id="sample-meta"></div>
+            <div class="meta-list">
+              <div><span class="meta-key">Task</span><span class="meta-value" id="meta-task">-</span></div>
+              <div><span class="meta-key">Split</span><span class="meta-value" id="meta-split">-</span></div>
+              <div><span class="meta-key">Results</span><span class="meta-value" id="meta-results">-</span></div>
+              <div><span class="meta-key">Detection</span><span class="meta-value" id="meta-detection">-</span></div>
+            </div>
+          </section>
+          <section class="panel">
+            <div class="panel-label">Playback</div>
+            <div class="button-grid">
+              <button type="button" class="action-btn" id="sync-toggle">Sync: On</button>
+              <button type="button" class="action-btn" id="mute-toggle">Muted: On</button>
+              <button type="button" class="action-btn" id="play-all">Play all</button>
+              <button type="button" class="action-btn" id="pause-all">Pause all</button>
+              <button type="button" class="action-btn" id="restart-all">Restart</button>
+            </div>
+            <label class="field-label" for="playback-rate">Playback rate</label>
+            <select id="playback-rate" class="sample-select">
+              <option value="0.5">0.5x</option>
+              <option value="0.75">0.75x</option>
+              <option value="1" selected>1.0x</option>
+              <option value="1.25">1.25x</option>
+              <option value="1.5">1.5x</option>
+            </select>
+          </section>
+          <section class="panel">
+            <div class="panel-label">Filters</div>
+            <div class="filter-group">
+              <div class="field-label">Presets</div>
+              <div class="preset-grid" id="preset-bar"></div>
+              <button type="button" class="action-btn wide-btn" id="reset-filters">Reset filters</button>
+            </div>
+            <div class="filter-group">
+              <div class="field-label">Engines</div>
+              <div class="pill-row" id="engine-filters"></div>
+            </div>
+            <div class="filter-group">
+              <div class="field-label">Models</div>
+              <div class="pill-row" id="model-filters"></div>
+            </div>
+          </section>
+        </aside>
+        <section class="comparison-panel">
+          <section class="stage comparator-stage">
+            <div class="section-header">
+              <div>
+                <div class="eyebrow">Task Comparator</div>
+                <h2 class="section-title" id="comparison-title">Reference Video</h2>
+              </div>
+              <div class="header-side">
+                <div class="results-summary" id="results-summary">0 visible</div>
+                <div class="active-filter-summary" id="active-filter-summary">All engines · all models</div>
+              </div>
+            </div>
+            <div class="results-grid" id="results-grid">
+              <article class="video-card gt-card">
+                <div class="card-header">
+                  <div class="badge-stack">
+                    <span class="badge badge-gt">GT</span>
+                  </div>
+                  <span class="card-title" id="gt-title">Ground Truth</span>
+                  <div class="card-subtitle">Reference video</div>
+                </div>
+                <video id="gt-video" controls playsinline preload="metadata"></video>
+              </article>
+            </div>
+            <div class="empty-state" id="empty-state" hidden>No generated videos match the current filters.</div>
+          </section>
+        </section>
+      </main>
+      <section class="footer-note">
+        <div>
+          This Space streams public assets directly from
+          <code>TIGER-Lab/VisPhyBench-Data</code> and <code>TIGER-Lab/VisPhyWorld-Sub-Generated-Videos</code>.
+        </div>
+        <div>
+          Shareable state is stored in the URL, including the current sample, filters, and playback options.
+        </div>
+      </section>
+    </div>
+    <script src="./static/app.js"></script>
+  </body>
 </html>

static/app.js ADDED Viewed

	@@ -0,0 +1,685 @@

+/* global window, document, fetch, navigator */
+function el(id) {
+  const node = document.getElementById(id);
+  if (!node) throw new Error(`Missing element: ${id}`);
+  return node;
+}
+function getSearchParams() {
+  return new URLSearchParams(window.location.search);
+}
+function getQueryValue(name) {
+  return getSearchParams().get(name);
+}
+function titleCase(text) {
+  return String(text || "")
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((part) => part[0].toUpperCase() + part.slice(1))
+    .join(" ");
+}
+function clampRate(value) {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric) || numeric <= 0) return 1;
+  return numeric;
+}
+function buildAssetUrl(mode, manifest, type, path) {
+  if (mode === "hub") {
+    const repo =
+      type === "gt" ? manifest.repos.gt_dataset : manifest.repos.generated_dataset;
+    return `https://huggingface.co/datasets/${repo}/resolve/main/${path}`;
+  }
+  if (type === "gt") {
+    return `/data/${path}`;
+  }
+  return `/data/sub_generated_videos/${path}`;
+}
+function isLocalPreviewHost() {
+  const host = window.location.hostname || "";
+  return host === "localhost" || host === "127.0.0.1";
+}
+function detectSourceMode() {
+  const explicit = getQueryValue("source");
+  if (explicit === "hub") return "hub";
+  if (explicit === "local" && isLocalPreviewHost()) return "local";
+  if (isLocalPreviewHost()) return "local";
+  return "hub";
+}
+function sameValue(a, b, epsilon) {
+  return Math.abs(a - b) <= epsilon;
+}
+function setVideoSource(video, src) {
+  if (!src) {
+    video.removeAttribute("src");
+    video.load();
+    return;
+  }
+  if (video.dataset.currentSrc === src) return;
+  video.dataset.currentSrc = src;
+  video.src = src;
+  video.load();
+}
+function createButton(label, active, onClick, className) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = className;
+  if (active) button.classList.add("active");
+  button.textContent = label;
+  button.addEventListener("click", onClick);
+  return button;
+}
+function createResultCard(result) {
+  const article = document.createElement("article");
+  article.className = "video-card result-card";
+  article.dataset.engine = result.engine;
+  article.dataset.model = result.model;
+  const header = document.createElement("div");
+  header.className = "card-header";
+  const badges = document.createElement("div");
+  badges.className = "badge-stack";
+  const engineBadge = document.createElement("span");
+  engineBadge.className = "badge";
+  engineBadge.textContent = result.engine_label;
+  badges.appendChild(engineBadge);
+  const modelBadge = document.createElement("span");
+  modelBadge.className = "badge badge-secondary";
+  modelBadge.textContent = result.model_label;
+  badges.appendChild(modelBadge);
+  const title = document.createElement("div");
+  title.className = "card-title";
+  title.textContent = result.model_label;
+  const subtitle = document.createElement("div");
+  subtitle.className = "card-subtitle";
+  subtitle.textContent = `${result.engine_label} renderer`;
+  const video = document.createElement("video");
+  video.controls = true;
+  video.preload = "metadata";
+  video.playsInline = true;
+  video.dataset.role = "result-video";
+  header.appendChild(badges);
+  header.appendChild(title);
+  header.appendChild(subtitle);
+  article.appendChild(header);
+  article.appendChild(video);
+  return { article, video };
+}
+function parseSetParam(name, validValues) {
+  const raw = getQueryValue(name);
+  if (!raw) return null;
+  const out = new Set();
+  for (const part of raw.split(",")) {
+    const item = decodeURIComponent(part).trim();
+    if (item && validValues.has(item)) out.add(item);
+  }
+  return out.size > 0 ? out : null;
+}
+function setsEqual(left, right) {
+  if (left.size !== right.size) return false;
+  for (const item of left) {
+    if (!right.has(item)) return false;
+  }
+  return true;
+}
+async function loadManifest() {
+  const response = await fetch("./static/manifest.json", { cache: "no-store" });
+  if (!response.ok) throw new Error(`Failed to load manifest: ${response.status}`);
+  return response.json();
+}
+async function copyToClipboard(text) {
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    await navigator.clipboard.writeText(text);
+    return true;
+  }
+  return false;
+}
+async function main() {
+  const manifest = await loadManifest();
+  const samples = Array.isArray(manifest.samples) ? manifest.samples : [];
+  if (samples.length === 0) throw new Error("Manifest has no samples");
+  const allModels = [];
+  const seenModels = new Set();
+  for (const engine of manifest.engine_order) {
+    for (const model of manifest.model_order[engine] || []) {
+      if (seenModels.has(model)) continue;
+      seenModels.add(model);
+      allModels.push(model);
+    }
+  }
+  const engineSet = new Set(manifest.engine_order);
+  const modelSet = new Set(allModels);
+  const state = {
+    samples,
+    sourceMode: detectSourceMode(),
+    currentIndex: 0,
+    syncEnabled: getQueryValue("sync") !== "0",
+    muted: getQueryValue("muted") !== "0",
+    propagating: false,
+    selectedEngines: parseSetParam("engines", engineSet) || new Set(manifest.engine_order),
+    selectedModels: parseSetParam("models", modelSet) || new Set(allModels),
+    playbackRate: clampRate(getQueryValue("rate") || "1"),
+  };
+  const sampleSelect = el("sample-select");
+  const sampleSearch = el("sample-search");
+  const sampleCounter = el("sample-counter");
+  const sourceLocal = el("source-local");
+  const sourceHub = el("source-hub");
+  const sourceNote = el("source-note");
+  const metaTask = el("meta-task");
+  const metaSplit = el("meta-split");
+  const metaResults = el("meta-results");
+  const metaDetection = el("meta-detection");
+  const sampleMeta = el("sample-meta");
+  const gtVideo = el("gt-video");
+  const gtTitle = el("gt-title");
+  const comparisonTitle = el("comparison-title");
+  const resultsSummary = el("results-summary");
+  const activeFilterSummary = el("active-filter-summary");
+  const resultsGrid = el("results-grid");
+  const gtCard = resultsGrid.querySelector(".gt-card");
+  const emptyState = el("empty-state");
+  const engineFilters = el("engine-filters");
+  const modelFilters = el("model-filters");
+  const presetBar = el("preset-bar");
+  const syncToggle = el("sync-toggle");
+  const muteToggle = el("mute-toggle");
+  const playbackRate = el("playback-rate");
+  const copyLinkButton = el("copy-link");
+  playbackRate.value = String(state.playbackRate);
+  const presetDefinitions = [
+    {
+      key: "all",
+      label: "All",
+      engines: manifest.engine_order,
+      models: allModels,
+    },
+    {
+      key: "code",
+      label: "Code",
+      engines: ["threejs", "p5js"],
+      models: allModels.filter((model) => model !== "svd-img2vid" && model !== "sora-2" && model !== "veo31"),
+    },
+    {
+      key: "threejs",
+      label: "Three.js",
+      engines: ["threejs"],
+      models: manifest.model_order.threejs || [],
+    },
+    {
+      key: "p5js",
+      label: "p5.js",
+      engines: ["p5js"],
+      models: manifest.model_order.p5js || [],
+    },
+    {
+      key: "video",
+      label: "Video",
+      engines: ["video"],
+      models: manifest.model_order.video || [],
+    },
+  ];
+  function currentSample() {
+    return state.samples[state.currentIndex];
+  }
+  function allVisibleVideos() {
+    return Array.from(resultsGrid.querySelectorAll("video"));
+  }
+  function updateUrlState() {
+    const params = new URLSearchParams();
+    params.set("sample", currentSample().id);
+    params.set("source", state.sourceMode);
+    if (!setsEqual(state.selectedEngines, new Set(manifest.engine_order))) {
+      params.set("engines", Array.from(state.selectedEngines).join(","));
+    }
+    if (!setsEqual(state.selectedModels, new Set(allModels))) {
+      params.set("models", Array.from(state.selectedModels).join(","));
+    }
+    if (!state.syncEnabled) params.set("sync", "0");
+    if (!state.muted) params.set("muted", "0");
+    if (!sameValue(state.playbackRate, 1, 0.001)) {
+      params.set("rate", String(state.playbackRate));
+    }
+    const nextUrl = `${window.location.pathname}?${params.toString()}`;
+    window.history.replaceState(null, "", nextUrl);
+  }
+  function updateSourceButtons() {
+    const localPreview = isLocalPreviewHost();
+    sourceLocal.disabled = !localPreview;
+    sourceLocal.title = localPreview ? "Read local files under /data" : "Local mode is only available in local preview";
+    sourceLocal.classList.toggle("active", state.sourceMode === "local");
+    sourceHub.classList.toggle("active", state.sourceMode === "hub");
+    sourceNote.textContent =
+      state.sourceMode === "local"
+        ? "Reading videos from this repo under /data. This is the best mode for local inspection."
+        : localPreview
+          ? "Reading videos from the public Hugging Face datasets. This matches the deployed Space."
+          : "Reading videos from the public Hugging Face datasets used by this Space.";
+  }
+  function updateSyncButtons() {
+    syncToggle.textContent = `Sync: ${state.syncEnabled ? "On" : "Off"}`;
+    muteToggle.textContent = `Muted: ${state.muted ? "On" : "Off"}`;
+    syncToggle.classList.toggle("active", state.syncEnabled);
+    muteToggle.classList.toggle("active", state.muted);
+  }
+  function updateCounter() {
+    sampleCounter.textContent = `${state.currentIndex + 1}/${state.samples.length}`;
+  }
+  function applyPlaybackSettings() {
+    state.playbackRate = clampRate(playbackRate.value || "1");
+    for (const video of allVisibleVideos()) {
+      video.playbackRate = state.playbackRate;
+      video.defaultPlaybackRate = state.playbackRate;
+      video.muted = state.muted;
+    }
+  }
+  function propagate(origin, action) {
+    if (!state.syncEnabled || state.propagating) return;
+    state.propagating = true;
+    const videos = allVisibleVideos();
+    try {
+      if (action === "play") {
+        for (const video of videos) {
+          if (video === origin) continue;
+          if (!sameValue(video.currentTime, origin.currentTime, 0.08)) {
+            video.currentTime = origin.currentTime;
+          }
+          video.playbackRate = origin.playbackRate;
+          video.play().catch(() => {
+            /* ignore autoplay restrictions */
+          });
+        }
+      } else if (action === "pause") {
+        for (const video of videos) {
+          if (video === origin) continue;
+          if (!sameValue(video.currentTime, origin.currentTime, 0.08)) {
+            video.currentTime = origin.currentTime;
+          }
+          video.pause();
+        }
+      } else if (action === "seek") {
+        for (const video of videos) {
+          if (video === origin) continue;
+          if (!sameValue(video.currentTime, origin.currentTime, 0.1)) {
+            video.currentTime = origin.currentTime;
+          }
+        }
+      } else if (action === "rate") {
+        for (const video of videos) {
+          if (video === origin) continue;
+          video.playbackRate = origin.playbackRate;
+          video.defaultPlaybackRate = origin.playbackRate;
+        }
+      }
+    } finally {
+      window.setTimeout(() => {
+        state.propagating = false;
+      }, 0);
+    }
+  }
+  function bindSync(video) {
+    video.addEventListener("play", () => propagate(video, "play"));
+    video.addEventListener("pause", () => propagate(video, "pause"));
+    video.addEventListener("seeked", () => propagate(video, "seek"));
+    video.addEventListener("ratechange", () => propagate(video, "rate"));
+  }
+  function modelsForEngines(engines) {
+    const out = new Set();
+    for (const engine of engines) {
+      for (const model of manifest.model_order[engine] || []) {
+        out.add(model);
+      }
+    }
+    return out;
+  }
+  function activePresetKey() {
+    for (const preset of presetDefinitions) {
+      if (
+        setsEqual(state.selectedEngines, new Set(preset.engines)) &&
+        setsEqual(state.selectedModels, new Set(preset.models))
+      ) {
+        return preset.key;
+      }
+    }
+    return null;
+  }
+  function describeFilters() {
+    const engineSummary =
+      state.selectedEngines.size === manifest.engine_order.length
+        ? "All engines"
+        : `${state.selectedEngines.size} engine${state.selectedEngines.size === 1 ? "" : "s"}`;
+    const modelSummary =
+      state.selectedModels.size === allModels.length
+        ? "all models"
+        : `${state.selectedModels.size} model${state.selectedModels.size === 1 ? "" : "s"}`;
+    return `${engineSummary} · ${modelSummary}`;
+  }
+  function setFilterState(engines, models) {
+    state.selectedEngines = new Set(engines);
+    state.selectedModels = new Set(models);
+    renderFilterButtons();
+    renderSample();
+  }
+  function renderFilterButtons() {
+    const activePreset = activePresetKey();
+    presetBar.innerHTML = "";
+    for (const preset of presetDefinitions) {
+      const button = createButton(
+        preset.label,
+        activePreset === preset.key,
+        () => setFilterState(preset.engines, preset.models),
+        "preset-btn"
+      );
+      presetBar.appendChild(button);
+    }
+    engineFilters.innerHTML = "";
+    for (const engine of manifest.engine_order) {
+      const button = createButton(
+        manifest.engine_labels[engine] || titleCase(engine),
+        state.selectedEngines.has(engine),
+        () => {
+          if (state.selectedEngines.has(engine)) state.selectedEngines.delete(engine);
+          else state.selectedEngines.add(engine);
+          if (state.selectedEngines.size === 0) state.selectedEngines.add(engine);
+          renderFilterButtons();
+          renderSample();
+        },
+        "pill-btn"
+      );
+      engineFilters.appendChild(button);
+    }
+    modelFilters.innerHTML = "";
+    for (const model of allModels) {
+      const button = createButton(
+        manifest.model_labels[model] || titleCase(model),
+        state.selectedModels.has(model),
+        () => {
+          if (state.selectedModels.has(model)) state.selectedModels.delete(model);
+          else state.selectedModels.add(model);
+          if (state.selectedModels.size === 0) state.selectedModels.add(model);
+          renderFilterButtons();
+          renderSample();
+        },
+        "pill-btn"
+      );
+      modelFilters.appendChild(button);
+    }
+  }
+  function renderSampleOptions(filterText) {
+    const normalized = String(filterText || "").trim().toLowerCase();
+    sampleSelect.innerHTML = "";
+    let nextSelectedValue = null;
+    for (const sample of state.samples) {
+      const haystack = `${sample.id} ${sample.label} ${sample.difficulty} ${
+        sample.is_3d ? "3d" : "2d"
+      }`.toLowerCase();
+      if (normalized && !haystack.includes(normalized)) continue;
+      const option = document.createElement("option");
+      option.value = sample.id;
+      option.textContent = sample.label;
+      sampleSelect.appendChild(option);
+      if (sample.id === currentSample().id) nextSelectedValue = sample.id;
+    }
+    if (nextSelectedValue) {
+      sampleSelect.value = nextSelectedValue;
+    } else if (sampleSelect.options.length > 0) {
+      sampleSelect.selectedIndex = 0;
+    }
+  }
+  function setSampleByIndex(index) {
+    state.currentIndex = Math.max(0, Math.min(state.samples.length - 1, index));
+    sampleSelect.value = currentSample().id;
+    updateCounter();
+    renderSample();
+  }
+  function renderSampleMeta(sample) {
+    sampleMeta.innerHTML = "";
+    const chips = [
+      { label: sample.is_3d ? "3D" : "2D", tone: "dimension" },
+      { label: sample.difficulty || "unknown", tone: sample.difficulty || "default" },
+      { label: `${sample.available_result_count} results`, tone: "count" },
+    ];
+    for (const chip of chips) {
+      const span = document.createElement("span");
+      span.className = `meta-chip ${chip.tone}`;
+      span.textContent = chip.label;
+      sampleMeta.appendChild(span);
+    }
+    metaTask.textContent = sample.id;
+    metaSplit.textContent = sample.split || "sub";
+    metaResults.textContent = `${sample.available_result_count}`;
+    metaDetection.textContent = sample.detection_json_path ? "available" : "none";
+  }
+  function filteredResults(sample) {
+    return (sample.results || []).filter(
+      (result) =>
+        state.selectedEngines.has(result.engine) &&
+        state.selectedModels.has(result.model)
+    );
+  }
+  function renderSample() {
+    const sample = currentSample();
+    const visibleResults = filteredResults(sample);
+    sampleSelect.value = sample.id;
+    comparisonTitle.textContent = `${sample.id} · ${sample.is_3d ? "3D" : "2D"} · ${titleCase(sample.difficulty)}`;
+    gtTitle.textContent = `${sample.id} · Ground Truth`;
+    activeFilterSummary.textContent = describeFilters();
+    renderSampleMeta(sample);
+    setVideoSource(gtVideo, buildAssetUrl(state.sourceMode, manifest, "gt", sample.gt.path));
+    for (const card of Array.from(resultsGrid.querySelectorAll(".result-card"))) {
+      card.remove();
+    }
+    for (const result of visibleResults) {
+      const card = createResultCard(result);
+      setVideoSource(card.video, buildAssetUrl(state.sourceMode, manifest, "generated", result.path));
+      card.video.muted = state.muted;
+      card.video.playbackRate = state.playbackRate;
+      bindSync(card.video);
+      resultsGrid.appendChild(card.article);
+    }
+    if (gtCard && resultsGrid.firstElementChild !== gtCard) {
+      resultsGrid.insertBefore(gtCard, resultsGrid.firstElementChild);
+    }
+    resultsSummary.textContent = `${visibleResults.length} generated · ${sample.available_result_count} total`;
+    emptyState.hidden = visibleResults.length > 0;
+    applyPlaybackSettings();
+    updateUrlState();
+  }
+  bindSync(gtVideo);
+  for (const sample of state.samples) {
+    const option = document.createElement("option");
+    option.value = sample.id;
+    option.textContent = sample.label;
+    sampleSelect.appendChild(option);
+  }
+  const requestedSample = getQueryValue("sample");
+  if (requestedSample) {
+    const requestedIndex = state.samples.findIndex((sample) => sample.id === requestedSample);
+    if (requestedIndex >= 0) {
+      state.currentIndex = requestedIndex;
+    }
+  }
+  sampleSelect.addEventListener("change", () => {
+    const nextId = sampleSelect.value;
+    const nextIndex = state.samples.findIndex((sample) => sample.id === nextId);
+    if (nextIndex >= 0) setSampleByIndex(nextIndex);
+  });
+  sampleSearch.addEventListener("input", () => {
+    renderSampleOptions(sampleSearch.value);
+  });
+  sampleSearch.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter") return;
+    const nextId = sampleSelect.value;
+    const nextIndex = state.samples.findIndex((sample) => sample.id === nextId);
+    if (nextIndex >= 0) setSampleByIndex(nextIndex);
+  });
+  el("prev-sample").addEventListener("click", () => setSampleByIndex(state.currentIndex - 1));
+  el("next-sample").addEventListener("click", () => setSampleByIndex(state.currentIndex + 1));
+  sourceLocal.addEventListener("click", () => {
+    if (!isLocalPreviewHost()) return;
+    state.sourceMode = "local";
+    updateSourceButtons();
+    renderSample();
+  });
+  sourceHub.addEventListener("click", () => {
+    state.sourceMode = "hub";
+    updateSourceButtons();
+    renderSample();
+  });
+  syncToggle.addEventListener("click", () => {
+    state.syncEnabled = !state.syncEnabled;
+    updateSyncButtons();
+    updateUrlState();
+  });
+  muteToggle.addEventListener("click", () => {
+    state.muted = !state.muted;
+    updateSyncButtons();
+    applyPlaybackSettings();
+    updateUrlState();
+  });
+  playbackRate.addEventListener("change", () => {
+    applyPlaybackSettings();
+    updateUrlState();
+  });
+  el("play-all").addEventListener("click", () => {
+    for (const video of allVisibleVideos()) {
+      video.play().catch(() => {
+        /* ignore autoplay restrictions */
+      });
+    }
+  });
+  el("pause-all").addEventListener("click", () => {
+    for (const video of allVisibleVideos()) {
+      video.pause();
+    }
+  });
+  el("restart-all").addEventListener("click", () => {
+    for (const video of allVisibleVideos()) {
+      video.currentTime = 0;
+      video.pause();
+    }
+  });
+  el("reset-filters").addEventListener("click", () => {
+    setFilterState(manifest.engine_order, allModels);
+  });
+  el("random-sample").addEventListener("click", () => {
+    const nextIndex = Math.floor(Math.random() * state.samples.length);
+    setSampleByIndex(nextIndex);
+  });
+  copyLinkButton.addEventListener("click", async () => {
+    const copied = await copyToClipboard(window.location.href).catch(() => false);
+    const original = "Copy link";
+    copyLinkButton.textContent = copied ? "Copied" : "Copy failed";
+    window.setTimeout(() => {
+      copyLinkButton.textContent = original;
+    }, 1200);
+  });
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "ArrowLeft") setSampleByIndex(state.currentIndex - 1);
+    if (event.key === "ArrowRight") setSampleByIndex(state.currentIndex + 1);
+  });
+  renderSampleOptions("");
+  renderFilterButtons();
+  updateSourceButtons();
+  updateSyncButtons();
+  updateCounter();
+  renderSample();
+}
+window.addEventListener("DOMContentLoaded", () => {
+  main().catch((error) => {
+    console.error(error);
+    document.body.innerHTML = `<pre style="padding:24px;font:14px/1.5 monospace;">${String(
+      error && error.stack ? error.stack : error
+    )}</pre>`;
+  });
+});

static/manifest.json ADDED Viewed

The diff for this file is too large to render. See raw diff

static/style.css ADDED Viewed

	@@ -0,0 +1,537 @@

+:root {
+  --bg: #f4efe6;
+  --bg-accent: radial-gradient(circle at top left, rgba(229, 122, 72, 0.24), transparent 34%),
+    radial-gradient(circle at top right, rgba(32, 86, 118, 0.18), transparent 30%),
+    linear-gradient(180deg, #f8f3eb 0%, #efe7da 100%);
+  --panel: rgba(255, 252, 246, 0.92);
+  --panel-strong: rgba(255, 251, 244, 0.98);
+  --border: rgba(88, 63, 43, 0.16);
+  --text: #24180f;
+  --muted: #65584f;
+  --accent: #c8572a;
+  --accent-deep: #8f3217;
+  --accent-cool: #225974;
+  --success: #285c44;
+  --shadow: 0 14px 40px rgba(65, 43, 25, 0.12);
+  --radius-xl: 24px;
+  --radius-lg: 18px;
+  --radius-md: 14px;
+}
+* {
+  box-sizing: border-box;
+}
+html {
+  background: #efe7da;
+}
+body {
+  margin: 0;
+  min-height: 100vh;
+  color: var(--text);
+  background: var(--bg-accent);
+  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+}
+button,
+select,
+input,
+video {
+  font: inherit;
+}
+.page-shell {
+  width: min(1480px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 28px 0 36px;
+}
+.hero {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 28px;
+  border: 1px solid var(--border);
+  border-radius: 28px;
+  background: linear-gradient(135deg, rgba(255, 246, 235, 0.96), rgba(245, 235, 221, 0.9));
+  box-shadow: var(--shadow);
+  margin-bottom: 18px;
+}
+.hero-copy {
+  max-width: 760px;
+}
+.eyebrow {
+  font-size: 12px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--accent-deep);
+  font-weight: 800;
+}
+.title {
+  margin: 10px 0 8px;
+  font-size: clamp(34px, 5vw, 54px);
+  line-height: 0.98;
+  font-weight: 900;
+  letter-spacing: -0.04em;
+}
+.subtitle {
+  margin: 0;
+  max-width: 56ch;
+  color: var(--muted);
+  font-size: 16px;
+  line-height: 1.5;
+}
+.hero-actions {
+  min-width: 320px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: stretch;
+}
+.source-toggle {
+  display: inline-grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 18px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.52);
+}
+.hero-tool-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.source-btn,
+.nav-btn,
+.action-btn,
+.pill-btn,
+.preset-btn {
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--text);
+  border-radius: 14px;
+  cursor: pointer;
+  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
+}
+.source-btn:hover,
+.nav-btn:hover,
+.action-btn:hover,
+.pill-btn:hover,
+.preset-btn:hover {
+  transform: translateY(-1px);
+  border-color: rgba(200, 87, 42, 0.34);
+}
+.source-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+  border-color: transparent;
+}
+.source-btn.active,
+.action-btn.active,
+.pill-btn.active,
+.preset-btn.active {
+  background: var(--accent);
+  color: #fff9f1;
+  border-color: var(--accent);
+}
+.source-btn {
+  padding: 12px 14px;
+  font-weight: 700;
+}
+.action-btn {
+  padding: 12px 12px;
+  font-weight: 700;
+}
+.accent-outline {
+  background: rgba(255, 255, 255, 0.38);
+  border-color: rgba(200, 87, 42, 0.16);
+}
+.hero-note {
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.45;
+  padding: 12px 14px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.52);
+  border: 1px solid var(--border);
+}
+.layout {
+  display: grid;
+  grid-template-columns: 332px 1fr;
+  gap: 18px;
+}
+.control-panel,
+.comparison-panel {
+  min-width: 0;
+}
+.control-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.comparison-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.panel,
+.stage,
+.footer-note {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  background: var(--panel);
+  box-shadow: var(--shadow);
+}
+.panel {
+  padding: 18px;
+}
+.stage {
+  padding: 20px;
+}
+.panel-label {
+  margin-bottom: 12px;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--accent-cool);
+}
+.nav-row {
+  display: grid;
+  grid-template-columns: 48px 48px 1fr;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.nav-btn {
+  width: 48px;
+  height: 48px;
+  font-size: 20px;
+  font-weight: 700;
+}
+.counter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 14px;
+  background: rgba(34, 89, 116, 0.1);
+  color: var(--accent-cool);
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+}
+.field-label {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 700;
+}
+.text-input,
+.sample-select {
+  width: 100%;
+  min-width: 0;
+  padding: 12px 14px;
+  border: 1px solid rgba(88, 63, 43, 0.18);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.78);
+  color: var(--text);
+  outline: none;
+}
+.text-input:focus,
+.sample-select:focus {
+  border-color: rgba(200, 87, 42, 0.48);
+  box-shadow: 0 0 0 4px rgba(200, 87, 42, 0.1);
+}
+.chip-row,
+.pill-row,
+.badge-stack {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.meta-chip,
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.meta-chip {
+  background: rgba(34, 89, 116, 0.09);
+  color: var(--accent-cool);
+}
+.meta-chip.easy {
+  background: rgba(40, 92, 68, 0.12);
+  color: var(--success);
+}
+.meta-chip.medium {
+  background: rgba(200, 126, 20, 0.12);
+  color: #9a5b11;
+}
+.meta-chip.hard {
+  background: rgba(164, 42, 42, 0.12);
+  color: #972d2d;
+}
+.meta-chip.count {
+  background: rgba(200, 87, 42, 0.12);
+  color: var(--accent-deep);
+}
+.meta-list {
+  margin-top: 12px;
+  display: grid;
+  gap: 8px;
+}
+.meta-list > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.54);
+}
+.meta-key {
+  color: var(--muted);
+}
+.meta-value {
+  font-weight: 700;
+  text-align: right;
+}
+.button-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.filter-group + .filter-group {
+  margin-top: 12px;
+}
+.preset-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.preset-btn,
+.pill-btn {
+  padding: 9px 12px;
+  font-size: 13px;
+  font-weight: 700;
+}
+.wide-btn {
+  width: 100%;
+}
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+.header-side {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+.section-title {
+  margin: 4px 0 0;
+  font-size: clamp(22px, 2vw, 30px);
+  line-height: 1.04;
+  letter-spacing: -0.04em;
+}
+.results-summary {
+  color: var(--text);
+  font-weight: 800;
+}
+.active-filter-summary {
+  color: var(--muted);
+  font-size: 13px;
+}
+.video-card {
+  padding: 14px;
+  border: 1px solid rgba(88, 63, 43, 0.18);
+  border-radius: var(--radius-lg);
+  background: var(--panel-strong);
+}
+.gt-card {
+  margin-bottom: 0;
+}
+.card-header {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+.card-title {
+  font-size: 15px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+.card-subtitle {
+  color: var(--muted);
+  font-size: 13px;
+}
+.badge {
+  background: var(--accent-cool);
+  color: #f6fbff;
+}
+.badge-secondary {
+  background: rgba(200, 87, 42, 0.12);
+  color: var(--accent-deep);
+}
+.badge-gt {
+  background: var(--accent);
+}
+.video-card video {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  background: #0e0e0e;
+  border-radius: 16px;
+  border: 1px solid rgba(33, 24, 17, 0.14);
+}
+.results-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
+  gap: 14px;
+}
+.empty-state {
+  margin-top: 14px;
+  padding: 16px 18px;
+  border-radius: 16px;
+  border: 1px dashed rgba(88, 63, 43, 0.22);
+  background: rgba(255, 255, 255, 0.5);
+  color: var(--muted);
+}
+.footer-note {
+  margin-top: 18px;
+  padding: 18px 20px;
+  display: grid;
+  gap: 6px;
+  color: var(--muted);
+  font-size: 13px;
+}
+code {
+  padding: 2px 7px;
+  border-radius: 999px;
+  background: rgba(34, 89, 116, 0.08);
+  color: var(--accent-cool);
+}
+@media (max-width: 1120px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+  .hero {
+    flex-direction: column;
+  }
+  .hero-actions {
+    min-width: 0;
+  }
+}
+@media (max-width: 720px) {
+  .page-shell {
+    width: min(100vw - 20px, 1480px);
+    padding-top: 16px;
+  }
+  .hero,
+  .stage,
+  .panel,
+  .footer-note {
+    border-radius: 22px;
+  }
+  .hero-tool-row,
+  .button-grid,
+  .preset-grid {
+    grid-template-columns: 1fr;
+  }
+  .section-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .header-side {
+    align-items: flex-start;
+  }
+  .results-grid {
+    grid-template-columns: 1fr;
+  }
+}

style.css DELETED Viewed

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}