| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>World Model Data & Benchmark Lab</title> |
| <meta name="description" content="World model datasets, benchmark design and evaluation schemas."> |
| <style> |
| :root{ |
| --bg:#070b14;--panel:#0d1424;--line:#22304b;--text:#eef5ff;--muted:#9fb0ca;--accent:#82adff |
| } |
| *{box-sizing:border-box} |
| body{ |
| margin:0;background: |
| radial-gradient(circle at 15% -10%,rgba(70,110,255,.18),transparent 34%), |
| radial-gradient(circle at 90% 0%,rgba(145,95,255,.11),transparent 34%),var(--bg); |
| color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif |
| } |
| .wrap{max-width:1500px;margin:0 auto;padding:28px} |
| .hero,.panel{border:1px solid var(--line);border-radius:22px;background:rgba(13,20,36,.94)} |
| .hero{padding:34px;background:linear-gradient(145deg,rgba(18,31,58,.97),rgba(8,14,27,.97))} |
| .kicker{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:#b8c8df;margin-bottom:12px} |
| h1{font-size:clamp(2.2rem,5vw,4.6rem);line-height:.98;margin:0 0 14px} |
| h2,h3{margin-top:0} |
| .hero p,.lead{max-width:980px;color:var(--muted);line-height:1.7} |
| .grid{display:grid;gap:18px;margin-top:18px} |
| .panel{padding:24px} |
| .controls{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-bottom:14px} |
| input,select{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:#08111f;color:var(--text);font:inherit} |
| .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} |
| .card{border:1px solid var(--line);border-radius:16px;background:#09111f;padding:15px;cursor:pointer;transition:.15s ease} |
| .card:hover,.card.active{border-color:#4d6f9f;background:#0d192b} |
| .badge{display:inline-block;font-size:.7rem;border:1px solid #31435f;border-radius:999px;padding:4px 7px;color:#bed0e8;margin:0 4px 5px 0} |
| .card h3{font-size:1rem;margin-bottom:6px} |
| .small{font-size:.87rem;color:var(--muted);line-height:1.5} |
| .detail{display:grid;grid-template-columns:.9fr 1.1fr;gap:14px} |
| .box{border:1px solid var(--line);border-radius:16px;background:#09111f;padding:16px} |
| .note{border-left:3px solid var(--accent);background:#091426;border-radius:10px;padding:13px 15px;color:#bccbe0;line-height:1.6} |
| .stack{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} |
| .stack .box strong{display:block;margin-bottom:5px} |
| .footer{text-align:center;color:#8295af;font-size:.86rem;padding:28px 0 8px} |
| .footer a{color:#aac7ff} |
| @media(max-width:900px){.cards,.detail,.stack{grid-template-columns:1fr}.controls{grid-template-columns:1fr}} |
| @media(max-width:620px){.wrap{padding:14px}.hero,.panel{padding:18px;border-radius:16px}} |
| </style> |
| </head> |
| <body> |
| <div class="wrap"> |
| <section class="hero"> |
| <div class="kicker">WORLD MODEL · DATA & BENCHMARK LAB</div> |
| <h1>Data & Benchmark Lab</h1> |
| <p> |
| Explore practical dataset patterns, split strategies and benchmark designs for predictive, |
| action-conditioned and long-horizon world models. |
| </p> |
| </section> |
|
|
| <div class="grid"> |
| <section class="panel"> |
| <h2>Dataset & Benchmark Patterns</h2> |
| <div class="controls"> |
| <input id="search" type="search" placeholder="Search rollout, split, actions, generalization…" /> |
| <select id="type"><option value="">All types</option></select> |
| </div> |
| <div id="cards" class="cards"></div> |
| </section> |
|
|
| <section class="panel"> |
| <div class="detail"> |
| <div class="box"> |
| <div id="meta"></div> |
| <h2 id="title"></h2> |
| <p id="focus" class="small"></p> |
| <h3>Best for</h3> |
| <div id="best"></div> |
| <div class="note" style="margin-top:14px"> |
| <strong>Main risk</strong><br> |
| <span id="risk"></span> |
| </div> |
| </div> |
| <div class="box"> |
| <h3>Required fields / signals</h3> |
| <div id="required"></div> |
| <h3 style="margin-top:16px">Optional fields / signals</h3> |
| <div id="optional"></div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="panel"> |
| <h2>Benchmark stack</h2> |
| <div class="stack"> |
| <div class="box"><strong>Prediction</strong><span class="small">Measure immediate next-state quality.</span></div> |
| <div class="box"><strong>Rollout</strong><span class="small">Measure error growth over several horizons.</span></div> |
| <div class="box"><strong>Action fidelity</strong><span class="small">Verify that actions produce correct future changes.</span></div> |
| <div class="box"><strong>Generalization</strong><span class="small">Use held-out environments, tasks, objects or embodiments.</span></div> |
| <div class="box"><strong>Planning utility</strong><span class="small">Measure whether the model improves decisions.</span></div> |
| <div class="box"><strong>Efficiency</strong><span class="small">Track latency, memory and rollout throughput.</span></div> |
| </div> |
| </section> |
|
|
| <section class="panel"> |
| <h2>Included practical files</h2> |
| <p class="lead"> |
| <code>transition_schema.json</code> · <code>episode_schema.json</code> · |
| <code>benchmark_config.json</code> · <code>evaluation_template.csv</code> |
| </p> |
| </section> |
| </div> |
|
|
| <div class="footer"> |
| World Model · Cooperation, research and ecosystem partnerships: |
| <a href="mailto:agenten@magenta.de">agenten@magenta.de</a> |
| </div> |
| </div> |
|
|
| <script> |
| const DATA = [{"name": "Transition Dataset", "type": "Dataset Pattern", "focus": "One-step dynamics", "best_for": ["Dynamics learning", "Control", "Simple environments"], "required": ["observation_t", "action_t", "observation_t+1"], "optional": ["reward", "done", "goal", "timestamp"], "risk": "Frame-level random splits can leak nearly identical states across train and test."}, {"name": "Episode Dataset", "type": "Dataset Pattern", "focus": "Sequential dynamics", "best_for": ["Rollouts", "Memory", "Long-horizon modeling"], "required": ["episode_id", "observations[]", "actions[]"], "optional": ["rewards[]", "terminal", "instruction", "metadata"], "risk": "Broken episode boundaries can destroy temporal structure."}, {"name": "Multimodal Episode", "type": "Dataset Pattern", "focus": "Cross-modal world state", "best_for": ["Robotics", "Embodied AI", "Physical AI"], "required": ["video", "actions", "robot_state"], "optional": ["depth", "audio", "language", "force", "pose"], "risk": "Unsynchronized modalities create false transition errors."}, {"name": "One-Step Benchmark", "type": "Benchmark Pattern", "focus": "Immediate next-state prediction", "best_for": ["Fast iteration", "Architecture debugging"], "required": ["held-out transitions", "prediction metric"], "optional": ["uncertainty", "per-task breakdown"], "risk": "Can hide catastrophic long-horizon drift."}, {"name": "Multi-Horizon Benchmark", "type": "Benchmark Pattern", "focus": "Error growth over time", "best_for": ["Rollouts", "Planning", "Simulation"], "required": ["horizons", "rollout protocol", "per-horizon metric"], "optional": ["drift ratio", "consistency score"], "risk": "Averaging across horizons can conceal where failure begins."}, {"name": "Action Fidelity Benchmark", "type": "Benchmark Pattern", "focus": "Correct action consequences", "best_for": ["Robotics", "Interactive worlds", "Agents"], "required": ["paired actions", "ground-truth transitions"], "optional": ["counterfactual actions", "action sensitivity"], "risk": "Visual similarity alone does not prove correct causal response."}, {"name": "OOD Generalization Split", "type": "Split Strategy", "focus": "Distribution shift", "best_for": ["Deployment", "Robotics", "Robustness"], "required": ["held-out environments or tasks"], "optional": ["held-out objects", "held-out embodiments"], "risk": "Random splits can dramatically overestimate generalization."}, {"name": "Planning Utility Benchmark", "type": "Benchmark Pattern", "focus": "Downstream decision quality", "best_for": ["Agents", "MPC", "Model-based RL"], "required": ["planner", "task success metric", "world-model rollouts"], "optional": ["regret", "return", "sample efficiency"], "risk": "Prediction scores may not correlate with better decisions."}, {"name": "Control Benchmark", "type": "Benchmark Pattern", "focus": "Closed-loop task performance", "best_for": ["Robotics", "Autonomous systems"], "required": ["environment", "policy/controller", "success metric"], "optional": ["safety violations", "energy", "path efficiency"], "risk": "Offline prediction quality may not transfer to closed-loop control."}, {"name": "Efficiency Benchmark", "type": "Benchmark Pattern", "focus": "Operational cost", "best_for": ["Real-time systems", "Large search spaces"], "required": ["latency", "memory", "throughput"], "optional": ["energy", "rollouts/sec", "cost"], "risk": "A strong model may be unusable if rollouts are too slow for planning."}]; |
| const $ = id => document.getElementById(id); |
| let selected = DATA[0]?.name || null; |
| function esc(s){return String(s??"").replace(/[&<>"']/g,c=>({"&":"&","<":"<",">":">",'"':""","'":"'"}[c]));} |
| function uniq(xs){return [...new Set(xs)].sort();} |
| function badges(xs){return xs.map(x=>`<span class="badge">${esc(x)}</span>`).join("");} |
| function show(item){ |
| selected=item.name; |
| $("title").textContent=item.name; |
| $("focus").textContent=item.focus; |
| $("risk").textContent=item.risk; |
| $("meta").innerHTML=`<span class="badge">${esc(item.type)}</span>`; |
| $("best").innerHTML=badges(item.best_for); |
| $("required").innerHTML=badges(item.required); |
| $("optional").innerHTML=badges(item.optional); |
| document.querySelectorAll(".card").forEach(c=>c.classList.toggle("active",c.dataset.name===selected)); |
| } |
| function render(){ |
| const q=$("search").value.trim().toLowerCase(); |
| const type=$("type").value; |
| const filtered=DATA.filter(x=>{ |
| const h=[x.name,x.type,x.focus,x.risk,...x.best_for,...x.required,...x.optional].join(" ").toLowerCase(); |
| if(q&&!h.includes(q))return false; |
| if(type&&x.type!==type)return false; |
| return true; |
| }); |
| $("cards").innerHTML=filtered.map(x=>` |
| <article class="card ${x.name===selected?"active":""}" data-name="${esc(x.name)}" tabindex="0"> |
| <span class="badge">${esc(x.type)}</span> |
| <h3>${esc(x.name)}</h3> |
| <div class="small">${esc(x.focus)}</div> |
| </article> |
| `).join(""); |
| document.querySelectorAll(".card").forEach(card=>{ |
| const activate=()=>show(DATA.find(x=>x.name===card.dataset.name)); |
| card.addEventListener("click",activate); |
| card.addEventListener("keydown",e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();activate();}}); |
| }); |
| if(filtered.length&&!filtered.some(x=>x.name===selected))show(filtered[0]); |
| } |
| uniq(DATA.map(x=>x.type)).forEach(v=>{ |
| const o=document.createElement("option");o.value=v;o.textContent=v;$("type").appendChild(o); |
| }); |
| $("search").addEventListener("input",render); |
| $("type").addEventListener("change",render); |
| render();show(DATA[0]); |
| </script> |
| </body> |
| </html> |
|
|
