Blame for index.html

<!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=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"}[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>