Rebuild the UI as a custom studio frontend on gradio.Server

Server mode: @app .api(name="generate") keeps the queue / ZeroGPU /
gradio_client contract (same name and signature), @app .get("/") serves a
self-contained index.html — dark studio layout with a control deck
(prompt, keyframe dropzones, canvas / duration / steps / seed), a preview
monitor, and a transport-style report bar, driven by the @gradio/client
JS package. /status and /config feed the readiness pill and the canvas
list. Keyframe cover-crop moved server-side into generate so API callers
get it too.

README.md

@@ -35,6 +35,15 @@ Space is therefore impossible, which is why quantized demos of it run NVFP4 or f
 Besides the quality argument, unquantized weights are the ones AoTI can export; an NVFP4 checkpoint cannot be
 exported at all.
 
+## Studio frontend (gradio.Server)
+
+The UI is a custom single-page studio (`index.html`) served by [`gradio.Server`](https://www.gradio.app/docs/gradio/server):
+`@app.get("/")` serves the page, `@app.api(name="generate")` keeps the request on Gradio's queue (concurrency control,
+SSE, ZeroGPU booking, `gradio_client` compatibility — the API name and signature are unchanged), and the page talks
+to it with the `@gradio/client` JS package. `/status` and `/config` are plain FastAPI routes the page polls for
+readiness and the canvas table. Keyframe cover-crop / canvas fitting moved server-side into `generate`, so API
+callers get the same treatment the old upload event gave.
+
 ## 4-step Turbo LoRA
 
 The transformer runs with [`larryvrh/MiniMax-H3-Turbo-Lora`](https://huggingface.co/larryvrh/MiniMax-H3-Turbo-Lora)

app.py

@@ -11,7 +11,9 @@ from functools import cache
 # Before anything that could initialize CUDA: `import spaces` patches `torch.cuda` so the 72 GiB load can happen at
 # startup rather than on GPU time.
 import spaces
-import gradio as gr
+from fastapi.responses import HTMLResponse
+from gradio import Server
+from gradio.data_classes import FileData
 
 MODEL_REPO = os.environ.get("H3_MODEL_REPO", "MiniMaxAI/MiniMax-H3")
 CONDITIONER_SPACE = os.environ.get("H3_CONDITIONER", "multimodalart/qwen3vl-conditioner")
@@ -248,25 +250,67 @@ def _generate(prompt_embeds, text_token_tags, image, last_image, height, width,
     return state.get("videos")[0], state.get("audio")[0].cpu(), state.get("sampling_rate")
 
 
-def generate(prompt, image_path=None, last_image_path=None, canvas=DEFAULT_CANVAS, duration=5, steps=4, seed=42, upsample=False, progress=gr.Progress(track_tqdm=True)):
+def _fit_keyframe(image_path, current_canvas):
+    """Cover-crop an uploaded keyframe to the closest supported aspect ratio and pick that ratio's smallest
+    (fastest) canvas, unless the caller already picked a matching ratio. Returns `(image_path, canvas_label)`."""
+    from PIL import Image as _Image
+
+    img = _Image.open(image_path)
+    aspect = img.width / img.height
+    fastest = {}
+    for label, (h, w) in CANVASES.items():
+        r = w / h
+        if r not in fastest or w * h < fastest[r][1][0] * fastest[r][1][1]:
+            fastest[r] = (label, (h, w))
+    ratio = min(fastest, key=lambda r: abs(r - aspect))
+    label, (h, w) = fastest[ratio]
+
+    cur_h, cur_w = CANVASES[current_canvas]
+    if abs(cur_w / cur_h - aspect) <= abs(ratio - aspect):
+        label = current_canvas
+        h, w = cur_h, cur_w
+
+    target = w / h
+    if abs(img.width / img.height - target) > 1e-3:
+        if img.width / img.height > target:
+            new_w = int(img.height * target)
+            left = (img.width - new_w) // 2
+            img = img.crop((left, 0, left + new_w, 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))
+        img.save(image_path)
+    return image_path, label
+
+
+def generate(prompt, image_path=None, last_image_path=None, canvas=DEFAULT_CANVAS, duration=5, steps=4, seed=42, upsample=False):
     """One request. `upsample` is last and defaults off, so a positional API client that predates it is unaffected."""
     if LOAD_ERROR:
-        raise gr.Error(LOAD_ERROR)
+        raise Exception(LOAD_ERROR)
     if PIPE is None:
-        raise gr.Error("The denoiser is still loading.")
+        raise Exception("The denoiser is still loading.")
     if not prompt or not prompt.strip():
-        raise gr.Error("MiniMax-H3 always takes a prompt, keyframes or not.")
+        raise Exception("MiniMax-H3 always takes a prompt, keyframes or not.")
 
     from PIL import Image, ImageOps
 
     from diffusers.utils import encode_video
 
+    # Server mode: keyframes arrive as FileData dicts, and the cover-crop / canvas-fit that used to be an upload
+    # event in the Blocks UI runs here instead, so API callers get the same treatment.
+    first = image_path["path"] if isinstance(image_path, dict) else image_path
+    last = last_image_path["path"] if isinstance(last_image_path, dict) else last_image_path
+    if first:
+        first, canvas = _fit_keyframe(first, canvas)
+    if last:
+        last, canvas = _fit_keyframe(last, canvas)
+
     num_frames = snap_frames(duration)
 
-    progress(0.0, desc=f"Upsampling the prompt on {CONDITIONER_SPACE} ..." if upsample else f"Conditioning on {CONDITIONER_SPACE} ...")
     conditioned = time.time()
     prompt_embeds, text_token_tags, metadata, plan = encode_remote(
-        prompt, image_path, last_image_path, canvas, num_frames, rewrite_prompt=upsample
+        prompt, first, last, canvas, num_frames, rewrite_prompt=upsample
     )
     condition_seconds = time.time() - conditioned
     height, width, num_frames = (int(metadata[key]) for key in ("height", "width", "num_frames"))
@@ -277,13 +321,12 @@ def generate(prompt, image_path=None, last_image_path=None, canvas=DEFAULT_CANVA
         # exactly this way.
         return ImageOps.exif_transpose(Image.open(path)).convert("RGB") if path else None
 
-    progress(0.1, desc=f"Denoising {steps} steps at {width}x{height}, {num_frames} frames ...")
     started = time.time()
     frames, audio, sampling_rate = _generate(
         prompt_embeds,
         text_token_tags,
-        keyframe(image_path),
-        keyframe(last_image_path),
+        keyframe(first),
+        keyframe(last),
         height,
         width,
         num_frames,
@@ -298,123 +341,55 @@ def generate(prompt, image_path=None, last_image_path=None, canvas=DEFAULT_CANVA
     encode_video(frames, fps=FPS, output_path=path, audio=audio, audio_sample_rate=sampling_rate)
 
     report = (
-        f"`{width}x{height}`, {num_frames} frames ({num_frames / FPS:.3f} s), {int(steps)} steps · "
+        f"{width}x{height} · {num_frames} frames ({num_frames / FPS:.3f} s) · {int(steps)} steps · "
         f"conditioner {condition_seconds:.0f}s ({plan['num_text_tokens']} tokens"
         f"{', upsampled' if refined else ''}) · "
         f"denoise + decode {generate_seconds:.0f}s ({generate_seconds / int(steps):.1f} s/step) · seed {int(seed)}"
     )
     print(f"[gen] {report}", flush=True)
-    return path, report, refined, gr.update(visible=bool(refined))
+    return FileData(path=path), report, refined
 
 
-def _fit_keyframe(image_path, current_canvas):
-    """Cover-crop an uploaded keyframe to the closest supported aspect ratio and select that ratio's smallest
-    (fastest) canvas, unless the user already picked a matching ratio."""
-    if not image_path:
-        return gr.update(), gr.update()
-    from PIL import Image as _Image
 
-    img = _Image.open(image_path)
-    aspect = img.width / img.height
-    fastest = {}
-    for label, (h, w) in CANVASES.items():
-        r = w / h
-        if r not in fastest or w * h < fastest[r][1][0] * fastest[r][1][1]:
-            fastest[r] = (label, (h, w))
-    ratio = min(fastest, key=lambda r: abs(r - aspect))
-    label, (h, w) = fastest[ratio]
+# ======================================================================
+# Server mode: Gradio's API engine (queue, SSE, concurrency, ZeroGPU,
+# gradio_client) under a fully custom studio frontend (index.html).
+# ======================================================================
+app = Server(title="MiniMax-H3 Studio")
 
-    cur_h, cur_w = CANVASES[current_canvas]
-    if abs(cur_w / cur_h - aspect) <= abs(ratio - aspect):
-        label = current_canvas
-        h, w = cur_h, cur_w
 
-    target = w / h
-    if abs(img.width / img.height - target) <= 1e-3:
-        return gr.update(), gr.update(value=label)
-    if img.width / img.height > target:
-        new_w = int(img.height * target)
-        left = (img.width - new_w) // 2
-        img = img.crop((left, 0, left + new_w, 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))
-    img.save(image_path)
-    return gr.update(value=image_path), gr.update(value=label)
+@app.api(name="generate")
+def _generate_api(prompt: str, image_path: FileData | None = None, last_image_path: FileData | None = None,
+                  canvas: str = DEFAULT_CANVAS, duration: float = 5, steps: int = 4, seed: float = 42,
+                  upsample: bool = False) -> tuple[FileData, str, str]:
+    """Generate a video with a synchronized soundtrack. Returns (video, report, refined prompt)."""
+    return generate(prompt, image_path, last_image_path, canvas, duration, steps, seed, upsample)
 
 
-load_models()
+@app.get("/status")
+def studio_status():
+    """Polled by the frontend: is the denoiser ready, and the human-readable status line."""
+    return {"ready": PIPE is not None and LOAD_ERROR is None, "status": status()}
 
-INTRO = """# MiniMax-H3
-
-<div align="center">
-  <a href="https://huggingface.co/MiniMaxAI/MiniMax-H3" target="_blank" rel="noopener"><strong>[ model ]</strong></a> &nbsp;
-  <a href="https://www.minimax.io/blog/minimax-h3" target="_blank" rel="noopener"><strong>[ blog ]</strong></a> &nbsp;
-  <a href="https://huggingface.co/spaces/multimodalart/minimax-h3-reference" target="_blank" rel="noopener"><strong>[ reference to video ]</strong></a>
-</div>
-
-**MiniMax-H3** is a 33B parameter state of the art video generation model that produces video and a
-fully synchronized soundtrack (ambience, foley, speech).
-"""
-
-CSS = """
-.main.fillable {max-width: 1250px !important}
-.dark .gradio-container { color: var(--body-text-color); }
-"""
-
-with gr.Blocks(title="MiniMax-H3") as demo:
-    gr.Markdown(INTRO)
-
-    with gr.Row():
-        with gr.Column():
-            prompt = gr.Textbox(
-                label="Prompt",
-                lines=3,
-                value="A red fox trotting through a snowy pine forest at dawn, snow crunching underfoot",
-            )
-            upsample = gr.Checkbox(label="Upsample prompt", value=False)
-            with gr.Row():
-                image = gr.Image(label="First frame (optional)", type="filepath")
-                last_image = gr.Image(label="Last frame (optional)", type="filepath")
-            run = gr.Button("Generate", variant="primary")
-            with gr.Accordion("Advanced options", open=False):
-                canvas = gr.Dropdown(label="Canvas", choices=list(CANVASES), value=DEFAULT_CANVAS)
-                duration = gr.Slider(label="Duration (s)", minimum=MIN_UI_DURATION, maximum=MAX_UI_DURATION, step=1, value=5)
-                steps = gr.Slider(label="Steps", minimum=2, maximum=40, step=1, value=4)
-                seed = gr.Number(label="Seed", value=42, precision=0)
-
-        with gr.Column():
-            video = gr.Video(label="Video + soundtrack")
-            report = gr.Markdown(visible=False)
-            # An output, so it can be revealed only for a request that asked for a rewrite.
-            with gr.Accordion("Upsampled prompt", open=False, visible=False) as upsampled_panel:
-                upsampled = gr.Textbox(show_label=False, lines=8, interactive=False)
-
-    image.upload(_fit_keyframe, [image, canvas], [image, canvas])
-
-    gr.Examples(
-        examples=[
-            ["A red fox trotting through a snowy pine forest at dawn, snow crunching underfoot", None, None, "1344x768 · 16:9 full"],
-            ["A busy night market, neon signs reflecting in puddles, sizzling street food", None, None, "768x1344 · 9:16 full"],
-            ["A cellist playing a slow melody in an empty concert hall", None, None, "768x768 · 1:1 full"],
-            ["The fox looks around, then trots deeper into the forest", "examples/first.png", None, "1344x768 · 16:9 full"],
-            ["A slow seamless camera move from the first view to the last", "examples/first.png", "examples/last.png", "1344x768 · 16:9 full"],
-        ],
-        inputs=[prompt, image, last_image, canvas],
-        outputs=[video, report, upsampled, upsampled_panel],
-        fn=generate,
-        cache_examples=True,
-        cache_mode="lazy",
-    )
 
-    run.click(
-        generate,
-        [prompt, image, last_image, canvas, duration, steps, seed, upsample],
-        [video, report, upsampled, upsampled_panel],
-        api_name="generate",
-    )
+@app.get("/config")
+def studio_config():
+    """The canvas table and slider ranges, so the frontend never hardcodes a label the backend would reject."""
+    return {
+        "canvases": list(CANVASES),
+        "default_canvas": DEFAULT_CANVAS,
+        "min_duration": MIN_UI_DURATION,
+        "max_duration": MAX_UI_DURATION,
+    }
+
+
+@app.get("/", response_class=HTMLResponse)
+def homepage():
+    with open(os.path.join(os.path.dirname(os.path.abspath(__file__)), "index.html"), encoding="utf-8") as f:
+        return f.read()
 
 
+load_models()
+
 if __name__ == "__main__":
-    demo.launch(show_error=True, theme=gr.themes.Citrus(), css=CSS)
+    app.launch(show_error=True)

index.html

@@ -0,0 +1,374 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>MiniMax-H3 Studio</title>
+<style>
+  :root {
+    --bg: #0b0d10;
+    --panel: #12151a;
+    --panel-2: #171b21;
+    --edge: #23282f;
+    --edge-hi: #31383f;
+    --text: #e8eaed;
+    --dim: #9aa3ad;
+    --faint: #5c6670;
+    --accent: #f59e0b;
+    --accent-dim: #92610a;
+    --go: #22c55e;
+    --err: #ef4444;
+    --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
+  }
+  * { margin: 0; box-sizing: border-box; }
+  body {
+    background: var(--bg); color: var(--text);
+    font: 14px/1.5 -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
+    height: 100vh; display: flex; flex-direction: column; overflow: hidden;
+  }
+
+  /* ---- top bar ---- */
+  header {
+    display: flex; align-items: center; gap: 14px;
+    padding: 0 18px; height: 52px; flex: none;
+    background: var(--panel); border-bottom: 1px solid var(--edge);
+  }
+  .logo { font-weight: 700; letter-spacing: .4px; font-size: 15px; }
+  .logo b { color: var(--accent); }
+  .logo span { color: var(--faint); font-weight: 400; margin-left: 8px; font-size: 12px; }
+  header .links { margin-left: auto; display: flex; gap: 14px; align-items: center; }
+  header a { color: var(--dim); text-decoration: none; font-size: 12px; }
+  header a:hover { color: var(--text); }
+  #status-pill {
+    display: flex; align-items: center; gap: 7px;
+    font: 11px var(--mono); color: var(--dim);
+    border: 1px solid var(--edge); border-radius: 99px; padding: 4px 12px;
+    max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  #status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; animation: pulse 1.2s infinite; }
+  #status-pill.ready #status-dot { background: var(--go); animation: none; }
+  #status-pill.error #status-dot { background: var(--err); animation: none; }
+  @keyframes pulse { 50% { opacity: .35; } }
+
+  main { flex: 1; display: flex; min-height: 0; }
+
+  /* ---- control deck ---- */
+  aside {
+    width: 340px; flex: none; overflow-y: auto;
+    background: var(--panel); border-right: 1px solid var(--edge);
+    padding: 16px; display: flex; flex-direction: column; gap: 14px;
+  }
+  .deck-label {
+    font: 10px var(--mono); letter-spacing: 1.5px; color: var(--faint);
+    text-transform: uppercase; margin-bottom: 6px;
+  }
+  textarea, select, input[type=number] {
+    width: 100%; background: var(--panel-2); color: var(--text);
+    border: 1px solid var(--edge); border-radius: 8px;
+    padding: 10px 12px; font: 13px/1.5 inherit; resize: vertical;
+  }
+  textarea:focus, select:focus, input:focus { outline: none; border-color: var(--accent-dim); }
+  textarea { min-height: 96px; }
+
+  .dropzone {
+    border: 1.5px dashed var(--edge-hi); border-radius: 8px;
+    min-height: 74px; display: flex; align-items: center; justify-content: center;
+    color: var(--faint); font-size: 12px; cursor: pointer; position: relative;
+    overflow: hidden; text-align: center; padding: 6px; transition: border-color .15s;
+  }
+  .dropzone:hover, .dropzone.drag { border-color: var(--accent); color: var(--dim); }
+  .dropzone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+  .dropzone .clear {
+    position: absolute; top: 4px; right: 6px; z-index: 2; color: #fff;
+    background: rgba(0,0,0,.6); border-radius: 4px; padding: 0 6px; font-size: 14px; display: none;
+  }
+  .dropzone.filled .clear { display: block; }
+  .frames-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+
+  .check { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 13px; cursor: pointer; }
+  .check input { accent-color: var(--accent); }
+
+  details { border: 1px solid var(--edge); border-radius: 8px; background: var(--panel-2); }
+  summary {
+    padding: 9px 12px; cursor: pointer; font: 11px var(--mono);
+    letter-spacing: 1px; color: var(--dim); text-transform: uppercase; user-select: none;
+  }
+  details .body { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 12px; }
+  .slider-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); margin-bottom: 2px; }
+  .slider-row output { font-family: var(--mono); color: var(--text); }
+  input[type=range] { width: 100%; accent-color: var(--accent); }
+
+  #run {
+    margin-top: auto; border: none; border-radius: 8px; padding: 13px;
+    background: var(--accent); color: #111; font: 700 14px inherit;
+    letter-spacing: .5px; cursor: pointer; transition: filter .15s, opacity .15s;
+  }
+  #run:hover:not(:disabled) { filter: brightness(1.1); }
+  #run:disabled { opacity: .45; cursor: not-allowed; }
+
+  /* ---- stage ---- */
+  section.stage { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+  .monitor-wrap {
+    flex: 1; display: flex; align-items: center; justify-content: center;
+    padding: 22px; min-height: 0;
+    background: radial-gradient(ellipse at 50% 40%, #10141a 0%, var(--bg) 75%);
+  }
+  .monitor {
+    position: relative; max-width: 100%; max-height: 100%;
+    border: 1px solid var(--edge-hi); border-radius: 10px; overflow: hidden;
+    background: #000; box-shadow: 0 24px 70px rgba(0,0,0,.55);
+    display: flex; align-items: center; justify-content: center;
+  }
+  .monitor video { display: block; max-width: 100%; max-height: calc(100vh - 220px); }
+  .monitor .placeholder {
+    position: absolute; inset: 0; display: flex; flex-direction: column;
+    align-items: center; justify-content: center; gap: 10px; color: var(--faint);
+    font: 12px var(--mono); letter-spacing: 1px; text-align: center; padding: 20px;
+  }
+  .monitor .placeholder .rec { width: 46px; height: 46px; border: 1.5px solid var(--edge-hi); border-radius: 50%;
+    display: flex; align-items: center; justify-content: center; }
+  .monitor .placeholder .rec::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--edge-hi); }
+  .monitor.hidden-video video { display: none; }
+
+  /* ---- transport / report bar ---- */
+  .transport {
+    flex: none; border-top: 1px solid var(--edge); background: var(--panel);
+    padding: 10px 18px; display: flex; align-items: center; gap: 16px;
+    font: 12px var(--mono); color: var(--dim); min-height: 44px;
+  }
+  #job-state { color: var(--accent); }
+  #job-state.done { color: var(--go); }
+  #job-state.failed { color: var(--err); }
+  #report { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
+  #elapsed { color: var(--faint); flex: none; }
+
+  #refined-bar {
+    flex: none; display: none; border-top: 1px solid var(--edge);
+    background: var(--panel-2); padding: 10px 18px; font-size: 12px; color: var(--dim);
+    max-height: 110px; overflow-y: auto;
+  }
+  #refined-bar b { color: var(--faint); font: 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; display: block; margin-bottom: 4px; }
+
+  .examples { display: flex; flex-direction: column; gap: 6px; }
+  .examples button {
+    text-align: left; background: var(--panel-2); border: 1px solid var(--edge);
+    color: var(--dim); border-radius: 6px; padding: 7px 10px; font-size: 12px; cursor: pointer;
+  }
+  .examples button:hover { color: var(--text); border-color: var(--edge-hi); }
+
+  @media (max-width: 860px) {
+    main { flex-direction: column; overflow-y: auto; }
+    aside { width: 100%; border-right: none; border-bottom: 1px solid var(--edge); }
+    body { overflow: auto; }
+  }
+</style>
+</head>
+<body>
+
+<header>
+  <div class="logo">MiniMax-<b>H3</b> Studio<span>video + synchronized soundtrack · 4-step turbo</span></div>
+  <div class="links">
+    <div id="status-pill"><span id="status-dot"></span><span id="status-text">connecting…</span></div>
+    <a href="https://huggingface.co/MiniMaxAI/MiniMax-H3" target="_blank" rel="noopener">model</a>
+    <a href="https://huggingface.co/larryvrh/MiniMax-H3-Turbo-Lora" target="_blank" rel="noopener">turbo lora</a>
+  </div>
+</header>
+
+<main>
+  <aside>
+    <div>
+      <div class="deck-label">Prompt</div>
+      <textarea id="prompt" spellcheck="false">A red fox trotting through a snowy pine forest at dawn, snow crunching underfoot</textarea>
+    </div>
+    <label class="check"><input type="checkbox" id="upsample"> Upsample prompt</label>
+
+    <div>
+      <div class="deck-label">Keyframes (optional)</div>
+      <div class="frames-row">
+        <div class="dropzone" id="dz-first">First frame<span class="clear">×</span></div>
+        <div class="dropzone" id="dz-last">Last frame<span class="clear">×</span></div>
+      </div>
+    </div>
+
+    <details open>
+      <summary>Shot settings</summary>
+      <div class="body">
+        <div>
+          <div class="deck-label">Canvas</div>
+          <select id="canvas"></select>
+        </div>
+        <div>
+          <div class="slider-row"><span>Duration</span><output id="duration-out">5 s</output></div>
+          <input type="range" id="duration" min="2" max="14" step="1" value="5">
+        </div>
+        <div>
+          <div class="slider-row"><span>Steps</span><output id="steps-out">4</output></div>
+          <input type="range" id="steps" min="2" max="40" step="1" value="4">
+        </div>
+        <div>
+          <div class="deck-label">Seed</div>
+          <input type="number" id="seed" value="42" step="1">
+        </div>
+      </div>
+    </details>
+
+    <div>
+      <div class="deck-label">Examples</div>
+      <div class="examples" id="examples"></div>
+    </div>
+
+    <button id="run">▶&nbsp; Generate</button>
+  </aside>
+
+  <section class="stage">
+    <div class="monitor-wrap">
+      <div class="monitor hidden-video" id="monitor">
+        <video id="video" controls playsinline></video>
+        <div class="placeholder" id="placeholder">
+          <div class="rec"></div>
+          <div>STANDBY — CUT A PROMPT AND ROLL</div>
+        </div>
+      </div>
+    </div>
+    <div id="refined-bar"><b>Upsampled prompt</b><span id="refined"></span></div>
+    <div class="transport">
+      <span id="job-state">IDLE</span>
+      <span id="report"></span>
+      <span id="elapsed"></span>
+    </div>
+  </section>
+</main>
+
+<input type="file" id="file-first" accept="image/*" hidden>
+<input type="file" id="file-last" accept="image/*" hidden>
+
+<script type="module">
+import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+const $ = (id) => document.getElementById(id);
+const state = { first: null, last: null, busy: false, timer: null };
+
+/* ---- config + status ---- */
+fetch("/config").then(r => r.json()).then(cfg => {
+  const sel = $("canvas");
+  for (const label of cfg.canvases) {
+    const o = document.createElement("option");
+    o.value = o.textContent = label;
+    if (label === cfg.default_canvas) o.selected = true;
+    sel.appendChild(o);
+  }
+  $("duration").min = cfg.min_duration; $("duration").max = cfg.max_duration;
+});
+
+async function pollStatus() {
+  try {
+    const s = await (await fetch("/status")).json();
+    const pill = $("status-pill");
+    $("status-text").textContent = s.status.replace(/[*`]/g, "");
+    pill.classList.toggle("ready", s.ready);
+    pill.classList.toggle("error", !s.ready && /failed/i.test(s.status));
+    if (s.ready) return;
+  } catch (e) { /* still booting */ }
+  setTimeout(pollStatus, 5000);
+}
+pollStatus();
+
+/* ---- sliders ---- */
+const bind = (id, fmt) => $(id).addEventListener("input", e => $(id + "-out").textContent = fmt(e.target.value));
+bind("duration", v => v + " s");
+bind("steps", v => v);
+
+/* ---- dropzones ---- */
+function wireDropzone(dzId, inputId, key) {
+  const dz = $(dzId), input = $(inputId);
+  const set = (file) => {
+    if (!file) return;
+    state[key] = file;
+    const img = document.createElement("img");
+    img.src = URL.createObjectURL(file);
+    dz.appendChild(img);
+    dz.classList.add("filled");
+  };
+  dz.addEventListener("click", (e) => {
+    if (e.target.classList.contains("clear")) {
+      state[key] = null; dz.classList.remove("filled");
+      dz.querySelector("img")?.remove(); input.value = "";
+    } else input.click();
+  });
+  input.addEventListener("change", () => set(input.files[0]));
+  dz.addEventListener("dragover", e => { e.preventDefault(); dz.classList.add("drag"); });
+  dz.addEventListener("dragleave", () => dz.classList.remove("drag"));
+  dz.addEventListener("drop", e => { e.preventDefault(); dz.classList.remove("drag"); set(e.dataTransfer.files[0]); });
+}
+wireDropzone("dz-first", "file-first", "first");
+wireDropzone("dz-last", "file-last", "last");
+
+/* ---- examples ---- */
+const EXAMPLES = [
+  ["A red fox trotting through a snowy pine forest at dawn, snow crunching underfoot", "1344x768 · 16:9 full"],
+  ["A busy night market, neon signs reflecting in puddles, sizzling street food", "768x1344 · 9:16 full"],
+  ["A cellist playing a slow melody in an empty concert hall", "768x768 · 1:1 full"],
+  ["Waves crashing against basalt cliffs at golden hour, gulls crying overhead", "1152x640 · 16:9"],
+];
+for (const [p, c] of EXAMPLES) {
+  const b = document.createElement("button");
+  b.textContent = p.length > 60 ? p.slice(0, 60) + "…" : p;
+  b.title = p;
+  b.onclick = () => { $("prompt").value = p; $("canvas").value = c; };
+  $("examples").appendChild(b);
+}
+
+/* ---- generate ---- */
+const client = await Client.connect(window.location.origin);
+
+function setJob(label, cls) {
+  const el = $("job-state");
+  el.textContent = label; el.className = cls || "";
+}
+
+$("run").addEventListener("click", async () => {
+  if (state.busy) return;
+  const prompt = $("prompt").value.trim();
+  if (!prompt) { setJob("FAILED", "failed"); $("report").textContent = "a prompt is required"; return; }
+
+  state.busy = true;
+  $("run").disabled = true;
+  $("refined-bar").style.display = "none";
+  $("report").textContent = "";
+  setJob("ROLLING", "");
+  const t0 = Date.now();
+  state.timer = setInterval(() => $("elapsed").textContent = ((Date.now() - t0) / 1000).toFixed(0) + "s", 500);
+
+  try {
+    const result = await client.predict("/generate", {
+      prompt,
+      image_path: state.first ? handle_file(state.first) : null,
+      last_image_path: state.last ? handle_file(state.last) : null,
+      canvas: $("canvas").value,
+      duration: Number($("duration").value),
+      steps: Number($("steps").value),
+      seed: Number($("seed").value),
+      upsample: $("upsample").checked,
+    });
+    const [video, report, refined] = result.data;
+    $("video").src = video.url;
+    $("monitor").classList.remove("hidden-video");
+    $("placeholder").style.display = "none";
+    $("report").textContent = report;
+    if (refined) {
+      $("refined").textContent = refined;
+      $("refined-bar").style.display = "block";
+    }
+    setJob("DONE", "done");
+  } catch (e) {
+    setJob("FAILED", "failed");
+    $("report").textContent = (e && e.message) ? e.message.slice(0, 300) : String(e);
+  } finally {
+    clearInterval(state.timer);
+    state.busy = false;
+    $("run").disabled = false;
+  }
+});
+</script>
+</body>
+</html>