feat: add clear button, SSE progress tracking, multi-session support

- Add trash button in header to clear state and return to upload
- Add real-time progress bar via SSE with tqdm interception
- Per-session progress queues to prevent cross-talk between users
- Fix temp file naming to avoid concurrent conflicts
- Support near/far params in render_proj_aligned_video

app.py

@@ -204,7 +204,8 @@ def pack_state(shape_slat, tex_slat, res):
         'coords': shape_slat.coords.cpu().numpy(),
         'res': res,
     }
-    state_path = os.path.join(TMP_DIR, f"state_{int(time.time()*1000)}.npz")
+    import random
+    state_path = os.path.join(TMP_DIR, f"state_{int(time.time()*1000)}_{random.randint(0,9999):04d}.npz")
     np.savez_compressed(state_path, **state_data)
     return state_path
 
@@ -217,6 +218,77 @@ def unpack_state(state_path):
     tex_slat = shape_slat.replace(torch.from_numpy(data['tex_slat_feats']).cuda())
     return shape_slat, tex_slat, int(data['res'])
 
+# ============================================================================
+# Progress Tracking (SSE-based, tqdm interception, multi-session)
+# ============================================================================
+
+import asyncio
+import queue
+from fastapi.responses import StreamingResponse
+from fastapi import Request
+
+# Per-session progress queues
+_progress_queues: Dict[str, queue.Queue] = {}
+_active_session: str = ""  # Which session is currently running GPU work
+
+def _reset_progress(session_id: str):
+    global _active_session
+    _active_session = session_id
+    if session_id not in _progress_queues:
+        _progress_queues[session_id] = queue.Queue()
+    # Drain old items
+    q = _progress_queues[session_id]
+    while not q.empty():
+        try:
+            q.get_nowait()
+        except:
+            break
+
+def _update_progress(stage: str, step: int, total: int):
+    data = {"stage": stage, "step": step, "total": total, "done": False}
+    session_id = _active_session
+    if session_id and session_id in _progress_queues:
+        try:
+            _progress_queues[session_id].put_nowait(data)
+        except:
+            pass
+
+def _finish_progress():
+    session_id = _active_session
+    if session_id and session_id in _progress_queues:
+        try:
+            _progress_queues[session_id].put_nowait({"done": True})
+        except:
+            pass
+        # Schedule cleanup after a short delay (let SSE client receive the done signal)
+        def _cleanup():
+            time.sleep(5)
+            _progress_queues.pop(session_id, None)
+        threading.Thread(target=_cleanup, daemon=True).start()
+
+# Monkey-patch tqdm to intercept progress
+import tqdm as _tqdm_module
+
+_original_tqdm = _tqdm_module.tqdm
+
+class _TqdmProgressInterceptor(_original_tqdm):
+    """Wraps tqdm to push progress updates to SSE."""
+    def __init__(self, *args, **kwargs):
+        self._stage_desc = kwargs.get('desc', 'Processing')
+        super().__init__(*args, **kwargs)
+    
+    def update(self, n=1):
+        super().update(n)
+        _update_progress(self._stage_desc, self.n, self.total or 0)
+
+# Patch tqdm globally
+_tqdm_module.tqdm = _TqdmProgressInterceptor
+# Also patch the direct import in the sampler module and render_utils
+import trellis2.pipelines.samplers.flow_euler as _fe_module
+_fe_module.tqdm = _TqdmProgressInterceptor
+import trellis2.utils.render_utils as _ru_module
+_ru_module.tqdm = _TqdmProgressInterceptor
+
 # ============================================================================
 # API Implementation
 # ============================================================================
@@ -229,6 +301,36 @@ async def homepage():
     with open(html_path, "r", encoding="utf-8") as f:
         return HTMLResponse(content=f.read())
 
