Add live sampling progress bar to the web UI

Stream per-step sampling progress from the generate endpoint to the
custom frontend so users see a live progress bar during generation.

- app.py: report progress via a gr.Progress() tracker created inside
generate(). It is created in the function body rather than as a
parameter because @app .api() derives its input schema from the
signature and would otherwise treat `progress` as a required input.
The bar tracks the sampling loop only: pre-sampling stages report 0%
and post-sampling (decode/save) report 100%.
- index.html: switch generate() from client.predict() to client.submit()
and connect with events:["data","status"] so progress (status) events
actually reach the stream (the client default is ["data"] only); render
a progress overlay inside the viewer.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app.py

@@ -13,6 +13,7 @@ import spaces
 import torch
 from PIL import Image
 from fastapi.responses import HTMLResponse, FileResponse, JSONResponse
+import gradio as gr
 from gradio import Server
 from gradio.data_classes import FileData
 
@@ -119,27 +120,51 @@ async def get_example(idx: int):
 
 @spaces.GPU
 def _run_pipeline(pil_image, seed, steps, guidance_scale, num_gaussians,
-                  out_dir, output_format):
+                  out_dir, output_format, progress=None):
     """Run the full pipeline (preprocess → encode → sample → decode → save)
     in a single GPU acquisition.
 
     All file I/O happens here so the unpicklable Gaussian object never
     crosses the ZeroGPU multiprocessing boundary.
+
+    ``progress`` is an optional ``gradio.Progress`` tracker. When supplied,
+    the bar tracks the sampling loop only: stages before sampling (preprocess,
+    encode) report 0% and stages after it (decode, save) report 100%, so the
+    bar fills 0% → 100% across the sampling steps via a per-step callback.
     """
+    def _report(frac, desc):
+        if progress is not None:
+            progress(frac, desc=desc)
+
     t0 = time.time()
+
+    _report(0.0, "Preprocessing image")
     prepared = PIPE.preprocess_image(pil_image)
+
+    _report(0.0, "Encoding image")
     gen = torch.Generator(device=PIPE._device).manual_seed(int(seed))
     cond = PIPE.encode_image(prepared, generator=gen)
+
+    total_steps = int(steps)
+
+    def _on_step(step, total):
+        _report(step / total, f"Sampling · step {step}/{total}")
+
     out = PIPE.sample_latent(
         cond,
-        steps=int(steps),
+        steps=total_steps,
         guidance_scale=float(guidance_scale),
         generator=gen,
         show_progress=True,
+        callback=_on_step,
     )
+
+    _report(1.0, "Decoding gaussians")
     gaussian = PIPE.decode_latent(out["latent"], num_gaussians=int(num_gaussians))
     gen_dt = time.time() - t0
 
+    _report(1.0, "Saving output")
+
     # Save preprocessed image
     prep_path = out_dir / "preprocessed.png"
     prepared.save(str(prep_path))
