Port the studio from gradio.Server + custom index.html to gr.Workflow

- app.py: replace Server/@app.api/FastAPI routes with a gr.Workflow canvas
(workflow.json) bound to a generate_video fn operator; x-ip-token now
forwarded via LocalContext. All pipeline features unchanged: NCII guard,
larry/lightx/off LoRAs, keyframe cover-crop/canvas-fit, GPU duration
estimator, AoTI blocks.
- workflow.json: the canvas graph (references -> generate_video -> subjects).
- requirements.txt: Gradio from main via the prebuilt pypi-previews wheel at
a9ce60a (git installs ship no frontend assets); README sdk_version bumped
to 6.25.0 to match, hf_oauth: true for owner canvas editing.
- index.html removed: the Workflow canvas replaces the custom studio.

README.md

@@ -4,9 +4,10 @@ emoji: 🎬
 colorFrom: purple
 colorTo: indigo
 sdk: gradio
-sdk_version: 6.20.0
+sdk_version: 6.25.0
 app_file: app.py
 pinned: true
+hf_oauth: true
 short_description: Video generation with a synchronized soundtrack
 suggested_hardware: zero-a10g
 ---
@@ -35,14 +36,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)
+## Workflow frontend (gr.Workflow)
 
-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.
+The UI is a [`gr.Workflow`](https://www.gradio.app/docs/gradio/workflow) canvas (`workflow.json`): reference nodes
+for Prompt / First Frame / Last Frame / Canvas / Duration / Steps / Seed / Upsample / LoRA wire into a single
+`generate_video` fn operator, and out to Output Video / Report / Refined Prompt subjects. The fn runs on Gradio's
+queue (concurrency control, SSE, ZeroGPU booking, `gradio_client` compatibility), and the visitor's `x-ip-token`
+is forwarded through `LocalContext` so the conditioner booking is billed to them. With `hf_oauth: true` the owner
+can rewire the canvas in place; visitors get a runnable, read-only graph. Keyframe cover-crop / canvas fitting
+runs server-side in `generate`, so every caller gets the same treatment.
 
 ## 4-step Turbo LoRA
 

app.py

@@ -11,9 +11,7 @@ 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
-from fastapi.responses import HTMLResponse
-from gradio import Request, Server
-from gradio.data_classes import FileData
+import gradio as gr
 
 MODEL_REPO = os.environ.get("H3_MODEL_REPO", "MiniMaxAI/MiniMax-H3")
 CONDITIONER_SPACE = os.environ.get("H3_CONDITIONER", "multimodalart/qwen3vl-conditioner")
@@ -339,10 +337,14 @@ def generate(prompt, image_path=None, last_image_path=None, canvas=DEFAULT_CANVA
 
     lora = _resolve_lora(lora, use_lora)
 
-    # 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
+    # Keyframes arrive as FileData-style dicts (workflow canvas), plain paths, or URLs; the cover-crop /
+    # canvas-fit runs here so every caller gets the same treatment.
+    def _as_path(value):
+        if isinstance(value, dict):
+            value = value.get("path") or (value.get("url") or "").removeprefix("/gradio_api/file=")
+        return value or None
+
+    first, last = _as_path(image_path), _as_path(last_image_path)
     if first:
         first, canvas = _fit_keyframe(first, canvas)
     if last:
@@ -390,66 +392,60 @@ def generate(prompt, image_path=None, last_image_path=None, canvas=DEFAULT_CANVA
         f"turbo LoRA {active_lora} · seed {int(seed)}"
     )
     print(f"[gen] {report}", flush=True)
-    return FileData(path=path), report, refined
+    video = {"path": path, "url": f"/gradio_api/file={path}", "orig_name": os.path.basename(path), "mime_type": "video/mp4"}
+    return video, report, refined
 
 
 
 # ======================================================================
-# Server mode: Gradio's API engine (queue, SSE, concurrency, ZeroGPU,
-# gradio_client) under a fully custom studio frontend (index.html).
+# Workflow mode: a gr.Workflow canvas (workflow.json) whose single fn
+# operator calls `generate_video` below — the same pipeline the old
+# custom studio drove, now as a node visitors can rewire.
 # ======================================================================
-app = Server(title="MiniMax-H3 Studio")
-
-
-@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 = 6, seed: float = 42,
-                  upsample: bool = False, use_lora: bool = True, lora: str = "", request: Request = None) -> tuple[FileData, str, str]:
-    """Generate a video with a synchronized soundtrack. Returns (video, report, refined prompt).
+def _caller_ip_token() -> str | None:
+    """The visitor's x-ip-token, so the conditioner booking is billed to them rather than this Space's pod IP.
 
-    `lora` selects the turbo LoRA: `larry` (default), `lightx`, or `off`. The legacy `use_lora` bool still works
-    when `lora` is empty.
+    Workflow fn nodes run inside Gradio's request context, so `LocalContext` carries the incoming request; when it
+    does not (API calls without the header), the shared client falls back to the pod's quota.
     """
-    # `request` is injected by the event system, not an API input; its x-ip-token bills the conditioner to the caller.
-    ip_token = request.headers.get("x-ip-token") if request is not None else None
-    return generate(prompt, image_path, last_image_path, canvas, duration, steps, seed, upsample, use_lora, lora, ip_token=ip_token)
+    from gradio.context import LocalContext
 
+    request = LocalContext.request.get()
+    return request.headers.get("x-ip-token") if request is not None else None
 
-@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()}
 
+def generate_video(prompt: str, first_frame=None, last_frame=None, canvas: str = DEFAULT_CANVAS,
+                   duration: float = 5, steps: float = 6, seed: float = 42, upsample: bool = False,
+                   lora: str = "larry"):
+    """The workflow's `generate_video` fn operator. Returns (video file dict, report, refined prompt).
+
+    `lora` selects the turbo LoRA: `larry` (default), `lightx`, or `off`.
+    """
+    if LOAD_ERROR:
+        raise gr.Error(LOAD_ERROR.replace("**", "").replace("`", ""))
+    if PIPE is None:
+        raise gr.Error("The denoiser is still loading — watch the Space logs and retry shortly.")
+    if not prompt or not str(prompt).strip():
+        raise gr.Error("MiniMax-H3 always takes a prompt, keyframes or not.")
+    try:
+        return generate(str(prompt), first_frame, last_frame, canvas, float(duration), int(steps), float(seed),
+                        bool(upsample), lora=str(lora or "larry"), ip_token=_caller_ip_token())
+    except gr.Error:
+        raise
+    except Exception as error:
+        message = str(error).lower()
+        if any(hint in message for hint in ("gpu limit", "quota", "could not allocate", "too many", "concurrent")):
+            raise gr.Error(
+                "The shared ZeroGPU pool is at capacity right now — not a problem with your inputs or account. "
+                "Wait a minute and retry."
+            ) from error
+        raise
 
-# NB: not `/config` — Gradio's own client-discovery route lives there and shadowing it breaks `@gradio/client`.
-@app.get("/studio-config")
-def studio_config():
-    """The canvas table and slider ranges, so the frontend never hardcodes a label the backend would reject."""
-    import h3_lora
 
-    state = getattr(PIPE.transformer, "_lora_state", None) if PIPE is not None else None
-    sets = state["sets"] if state else {}
-    return {
-        "canvases": list(CANVASES),
-        "default_canvas": DEFAULT_CANVAS,
-        "min_duration": MIN_UI_DURATION,
-        "max_duration": MAX_UI_DURATION,
-        # The LoRA dropdown: value -> {label, suggested steps}.
-        "loras": {
-            **{
-                name: {"label": spec["label"], "steps": {"larry": 6, "lightx": 4}.get(name, 6)}
-                for name, spec in sets.items()
-            },
-            "off": {"label": "off (base model)", "steps": 28},
-        },
-        "default_lora": state["active"] if state else "off",
-    }
-
-
-@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()
+# The graph wires Prompt / First Frame / Last Frame / Canvas / Duration / Steps / Seed / Upsample / LoRA into the
+# operator and out to Output Video / Report / Refined Prompt subjects. Editable by the owner on the canvas when the
+# Space sets `hf_oauth: true`; visitors get a runnable, read-only canvas.
+demo = gr.Workflow(graph="workflow.json", bind={"generate_video": generate_video})
 
 
 import ncii_guard
@@ -459,4 +455,4 @@ load_models()
 
 if __name__ == "__main__":
     # allowed_paths: the /gradio_api/file= route only serves whitelisted directories.
-    app.launch(show_error=True, allowed_paths=[OUTPUT_DIR])
+    demo.launch(show_error=True, allowed_paths=[OUTPUT_DIR])

index.html

@@ -1,478 +0,0 @@
-<!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; }
-
-  #bar-track {
-    flex: none; width: 180px; height: 6px; border-radius: 3px;
-    background: var(--edge); overflow: hidden; position: relative;
-  }
-  #bar { height: 100%; width: 0%; border-radius: 3px; background: var(--accent); transition: width .4s linear; }
-  #bar.indeterminate { width: 40%; animation: slide 1.2s ease-in-out infinite; }
-  @keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
-
-  #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) {
-    body { height: 100dvh; overflow: hidden; }
-    main { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
-
-    /* Stage first, controls below: the monitor is what a phone user came for. */
-    section.stage { order: -1; flex: none; }
-    .monitor-wrap { padding: 12px; }
-    .monitor video { max-height: 38vh; }
-    .monitor .placeholder { position: static; padding: 42px 16px; }
-
-    aside {
-      width: 100%; flex: none; overflow: visible;
-      border-right: none; border-top: 1px solid var(--edge);
-      padding: 14px 14px 90px; /* room for the sticky run button */
-    }
-    #run {
-      position: sticky; bottom: 12px; z-index: 5;
-      padding: 15px; font-size: 15px;
-      box-shadow: 0 8px 24px rgba(0,0,0,.5);
-    }
-
-    /* Touch targets + kill iOS auto-zoom on focus (needs >=16px). */
-    textarea, select, input[type=number] { font-size: 16px; }
-    .dropzone { min-height: 92px; }
-    .check { padding: 6px 0; }
-    summary { padding: 12px; }
-    input[type=range] { height: 28px; }
-
-    header { padding: 0 12px; gap: 10px; }
-    .logo span { display: none; }
-    #status-pill { max-width: 38vw; padding: 4px 9px; }
-    header .links a { display: none; }
-    header .links #status-pill { display: flex; }
-
-    .transport { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; }
-    #bar-track { flex: 1 1 100%; order: -1; width: auto; height: 5px; }
-    #report { white-space: normal; flex: 1 1 60%; font-size: 11px; }
-    #refined-bar { max-height: 80px; }
-  }
-  @media (max-width: 400px) {
-    .frames-row { grid-template-columns: 1fr; }
-  }
-</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>
-    <div>
-      <div class="deck-label">Turbo LoRA</div>
-      <select id="lora"></select>
-    </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">6</output></div>
-          <input type="range" id="steps" min="2" max="40" step="1" value="6">
-        </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>
-      <div id="bar-track"><div id="bar"></div></div>
-      <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">
-// @gradio/client is REQUIRED here (not plain fetch): it forwards the HF iframe auth headers that ZeroGPU
-// quota handling depends on — without them every booking lands on the pod IP's shared quota.
-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("/studio-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;
-
-  const loraSel = $("lora");
-  for (const [value, spec] of Object.entries(cfg.loras || { larry: { label: "larry", steps: 6 } })) {
-    const o = document.createElement("option");
-    o.value = value;
-    o.textContent = value === "off" ? "off (base model)" : value;
-    o.title = spec.label;
-    if (value === cfg.default_lora) o.selected = true;
-    loraSel.appendChild(o);
-  }
-  // Each LoRA has a design point: suggest it on switch (the slider stays free).
-  loraSel.addEventListener("change", () => {
-    const spec = (cfg.loras || {})[loraSel.value];
-    if (spec && spec.steps) { $("steps").value = spec.steps; $("steps-out").textContent = spec.steps; }
-  });
-});
-
-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, { events: ["data", "status"] });
-
-function setJob(label, cls) {
-  const el = $("job-state");
-  el.textContent = label; el.className = cls || "";
-}
-
-function setBar(pct) {
-  const bar = $("bar");
-  if (pct === null) { bar.className = "indeterminate"; return; }
-  bar.className = "";
-  bar.style.width = Math.max(0, Math.min(100, pct)) + "%";
-}
-
-$("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 submission = client.submit("/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,
-      lora: $("lora").value,
-    });
-    let data = null;
-    for await (const msg of submission) {
-      if (msg.type === "status") {
-        if (msg.stage === "pending") {
-          setJob(msg.position != null ? `QUEUED #${msg.position + 1}` : "QUEUED");
-          setBar(null);
-        } else if (msg.stage === "generating") {
-          setJob("ROLLING");
-          // ETA comes from the queue's booking estimate; blend it with our own elapsed timer.
-          if (msg.eta != null && msg.eta > 0) {
-            const elapsed = (Date.now() - t0) / 1000;
-            setBar(100 * elapsed / (elapsed + msg.eta));
-          } else setBar(null);
-        } else if (msg.stage === "error") {
-          throw new Error(msg.message || "generation failed");
-        }
-      } else if (msg.type === "data") {
-        data = msg.data;
-      }
-    }
-    if (!data) throw new Error("the backend returned no data");
-    // Server mode returns the tuple as ONE Api output: unwrap [[video, report, refined]] too.
-    if (data.length === 1 && Array.isArray(data[0])) data = data[0];
-    const [video, report, refined] = data;
-    // FileData may carry only `path`; resolve those through Gradio's file route.
-    const videoUrl = (video && (video.url || (video.path && `/gradio_api/file=${video.path}`)))
-      || (typeof video === "string" && `/gradio_api/file=${video}`);
-    if (!videoUrl) throw new Error("the backend returned no video reference");
-    $("video").src = videoUrl;
-    $("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");
-    setBar(100);
-  } catch (e) {
-    setJob("FAILED", "failed");
-    setBar(0);
-    $("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>

requirements.txt

@@ -14,7 +14,10 @@ transformers==5.8.0
 accelerate==1.14.0
 # diffusers pins <2.
 huggingface-hub==1.24.0
-gradio==6.20.0
+# Gradio tracks main (https://github.com/gradio-app/gradio) via the prebuilt preview wheel — installing from git
+# does not build the frontend assets. a9ce60ae03123ed6374b739d862e62dcae2f451e = refs/heads/main at the time of
+# this PR; re-pin to the new head (and bump `sdk_version` in README.md if the version changed) to move past it.
+gradio @ https://huggingface.co/buckets/gradio/pypi-previews/resolve/a9ce60ae03123ed6374b739d862e62dcae2f451e/gradio-6.25.0-py3-none-any.whl
 spaces==0.51.1
 # No `kernels` pin on purpose: the Hub attention backends want `kernels>=0.12.3`, and that version breaks
 # transformers 5.8.0 at import.

workflow.json

@@ -0,0 +1,562 @@
+{
+  "schema_version": "2",
+  "name": "MiniMax-H3 Studio",
+  "description": "Joint video + synchronized soundtrack from MiniMax-H3 (unquantized bf16, split deployment) with switchable turbo LoRAs, driven by a gr.Workflow fn-bound @spaces.GPU function.",
+  "runtime": {
+    "default": "client"
+  },
+  "view": {
+    "default": "canvas"
+  },
+  "references": [
+    {
+      "id": "ref_prompt",
+      "label": "Prompt",
+      "role": "reference",
+      "asset_type": "text",
+      "inputs": [
+        {
+          "id": "in",
+          "label": "Prompt",
+          "type": "text"
+        }
+      ],
+      "outputs": [
+        {
+          "id": "out",
+          "label": "Prompt",
+          "type": "text"
+        }
+      ],
+      "x": 40,
+      "y": 60,
+      "width": 280,
+      "height": 140,
+      "data": {
+        "out": "A corgi in a chef hat flipping a pancake in a sunlit kitchen, sizzling sounds and a cheerful bark, cinematic"
+      }
+    },
+    {
+      "id": "ref_first",
+      "label": "First Frame (optional)",
+      "role": "reference",
+      "asset_type": "image",
+      "inputs": [
+        {
+          "id": "in",
+          "label": "Image",
+          "type": "image"
+        }
+      ],
+      "outputs": [
+        {
+          "id": "out",
+          "label": "Image",
+          "type": "image"
+        }
+      ],
+      "x": 40,
+      "y": 230,
+      "width": 220,
+      "height": 120,
+      "data": {}
+    },
+    {
+      "id": "ref_last",
+      "label": "Last Frame (optional)",
+      "role": "reference",
+      "asset_type": "image",
+      "inputs": [
+        {
+          "id": "in",
+          "label": "Image",
+          "type": "image"
+        }
+      ],
+      "outputs": [
+        {
+          "id": "out",
+          "label": "Image",
+          "type": "image"
+        }
+      ],
+      "x": 40,
+      "y": 370,
+      "width": 220,
+      "height": 120,
+      "data": {}
+    },
+    {
+      "id": "ref_canvas",
+      "label": "Canvas",
+      "role": "reference",
+      "asset_type": "text",
+      "inputs": [
+        {
+          "id": "in",
+          "label": "Canvas label",
+          "type": "text"
+        }
+      ],
+      "outputs": [
+        {
+          "id": "out",
+          "label": "Canvas",
+          "type": "text",
+          "choices": [
+            "960x544 · 16:9 fast",
+            "1024x576 · 16:9 fast",
+            "1152x640 · 16:9",
+            "1280x704 · 16:9",
+            "1344x768 · 16:9 full",
+            "544x960 · 9:16 fast",
+            "640x1152 · 9:16",
+            "768x1344 · 9:16 full",
+            "544x544 · 1:1 fast",
+            "768x768 · 1:1 full",
+            "768x576 · 4:3 fast",
+            "1024x768 · 4:3 full",
+            "576x768 · 3:4 fast",
+            "768x1024 · 3:4 full",
+            "1152x512 · 21:9 fast",
+            "1536x672 · 21:9 full"
+          ]
+        }
+      ],
+      "x": 40,
+      "y": 520,
+      "width": 220,
+      "height": 90,
+      "data": {
+        "out": "960x544 · 16:9 fast"
+      }
+    },
+    {
+      "id": "ref_duration",
+      "label": "Duration (s)",
+      "role": "reference",
+      "asset_type": "number",
+      "inputs": [
+        {
+          "id": "in",
+          "label": "Seconds",
+          "type": "number"
+        }
+      ],
+      "outputs": [
+        {
+          "id": "out",
+          "label": "Duration",
+          "type": "number"
+        }
+      ],
+      "x": 40,
+      "y": 630,
+      "width": 200,
+      "height": 90,
+      "data": {
+        "out": 5
+      }
+    },
+    {
+      "id": "ref_steps",
+      "label": "Steps",
+      "role": "reference",
+      "asset_type": "number",
+      "inputs": [
+        {
+          "id": "in",
+          "label": "Steps",
+          "type": "number"
+        }
+      ],
+      "outputs": [
+        {
+          "id": "out",
+          "label": "Steps",
+          "type": "number",
+          "choices": [
+            4,
+            6,
+            28
+          ]
+        }
+      ],
+      "x": 40,
+      "y": 740,
+      "width": 200,
+      "height": 90,
+      "data": {
+        "out": 6
+      },
+      "steps": null
+    },
+    {
+      "id": "ref_seed",
+      "label": "Seed",
+      "role": "reference",
+      "asset_type": "number",
+      "inputs": [
+        {
+          "id": "in",
+          "label": "Seed",
+          "type": "number"
+        }
+      ],
+      "outputs": [
+        {
+          "id": "out",
+          "label": "Seed",
+          "type": "number"
+        }
+      ],
+      "x": 40,
+      "y": 850,
+      "width": 200,
+      "height": 90,
+      "data": {
+        "out": 42
+      }
+    },
+    {
+      "id": "ref_upsample",
+      "label": "Upsample Prompt",
+      "role": "reference",
+      "asset_type": "boolean",
+      "inputs": [
+        {
+          "id": "in",
+          "label": "Upsample",
+          "type": "boolean"
+        }
+      ],
+      "outputs": [
+        {
+          "id": "out",
+          "label": "Upsample",
+          "type": "boolean"
+        }
+      ],
+      "x": 40,
+      "y": 960,
+      "width": 200,
+      "height": 90,
+      "data": {
+        "out": false
+      }
+    },
+    {
+      "id": "ref_lora",
+      "label": "LoRA",
+      "role": "reference",
+      "asset_type": "text",
+      "inputs": [
+        {
+          "id": "in",
+          "label": "LoRA",
+          "type": "text"
+        }
+      ],
+      "outputs": [
+        {
+          "id": "out",
+          "label": "LoRA",
+          "type": "text",
+          "choices": [
+            "larry",
+            "lightx",
+            "off"
+          ]
+        }
+      ],
+      "x": 40,
+      "y": 1070,
+      "width": 260,
+      "height": 90,
+      "data": {
+        "out": "larry"
+      }
+    }
+  ],
+  "operators": [
+    {
+      "id": "op_generate",
+      "label": "generate_video",
+      "role": "operator",
+      "kind": "fn",
+      "source": "fn",
+      "fn": "generate_video",
+      "inputs": [
+        {
+          "id": "in_0",
+          "label": "prompt",
+          "type": "text",
+          "required": true
+        },
+        {
+          "id": "in_1",
+          "label": "first_frame",
+          "type": "image"
+        },
+        {
+          "id": "in_2",
+          "label": "last_frame",
+          "type": "image"
+        },
+        {
+          "id": "in_3",
+          "label": "canvas",
+          "type": "text",
+          "choices": [
+            "960x544 · 16:9 fast",
+            "1024x576 · 16:9 fast",
+            "1152x640 · 16:9",
+            "1280x704 · 16:9",
+            "1344x768 · 16:9 full",
+            "544x960 · 9:16 fast",
+            "640x1152 · 9:16",
+            "768x1344 · 9:16 full",
+            "544x544 · 1:1 fast",
+            "768x768 · 1:1 full",
+            "768x576 · 4:3 fast",
+            "1024x768 · 4:3 full",
+            "576x768 · 3:4 fast",
+            "768x1024 · 3:4 full",
+            "1152x512 · 21:9 fast",
+            "1536x672 · 21:9 full"
+          ]
+        },
+        {
+          "id": "in_4",
+          "label": "duration",
+          "type": "number"
+        },
+        {
+          "id": "in_5",
+          "label": "steps",
+          "type": "number"
+        },
+        {
+          "id": "in_6",
+          "label": "seed",
+          "type": "number"
+        },
+        {
+          "id": "in_7",
+          "label": "upsample",
+          "type": "boolean"
+        },
+        {
+          "id": "in_8",
+          "label": "lora",
+          "type": "text",
+          "choices": [
+            "larry",
+            "lightx",
+            "off"
+          ]
+        }
+      ],
+      "outputs": [
+        {
+          "id": "out_0",
+          "label": "video",
+          "type": "video",
+          "output_index": 0
+        },
+        {
+          "id": "out_1",
+          "label": "report",
+          "type": "text",
+          "output_index": 1
+        },
+        {
+          "id": "out_2",
+          "label": "refined_prompt",
+          "type": "text",
+          "output_index": 2
+        }
+      ],
+      "x": 460,
+      "y": 420,
+      "width": 300,
+      "height": 300,
+      "data": {}
+    }
+  ],
+  "subjects": [
+    {
+      "id": "sub_video",
+      "label": "Output Video",
+      "role": "subject",
+      "asset_type": "video",
+      "inputs": [
+        {
+          "id": "in",
+          "label": "Video",
+          "type": "video"
+        }
+      ],
+      "outputs": [
+        {
+          "id": "out",
+          "label": "Video",
+          "type": "video"
+        }
+      ],
+      "x": 880,
+      "y": 380,
+      "width": 280,
+      "height": 160,
+      "data": {}
+    },
+    {
+      "id": "sub_report",
+      "label": "Report",
+      "role": "subject",
+      "asset_type": "text",
+      "inputs": [
+        {
+          "id": "in",
+          "label": "Report",
+          "type": "text"
+        }
+      ],
+      "outputs": [
+        {
+          "id": "out",
+          "label": "Report",
+          "type": "text"
+        }
+      ],
+      "x": 880,
+      "y": 580,
+      "width": 280,
+      "height": 110,
+      "data": {}
+    },
+    {
+      "id": "sub_refined",
+      "label": "Refined Prompt",
+      "role": "subject",
+      "asset_type": "text",
+      "inputs": [
+        {
+          "id": "in",
+          "label": "Refined prompt",
+          "type": "text"
+        }
+      ],
+      "outputs": [
+        {
+          "id": "out",
+          "label": "Refined prompt",
+          "type": "text"
+        }
+      ],
+      "x": 880,
+      "y": 720,
+      "width": 280,
+      "height": 110,
+      "data": {}
+    }
+  ],
+  "edges": [
+    {
+      "id": "e_prompt",
+      "from_node_id": "ref_prompt",
+      "from_port_id": "out",
+      "to_node_id": "op_generate",
+      "to_port_id": "in_0",
+      "type": "text"
+    },
+    {
+      "id": "e_first",
+      "from_node_id": "ref_first",
+      "from_port_id": "out",
+      "to_node_id": "op_generate",
+      "to_port_id": "in_1",
+      "type": "image"
+    },
+    {
+      "id": "e_last",
+      "from_node_id": "ref_last",
+      "from_port_id": "out",
+      "to_node_id": "op_generate",
+      "to_port_id": "in_2",
+      "type": "image"
+    },
+    {
+      "id": "e_canvas",
+      "from_node_id": "ref_canvas",
+      "from_port_id": "out",
+      "to_node_id": "op_generate",
+      "to_port_id": "in_3",
+      "type": "text"
+    },
+    {
+      "id": "e_duration",
+      "from_node_id": "ref_duration",
+      "from_port_id": "out",
+      "to_node_id": "op_generate",
+      "to_port_id": "in_4",
+      "type": "number"
+    },
+    {
+      "id": "e_steps",
+      "from_node_id": "ref_steps",
+      "from_port_id": "out",
+      "to_node_id": "op_generate",
+      "to_port_id": "in_5",
+      "type": "number"
+    },
+    {
+      "id": "e_seed",
+      "from_node_id": "ref_seed",
+      "from_port_id": "out",
+      "to_node_id": "op_generate",
+      "to_port_id": "in_6",
+      "type": "number"
+    },
+    {
+      "id": "e_upsample",
+      "from_node_id": "ref_upsample",
+      "from_port_id": "out",
+      "to_node_id": "op_generate",
+      "to_port_id": "in_7",
+      "type": "boolean"
+    },
+    {
+      "id": "e_lora",
+      "from_node_id": "ref_lora",
+      "from_port_id": "out",
+      "to_node_id": "op_generate",
+      "to_port_id": "in_8",
+      "type": "text"
+    },
+    {
+      "id": "e_video_out",
+      "from_node_id": "op_generate",
+      "from_port_id": "out_0",
+      "to_node_id": "sub_video",
+      "to_port_id": "in",
+      "type": "video"
+    },
+    {
+      "id": "e_report_out",
+      "from_node_id": "op_generate",
+      "from_port_id": "out_1",
+      "to_node_id": "sub_report",
+      "to_port_id": "in",
+      "type": "text"
+    },
+    {
+      "id": "e_refined_out",
+      "from_node_id": "op_generate",
+      "from_port_id": "out_2",
+      "to_node_id": "sub_refined",
+      "to_port_id": "in",
+      "type": "text"
+    }
+  ]
+}