File size: 6,491 Bytes
d95996a 31443df d95996a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | <!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>
|