+@app.get("/progress")
+async def progress_sse(request: Request):
+    """SSE endpoint for real-time progress updates during generation."""
+    session_id = request.query_params.get("session_id", "")
+    if session_id and session_id not in _progress_queues:
+        _progress_queues[session_id] = queue.Queue()
+    
+    async def event_stream():
+        q = _progress_queues.get(session_id)
+        timeout_count = 0
+        while True:
+            if q:
+                try:
+                    data = q.get_nowait()
+                    yield f"data: {json.dumps(data)}\n\n"
+                    if data.get("done"):
+                        break
+                    timeout_count = 0
+                except queue.Empty:
+                    yield f": keepalive\n\n"
+                    timeout_count += 1
+            else:
+                yield f": keepalive\n\n"
+                timeout_count += 1
+            # Timeout after 5 minutes of no data
+            if timeout_count > 1000:
+                break
+            await asyncio.sleep(0.3)
+    return StreamingResponse(event_stream(), media_type="text/event-stream")
+
 @app.api()
 def preprocess(image: FileData) -> FileData:
     init_models()
@@ -256,14 +358,18 @@ def generate_3d(
     tex_slat_guidance_rescale: float = 0.0,
     tex_slat_sampling_steps: int = 12,
     tex_slat_rescale_t: float = 3.0,
+    session_id: str = "",
 ) -> Dict:
     init_models()
+    _reset_progress(session_id)
+    _update_progress("Preprocessing & Camera Estimation", 0, 1)
+    
     torch.manual_seed(seed)
     hr_resolution = int(resolution)
     
     img = Image.open(image["path"])
     image_preprocessed = pipeline.preprocess_image(img)
