Deploy Karate Wiener (kimodo kata maker)

app.py

@@ -1531,7 +1531,18 @@ def _render_preview_html(
       }}
       dojoSplatBaseBounds = null;
     }}
-    function fitDojoSplat(attempt = 0) {{
+    // Animate the splat scaling up from ~0 to its fit scale on first load, so it grows
+    // in instead of popping. Ticked each frame by _dojoSplatGrowTick.
+    let _dojoSplatGrow = null;
+    function _dojoSplatGrowTick(dt) {{
+      if (!_dojoSplatGrow || !dojoSplatRoot) return;
+      _dojoSplatGrow.t += dt;
+      const k = Math.min(1, _dojoSplatGrow.t / _dojoSplatGrow.dur);
+      const e = 1 - Math.pow(1 - k, 3);   // easeOutCubic
+      dojoSplatRoot.scale.setScalar(Math.max(0.0001, _dojoSplatGrow.to * e));
+      if (k >= 1) _dojoSplatGrow = null;
+    }}
+    function fitDojoSplat(attempt = 0, grow = false) {{
       if (!dojoSplatRoot) return;
       const robust = dojoSplatBaseBounds && dojoSplatBaseBounds.robust ? dojoSplatBaseBounds.robust : null;
       const rawMax = robust && robust.footprint > 0 ? robust.footprint : (dojoSplatBaseBounds && dojoSplatBaseBounds.maxDim > 0 ? dojoSplatBaseBounds.maxDim : 1.0);
@@ -1541,7 +1552,8 @@ def _render_preview_html(
       const localCenterX = robust ? (robust.minX + robust.maxX) * 0.5 : 0;
       const localCenterZ = robust ? (robust.minZ + robust.maxZ) * 0.5 : 0;
       const floorY = (dojoFloorSurfaceY - dojoFloorThickness) - localFloorY * scale;
-      dojoSplatRoot.scale.setScalar(scale);
+      if (grow) {{ _dojoSplatGrow = {{ t: 0, dur: 0.7, to: scale }}; dojoSplatRoot.scale.setScalar(0.0001); }}
+      else {{ _dojoSplatGrow = null; dojoSplatRoot.scale.setScalar(scale); }}
       dojoSplatRoot.position.set(-localCenterX * scale, floorY, -localCenterZ * scale);
       dojoSplatRoot.updateMatrixWorld(true);
       resizeFloorGrid(rawMax * scale);
@@ -1572,7 +1584,7 @@ def _render_preview_html(
         dojoSplatRoot.scale.setScalar(1.0);
         dojoSplatRoot.position.set(0.95, 0.05, -0.85);
         scene.add(dojoSplatRoot);
-        fitDojoSplat();
+        fitDojoSplat(0, true);   // grow in from ~0 so the splat doesn't pop
       }} catch (err) {{
         console.error('dojo splat load failed', err);
         postDojoStatus('Splat load failed: ' + (err && err.message ? err.message : err));
@@ -2587,6 +2599,7 @@ def _render_preview_html(
       }}
       _camAnimTick(dt);   // glide the camera into a new framing
       _placeAnimTick();   // grow/shrink place skeletons
+      _dojoSplatGrowTick(dt);   // grow the dojo splat in on first load
       controls.update();
       renderer.render(scene, camera);
       requestAnimationFrame(tick);
@@ -3429,75 +3442,27 @@ def generate_dojo_scene(payload_json: str | dict | None) -> str:
         if not iso_path:
             raise RuntimeError("Klein returned an unsupported image payload.")
         isometric_image = _result_data_url(iso_result, "image/png")
+        panorama_image = None   # panorama flux disabled for now — iso → splat only
         yield emit({
             "ok": True,
             "done": False,
             "source": "klein-triposplat",
             "stage": "flux-iso-done",
-            "status": "Isometric Flux image ready. Starting 360 Flux image...",
+            "status": "Isometric image ready. Converting to 3D...",
             "source_image": isometric_image,
             "isometric_image": isometric_image,
             "isometric_prompt": iso_prompt,
-            "panorama_prompt": pano_prompt,
             **base,
         })
-
-        yield emit({
-            "ok": True,
-            "done": False,
-            "source": "klein-triposplat",
-            "stage": "flux-pano-start",
-            "status": "Generating 360 Flux image...",
-            "source_image": isometric_image,
-            "isometric_image": isometric_image,
-            "isometric_prompt": iso_prompt,
-            "panorama_prompt": pano_prompt,
-            **base,
-        })
-        pano_job = klein_client.submit(pano_prompt, seed, api_name="/generate")
-        for update in _dojo_wait_for_job(pano_job, {
-            "ok": True,
-            "source": "klein-triposplat",
-            "stage": "flux-pano-progress",
-            "status": "Generating 360 Flux image...",
-            "source_image": isometric_image,
-            "isometric_image": isometric_image,
-            "isometric_prompt": iso_prompt,
-            "panorama_prompt": pano_prompt,
-            **base,
-        }):
-            yield emit(update)
-        pano_result = pano_job.result()
-        panorama_image = _result_data_url(pano_result, "image/png")
-        if not panorama_image:
-            raise RuntimeError("Klein returned an unsupported 360 image payload.")
-        yield emit({
-            "ok": True,
-            "done": False,
-            "source": "klein-triposplat",
-            "stage": "flux-pano-done",
-            "status": "360 Flux image ready. Starting TripoSplat...",
-            "source_image": isometric_image,
-            "isometric_image": isometric_image,
-            "panorama_image": panorama_image,
-            "image": panorama_image,
-            "isometric_prompt": iso_prompt,
-            "panorama_prompt": pano_prompt,
-            **base,
-        })
-
         yield emit({
             "ok": True,
             "done": False,
             "source": "klein-triposplat",
             "stage": "splat-start",
-            "status": "Generating TripoSplat...",
+            "status": "Converting to 3D (TripoSplat)...",
             "source_image": isometric_image,
             "isometric_image": isometric_image,
-            "panorama_image": panorama_image,
-            "image": panorama_image,
             "isometric_prompt": iso_prompt,
-            "panorama_prompt": pano_prompt,
             **base,
         })
         tripo_client = Client(TRIPOSPLAT_SPACE, token=token)

docs/comic_model_research.md

@@ -0,0 +1,88 @@
+# Open-weight image models ≤32B for the Weiner 4-koma pipeline
+
+Research date: 2026-06-12. Method: deep-research workflow (5 search angles, 22 sources,
+108 claims extracted, 18 adversarially verified 3-0). Claims marked *(unverified)* had
+their verification cut off by a rate limit — they come from official/primary sources
+but were not independently confirmed.
+
+## Use-case requirements
+
+Generate a 2×2-grid 4-panel comic in ONE image (claymation/3D-render style, recurring
+sausage-sensei mascot). Speech-bubble text composited programmatically afterward (in-model
+text = bonus only). Script comes from a separate LLM → prompt adherence for multi-panel
+scene layout is the critical capability. Character consistency within the grid (free, by
+construction) and across generations (LoRA and/or image-reference conditioning).
+Must run on HF ZeroGPU and be license-clean for a public hackathon Space.
+
+## Infrastructure correction (verified 3-0)
+
+ZeroGPU is no longer H200/70GB: it now runs **RTX Pro 6000 Blackwell** — `large`
+(default) = half GPU / **48GB VRAM** at 1× quota, `xlarge` = full GPU / 96GB at 2× quota.
+Max `@spaces.GPU(duration=...)` remains effectively ~120s per call.
+Source: https://huggingface.co/docs/hub/spaces-zerogpu
+
+## Quality bar
+
+- Nano Banana 2 (Gemini 3.1 Flash Image Preview): Elo 1258, #4 on Artificial Analysis arena (verified).
+- **HiDream-O1-Image-1.5: Elo 1264, #3 — ABOVE Nano Banana 2** (verified). Open-weight
+  availability NOT confirmed (HiDream-I1 was MIT). **Watch item: if weights are open, test it.**
+
+## Candidates
+
+### Qwen-Image-Edit-2509 / 2511 (~20B MMDiT + Qwen2.5-VL encoder)
+- License: **Apache 2.0** (verified).
+- **Multi-image reference editing** (person+person, person+product, person+scene) —
+  condition generation on mascot reference images; character lock WITHOUT training (verified).
+- 2509 explicitly improved identity/character preservation across pose/style changes (verified).
+- 2511 (unverified, official Qwen blog): further character-consistency gains; bakes popular
+  community LoRAs into the base model.
+- Known best-in-class in-model text rendering (bonus: maybe legible bubbles for free).
+- 20B bf16 is tight-but-fine on 48GB with standard offload/quantization; official ZeroGPU
+  Spaces exist; diffusers support mature.
+
+### FLUX.2-klein 4B (+ 9B)
+- 4B: **Apache 2.0** (verified). 9B: FLUX Non-Commercial License (verified) → avoid for public Space.
+- ~13GB bf16; distilled 4-step variant = seconds per image (verified).
+- **LoRA in ~1hr on a single RTX 4090 (<24GB) via ostris/ai-toolkit**, diffusers-loadable (verified).
+- Unified t2i + editing + multi-reference per BFL blog/card *(unverified — votes lost to rate limit)*.
+- We already have klein infra (tiny-army sidecar Space + klein starter repo with LoRA tooling).
+
+### Z-Image / Z-Image-Turbo (Tongyi, 6B)
+- **Apache 2.0** (verified). 6B family (verified).
+- Turbo: 8 DiT forward passes, sub-second on H800, fits 16GB consumer VRAM (verified).
+- Already integrated in tiny-army's local image path.
+- No verified reference/editing variant or comic-layout evidence; distilled few-step models
+  typically trade away complex-prompt adherence → risk for 4-panel layouts.
+
+### FLUX.2-dev (~32B + Mistral Small 3.1 24B encoder)
+- At/over the param cap; bf16 >80GB, ~62GB offloaded, ~20GB at 4-bit (verified).
+- Native multi-reference up to 10 images (verified) — best built-in character conditioning.
+- FLUX dev line is non-commercial-licensed → **ruled out** for a public hackathon Space.
+
+### SD 3.5 / HiDream-I1 / CogView4
+- Superseded on quality/adherence by the above within the same size envelope; no
+  verified advantage for this use case. Not shortlisted.
+
+## Ranking for this use case
+
+1. **Qwen-Image-Edit-2511 (or 2509) — the comic engine.** Apache 2.0, the only verified
+   ≤32B model with multi-image character-reference conditioning (mascot consistency with
+   zero training: feed a Weiner reference sheet each call), strongest prompt adherence
+   reputation for complex multi-panel scenes, and text rendering good enough that in-model
+   bubbles might work. Cost: heaviest of the shortlist; needs the 48GB slice + offload and
+   ~tens of seconds per comic (within 120s).
+2. **FLUX.2-klein 4B — the on-theme Build Small pick.** Apache 2.0, trivially fast
+   (4-step distilled), cheap LoRA pipeline already in-house → Weiner LoRA locks the mascot.
+   Lower ceiling on per-panel scene complexity than 20B Qwen; the fine-tune narrows the
+   style/character gap.
+3. **Z-Image-Turbo 6B — speed fallback.** Apache 2.0, near-instant, already integrated;
+   use if quota pressure dominates and layouts prove simple enough.
+
+## Recommended architecture
+
+- **A/B test first** (same 10 scripts through Qwen-Edit-2511-with-reference-sheet and
+  klein-4B-with/without-LoRA; blank-bubble prompting + programmatic text composite).
+- Production default: Qwen-Image-Edit-2511 + Weiner reference sheet (no training needed).
+- Featured small-model tier: klein 4B + Weiner LoRA (trained on a reference corpus we can
+  bootstrap with the bigger model) — the "fine-tuned the 4B open model on our mascot" story.
+- Watch item: HiDream-O1-Image-1.5 weights — if open, benchmark immediately.

tabs/dojo.drawer.html

@@ -28,29 +28,26 @@
       <button id="kimodo-dojo-generate" class="kimodo-dojo-primary" type="button">Generate Scene</button>
     </div>
 
-    <div id="kimodo-dojo-progress" class="kimodo-dojo-progress" aria-label="Dojo generation progress">
-      <div class="kimodo-dojo-step" data-step="flux-iso"><span></span>Flux isometric</div>
-      <div class="kimodo-dojo-step" data-step="flux-pano"><span></span>Flux 360</div>
-      <div class="kimodo-dojo-step" data-step="splat"><span></span>TripoSplat</div>
-      <div class="kimodo-dojo-step" data-step="viewer"><span></span>Viewer load</div>
-    </div>
-    <div id="kimodo-dojo-time" class="kimodo-dojo-time" aria-live="polite"></div>
-    <div id="kimodo-dojo-detail" class="kimodo-dojo-detail" aria-live="polite"></div>
-    <div id="kimodo-dojo-preview-wrap" class="kimodo-dojo-preview-wrap">
-      <figure><figcaption>Isometric</figcaption><img id="kimodo-dojo-preview" alt="Flux isometric result" /></figure>
-      <figure><figcaption>360</figcaption><img id="kimodo-dojo-preview-pano" alt="Flux 360 result" /></figure>
+    <!-- Generation stage: the flux isometric image fades in, then a "converting to 3D"
+         scan effect plays over it while TripoSplat runs. Status text sits below. -->
+    <div id="kimodo-dojo-stage" class="kimodo-dojo-stage" hidden>
+      <div id="kimodo-dojo-iso" class="kimodo-dojo-iso">
+        <img id="kimodo-dojo-iso-img" class="kimodo-dojo-iso-img" alt="Generated isometric scene" />
+        <div class="kimodo-dojo-iso-scan" aria-hidden="true"></div>
+        <div class="kimodo-dojo-iso-3d" aria-hidden="true">converting to 3D…</div>
+      </div>
     </div>
     <div id="kimodo-dojo-status" class="kimodo-drawer-sub kimodo-dojo-status">Ready.</div>
 
     <details class="kimodo-dojo-adv">
       <summary>Advanced settings</summary>
       <div class="kimodo-dojo-adv-body">
-        <div class="kimodo-cz-seg kimodo-dojo-mode" id="kimodo-dojo-mode" aria-label="Dojo scene type">
+        <div class="kimodo-cz-seg kimodo-dojo-mode kimodo-dojo-panoctl" id="kimodo-dojo-mode" aria-label="Dojo scene type">
           <button type="button" class="kimodo-cz-segbtn active" data-mode="splat">Splat</button>
           <button type="button" class="kimodo-cz-segbtn" data-mode="panorama">Panorama</button>
         </div>
         <div class="kimodo-dojo-settings" aria-label="Dojo room settings">
-          <label class="kimodo-dojo-check">
+          <label class="kimodo-dojo-check kimodo-dojo-panoctl">
             <input id="kimodo-dojo-skybox" type="checkbox" />
             <span>Use panorama as skybox in splat</span>
           </label>

tabs/dojo.tab.css

@@ -391,3 +391,83 @@
 .kimodo-dojo-adv[open] > summary::after { content: " ▴"; }
 .kimodo-dojo-adv-body { padding: 0 10px 8px; }
 .kimodo-dojo-adv-body .kimodo-dojo-mode { margin-top: 2px; }
+
+/* ===== Panorama disabled for now: hide its controls ===== */
+.kimodo-dojo-panoctl { display: none !important; }
+
+/* ===== Generation stage: flux iso image + 3D-conversion effect ===== */
+.kimodo-dojo-stage { margin-top: 10px; }
+.kimodo-dojo-iso {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #15151a;
+  border: 1px solid #34343c;
+}
+.kimodo-dojo-iso.generating::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(110deg, #1b1b20 30%, #2a2620 50%, #1b1b20 70%);
+  background-size: 220% 100%;
+  animation: kimodo-dojo-shimmer 1.3s linear infinite;
+}
+.kimodo-dojo-iso-img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transform: scale(1.06);
+  filter: blur(14px);
+  transition: opacity .9s ease, filter .9s ease, transform .9s ease;
+}
+.kimodo-dojo-iso.has-img .kimodo-dojo-iso-img {
+  opacity: 1;
+  transform: scale(1);
+  filter: blur(0);
+}
+.kimodo-dojo-iso-scan,
+.kimodo-dojo-iso-3d {
+  opacity: 0;
+  transition: opacity .3s ease;
+  pointer-events: none;
+}
+.kimodo-dojo-iso.converting .kimodo-dojo-iso-scan,
+.kimodo-dojo-iso.converting .kimodo-dojo-iso-3d { opacity: 1; }
+.kimodo-dojo-iso-scan {
+  position: absolute;
+  inset: 0;
+  background:
+    repeating-linear-gradient(0deg, rgba(255,210,138,0.05) 0 2px, transparent 2px 6px),
+    linear-gradient(180deg, transparent 0%, rgba(255,210,138,0.55) 50%, transparent 100%);
+  background-size: 100% 100%, 100% 22%;
+  background-repeat: no-repeat, no-repeat;
+  background-position: 0 0, 0 -22%;
+  mix-blend-mode: screen;
+}
+.kimodo-dojo-iso.converting .kimodo-dojo-iso-scan { animation: kimodo-dojo-scan 1.6s ease-in-out infinite; }
+.kimodo-dojo-iso-3d {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 6px;
+  text-align: center;
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: .06em;
+  color: #ffe0ad;
+  background: linear-gradient(0deg, rgba(0,0,0,0.62), transparent);
+}
+@keyframes kimodo-dojo-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
+@keyframes kimodo-dojo-scan {
+  0% { background-position: 0 0, 0 -22%; }
+  100% { background-position: 0 0, 0 122%; }
+}
+
+/* Improve/reroll button loading state (matches move-gen green loader). */
+.kimodo-dojo-improve.loading { background: #243a2c !important; color: #8fcaa6 !important; border-color: #2f5a3e !important; }

tabs/dojo.tab.js

@@ -40,11 +40,9 @@
       generate: document.getElementById('kimodo-dojo-generate'),
       clear: document.getElementById('kimodo-dojo-clear'),
       status: document.getElementById('kimodo-dojo-status'),
-      time: document.getElementById('kimodo-dojo-time'),
-      detail: document.getElementById('kimodo-dojo-detail'),
-      previewWrap: document.getElementById('kimodo-dojo-preview-wrap'),
-      preview: document.getElementById('kimodo-dojo-preview'),
-      previewPano: document.getElementById('kimodo-dojo-preview-pano')
+      stage: document.getElementById('kimodo-dojo-stage'),
+      iso: document.getElementById('kimodo-dojo-iso'),
+      isoImg: document.getElementById('kimodo-dojo-iso-img')
     };
   }
 
@@ -161,37 +159,46 @@
     if (frame && frame.contentWindow) frame.contentWindow.postMessage({ kind: 'dojo-room-settings', settings }, '*');
   }
 
-  function setStep(step, state) {
-    const el = document.querySelector('.kimodo-dojo-step[data-step="' + step + '"]');
-    if (!el) return;
-    el.classList.remove('active', 'done', 'fail');
-    if (state) el.classList.add(state);
+  // ---- Generation stage: iso image loads in, then a 3D-conversion scan ----
+  function stageReset() {
+    const els = dojoEls();
+    if (els.stage) els.stage.hidden = true;
+    if (els.iso) els.iso.classList.remove('generating', 'has-img', 'converting');
+    if (els.isoImg) els.isoImg.removeAttribute('src');
   }
-
-  function resetProgress() {
-    ['flux-iso', 'flux-pano', 'splat', 'viewer'].forEach((s) => setStep(s, ''));
+  function stageGenerating() {   // iso not ready yet → shimmer placeholder
     const els = dojoEls();
-    if (els.time) els.time.textContent = '';
-    if (els.detail) els.detail.textContent = '';
-    if (els.previewWrap) els.previewWrap.classList.remove('on');
-    if (els.preview) els.preview.removeAttribute('src');
-    if (els.previewPano) els.previewPano.removeAttribute('src');
+    if (els.stage) els.stage.hidden = false;
+    if (els.iso) { els.iso.classList.add('generating'); els.iso.classList.remove('has-img', 'converting'); }
   }
-
-  function showSourceImage(src, kind) {
+  function stageIsoReady(src) {   // iso image arrived → fade/deblur it in
     const els = dojoEls();
-    const img = kind === 'panorama' ? els.previewPano : els.preview;
-    if (!src || !img || !els.previewWrap) return;
-    img.src = src;
-    els.previewWrap.classList.add('on');
+    if (!src || !els.iso || !els.isoImg) return;
+    if (els.stage) els.stage.hidden = false;
+    els.iso.classList.remove('generating');
+    if (els.isoImg.getAttribute('src') !== src) {
+      els.isoImg.onload = () => els.iso.classList.add('has-img');
+      els.isoImg.src = src;
+    }
+    if (els.isoImg.complete && els.isoImg.naturalWidth) els.iso.classList.add('has-img');
+  }
+  function stageConverting(on) {   // 3D-conversion scan overlay
+    const els = dojoEls();
+    if (els.iso) els.iso.classList.toggle('converting', !!on);
   }
 
   function setBusy(next) {
     busy = !!next;
     const els = dojoEls();
-    if (els.generate) els.generate.disabled = busy;
-    if (els.clear) els.clear.disabled = busy;
-    if (els.improve) els.improve.disabled = busy;
+    if (els.generate) {
+      els.generate.disabled = busy;
+      els.generate.innerHTML = busy ? '<span class="spin">⟳</span> Generating…' : 'Generate Scene';
+    }
+    if (els.improve) {
+      els.improve.disabled = busy || improving;
+      if (busy) { els.improve.classList.add('loading'); els.improve.innerHTML = '<span class="spin">⟳</span> generating…'; }
+      else { els.improve.classList.remove('loading'); updateImproveBtn(); }
+    }
   }
 
   function waitForResult(previousValue, onStage) {
@@ -295,7 +302,7 @@
 
   function openCreate(seed) {
     showView('create');
-    resetProgress();
+    stageReset();
     const els = dojoEls();
     improvedByAya = false;
     if (seed) {
@@ -375,7 +382,7 @@
     const els = dojoEls();
     if (!els.improve || improving) return;
     const has = !!(els.prompt && els.prompt.value.trim());
-    els.improve.textContent = improvedByAya ? 'reroll 🎲'
+    els.improve.textContent = improvedByAya ? 'Reroll with tiny-aya 🎲'
       : (has ? '✦ Improve with tiny-aya' : 'let tiny-aya decide 🎲');
   }
 
@@ -424,40 +431,32 @@
     const trigger = document.querySelector('#dojo-btn button, #dojo-btn');
     if (!payloadInput || !trigger) { setStatus('Dojo backend controls are missing.'); return; }
     setBusy(true);
-    resetProgress();
-    setStep('flux-iso', 'active');
-    setStatus('Starting isometric Flux generation...');
+    stageReset();
+    stageGenerating();
+    setStatus('Generating the dojo image…');
     writeHidden('dojo-result', '');
     writeHidden('dojo-payload', JSON.stringify(cfg));
     try {
       trigger.click();
       const value = await waitForResult('', (stage) => {
-        setTiming(stage);
-        if (stage.source_image || stage.isometric_image) showSourceImage(stage.source_image || stage.isometric_image, 'isometric');
-        if (stage.panorama_image) showSourceImage(stage.panorama_image, 'panorama');
-        if (stage.stage === 'flux-iso-start' || stage.stage === 'flux-iso-progress') {
-          setStep('flux-iso', 'active');
-          setStatus(stage.status || 'Generating isometric Flux image...');
-        } else if (stage.stage === 'flux-iso-done') {
-          setStep('flux-iso', 'done'); setStep('flux-pano', 'active');
-          showSourceImage(stage.source_image || stage.isometric_image, 'isometric');
-          setStatus(stage.status || 'Isometric ready. Starting 360 Flux...');
-        } else if (stage.stage === 'flux-pano-start' || stage.stage === 'flux-pano-progress') {
-          setStep('flux-iso', 'done'); setStep('flux-pano', 'active');
-          setStatus(stage.status || 'Generating 360 Flux image...');
-        } else if (stage.stage === 'flux-pano-done') {
-          setStep('flux-pano', 'done'); setStep('splat', 'active');
-          showSourceImage(stage.panorama_image, 'panorama');
-          setStatus(stage.status || '360 ready. Starting TripoSplat...');
-        } else if (stage.stage === 'splat-start' || stage.stage === 'splat-progress') {
-          setStep('flux-iso', 'done'); setStep('flux-pano', 'done'); setStep('splat', 'active');
-          setStatus(bestProgressText(stage) || stage.status || 'Generating TripoSplat...');
-        } else if (stage.stage === 'splat-done') {
-          setStep('splat', 'done'); setStep('viewer', 'active');
-          setStatus(stage.status || 'TripoSplat ready. Loading viewer...');
-        } else if (stage.stage === 'fallback') {
-          setStep('flux-iso', 'fail'); setStep('flux-pano', 'fail'); setStep('splat', 'fail');
-          setStatus(stage.warning || stage.error || 'Fallback generated.');
+        const st = stage.stage || '';
+        const iso = stage.isometric_image || stage.source_image;
+        if (st === 'flux-iso-start' || st === 'flux-iso-progress') {
+          stageGenerating();
+          setStatus(stage.status || 'Generating the dojo image…');
+        } else if (st === 'flux-iso-done') {
+          stageIsoReady(iso);
+          setStatus(stage.status || 'Image ready — converting to 3D…');
+        } else if (st === 'splat-start' || st === 'splat-progress') {
+          if (iso) stageIsoReady(iso);
+          stageConverting(true);
+          setStatus(bestProgressText(stage) || stage.status || 'Converting to 3D…');
+        } else if (st === 'splat-done') {
+          stageConverting(false);
+          setStatus(stage.status || 'Loading the scene into the viewer…');
+        } else if (st === 'fallback') {
+          stageConverting(false);
+          setStatus(stage.warning || stage.error || 'Fallback scene generated.');
         }
       });
       const scene = JSON.parse(value);
@@ -533,11 +532,7 @@
   window.addEventListener('message', (event) => {
     const msg = event.data || {};
     if (msg.kind === 'dojo-status' && msg.text) {
-      if (/loaded in viewer/i.test(msg.text)) {
-        setStep('viewer', 'done');
-        setTiming({ stage: 'viewer-done', job_status: 'loaded' });
-      }
-      if (/failed/i.test(msg.text)) setStep('viewer', 'fail');
+      if (/loaded in viewer/i.test(msg.text)) stageConverting(false);
       setStatus(msg.text);
     }
   });