Update index.html

index.html

@@ -26,7 +26,6 @@
     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;
@@ -49,9 +48,7 @@
   #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;
@@ -69,7 +66,6 @@
   }
   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;
@@ -84,10 +80,8 @@
   }
   .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);
@@ -97,7 +91,6 @@
   .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;
@@ -105,7 +98,6 @@
   }
   #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 {
@@ -129,7 +121,6 @@
     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);
@@ -141,7 +132,6 @@
   #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;
@@ -149,31 +139,26 @@
   #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);
@@ -184,20 +169,17 @@
       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; }
@@ -206,6 +188,11 @@
   @media (max-width: 400px) {
     .frames-row { grid-template-columns: 1fr; }
   }
+  #put-last-frame { margin-top:8px; padding:8px 12px; border:1px solid var(--edge-hi); border-radius:6px; background:var(--panel-2); color:var(--text); cursor:pointer; }
+  button:disabled { cursor:not-allowed !important; opacity:.45; }
+  [hidden] { display:none !important; }
+  .monitor video { max-height:calc(58vh - 140px); }
+  @media (max-width:860px) { .monitor video { max-height:32vh; } }
 </style>
 </head>
 <body>
@@ -229,7 +216,18 @@
       <div class="deck-label">Turbo LoRA</div>
       <select id="lora"></select>
     </div>
-    <label class="check"><input type="checkbox" id="upsample"> Upsample prompt</label>
+    <label class="check"><input type="checkbox" id="continue-scene" checked> Continue scene from last frame</label>
+    <div style="font-size:12px;color:var(--dim)">
+      When enabled, the final frame becomes the next First frame.
+      Generate continues and automatically stitches when enabled. Keep the same canvas.
+      The bottom button always generates a continuation and stitches it.
+      Stored in this tab's memory only; reloading closes the chain.
+      The next generation uploads the First frame to the model.
+    </div>
+    <div style="display:flex;flex-wrap:wrap;gap:10px;font-size:12px">
+      <a id="download-clip" download="h3-latest-clip.mp4" hidden style="color:var(--accent)">Download latest clip</a>
+      <button id="retry-local" type="button" hidden>Retry local processing (no generation)</button>
+    </div>
 
     <div>
       <div class="deck-label">Keyframes (optional)</div>
@@ -237,6 +235,7 @@
         <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>
+      <button id="put-last-frame" type="button" disabled>Put last frame for generation</button>
     </div>
 
     <details open>
@@ -247,25 +246,20 @@
           <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 class="slider-row"><span>Duration</span><output id="duration-out">14 s</output></div>
+          <input type="range" id="duration" min="2" max="14" step="1" value="14">
         </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 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 class="deck-label">Seed (randomized on every generation)</div>
+          <input type="number" id="seed" value="42" step="1" readonly title="A new random seed is chosen for every generation">
         </div>
       </div>
     </details>
 
-    <div>
-      <div class="deck-label">Examples</div>
-      <div class="examples" id="examples"></div>
-    </div>
-
     <button id="run">▶&nbsp; Generate</button>
   </aside>
 
@@ -288,6 +282,16 @@
     </div>
   </section>
 </main>
+<section id="stitched-panel" aria-label="Stitched video" style="flex:none;border-top:1px solid var(--edge);background:var(--panel);padding:10px 18px;max-height:42vh;overflow:auto">
+  <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px">
+    <b>Stitched video</b>
+    <button id="stitch-last" type="button" disabled style="padding:8px 12px;border:1px solid var(--edge-hi);border-radius:6px;background:var(--panel-2);color:var(--text);cursor:pointer">Stitch to last generated video</button>
+    <span id="chain-info" style="font-size:12px;color:var(--dim)" aria-live="polite">Generate a clip to enable continuation.</span>
+    <a id="download-video" hidden style="color:var(--accent);font-size:12px">Download stitched video</a>
+  </div>
+  <video id="stitched-video" controls playsinline hidden style="max-width:100%;max-height:29vh;margin:auto"></video>
+  <p style="font-size:11px;color:var(--dim)">This button uses the latest clip's final frame and the current prompt to generate a new clip, then automatically appends it. Refreshing discards local videos.</p>
+</section>
 
 <input type="file" id="file-first" accept="image/*" hidden>
 <input type="file" id="file-last" accept="image/*" hidden>
@@ -296,9 +300,250 @@
 // @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 };
