Upload app.py with huggingface_hub

app.py

@@ -1,45 +1,47 @@
-"""H3 Comic Orbit Studio — build a manga page whose every panel plays a 360° camera orbit.
+"""Comic Orbit Studio — a custom-HTML comic-authoring studio on ZeroGPU.
 
-Lay out a comic page, then render it: each panel becomes a frozen-instant 360° camera orbit (MiniMax-H3 on its
-`fl2va` first+last-keyframe path, the SAME panel pinned at both ends so it loops), driven by
-`pablodawson/MiniMax-H3-360-Orbit-LoRA` with a turbo LoRA folded on top for speed. The finished page renders as a real
-manga layout where every panel is a looping, playable clip — and exports as a single shareable video.
+Start with an empty manga page. Each panel has its own prompt box; drop character references in the cast rail so a
+character stays consistent. Write a panel -> **Sketch** it (Krea 2 + an anime LoRA, run in a separate image Space) ->
+**Approve & spin** -> it runs the ORB360 LoRA (MiniMax-H3 `fl2va`, the same panel pinned as both keyframes) so the
+camera orbits the frozen scene, and every panel becomes a looping, playable clip. Export the page as one video.
 
-Architecture (one heavy model in-process, the H3 DiT):
-  * the 62 GiB Qwen3-VL text encoder lives in a separate conditioner Space, called over the gradio API (`/encode`);
-  * optional panel generation (Describe / AI-refine a Sketch) calls an external image Space, also over the API;
-  * the orbit LoRA is folded as always-on *content*; a turbo LoRA (larry / lightx8 / joyfox) is switched on top.
+The whole UI is a custom HTML/CSS/JS single-page app rendered into a Gradio 6 custom `gr.HTML` component; the custom
+JS drives the backend through a hidden "command bus" component (`props.value` write -> `.change` -> `@spaces.GPU`),
+the pattern proven by the GNM direct-manip Space. Heavy work stays same-origin so ZeroGPU's token is handled for us:
+the orbit runs in-process (H3 DiT), the sketch is an external Krea-2 Space called over the gradio API.
 """
 
 from __future__ import annotations
 
+import base64
+import json
 import os
+import re
 import subprocess
 import tempfile
 import time
 import traceback
 from functools import cache
-from html import escape
 
 # Before anything that could initialize CUDA: `import spaces` patches `torch.cuda` so the 72 GiB load happens at
 # startup rather than on GPU time.
 import spaces
 import gradio as gr
 
-VERSION = "comic-orbit/2"
+VERSION = "comic-orbit/3"
 
 MODEL_REPO = os.environ.get("H3_MODEL_REPO", "MiniMaxAI/MiniMax-H3")
 CONDITIONER_SPACE = os.environ.get("H3_CONDITIONER", "multimodalart/qwen3vl-conditioner")
-# Optional external image Space for the Describe tab and the "refine sketch" button. Empty -> those paths are off and
-# the studio still runs on Upload + raw Sketch.
+# External Krea-2 + anime-LoRA image Space for the Sketch step. Must expose a gradio API whose endpoint takes
+# (prompt, image=optional_ref) and returns an image. Empty -> sketch falls back to the dropped ref or a placeholder.
 IMAGE_SPACE = os.environ.get("H3_IMAGE_SPACE", "").strip()
 IMAGE_API = os.environ.get("H3_IMAGE_API", "/predict").strip()
+ANIME_STYLE = os.environ.get("H3_STYLE", "anime comic panel, flat cel anime style, cinematic lighting, detailed")
 
 PLACEMENT = os.environ.get("H3_PLACEMENT", "pack").lower()
 ATTENTION = os.environ.get("H3_ATTENTION", "_native_cudnn").lower()
 GPU_SIZE = os.environ.get("H3_GPU_SIZE", "xlarge")
 
-# ── canvases (labels must match the conditioner's table; the label goes over the wire) ───────────────────────────
 CANVASES = {
     "960x544 · 16:9 fast": (544, 960),
     "1344x768 · 16:9 full": (768, 1344),
@@ -52,20 +54,11 @@ CANVASES = {
     "576x768 · 3:4 fast": (768, 576),
     "768x1024 · 3:4 full": (1024, 768),
 }
-# The orbit LoRA was trained square at 768; keep spins on the 768-class "full" canvases so the short edge matches.
-ORBIT_CANVASES = (
-    "768x768 · 1:1 full",
-    "1344x768 · 16:9 full",
-    "768x1344 · 9:16 full",
-    "1024x768 · 4:3 full",
-    "768x1024 · 3:4 full",
-)
+ORBIT_CANVASES = ("768x768 · 1:1 full", "1344x768 · 16:9 full", "768x1344 · 9:16 full", "1024x768 · 4:3 full", "768x1024 · 3:4 full")
 
 FPS, FRAMES_PER_CHUNK, LATENTS_PER_CHUNK = 24, 17, 5
-# 73 = 17*4 + 5, ~3.04 s at 24 fps: the orbit LoRA's trained clip length (one full turn).
 ORBIT_FRAMES = int(os.environ.get("H3_ORBIT_FRAMES", "73"))
 
-# ── the orbit prompt (verbatim from the LoRA card; use as-is) ────────────────────────────────────────────────────
 ORBIT_PROMPT = (
     "One frozen instant. Only the camera moves. In a continuous 360 orbit. Preserve every person and object in "
     "exactly the same world position, orientation, shape and pose throughout the shot. Airborne objects remain "
@@ -79,17 +72,10 @@ MOTIONS = {
     "🎥 orbit · slow, cinematic": ORBIT_PROMPT + " A slow, smooth, cinematic orbit.",
 }
 DEFAULT_MOTION = list(MOTIONS)[0]
-
-# ── speed presets: (turbo LoRA, denoise steps). Quality turns turbo off for the full 28-step base. ───────────────
-SPEEDS = {
-    "⚡ Fast · 6 steps": ("larry", 6),
-    "✨ Balanced · 8 steps": ("lightx8", 8),
-    "💎 Quality · 28 steps": ("off", 28),
-}
+SPEEDS = {"⚡ Fast · 6 steps": ("larry", 6), "✨ Balanced · 8 steps": ("lightx8", 8), "💎 Quality · 28 steps": ("off", 28)}
 DEFAULT_SPEED = list(SPEEDS)[0]
 
-# ── manga page layouts: fractional (x, y, w, h) cells per panel count, reading left→right, top→bottom ────────────
-PAGE_W, PAGE_H = 1000, 1500  # the exported page canvas (2:3 portrait, manga-ish)
+PAGE_W, PAGE_H = 1000, 1500
 LAYOUTS = {
     1: [(0, 0, 1, 1)],
     2: [(0, 0, 1, 0.52), (0, 0.52, 1, 0.48)],
@@ -102,7 +88,6 @@ MAX_PANELS = 6
 
 
 def layout_for(n: int):
-    """Cells for n panels. 1–6 use the hand-tuned manga templates; more fall back to a 2-column grid."""
     if n in LAYOUTS:
         return LAYOUTS[n]
     rows = (n + 1) // 2
@@ -113,22 +98,21 @@ def layout_for(n: int):
         if len(left) == 1:
             cells.append((0.0, r * rh, 1.0, rh))
         else:
-            cells.append((0.0, r * rh, 0.5, rh))
-            cells.append((0.5, r * rh, 0.5, rh))
+            cells += [(0.0, r * rh, 0.5, rh), (0.5, r * rh, 0.5, rh)]
     return cells
 
 
 OUTPUT_DIR = os.path.join(tempfile.gettempdir(), "comic-orbit-outputs")
 PANEL_DIR = os.path.join(tempfile.gettempdir(), "comic-orbit-panels")
+for _d in (OUTPUT_DIR, PANEL_DIR):
+    os.makedirs(_d, exist_ok=True)
 
-PIPE = None
-MANAGER = None
+PIPE = MANAGER = None
 LOAD_ERROR: str | None = None
 LOADED_IN: float | None = None
 LORA_STATUS: str | None = None
 
 
-# ── frame-count helpers ──────────────────────────────────────────────────────
 def snap_frames(seconds: float) -> int:
     frames = max(1, round(float(seconds) * FPS))
     while frames % FRAMES_PER_CHUNK != LATENTS_PER_CHUNK:
@@ -142,13 +126,10 @@ def lower_duration_floor(seconds: float = 2) -> None:
     MiniMaxH3ModularPipeline.min_duration = property(lambda self: float(seconds))
 
 
-# ── model load ───────────────────────────────────────────────────────────────
 def load_models() -> str | None:
     global PIPE, MANAGER, LOAD_ERROR, LOADED_IN, LORA_STATUS
-
     if PIPE is not None or LOAD_ERROR is not None:
         return LOAD_ERROR
-
     started = time.time()
     try:
         import torch
@@ -168,7 +149,6 @@ def load_models() -> str | None:
         LORA_STATUS = h3_lora.apply_lora(pipe.transformer)
         if LORA_STATUS:
             print(f"[{VERSION}] {LORA_STATUS}", flush=True)
-
         pipe.transformer.set_attention_backend(ATTENTION)
 
         if PLACEMENT == "pack":
@@ -182,7 +162,7 @@ def load_models() -> str | None:
         print(f"[{VERSION}] ready in {LOADED_IN:.0f}s", flush=True)
     except Exception as error:
         traceback.print_exc()
-        LOAD_ERROR = f"**Loading `{MODEL_REPO}` + orbit/turbo LoRAs failed** after {time.time() - started:.0f}s: `{type(error).__name__}: {error}`"
+        LOAD_ERROR = f"Loading {MODEL_REPO} + orbit/turbo LoRAs failed after {time.time() - started:.0f}s: {type(error).__name__}: {error}"
     return LOAD_ERROR
 
 
@@ -200,7 +180,6 @@ def _arm_decode_hooks(pipe):
         module.decode = armed
 
 
-# ── conditioner (text encoder) over the gradio API ───────────────────────────
 @cache
 def conditioner():
     from gradio_client import Client
@@ -225,7 +204,6 @@ def encode_remote(prompt, image_path, last_image_path, canvas, num_frames):
         return handle.get_tensor("prompt_embeds"), handle.get_tensor("text_token_tags"), handle.metadata(), plan
 
 
-# ── GPU-time budget ──────────────────────────────────────────────────────────
 _DUR_B, _DUR_C = 1.1745e-4, 3.8396e-9
 _DECODE_BASE, _DECODE_PER_DEFAULT_CANVAS, _DEFAULT_CANVAS_PIXELS = 15, 15, 960 * 544 * 124
 _PLACEMENT_ALLOWANCE, _PAD = 12, 10
@@ -248,13 +226,11 @@ def _spin(prompt_embeds, text_token_tags, image, last_image, height, width, num_
     import h3_lora
 
     active_lora = h3_lora.set_active(PIPE.transformer, lora)
-
     if PLACEMENT == "lazy":
         PIPE.to("cuda")
     elif PLACEMENT == "pack":
         PIPE.vae.to("cuda")
         PIPE.audio_vae.to("cuda")
-
     state = PIPE(
         prompt_embeds=prompt_embeds.to("cuda"),
         text_token_tags=text_token_tags,
@@ -270,7 +246,6 @@ def _spin(prompt_embeds, text_token_tags, image, last_image, height, width, num_
 
 
 def fit_panel(image_path: str) -> tuple[str, str]:
-    """Cover-crop the panel to the nearest 768-class orbit canvas and return (cropped path, canvas label)."""
     from PIL import Image, ImageOps
 
     img = ImageOps.exif_transpose(Image.open(image_path)).convert("RGB")
@@ -280,90 +255,39 @@ def fit_panel(image_path: str) -> tuple[str, str]:
     target = w / h
     if abs(aspect - target) > 1e-3:
         if aspect > target:
-            new_w = int(img.height * target)
-            left = (img.width - new_w) // 2
-            img = img.crop((left, 0, left + new_w, img.height))
+            nw = int(img.height * target)
+            img = img.crop(((img.width - nw) // 2, 0, (img.width - nw) // 2 + nw, img.height))
         else:
-            new_h = int(img.width / target)
-            top = (img.height - new_h) // 2
-            img = img.crop((0, top, img.width, top + new_h))
-    os.makedirs(PANEL_DIR, exist_ok=True)
-    out = os.path.join(PANEL_DIR, f"panel-fit-{int(time.time() * 1000)}.png")
+            nh = int(img.width / target)
+            img = img.crop((0, (img.height - nh) // 2, img.width, (img.height - nh) // 2 + nh))
+    out = os.path.join(PANEL_DIR, f"fit-{int(time.time()*1000)}.png")
     img.save(out)
     return out, label
 
 
 def spin_panel(panel_path, scene_hint, speed, motion, seed) -> str:
-    """Spin one panel into a 360° orbit clip. Returns the clip path."""
     if LOAD_ERROR:
-        raise gr.Error(LOAD_ERROR.replace("**", "").replace("`", ""))
+        raise gr.Error(LOAD_ERROR)
     if PIPE is None:
-        raise gr.Error("The studio is still warming up — watch the Space logs and retry shortly.")
-
+        raise gr.Error("The studio is still warming up — retry shortly.")
     from PIL import Image, ImageOps
     from diffusers.utils import encode_video
 
     lora, steps = SPEEDS.get(speed, SPEEDS[DEFAULT_SPEED])
     base = MOTIONS.get(motion, ORBIT_PROMPT)
     prompt = f"{base} The scene: {scene_hint.strip()}." if (scene_hint and scene_hint.strip()) else base
-
     panel, canvas = fit_panel(panel_path)
     num_frames = snap_frames(ORBIT_FRAMES / FPS)
     prompt_embeds, text_token_tags, metadata, plan = encode_remote(prompt, panel, panel, canvas, num_frames)
-    height, width, num_frames = (int(metadata[key]) for key in ("height", "width", "num_frames"))
+    height, width, num_frames = (int(metadata[k]) for k in ("height", "width", "num_frames"))
     keyframe = ImageOps.exif_transpose(Image.open(panel)).convert("RGB")
-
-    started = time.time()
-    frames, active_lora = _spin(
-        prompt_embeds, text_token_tags, keyframe, keyframe, height, width, num_frames, steps, int(seed), lora
-    )
-    os.makedirs(OUTPUT_DIR, exist_ok=True)
-    path = os.path.join(OUTPUT_DIR, f"orbit-{int(time.time() * 1000)}.mp4")
-    encode_video(frames, fps=FPS, output_path=path)  # silent: an orbit is a frozen scene
-    print(f"[{VERSION}] panel spun {width}x{height} {num_frames}f {steps}st turbo={active_lora} in {time.time()-started:.0f}s", flush=True)
+    frames, active = _spin(prompt_embeds, text_token_tags, keyframe, keyframe, height, width, num_frames, steps, int(seed), lora)
+    path = os.path.join(OUTPUT_DIR, f"orbit-{int(time.time()*1000)}.mp4")
+    encode_video(frames, fps=FPS, output_path=path)  # silent
+    print(f"[{VERSION}] spun {width}x{height} {num_frames}f {steps}st turbo={active}", flush=True)
     return path
 
 
-# ── panel sources: sketch / describe / upload ────────────────────────────────
-def save_panel(img) -> str:
-    from PIL import Image
-
-    os.makedirs(PANEL_DIR, exist_ok=True)
-    path = os.path.join(PANEL_DIR, f"panel-{int(time.time() * 1000)}.png")
-    (img if isinstance(img, Image.Image) else Image.open(img)).convert("RGB").save(path)
-    return path
-
-
-def sketch_to_panel(editor_value, refine: bool, prompt: str) -> str:
-    from PIL import Image
-
-    if not editor_value:
-        raise gr.Error("Draw something on the canvas first.")
-    base = editor_value.get("composite") or editor_value.get("background")
-    if base is None:
-        raise gr.Error("The canvas is empty.")
-    flat = base.convert("RGB") if isinstance(base, Image.Image) else Image.open(base).convert("RGB")
-    for layer in editor_value.get("layers") or []:
-        lay = layer if isinstance(layer, Image.Image) else Image.open(layer)
-        if lay.mode == "RGBA":
-            flat.paste(lay, (0, 0), lay)
-    path = save_panel(flat)
-    if refine and IMAGE_SPACE:
-        path = image_space_call(prompt or "clean comic panel line art, inked, high detail", init_image=path)
-    return path
-
-
-def describe_to_panel(prompt: str) -> str:
-    if not IMAGE_SPACE:
-        raise gr.Error(
-            "The Describe tab needs an image Space. Set the `H3_IMAGE_SPACE` secret to a gradio t2i Space, "
-            "or use the Sketch / Upload tabs."
-        )
-    if not prompt or not prompt.strip():
-        raise gr.Error("Describe the panel you want.")
-    return image_space_call(f"comic book panel, bold ink lines, dynamic composition — {prompt.strip()}")
-
-
 def image_space_call(prompt: str, init_image: str | None = None) -> str:
     from gradio_client import Client, handle_file
 
@@ -375,52 +299,63 @@ def image_space_call(prompt: str, init_image: str | None = None) -> str:
         result = client.predict(**kwargs, api_name=IMAGE_API)
     except Exception as error:
         traceback.print_exc()
-        raise gr.Error(f"Image Space `{IMAGE_SPACE}` call failed: {type(error).__name__}: {error}") from error
+        raise gr.Error(f"Sketch Space `{IMAGE_SPACE}` failed: {type(error).__name__}: {error}") from error
     while isinstance(result, (list, tuple)) and result:
         result = result[0]
     if isinstance(result, dict):
         result = result.get("path") or result.get("image") or result.get("url")
     if not isinstance(result, str):
-        raise gr.Error(f"Could not read an image out of `{IMAGE_SPACE}`'s response ({type(result).__name__}).")
-    return save_panel(result)
+        raise gr.Error(f"Could not read an image from `{IMAGE_SPACE}`.")
+    return save_image(result)
 
 
-# ── the comic page ───────────────────────────────────────────────────────────
-def _file_url(path: str) -> str:
-    return f"/gradio_api/file={path}"
+def save_image(src) -> str:
+    from PIL import Image
 
+    path = os.path.join(PANEL_DIR, f"panel-{int(time.time()*1000)}.png")
+    (src if isinstance(src, Image.Image) else Image.open(src)).convert("RGB").save(path)
+    return path
 
-EMPTY_PAGE = """<div class="comic-stage"><div class="comic-empty">
-  <div class="comic-empty-inner"><span class="big">Your comic page</span>
-  <span>Add panels on the left, then hit <b>Render the comic</b>.<br>Each panel will come alive with a 360° orbit.</span></div>
-</div></div>"""
 
+def decode_data_url(data_url: str) -> str:
+    m = re.match(r"data:(image/\w+);base64,(.*)", data_url or "", re.S)
+    if not m:
+        raise gr.Error("Bad image data.")
+    path = os.path.join(PANEL_DIR, f"in-{int(time.time()*1000)}.png")
+    with open(path, "wb") as f:
+        f.write(base64.b64decode(m.group(2)))
+    return save_image(path)
 
-def render_comic_html(panels: list[dict]) -> str:
-    """A manga page: absolutely-positioned panels over a 2:3 page; each is a looping <video> once spun, else the still.
-    `panels` is a list of {still, clip, caption}."""
-    panels = panels or []
-    if not panels:
-        return EMPTY_PAGE
-    rects = layout_for(len(panels))
-    cells = []
-    for i, (p, (x, y, w, h)) in enumerate(zip(panels, rects), start=1):
-        style = f"left:{x*100:.3f}%;top:{y*100:.3f}%;width:{w*100:.3f}%;height:{h*100:.3f}%;"
-        clip, still = p.get("clip"), p.get("still")
-        if clip:
-            media = (
-                f'<video src="{_file_url(clip)}" autoplay loop muted playsinline '
-                f'onclick="this.paused?this.play():this.pause()"></video>'
-            )
-            tag = ""
-        elif still:
-            media = f'<img src="{_file_url(still)}">'
-            tag = '<span class="wait">press Render</span>'
+
+def make_placeholder(prompt: str) -> str:
+    """Fallback when no sketch Space is configured: a cream panel with the prompt text, so the flow is still testable."""
+    from PIL import Image, ImageDraw
+
+    img = Image.new("RGB", (768, 768), (239, 230, 208))
+    d = ImageDraw.Draw(img)
+    text = (prompt or "untitled panel").strip()
+    words, line, y = text.split(), "", 300
+    for w in words:
+        if len(line + " " + w) > 28:
+            d.text((60, y), line, fill=(40, 32, 26)); y += 34; line = w
         else:
-            media, tag = "", ""
-        cap = f'<span class="cap">{escape(p["caption"])}</span>' if p.get("caption") else ""
-        cells.append(f'<div class="comic-panel" style="{style}">{media}{tag}<span class="pnum">{i}</span>{cap}</div>')
-    return f'<div class="comic-stage"><div class="comic-page">{"".join(cells)}</div></div>'
+            line = (line + " " + w).strip()
+    d.text((60, y), line, fill=(40, 32, 26))
+    d.text((60, 60), "sketch placeholder", fill=(150, 130, 100))
+    path = os.path.join(PANEL_DIR, f"ph-{int(time.time()*1000)}.png")
+    img.save(path)
+    return path
+
+
+def _file_url(path: str) -> str:
+    return f"/gradio_api/file={path}"
+
+
+def _url_to_path(url: str) -> str:
+    path = url.split("file=", 1)[-1]
+    if not (os.path.abspath(path).startswith(OUTPUT_DIR) or os.path.abspath(path).startswith(PANEL_DIR)):
+        raise gr.Error("Refusing to read a path outside the studio's own folders.")
+    return path
 
 
 def _even(v: float) -> int:
@@ -429,11 +364,9 @@ def _even(v: float) -> int:
 
 
 def composite_page_video(panels: list[dict]) -> str:
-    """Burn the whole page into one MP4 — every panel playing its orbit at once, in the manga layout. Panels not yet
-    spun are shown as a 3 s still. Returns the mp4 path (or raises gr.Error)."""
     panels = [p for p in (panels or []) if p.get("clip") or p.get("still")]
     if not panels:
-        raise gr.Error("Add and render at least one panel first.")
+        raise gr.Error("Spin at least one panel first.")
     rects = layout_for(len(panels))
     dur = ORBIT_FRAMES / FPS
     args = ["ffmpeg", "-y", "-f", "lavfi", "-i", f"color=c=#f4ead6:s={PAGE_W}x{PAGE_H}:d={dur:.3f}:r={FPS}"]
@@ -442,203 +375,257 @@ def composite_page_video(panels: list[dict]) -> str:
             args += ["-i", p["clip"]]
         else:
             args += ["-loop", "1", "-t", f"{dur:.3f}", "-i", p["still"]]
-    b = 7  # panel border thickness, px
+    b = 7
     fc, prev = "", "[0:v]"
     for i, (p, (x, y, w, h)) in enumerate(zip(panels, rects)):
-        cw, ch = _even(w * PAGE_W), _even(h * PAGE_H)
-        cx, cy = int(x * PAGE_W), int(y * PAGE_H)
+        cw, ch, cx, cy = _even(w * PAGE_W), _even(h * PAGE_H), int(x * PAGE_W), int(y * PAGE_H)
         iw, ih = cw - 2 * b, ch - 2 * b
-        fc += (
-            f"[{i+1}:v]scale={iw}:{ih}:force_original_aspect_ratio=increase,"
-            f"crop={iw}:{ih},setsar=1[v{i}];"
-        )
+        fc += f"[{i+1}:v]scale={iw}:{ih}:force_original_aspect_ratio=increase,crop={iw}:{ih},setsar=1[v{i}];"
         out = f"[o{i}]"
         fc += f"{prev}[v{i}]overlay={cx+b}:{cy+b}{out};"
         prev = out
     for i, (x, y, w, h) in enumerate(rects):
-        cw, ch = _even(w * PAGE_W), _even(h * PAGE_H)
-        cx, cy = int(x * PAGE_W), int(y * PAGE_H)
+        cw, ch, cx, cy = _even(w * PAGE_W), _even(h * PAGE_H), int(x * PAGE_W), int(y * PAGE_H)
         out = f"[b{i}]"
         fc += f"{prev}drawbox=x={cx}:y={cy}:w={cw}:h={ch}:color=#141018:t={b}{out};"
         prev = out
     fc = fc.rstrip(";")
-    os.makedirs(OUTPUT_DIR, exist_ok=True)
     path = os.path.join(OUTPUT_DIR, f"comic-page-{int(time.time()*1000)}.mp4")
     args += ["-filter_complex", fc, "-map", prev, "-c:v", "libx264", "-pix_fmt", "yuv420p", "-r", str(FPS), "-t", f"{dur:.3f}", path]
     try:
         subprocess.run(args, check=True, capture_output=True, timeout=180)
     except subprocess.CalledProcessError as error:
         print(error.stderr.decode()[-1500:], flush=True)
-        raise gr.Error("Could not compose the page video. The panels are still playable above.") from error
+        raise gr.Error("Could not compose the page video.") from error
     return path
 
 
-# ── UI ───────────────────────────────────────────────────────────────────────
+# ── command router: the custom JS writes a JSON command into the hidden bus; this returns a JSON reply ───────────
+def handle(raw):
+    if not raw:
+        return ""
+    cmd_json = raw.split("\u0001", 1)[0]
+    try:
+        cmd = json.loads(cmd_json)
+    except Exception:
+        return ""
+    op, i = cmd.get("op"), cmd.get("i")
+    try:
+        if op == "sketch":
+            prompt = (cmd.get("prompt") or "").strip()
+            refs = cmd.get("refs") or []
+            ref_path = decode_data_url(refs[0]) if refs else None
+            if IMAGE_SPACE:
+                styled = f"{prompt}, {ANIME_STYLE}" if prompt else ANIME_STYLE
+                path = image_space_call(styled, init_image=ref_path)
+            elif ref_path:
+                path = ref_path
+            else:
+                path = make_placeholder(prompt)
+            return json.dumps({"op": "sketch", "i": i, "still": _file_url(path)})
+        if op == "drop":
+            return json.dumps({"op": "sketch", "i": i, "still": _file_url(decode_data_url(cmd["img"]))})
+        if op == "spin":
+            clip = spin_panel(_url_to_path(cmd["url"]), cmd.get("hint", ""), cmd.get("speed", DEFAULT_SPEED), cmd.get("motion", DEFAULT_MOTION), int(cmd.get("seed", 42)))
+            return json.dumps({"op": "spin", "i": i, "clip": _file_url(clip)})
+        if op == "export":
+            vid = composite_page_video([{"clip": _url_to_path(u)} for u in cmd.get("clips", [])])
+            return json.dumps({"op": "export", "video": _file_url(vid)})
+    except gr.Error as error:
+        return json.dumps({"op": op, "i": i, "error": str(error)})
+    except Exception as error:
+        traceback.print_exc()
+        return json.dumps({"op": op, "i": i, "error": f"{type(error).__name__}: {error}"})
+    return ""
+
+
+# ── the SPA (custom HTML/CSS/JS) ─────────────────────────────────────────────
 load_models()
 
-HERO = """<div class="hero">
-  <span class="hero-badge">H3 · ORBIT · COMIC</span>
-  <h1>Comic Orbit Studio</h1>
-  <p>Lay out a page, then <b>render</b> it — every panel comes alive with a 360° camera orbit.
-  <span class="muted">storyboard → panels → a comic that moves.</span></p>
-</div>"""
-
-CSS = """
-:root { --ink:#141018; --paper:#f4ead6; --pop:#ff2e63; --pop2:#2ec5ff; --bd:4px solid var(--ink); }
-.main.fillable { max-width: 1320px !important; }
-.hero { border: var(--bd); border-radius: 18px; padding: 16px 22px; margin-bottom: 12px;
-  background: repeating-linear-gradient(45deg, rgba(0,0,0,.045) 0 7px, transparent 7px 14px),
-    linear-gradient(135deg,#fff 0%,var(--paper) 100%); box-shadow: 8px 8px 0 var(--ink); }
-.hero h1 { font-weight: 900; font-size: 2.15rem; margin: 6px 0 4px; letter-spacing: -.02em; }
-.hero p { margin: 0; } .hero .muted { opacity:.6; }
-.hero-badge { display:inline-block; background: var(--pop); color:#fff; font-weight:800; font-size:.7rem;
-  letter-spacing:.2em; padding: 4px 11px; border-radius: 999px; box-shadow: 2px 2px 0 var(--ink); }
-.dark .hero { background: linear-gradient(135deg,#241b2e,#15101c); box-shadow: 8px 8px 0 #000; }
-/* comic action buttons */
-.pop button, button.pop { background: var(--pop) !important; background-image:none !important; color:#fff !important;
-  border: var(--bd) !important; box-shadow: 4px 4px 0 var(--ink) !important; font-weight: 800 !important;
-  transition: transform .06s, box-shadow .06s; }
-.pop button:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 var(--ink) !important; }
-.pop button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink) !important; }
-.render button { font-size: 1.15rem !important; }
-.dark .pop button { box-shadow: 4px 4px 0 #000 !important; }
-/* the comic page */
-.comic-stage { display:flex; justify-content:center; padding: 4px 0 10px; }
-.comic-page { position: relative; width: 100%; max-width: 560px; aspect-ratio: 2/3; background: var(--paper);
-  border: var(--bd); border-radius: 10px; box-shadow: 10px 10px 0 var(--ink); overflow: hidden; }
-.dark .comic-page { box-shadow: 10px 10px 0 #000; }
-.comic-panel { position:absolute; border: var(--bd); overflow:hidden; background:#0b0b0e; }
-.comic-panel video, .comic-panel img { width:100%; height:100%; object-fit: cover; display:block; cursor:pointer; }
-.comic-panel .pnum { position:absolute; top:5px; left:6px; font-weight:900; font-size:.8rem; color:#fff;
-  background: var(--ink); padding:0 7px; border-radius: 0 8px 0 8px; opacity:.9; }
-.comic-panel .wait { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); font-size:.7rem;
-  font-weight:700; color:var(--ink); background:#fff; border:2px solid var(--ink); padding:2px 8px; border-radius:999px; white-space:nowrap; }
-.comic-panel .cap { position:absolute; left:8px; bottom:8px; max-width:80%; font-size:.78rem; font-weight:700;
-  color:var(--ink); background:#fff; border:2px solid var(--ink); padding:3px 8px; border-radius:10px; box-shadow:2px 2px 0 var(--ink); }
-.comic-empty { width:100%; max-width:560px; aspect-ratio:2/3; border:4px dashed var(--ink); border-radius:12px;
-  display:flex; align-items:center; justify-content:center; text-align:center; opacity:.55; }
-.comic-empty-inner { display:flex; flex-direction:column; gap:10px; } .comic-empty .big { font-weight:900; font-size:1.5rem; }
-.dark .comic-empty { border-color:#aaa; color:#ddd; } .dark .comic-empty .big { color:#fff; }
-.strip .thumbnail-item, .strip img { border-radius: 6px !important; }
-.dark .gradio-container { color: var(--body-text-color); }
-footer { display:none !important; }
+HEAD = r"""
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@600;800&family=Zen+Maru+Gothic:wght@500;700;900&display=swap" rel="stylesheet">
+<style>
+:root{--stage:#17130f;--stage2:#211a14;--paper:#f6edd7;--ink:#141019;--red:#c0392b;--red2:#e05a46;--bubble:#fffdf7;--bd:3px solid var(--ink);--ui:"Zen Maru Gothic",system-ui,sans-serif;--disp:"Shippori Mincho",serif;}
+.gradio-container{max-width:none !important;padding:0 !important;margin:0 !important;}
+gradio-app,body,html{background:var(--stage) !important;overflow:hidden !important;}
+footer,.footer{display:none !important;}
+#comic-app{position:fixed;inset:0;z-index:30;}
+#comic-app *{box-sizing:border-box;}
+#comic-app .app{height:100vh;display:grid;grid-template-columns:238px 1fr;color:#f3ece0;font-family:var(--ui);background:radial-gradient(120% 120% at 50% -10%,var(--stage2),var(--stage) 70%);}
+#comic-app .rail{padding:20px 16px;display:flex;flex-direction:column;gap:12px;border-right:1px solid #2c241c;background:#140f0b;overflow:auto;}
+#comic-app .rail h2{font-size:.72rem;letter-spacing:.22em;margin:2px 0;color:#b59b74;font-weight:700;}
+#comic-app .rail .sub{font-size:.7rem;color:#7c6b55;margin:-6px 0 4px;line-height:1.4;}
+#comic-app .char{background:#1d160f;border:1px solid #352a1f;border-radius:14px;padding:9px;display:flex;gap:10px;align-items:center;}
+#comic-app .char .pic{width:50px;height:50px;border-radius:10px;border:2px solid var(--ink);object-fit:cover;background:#0d0a07;flex:0 0 auto;}
+#comic-app .char .name{font-weight:700;font-size:.9rem;}#comic-app .char .tag{font-size:.66rem;color:#8c7a60;}
+#comic-app .char.add{border-style:dashed;border-color:#4a3c2c;color:#9c8666;justify-content:center;cursor:pointer;font-weight:600;padding:14px;}
+#comic-app .char.add:hover{border-color:var(--red2);color:var(--red2);}
+#comic-app .count{display:flex;gap:4px;flex-wrap:wrap;}
+#comic-app .count button{flex:1;min-width:30px;background:#1d160f;border:1px solid #352a1f;color:#cdb892;border-radius:9px;padding:7px 0;font-weight:800;cursor:pointer;font-family:var(--ui);}
+#comic-app .count button.on{background:var(--red);color:#fff;border-color:var(--ink);}
+#comic-app .railfoot{margin-top:auto;font-size:.68rem;color:#6f5f49;line-height:1.5;padding-top:12px;}
+#comic-app .stage{position:relative;display:flex;align-items:center;justify-content:center;padding:14px 26px 86px;}
+#comic-app .hint{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:#2b2620ee;border:1px solid #42382c;color:#f0e8d8;padding:9px 18px;border-radius:12px;font-size:.82rem;box-shadow:0 6px 20px #0008;z-index:5;}
+#comic-app .hint b{color:#ffd9a0;}
+#comic-app .page{position:relative;width:min(92vw,1040px);aspect-ratio:16/10;background:repeating-linear-gradient(0deg,#00000005 0 3px,transparent 3px 6px),var(--paper);border:var(--bd);border-radius:7px;box-shadow:14px 16px 0 #0009,0 0 0 7px #0d0a07;padding:46px 13px 13px;}
+#comic-app .title{position:absolute;top:7px;left:16px;display:flex;align-items:center;gap:10px;z-index:3;}
+#comic-app .title .badge{background:var(--red);color:#fff;font-weight:800;font-size:.6rem;letter-spacing:.1em;padding:4px 7px;border-radius:5px;box-shadow:2px 2px 0 var(--ink);text-align:center;line-height:1.15;}
+#comic-app .title .en b{font-family:var(--disp);font-style:italic;color:var(--ink);font-size:1rem;outline:none;}
+#comic-app .title .en span{display:block;font-size:.62rem;color:#6a5a44;margin-top:2px;}
+#comic-app .grid{position:absolute;inset:46px 13px 13px;}
+#comic-app .panel{position:absolute;border:var(--bd);background:#efe6d0;overflow:hidden;}
+#comic-app .panel .num{position:absolute;top:0;left:0;z-index:4;background:var(--ink);color:#fff;font-weight:900;font-size:.7rem;padding:2px 8px;border-radius:0 0 9px 0;}
+#comic-app .panel img,#comic-app .panel video{width:100%;height:100%;object-fit:cover;display:block;}
+#comic-app .empty{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;padding:12px;background:repeating-linear-gradient(45deg,#e8dcbf 0 9px,#eee3c7 9px 18px);}
+#comic-app .empty textarea{width:100%;flex:1;min-height:36px;resize:none;border:2px dashed #b7a57f;border-radius:10px;background:#fffdf5cc;font-family:var(--ui);font-size:.8rem;color:#3a3020;padding:8px 10px;outline:none;}
+#comic-app .empty textarea::placeholder{color:#a9966f;}
+#comic-app .btn{border:var(--bd);border-radius:10px;font-family:var(--ui);font-weight:800;cursor:pointer;padding:7px 13px;font-size:.8rem;box-shadow:3px 3px 0 var(--ink);transition:transform .06s,box-shadow .06s;}
+#comic-app .btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);}
+#comic-app .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
+#comic-app .btn.red{background:var(--red);color:#fff;}#comic-app .btn.cream{background:var(--bubble);color:var(--ink);}
+#comic-app .btn.sm{padding:5px 9px;font-size:.72rem;box-shadow:2px 2px 0 var(--ink);}
+#comic-app .drop{font-size:.62rem;color:#9a855f;cursor:pointer;text-decoration:underline;}
+#comic-app .overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:9px;background:linear-gradient(to top,#000000a8,transparent 42%);opacity:0;transition:opacity .15s;}
+#comic-app .panel:hover .overlay{opacity:1;}
+#comic-app .gen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#efe6d0;}
+#comic-app .ring{width:32px;height:32px;border-radius:50%;border:4px solid #d8c9a4;border-top-color:var(--red);animation:spin 1s linear infinite;}
+@keyframes spin{to{transform:rotate(360deg);}}
+#comic-app .gen .lbl{position:absolute;bottom:12px;font-size:.7rem;color:#7a684f;font-weight:600;}
+#comic-app .spin-badge{position:absolute;top:6px;right:7px;z-index:4;background:#000000bb;color:#fff;font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:999px;display:flex;align-items:center;gap:5px;}
+#comic-app .dot{width:7px;height:7px;border-radius:50%;background:var(--red2);animation:pulse 1.4s infinite;}
+@keyframes pulse{0%{box-shadow:0 0 0 0 #e05a4699;}70%{box-shadow:0 0 0 7px #e05a4600;}100%{box-shadow:0 0 0 0 #e05a4600;}}
+#comic-app .handcur{position:absolute;right:11px;bottom:11px;font-size:1.25rem;filter:drop-shadow(0 1px 2px #000a);z-index:4;animation:nudge 1.8s ease-in-out infinite;pointer-events:none;}
+@keyframes nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(-10px);}}
+#comic-app .page.halftone .panel::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.2;background-image:radial-gradient(#000 29%,transparent 30%);background-size:4px 4px;}
+#comic-app .toolbar{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:6px;background:#241e18;border:1px solid #3c3127;border-radius:16px;padding:7px;box-shadow:0 10px 30px #000a;z-index:6;}
+#comic-app .tool{display:flex;flex-direction:column;align-items:center;gap:1px;background:transparent;border:none;color:#e9dcc6;font-family:var(--ui);cursor:pointer;padding:7px 15px;border-radius:11px;font-size:.84rem;font-weight:700;}
+#comic-app .tool small{font-size:.6rem;color:#9a876c;}#comic-app .tool:hover{background:#322a21;}
+#comic-app .tool.on{background:#f1e7d2;color:var(--ink);}#comic-app .tool.on small{color:#6a5a44;}#comic-app .tool.primary{color:#ffd9a0;}
+</style>
+"""
+
+APP_TEMPLATE = """
+<div class="app">
+  <aside class="rail">
+    <h2>CAST</h2>
+    <div class="sub">Drop a reference so a character stays consistent across panels.</div>
+    <div id="cast"></div>
+    <h2 style="margin-top:8px">PAGE</h2>
+    <div class="count" id="count"></div>
+    <div class="railfoot">Krea 2 · anime LoRA sketches your panels, then ORB360 makes them turn.</div>
+  </aside>
+  <main class="stage">
+    <div class="hint">✍️ Write a panel · 🎭 add your cast · ✨ sketch — then <b>spin it</b></div>
+    <div class="page halftone" id="page">
+      <div class="title"><div class="badge">CH<br>01</div>
+        <div class="en"><b contenteditable="true" spellcheck="false">Untitled</b><span>tap to name your comic</span></div></div>
+      <div class="grid" id="grid"></div>
+    </div>
+    <div class="toolbar">
+      <button class="tool primary" data-act="spinall">▶ Spin all<small>orbit every panel</small></button>
+      <button class="tool" data-act="reset">↺ Reset<small>stop motion</small></button>
+      <button class="tool on" data-act="halftone">◦ Halftone<small>screentone</small></button>
+      <button class="tool" data-act="export">⬇ Export<small>one video</small></button>
+    </div>
+  </main>
+</div>
+<input type="file" id="charfile" accept="image/*" style="display:none">
 """
 
+APP_JS = r"""
+const el = element;
+window.__COMIC = window.__COMIC || {};
+const C = window.__COMIC;
+const SPEED = "⚡ Fast · 6 steps", MOTION = "🔄 360° orbit", SEED = 42, MAXP = 6;
+const LAYOUTS = {
+ 1:[[0,0,1,1]], 2:[[0,0,1,.52],[0,.52,1,.48]],
+ 3:[[0,0,1,.42],[0,.42,.5,.58],[.5,.42,.5,.58]],
+ 4:[[0,0,.58,.5],[.58,0,.42,.5],[0,.5,.42,.5],[.42,.5,.58,.5]],
+ 5:[[0,0,1,.34],[0,.34,.5,.33],[.5,.34,.5,.33],[0,.67,.55,.33],[.55,.67,.45,.33]],
+ 6:[[0,0,.5,.34],[.5,0,.5,.34],[0,.34,.55,.33],[.55,.34,.45,.33],[0,.67,.45,.33],[.45,.67,.55,.33]]
+};
+const G = 8;
+let N = 4, panels = [], cast = [], queue = [];
+function L(n){ if(LAYOUTS[n]) return LAYOUTS[n]; const rows=Math.ceil(n/2),rh=1/rows,c=[]; for(let r=0;r<rows;r++){ const k=Math.min(2,n-2*r); if(k===1)c.push([0,r*rh,1,rh]); else {c.push([0,r*rh,.5,rh]);c.push([.5,r*rh,.5,rh]);} } return c; }
+function init(){ panels = Array.from({length:N},()=>({state:"empty",prompt:""})); }
+function esc(s){ return (s||"").replace(/[&<>"]/g,m=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[m])); }
+function panelHTML(p,i){
+ if(p.state==="empty") return `<span class="num">${i+1}</span><div class="empty">
+   <textarea class="ptext" data-i="${i}" placeholder="Describe this panel…">${esc(p.prompt)}</textarea>
+   <button class="btn red" data-act="sketch" data-i="${i}">✨ Sketch</button>
+   <span class="drop" data-act="drop" data-i="${i}">or drop an image</span></div>`;
+ if(p.state==="gen") return `<span class="num">${i+1}</span><div class="gen"><div class="ring"></div><div class="lbl">${esc(p.lbl||"working…")}</div></div>`;
+ if(p.state==="sketch") return `<span class="num">${i+1}</span><img src="${p.img}">
+   <div class="overlay"><button class="btn cream sm" data-act="redo" data-i="${i}">↻ Redo</button>
+   <button class="btn red sm" data-act="spin" data-i="${i}">✓ Approve &amp; spin</button></div>`;
+ return `<span class="num">${i+1}</span><video src="${p.clip}" autoplay loop muted playsinline onclick="this.paused?this.play():this.pause()"></video>
+   <div class="spin-badge"><span class="dot"></span>LIVE</div><div class="handcur">✋</div>`;
+}
+function render(){
+ const grid = el.querySelector("#grid"); grid.innerHTML = "";
+ const rects = L(N);
+ for(let i=0;i<N;i++){
+   const [x,y,w,h]=rects[i], d=document.createElement("div");
+   d.className="panel";
+   d.style.cssText=`left:calc(${x*100}% + ${x>0?G/2:0}px);top:calc(${y*100}% + ${y>0?G/2:0}px);width:calc(${w*100}% - ${G}px);height:calc(${h*100}% - ${G}px);`;
+   d.innerHTML=panelHTML(panels[i],i);
+   grid.appendChild(d);
+ }
+ const cm = el.querySelector("#cast");
+ cm.innerHTML = cast.map(c=>`<div class="char"><img class="pic" src="${c.img}"><div><div class="name">${esc(c.name)}</div><div class="tag">reference locked</div></div></div>`).join("")
+   + `<div class="char add" data-act="addchar">＋ Add character</div>`;
+ const ct = el.querySelector("#count");
+ ct.innerHTML=[1,2,3,4,5,6].map(n=>`<button class="${n===N?'on':''}" data-act="count" data-n="${n}">${n}</button>`).join("");
+}
+function prompt_of(i){ const t=el.querySelector(`.ptext[data-i="${i}"]`); return t?t.value:(panels[i].prompt||""); }
+function send(cmd){ if(C.send) C.send(cmd); }
+C.apply = function(r){
+ if(!r) return;
+ if(r.error){ const p=panels[r.i]; if(p) p.state = p.img?"sketch":"empty"; render(); alert(r.error); return; }
+ if(r.op==="sketch"){ panels[r.i]={state:"sketch",img:r.still}; render(); }
+ else if(r.op==="spin"){ panels[r.i]={state:"live",img:panels[r.i].img,clip:r.clip}; render();
+   if(queue.length){ doSpin(queue.shift()); } }
+ else if(r.op==="export"){ window.open(r.video,"_blank"); }
+};
+function doSketch(i){ const pr=prompt_of(i); panels[i]={state:"gen",lbl:"Krea 2 sketching…",prompt:pr};
+  render(); send({op:"sketch",i,prompt:pr,refs:cast.map(c=>c.img)}); }
+function doSpin(i){ const img=panels[i].img; panels[i]={state:"gen",lbl:"ORB360 spinning…",img};
+  render(); send({op:"spin",i,url:img,hint:panels[i].prompt||"",speed:SPEED,motion:MOTION,seed:SEED}); }
+function spinAll(){ queue=[]; for(let i=0;i<N;i++) if(panels[i].state==="sketch") queue.push(i);
+  if(queue.length) doSpin(queue.shift()); }
+function resetAll(){ panels.forEach((p,i)=>{ if(p.state==="live") panels[i]={state:"sketch",img:p.img}; }); render(); }
+function exportVideo(){ const clips=panels.filter(p=>p.state==="live").map(p=>p.clip); if(!clips.length){alert("Spin a panel first.");return;} send({op:"export",clips}); }
+function setN(n){ const old=panels.slice(); N=n; panels=Array.from({length:N},(_,i)=>old[i]||{state:"empty",prompt:""}); render(); }
+function pickChar(){ const f=el.querySelector("#charfile"); f.onchange=()=>{ const file=f.files[0]; if(!file)return;
+  const rd=new FileReader(); rd.onload=()=>{ cast.push({name:"Character "+String.fromCharCode(65+cast.length),img:rd.result}); render(); }; rd.readAsDataURL(file); f.value=""; }; f.click(); }
+function dropImg(i){ const inp=document.createElement("input"); inp.type="file"; inp.accept="image/*";
+  inp.onchange=()=>{ const file=inp.files[0]; if(!file)return; const rd=new FileReader();
+    rd.onload=()=>{ panels[i]={state:"gen",lbl:"loading…"}; render(); send({op:"drop",i,img:rd.result}); }; rd.readAsDataURL(file); }; inp.click(); }
+el.addEventListener("click",e=>{ const t=e.target.closest("[data-act]"); if(!t)return; const a=t.dataset.act,i=+t.dataset.i;
+ if(a==="sketch"||a==="redo")doSketch(i); else if(a==="spin")doSpin(i); else if(a==="drop")dropImg(i);
+ else if(a==="spinall")spinAll(); else if(a==="reset")resetAll(); else if(a==="halftone"){el.querySelector("#page").classList.toggle("halftone");t.classList.toggle("on");}
+ else if(a==="export")exportVideo(); else if(a==="addchar")pickChar(); else if(a==="count")setN(+t.dataset.n); });
+el.addEventListener("input",e=>{ const t=e.target; if(t.classList&&t.classList.contains("ptext")) panels[+t.dataset.i].prompt=t.value; });
+init(); render();
+"""
+
+BUS_JS = r"""
+window.__COMIC = window.__COMIC || {};
+window.__COMIC.send = function(cmd){ props.value = JSON.stringify(cmd) + "\u0001" + Date.now(); };
+"""
+
+OUT_JS = r"""
+watch("value", function(){ try{ if(props.value){ window.__COMIC && window.__COMIC.apply(JSON.parse(props.value)); } }catch(e){ console.error(e); } });
+"""
 
-def _thumbs(panels):
-    """Storyboard filmstrip: the panel stills in order, captioned."""
-    return [(p["still"], f"{i}. {p.get('caption') or 'panel'}") for i, p in enumerate(panels or [], start=1)]
-
-
-def add_panel(panels, still, caption):
-    panels = list(panels or [])
-    if not still:
-        raise gr.Error("Nothing to add.")
-    if len(panels) >= MAX_PANELS:
-        raise gr.Error(f"This page holds up to {MAX_PANELS} panels. Render or clear it first.")
-    panels.append({"still": still, "clip": None, "caption": (caption or "").strip()})
-    return panels, _thumbs(panels), render_comic_html(panels), f"{len(panels)} panel(s) on the page."
-
-
-def clear_page(_panels):
-    return [], _thumbs([]), render_comic_html([]), "Cleared."
-
-
-with gr.Blocks(title="Comic Orbit Studio", css=CSS) as demo:
-    gr.HTML(HERO)
-
-    panels_state = gr.State([])
-
-    with gr.Row(equal_height=False):
-        # ── left: storyboard builder ──
-        with gr.Column(scale=4):
-            gr.Markdown("### 1 · Build the page")
-            with gr.Tabs():
-                with gr.Tab("💬 Describe"):
-                    describe_prompt = gr.Textbox(label="Describe the panel", lines=2,
-                        placeholder="a lone samurai on a rooftop at dusk, rain, neon reflections")
-                    describe_btn = gr.Button("＋ Add panel", variant="primary", elem_classes=["pop"])
-                    if not IMAGE_SPACE:
-                        gr.Markdown("<span style='opacity:.6'>Set the `H3_IMAGE_SPACE` secret to enable text-to-panel.</span>")
-                with gr.Tab("✏️ Sketch"):
-                    sketch = gr.ImageEditor(label="Draw a panel", type="pil", image_mode="RGBA",
-                        brush=gr.Brush(colors=["#141018", "#ff2e63", "#2ec5ff", "#ffffff"], color_mode="fixed", default_size=6),
-                        height=360, canvas_size=(768, 768))
-                    sketch_refine = gr.Checkbox(label="Refine with AI (needs an image Space)", value=False, visible=bool(IMAGE_SPACE))
-                    sketch_prompt = gr.Textbox(label="Refine hint", placeholder="inked manga panel, screentone", visible=bool(IMAGE_SPACE))
-                    sketch_btn = gr.Button("＋ Add panel", variant="primary", elem_classes=["pop"])
-                with gr.Tab("⬆️ Upload"):
-                    upload = gr.Image(label="Upload a panel", type="filepath", height=300)
-                    upload_btn = gr.Button("＋ Add panel", variant="primary", elem_classes=["pop"])
-
-            caption = gr.Textbox(label="Panel caption (optional)", placeholder="“A dragon!”", lines=1)
-            gr.Markdown("#### Storyboard")
-            strip = gr.Gallery(label=None, columns=6, height=96, object_fit="cover", show_label=False,
-                               allow_preview=False, elem_classes=["strip"])
-
-            gr.Markdown("### 2 · Direction")
-            motion = gr.Dropdown(label="Camera motion", choices=list(MOTIONS), value=DEFAULT_MOTION)
-            speed = gr.Radio(label="Speed", choices=list(SPEEDS), value=DEFAULT_SPEED)
-            with gr.Accordion("Advanced", open=False):
-                seed = gr.Number(label="Seed", value=42, precision=0)
-            with gr.Row():
-                clear_btn = gr.Button("🗑 Clear page")
-                render_btn = gr.Button("🎬 Render the comic", variant="primary", elem_classes=["pop", "render"], scale=2)
-            download_btn = gr.Button("⬇️ Download as video", variant="secondary")
-            status = gr.Markdown("Add a panel to begin.")
-            page_video = gr.File(label="Comic page video", visible=False)
-
-        # ── right: the comic page ──
-        with gr.Column(scale=6):
-            gr.Markdown("### Your comic")
-            comic = gr.HTML(EMPTY_PAGE)
-
-    # ── wiring ──
-    # each add-panel handler produces a still (held in a scratch State), then appends it to the page
-    still_a, still_b, still_c = gr.State(None), gr.State(None), gr.State(None)
-    describe_btn.click(describe_to_panel, describe_prompt, still_a, show_progress="full").then(
-        add_panel, [panels_state, still_a, caption], [panels_state, strip, comic, status])
-    sketch_btn.click(sketch_to_panel, [sketch, sketch_refine, sketch_prompt], still_b, show_progress="full").then(
-        add_panel, [panels_state, still_b, caption], [panels_state, strip, comic, status])
-    upload_btn.click(lambda p: save_panel(p) if p else None, upload, still_c).then(
-        add_panel, [panels_state, still_c, caption], [panels_state, strip, comic, status])
-
-    clear_btn.click(clear_page, panels_state, [panels_state, strip, comic, status])
-
-    def render_comic(panels, motion, speed, seed, progress=gr.Progress()):
-        """Spin every un-spun panel and drop its clip into the page as it finishes (progressive)."""
-        panels = [dict(p) for p in (panels or [])]
-        if not panels:
-            raise gr.Error("Add at least one panel to the page first.")
-        todo = [i for i, p in enumerate(panels) if not p.get("clip")]
-        for k, i in enumerate(todo):
-            progress((k) / max(1, len(todo)), desc=f"Spinning panel {i+1} of {len(panels)} ...")
-            clip = spin_panel(panels[i]["still"], panels[i].get("caption", ""), speed, motion, seed)
-            panels[i]["clip"] = clip
-            yield panels, render_comic_html(panels), f"Panel {i+1} done ({k+1}/{len(todo)}).", gr.update(visible=False)
-        progress(1.0, desc="Page complete")
-        yield panels, render_comic_html(panels), "✅ Comic rendered — every panel is playable. Download it as a video below.", gr.update(visible=False)
-
-    render_btn.click(render_comic, [panels_state, motion, speed, seed], [panels_state, comic, status, page_video])
-
-    def make_video(panels):
-        path = composite_page_video(panels)
-        return gr.update(value=path, visible=True), "🎞️ Page video ready — download below."
-
-    download_btn.click(make_video, panels_state, [page_video, status])
-
-    # scriptable endpoint for API callers / smoke tests: one still path -> one orbit clip
-    api_still = gr.Image(type="filepath", visible=False)
-    api_speed = gr.Textbox(visible=False, value=DEFAULT_SPEED)
-    api_motion = gr.Textbox(visible=False, value=DEFAULT_MOTION)
-    api_hint = gr.Textbox(visible=False, value="")
-    api_seed = gr.Number(visible=False, value=42, precision=0)
-    api_out = gr.Video(visible=False)
-    api_btn = gr.Button(visible=False)
-    api_btn.click(lambda s, sp, mo, hi, se: spin_panel(s, hi, sp, mo, int(se)),
-                  [api_still, api_speed, api_motion, api_hint, api_seed], api_out, api_name="spin")
+with gr.Blocks(title="Comic Orbit Studio") as demo:
+    gr.HTML(value="", html_template=APP_TEMPLATE, js_on_load=APP_JS, head=HEAD, elem_id="comic-app", container=False)
+    bus = gr.HTML(value="", html_template='<div style="display:none"></div>', js_on_load=BUS_JS, container=False, elem_id="comic-bus")
+    out = gr.HTML(value="", html_template='<div style="display:none"></div>', js_on_load=OUT_JS, container=False, elem_id="comic-out")
+    bus.change(handle, bus, out, show_progress="hidden")
 
 
 if __name__ == "__main__":
-    demo.launch(show_error=True, theme=gr.themes.Soft(primary_hue="pink", secondary_hue="cyan"),
-                css=CSS, allowed_paths=[OUTPUT_DIR, PANEL_DIR])
+    demo.launch(show_error=True, allowed_paths=[OUTPUT_DIR, PANEL_DIR])