| <!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> |
|
|