@@ -158,6 +183,8 @@ def _run_pipeline(pil_image, seed, steps, guidance_scale, num_gaussians,
 
     n_gaussians = gaussian.get_xyz.shape[0]
 
+    _report(1.0, "Done")
+
     # Return only picklable primitives / paths
     return str(prep_path), str(ply_path), str(download_path), n_gaussians, gen_dt
 
@@ -179,15 +206,23 @@ def generate(
 
     Returns (preprocessed_image, ply_file, download_file, info_string).
     The frontend receives these as result.data[0..3].
+
+    Sampling progress is streamed to the client over Gradio's SSE queue via a
+    ``gr.Progress`` tracker. The tracker is created inside the function body
+    (rather than declared as a parameter) because ``@app.api()`` derives the
+    endpoint's input schema from the signature and would otherwise treat a
+    ``progress`` parameter as a required API input.
     """
     pil_image = Image.open(image["path"]).convert("RGBA")
 
+    progress = gr.Progress()
+
     out_dir = OUT_ROOT / uuid4().hex[:12]
     out_dir.mkdir(parents=True, exist_ok=True)
 
     prep_path, ply_path, download_path, n_gaussians, gen_dt = _run_pipeline(
         pil_image, seed, steps, guidance_scale, num_gaussians,
-        out_dir, output_format,
+        out_dir, output_format, progress=progress,
     )
 
     info = (

index.html

@@ -588,6 +588,68 @@ input[type="range"]::-moz-range-thumb {
   letter-spacing: 0.3px;
 }
 
+/* ======================================================================
+   GENERATION PROGRESS OVERLAY (inside the viewer)
+   ====================================================================== */
+.gen-progress {
+  position: absolute;
+  inset: 0;
+  z-index: 6;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 0 48px;
+  background: rgba(8, 9, 13, 0.62);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+.gen-progress-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  letter-spacing: 0.2px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.gen-progress-track {
+  width: 100%;
+  max-width: 340px;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 3px;
+  overflow: hidden;
+  position: relative;
+}
+.gen-progress-fill {
+  height: 100%;
+  width: 0%;
+  border-radius: 3px;
+  background: linear-gradient(90deg, #ff9c6e, #ff4d4f);
+  box-shadow: 0 0 12px var(--accent-glow);
+  transition: width 0.3s ease;
+}
+/* Indeterminate state: a sliding sliver while we await the first update. */
+.gen-progress-fill.indeterminate {
+  width: 35% !important;
+  position: absolute;
+  left: 0;
+  animation: indeterminateSlide 1.1s ease-in-out infinite;
+  transition: none;
+}
+@keyframes indeterminateSlide {
+  0%   { transform: translateX(-110%); }
+  100% { transform: translateX(310%); }
+}
+.gen-progress-pct {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--accent);
+  font-variant-numeric: tabular-nums;
+  min-height: 14px;
+}
+
 /* ======================================================================
    OUTPUT PANEL
    ====================================================================== */
@@ -899,6 +961,13 @@ input[type="range"]::-moz-range-thumb {
         <p class="hint">Upload an image and click Generate</p>
       </div>
       <iframe id="viewer-iframe" class="hidden" allowfullscreen></iframe>
+      <div class="gen-progress hidden" id="gen-progress">
+        <div class="gen-progress-label" id="gen-progress-label">Starting…</div>
+        <div class="gen-progress-track">
+          <div class="gen-progress-fill" id="gen-progress-fill"></div>
+        </div>
+        <div class="gen-progress-pct" id="gen-progress-pct"></div>
+      </div>
     </div>
     <div class="viewer-bar">
       <span class="viewer-hint">drag to orbit &nbsp;·&nbsp; scroll to zoom &nbsp;·&nbsp; right-drag to pan</span>
@@ -987,7 +1056,9 @@ async function init() {
   updateStatus("connecting");
 
   try {
-    client = await Client.connect(window.location.origin);
+    // Subscribe to "status" events too (default is ["data"] only) so the
+    // submit() iterator delivers gr.Progress() updates, not just the result.
+    client = await Client.connect(window.location.origin, { events: ["data", "status"] });
     updateStatus("connected");
   } catch (e) {
     updateStatus("error", e.message);
@@ -1140,9 +1211,12 @@ async function generate() {
   $("generate-label").textContent = "Generating…";
   $("generate-icon").classList.add("hidden");
   $("generate-spinner").classList.remove("hidden");
+  showProgress();
 
   try {
-    const result = await client.predict("/generate", {
+    // Use submit() (not predict()) so we can stream the server-side
+    // gr.Progress() updates that arrive as "status" events.
+    const submission = client.submit("/generate", {
       image: handle_file(currentFile),
       seed: parseInt($("seed").value) || 42,
       steps: parseInt($("steps").value) || 20,
@@ -1151,6 +1225,30 @@ async function generate() {
       output_format: $("format").value || "ply",
     });
 
+    let result = null;
+    for await (const msg of submission) {
+      if (msg.type === "status") {
+        if (msg.stage === "error") {
+          throw new Error(msg.message || "Generation failed.");
+        }
+        const pd = msg.progress_data || (msg.status && msg.status.progress_data);
+        if (pd && pd.length) {
+          const p = pd[pd.length - 1];
+          let frac = null;
+          if (typeof p.progress === "number") {
+            frac = p.progress;
+          } else if (typeof p.index === "number" && p.length) {
+            frac = p.index / p.length;
+          }
+          updateProgress(frac, p.desc);
+        }
+      } else if (msg.type === "data") {
+        result = msg;
+      }
+    }
+
+    if (!result) throw new Error("No result returned from server.");
+    updateProgress(1, "Done");
     showResults(result);
   } catch (error) {
     console.error("Generation failed:", error);
@@ -1162,9 +1260,40 @@ async function generate() {
     $("generate-label").textContent = "Generate";
     $("generate-icon").classList.remove("hidden");
     $("generate-spinner").classList.add("hidden");
+    hideProgress();
   }
 }
 
+// --------------------------------------------------------------------------
+// Sampling progress overlay
+// --------------------------------------------------------------------------
+function showProgress() {
+  $("gen-progress").classList.remove("hidden");
+  updateProgress(null, "Starting…");
+}
+
+function updateProgress(frac, desc) {
+  const fill = $("gen-progress-fill");
+  const pct = $("gen-progress-pct");
+  if (desc) $("gen-progress-label").textContent = desc;
+
+  if (frac == null || isNaN(frac)) {
+    // Unknown progress → indeterminate animation.
+    fill.classList.add("indeterminate");
+    fill.style.width = "";
+    pct.textContent = "";
+  } else {
+    fill.classList.remove("indeterminate");
+    const clamped = Math.max(0, Math.min(1, frac));
+    fill.style.width = (clamped * 100).toFixed(0) + "%";
+    pct.textContent = (clamped * 100).toFixed(0) + "%";
+  }
+}
+
+function hideProgress() {
+  $("gen-progress").classList.add("hidden");
+}
+
 // --------------------------------------------------------------------------
 // Display results
 // --------------------------------------------------------------------------