Upload webapp.py with huggingface_hub

webapp.py

@@ -0,0 +1,1005 @@
+"""Standalone web UI for LTX-2.3 video generation.
+
+Designed to be distributed inside a HuggingFace model repo.  Place this file
+anywhere in the downloaded repo directory (or a sibling directory) and run:
+
+    python webapp_standalone.py
+    python webapp_standalone.py --port 8080
+    python webapp_standalone.py --compare-dir /path/to/second/model
+    python webapp_standalone.py --model-name "LTX-2.3 24 GB RAM"
+
+The script auto-detects its own directory as the primary model.  A second
+model can be supplied via --compare-dir for A/B comparison.
+
+Requirements:
+    pip install flask
+    pip install mlx mlx-lm ltx-core-mlx ltx-pipelines-mlx
+"""
+
+import argparse
+import json
+import subprocess
+import sys
+import threading
+import time
+import uuid
+from collections import defaultdict
+from pathlib import Path
+
+from flask import Flask, Response, jsonify, request, send_file
+
+# ---------------------------------------------------------------------------
+# CLI args — parsed at import time so the constants below can reference them
+# ---------------------------------------------------------------------------
+
+def _build_arg_parser() -> argparse.ArgumentParser:
+    p = argparse.ArgumentParser(
+        description="LTX-2.3 standalone video-generation web UI"
+    )
+    p.add_argument("--port", type=int, default=7860,
+                   help="Port to listen on (default: 7860)")
+    p.add_argument("--compare-dir", type=str, default=None,
+                   help="Optional path to a second model directory for A/B comparison")
+    p.add_argument("--model-name", type=str, default=None,
+                   help="Display name for the primary model (default: directory name)")
+    return p
+
+
+# Parse only our own args; anything unrecognised is left alone so Flask's own
+# dev-server reloader doesn't choke on our flags.
+_parser = _build_arg_parser()
+_args, _unknown = _parser.parse_known_args()
+
+# ---------------------------------------------------------------------------
+# Model discovery
+# ---------------------------------------------------------------------------
+
+# The primary model IS the directory that contains this script — i.e. the
+# downloaded HuggingFace repo root.
+PRIMARY_DIR = Path(__file__).parent.resolve()
+PRIMARY_NAME = _args.model_name or PRIMARY_DIR.name
+
+COMPARE_DIR: Path | None = Path(_args.compare_dir).resolve() if _args.compare_dir else None
+COMPARE_NAME: str | None = COMPARE_DIR.name if COMPARE_DIR else None
+
+# Required files that signal a valid, ready model directory.
+_REQUIRED_FILES = [
+    "transformer-distilled.safetensors",
+    "connector.safetensors",
+    "vae_decoder.safetensors",
+    "audio_vae.safetensors",
+    "vocoder.safetensors",
+]
+
+
+def _model_ready(path: Path) -> bool:
+    return path.is_dir() and all((path / f).exists() for f in _REQUIRED_FILES)
+
+
+def _model_missing_files(path: Path) -> list[str]:
+    return [f for f in _REQUIRED_FILES if not (path / f).exists()]
+
+
+# Build the static model list once at startup.
+MODELS: list[dict] = []
+
+_primary_ok = _model_ready(PRIMARY_DIR)
+MODELS.append({
+    "id":    "primary",
+    "label": PRIMARY_NAME,
+    "dir":   str(PRIMARY_DIR),
+    "ready": _primary_ok,
+    "missing": _model_missing_files(PRIMARY_DIR) if not _primary_ok else [],
+})
+
+if COMPARE_DIR is not None:
+    _compare_ok = _model_ready(COMPARE_DIR)
+    MODELS.append({
+        "id":    "compare",
+        "label": COMPARE_NAME,
+        "dir":   str(COMPARE_DIR),
+        "ready": _compare_ok,
+        "missing": _model_missing_files(COMPARE_DIR) if not _compare_ok else [],
+    })
+
+# Convenience lookup: id → dir
+MODEL_DIRS: dict[str, str] = {m["id"]: m["dir"] for m in MODELS}
+
+# ---------------------------------------------------------------------------
+# Paths
+# ---------------------------------------------------------------------------
+
+# Videos are saved alongside this script (which lives in the model repo).
+RESULTS_DIR = PRIMARY_DIR / "webapp_videos"
+RESULTS_DIR.mkdir(parents=True, exist_ok=True)
+
+# generate_ltx.py is located relative to the RAM/RUN working tree.  We find
+# it by searching upward from this file, then falling back to a path the user
+# can override via the GENERATE_SCRIPT env var.
+import os as _os
+
+def _find_generate_script() -> Path:
+    env_override = _os.environ.get("GENERATE_SCRIPT")
+    if env_override:
+        return Path(env_override)
+    # Walk up looking for experiments/flux_phase1/generate_ltx.py
+    cur = Path(__file__).parent
+    for _ in range(6):
+        candidate = cur / "experiments" / "flux_phase1" / "generate_ltx.py"
+        if candidate.exists():
+            return candidate
+        cur = cur.parent
+    # Last resort: assume this script is inside RAM/RUN/results/<something>/
+    # so climb two levels to RAM/RUN/
+    return Path(__file__).parent.parent.parent / "experiments" / "flux_phase1" / "generate_ltx.py"
+
+
+GENERATE_SCRIPT = _find_generate_script()
+
+# ---------------------------------------------------------------------------
+# Job state
+# ---------------------------------------------------------------------------
+
+# job_id → {status, log_lines, video_path, started, finished, pid, params}
+JOBS: dict = {}
+JOBS_LOCK = threading.Lock()
+
+# ---------------------------------------------------------------------------
+# apply_mixed_precision_quantization
+# (kept here so the script is self-contained; also used by generate_ltx.py
+# which is invoked as a subprocess — but having it here lets us surface the
+# logic for anyone reading this file)
+# ---------------------------------------------------------------------------
+
+def apply_mixed_precision_quantization(model, weights, group_size: int = 64) -> None:
+    """Per-layer mixed-precision quantization from a weight dict.
+
+    Unlike ltx_core_mlx's apply_quantization (which uses a single detected
+    bit width for all layers), this version detects each layer's bits from
+    its packed weight shape and applies nn.quantize once per unique bit width.
+    """
+    import mlx.nn as nn
+
+    layer_bits: dict[str, int] = {}
+    for key in weights:
+        if not key.endswith(".scales"):
+            continue
+        layer = key[: -len(".scales")]
+        w_key = layer + ".weight"
+        if w_key not in weights:
+            continue
+        w_cols = weights[w_key].shape[-1]
+        s_cols = weights[key].shape[-1]
+        bits = round(w_cols * 32 / (s_cols * group_size))
+        if bits in (2, 3, 4, 5, 6, 8):
+            layer_bits[layer] = bits
+
+    if not layer_bits:
+        return
+
+    bits_to_layers: dict[int, set] = defaultdict(set)
+    for layer, b in layer_bits.items():
+        bits_to_layers[b].add(layer)
+
+    for bits, layers in sorted(bits_to_layers.items()):
+        def _predicate(path: str, module, _layers=layers) -> bool:
+            return path in _layers and isinstance(module, nn.Linear)
+        nn.quantize(model, group_size=group_size, bits=bits, class_predicate=_predicate)
+
+    total = sum(len(v) for v in bits_to_layers.values())
+    dist = {b: len(v) for b, v in sorted(bits_to_layers.items())}
+    print(f"  Mixed-precision quantization: {total} layers — {dist}", flush=True)
+
+# ---------------------------------------------------------------------------
+# Job runner
+# ---------------------------------------------------------------------------
+
+def _run_job(job_id: str, cmd: list[str], video_path: Path, cwd: str):
+    with JOBS_LOCK:
+        JOBS[job_id]["status"] = "running"
+
+    try:
+        proc = subprocess.Popen(
+            cmd,
+            stdout=subprocess.PIPE,
+            stderr=subprocess.STDOUT,
+            text=True,
+            cwd=cwd,
+        )
+        with JOBS_LOCK:
+            JOBS[job_id]["pid"] = proc.pid
+
+        for line in proc.stdout:
+            line = line.rstrip("\n")
+            with JOBS_LOCK:
+                JOBS[job_id]["log_lines"].append(line)
+
+        proc.wait()
+        success = proc.returncode == 0 and video_path.exists()
+        with JOBS_LOCK:
+            JOBS[job_id]["status"] = "done" if success else "error"
+            JOBS[job_id]["finished"] = time.time()
+            if success:
+                JOBS[job_id]["video_path"] = str(video_path)
+    except Exception as exc:
+        with JOBS_LOCK:
+            JOBS[job_id]["log_lines"].append(f"[webapp error] {exc}")
+            JOBS[job_id]["status"] = "error"
+            JOBS[job_id]["finished"] = time.time()
+
+# ---------------------------------------------------------------------------
+# Flask app
+# ---------------------------------------------------------------------------
+
+app = Flask(__name__)
+
+
+@app.post("/generate")
+def generate():
+    data = request.get_json(force=True)
+    prompt = data.get("prompt", "").strip()
+    if not prompt:
+        return jsonify(error="prompt required"), 400
+
+    model_id = data.get("model", MODELS[0]["id"])
+    if model_id not in MODEL_DIRS:
+        return jsonify(error=f"unknown model: {model_id}"), 400
+    model_dir = MODEL_DIRS[model_id]
+    if not Path(model_dir).exists():
+        return jsonify(error=f"model directory not found: {model_dir}"), 400
+
+    if not _model_ready(Path(model_dir)):
+        missing = _model_missing_files(Path(model_dir))
+        return jsonify(error=f"model not ready, missing: {missing}"), 400
+
+    height     = int(data.get("height", 480))
+    width      = int(data.get("width", 704))
+    num_frames = int(data.get("num_frames", 65))
+    frame_rate = float(data.get("frame_rate", 24.0))
+    seed       = int(data.get("seed", 42))
+    stage1     = data.get("stage1_steps")
+    stage2     = data.get("stage2_steps")
+
+    job_id = uuid.uuid4().hex[:8]
+    video_path = RESULTS_DIR / f"gen_{job_id}.mp4"
+
+    if not GENERATE_SCRIPT.exists():
+        return jsonify(error=(
+            f"generate_ltx.py not found at {GENERATE_SCRIPT}. "
+            "Set the GENERATE_SCRIPT env var to its absolute path."
+        )), 500
+
+    # Determine the cwd for the subprocess.  generate_ltx.py expects to be
+    # run from the RAM/RUN/ directory so its relative imports resolve.
+    script_cwd = str(GENERATE_SCRIPT.parent.parent.parent)
+
+    cmd = [
+        sys.executable,
+        str(GENERATE_SCRIPT),
+        "--model-dir", model_dir,
+        "--prompt", prompt,
+        "--output", str(video_path),
+        "--height", str(height),
+        "--width",  str(width),
+        "--num-frames", str(num_frames),
+        "--frame-rate", str(frame_rate),
+        "--seed", str(seed),
+    ]
+    if stage1:
+        cmd += ["--stage1-steps", str(stage1)]
+    if stage2:
+        cmd += ["--stage2-steps", str(stage2)]
+
+    # Derive a friendly label for the model in job params
+    model_label = next((m["label"] for m in MODELS if m["id"] == model_id), model_id)
+
+    with JOBS_LOCK:
+        JOBS[job_id] = {
+            "status": "queued",
+            "log_lines": [],
+            "video_path": None,
+            "started": time.time(),
+            "finished": None,
+            "pid": None,
+            "params": {
+                "prompt": prompt,
+                "model": model_id,
+                "model_label": model_label,
+                "height": height,
+                "width": width,
+                "num_frames": num_frames,
+                "frame_rate": frame_rate,
+                "seed": seed,
+            },
+        }
+
+    t = threading.Thread(
+        target=_run_job, args=(job_id, cmd, video_path, script_cwd), daemon=True
+    )
+    t.start()
+    return jsonify(job_id=job_id)
+
+
+@app.get("/stream/<job_id>")
+def stream(job_id: str):
+    """SSE live log stream for a running job."""
+    if job_id not in JOBS:
+        return jsonify(error="not found"), 404
+
+    def generate_events():
+        sent = 0
+        while True:
+            with JOBS_LOCK:
+                lines  = JOBS[job_id]["log_lines"]
+                status = JOBS[job_id]["status"]
+                new_lines = lines[sent:]
+                sent += len(new_lines)
+
+            for line in new_lines:
+                yield f"data: {json.dumps({'line': line})}\n\n"
+
+            if status in ("done", "error") and not new_lines:
+                with JOBS_LOCK:
+                    final_status = JOBS[job_id]["status"]
+                    video        = JOBS[job_id]["video_path"]
+                yield f"data: {json.dumps({'done': True, 'status': final_status, 'video': video})}\n\n"
+                return
+
+            time.sleep(0.25)
+
+    return Response(
+        generate_events(),
+        mimetype="text/event-stream",
+        headers={"Cache-Control": "no-cache", "X-Accel-Buffering": "no"},
+    )
+
+
+@app.get("/video/<job_id>")
+def video(job_id: str):
+    with JOBS_LOCK:
+        job = JOBS.get(job_id)
+    if not job or not job["video_path"]:
+        return jsonify(error="not found"), 404
+    p = Path(job["video_path"])
+    if not p.exists():
+        return jsonify(error="file missing"), 404
+    return send_file(str(p), mimetype="video/mp4", conditional=True)
+
+
+@app.get("/models")
+def list_models():
+    """Return the static model list (no polling needed — models are local)."""
+    return jsonify([
+        {
+            "id":      m["id"],
+            "label":   m["label"],
+            "dir":     m["dir"],
+            "ready":   m["ready"],
+            "missing": m["missing"],
+        }
+        for m in MODELS
+    ])
+
+
+@app.get("/jobs")
+def list_jobs():
+    with JOBS_LOCK:
+        out = []
+        for jid, j in reversed(list(JOBS.items())):
+            out.append({
+                "id":        jid,
+                "status":    j["status"],
+                "params":    j["params"],
+                "started":   j["started"],
+                "finished":  j["finished"],
+                "has_video": bool(j["video_path"]),
+            })
+    return jsonify(out)
+
+
+# ---------------------------------------------------------------------------
+# HTML — single-file UI
+# ---------------------------------------------------------------------------
+
+def _build_html(models: list[dict]) -> str:
+    # Build the model selector: single static label if one model, <select> if two.
+    single_model = len(models) == 1
+
+    if single_model:
+        m = models[0]
+        model_block = f"""
+  <div>
+    <div class="section-title">Model</div>
+    <div id="model-display" style="
+        padding:10px 12px;
+        background:var(--bg);
+        border:1px solid var(--border);
+        border-radius:8px;
+        font-size:.9rem;
+        color:var(--text);
+    ">{m['label']}</div>
+    <input type="hidden" id="model" value="{m['id']}">
+    <div id="model-note" style="font-size:.72rem;color:var(--muted);margin-top:5px;min-height:1.2em"></div>
+  </div>"""
+    else:
+        options = "\n    ".join(
+            f'<option value="{m["id"]}" {"disabled" if not m["ready"] else ""}>'
+            f'{m["label"]}{"  (not ready)" if not m["ready"] else ""}'
+            f'</option>'
+            for m in models
+        )
+        # Default selection: first ready model
+        default_id = next((m["id"] for m in models if m["ready"]), models[0]["id"])
+        model_block = f"""
+  <div>
+    <div class="section-title">Model</div>
+    <select id="model" onchange="updateModelNote()">
+    {options}
+    </select>
+    <div id="model-note" style="font-size:.72rem;color:var(--muted);margin-top:5px;min-height:1.2em"></div>
+  </div>"""
+
+    # Startup warning if primary model is not ready
+    startup_warn = ""
+    if not models[0]["ready"]:
+        missing_list = ", ".join(models[0]["missing"])
+        startup_warn = f"""
+<div style="
+    grid-column:1/-1;
+    background:#2a1a0a;
+    border-bottom:1px solid #5a3a0a;
+    padding:12px 28px;
+    font-size:.82rem;
+    color:#fbbf24;
+">
+  Model directory is missing required files: <code>{missing_list}</code>.
+  Run <code>reformat_ltx_for_pipeline.py</code> first.
+</div>"""
+
+    # Models JSON for JS
+    models_json = json.dumps([{"id": m["id"], "ready": m["ready"], "label": m["label"]} for m in models])
+
+    return f"""<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{models[0]['label']} — Video Generator</title>
+<style>
+  *, *::before, *::after {{ box-sizing: border-box; margin: 0; padding: 0; }}
+
+  :root {{
+    --bg:      #0f0f13;
+    --surface: #1a1a22;
+    --border:  #2e2e3a;
+    --accent:  #7c6af7;
+    --accent2: #a78bfa;
+    --text:    #e2e2f0;
+    --muted:   #6b6b82;
+    --green:   #34d399;
+    --red:     #f87171;
+    --yellow:  #fbbf24;
+  }}
+
+  body {{
+    background: var(--bg);
+    color: var(--text);
+    font-family: system-ui, -apple-system, sans-serif;
+    min-height: 100vh;
+    display: grid;
+    grid-template-columns: 380px 1fr;
+    grid-template-rows: auto auto 1fr;
+    gap: 0;
+  }}
+
+  header {{
+    grid-column: 1 / -1;
+    padding: 18px 28px;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }}
+  header h1 {{ font-size: 1.1rem; font-weight: 600; letter-spacing: .02em; }}
+  header .badge {{
+    font-size: .7rem; background: var(--accent); color: #fff;
+    padding: 2px 8px; border-radius: 99px; font-weight: 600;
+  }}
+
+  .warn-banner {{ grid-column: 1 / -1; }}
+
+  .sidebar {{
+    grid-column: 1;
+    border-right: 1px solid var(--border);
+    padding: 24px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    overflow-y: auto;
+  }}
+
+  .main {{
+    grid-column: 2;
+    padding: 24px 28px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    overflow-y: auto;
+  }}
+
+  label {{ font-size: .8rem; color: var(--muted); display: block; margin-bottom: 5px; }}
+
+  textarea, input, select {{
+    width: 100%;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    color: var(--text);
+    padding: 10px 12px;
+    font-size: .9rem;
+    font-family: inherit;
+    outline: none;
+    transition: border-color .15s;
+  }}
+  textarea:focus, input:focus, select:focus {{ border-color: var(--accent); }}
+  textarea {{ resize: vertical; min-height: 90px; }}
+
+  .row {{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }}
+
+  button {{
+    width: 100%;
+    padding: 12px;
+    border: none;
+    border-radius: 8px;
+    background: var(--accent);
+    color: #fff;
+    font-size: .95rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: opacity .15s, background .15s;
+  }}
+  button:hover {{ opacity: .9; }}
+  button:disabled {{ background: var(--border); color: var(--muted); cursor: not-allowed; opacity: 1; }}
+
+  .section-title {{
+    font-size: .7rem;
+    font-weight: 700;
+    letter-spacing: .1em;
+    text-transform: uppercase;
+    color: var(--muted);
+    margin-bottom: -8px;
+  }}
+
+  .presets {{ display: flex; gap: 6px; flex-wrap: wrap; }}
+  .preset {{
+    font-size: .78rem; padding: 4px 10px; border-radius: 6px;
+    border: 1px solid var(--border); background: var(--surface);
+    cursor: pointer; color: var(--text); transition: border-color .15s;
+    white-space: nowrap;
+  }}
+  .preset:hover, .preset.active {{ border-color: var(--accent); color: var(--accent2); }}
+
+  .status-pill {{
+    display: inline-flex; align-items: center; gap: 6px;
+    font-size: .8rem; padding: 3px 10px; border-radius: 99px;
+    font-weight: 600;
+  }}
+  .status-pill.queued  {{ background: #2a2a1a; color: var(--yellow); }}
+  .status-pill.running {{ background: #1a1a2e; color: var(--accent2); }}
+  .status-pill.done    {{ background: #0d2a1e; color: var(--green); }}
+  .status-pill.error   {{ background: #2a0f0f; color: var(--red); }}
+  .dot {{ width: 7px; height: 7px; border-radius: 50%; background: currentColor; }}
+  .dot.pulse {{ animation: pulse 1s infinite; }}
+  @keyframes pulse {{ 0%,100%{{opacity:1}} 50%{{opacity:.3}} }}
+
+  .log-wrap {{
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    overflow: hidden;
+    flex: 1;
+    min-height: 200px;
+    display: flex;
+    flex-direction: column;
+  }}
+  .log-header {{
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border);
+    font-size: .78rem;
+    color: var(--muted);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }}
+  .log-body {{
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px 14px;
+    font-family: 'SF Mono', 'Fira Mono', monospace;
+    font-size: .78rem;
+    line-height: 1.6;
+    color: #b0b0c8;
+    white-space: pre-wrap;
+    word-break: break-all;
+    max-height: 300px;
+  }}
+  .log-body:empty::before {{ content: 'Waiting for output\2026'; color: var(--muted); }}
+
+  .video-wrap {{
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    overflow: hidden;
+  }}
+  .video-wrap video {{
+    width: 100%;
+    display: block;
+    background: #000;
+    max-height: 480px;
+  }}
+  .video-placeholder {{
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--muted);
+    font-size: .85rem;
+  }}
+
+  .history-item {{
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: .82rem;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    cursor: pointer;
+    transition: border-color .15s;
+    margin-bottom: 8px;
+  }}
+  .history-item:hover {{ border-color: var(--accent); }}
+  .history-item .prompt {{ color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }}
+  .history-item .meta {{ color: var(--muted); font-size: .75rem; }}
+
+  .empty-state {{ color: var(--muted); font-size: .85rem; text-align: center; padding: 20px 0; }}
+
+  code {{
+    font-family: 'SF Mono', 'Fira Mono', monospace;
+    font-size: .85em;
+    background: #1e1e2a;
+    padding: 1px 5px;
+    border-radius: 4px;
+  }}
+</style>
+</head>
+<body>
+
+<header>
+  <h1>{models[0]['label']}</h1>
+  <span class="badge">RAM Mixed-Precision</span>
+</header>
+
+{startup_warn}
+
+<aside class="sidebar">
+  {model_block}
+
+  <div>
+    <label for="prompt">Prompt</label>
+    <textarea id="prompt" rows="4" placeholder="Describe the video you want to generate…">A serene mountain lake at sunrise, mist over calm water, pine trees reflected</textarea>
+  </div>
+
+  <div>
+    <div class="section-title" style="margin-bottom:10px">Resolution presets</div>
+    <div class="presets">
+      <div class="preset" data-h="256"  data-w="256"  data-f="33"  title="256×256, 33 frames">tiny</div>
+      <div class="preset active" data-h="480"  data-w="704"  data-f="65"  title="480×704, 65 frames">480p·65f</div>
+      <div class="preset" data-h="480"  data-w="704"  data-f="97"  title="480×704, 97 frames">480p·97f</div>
+      <div class="preset" data-h="720"  data-w="1280" data-f="65"  title="720×1280, 65 frames">720p·65f</div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div>
+      <label for="height">Height</label>
+      <input type="number" id="height" value="480" step="32" min="128">
+    </div>
+    <div>
+      <label for="width">Width</label>
+      <input type="number" id="width" value="704" step="32" min="128">
+    </div>
+  </div>
+
+  <input type="hidden" id="num_frames" value="65">
+
+  <div class="row">
+    <div>
+      <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px">
+        <label for="duration_s" style="margin:0">Duration</label>
+        <span id="frames-display" style="font-size:.75rem;color:var(--muted)">=&thinsp;65 frames</span>
+      </div>
+      <div style="display:flex;gap:6px;align-items:center">
+        <input type="number" id="duration_s" value="2.7" step="0.5" min="0.5" oninput="updateFrames()">
+        <span style="color:var(--muted);font-size:.85rem;white-space:nowrap;padding-right:4px">s</span>
+      </div>
+    </div>
+    <div>
+      <label for="frame_rate">FPS</label>
+      <input type="number" id="frame_rate" value="24" step="1" min="8" max="60" oninput="updateFrames()">
+    </div>
+  </div>
+
+  <div class="row">
+    <div>
+      <label for="seed">Seed</label>
+      <input type="number" id="seed" value="42">
+    </div>
+    <div style="display:flex;flex-direction:column;justify-content:flex-end">
+      <button type="button" onclick="randomSeed()" style="padding:10px;font-size:.8rem;background:var(--surface);color:var(--text);border:1px solid var(--border)">\U0001f3b2 Random</button>
+    </div>
+  </div>
+
+  <button id="btn-generate" onclick="startGeneration()">Generate</button>
+</aside>
+
+<main class="main">
+  <div id="status-row" style="display:none;align-items:center;gap:12px">
+    <span id="status-pill" class="status-pill queued"><span class="dot"></span> queued</span>
+    <span id="status-info" style="font-size:.82rem;color:var(--muted)"></span>
+  </div>
+
+  <div id="video-section">
+    <div class="video-wrap">
+      <div class="video-placeholder" id="video-placeholder">Video will appear here after generation</div>
+      <video id="video-el" controls style="display:none" playsinline></video>
+    </div>
+  </div>
+
+  <div class="log-wrap">
+    <div class="log-header">
+      <span>Output log</span>
+      <span id="log-status" style="margin-left:auto"></span>
+    </div>
+    <div class="log-body" id="log-body"></div>
+  </div>
+
+  <div>
+    <div class="section-title" style="margin-bottom:12px">Recent generations</div>
+    <div id="history"></div>
+  </div>
+</main>
+
+<script>
+// Static model list injected server-side — no polling needed.
+const MODELS = {models_json};
+const singleModel = MODELS.length === 1;
+
+let currentJobId = null;
+let currentESS   = null;
+
+// ── Model note ────────────────────────────────────────────────────────────────
+
+function updateModelNote() {{
+  if (singleModel) return;
+  const sel   = document.getElementById('model');
+  const m     = MODELS.find(x => x.id === sel.value);
+  const noteEl = document.getElementById('model-note');
+  noteEl.textContent = (m && !m.ready) ? '⚠️ Model not ready — missing required files.' : '';
+}}
+
+// Run once on load if using <select>
+if (!singleModel) updateModelNote();
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function randomSeed() {{
+  document.getElementById('seed').value = Math.floor(Math.random() * 2**31);
+}}
+
+function updateFrames() {{
+  const secs = parseFloat(document.getElementById('duration_s').value) || 2.7;
+  const fps  = parseFloat(document.getElementById('frame_rate').value) || 24;
+  // LTX requires 32k+1 frames (k ≥ 1), minimum 33
+  const k      = Math.max(1, Math.round((secs * fps - 1) / 32));
+  const frames = k * 32 + 1;
+  document.getElementById('num_frames').value = frames;
+  document.getElementById('frames-display').textContent = `= ${{frames}} frames`;
+}}
+
+function syncDurationFromFrames(frames) {{
+  const fps = parseFloat(document.getElementById('frame_rate').value) || 24;
+  document.getElementById('duration_s').value = (frames / fps).toFixed(1);
+  document.getElementById('num_frames').value  = frames;
+  document.getElementById('frames-display').textContent = `= ${{frames}} frames`;
+}}
+
+document.querySelectorAll('.preset').forEach(el => {{
+  el.addEventListener('click', () => {{
+    document.querySelectorAll('.preset').forEach(p => p.classList.remove('active'));
+    el.classList.add('active');
+    document.getElementById('height').value = el.dataset.h;
+    document.getElementById('width').value  = el.dataset.w;
+    syncDurationFromFrames(parseInt(el.dataset.f));
+  }});
+}});
+
+// ── Generation ────────────────────────────────────────────────────────────────
+
+async function startGeneration() {{
+  const prompt = document.getElementById('prompt').value.trim();
+  if (!prompt) {{ alert('Enter a prompt first.'); return; }}
+
+  const btn = document.getElementById('btn-generate');
+  btn.disabled = true;
+
+  document.getElementById('log-body').textContent = '';
+  document.getElementById('video-el').style.display = 'none';
+  document.getElementById('video-placeholder').style.display = 'flex';
+  document.getElementById('status-row').style.display = 'flex';
+  setStatus('queued');
+
+  if (currentESS) {{ currentESS.close(); currentESS = null; }}
+
+  const body = {{
+    prompt,
+    model:      document.getElementById('model').value,
+    height:     parseInt(document.getElementById('height').value),
+    width:      parseInt(document.getElementById('width').value),
+    num_frames: parseInt(document.getElementById('num_frames').value),
+    frame_rate: parseFloat(document.getElementById('frame_rate').value),
+    seed:       parseInt(document.getElementById('seed').value),
+  }};
+
+  const res = await fetch('/generate', {{
+    method: 'POST',
+    headers: {{'Content-Type': 'application/json'}},
+    body: JSON.stringify(body),
+  }});
+  if (!res.ok) {{
+    const err = await res.json();
+    alert('Error: ' + (err.error || res.statusText));
+    btn.disabled = false;
+    return;
+  }}
+  const {{ job_id }} = await res.json();
+  currentJobId = job_id;
+
+  document.getElementById('status-info').textContent = `job ${{job_id}}`;
+  setStatus('running');
+
+  const sse = new EventSource(`/stream/${{job_id}}`);
+  currentESS = sse;
+  const logEl = document.getElementById('log-body');
+
+  sse.onmessage = (e) => {{
+    const data = JSON.parse(e.data);
+    if (data.line !== undefined) {{
+      logEl.textContent += data.line + '\\n';
+      logEl.scrollTop = logEl.scrollHeight;
+    }}
+    if (data.done) {{
+      sse.close();
+      currentESS = null;
+      btn.disabled = false;
+      setStatus(data.status);
+      if (data.status === 'done' && data.video) showVideo(job_id);
+      refreshHistory();
+    }}
+  }};
+  sse.onerror = () => {{
+    sse.close();
+    currentESS = null;
+    btn.disabled = false;
+  }};
+}}
+
+function setStatus(s) {{
+  const pill = document.getElementById('status-pill');
+  pill.className = `status-pill ${{s}}`;
+  const dot = pill.querySelector('.dot');
+  dot.className = 'dot' + (s === 'running' ? ' pulse' : '');
+  dot.nextSibling.textContent = ' ' + s;
+}}
+
+function showVideo(job_id) {{
+  const el = document.getElementById('video-el');
+  el.src = `/video/${{job_id}}`;
+  el.style.display = 'block';
+  document.getElementById('video-placeholder').style.display = 'none';
+  el.load();
+  el.play().catch(() => {{}});
+}}
+
+// ── History ───────────────────────────────────────────────────────────────────
+
+async function refreshHistory() {{
+  const res = await fetch('/jobs');
+  if (!res.ok) return;
+  const jobs = await res.json();
+  const el   = document.getElementById('history');
+  if (!jobs.length) {{
+    el.innerHTML = '<div class="empty-state">No generations yet</div>';
+    return;
+  }}
+  el.innerHTML = jobs.slice(0, 10).map(j => {{
+    const ago      = Math.round((Date.now() / 1000 - j.started) / 60);
+    const duration = j.finished ? `${{Math.round(j.finished - j.started)}}s` : '…';
+    const modelLbl = j.params.model_label || j.params.model;
+    return `<div class="history-item" onclick="loadJob('${{j.id}}')">
+      <div class="prompt">${{escHtml(j.params.prompt)}}</div>
+      <div class="meta">${{escHtml(modelLbl)}} · ${{j.params.height}}×${{j.params.width}} · ${{j.params.num_frames}}f · seed ${{j.params.seed}} · ${{duration}} · ${{ago}}m ago</div>
+    </div>`;
+  }}).join('');
+}}
+
+async function loadJob(job_id) {{
+  const res  = await fetch('/jobs');
+  const jobs = await res.json();
+  const j    = jobs.find(x => x.id === job_id);
+  if (!j) return;
+
+  if (!singleModel) document.getElementById('model').value = j.params.model;
+  document.getElementById('prompt').value     = j.params.prompt;
+  document.getElementById('height').value     = j.params.height;
+  document.getElementById('width').value      = j.params.width;
+  document.getElementById('frame_rate').value = j.params.frame_rate;
+  document.getElementById('seed').value       = j.params.seed;
+  syncDurationFromFrames(j.params.num_frames);
+
+  if (j.has_video) {{
+    document.getElementById('video-el').style.display  = 'none';
+    document.getElementById('video-placeholder').style.display = 'flex';
+    showVideo(job_id);
+    document.getElementById('status-row').style.display = 'flex';
+    setStatus(j.status);
+    document.getElementById('status-info').textContent = `job ${{job_id}}`;
+  }}
+}}
+
+function escHtml(s) {{
+  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}}
+
+// ── Init ──────────────────────────────────────────────────────────────────────
+refreshHistory();
+</script>
+</body>
+</html>"""
+
+
+@app.get("/")
+def index():
+    return _build_html(MODELS)
+
+
+# ---------------------------------------------------------------------------
+# Entry point
+# ---------------------------------------------------------------------------
+
+if __name__ == "__main__":
+    import webbrowser
+    import threading as _threading
+
+    port = _args.port
+
+    # Print startup summary
+    print(f"\nLTX-2.3 Standalone Web UI")
+    print(f"  Primary model : {PRIMARY_NAME}")
+    print(f"  Directory     : {PRIMARY_DIR}")
+    print(f"  Ready         : {_model_ready(PRIMARY_DIR)}")
+    if COMPARE_DIR:
+        print(f"  Compare model : {COMPARE_NAME}")
+        print(f"  Compare dir   : {COMPARE_DIR}")
+        print(f"  Compare ready : {_model_ready(COMPARE_DIR)}")
+    print(f"  Generate script: {GENERATE_SCRIPT} ({'found' if GENERATE_SCRIPT.exists() else 'NOT FOUND — set GENERATE_SCRIPT env var'})")
+    print(f"  Videos saved to: {RESULTS_DIR}")
+    print(f"\n  http://localhost:{port}\n")
+
+    def _open():
+        time.sleep(1.0)
+        webbrowser.open(f"http://localhost:{port}")
+
+    _threading.Thread(target=_open, daemon=True).start()
+    app.run(host="0.0.0.0", port=port, debug=False, threaded=True)