-    temp_processed_path = os.path.join(TMP_DIR, "temp_proc.png")
+    temp_processed_path = os.path.join(TMP_DIR, f"temp_proc_{session_id[:8]}_{int(time.time()*1000)}.png")
     image_preprocessed.save(temp_processed_path)
     
     camera_params = get_camera_params_wild_moge(
@@ -271,6 +377,7 @@ def generate_3d(
         mesh_scale=WILD_MESH_SCALE, extend_pixel=WILD_EXTEND_PIXEL,
         image_resolution=WILD_IMAGE_RESOLUTION,
     )
+    _update_progress("Preprocessing & Camera Estimation", 1, 1)
     
     ss_sampler_override = {"steps": ss_sampling_steps, "guidance_strength": ss_guidance_strength,
                            "guidance_rescale": ss_guidance_rescale, "rescale_t": ss_rescale_t}
@@ -296,12 +403,18 @@ def generate_3d(
     mesh = mesh_list[0]
     state_path = pack_state(shape_slat, tex_slat, res)
     
+    _update_progress("Rendering views", 0, 1)
     mesh.simplify(16777216)
+    cam_dist = camera_params['distance']
+    near = max(0.01, cam_dist - 2.0)
+    far = cam_dist + 10.0
     renders = render_utils.render_proj_aligned_video(
         mesh, camera_angle_x=camera_params['camera_angle_x'],
-        distance=camera_params['distance'], resolution=1024,
+        distance=cam_dist, resolution=1024,
         num_frames=STEPS, envmap=envmap,
+        near=near, far=far,
     )
+    _update_progress("Rendering views", 1, 1)
     
     # Save renders and return paths
     render_files = {}
@@ -313,6 +426,7 @@ def generate_3d(
             mode_files.append(FileData(path=p))
         render_files[mode_key] = mode_files
 
+    _finish_progress()
     return {
         "render_paths": render_files,
         "state_path": os.path.abspath(state_path)
@@ -320,10 +434,16 @@ def generate_3d(
 
 @app.api()
 @spaces.GPU(duration=240)
-def extract_glb_api(state_path: str, decimation_target: int, texture_size: int) -> FileData:
+def extract_glb_api(state_path: str, decimation_target: int, texture_size: int, session_id: str = "") -> FileData:
     init_models()
+    _reset_progress(session_id)
+    _update_progress("Decoding latent", 0, 1)
+    
     shape_slat, tex_slat, res = unpack_state(state_path)
     mesh = pipeline.decode_latent(shape_slat, tex_slat, res)[0]
+    _update_progress("Decoding latent", 1, 1)
+    
+    _update_progress("Extracting GLB mesh", 0, 1)
     glb = o_voxel.postprocess.to_glb(
         vertices=mesh.vertices, faces=mesh.faces, attr_volume=mesh.attrs,
         coords=mesh.coords, attr_layout=pipeline.pbr_attr_layout,
@@ -341,6 +461,7 @@ def extract_glb_api(state_path: str, decimation_target: int, texture_size: int)
     
     out_glb = os.path.join(TMP_DIR, f"result_{int(time.time()*1000)}.glb")
     glb.export(out_glb, extension_webp=True)
+    _finish_progress()
     return FileData(path=out_glb)
 
 # Mount assets and tmp for direct access

index.html

@@ -548,9 +548,9 @@
 
             <div class="sidebar-section" style="margin-bottom: 1.5rem;">
                 <p style="font-size: 0.82rem; color: var(--text-dim); line-height: 1.6;">
-                    Upload an image and click Generate.<br>
-                    Click Extract GLB to export.<br>
-                    Download the generated GLB file.
+                    1. Upload an image and click Generate.<br>
+                    2. Click Extract GLB to export.<br>
+                    3. Download the generated GLB file.
                 </p>
                 <p style="font-size: 0.72rem; color: var(--text-dim); line-height: 1.5; margin-top: 0.5rem; opacity: 0.7;">
                     Note: Camera estimated automatically via MoGe-2.
@@ -651,9 +651,9 @@
                         <span>3. RESULT</span>
                     </div>
                 </div>
-                <div style="color: var(--text-dim); font-size: 0.8rem; font-weight: 500;">
-                    Pixal3D V1.1
-                </div>
+                <button class="btn btn-outline" id="clear-btn" title="Clear all & restart" style="width: 34px; height: 34px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; border-color: rgba(248,113,113,0.3);">
+                    <i data-lucide="trash-2" style="width: 16px; height: 16px; color: #f87171;"></i>
+                </button>
             </header>
 
             <div class="workspace">
@@ -716,9 +716,21 @@
 
     <div class="loading-overlay" id="loading-overlay">
         <div class="loader-ring"></div>
-        <div style="text-align: center;">
-            <h2 id="loading-title" style="font-family: 'Outfit'; margin-bottom: 0.5rem;">Synthesizing Geometry</h2>
-            <p id="loading-subtitle" style="color: var(--text-dim);">The neural engine is crafting your 3D model...</p>
+        <div style="text-align: center; width: 100%; max-width: 500px; padding: 0 2rem;">
+            <!-- Progress stages -->
+            <div id="progress-stages" style="display: none; text-align: left;">
+                <div class="progress-stage" id="progress-stage-item" style="margin-bottom: 1rem;">
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem;">
+                        <span id="progress-stage-name" style="font-size: 0.85rem; font-weight: 600; color: var(--primary);">Initializing...</span>
+                        <span id="progress-step-text" style="font-size: 0.75rem; color: var(--text-dim); font-family: monospace;">0/0</span>
+                    </div>
+                    <div style="width: 100%; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden;">
+                        <div id="progress-bar-fill" style="width: 0%; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 3px; transition: width 0.3s ease;"></div>
+                    </div>
+                </div>
+                <!-- Stage history log -->
+                <div id="progress-log" style="font-size: 0.75rem; color: var(--text-dim); line-height: 1.8; max-height: 180px; overflow-y: auto; margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--border);"></div>
+            </div>
         </div>
     </div>
 
@@ -736,6 +748,7 @@
         let generationResult = null;
         let currentMode = "shaded_forest";
         let currentFrame = 0;
+        const sessionId = crypto.randomUUID();
         let currentStep = 1;
 
         const MODES = [
@@ -782,6 +795,52 @@
                 link.click();
             };
 
+            // Clear button
+            document.getElementById('clear-btn').onclick = () => {
+                // Reset state
+                currentFile = null;
+                generationResult = null;
+                currentFrame = 0;
+                currentMode = "shaded_forest";
+
+                // Reset source preview
+                document.getElementById('source-preview').src = '';
+                document.getElementById('source-preview').style.display = 'none';
+                document.getElementById('upload-hint').style.display = 'flex';
+                document.getElementById('file-input').value = '';
+
+                // Reset generate button
+                document.getElementById('generate-btn').disabled = true;
+
+                // Reset preview frames
+                document.getElementById('frame-container').innerHTML = '';
+                document.getElementById('angle-slider').value = 0;
+                document.getElementById('angle-display').textContent = '00';
+
+                // Reset 3D viewer
+                document.getElementById('main-3d-viewer').removeAttribute('src');
+
+                // Reset thumbnails
+                document.getElementById('ref-thumb-2').style.display = 'none';
+                document.getElementById('ref-thumb-2').src = '';
+                document.getElementById('ref-thumb-3').style.display = 'none';
+                document.getElementById('ref-thumb-3').src = '';
+
+                // Reset mode tabs
+                document.querySelectorAll('.mode-tab').forEach(t => {
+                    t.classList.toggle('active', t.textContent === 'Forest');
+                });
+
+                // Go back to step 1
+                setStep(1);
+                showToast("Cleared. Ready for new upload.");
+            };
+
+            // Step navigation click
+            document.getElementById('step-1').onclick = () => setStep(1);
+            document.getElementById('step-2').onclick = () => { if (generationResult) setStep(2); };
+            document.getElementById('step-3').onclick = () => { if (document.getElementById('main-3d-viewer').src) setStep(3); };
+
             // Slider
             document.getElementById('angle-slider').oninput = (e) => {
                 currentFrame = parseInt(e.target.value);
@@ -815,19 +874,24 @@
                 img.style.display = 'block';
                 hint.style.display = 'none';
                 document.getElementById('generate-btn').disabled = false;
-                // Update reference thumbnails
-                const thumb2 = document.getElementById('ref-thumb-2');
-                const thumb3 = document.getElementById('ref-thumb-3');
-                thumb2.src = e.target.result;
-                thumb2.style.display = 'block';
-                thumb3.src = e.target.result;
-                thumb3.style.display = 'block';
                 setStep(1);
             };
             reader.readAsDataURL(file);
             
-            // Background pre-warm
-            client.predict("/preprocess", { image: handle_file(file) }).catch(console.error);
+            // Call preprocess and update with segmented result
+            try {
+                const result = await client.predict("/preprocess", { image: handle_file(file) });
+                const processedUrl = result.data[0].url;
+                if (processedUrl) {
+                    document.getElementById('source-preview').src = processedUrl;
+                    document.getElementById('ref-thumb-2').src = processedUrl;
+                    document.getElementById('ref-thumb-2').style.display = 'block';
+                    document.getElementById('ref-thumb-3').src = processedUrl;
+                    document.getElementById('ref-thumb-3').style.display = 'block';
+                }
+            } catch (err) {
+                console.error("Preprocess failed:", err);
+            }
         }
 
         function setStep(num) {
@@ -850,7 +914,8 @@
         async function startGeneration() {
             if (!currentFile) return;
 
-            showLoading("Neural Synthesis", "Optimizing geometry for " + (document.getElementById('resolution').value) + "px output...");
+            showLoading();
+            startProgressListener();
             try {
                 const params = {
                     image: handle_file(currentFile),
@@ -858,23 +923,89 @@
                     resolution: parseInt(document.getElementById('resolution').value),
                     ss_guidance_strength: parseFloat(document.getElementById('ss_gs').value),
                     ss_sampling_steps: parseInt(document.getElementById('ss_steps').value),
-                    shape_slat_guidance_strength: parseFloat(document.getElementById('shape_gs').value)
+                    shape_slat_guidance_strength: parseFloat(document.getElementById('shape_gs').value),
+                    session_id: sessionId
                 };
 
                 const result = await client.predict("/generate_3d", params);
                 generationResult = result.data[0];
                 
+                stopProgressListener();
                 populateFrames(generationResult.render_paths);
                 setStep(2);
                 hideLoading();
                 showToast("Generation complete!");
             } catch (err) {
                 console.error(err);
+                stopProgressListener();
                 hideLoading();
                 showToast("An error occurred during synthesis.");
             }
         }
 
+        // SSE Progress Listener
+        let progressEventSource = null;
+        let lastStageName = "";
+        
+        function startProgressListener() {
+            // Show progress UI
+            document.getElementById('progress-stages').style.display = 'block';
+            document.getElementById('progress-log').innerHTML = '';
+            document.getElementById('progress-stage-name').textContent = 'Initializing...';
+            document.getElementById('progress-step-text').textContent = '';
+            document.getElementById('progress-bar-fill').style.width = '0%';
+            lastStageName = "";
+
+            progressEventSource = new EventSource(`/progress?session_id=${sessionId}`);
+            progressEventSource.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data);
+                    if (data.done) {
+                        stopProgressListener();
+                        return;
+                    }
+                    updateProgressUI(data);
+                } catch (e) {}
+            };
+            progressEventSource.onerror = () => {
+                // Silently ignore SSE errors, generation continues
+            };
+        }
+
+        function stopProgressListener() {
+            if (progressEventSource) {
+                progressEventSource.close();
+                progressEventSource = null;
+            }
+        }
+
+        function updateProgressUI(data) {
+            const stageName = data.stage || '';
+            const step = data.step || 0;
+            const total = data.total || 0;
+
+            // If stage changed, log the previous one as completed
+            if (stageName && stageName !== lastStageName) {
+                if (lastStageName) {
+                    const logEl = document.getElementById('progress-log');
+                    logEl.innerHTML += `<div style="display:flex;align-items:center;gap:0.4rem;"><span style="color:var(--accent);">✓</span> ${lastStageName}</div>`;
+                    logEl.scrollTop = logEl.scrollHeight;
+                }
+                lastStageName = stageName;
+            }
+
+            // Update current stage display
+            document.getElementById('progress-stage-name').textContent = stageName;
+            if (total > 0) {
+                document.getElementById('progress-step-text').textContent = `${step}/${total}`;
+                const pct = Math.min(100, (step / total) * 100);
+                document.getElementById('progress-bar-fill').style.width = pct + '%';
+            } else {
+                document.getElementById('progress-step-text').textContent = '';
+                document.getElementById('progress-bar-fill').style.width = '0%';
+            }
+        }
+
         function populateFrames(renderPaths) {
             const container = document.getElementById('frame-container');
             container.innerHTML = '';
@@ -912,17 +1043,20 @@
         async function startExtraction() {
             if (!generationResult) return;
 
-            showLoading("Finalizing Mesh", "Performing PBR texture baking and decimation...");
+            showLoading();
+            startProgressListener();
             try {
                 const params = {
                     state_path: generationResult.state_path,
                     decimation_target: parseInt(document.getElementById('decimation').value),
-                    texture_size: 4096 // Constant for highest quality
+                    texture_size: 4096,
+                    session_id: sessionId
                 };
 
                 const result = await client.predict("/extract_glb_api", params);
                 const glbUrl = result.data[0].url;
 
+                stopProgressListener();
                 const viewer = document.getElementById('main-3d-viewer');
                 viewer.src = glbUrl;
                 setStep(3);
@@ -930,6 +1064,7 @@
                 showToast("3D Asset ready!");
             } catch (err) {
                 console.error(err);
+                stopProgressListener();
                 hideLoading();
                 showToast("Extraction failed.");
             }
@@ -951,7 +1086,7 @@
                 div.className = 'example-item';
                 div.innerHTML = `<img src="${path}">`;
                 div.onclick = async () => {
-                    showLoading("Fetching Sample", "Loading high-resolution asset from gallery...");
+                    showLoading();
                     const res = await fetch(path);
                     const blob = await res.blob();
                     const file = new File([blob], "sample.webp", { type: "image/webp" });
@@ -998,14 +1133,15 @@
             document.getElementById('seed-display').textContent = s;
         };
 
-        function showLoading(title, sub) {
-            document.getElementById('loading-title').textContent = title;
-            document.getElementById('loading-subtitle').textContent = sub;
+        function showLoading() {
             document.getElementById('loading-overlay').style.display = 'flex';
         }
 
         function hideLoading() {
             document.getElementById('loading-overlay').style.display = 'none';
+            document.getElementById('progress-stages').style.display = 'none';
+            document.getElementById('progress-log').innerHTML = '';
+            document.getElementById('progress-bar-fill').style.width = '0%';
         }
 
         function showToast(msg) {

trellis2/utils/render_utils.py

@@ -198,8 +198,14 @@ def render_proj_aligned_video(sample, camera_angle_x, distance, resolution=1024,
         extrinsics_list.append(extr_rotated)
         intrinsics_list.append(intr_first)
     
+    render_options = {'resolution': resolution, 'bg_color': bg_color}
+    if 'near' in kwargs:
+        render_options['near'] = kwargs.pop('near')
+    if 'far' in kwargs:
+        render_options['far'] = kwargs.pop('far')
+    
     return render_frames(sample, extrinsics_list, intrinsics_list,
-                         {'resolution': resolution, 'bg_color': bg_color}, **kwargs)
+                         render_options, **kwargs)
 
 
 def make_pbr_vis_frames(result, resolution=1024):