Code4Scene / cases.html
KoeYe's picture
Claude Opus 5.5
Four more Image-to-Scene cases: Suburban Umbrella Pair, Rosie's Service Bin, Rosie's Roadside Billboard, Suburban Driveway Mailbox
cca5a6d
Raw History Blame Contribute Delete
30.7 kB
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/>
<title>Code4Scene · Cases in 3D</title><meta content="Selected Code4Scene cases: every agent's saved scene in 3D and the evaluator's scores." name="description"/>
<link href="assets/code4scene-mark.svg" rel="icon"/>
<link href="assets/paper.css?v=5427505a" rel="stylesheet"/>
<style>
:root{--c4s-a:#5a67d8;--c4s-b:#d97706;--c4s-hot:#dc4a2d;--c4s-ok:#10A37F;--c4s-g1:#8b93a7;--c4s-g2:#aab1c2;--c4s-g3:#cdd2de;--c4s-seq:#5a67d8;--c4s-unit:#e3e7f0}
svg.ch{width:100%;height:auto;display:block;font-family:Inter,system-ui,sans-serif;overflow:visible}
svg.ch text{fill:var(--text-secondary);font-size:13px}svg.ch .b{fill:var(--text-primary);font-weight:700}svg.ch .m{fill:var(--text-muted);font-size:12px}
svg.ch .num{font-variant-numeric:tabular-nums}svg.ch .grid{stroke:var(--line-soft);stroke-width:1}svg.ch .axis{stroke:var(--line-strong);stroke-width:1}
svg.ch .dim{opacity:.42}svg.ch g.row:hover{opacity:1}svg.ch .hot{fill:var(--c4s-hot)!important;font-weight:700}
.ch-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 10px;font-size:13px;color:var(--text-secondary)}
.ch-legend span{display:inline-flex;align-items:center;gap:7px}.ch-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.ev{position:relative;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line-soft)}.ev img{display:block;width:100%}
.ev svg{position:absolute;inset:0;width:100%;height:100%}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.chip{font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--line)}
.chip.ok{color:var(--c4s-ok);border-color:currentColor}.chip.no{color:var(--c4s-hot);border-color:currentColor}.chip small{font-weight:500;color:var(--text-muted);margin-left:4px}
.bigstats{display:flex;flex-wrap:wrap;gap:12px 34px;margin:0 0 12px}.bigstats b{display:block;font-size:30px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bigstats span{font-size:13px;color:var(--text-secondary)}
</style><style>.casebar{display:grid;gap:10px;margin:0 0 18px}
.cb-row{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:start}
.cb-row .grp{display:flex;flex-direction:column;line-height:1.25;padding-top:9px}.cb-row .grp b{font-size:13px;color:var(--text-h)}.cb-row .grp span{font-size:12px;color:var(--text-muted)}
.cb-btns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.casebar button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;border:1px solid var(--line);background:var(--surface-1);border-radius:10px;padding:8px 13px;font:600 14px Inter,sans-serif;cursor:pointer;color:var(--text-h);text-align:left;min-width:0}
.casebar button span{line-height:1.3}
.casebar button:hover{border-color:var(--line-strong)}
.casebar button small{font-weight:500;font-size:12px;color:var(--text-muted);white-space:nowrap}
.casebar button.on{background:var(--text-h);color:#fff;border-color:var(--text-h)}.casebar button.on small{color:rgba(255,255,255,.7)}
@media(max-width:900px){.cb-btns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.cb-row{grid-template-columns:1fr;gap:6px}.cb-row .grp{flex-direction:row;gap:6px;padding-top:0}}
.casegrid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);gap:18px;align-items:start}
.viewer{position:relative;aspect-ratio:16/9;background:#15130f;border-radius:var(--radius-sm);overflow:hidden}
.viewer img,.viewer canvas{width:100%;height:100%;object-fit:cover;display:block}.viewer canvas{cursor:grab}
.viewer .hint{position:absolute;left:12px;bottom:10px;font-size:12px;color:#eee;background:rgba(0,0,0,.5);padding:4px 9px;border-radius:6px;pointer-events:none}
.viewer .load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ddd;font-size:14px}
.vtabs{display:flex;gap:6px;margin:10px 0 0;flex-wrap:wrap}
.vtabs button{border:1px solid var(--line);background:var(--surface-1);border-radius:8px;padding:5px 10px;font:600 13px Inter,sans-serif;cursor:pointer;color:var(--text-secondary)}
.vtabs button.on{border-color:var(--text-primary);color:var(--text-primary)}
.agents{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:12px}
.agents .ag{all:unset;cursor:pointer;border-radius:8px;overflow:hidden;outline:2px solid transparent;background:var(--surface-1);border:1px solid var(--line-soft)}
.agents .ag.on{outline-color:var(--accent)}.agents .ag:focus-visible{outline-color:var(--accent-bright)}
.agents .ag .th{aspect-ratio:16/9;background:#222 center/cover no-repeat;position:relative}
.agents .ag .th i{position:absolute;right:4px;top:4px;font:700 10px Inter,sans-serif;background:var(--accent);color:#fff;border-radius:4px;padding:1px 5px;font-style:normal}
.agents .ag .cap{font-size:11px;line-height:1.25;padding:4px 6px 5px;color:var(--text-secondary)}.agents .ag .cap b{font-size:13px;color:var(--text-primary)}
.panel{border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:12px;background:var(--surface-1)}
.panel h4{margin:0;font-size:15px;display:flex;align-items:center;gap:7px}.panel .rk{margin:.15rem 0 .4rem;color:var(--text-muted);font-size:13px}
.logo{width:18px;height:18px;display:inline-flex;vertical-align:middle}.logo svg{width:100%;height:100%}
.sc-big{font-size:46px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05}
.sc-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(60px,1fr) 44px;gap:10px;align-items:center;margin-top:9px;font-size:14px}
.sc-row .tr{height:9px;background:var(--surface-3);border-radius:5px;overflow:hidden}.sc-row .fi{height:100%;background:var(--accent);border-radius:0 4px 4px 0}
.sc-row .v{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}.sc-row .w{color:var(--text-muted);font-size:12px}
.formula{font-size:13px;color:var(--text-muted);margin-top:10px;font-variant-numeric:tabular-nums}
.find{font-size:14px;margin:7px 0;display:flex;gap:8px}.find .m{font-weight:800;width:16px;flex:none}
.find.match .m{color:var(--good)}.find.mismatch .m{color:var(--bad)}.find.physics .m{color:var(--warn)}
.prompt{font-size:14px;max-height:220px;overflow:auto;color:var(--text-secondary);margin-top:6px}
table.cs{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
table.cs th{text-align:left;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line)}
table.cs td{padding:8px 10px;border-bottom:1px solid var(--line-soft)}table.cs tr[data-i]{cursor:pointer}table.cs tr[data-i]:hover{background:var(--surface-2)}
table.cs tr.on{background:var(--accent-wash)}table.cs td.n{color:var(--text-muted);width:32px}table.cs td.nm{font-weight:600;white-space:nowrap}
.cellbar{position:relative;display:flex;align-items:center;gap:8px;min-width:150px}.cellbar div{height:9px;border-radius:0 4px 4px 0;background:var(--accent);max-width:110px;flex:none}
.cellbar b{font-weight:700}
@media(max-width:900px){.casegrid{grid-template-columns:1fr}.agents{grid-template-columns:repeat(4,1fr)}}
.case-head h3{font-size:1.25rem;font-weight:800;color:var(--text-h);letter-spacing:-.01em}.case-head p{font-size:.88rem;color:var(--text-muted);margin:.1rem 0 1rem}
.case-head b{color:var(--primary-dark)}
table.cs td,table.cs th{white-space:nowrap}.panel code{font-size:.82em;background:var(--bg-alt);padding:0 .3em;border-radius:4px}
.viewer .hint b{font-weight:700}
.in-head{display:flex;align-items:baseline;gap:10px;margin:0 0 .6rem}.in-head b{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.in-head span{font-size:.85rem;color:var(--text-muted)}
.case-input{background:var(--bg-alt);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:1rem 1.2rem 1.1rem}
.in-prompt{margin:0;font-family:"DM Sans",Inter,sans-serif;font-size:1rem;line-height:1.7;color:var(--text-h);border-left:3px solid var(--primary);padding:.1rem 0 .1rem .9rem}
.in-i2s{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.2rem;align-items:start}
.in-refs{display:grid;gap:.8rem}.in-refs figure{margin:0}.in-refs img{width:100%;display:block;border-radius:8px;border:1px solid var(--line)}
.in-refs figcaption{font-size:.8rem;color:var(--text-muted);margin-top:.35rem}
.in-task h5{margin:0 0 .4rem;font-size:.8rem;font-weight:700;color:var(--text-h)}.in-task h5+.in-prompt{margin-bottom:1rem}
.in-task p{font-size:.9rem;color:var(--text-secondary);margin:0 0 .8rem}
.in-open{border:1px solid var(--primary);background:#fff;color:var(--primary-dark);border-radius:8px;padding:.45rem .9rem;font:600 .85rem Inter,sans-serif;cursor:pointer}
.in-open:hover{background:var(--primary);color:#fff}
@media(max-width:900px){.in-i2s{grid-template-columns:1fr}}
</style><script type="importmap">{"imports":{"three":"./assets/vendor/three-r160/build/three.module.js","three/addons/":"./assets/vendor/three-r160/addons/"}}</script><link href="assets/buildingbench.css?v=20261004i2s" rel="stylesheet"/></head><body class="case-page"><a class="skip-link" href="#casebar">Skip to benchmark explorer</a>
<header class="site-header"><div class="brand"><a aria-label="Code4Scene home" class="brand-home" href="index.html#top"><svg aria-hidden="true" fill="none" viewbox="0 0 30 32"><path d="M15 2 27 9v14l-12 7L3 23V9L15 2Z M3 9l12 7 12-7 M15 16v14 M9 5.5l12 7v14 M21 5.5l-12 7v14" stroke="currentColor" stroke-linejoin="round" stroke-width="1.6"></path></svg><span>Code4Scene</span></a><a class="brand-by" href="https://simworld.org/">by SimWorld</a></div><nav aria-label="Main navigation"><a href="index.html#top">Benchmark</a><a href="index.html#leaderboard">Leaderboard</a><a class="nav-active" href="index.html#cases">Visualization</a><a href="https://arxiv.org/abs/2609.36777" rel="noopener" target="_blank">Paper ↗</a><a href="https://github.com/SimWorld-AI/Code4Scene" rel="noopener" target="_blank">Github ↗</a></nav></header>
<section class="alt" style="padding-top:34px;padding-bottom:40px"><div class="container">
<div class="section-header" style="margin-bottom:1.6rem"><span class="section-label">Cases</span><h2 class="section-title">Every scene in 3D, with its scores</h2>
<p class="section-desc">Each agent's result is the engine-native scene it saved, exported from Unreal Engine so you can turn it in the browser. Beside it, how the
evaluator scored that scene. 10 cases, 58 scenes in 3D. Pick a case, then an agent.</p></div>
<div class="casebar" id="casebar"></div>
<div class="card" style="padding:1.4rem 1.5rem"><div class="case-head"><h3 id="ctitle"></h3><p><b id="ctrack"></b> · <span id="cnote"></span></p></div>
<div class="case-input" id="cinput"></div>
<div class="in-head" style="margin-top:1.4rem"><b>Output</b><span>each agent's saved scene, and how the evaluator scored it</span></div>
<div class="casegrid"><div><div class="viewer" id="viewer"></div><div class="vtabs" id="vtabs"></div><div class="agents" id="agents"></div></div><div id="side"></div></div></div>
<div class="card" style="margin-top:1.5rem;padding:1.4rem 1.5rem"><div class="sub-title">Every agent on this case</div>
<div class="sub-desc">The evaluator's scores for all 14 agents on the selected case. Click a row to open that agent's scene.</div><div class="board-wrap" id="ctable"></div></div>
</div></section>
<footer><p>Code4Scene  ·  UC San Diego &amp; UC Berkeley  ·  <a href="https://arxiv.org/abs/2609.36777" rel="noopener" target="_blank">arXiv:2609.36777</a>  ·  <a href="https://github.com/SimWorld-AI/Code4Scene" rel="noopener" target="_blank">GitHub</a>  · 
<a href="https://simworld.org/" rel="noopener" target="_blank">SimWorld Home</a></p>
<p style="margin-top:.5rem;font-size:.75rem;color:rgba(255,255,255,.25)">Part of the SimWorld project.</p></footer>
<script src="assets/paper.js?v=5427505a"></script><script src="data/site.js?v=20261004i2smore"></script><script type="module">import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { MeshoptDecoder } from "three/addons/libs/meshopt_decoder.module.js";
import { Sky } from "three/addons/objects/Sky.js";
const S = window.SITE, $ = id => document.getElementById(id), f3 = v => (v == null ? "–" : v.toFixed(3));
const name = k => S.agents[k].name, short = k => name(k).replace(/ \(.*\)/, ""), logo = k => `<span class="logo">${S.logos[S.agents[k].logo] || ""}</span>`;
let cur = null, agent = null, view = null, three = null;
// three.js: one renderer, moved between loads; each GLB's scene is cached. want3d is the url the viewer should show now.
const glbCache = {}, pending = {};
let want3d = null, framedFor = null;
function viewer3d(url, label) {
const el = $("viewer"); want3d = url; el.innerHTML = '<div class="load">Loading the 3D scene…</div>';
if (!three) {
const r = new THREE.WebGLRenderer({ antialias: true }); r.setPixelRatio(Math.min(2, devicePixelRatio)); r.outputColorSpace = THREE.SRGBColorSpace;
r.toneMapping = THREE.ACESFilmicToneMapping; r.toneMappingExposure = 1.0;
r.shadowMap.enabled = true; r.shadowMap.type = THREE.PCFSoftShadowMap;
const cam = new THREE.PerspectiveCamera(45, 16 / 9, .05, 200000), ctl = new OrbitControls(cam, r.domElement);
ctl.enableDamping = true; ctl.autoRotate = true; ctl.autoRotateSpeed = .6;
ctl.addEventListener("start", () => { ctl.autoRotate = false; });
// daylight for every scene: a physical sky, prefiltered once into an environment map (image-based light and background)
const SUN = new THREE.Vector3().setFromSphericalCoords(1, THREE.MathUtils.degToRad(90 - 38), THREE.MathUtils.degToRad(215));
const sky = new Sky(); sky.scale.setScalar(1000);
Object.assign(sky.material.uniforms, {}); sky.material.uniforms.turbidity.value = 4; sky.material.uniforms.rayleigh.value = 1.4;
sky.material.uniforms.mieCoefficient.value = .004; sky.material.uniforms.mieDirectionalG.value = .8; sky.material.uniforms.sunPosition.value.copy(SUN);
const skyScene = new THREE.Scene(); skyScene.add(sky);
const env = new THREE.PMREMGenerator(r).fromScene(skyScene, 0, .1, 2000).texture;
three = { r, cam, ctl, scene: null, env, SUN };
const loop = () => { requestAnimationFrame(loop); if (three.scene && r.domElement.isConnected) { ctl.update(); r.render(three.scene, cam); } }; loop();
new ResizeObserver(() => { const w = el.clientWidth, h = el.clientHeight; if (!w) return; r.setSize(w, h, false); cam.aspect = w / h; cam.updateProjectionMatrix(); }).observe(el);
}
const show = sc => {
if (want3d !== url || !(view || "").startsWith("3d")) return;
el.innerHTML = ""; el.appendChild(three.r.domElement); three.r.domElement.style.width = "100%"; three.r.domElement.style.height = "100%";
three.r.setSize(el.clientWidth, el.clientHeight, false); three.cam.aspect = el.clientWidth / el.clientHeight;
three.scene = sc.scene;
// Image-to-Scene: the repair, the ground truth and the corrupted input share one map, so the camera stays put between them
// and the three can be compared from the same place; it starts on the target actors.
const key = cur.track === "i2s" ? cur.id : url;
if (framedFor !== key && cur.track === "i2s" && cur.ref_cam) {
// open where the reference image was taken: its camera, its horizontal field of view
const rc = cur.ref_cam, asp = el.clientWidth / el.clientHeight;
three.cam.fov = 2 * Math.atan(Math.tan(rc.hfov * Math.PI / 360) / asp) * 180 / Math.PI;
three.cam.near = .05; three.cam.far = sc.box.getSize(new THREE.Vector3()).length() * 12 + 1000;
three.cam.position.set(...rc.pos); three.ctl.target.set(...rc.target); three.ctl.autoRotate = false; framedFor = key;
} else if (framedFor !== key) {
three.cam.fov = 45;
const f = sc.focus || sc.box, c = f.getCenter(new THREE.Vector3());
const s = sc.focus ? Math.max(9, f.getSize(new THREE.Vector3()).length() * 3.2) : sc.box.getSize(new THREE.Vector3()).length() * 1.2;
three.cam.near = s / 800; three.cam.far = Math.max(s, sc.box.getSize(new THREE.Vector3()).length()) * 12;
three.cam.position.copy(c).add(new THREE.Vector3(-.45, .62, .64).normalize().multiplyScalar(s));
three.ctl.target.copy(c); three.ctl.autoRotate = !sc.focus; framedFor = key;
}
three.cam.updateProjectionMatrix(); three.ctl.update();
const legend = sc.marks ? ' · <b style="color:#5ee08a">green</b> target · <b style="color:#ff6b5e">red</b> duplicate to delete' : "";
el.insertAdjacentHTML("beforeend", `<div class="hint">3D · ${label}${legend} · drag, scroll, right-drag</div>`);
};
if (glbCache[url]) return show(glbCache[url]);
if (pending[url]) return;
pending[url] = true;
const targets = cur.track === "i2s" ? (cur.targets || []) : [], dups = cur.track === "i2s" ? (cur.duplicates || []) : [];
const onLoad = g => {
const sc = new THREE.Scene(); sc.background = three.env; sc.environment = three.env; sc.environmentIntensity = .8;
sc.add(g.scene);
// UE's specular (KHR_materials_specular up to ~2) makes sky-lit surfaces read as white; keep it at most glTF's default
g.scene.traverse(o => { if (!o.isMesh) return; o.castShadow = o.receiveShadow = true;
for (const m of [].concat(o.material)) if (m && m.specularIntensity !== undefined) m.specularIntensity = Math.min(m.specularIntensity, .5); });
// the box of the scene's bulk, not of a stray far-away actor (sky spheres, fog volumes)
const box = new THREE.Box3(), pts = [];
g.scene.traverse(o => { if (o.isMesh) { const b = new THREE.Box3().setFromObject(o); if (!b.isEmpty()) pts.push(b); } });
const q = (arr, t) => arr.slice().sort((a, b) => a - b)[Math.floor(t * (arr.length - 1))];
if (pts.length > 8) {
const cx = pts.map(b => (b.min.x + b.max.x) / 2), cy = pts.map(b => (b.min.y + b.max.y) / 2), cz = pts.map(b => (b.min.z + b.max.z) / 2);
box.set(new THREE.Vector3(q(cx, .03), q(cy, .03), q(cz, .03)), new THREE.Vector3(q(cx, .97), q(cy, .97), q(cz, .97)));
} else box.setFromObject(g.scene);
// the actors the task is about, boxed: the target (green) and the duplicate the corruption added (red, should be gone)
let focus = null, marks = 0;
if (targets.length) {
g.scene.updateMatrixWorld(true);
g.scene.traverse(o => {
const dup = dups.includes(o.name);
if (!dup && !targets.includes(o.name)) return;
const b = new THREE.Box3().setFromObject(o); if (b.isEmpty()) return;
// drawn over everything, so a box behind a tree or a fence still shows where the actor is
const h = new THREE.Box3Helper(b.clone().expandByScalar(.08), dup ? 0xff6b5e : 0x5ee08a);
h.material.depthTest = false; h.material.transparent = true; h.renderOrder = 999; sc.add(h); marks++;
if (!dup) focus = focus ? focus.union(b) : b.clone();
else if (!focus) focus = b.clone();
});
}
const ctr = box.getCenter(new THREE.Vector3()), rad = Math.max(8, box.getSize(new THREE.Vector3()).length() / 2);
const sun = new THREE.DirectionalLight(0xfff1dc, 3.2); sun.position.copy(ctr).addScaledVector(three.SUN, rad * 2); sun.target.position.copy(ctr);
sun.castShadow = true; sun.shadow.mapSize.set(4096, 4096); sun.shadow.bias = -.0004; sun.shadow.normalBias = .02;
Object.assign(sun.shadow.camera, { left: -rad, right: rad, top: rad, bottom: -rad, near: rad * .5, far: rad * 4 }); sun.shadow.camera.updateProjectionMatrix();
sc.add(sun, sun.target);
glbCache[url] = { scene: sc, box, focus, marks }; delete pending[url]; show(glbCache[url]);
};
const fail = () => { delete pending[url]; if (want3d === url) el.innerHTML = '<div class="load">Could not load the 3D scene.</div>'; };
const progress = f => { const l = el.querySelector(".load"); if (l && want3d === url) l.textContent = `Loading the 3D scene… ${Math.round(f * 100)}%`; };
fetchPacked(url, progress).then(buf => new GLTFLoader().setMeshoptDecoder(MeshoptDecoder).parse(buf, "", onLoad, fail)).catch(fail);
}
// The served scenes are packed (pack_models.py): the GLB XORed against this keystream, so a saved file is not a usable model.
const KEY = Uint8Array.from("5c2f9e71d3a84b06e1f7c29a38d05b64a7193ce8f2046db95e81c73a2df6904b".match(/../g), h => parseInt(h, 16));
function unpack(a) { for (let i = 0; i < a.length; i++) a[i] ^= KEY[i & 31] ^ (((i >>> 5) * 131) & 255); return a.buffer; }
async function fetchPacked(url, progress) {
const r = await fetch(url); if (!r.ok) throw new Error(r.status);
const total = +r.headers.get("content-length") || 0, reader = r.body.getReader(), parts = []; let got = 0;
for (;;) { const { done, value } = await reader.read(); if (done) break; parts.push(value); got += value.length; if (total) progress(got / total); }
const a = new Uint8Array(got); let o = 0; for (const p of parts) { a.set(p, o); o += p.length; }
return unpack(a);
}
function showImage(src, hint) { $("viewer").innerHTML = src ? `<img src="${src}" alt=""><div class="hint">${hint}</div>` : '<div class="load">This run saved no render.</div>'; }
function drawViewer() {
const a = agent, tabs = [];
want3d = null;
if (a.glb) tabs.push(["3d", cur.track === "t2s" ? "3D scene" : "3D · repair"]);
if (cur.track === "i2s") { if (cur.gt_glb) tabs.push(["3dgt", "3D · ground truth"]); if (cur.input_glb) tabs.push(["3din", "3D · corrupted input"]); }
if (cur.track === "t2s") {
a.views.forEach((v, i) => tabs.push(["v" + i, `Judge view ${i + 1}`]));
if (!a.views.length && a.img) tabs.push(["img", "Judge view"]);
if (a.judge) tabs.push(["judge", "Judge's evidence"]);
} else {
tabs.push(["res", "Repair, target view"]); if (cur.gt) tabs.push(["gt", "Ground truth"]); if (cur.input) tabs.push(["in", "Corrupted input"]);
}
if (!tabs.find(t => t[0] === view)) view = tabs.length ? tabs[0][0] : null;
$("vtabs").innerHTML = tabs.map(([k, l]) => `<button data-v="${k}" class="${k === view ? "on" : ""}">${l}</button>`).join("");
$("vtabs").querySelectorAll("button").forEach(b => b.onclick = () => { view = b.dataset.v; drawViewer(); });
if (view === "3d") return viewer3d(a.glb, cur.track === "t2s" ? `${short(a.key)}'s saved scene` : `${short(a.key)}'s repair, from the reference camera`);
if (view === "3dgt") return viewer3d(cur.gt_glb, "ground truth");
if (view === "3din") return viewer3d(cur.input_glb, "corrupted input");
if (!view) return showImage(null);
if (/^v\d/.test(view)) return showImage(a.views[+view.slice(1)], "One of the four overview views the judge scores (Overview Alignment)");
if (view === "img") return showImage(a.img, "The judge's overview view");
if (view === "judge") return showImage(a.judge, "The judge's own evidence frame for one requirement");
if (view === "res") return showImage(a.img, "The agent's repaired scene, rendered from the target view");
if (view === "gt") return showImage(cur.gt, "The withheld ground truth, same view");
if (view === "in") return showImage(cur.input, "The corrupted scene the agent starts from");
if (view.startsWith("ref")) return showImage(cur.refs[+view.slice(3)], "A reference image given to the agent");
}
const bar = (label, v, w) => `<div class="sc-row"><span>${label}${w ? ` <span class="w">× ${w}</span>` : ""}</span><div class="tr"><div class="fi" style="width:${((v || 0) * 100).toFixed(1)}%"></div></div><span class="v">${f3(v)}</span></div>`;
function drawSide() {
const a = agent, rank = cur.agents.indexOf(a) + 1;
let h = `<div class="panel"><h4>${logo(a.key)} ${name(a.key)}</h4><p class="rk">Rank ${rank} of ${cur.agents.length} on this case</p>
<div class="sc-big">${f3(a.s)}</div><p class="rk" style="margin-top:-4px">case score</p>`;
if (cur.track === "t2s") h += bar("Detailed Alignment", a.detailed) + bar("Overview Alignment", a.overview) + bar("Physical Safety", a.phys)
+ `<div class="formula">0.2 × ${f3(a.detailed)} + 0.6 × ${f3(a.overview)} + 0.2 × ${f3(a.phys)} = ${f3(.2 * a.detailed + .6 * a.overview + .2 * a.phys)}</div>`;
else h += bar("Repair F1", a.f1) + bar("Physical Safety", a.phys)
+ `<div class="formula">Target actors: ${a.tp} recovered · ${a.fp} wrong or extra · ${a.fn} missed.<br>0.8 × ${f3(a.f1)} + 0.2 × ${f3(a.phys)} = ${f3(.8 * a.f1 + .2 * a.phys)}</div>`;
h += `</div>`;
if (a.findings) h += `<div class="panel"><h4>What the evaluator found</h4>${a.findings.map(([k, t]) => `<div class="find ${k}"><span class="m">${k === "match" ? "✓" : k === "mismatch" ? "✗" : "!"}</span><span>${t}</span></div>`).join("")}</div>`;
if (cur.track === "i2s" && cur.corruption && cur.corruption.length) {
const m = v => Math.hypot(v[0], v[1]) / 100;
const say = o => o.type === "duplication" ? `added a copy of <code>${o.label}</code>, ${m(o.delta_cm).toFixed(1)} m away (it should be deleted)`
: o.type === "translation" ? `moved <code>${o.label}</code> ${m(o.delta_cm).toFixed(1)} m`
: o.type === "rotation" ? `turned <code>${o.label}</code> ${Math.abs(o.yaw_deg)}°`
: o.type === "scaling" ? `rescaled <code>${o.label}</code> (${[].concat(o.factor).map(x => "×" + x).join(", ")})` : `${o.type} on <code>${o.label}</code>`;
h += `<div class="panel"><h4>What the corruption did</h4>${cur.corruption.map(o => `<div class="find mismatch"><span class="m">·</span><span>${say(o)}</span></div>`).join("")}
<p class="rk" style="margin-top:8px">The agent sees only the corrupted scene and the reference image. Repair F1 counts the target actors it restores to the ground truth; changes to anything else count against it.</p></div>`;
}
$("side").innerHTML = h;
}
function drawAgents() {
$("agents").innerHTML = cur.agents.map((a, i) => `<button class="ag ${a === agent ? "on" : ""}" data-i="${i}" title="${name(a.key)}"><div class="th" style="background-image:url('${a.img || ""}')">${a.glb ? "<i>3D</i>" : ""}</div>
<div class="cap"><b>${f3(a.s)}</b><br>${short(a.key)}</div></button>`).join("");
$("agents").querySelectorAll(".ag").forEach(el => el.onclick = () => select(cur.agents[+el.dataset.i]));
}
// every agent on this case, as the evaluator scored it
function drawTable() {
const t2s = cur.track === "t2s";
const cols = t2s ? [["s", "Case score"], ["detailed", "Detailed"], ["overview", "Overview"], ["phys", "Physical"]] : [["s", "Case score"], ["f1", "Repair F1"], ["phys", "Physical"]];
const head = `<tr><th>#</th><th>Agent</th>${cols.map(([, l]) => `<th>${l}</th>`).join("")}${t2s ? "" : "<th>Recovered · wrong · missed</th>"}<th>3D</th></tr>`;
const body = cur.agents.map((a, i) => `<tr class="${a === agent ? "on" : ""}" data-i="${i}"><td class="n">${i + 1}</td><td class="nm">${logo(a.key)} ${name(a.key)}</td>`
+ cols.map(([k], j) => j === 0 ? `<td><div class="cellbar"><div style="width:${(a[k] * 100).toFixed(1)}%"></div><b>${f3(a[k])}</b></div></td>` : `<td>${f3(a[k])}</td>`).join("")
+ (t2s ? "" : `<td>${a.tp} · ${a.fp} · ${a.fn}</td>`) + `<td>${a.glb ? "●" : ""}</td></tr>`).join("");
$("ctable").innerHTML = `<table class="cs">${head}${body}</table>`;
$("ctable").querySelectorAll("tr[data-i]").forEach(el => el.onclick = () => { select(cur.agents[+el.dataset.i]); $("viewer").scrollIntoView({ behavior: "smooth", block: "center" }); });
}
function select(a) { agent = a; if (!a.glb && view === "3d") view = null; drawAgents(); drawViewer(); drawSide(); drawTable(); }
function pick(id) {
cur = S.cases.find(c => c.id === id); view = null;
$("ctitle").textContent = cur.title; $("ctrack").textContent = cur.track === "t2s" ? "Text-to-Scene · construction" : "Image-to-Scene · editing";
$("cnote").textContent = cur.note;
document.querySelectorAll("#casebar button").forEach(b => b.classList.toggle("on", b.dataset.id === id));
history.replaceState(null, "", `#${id}`);
drawInput();
select(cur.agents.find(a => a.glb) || cur.agents[0]);
}
// what every agent was given, shown as given: the prompt, or the reference image(s) and the instruction
function drawInput() {
if (cur.track === "t2s") {
$("cinput").innerHTML = `<div class="in-head"><b>Input</b><span>the same prompt for all 14 agents, with an empty level and the content pack's asset catalog</span></div>
<blockquote class="in-prompt">${cur.prompt}</blockquote>`;
return;
}
const refs = cur.refs.map((r, i) => `<figure><img src="${r}" alt="Reference image ${i + 1}"><figcaption>Reference image${cur.refs.length > 1 ? " " + (i + 1) : ""}, as given to the agent</figcaption></figure>`).join("");
$("cinput").innerHTML = `<div class="in-head"><b>Input</b><span>the same for all 14 agents</span></div>
<div class="in-i2s"><div class="in-refs">${refs}</div>
<div class="in-task"><h5>Instruction</h5><blockquote class="in-prompt">${cur.prompt}</blockquote>
<h5>Starting scene</h5><p>A copy of the human-assembled scene with a few actors corrupted. The agent sees it only through the engine.</p>
${cur.input_glb ? '<button class="in-open" id="open-input">Open the corrupted scene in 3D →</button>' : ""}</div></div>`;
const b = $("open-input");
if (b) b.onclick = () => { view = "3din"; drawViewer(); $("viewer").scrollIntoView({ behavior: "smooth", block: "center" }); };
}
// one row per setting: its name, then its cases; each case says how many of its scenes open in 3D
const btn = c => { const n = c.agents.filter(a => a.glb).length + (c.gt_glb ? 1 : 0) + (c.input_glb ? 1 : 0);
return `<button data-id="${c.id}"><span>${c.title}</span><small>${n} scenes</small></button>`; };
const row = (track, name, kind) => `<div class="cb-row"><div class="grp"><b>${name}</b><span>${kind}</span></div><div class="cb-btns">`
+ S.cases.filter(c => c.track === track).map(btn).join("") + `</div></div>`;
// a setting gets a row only when the site carries cases for it (Text-to-Scene only since 2026-10-01)
$("casebar").innerHTML = [["t2s", "Text-to-Scene", "construction"], ["i2s", "Image-to-Scene", "editing"]]
.filter(([t]) => S.cases.some(c => c.track === t)).map(([t, n, k]) => row(t, n, k)).join("");
$("casebar").querySelectorAll("button").forEach(b => b.onclick = () => pick(b.dataset.id));
const h = location.hash.slice(1);
pick(S.cases.find(c => c.id === h) ? h : S.cases[0].id);
addEventListener("hashchange", () => { const id = location.hash.slice(1); if (S.cases.find(c => c.id === id) && (!cur || cur.id !== id)) pick(id); });
</script>
</body></html>