Enlarge editing task reference image to full panel width

assets/buildingbench.css

@@ -32,7 +32,7 @@ section,section.alt,section.dark{padding:34px 0;background:transparent;color:var
 .pareto-card .figure-title{color:#1a1a1a!important}.pareto-card .figure-title span{color:#8d8d8d}
 .pareto-swipe{display:none}@media(max-width:650px){.pareto-swipe{display:block;font:10px Inter,sans-serif;color:#7d857f;margin:6px 0}}
 /* Unified task format and reference-style chart interaction. */
-[hidden]{display:none!important}.task-tabs{display:flex;gap:4px;padding:4px;background:#f0f3ef;border:1px solid #d7dbd5;border-radius:9px;width:max-content;max-width:100%;margin:0 0 22px}.task-tabs button{border:0;background:none;border-radius:6px;padding:10px 18px;font:600 12px Inter,sans-serif;color:#778178;cursor:pointer}.task-tabs [aria-selected=true]{background:white;color:#17201d;box-shadow:0 1px 4px #17201d15}.task-content>h3{font-size:22px;letter-spacing:-.6px;line-height:1.35;margin:0 0 5px}.task-content>h3 span{font-weight:500}.task-content .task-columns{align-items:stretch}.task-formula{font:11px/1.7 'IBM Plex Mono',monospace;color:#58665c;margin:12px 0 0}.input-panel .live-scene{height:255px;border-radius:12px}.task-reference{display:flex;align-items:center;gap:10px;margin-top:12px;font:11px/1.5 Inter,sans-serif;color:#35687e}.task-reference img{width:70px;height:48px;border-radius:5px;object-fit:cover}.task-content .scene-versions{padding:8px 3px;border:0;background:transparent}.scene-loading{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;font-size:12px;text-align:center;padding:16px;z-index:3;background:#e6edf0e8}.scene-retry{pointer-events:auto;cursor:pointer;border:1px solid #81998e;background:#fffefb;border-radius:7px;color:#294c41;padding:8px 14px;font:600 12px Inter,sans-serif}.live-scene[data-state-phase=error] .scene-loading{color:#684839}.chart-tooltip{position:fixed;z-index:1100;max-width:calc(100vw - 16px);padding:14px 17px;background:#fffefb;border:1px solid #d7dbd5;border-radius:11px;color:#4a544f;box-shadow:0 5px 24px #17201d24;opacity:0;pointer-events:none;font:12px/1.65 Inter,sans-serif}.chart-tooltip.on{opacity:1}.chart-tooltip strong{display:block;color:#17201d;font-size:13px}.tooltip-provider{display:block;font-size:10px;color:#7d857f;margin:1px 0 8px}.chart-tooltip dl{display:grid;grid-template-columns:auto auto;gap:4px 16px;margin:0}.chart-tooltip dd{font:11px/1.8 'IBM Plex Mono',monospace;text-align:right;margin:0;color:#17201d}.chart-node{cursor:pointer;transition:opacity .12s}.chart-node.dim{opacity:.23}.chart-node.hot .bar{filter:brightness(1.08)}.chart-node:focus{outline:none}.chart-node:focus .bar{stroke:#17201d;stroke-width:2}.bar-card,.pareto-card,.ranking-card{padding:24px!important;border-radius:20px}.bar-heading{padding:0!important}.bar-scroll{margin-top:14px}.bar-card .note{margin:0!important}.kit-bars{min-width:1000px}.pareto-svg{min-width:1100px}.figure-caption{margin-left:0!important;margin-right:0!important}.lb-tabs{position:static!important}.ranking-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 20px}.ranking-toolbar label{display:grid;gap:7px;font:500 11px Inter,sans-serif;color:#65756c}.ranking-toolbar input{width:260px;max-width:100%;border:1px solid #d7dbd5;border-radius:7px;padding:9px 11px;font:12px Inter,sans-serif;background:#fffefb;color:#17201d}.ranking-toolbar>span{font-size:11px;color:#7d857f;padding-bottom:9px}.ranking-card .board-wrap{margin-top:16px;border:1px solid #d7dbd5;border-radius:12px}.ranking-card .board{margin:0}.ranking-card .board tbody tr:last-child td{border-bottom:0}.ranking-card .board-note{margin:12px 0 0}.bar-card .note,.figure-caption{font-size:11px;line-height:1.7}
+[hidden]{display:none!important}.task-tabs{display:flex;gap:4px;padding:4px;background:#f0f3ef;border:1px solid #d7dbd5;border-radius:9px;width:max-content;max-width:100%;margin:0 0 22px}.task-tabs button{border:0;background:none;border-radius:6px;padding:10px 18px;font:600 12px Inter,sans-serif;color:#778178;cursor:pointer}.task-tabs [aria-selected=true]{background:white;color:#17201d;box-shadow:0 1px 4px #17201d15}.task-content>h3{font-size:22px;letter-spacing:-.6px;line-height:1.35;margin:0 0 5px}.task-content>h3 span{font-weight:500}.task-content .task-columns{align-items:stretch}.task-formula{font:11px/1.7 'IBM Plex Mono',monospace;color:#58665c;margin:12px 0 0}.input-panel .live-scene{height:255px;border-radius:12px}.task-reference{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:14px;font:11px/1.5 Inter,sans-serif;color:#35687e}.task-reference img{display:block;width:100%;height:auto;border-radius:10px;object-fit:contain;background:#edf2ef}.task-reference span{display:block}.task-content .scene-versions{padding:8px 3px;border:0;background:transparent}.scene-loading{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;font-size:12px;text-align:center;padding:16px;z-index:3;background:#e6edf0e8}.scene-retry{pointer-events:auto;cursor:pointer;border:1px solid #81998e;background:#fffefb;border-radius:7px;color:#294c41;padding:8px 14px;font:600 12px Inter,sans-serif}.live-scene[data-state-phase=error] .scene-loading{color:#684839}.chart-tooltip{position:fixed;z-index:1100;max-width:calc(100vw - 16px);padding:14px 17px;background:#fffefb;border:1px solid #d7dbd5;border-radius:11px;color:#4a544f;box-shadow:0 5px 24px #17201d24;opacity:0;pointer-events:none;font:12px/1.65 Inter,sans-serif}.chart-tooltip.on{opacity:1}.chart-tooltip strong{display:block;color:#17201d;font-size:13px}.tooltip-provider{display:block;font-size:10px;color:#7d857f;margin:1px 0 8px}.chart-tooltip dl{display:grid;grid-template-columns:auto auto;gap:4px 16px;margin:0}.chart-tooltip dd{font:11px/1.8 'IBM Plex Mono',monospace;text-align:right;margin:0;color:#17201d}.chart-node{cursor:pointer;transition:opacity .12s}.chart-node.dim{opacity:.23}.chart-node.hot .bar{filter:brightness(1.08)}.chart-node:focus{outline:none}.chart-node:focus .bar{stroke:#17201d;stroke-width:2}.bar-card,.pareto-card,.ranking-card{padding:24px!important;border-radius:20px}.bar-heading{padding:0!important}.bar-scroll{margin-top:14px}.bar-card .note{margin:0!important}.kit-bars{min-width:1000px}.pareto-svg{min-width:1100px}.figure-caption{margin-left:0!important;margin-right:0!important}.lb-tabs{position:static!important}.ranking-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 20px}.ranking-toolbar label{display:grid;gap:7px;font:500 11px Inter,sans-serif;color:#65756c}.ranking-toolbar input{width:260px;max-width:100%;border:1px solid #d7dbd5;border-radius:7px;padding:9px 11px;font:12px Inter,sans-serif;background:#fffefb;color:#17201d}.ranking-toolbar>span{font-size:11px;color:#7d857f;padding-bottom:9px}.ranking-card .board-wrap{margin-top:16px;border:1px solid #d7dbd5;border-radius:12px}.ranking-card .board{margin:0}.ranking-card .board tbody tr:last-child td{border-bottom:0}.ranking-card .board-note{margin:12px 0 0}.bar-card .note,.figure-caption{font-size:11px;line-height:1.7}
 @media(max-width:650px){.task-tabs{width:100%;margin-bottom:18px}.task-tabs button{padding:9px 8px;flex:1;font-size:11px}.task-content>h3{font-size:19px}.task-content>h3 span{font-size:14px}.bar-card,.pareto-card,.ranking-card{padding:18px 14px!important;border-radius:18px}.bar-scroll,.pareto-scroll{margin-left:-14px;margin-right:-14px;padding:0 14px}.ranking-toolbar{gap:12px;align-items:flex-start}.ranking-toolbar label{flex:1;min-width:0}.ranking-toolbar input{width:100%;box-sizing:border-box}.ranking-toolbar>span{font-size:10px;max-width:90px;padding-top:24px}.chart-tooltip{padding:12px;font-size:11px}.chart-tooltip dl{gap:4px 10px}.chart-tooltip dd{font-size:10px}.chart-tooltip strong{font-size:12px}}
 
 .chart-node{user-select:none;-webkit-user-select:none}.chart-tooltip dt{margin:0}

index.html

@@ -19,7 +19,7 @@ svg.ch .dim{opacity:.42}svg.ch g.row:hover{opacity:1}svg.ch .hot{fill:var(--c4s-
 .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><link href="assets/buildingbench.css?v=20261001d" rel="stylesheet"/><script type="importmap">{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"}}</script></head><body><a class="skip-link" href="#leaderboard">Skip to benchmark explorer</a>
+</style><link href="assets/buildingbench.css?v=20261001e" rel="stylesheet"/><script type="importmap">{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"}}</script></head><body><a class="skip-link" href="#leaderboard">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 class="nav-active" href="index.html#top">Benchmark</a><a href="index.html#leaderboard">Leaderboard</a><a 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><main class="page-main"><section class="intro" id="top"><div class="intro-copy"><h1>Constructing and Editing<br/><em>3D Scenes with Code</em></h1><p class="intro-text">Benchmarking coding agents that turn text and reference images into engine-native 3D scenes. Measuring spatial reasoning, task fulfillment and precise control of scene state.</p><div class="intro-links"><a href="https://arxiv.org/abs/2609.36777">Read the paper ↗</a><a href="https://github.com/SimWorld-AI/Code4Scene">Code &amp; Data ↗</a><a href="#hero-video">Watch the teaser ↘</a></div></div><div class="featured featured-video" id="hero-video"><video aria-label="Code4Scene overview video" controls="" playsinline="" poster="media/teaser-poster.jpg" preload="metadata"><source src="media/teaser.mp4" type="video/mp4"/>Your browser does not support embedded video. <a href="media/teaser.mp4">Watch the Code4Scene video</a>.</video><div class="featured-video-caption"><strong>Code4Scene in 90 seconds</strong><span>Construction, editing and evaluation</span></div></div></section><section class="task-section" id="task-format"><div class="container"><h2 class="section-title">Task Format</h2><div class="task-shell"><div aria-label="Task format" class="task-tabs" role="tablist"><button aria-controls="task-t2s" aria-selected="true" data-task="t2s" id="task-tab-t2s" role="tab">T2S · Construction</button><button aria-controls="task-i2s" aria-selected="false" data-task="i2s" id="task-tab-i2s" role="tab" tabindex="-1">I2S · Editing</button></div><div aria-labelledby="task-tab-t2s" class="task-content" data-task="t2s" id="task-t2s" role="tabpanel"><h3>Nordic Harbour <span>· Text-to-Scene</span></h3><p class="task-subtitle">An open-ended scene description, an asset catalog and the Unreal Engine editor.</p><div class="task-columns"><article class="task-panel"><div class="panel-heading"><strong>Agent input</strong><span>Text + assets</span></div><div class="prompt-preview"><span class="eyebrow">Task instruction</span><p>Build me a compact, sunlit Copenhagen-style canal district with narrow cobblestone streets and rectangular waterways enclosing dense urban blocks.</p><p class="prompt-detail">Townhouses, canals, bridges and a waterfront promenade — with detailed requirements for materials, layout and street furniture.</p></div><p class="task-foot"><strong>Given:</strong> an empty level and the content pack’s asset catalog.</p></article><article class="task-panel output-panel"><div class="panel-heading"><strong>Agent output</strong><span>GPT-6 Astra</span></div><div class="live-scene" data-agent="astra" data-case="nordic-harbour"><canvas aria-label="Interactive 3D scene: Nordic Harbour. Drag to orbit, scroll or use plus and minus to zoom." tabindex="0"></canvas><span class="scene-loading" role="status">Loading 3D scene…</span><span class="scene-hint">Drag to orbit · Scroll to zoom</span><button aria-label="Pause scene rotation" class="scene-motion">Ⅱ</button></div><a class="task-foot text-button" href="cases.html#nordic-harbour">Compare agents and evaluator views ↗</a></article><article class="task-panel evaluation-panel"><div class="panel-heading"><strong>Evaluation</strong><span>Engine-native scene</span></div><div class="score-block"><span>CASE SCORE</span><strong>0.877</strong><dl><div><dt>Detailed Alignment</dt><dd>0.757</dd></div><div><dt>Overview Alignment</dt><dd>0.909</dd></div><div><dt>Physical Safety</dt><dd>0.900</dd></div></dl></div><p class="task-foot">Task fulfillment, artifact integrity and static physical validity.</p><p class="task-formula">0.2 × Detailed + 0.6 × Overview + 0.2 × Physical</p></article></div><details class="task-full"><summary><span>+ Full task instruction</span><span>TEXT-TO-SCENE</span></summary><p>Build me a compact, sunlit Copenhagen-style canal district with narrow cobblestone streets and rectangular waterways enclosing dense urban blocks. Arrange roughly thirty attached four- to six-storey townhouses in continuous street and canal-front rows, using slender façades, repetitive white-framed windows, arched doors and carriage entrances, modest cornices, and steep tiled roofs packed with dormers and brick chimneys. Include occasional exposed party walls between staggered building rows. Finish the façades in weathered muted red, mustard yellow, dusty blue, warm grey, beige, and exposed brick, with red, orange, and charcoal roof tiles. Run a principal waterfront street along a stone quay, crossed by smaller streets and linked across the canals by short, gently arched stone-and-metal bridges, including one opening onto a broad paved promenade with rounded landings. Form the canal edges from stepped pale stone, dark timber retaining walls, and iron railings around reflective rippling water. Add regularly spaced leafy trees, ornate black lamps, stone bollards, benches, European road signs, zebra crossings, puddles, grime, and sparse weeds.</p></details></div><div aria-labelledby="task-tab-i2s" class="task-content" data-task="i2s" hidden="" id="task-i2s" role="tabpanel"><h3>Old Industrial Pallet Bay <span>· Image-to-Scene</span></h3><p class="task-subtitle">Repair the corrupted scene using its reference image; preserve all unrelated actors.</p><div class="task-columns"><article class="task-panel input-panel"><div class="panel-heading"><strong>Agent input</strong><span>Scene + reference image</span></div><div class="live-scene" data-agent="astra" data-case="comp-31-old-industrial-pallet-bay-repair-v2" data-state="input"><canvas aria-label="Interactive 3D: Old Industrial Pallet Bay, input. Drag to orbit; scroll to zoom." tabindex="0"></canvas><span class="scene-loading" role="status">Loading 3D scene…</span><span class="scene-hint">Drag to orbit · Scroll to zoom</span><button aria-label="Resume scene rotation" class="scene-motion">▶</button></div><a class="task-reference" href="media/i2s/comp-31-old-industrial-pallet-bay-repair-v2/ref-1.jpg?v=1790549706" rel="noopener" target="_blank"><img alt="Provided reference image for Old Industrial Pallet Bay" loading="lazy" src="media/i2s/comp-31-old-industrial-pallet-bay-repair-v2/ref-1.jpg?v=1790549706"/><span>Provided reference image ↗</span></a><p class="task-foot">A translated and rotated pallet stack, plus an unintended duplicate.</p></article><article class="task-panel output-panel"><div class="panel-heading"><strong>Agent output</strong><span>GPT-6 Astra</span></div><div class="live-scene" data-agent="astra" data-case="comp-31-old-industrial-pallet-bay-repair-v2" data-state="repair"><canvas aria-label="Interactive 3D: Old Industrial Pallet Bay, repair. Drag to orbit; scroll to zoom." tabindex="0"></canvas><span class="scene-loading" role="status">Loading 3D scene…</span><span class="scene-hint">Drag to orbit · Scroll to zoom</span><button aria-label="Resume scene rotation" class="scene-motion">▶</button></div><div aria-label="Output scene state" class="scene-versions"><button class="on" data-state="repair">Repair</button><button data-state="input">Corrupted input</button><button data-state="gt">Ground truth</button></div><p class="task-foot">Inspect the saved repair from the same reference camera.</p><a class="text-button task-foot" href="cases.html#comp-31-old-industrial-pallet-bay-repair-v2">Compare agents and evaluator views ↗</a></article><article class="task-panel evaluation-panel"><div class="panel-heading"><strong>Evaluation</strong><span>Actor-level repair</span></div><div class="score-block"><span>CASE SCORE</span><strong>1.000</strong><dl><div><dt>Repair F1</dt><dd>1.000</dd></div><div><dt>Physical Safety</dt><dd>1.000</dd></div><div><dt>TP / FP / FN</dt><dd>2 / 0 / 0</dd></div></dl></div><p class="task-foot">Restore each target within 5 cm, 5° and 5%, without unintended edits.</p><p class="task-formula">0.8 × Repair F1 + 0.2 × Physical</p></article></div><details class="task-full"><summary><span>+ Full task instruction</span><span>IMAGE-TO-SCENE</span></summary><p>Repair the current outdoor scene so it matches the provided reference image. Make only the minimum changes needed, and preserve all unrelated actors and properties.</p></details></div></div><div class="availability"><span><b>320</b> full benchmark target · 160 construction + 160 editing, including private cases</span><span><b>201</b> public cases · 129 construction + 72 editing (22 indoor, 50 outdoor)</span></div></div></section><section id="leaderboard"><div class="container">
 <div class="section-header centered"><span class="section-label">Leaderboard</span><h2 class="section-title">Leaderboard</h2>
 <p class="section-desc">14 coding-agent configurations · paper results on the original 95 public cases (20 construction + 75 editing). These results predate the 201-case public release.</p></div>