Spaces:
Running
Running
| ; | |
| (() => { | |
| const DATASET = "ankanmbz/worldguide-results"; | |
| const REMOTE_BASE = `https://huggingface.co/datasets/${DATASET}/resolve/main/`; | |
| const MODEL_ORDER = ["Our", "Cosmos2.5", "HunyuanVideo-1.5", "MiniMax-H3", "SkyReels", "LTX-2.5", "Barnini", "TempAct", "PhysAgent"]; | |
| const params = new URLSearchParams(location.search); | |
| const local = ["localhost", "127.0.0.1", "[::1]"].includes(location.hostname) && params.get("local") === "1"; | |
| const $ = (id) => document.getElementById(id); | |
| let manifest, selectedId, category = "All", query = "", requestVersion = 0, toastTimer; | |
| let videos = []; | |
| function element(tag, className, text) { | |
| const node = document.createElement(tag); | |
| if (className) node.className = className; | |
| if (text !== undefined) node.textContent = text; | |
| return node; | |
| } | |
| function assetURL(path, poster = false) { | |
| const encoded = path.split("/").map(encodeURIComponent).join("/"); | |
| return local ? new URL((poster ? "./" : "../") + encoded, location.href).href : REMOTE_BASE + encoded; | |
| } | |
| function announce(message) { $("playback-status").textContent = message; } | |
| function toast(message) { | |
| clearTimeout(toastTimer); | |
| $("toast").textContent = message; | |
| $("toast").hidden = false; | |
| toastTimer = setTimeout(() => { $("toast").hidden = true; }, 3500); | |
| } | |
| function pauseAll() { | |
| requestVersion++; | |
| videos.forEach(video => video.pause()); | |
| announce("All videos paused."); | |
| } | |
| function filteredSamples() { | |
| return manifest.samples.filter(sample => | |
| (category === "All" || sample.category === category) && | |
| `${sample.title} ${sample.category}`.toLowerCase().includes(query) | |
| ); | |
| } | |
| function renderList() { | |
| const samples = filteredSamples(); | |
| const fragment = document.createDocumentFragment(); | |
| for (const sample of samples) { | |
| const button = element("button", "sample-button"); | |
| button.type = "button"; | |
| button.dataset.sampleId = sample.id; | |
| button.setAttribute("aria-pressed", String(sample.id === selectedId)); | |
| button.setAttribute("aria-controls", "comparison"); | |
| const preview = sample.videos.Our || Object.values(sample.videos)[0]; | |
| const image = element("img", "sample-thumbnail"); | |
| image.src = assetURL(preview.poster, true); | |
| image.alt = ""; | |
| image.loading = "lazy"; | |
| image.width = 58; | |
| image.height = 42; | |
| const text = element("span", "sample-text"); | |
| text.append(element("span", "sample-name", sample.title), element("span", "sample-subtitle", sample.category)); | |
| button.append(image, text); | |
| if (sample.id === selectedId) button.append(element("span", "sample-current-dot")); | |
| button.addEventListener("click", () => { | |
| selectSample(sample.id); | |
| if (matchMedia("(max-width: 800px)").matches) { | |
| $("sample-browser").open = false; | |
| $("comparison").focus({ preventScroll: true }); | |
| $("comparison").scrollIntoView({ behavior: "instant", block: "start" }); | |
| } | |
| }); | |
| fragment.append(button); | |
| } | |
| $("sample-list").replaceChildren(fragment); | |
| $("sample-count").textContent = String(samples.length); | |
| $("browse-hint").hidden = samples.length <= 5; | |
| $("browse-hint").textContent = `Scroll to browse all ${samples.length} samples ↓`; | |
| $("empty-results").hidden = samples.length > 0; | |
| } | |
| function renderCategories() { | |
| const fragment = document.createDocumentFragment(); | |
| for (const name of ["All", ...new Set(manifest.samples.map(sample => sample.category))]) { | |
| const button = element("button", "category-button", name); | |
| button.type = "button"; | |
| button.setAttribute("aria-pressed", String(name === category)); | |
| button.addEventListener("click", () => { | |
| category = name; | |
| for (const peer of $("categories").children) peer.setAttribute("aria-pressed", String(peer === button)); | |
| renderList(); | |
| }); | |
| fragment.append(button); | |
| } | |
| $("categories").replaceChildren(fragment); | |
| } | |
| function makeCard(model, sample) { | |
| const metadata = sample.videos[model.id]; | |
| const label = model.id === "Our" ? "WorldGuide" : model.id === "Barnini" ? "Bernini*" : model.label; | |
| const card = element("article", `video-card${model.ours ? " ours" : ""}`); | |
| card.dataset.model = model.id; | |
| const heading = element("div", "card-heading"); | |
| const title = element("h3", "", label); | |
| title.id = `model-${model.id}`; | |
| heading.append(title, element("span", "model-dot")); | |
| const frame = element("div", "video-frame"); | |
| const video = element("video"); | |
| video.controls = true; | |
| video.muted = true; | |
| video.defaultMuted = true; | |
| video.playsInline = true; | |
| video.preload = "none"; | |
| video.poster = assetURL(metadata.poster, true); | |
| video.src = assetURL(metadata.path); | |
| video.setAttribute("aria-label", `${label}: ${sample.title}`); | |
| video.playbackRate = Number($("playback-speed").value); | |
| frame.append(video); | |
| const footer = element("div", "card-footer"); | |
| const specs = element("span", "video-specs mono"); | |
| specs.append(element("span", "", `${metadata.duration.toFixed(1)}s`), element("span", "", `${metadata.width} × ${metadata.height}`)); | |
| const open = element("a", "", "Open video ↗"); | |
| open.href = video.src; | |
| open.target = "_blank"; | |
| open.rel = "noopener noreferrer"; | |
| open.setAttribute("aria-label", `Open ${label} video`); | |
| footer.append(specs, open); | |
| const error = element("div", "video-error"); | |
| error.hidden = true; | |
| error.setAttribute("role", "status"); | |
| error.append(element("span", "", "Video couldn’t load.")); | |
| const retry = element("button", "text-button", "Retry"); | |
| retry.type = "button"; | |
| retry.addEventListener("click", () => { | |
| error.hidden = true; | |
| video.load(); | |
| video.play().catch(() => { if (video.isConnected) error.hidden = false; }); | |
| }); | |
| error.append(retry); | |
| video.addEventListener("error", () => { error.hidden = false; }); | |
| video.addEventListener("playing", () => { error.hidden = true; }); | |
| card.append(heading, frame, footer, error, | |
| window.WorldGuideRatings.createPanel({ sampleId: sample.id, modelId: model.id, label })); | |
| videos.push(video); | |
| return card; | |
| } | |
| function selectSample(id, updateURL = true) { | |
| const sample = manifest.samples.find(item => item.id === id) || manifest.samples[0]; | |
| pauseAll(); | |
| // Release previous requests when moving between samples. | |
| videos.forEach(video => { video.removeAttribute("src"); video.load(); }); | |
| videos = []; | |
| selectedId = sample.id; | |
| $("sample-title").textContent = sample.title; | |
| $("sample-category").textContent = sample.category; | |
| $("sample-position").textContent = `${manifest.samples.indexOf(sample) + 1} / ${manifest.samples.length}`; | |
| document.title = `${sample.title} — WorldGuide`; | |
| const models = MODEL_ORDER.map(id => manifest.models.find(model => model.id === id)); | |
| $("video-grid").replaceChildren(...models.map(model => makeCard(model, sample))); | |
| renderList(); | |
| announce(`${sample.title}. ${models.length} model videos ready to play.`); | |
| if (updateURL) { | |
| const url = new URL(location.href); | |
| url.searchParams.set("sample", sample.id); | |
| history.replaceState(null, "", url); | |
| } | |
| } | |
| async function playAll() { | |
| const version = ++requestVersion; | |
| announce("Loading and playing all videos."); | |
| const results = await Promise.allSettled(videos.map(video => { | |
| if (video.ended) video.currentTime = 0; | |
| return video.play(); | |
| })); | |
| if (version !== requestVersion) return; | |
| const failed = results.filter(result => result.status === "rejected").length; | |
| if (failed) toast("Some videos couldn’t start. Try their individual play controls."); | |
| announce(failed ? "Some videos could not start." : "All videos playing."); | |
| } | |
| function moveSample(delta) { | |
| const index = manifest.samples.findIndex(sample => sample.id === selectedId); | |
| selectSample(manifest.samples[(index + delta + manifest.samples.length) % manifest.samples.length].id); | |
| $("sample-list").querySelector('[aria-pressed="true"]')?.scrollIntoView({ block: "nearest" }); | |
| } | |
| async function copyLink() { | |
| const url = new URL(location.href); | |
| url.searchParams.delete("local"); | |
| url.searchParams.set("sample", selectedId); | |
| // A Space can be framed, but its direct URL is still a valid share link. | |
| try { | |
| await navigator.clipboard.writeText(url.href); | |
| toast("Comparison link copied."); | |
| } catch { | |
| window.prompt("Copy this comparison link:", url.href); | |
| } | |
| } | |
| function validate(data) { | |
| if (data.schemaVersion !== 1 || data.dataset !== DATASET || !Array.isArray(data.samples) || !data.samples.length || !Array.isArray(data.models) || data.models.length !== MODEL_ORDER.length) throw new Error("Invalid collection manifest"); | |
| const ids = new Set(); | |
| const modelIds = new Set(data.models.map(model => model.id)); | |
| if (modelIds.size !== MODEL_ORDER.length || !MODEL_ORDER.every(id => modelIds.has(id))) throw new Error("Invalid model list"); | |
| for (const sample of data.samples) { | |
| if (typeof sample.id !== "string" || ids.has(sample.id) || typeof sample.title !== "string" || typeof sample.category !== "string") throw new Error("Invalid sample"); | |
| ids.add(sample.id); | |
| for (const model of data.models) { | |
| const video = sample.videos?.[model.id]; | |
| if (!video || !Number.isFinite(video.duration) || video.duration <= 0 || !Number.isFinite(video.width) || !Number.isFinite(video.height)) throw new Error("Missing video metadata"); | |
| for (const path of [video.path, video.poster]) { | |
| if (typeof path !== "string" || path.startsWith("/") || path.split("/").includes("..") || path.includes(":")) throw new Error("Invalid asset path"); | |
| } | |
| } | |
| } | |
| return data; | |
| } | |
| async function fetchManifest(url) { | |
| const response = await fetch(url, { signal: AbortSignal.timeout(12000) }); | |
| if (!response.ok) throw new Error(`Manifest request failed: ${response.status}`); | |
| return validate(await response.json()); | |
| } | |
| async function init() { | |
| try { | |
| if (local) manifest = await fetchManifest("./manifest.json"); | |
| else { | |
| try { manifest = await fetchManifest(REMOTE_BASE + "manifest.json"); } | |
| catch { manifest = await fetchManifest("./manifest.json"); } | |
| } | |
| $("sample-total").textContent = String(manifest.samples.length); | |
| $("model-total").textContent = String(manifest.models.length); | |
| $("video-total").textContent = String(manifest.samples.length * manifest.models.length); | |
| renderCategories(); | |
| selectSample(params.get("sample"), false); | |
| $("comparison").setAttribute("aria-busy", "false"); | |
| for (const id of ["previous", "next", "play-all", "pause-all", "restart", "copy-link"]) $(id).disabled = false; | |
| } catch (error) { | |
| console.error("WorldGuide collection failed to load:", error.message); | |
| $("comparison-content").hidden = true; | |
| $("load-error").hidden = false; | |
| $("comparison").setAttribute("aria-busy", "false"); | |
| } | |
| } | |
| $("sample-browser").open = !matchMedia("(max-width: 800px)").matches; | |
| $("sample-search").addEventListener("input", event => { query = event.target.value.trim().toLowerCase(); if (manifest) renderList(); }); | |
| $("clear-filters").addEventListener("click", () => { category = "All"; query = ""; $("sample-search").value = ""; renderCategories(); renderList(); $("sample-search").focus(); }); | |
| $("previous").addEventListener("click", () => moveSample(-1)); | |
| $("next").addEventListener("click", () => moveSample(1)); | |
| $("play-all").addEventListener("click", playAll); | |
| $("pause-all").addEventListener("click", pauseAll); | |
| $("restart").addEventListener("click", () => { pauseAll(); videos.forEach(video => { video.currentTime = 0; }); announce("All videos reset to the beginning."); }); | |
| $("playback-speed").addEventListener("change", event => { videos.forEach(video => { video.playbackRate = Number(event.target.value); }); }); | |
| $("copy-link").addEventListener("click", copyLink); | |
| $("reload").addEventListener("click", () => location.reload()); | |
| window.addEventListener("popstate", () => { if (manifest) selectSample(new URLSearchParams(location.search).get("sample"), false); }); | |
| window.addEventListener("pagehide", pauseAll); | |
| init(); | |
| })(); | |