| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>WorldModelBench Motion Review</title> |
| <link rel="stylesheet" href="styles.css" /> |
| </head> |
| <body> |
| <header class="topbar"> |
| <div class="title-block"> |
| <p class="eyebrow">WorldModelBench</p> |
| <h1>Motion generation review</h1> |
| </div> |
| <div class="summary" aria-label="Dataset summary"> |
| <span><strong>38</strong> outputs</span> |
| <span><strong>17</strong> Seedance</span> |
| <span><strong>21</strong> Kling</span> |
| <span class="local-status"><i></i> Local media</span> |
| </div> |
| </header> |
|
|
| <main> |
| <div class="toolbar"> |
| <label class="search-field"> |
| <span class="search-icon" aria-hidden="true"></span> |
| <span class="sr-only">Search videos</span> |
| <input id="search" type="search" placeholder="Search scenes or prompts" autocomplete="off" /> |
| </label> |
| <div class="segmented" role="group" aria-label="Filter by model"> |
| <button type="button" class="active" data-filter="all">All <span>38</span></button> |
| <button type="button" data-filter="seedance">Seedance <span>17</span></button> |
| <button type="button" data-filter="kling">Kling <span>21</span></button> |
| </div> |
| </div> |
|
|
| <section id="gallery" class="gallery" aria-live="polite"></section> |
| <p id="empty-state" class="empty-state" hidden>No matching videos.</p> |
| </main> |
|
|
| <dialog id="viewer" class="viewer"> |
| <div class="viewer-shell"> |
| <div class="viewer-bar"> |
| <div> |
| <p id="viewer-index" class="viewer-index"></p> |
| <h2 id="viewer-title"></h2> |
| </div> |
| <button id="close-viewer" class="icon-button" type="button" aria-label="Close video">×</button> |
| </div> |
| <div class="video-stage"> |
| <video id="video-player" controls playsinline preload="metadata"></video> |
| </div> |
| <div class="viewer-details"> |
| <p id="viewer-prompt" class="viewer-prompt"></p> |
| <dl> |
| <div><dt>Model</dt><dd id="viewer-model"></dd></div> |
| <div><dt>Input frame</dt><dd id="viewer-frame"></dd></div> |
| <div><dt>Duration</dt><dd>5.04 s</dd></div> |
| </dl> |
| </div> |
| <div class="viewer-actions"> |
| <button id="previous-video" type="button" class="secondary-command">Previous</button> |
| <button id="next-video" type="button" class="primary-command">Next</button> |
| </div> |
| </div> |
| </dialog> |
|
|
| <script src="app.js"></script> |
| </body> |
| </html> |
|
|