+/* This code is inserted into index.html by build.py. No backend changes. */
+const LOCAL_LIMIT = 512 * 1024 * 1024;
+Object.assign(state, { chain: null, chainCount: 0, firstURL: null, lastURL: null,
+  videoURL: null, clipURL: null, retry: null });
+
+function setFrame(key, file, automatic = false) {
+  if (key === "first") state.firstAuto = automatic;
+  const dz = $(key === "first" ? "dz-first" : "dz-last");
+  const urlKey = key + "URL";
+  if (state[urlKey]) URL.revokeObjectURL(state[urlKey]);
+  dz.querySelectorAll("img").forEach(img => img.remove());
+  state[key] = file || null;
+  dz.classList.toggle("filled", !!file);
+  if (file) {
+    state[urlKey] = URL.createObjectURL(file);
+    const img = document.createElement("img");
+    img.src = state[urlKey]; img.alt = key + " frame";
+    dz.appendChild(img);
+  } else state[urlKey] = null;
+}
+
+function showLocalVideo(blob) {
+  const previousURL = state.videoURL;
+  state.videoURL = URL.createObjectURL(blob);
+  $("video").src = state.videoURL;
+  $("monitor").classList.remove("hidden-video");
+  $("placeholder").style.display = "none";
+  $("download-clip").href = state.videoURL;
+  $("download-clip").hidden = false;
+  if (previousURL) URL.revokeObjectURL(previousURL);
+}
+
+// A classic worker hosts the single-threaded WASM core directly. It needs no
+// SharedArrayBuffer / COOP / COEP headers and does not block the UI thread.
+function localVideoWorker() {
+  self.onmessage = async ({ data }) => {
+    const logs = [];
+    let coreURL, wasmURL;
+    try {
+      const base = "https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd";
+      const download = async (url, type) => {
+        const r = await fetch(url, { cache: "force-cache" });
+        if (!r.ok) throw new Error(`Cannot load FFmpeg (${r.status}).`);
+        return URL.createObjectURL(new Blob([await r.arrayBuffer()], { type }));
+      };
+      self.postMessage({ status: "Loading browser video tools…" });
+      [coreURL, wasmURL] = await Promise.all([
+        download(base + "/ffmpeg-core.js", "text/javascript"),
+        download(base + "/ffmpeg-core.wasm", "application/wasm"),
+      ]);
+      importScripts(coreURL);
+      const ff = await self.createFFmpegCore({
+        mainScriptUrlOrBlob: coreURL + "#" + btoa(JSON.stringify({ wasmURL })),
+      });
+      ff.setLogger(({ message }) => { logs.push(message); if (logs.length > 30) logs.shift(); });
+      const run = args => {
+        ff.setTimeout(240000);
+        ff.exec(...args);
+        const code = ff.ret;
+        ff.reset();
+        if (code !== 0) throw new Error("FFmpeg failed: " + logs.slice(-5).join(" "));
+      };
+      // WORKERFS reads the browser Blobs without copying all inputs into the
+      // WASM heap. All output files are in this worker's temporary RAM only.
+      ff.FS.mkdir("/input");
+      ff.FS.mount(ff.FS.filesystems.WORKERFS, { blobs: [
+        { name: "clip.mp4", data: data.clip },
+        ...(data.previous ? [{ name: "previous.mp4", data: data.previous }] : []),
+      ] }, "/input");
+
+      let frame = null;
+      if (data.extract) {
+      self.postMessage({ status: "Extracting the final frame locally…" });
+      // Reverse only the last second, then save its first frame: the decoded
+      // final frame, rather than an approximate seek into a <video> element.
+      run(["-sseof", "-1", "-i", "/input/clip.mp4", "-map", "0:v:0",
+        "-vf", "reverse", "-frames:v", "1", "-update", "1", "last.png"]);
+      frame = ff.FS.readFile("last.png");
+      }
+      let merged = null;
+      if (data.previous) {
+        self.postMessage({ status: "Stitching video and audio locally…" });
+        const probe = name => {
+          logs.length = 0;
+          ff.setTimeout(30000);
+          // An input-only ffmpeg invocation reports streams and exits with 1
+          // because no output was requested. Avoid mixing ffprobe and ffmpeg
+          // entry points in a single WASM instance.
+          ff.exec("-i", name);
+          ff.reset();
+          const streams = logs.filter(s => /Stream #.*(?:Video|Audio):/.test(s))
+            .map(s => s.match(/(?:Video|Audio): .*/)[0]
+              .replace(/,\s*[\d.]+ kb\/s/g, "").replace(/\s*\(default\)$/, ""));
+          if (!streams.some(s => s.startsWith("Video:"))) {
+            throw new Error("Cannot inspect video streams: " + logs.slice(-5).join(" "));
+          }
+          return JSON.stringify(streams);
+        };
+        if (probe("/input/previous.mp4") !== probe("/input/clip.mp4")) {
+          throw new Error("The clips have different video/audio formats. Keep the same canvas " +
+            "and frame aspect ratio, or uncheck Continue scene from last frame to start a new chain.");
+        }
+        ff.FS.writeFile("list.txt", "file '/input/previous.mp4'\nfile '/input/clip.mp4'\n");
+        // Remux both audio and video without repeatedly re-encoding the chain.
+        run(["-f", "concat", "-safe", "0", "-i", "list.txt", "-map", "0:v:0",
+          "-map", "0:a?", "-c", "copy", "-movflags", "+faststart", "joined.mp4"]);
+        merged = ff.FS.readFile("joined.mp4");
+      }
+      // Transfer independent byte buffers, never the WASM heap's backing store.
+      const frameBuffer = frame ? frame.slice().buffer : null;
+      const mergedBuffer = merged ? merged.slice().buffer : null;
+      self.postMessage({ ok: true, frame: frameBuffer, merged: mergedBuffer },
+        [frameBuffer, mergedBuffer].filter(Boolean));
+    } catch (error) {
+      self.postMessage({ error: String(error.message || error) });
+    } finally {
+      if (coreURL) URL.revokeObjectURL(coreURL);
+      if (wasmURL) URL.revokeObjectURL(wasmURL);
+    }
+  };
+}
+
+function processLocal(clip, previous, extract = true) {
+  if (clip.size + (previous?.size || 0) > LOCAL_LIMIT) {
+    throw new Error("This browser chain exceeds the 512 MiB processing limit. " +
+      "Download the current chain. Generating without stitching starts a new chain.");
+  }
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(new Blob([
+      "(" + localVideoWorker.toString() + ")();"
+    ], { type: "text/javascript" }));
+    const worker = new Worker(url);
+    const finish = (error, result) => {
+      clearTimeout(timeout); worker.terminate(); URL.revokeObjectURL(url);
+      if (error) reject(error); else resolve(result);
+    };
+    const timeout = setTimeout(() => finish(new Error("Local processing timed out. " +
+      "The existing chain is still available to download.")), 300000);
+    worker.onerror = e => finish(new Error(e.message || "Browser video worker failed."));
+    worker.onmessage = ({ data }) => {
+      if (data.status) { $("report").textContent = data.status; return; }
+      if (data.error) finish(new Error(data.error));
+      else if (data.ok) finish(null, data);
+    };
+    worker.postMessage({ clip, previous, extract });
+  });
+}
+
+function updateActions() {
+  $("run").disabled = state.busy;
+  $("put-last-frame").disabled = state.busy || !state.latest;
+  $("stitch-last").disabled = state.busy || !state.latest;
+  $("continue-scene").disabled = state.busy;
+  $("retry-local").disabled = state.busy;
+}
+
+async function putLastFrame(automatic = false) {
+  if (!state.latest) throw new Error("Generate a video first.");
+  if (!state.latestFrame) {
+    const result = await processLocal(state.latest, null);
+    state.latestFrame = new File([result.frame], "h3-last-frame.png", { type: "image/png" });
+  }
+  setFrame("first", state.latestFrame, automatic);
+  $("file-first").value = "";
+}
+
+async function finishClip(task) {
+  setJob("LOCAL"); setBar(null);
+  const result = task.continueScene ? await processLocal(task.clip, task.previous) : null;
+  if (result) {
+    state.latestFrame = new File([result.frame], "h3-last-frame.png", { type: "image/png" });
+    setFrame("first", state.latestFrame, true);
+    $("file-first").value = "";
+  }
+  if (result?.merged) {
+    const merged = new Blob([result.merged], { type: "video/mp4" });
+    const count = task.previousCount + 1;
+    const old = state.mergedURL;
+    state.mergedURL = URL.createObjectURL(merged);
+    $("stitched-video").src = state.mergedURL;
+    $("stitched-video").hidden = false;
+    $("download-video").href = state.mergedURL;
+    $("download-video").download = `h3-chain-${count}-clips.mp4`;
+    $("download-video").hidden = false;
+    if (old) URL.revokeObjectURL(old);
+    state.chain = merged; state.chainCount = count;
+    $("chain-info").textContent = `${count} clips · ${(merged.size / 1048576).toFixed(1)} MiB · this tab only`;
+  }
+  $("report").textContent = `${task.report || ""}` +
+    (result ? " · final frame → First frame" : "") +
+    (result?.merged ? ` · ${state.chainCount} clips stitched locally` : "");
+  state.retry = null; $("retry-local").hidden = true;
+  setJob("DONE", "done"); setBar(100);
+}
+
+$("put-last-frame").addEventListener("click", async () => {
+  if (state.busy || !state.latest) return;
+  state.busy = true; updateActions(); setJob("LOCAL"); setBar(null);
+  try {
+    await putLastFrame();
+    $("report").textContent = "Last frame placed into First frame. No video was generated.";
+    setJob("READY", "done"); setBar(100);
+  } catch (e) {
+    setJob("LOCAL FAILED", "failed"); setBar(0); $("report").textContent = e.message;
+  } finally { state.busy = false; updateActions(); }
+});
+
+$("retry-local").addEventListener("click", async () => {
+  if (state.busy || !state.retry) return;
+  state.busy = true; updateActions();
+  try { await finishClip(state.retry); }
+  catch (e) { setJob("LOCAL FAILED", "failed"); setBar(0); $("report").textContent = e.message; }
+  finally { state.busy = false; updateActions(); }
+});
+
+$("continue-scene").addEventListener("change", () => {
+  if (!$("continue-scene").checked && state.firstAuto) {
+    setFrame("first", null); $("file-first").value = "";
+  }
+});
+
+$("stitch-last").addEventListener("click", () => {
+  if (state.busy || !state.latest) return;
+  state.forceContinue = true;
+  $("run").click();
+});
+
+async function acceptGeneratedVideo(videoUrl, report) {
+  setJob("LOCAL"); setBar(null);
+  $("report").textContent = "Downloading the generated clip into this browser tab…";
+  const response = await fetch(videoUrl);
+  if (!response.ok) throw new Error(`Cannot download generated clip (${response.status}).`);
+  const clip = new Blob([await response.arrayBuffer()], { type: "video/mp4" });
+  if (!clip.size) throw new Error("The generated video is empty.");
+  showLocalVideo(clip);
+  const task = { clip, previous: state.generationPrevious,
+    previousCount: state.generationPreviousCount, report, continueScene: state.continueThisRun };
+  state.latest = clip; state.latestFrame = null;
+  state.chain = clip; state.chainCount = 1;
+  state.retry = task; $("retry-local").hidden = false;
+  await finishClip(task);
+}
 
 /* ---- config + status ---- */
 fetch("/studio-config").then(r => r.json()).then(cfg => {
@@ -306,11 +551,10 @@ fetch("/studio-config").then(r => r.json()).then(cfg => {
   for (const label of cfg.canvases) {
     const o = document.createElement("option");
     o.value = o.textContent = label;
-    if (label === cfg.default_canvas) o.selected = true;
+    if (label === "544x544 · 1:1 fast") 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");
@@ -326,7 +570,6 @@ fetch("/studio-config").then(r => r.json()).then(cfg => {
     if (spec && spec.steps) { $("steps").value = spec.steps; $("steps-out").textContent = spec.steps; }
   });
 });
-
 async function pollStatus() {
   try {
     const s = await (await fetch("/status")).json();
@@ -339,27 +582,22 @@ async function pollStatus() {
   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");
+    if (state.busy || !file) return;
+    if (!file.type.startsWith("image/")) return;
+    setFrame(key, file);
   };
   dz.addEventListener("click", (e) => {
+    if (state.busy) return;
     if (e.target.classList.contains("clear")) {
-      state[key] = null; dz.classList.remove("filled");
-      dz.querySelector("img")?.remove(); input.value = "";
+      setFrame(key, null); input.value = "";
     } else input.click();
   });
   input.addEventListener("change", () => set(input.files[0]));
@@ -369,51 +607,41 @@ function wireDropzone(dzId, inputId, key) {
 }
 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; }
-
+  // Uniform unsigned 32-bit seed; stored in the field before the request.
+  let newSeed;
+  do { newSeed = crypto.getRandomValues(new Uint32Array(1))[0]; }
+  while (newSeed === Number($("seed").value));
+  $("seed").value = String(newSeed);
+  state.continueThisRun = !!state.forceContinue || $("continue-scene").checked;
+  state.forceContinue = false;
+  state.generationPrevious = state.continueThisRun ? state.chain : null;
+  state.generationPreviousCount = state.chainCount;
+  state.retry = null; $("retry-local").hidden = true;
   state.busy = true;
-  $("run").disabled = true;
+  updateActions();
   $("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 {
+    if (state.continueThisRun && state.latest) await putLastFrame(true);
     const submission = client.submit("/generate", {
       prompt,
       image_path: state.first ? handle_file(state.first) : null,
@@ -422,7 +650,7 @@ $("run").addEventListener("click", async () => {
       duration: Number($("duration").value),
       steps: Number($("steps").value),
       seed: Number($("seed").value),
-      upsample: $("upsample").checked,
+      upsample: false,
       lora: $("lora").value,
     });
     let data = null;
@@ -453,10 +681,7 @@ $("run").addEventListener("click", async () => {
     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;
+    await acceptGeneratedVideo(videoUrl, report);
     if (refined) {
       $("refined").textContent = refined;
       $("refined-bar").style.display = "block";
@@ -464,13 +689,13 @@ $("run").addEventListener("click", async () => {
     setJob("DONE", "done");
     setBar(100);
   } catch (e) {
-    setJob("FAILED", "failed");
+    setJob(state.retry ? "LOCAL FAILED" : "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;
+    updateActions();
   }
 });
 </script>