MikhailBird's picture
Update DreamZero saved-video explorer
197112d verified
Raw History Blame Contribute Delete
8.95 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#f5f7f7">
<meta name="description" content="Compare DreamZero WAM forecasts with actual simulator rollouts across ten shared evaluation worlds.">
<title>DreamZero · Rollout Lab</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body>
<header class="topbar"><a class="brand" href="./"><span class="brand-mark">dz<span></span></span><span>DreamZero <span class="brand-secondary">/ Rollout Lab</span></span></a><a class="toplink" href="https://huggingface.co/OneWorld-AI" target="_blank" rel="noreferrer">OneWorld AI <span aria-hidden="true">↗</span></a></header>
<main>
<section class="intro">
<div><div class="eyebrow"><span class="status-dot"></span> EXPERIMENT 10 · CANON DREAMZERO</div><h1>What the model imagined.<br><span>What the robot did.</span></h1><p class="lede">Explore generated futures beside the recorded simulation.<br>Ten shared worlds per checkpoint. Every prediction window.</p></div>
<div class="intro-side"><label for="checkpoint">CHECKPOINT</label><select id="checkpoint" aria-label="Checkpoint"><option value="2000">Step 2,000</option><option value="1000">Step 1,000</option></select><span class="task-label">Throw plastic bottles into the bin</span><span id="checkpointProgress" class="checkpoint-progress"></span><div class="tag-row"><span>Absolute EEF</span><span>Blender</span><span>48 actions / call</span></div></div>
</section>
<section class="stats" aria-label="Checkpoint results"><div><span class="stat-label">TASK SUCCESS</span><strong id="successStat">— <small>/ 10 worlds</small></strong></div><div><span class="stat-label">MEAN MAX REWARD</span><strong id="rewardStat">—</strong></div><div><span class="stat-label">BUDGET / WORLD</span><strong>22,000 <small>actions</small></strong></div><div><span class="stat-label">SAVED FORECASTS</span><strong id="forecastStat">—</strong></div><div class="stats-note">Success requires all four bottles in the bin. Partial reward shows progress toward that goal.</div></section>
<section class="world-section" aria-labelledby="worldsTitle"><div class="section-heading"><div><span class="eyebrow">01 / CHOOSE A WORLD</span><h2 id="worldsTitle">The same scenes, at each checkpoint.</h2></div><span class="hint">Select a thumbnail to explore</span></div><div id="worlds" class="worlds" role="group" aria-label="Evaluation worlds"></div></section>
<section id="viewer" class="viewer" aria-labelledby="viewerTitle">
<div class="viewer-heading"><div><div class="eyebrow">02 / COMPARE OBSERVATION & FORECAST</div><h2 id="viewerTitle">World <span id="worldNumber">01</span> <span class="seed">SEED <span id="seedLabel">—</span></span></h2></div><button id="share" class="button quiet" title="Copy a link to this world and timeline position">Copy link <span aria-hidden="true">↗</span></button></div>
<div class="players">
<article class="player-card"><div class="player-heading"><div><span class="panel-dot sim"></span><strong>Simulator rollout</strong><span class="panel-subtitle">Recorded observation</span></div><select id="layout" aria-label="Simulator camera layout"><option value="canvas">Matched canvas</option><option value="strip">3-camera strip</option></select></div><div class="video-stage" id="simStage"><video id="simVideo" muted playsinline preload="metadata" aria-label="Recorded simulator rollout"></video><div class="video-watermark">SIMULATOR</div><span class="loading-label" id="simLoading">Loading observation…</span></div><div class="player-footer"><span id="sampleLabel">Recorded sample · step 0</span><a id="simDownload" download target="_blank" rel="noreferrer">Download original ↗</a></div></article>
<article class="player-card"><div class="player-heading"><div><span class="panel-dot wam"></span><strong>WAM prediction</strong><span class="panel-subtitle">Generated future</span></div><button class="button mini" id="loopPrediction">▶ Loop this forecast</button></div><div class="video-stage"><video id="wamVideo" muted playsinline preload="metadata" aria-label="Generated WAM prediction"></video><div class="video-watermark amber">GENERATED</div><span class="window-badge" id="windowBadge">FORECAST 001 / 459</span><span class="loading-label" id="wamLoading">Loading prediction…</span></div><div class="player-footer"><span id="forecastLabel">Forecast · steps 0–48</span><a id="wamDownload" download target="_blank" rel="noreferrer">Download all forecasts ↗</a></div></article>
</div>
<div class="transport"><button id="play" class="button primary" aria-label="Play simulator rollout">▶ Play rollout</button><label class="speed-label">Speed <select id="speed" aria-label="Playback speed in simulated real time"><option value="1">1×</option><option value="4" selected>4×</option><option value="12">12×</option><option value="30">30×</option></select></label><div class="transport-time"><strong id="stepLabel">0 <span>/ 22,000 actions</span></strong><span id="timeLabel">0:00 / 12:28 simulated</span></div><button id="restart" class="button quiet" title="Return to the start">↺ Restart</button></div>
<div class="scrubber"><label class="sr-only" for="timeline">Simulator timeline, in actions</label><input id="timeline" type="range" min="0" max="22000" step="1" value="0"><div class="timeline-labels"><span>0</span><span>5,500</span><span>11,000</span><span>16,500</span><span>22,000 actions</span></div></div>
<div class="forecast-controls"><div><span class="control-label">INSPECT A FORECAST</span><button id="prevPrediction" class="icon-button" aria-label="Previous forecast">←</button><input id="predictionNumber" type="number" min="1" max="459" value="1" aria-label="Forecast number"><span class="muted">of <span id="predictionCount">459</span></span><button id="nextPrediction" class="icon-button" aria-label="Next forecast">→</button></div><div class="forecast-position" id="forecastPosition">Current frame <span>→ +6 → +12 → … → +48 actions</span></div><button id="firstReward" class="button quiet" disabled>Jump to first reward ↗</button></div>
<p class="sampling-note" id="samplingNote">Loading recording cadence…</p>
<div class="world-result"><span id="outcomeBadge" class="outcome">Budget reached</span><span>Selected world: max reward <strong id="worldMax">—</strong> · final reward <strong id="worldFinal">—</strong></span><a id="dataDownload" download target="_blank" rel="noreferrer">World data & provenance ↗</a></div>
</section>
<section class="reward-section" aria-labelledby="rewardTitle"><div class="section-heading"><div><span class="eyebrow">03 / FOLLOW THE OUTCOME</span><h2 id="rewardTitle">Reward over the rollout.</h2></div><div class="chart-legend" id="chartLegend"><span><i class="legend-line cp2000"></i>Step 2,000</span><span><i class="legend-line cp1000"></i>Step 1,000</span></div></div><div class="chart-wrap"><svg id="rewardChart" viewBox="0 0 1200 190" role="img" aria-label="Reward against simulator actions for available checkpoints"></svg><p>Click the chart to seek. Reward is measured every 50 actions. A value of 1 means the task is solved.</p></div></section>
<details class="method"><summary>About these recordings <span>Protocol, timing & interpretation</span></summary><div class="method-grid"><div><h3>Closed-loop simulation</h3><p>Each call sees the latest simulator cameras and measured state, predicts a 48-action block, and executes it. Generated video is saved for inspection and is never fed back as the next observation.</p></div><div><h3>Independent prediction windows</h3><p>Every forecast contains the current frame followed by eight generated frames. “Loop this forecast” isolates one window. “Play rollout” follows the full simulator timeline and selects its corresponding forecast.</p></div><div><h3>Matching the training contract</h3><p>Absolute canonical base-frame end-effector actions, ABC-source quantile normalization, canonical grippers, and inverse kinematics. The canvas puts the top camera above the left and right wrist cameras.</p></div><div><h3>Read results at the right scope</h3><p>Each checkpoint evaluates ten shared worlds. New recordings appear individually as they finish; the ready count shows the scope of the displayed results. All 22,000 actions are budgeted; the last stored simulator image is at action <span id="lastSampleLabel">—</span>.</p></div></div></details>
<footer><span>OneWorld AI · DreamZero · Experiment 10</span><a href="manifest.json" target="_blank" rel="noreferrer">Evaluation manifest ↗</a><span id="buildLabel"></span></footer>
<div id="toast" class="toast" role="status" aria-live="polite"></div>
<div id="error" class="error" role="alert" hidden></div>
</main>
</body>
</html>