add examples.

app_gradio.py

@@ -440,7 +440,7 @@ def process_generation_request(data, generation_system, cache_dir):
 
         splat_path = os.path.join(cache_dir, f'{file_id}.spz')
 
-        export_gaussians(splat_path, scene_params, opacity_threshold=0.001, T_norm=T_norm)
+        export_gaussians(splat_path, scene_params, opacity_threshold=0.00025, T_norm=T_norm)
 
         if not os.path.exists(splat_path):
             return {'error': f'{splat_path} not found'}

index.html

@@ -404,6 +404,52 @@
             position: relative !important;
             z-index: 1000 !important;
         }
+
+        /* Examples gallery */
+        .examples-section {
+            margin-top: 16px;
+            padding-top: 12px;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .examples-section h3 {
+            margin: 0 0 8px 0;
+            color: #ffffff;
+            font-size: 1em;
+        }
+        .examples-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 8px;
+        }
+        .example-item {
+            position: relative;
+            width: 100%;
+            padding-top: 100%;
+            background: rgba(255,255,255,0.06);
+            border: 1px solid rgba(255,255,255,0.12);
+            border-radius: 6px;
+            overflow: hidden;
+            cursor: pointer;
+            transition: transform 0.15s ease, box-shadow 0.15s ease;
+        }
+        .example-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 16px rgba(0,0,0,0.35);
+        }
+        .example-item img {
+            position: absolute;
+            top: 0; left: 0; right: 0; bottom: 0;
+            width: 100%; height: 100%; object-fit: cover;
+        }
+        .example-item .label {
+            position: absolute;
+            bottom: 0; left: 0; right: 0;
+            background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
+            color: #e5e7eb;
+            font-size: 11px;
+            padding: 4px 6px;
+            text-align: center;
+        }
         
         @media (max-width: 1200px) {
             .left-panel {
@@ -502,6 +548,12 @@
                     </div>
 
                 </div>
+
+                <!-- Examples Gallery -->
+                <div id="examples-section" class="examples-section">
+                    <h3>Examples</h3>
+                    <div id="examples-grid" class="examples-grid"></div>
+                </div>
             </div>
 
             <!-- Center Panel: Canvas -->
@@ -967,6 +1019,46 @@
     },
     imageIndex: 0,
     inputTextPrompt: "",
+    // Step 6: All-in-one JSON IO
+    LoadAllFromJson: () => {
+      // Full load (image/text/index/resolution/cameras)
+      window.loadTrajectoryOnly = false;
+      const jsonInput = document.querySelector("#json-input");
+      if (jsonInput) jsonInput.click();
+    },
+    SaveAllToJson: () => {
+      // Build JSON payload matching transmission format
+      const [nStr, hStr, wStr] = guiOptions.Resolution.split('x');
+      const n = parseInt(nStr), h = parseInt(hStr), w = parseInt(wStr);
+      const fovDeg = guiOptions.FOV;
+      const fy = 0.5 / Math.tan(0.5 * fovDeg * Math.PI / 180) * h;
+      const fx = fy; // keep fx consistent with fy-derived FOV
+      const cx = 0.5 * w;
+      const cy = 0.5 * h;
+
+      const payload = {
+        image_prompt: inputImageBase64 ? inputImageBase64 : null,
+        text_prompt: guiOptions.inputTextPrompt || "",
+        image_index: guiOptions.imageIndex || 0,
+        resolution: [n, h, w],
+        cameras: cameraParams.map(cam => ({
+          position: [cam.position.x, cam.position.y, cam.position.z],
+          quaternion: [cam.quaternion.w, cam.quaternion.x, cam.quaternion.y, cam.quaternion.z],
+          fx, fy, cx, cy
+        }))
+      };
+
+      const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `scene_all_${Date.now()}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      updateStatus('All data saved to JSON.', cameraParams.length);
+    },
     
     // Camera trajectory templates
     trajectoryMode: "Manual",
@@ -1238,6 +1330,194 @@
     }
   };
 
+  // =========================
+  // Examples & JSON load utils
+  // =========================
+  const EXAMPLE_FILES = Array.from({ length: 8 }, (_, i) => `examples/${i + 1}.json`);
+
+  function processJsonLoad(jsonData, loadTrajectoryOnlyProvided) {
+    // Determine mode and reset flag if coming from global
+    const loadTrajectoryOnly = !!loadTrajectoryOnlyProvided;
+
+    // Clear existing cameras and interpolated splats
+    cameraSplats.forEach(splat => scene.remove(splat));
+    cameraSplats.length = 0;
+    cameraParams.length = 0;
+    interpolatedCamerasSplats.forEach(splat => scene.remove(splat));
+    interpolatedCamerasSplats.length = 0;
+
+    try {
+      const imagePrompt = jsonData.image_prompt || jsonData.imagePrompt || null;
+      const textPrompt = jsonData.text_prompt || jsonData.textPrompt || "";
+      const cameras = jsonData.cameras || [];
+      const resolution = jsonData.resolution || [16, 480, 640];
+      const imageIndex = jsonData.image_index || jsonData.imageIndex || 0;
+
+      // Prompt/image only for full load
+      if (!loadTrajectoryOnly && imagePrompt) {
+        inputImageBase64 = imagePrompt;
+        const previewArea = document.getElementById('image-preview-area');
+        const previewImg = document.getElementById('preview-img');
+        if (previewImg && previewArea) {
+          previewImg.src = inputImageBase64;
+          previewArea.style.display = 'block';
+        }
+      }
+
+      if (!loadTrajectoryOnly) {
+        guiOptions.inputTextPrompt = textPrompt;
+        guiOptions.imageIndex = imageIndex;
+        syncGuiPromptControls();
+      }
+
+      // Infer FOV from first camera fy for full load
+      if (!loadTrajectoryOnly && Array.isArray(resolution) && resolution.length === 3 && cameras && cameras.length > 0) {
+        const H = resolution[1];
+        const firstCam = cameras[0];
+        if (firstCam && typeof firstCam.fy === 'number' && isFinite(firstCam.fy) && firstCam.fy > 0) {
+          const inferredFov = 2 * Math.atan(0.5 * H / firstCam.fy) * 180 / Math.PI;
+          guiOptions.FOV = inferredFov;
+        }
+      }
+
+      if (cameras && cameras.length > 0) {
+        let jsonFirstPosition = null;
+        let jsonFirstQuaternion = null;
+        const firstCameraData = cameras[0];
+        if (Array.isArray(firstCameraData?.position) && firstCameraData.position.length === 3) {
+          jsonFirstPosition = new THREE.Vector3(
+            firstCameraData.position[0],
+            firstCameraData.position[1],
+            firstCameraData.position[2]
+          );
+        }
+        if (Array.isArray(firstCameraData?.quaternion) && firstCameraData.quaternion.length === 4) {
+          jsonFirstQuaternion = new THREE.Quaternion(
+            firstCameraData.quaternion[1],
+            firstCameraData.quaternion[2],
+            firstCameraData.quaternion[3],
+            firstCameraData.quaternion[0]
+          );
+        }
+
+        cameras.forEach((cameraData) => {
+          let aspect = 1.0;
+          if (Array.isArray(resolution) && resolution.length === 3) {
+            aspect = resolution[2] / resolution[1];
+          } else {
+            aspect = guiOptions.Resolution.split('x')[2] / guiOptions.Resolution.split('x')[1];
+          }
+
+          let fov = 60;
+          if (loadTrajectoryOnly) {
+            fov = guiOptions.FOV;
+          } else {
+            if (Array.isArray(resolution) && resolution.length === 3 && typeof cameraData.fy === 'number' && cameraData.fy > 0) {
+              const H = resolution[1];
+              fov = 2 * Math.atan(0.5 * H / cameraData.fy) * 180 / Math.PI;
+              guiOptions.FOV = fov;
+            } else {
+              fov = guiOptions.FOV;
+            }
+          }
+
+          const cam = new THREE.PerspectiveCamera(fov, aspect);
+          if (Array.isArray(cameraData.position) && cameraData.position.length === 3) {
+            cam.position.set(cameraData.position[0], cameraData.position[1], cameraData.position[2]);
+          }
+          if (Array.isArray(cameraData.quaternion) && cameraData.quaternion.length === 4) {
+            cam.quaternion.set(
+              cameraData.quaternion[1],
+              cameraData.quaternion[2],
+              cameraData.quaternion[3],
+              cameraData.quaternion[0]
+            );
+          }
+
+          if (jsonFirstPosition && jsonFirstQuaternion) {
+            const jsonFirstC2W = new THREE.Matrix4();
+            jsonFirstC2W.compose(jsonFirstPosition, jsonFirstQuaternion, new THREE.Vector3(1, 1, 1));
+            const currentC2W = new THREE.Matrix4();
+            currentC2W.compose(cam.position, cam.quaternion, new THREE.Vector3(1, 1, 1));
+            const refW2C = jsonFirstC2W.clone().invert();
+            const relativeTransform = refW2C.clone().multiply(currentC2W);
+            const fixedC2W = new THREE.Matrix4();
+            fixedC2W.compose(new THREE.Vector3(0, 0, 0), new THREE.Quaternion(0, 0, 0, 1), new THREE.Vector3(1, 1, 1));
+            const newTransform = fixedC2W.clone().multiply(relativeTransform);
+            const newPosition = new THREE.Vector3();
+            const newQuaternion = new THREE.Quaternion();
+            const newScale = new THREE.Vector3();
+            newTransform.decompose(newPosition, newQuaternion, newScale);
+            cam.position.copy(newPosition);
+            cam.quaternion.copy(newQuaternion);
+          }
+
+          cam.fov = fov;
+          cam.aspect = aspect;
+          cam.updateProjectionMatrix();
+
+          const cameraSplat = createCameraSplat(cam);
+          cameraSplats.push(cameraSplat);
+          cameraParams.push({
+            position: cam.position.clone(),
+            quaternion: cam.quaternion.clone(),
+            fov: cam.fov,
+            aspect: cam.aspect,
+          });
+          scene.add(cameraSplat);
+        });
+      }
+
+      if (!loadTrajectoryOnly && Array.isArray(resolution) && resolution.length === 3) {
+        guiOptions.Resolution = `${resolution[0]}x${resolution[1]}x${resolution[2]}`;
+      }
+
+      if (loadTrajectoryOnly) {
+        updateStatus(`Trajectory loaded: ${jsonData.cameras ? jsonData.cameras.length : 0} cameras`, cameraParams.length);
+      } else {
+        updateStatus(`JSON loaded: ${jsonData.cameras ? jsonData.cameras.length : 0} cameras`, cameraParams.length);
+      }
+    } catch (error) {
+      console.error("JSON data processing error:", error);
+    }
+  }
+
+  async function renderExamples() {
+    const grid = document.getElementById('examples-grid');
+    if (!grid) return;
+    grid.innerHTML = '';
+    const items = [];
+    for (const path of EXAMPLE_FILES) {
+      try {
+        const resp = await fetch(path);
+        if (!resp.ok) continue;
+        const data = await resp.json();
+        const thumb = data.image_prompt || data.imagePrompt || null;
+        items.push({ path, data, thumb });
+      } catch (_) { /* ignore */ }
+    }
+    items.slice(0, 10).forEach((item, idx) => {
+      const div = document.createElement('div');
+      div.className = 'example-item';
+      div.title = item.path;
+      if (item.thumb) {
+        const img = document.createElement('img');
+        img.src = item.thumb;
+        div.appendChild(img);
+      } else {
+        const label = document.createElement('div');
+        label.className = 'label';
+        label.textContent = `Example ${idx + 1}`;
+        div.appendChild(label);
+      }
+      div.addEventListener('click', () => {
+        // Full JSON load behavior
+        processJsonLoad(item.data, false);
+      });
+      grid.appendChild(div);
+    });
+  }
+
   // Initialize renderer and GUI when DOM is ready
   function initializeApp() {
     try {
@@ -1256,9 +1536,10 @@
   }
   
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initializeApp);
+    document.addEventListener('DOMContentLoaded', () => { initializeApp(); renderExamples(); });
   } else {
     initializeApp();
+    renderExamples();
   }
 
   // =========================
@@ -1316,6 +1597,37 @@
     return interpolatedCameras;
   }
 
+  // 强制同步文本与索引控件显示
+  function syncGuiPromptControls() {
+    try {
+      if (window.inputTextPromptController) {
+        window.inputTextPromptController.setValue(guiOptions.inputTextPrompt);
+        if (typeof window.inputTextPromptController.updateDisplay === 'function') {
+          window.inputTextPromptController.updateDisplay();
+        }
+      }
+      if (window.imageIndexController) {
+        window.imageIndexController.setValue(guiOptions.imageIndex);
+        if (typeof window.imageIndexController.updateDisplay === 'function') {
+          window.imageIndexController.updateDisplay();
+        }
+      }
+    } catch (e) {
+      console.debug('syncGuiPromptControls error:', e);
+    }
+    // 再尝试一次，防止控件尚未就绪
+    requestAnimationFrame(() => {
+      try {
+        if (window.inputTextPromptController && typeof window.inputTextPromptController.updateDisplay === 'function') {
+          window.inputTextPromptController.updateDisplay();
+        }
+        if (window.imageIndexController && typeof window.imageIndexController.updateDisplay === 'function') {
+          window.imageIndexController.updateDisplay();
+        }
+      } catch (_) {}
+    });
+  }
+
   // 创建立方体的splat可视化
   function createCubeSplat(size = 0.1, pointColor = [1, 1, 1]) {
     const cubeSplat = new SplatMesh({
@@ -1617,6 +1929,9 @@
       )).name("Resolution (NxHxW)").onChange((value) => {
         updateCanvasSize();
       });
+      // Expose for programmatic updates after JSON load
+      window.fovController = fovController;
+      window.resolutionController = resolutionController;
       
       // Fix Configuration按钮放在最下面
       const fixGenerationFOVController = step1Folder.add(guiOptions, "fixGenerationFOV").name("Fix Configuration");
@@ -1726,8 +2041,11 @@
       // Step 3: Add Scene Prompts
       const step3Folder = gui.addFolder('3. Add Scene Prompts');
       step3Folder.add(guiOptions, "inputImagePrompt").name("Input Image Prompt");
-      step3Folder.add(guiOptions, "inputTextPrompt").name("Input Text Prompt");
-      step3Folder.add(guiOptions, "imageIndex", 0, 24, 1).name("Image Index");
+      const inputTextPromptController = step3Folder.add(guiOptions, "inputTextPrompt").name("Input Text Prompt");
+      const imageIndexController = step3Folder.add(guiOptions, "imageIndex", 0, 24, 1).name("Image Index");
+      // Expose for programmatic updates after JSON load
+      window.inputTextPromptController = inputTextPromptController;
+      window.imageIndexController = imageIndexController;
       
 
       // Step 4: Generate Your Scene
@@ -1750,6 +2068,12 @@
         updateStatus(`Scrubbing trajectory: t=${value.toFixed(3)}`, cameraParams.length);
       });
       step5Folder.open();
+
+      // Step 6: Load/Save All JSON
+      const step6Folder = gui.addFolder('6. JSON (All-in-one)');
+      step6Folder.add(guiOptions, "LoadAllFromJson").name("Load All from JSON");
+      step6Folder.add(guiOptions, "SaveAllToJson").name("Save All to JSON");
+      step6Folder.open();
       
     }
   }
@@ -1950,196 +2274,9 @@
         console.error("JSON parsing error:", error);
         return;
       }
-
-      // 检查是否是只加载轨迹
-      const loadTrajectoryOnly = window.loadTrajectoryOnly;
-      window.loadTrajectoryOnly = false; // 重置标志
-
-      if (loadTrajectoryOnly) {
-        // 只加载轨迹：清理所有已有的相机和插值相机
-        cameraSplats.forEach(splat => scene.remove(splat));
-        cameraSplats.length = 0;
-        cameraParams.length = 0;
-        interpolatedCamerasSplats.forEach(splat => scene.remove(splat));
-        interpolatedCamerasSplats.length = 0;
-      } else {
-        // 加载完整JSON：清理所有已有的相机和插值相机
-        cameraSplats.forEach(splat => scene.remove(splat));
-        cameraSplats.length = 0;
-        cameraParams.length = 0;
-        interpolatedCamerasSplats.forEach(splat => scene.remove(splat));
-        interpolatedCamerasSplats.length = 0;
-      }
-
-      try {
-        // 兼容不同命名的字段
-        const imagePrompt = jsonData.image_prompt || jsonData.imagePrompt || null;
-        const textPrompt = jsonData.text_prompt || jsonData.textPrompt || "";
-        const cameras = jsonData.cameras || [];
-        const resolution = jsonData.resolution || [16, 480, 640];
-        const imageIndex = jsonData.image_index || jsonData.imageIndex || 0;
-
-        console.log("Loaded JSON data:", {
-          imagePrompt,
-          textPrompt,
-          cameras: cameras.length,
-          resolution,
-          imageIndex
-        });
-
-        // 处理图像提示（仅在非轨迹加载模式下）
-        if (!loadTrajectoryOnly && imagePrompt) {
-          inputImageBase64 = imagePrompt;
-          console.log("Image prompt loaded");
-        }
-
-        // 设置文本提示（仅在非轨迹加载模式下）
-        if (!loadTrajectoryOnly) {
-          guiOptions.inputTextPrompt = textPrompt;
-          guiOptions.imageIndex = imageIndex;
-        }
-
-        // 处理相机数据
-        if (cameras && cameras.length > 0) {
-          let jsonFirstCamera = null;
-          let jsonFirstPosition = null;
-          let jsonFirstQuaternion = null;
-          
-          // 首先获取JSON中第一个相机的位置和四元数
-          if (loadTrajectoryOnly && cameras.length > 0) {
-            const firstCameraData = cameras[0];
-            if (Array.isArray(firstCameraData.position) && firstCameraData.position.length === 3) {
-              jsonFirstPosition = new THREE.Vector3(
-                firstCameraData.position[0],
-                firstCameraData.position[1],
-                firstCameraData.position[2]
-              );
-            }
-            if (Array.isArray(firstCameraData.quaternion) && firstCameraData.quaternion.length === 4) {
-              jsonFirstQuaternion = new THREE.Quaternion(
-                firstCameraData.quaternion[1],
-                firstCameraData.quaternion[2],
-                firstCameraData.quaternion[3],
-                firstCameraData.quaternion[0]
-              );
-            }
-          }
-          
-          cameras.forEach((cameraData, index) => {
-            // 解析分辨率
-            let aspect = 1.0;
-            if (Array.isArray(resolution) && resolution.length === 3) {
-              aspect = resolution[2] / resolution[1];
-            } else {
-              aspect = guiOptions.Resolution.split('x')[2] / guiOptions.Resolution.split('x')[1];
-            }
-            
-            // 根据加载模式决定FOV
-            let fov = 60;
-            if (loadTrajectoryOnly) {
-              // 轨迹加载：使用GUI中设定的FOV
-              fov = guiOptions.FOV;
-            } else {
-              // 完整JSON加载：使用JSON中的FOV或默认值
-              if (cameraData.fx && cameraData.fy) {
-                fov = 2 * Math.atan(0.5 / cameraData.fx) * 180 / Math.PI;
-              }
-            }
-            
-            const cam = new THREE.PerspectiveCamera(fov, aspect);
-
-            // 设置位置和四元数
-            if (Array.isArray(cameraData.position) && cameraData.position.length === 3) {
-              cam.position.set(cameraData.position[0], cameraData.position[1], cameraData.position[2]);
-            }
-
-            if (Array.isArray(cameraData.quaternion) && cameraData.quaternion.length === 4) {
-              // 注意：three.js的顺序是 (x, y, z, w)
-              cam.quaternion.set(
-                cameraData.quaternion[1],
-                cameraData.quaternion[2],
-                cameraData.quaternion[3],
-                cameraData.quaternion[0]
-              );
-            }
-            
-            // 轨迹加载：第一个相机强制设置为原点
-            // if (loadTrajectoryOnly && index === 0) {
-            //   cam.position.set(0, 0, 0);
-            //   cam.quaternion.set(0, 0, 0, 1);
-            // }
-
-            // 轨迹加载：归一化到相对于固定FOV相机的位置
-            if (loadTrajectoryOnly && jsonFirstPosition && jsonFirstQuaternion) {
-              // 参考Python代码的归���化逻辑
-              // 1. 计算JSON第一个相机的c2w矩阵
-              const jsonFirstC2W = new THREE.Matrix4();
-              jsonFirstC2W.compose(jsonFirstPosition, jsonFirstQuaternion, new THREE.Vector3(1, 1, 1));
-              
-              // 2. 计算当前相机的c2w矩阵
-              const currentC2W = new THREE.Matrix4();
-              currentC2W.compose(cam.position, cam.quaternion, new THREE.Vector3(1, 1, 1));
-              
-              // 3. 计算相对变换：ref_w2c @ current_c2w
-              const refW2C = jsonFirstC2W.clone().invert();
-              const relativeTransform = refW2C.clone().multiply(currentC2W);
-              
-              // 4. 将相对变换应用到原点相机上（作为参考）
-              const fixedC2W = new THREE.Matrix4();
-              fixedC2W.compose(new THREE.Vector3(0, 0, 0), new THREE.Quaternion(0, 0, 0, 1), new THREE.Vector3(1, 1, 1));
-              
-              const newTransform = fixedC2W.clone().multiply(relativeTransform);
-              
-              // 5. 提取新的位置和旋转
-              const newPosition = new THREE.Vector3();
-              const newQuaternion = new THREE.Quaternion();
-              const newScale = new THREE.Vector3();
-              newTransform.decompose(newPosition, newQuaternion, newScale);
-              
-              cam.position.copy(newPosition);
-              cam.quaternion.copy(newQuaternion);
-            }
-
-            // 设置FOV和焦距（仅在非轨迹加载模式下）
-            if (!loadTrajectoryOnly && cameraData.fx && cameraData.fy) {
-              cam.fov = fov;
-              cam.aspect = cameraData.fx / cameraData.fy;
-              cam.updateProjectionMatrix();
-            } else if (loadTrajectoryOnly) {
-              // 轨迹加载：使用GUI中设定的FOV和aspect
-              cam.fov = fov;
-              cam.aspect = aspect;
-              cam.updateProjectionMatrix();
-            }
-
-            const cameraSplat = createCameraSplat(cam);
-            cameraSplats.push(cameraSplat);
-            cameraParams.push({
-              position: cam.position.clone(),
-              quaternion: cam.quaternion.clone(),
-              fov: cam.fov,
-              aspect: cam.aspect,
-            });
-            scene.add(cameraSplat);
-          });
-          
-          console.log(cameraParams);
-        }
-
-        // 设置分辨率（仅在非轨迹加载模式下）
-        if (!loadTrajectoryOnly && Array.isArray(resolution) && resolution.length === 3) {
-          guiOptions.Resolution = `${resolution[0]}x${resolution[1]}x${resolution[2]}`;
-        }
-
-        // 显示成功消息
-        if (loadTrajectoryOnly) {
-          updateStatus(`Trajectory loaded: ${cameras.length} cameras`, cameraParams.length);
-        } else {
-          updateStatus(`JSON loaded: ${cameras.length} cameras`, cameraParams.length);
-        }
-      } catch (error) {
-        console.error("JSON data processing error:", error);
-      }
+      const loadTrajectoryOnly = !!window.loadTrajectoryOnly;
+      window.loadTrajectoryOnly = false;
+      processJsonLoad(jsonData, loadTrajectoryOnly);
     };
     reader.readAsText(file);
   };