Improve camera capture and scene controls

INSTALL.md

@@ -27,6 +27,13 @@ uv pip install torch==2.9.0 torchvision==0.24.0 xformers==0.0.33.post1 --index-u
 uv pip install -r requirements.txt
 ```
 
+For development and tests, install the test dependencies instead:
+
+```bash
+uv pip install -r requirements-dev.txt
+python -m pytest
+```
+
 ### 3) Optional output dependencies
 
 PLY export works without the dependencies in this section.

README.md

@@ -116,7 +116,7 @@ See [docs/inference.md](docs/inference.md) for camera parameters, output control
 
 ## 🖥️ Web Demo
 
-The local Gradio demo accepts uploaded images or landscape/portrait photos captured from your webcam, with an option to process exactly the visible camera frame. It also provides RGB reconstruction, staged PLY and standalone HTML downloads, and an interactive Gaussian viewer. After preparing the inference environment, launch it with:
+The local Gradio demo accepts uploaded images or high-resolution landscape/portrait photos captured from a selectable webcam, with an option to process exactly the visible camera frame. It also provides RGB reconstruction, staged PLY and standalone HTML downloads, an interactive Gaussian viewer with camera-distance controls, and an optional world-Z translation for exported scenes. After preparing the inference environment, launch it with:
 
 ```bash
 python demo.py

app.py

@@ -3,6 +3,7 @@ from __future__ import annotations
 import asyncio
 import contextlib
 import json
+import math
 import os
 import shutil
 import time
@@ -237,14 +238,20 @@ def reconstruct(image: FileData) -> dict[str, str | int]:
     concurrency_id="infinisplat-export",
     time_limit=180,
 )
-def export_ply(request_id: str) -> dict[str, str | int]:
+def export_ply(request_id: str, z_offset: float = 0.0) -> dict[str, str | int]:
     """Export the reconstructed scene as a filtered Gaussian PLY."""
+    if not math.isfinite(z_offset) or abs(z_offset) > 100:
+        raise ValueError("The export Z offset must be between -100 and 100.")
     request_dir = _request_dir(request_id)
     artifact = request_dir / "gaussians.pt"
     if not artifact.is_file():
         raise FileNotFoundError("The reconstruction artifact is unavailable.")
     started_at = time.perf_counter()
-    scene_ply = export_filtered_gaussian_ply(artifact_path=artifact, output_dir=request_dir)
+    scene_ply = export_filtered_gaussian_ply(
+        artifact_path=artifact,
+        output_dir=request_dir,
+        z_offset=z_offset,
+    )
     artifact.unlink()
     _log_timing("ply_export", request_dir, started_at, ply_bytes=scene_ply.stat().st_size)
     return {"url": _file_url(scene_ply), "size": scene_ply.stat().st_size}

requirements-dev.txt

@@ -0,0 +1,8 @@
+-r requirements.txt
+
+# Hugging Face injects these into the hosted Space; local tests need them explicitly.
+gradio==6.20.0
+spaces
+
+# Test runner
+pytest>=8,<10

src/demo/hf_runtime.py

@@ -326,10 +326,14 @@ def create_request_viewer(
 def export_filtered_gaussian_ply(
     artifact_path: Path,
     output_dir: Path,
+    z_offset: float = 0.0,
 ) -> Path:
-    """Filter spatial outliers and export the resulting Gaussian PLY."""
+    """Filter spatial outliers, optionally translate Z, and export a Gaussian PLY."""
     artifact = load_gaussian_artifact(artifact_path)
     gaussians = filter_final_gaussian_floaters(artifact.gaussians)
+    if z_offset:
+        offset = gaussians.mean_vectors.new_tensor([0.0, 0.0, z_offset])
+        gaussians = gaussians._replace(mean_vectors=gaussians.mean_vectors + offset)
 
     output_dir.mkdir(parents=True, exist_ok=True)
     scene_ply = output_dir / "scene.ply"

src/demo/infer_single_image.py

@@ -862,7 +862,7 @@ def patch_supersplat_html_viewer_bridge(
     html_path: Path,
     viewer_script_path: Path | None = None,
 ) -> None:
-    """Report SuperSplat's first rendered frame to its embedding container."""
+    """Report viewer readiness and expose safe host camera controls."""
     source = html_path.read_text(encoding="utf-8")
     marker = "data-infinisplat-viewer-bridge"
     first_frame_hook = "window.firstFrame?.();"
@@ -876,6 +876,49 @@ def patch_supersplat_html_viewer_bridge(
             "Could not install the SuperSplat viewer bridge; the viewer bundle changed."
         )
 
+    if viewer_script_path is not None:
+        script_source = viewer_script_path.read_text(encoding="utf-8")
+        old_viewer_creation = """    // Create the viewer
+    return new Viewer(global, gsplatLoad, skyboxLoad, collisionLoad);"""
+        new_viewer_creation = """    // Create the viewer
+    const viewer = new Viewer(global, gsplatLoad, skyboxLoad, collisionLoad);
+    let infinisplatDistanceMultiplier = 1;
+    window.infinisplatViewerControls = {
+        setDistance(multiplier) {
+            const manager = viewer.cameraManager;
+            const nextMultiplier = Math.min(3, Math.max(0.25, Number(multiplier)));
+            if (!manager || !Number.isFinite(nextMultiplier)) return false;
+            const camera = manager.camera;
+            const focus = new Vec3();
+            camera.calcFocusPoint(focus);
+            const nextPosition = camera.position.clone()
+                .sub(focus)
+                .normalize()
+                .mulScalar(camera.distance * nextMultiplier / infinisplatDistanceMultiplier)
+                .add(focus);
+            global.state.cameraMode = 'orbit';
+            camera.look(nextPosition, focus);
+            manager.snap();
+            infinisplatDistanceMultiplier = nextMultiplier;
+            return true;
+        },
+        reset() {
+            global.events.fire('inputEvent', 'reset');
+            infinisplatDistanceMultiplier = 1;
+            return true;
+        }
+    };
+    return viewer;"""
+        if old_viewer_creation in script_source:
+            viewer_script_path.write_text(
+                script_source.replace(old_viewer_creation, new_viewer_creation, 1),
+                encoding="utf-8",
+            )
+        elif "window.infinisplatViewerControls" not in script_source:
+            raise RuntimeError(
+                "Could not install the SuperSplat camera controls; the viewer bundle changed."
+            )
+
     bridge = f"""
         <script {marker}>
             (() => {{
@@ -893,6 +936,16 @@ def patch_supersplat_html_viewer_bridge(
                 }};
 
                 window.firstFrame = () => setViewerState("ready");
+                window.addEventListener("message", (event) => {{
+                    if (event.source !== window.parent ||
+                        event.data?.type !== "infinisplat:viewer-control") return;
+                    const controls = window.infinisplatViewerControls;
+                    if (event.data.action === "distance") {{
+                        controls?.setDistance(event.data.multiplier);
+                    }} else if (event.data.action === "reset") {{
+                        controls?.reset();
+                    }}
+                }});
                 window.addEventListener("error", () => setViewerState("error"));
                 window.addEventListener(
                     "unhandledrejection",

src/demo/server_frontend/app.js

@@ -8,6 +8,7 @@ const cameraButton = document.getElementById("cameraButton");
 const cameraStage = document.getElementById("cameraStage");
 const cameraPreview = document.getElementById("cameraPreview");
 const cameraOptions = document.getElementById("cameraOptions");
+const cameraSelect = document.getElementById("cameraSelect");
 const cameraFormatInputs = document.querySelectorAll('input[name="cameraFormat"]');
 const cropToFrame = document.getElementById("cropToFrame");
 const cameraOutputSize = document.getElementById("cameraOutputSize");
@@ -20,6 +21,12 @@ const viewerFrame = document.getElementById("viewerFrame");
 const viewerPreloader = document.getElementById("viewerPreloader");
 const viewerTitle = document.getElementById("viewerTitle");
 const viewerDetail = document.getElementById("viewerDetail");
+const cameraDistance = document.getElementById("cameraDistance");
+const cameraDistanceValue = document.getElementById("cameraDistanceValue");
+const resetViewButton = document.getElementById("resetViewButton");
+const bakeZOffset = document.getElementById("bakeZOffset");
+const zOffset = document.getElementById("zOffset");
+const zOffsetValue = document.getElementById("zOffsetValue");
 const plyDownload = document.getElementById("plyDownload");
 const htmlDownload = document.getElementById("htmlDownload");
 const examplesGrid = document.getElementById("examplesGrid");
@@ -33,6 +40,10 @@ let previewUrl = null;
 let running = false;
 let toastTimer = null;
 let cameraStream = null;
+let imageCapture = null;
+let photoSettings = null;
+let cameraResolution = null;
+let selectedCameraDeviceId = "";
 const supportedImageTypes = new Set(["image/jpeg", "image/png", "image/webp"]);
 const cameraFormats = {
   landscape: { width: 1536, height: 1152 },
@@ -103,6 +114,21 @@ function setRunning(value) {
   reconstructButton.disabled = value || !selectedFile || !client;
   reconstructButton.textContent = value ? "Reconstructing..." : "Reconstruct scene";
   examplesGrid.toggleAttribute("inert", value);
+  bakeZOffset.disabled = value;
+  zOffset.disabled = value || !bakeZOffset.checked;
+}
+
+function sendViewerControl(action, detail = {}) {
+  viewerFrame.contentWindow?.postMessage(
+    { type: "infinisplat:viewer-control", action, ...detail },
+    "*",
+  );
+}
+
+function resetViewerControls(sendReset = false) {
+  cameraDistance.value = "100";
+  cameraDistanceValue.value = "100%";
+  if (sendReset) sendViewerControl("reset");
 }
 
 function selectFile(file, fromCamera = false) {
@@ -122,8 +148,12 @@ function selectFile(file, fromCamera = false) {
 }
 
 function stopCamera() {
-  for (const track of cameraStream?.getTracks() || []) track.stop();
+  const stream = cameraStream;
   cameraStream = null;
+  for (const track of stream?.getTracks() || []) track.stop();
+  imageCapture = null;
+  photoSettings = null;
+  cameraResolution = null;
   cameraPreview.srcObject = null;
   cameraStage.hidden = true;
   cameraOptions.hidden = true;
@@ -143,9 +173,111 @@ function updateCameraFrame() {
   const dimensions = cameraFormats[format];
   cameraStage.dataset.format = format;
   cameraStage.dataset.crop = cropToFrame.checked ? "frame" : "full";
+  const resolution = cameraResolution
+    ? `Camera: ${cameraResolution.width} × ${cameraResolution.height} · `
+    : "";
   cameraOutputSize.textContent = cropToFrame.checked
-    ? `Output crop: ${dimensions.width} × ${dimensions.height}`
-    : "Output: full camera image";
+    ? `${resolution}output crop: ${dimensions.width} × ${dimensions.height}`
+    : `${resolution}output: full camera image`;
+}
+
+async function prepareHighResolutionCapture(track) {
+  const settings = track.getSettings?.() || {};
+  if (settings.width && settings.height) {
+    cameraResolution = { width: settings.width, height: settings.height };
+  }
+
+  if (typeof ImageCapture === "undefined" || typeof createImageBitmap === "undefined") return;
+  try {
+    imageCapture = new ImageCapture(track);
+    const capabilities = await imageCapture.getPhotoCapabilities?.();
+    const maxWidth = capabilities?.imageWidth?.max;
+    const maxHeight = capabilities?.imageHeight?.max;
+    if (maxWidth && maxHeight) {
+      photoSettings = { imageWidth: maxWidth, imageHeight: maxHeight };
+      cameraResolution = { width: maxWidth, height: maxHeight };
+    }
+  } catch (error) {
+    console.warn("High-resolution still capture is unavailable; using the video stream.", error);
+    imageCapture = null;
+    photoSettings = null;
+  }
+}
+
+async function optimizeCameraTrack(track) {
+  const capabilities = track.getCapabilities?.() || {};
+  const advanced = {};
+  for (const mode of ["focusMode", "exposureMode", "whiteBalanceMode"]) {
+    if (capabilities[mode]?.includes?.("continuous")) advanced[mode] = "continuous";
+  }
+  if (!Object.keys(advanced).length) return;
+  try {
+    await track.applyConstraints({ advanced: [advanced] });
+  } catch (error) {
+    console.warn("The camera rejected continuous image-quality controls.", error);
+  }
+}
+
+async function acquireCameraImage() {
+  if (imageCapture) {
+    try {
+      let blob;
+      try {
+        blob = await imageCapture.takePhoto(photoSettings || undefined);
+      } catch (settingsError) {
+        console.warn("The maximum photo settings were rejected; retrying camera defaults.", settingsError);
+        blob = await imageCapture.takePhoto();
+      }
+      const bitmap = await createImageBitmap(blob);
+      return {
+        source: bitmap,
+        width: bitmap.width,
+        height: bitmap.height,
+        release: () => bitmap.close(),
+      };
+    } catch (error) {
+      console.warn("Still-photo capture failed; using the current video frame.", error);
+    }
+  }
+  return {
+    source: cameraPreview,
+    width: cameraPreview.videoWidth,
+    height: cameraPreview.videoHeight,
+    release: () => {},
+  };
+}
+
+async function refreshCameraDevices(activeDeviceId = "") {
+  const devices = (await navigator.mediaDevices.enumerateDevices())
+    .filter((device) => device.kind === "videoinput");
+  const availableIds = new Set(devices.map((device) => device.deviceId));
+  if (selectedCameraDeviceId && !availableIds.has(selectedCameraDeviceId)) {
+    selectedCameraDeviceId = "";
+  }
+
+  cameraSelect.replaceChildren();
+  const automaticOption = document.createElement("option");
+  automaticOption.value = "";
+  automaticOption.textContent = "Automatic";
+  cameraSelect.append(automaticOption);
+  devices.forEach((device, index) => {
+    const option = document.createElement("option");
+    option.value = device.deviceId;
+    option.textContent = device.label || `Camera ${index + 1}`;
+    cameraSelect.append(option);
+  });
+
+  const preferredId = selectedCameraDeviceId || activeDeviceId;
+  cameraSelect.value = availableIds.has(preferredId) ? preferredId : "";
+  cameraSelect.disabled = running || devices.length < 2;
+}
+
+async function switchCamera() {
+  if (running) return;
+  selectedCameraDeviceId = cameraSelect.value;
+  cameraSelect.disabled = true;
+  stopCamera();
+  await startCamera();
 }
 
 async function startCamera() {
@@ -156,12 +288,37 @@ async function startCamera() {
   }
 
   cameraButton.disabled = true;
+  cameraSelect.disabled = true;
   try {
+    const deviceConstraint = selectedCameraDeviceId
+      ? { deviceId: { exact: selectedCameraDeviceId } }
+      : { facingMode: { ideal: "environment" } };
     cameraStream = await navigator.mediaDevices.getUserMedia({
       audio: false,
-      video: { facingMode: { ideal: "environment" } },
+      video: {
+        ...deviceConstraint,
+        width: { ideal: 2560 },
+        height: { ideal: 1920 },
+        aspectRatio: { ideal: 4 / 3 },
+      },
     });
     cameraPreview.srcObject = cameraStream;
+    const videoTrack = cameraStream.getVideoTracks()[0];
+    videoTrack.addEventListener("ended", () => {
+      if (cameraStream && !running) {
+        selectedCameraDeviceId = "";
+        stopCamera();
+        showToast("The selected camera disconnected. Choose another camera to continue.", true);
+      }
+    });
+    await optimizeCameraTrack(videoTrack);
+    await prepareHighResolutionCapture(videoTrack);
+    try {
+      await refreshCameraDevices(videoTrack.getSettings?.().deviceId || "");
+    } catch (error) {
+      console.warn("Could not enumerate camera devices.", error);
+      cameraSelect.disabled = true;
+    }
     imagePreview.hidden = true;
     chooseImageButton.hidden = true;
     updateCameraFrame();
@@ -172,6 +329,9 @@ async function startCamera() {
     await cameraPreview.play();
   } catch (error) {
     console.error(error);
+    if (error?.name === "NotFoundError" || error?.name === "OverconstrainedError") {
+      selectedCameraDeviceId = "";
+    }
     stopCamera();
     const permissionDenied = error?.name === "NotAllowedError" || error?.name === "SecurityError";
     showToast(
@@ -182,19 +342,23 @@ async function startCamera() {
     );
   } finally {
     cameraButton.disabled = running || Boolean(cameraStream);
+    cameraSelect.disabled = running || cameraSelect.options.length < 3;
   }
 }
 
 async function capturePhoto() {
-  const sourceWidth = cameraPreview.videoWidth;
-  const sourceHeight = cameraPreview.videoHeight;
-  if (!cameraStream || !sourceWidth || !sourceHeight) {
+  if (!cameraStream || !cameraPreview.videoWidth || !cameraPreview.videoHeight) {
     showToast("The camera is still starting. Try again in a moment.", true);
     return;
   }
 
   captureButton.disabled = true;
+  let cameraImage = null;
   try {
+    cameraImage = await acquireCameraImage();
+    const sourceWidth = cameraImage.width;
+    const sourceHeight = cameraImage.height;
+    if (!sourceWidth || !sourceHeight) throw new Error("The camera returned an empty image.");
     const canvas = document.createElement("canvas");
     let sourceX = 0;
     let sourceY = 0;
@@ -221,8 +385,10 @@ async function capturePhoto() {
 
     const context = canvas.getContext("2d");
     if (!context) throw new Error("The browser could not create an image canvas.");
+    context.imageSmoothingEnabled = true;
+    context.imageSmoothingQuality = "high";
     context.drawImage(
-      cameraPreview,
+      cameraImage.source,
       sourceX,
       sourceY,
       cropWidth,
@@ -232,7 +398,16 @@ async function capturePhoto() {
       canvas.width,
       canvas.height,
     );
-    const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.92));
+    const inferenceDimensions = cropToFrame.checked
+      ? cameraFormats[selectedCameraFormat()]
+      : cameraFormats[sourceHeight > sourceWidth ? "portrait" : "landscape"];
+    if (cropWidth < inferenceDimensions.width || cropHeight < inferenceDimensions.height) {
+      showToast(
+        `Camera crop is ${Math.round(cropWidth)} × ${Math.round(cropHeight)} and will be enlarged; it may look soft.`,
+        true,
+      );
+    }
+    const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.95));
     if (!blob) throw new Error("The browser could not encode the captured photo.");
     stopCamera();
     selectFile(
@@ -243,6 +418,7 @@ async function capturePhoto() {
     console.error(error);
     showToast("Could not capture the photo. Please try again.", true);
   } finally {
+    cameraImage?.release();
     captureButton.disabled = false;
   }
 }
@@ -259,10 +435,22 @@ imagePreview.addEventListener("keydown", (event) => {
   }
 });
 cameraButton.addEventListener("click", startCamera);
+cameraSelect.addEventListener("change", switchCamera);
 cancelCameraButton.addEventListener("click", stopCamera);
 captureButton.addEventListener("click", capturePhoto);
 for (const input of cameraFormatInputs) input.addEventListener("change", updateCameraFrame);
 cropToFrame.addEventListener("change", updateCameraFrame);
+cameraDistance.addEventListener("input", () => {
+  cameraDistanceValue.value = `${cameraDistance.value}%`;
+  sendViewerControl("distance", { multiplier: Number(cameraDistance.value) / 100 });
+});
+resetViewButton.addEventListener("click", () => resetViewerControls(true));
+bakeZOffset.addEventListener("change", () => {
+  zOffset.disabled = running || !bakeZOffset.checked;
+});
+zOffset.addEventListener("input", () => {
+  zOffsetValue.value = Number(zOffset.value).toFixed(2);
+});
 window.addEventListener("pagehide", stopCamera);
 
 if (!navigator.mediaDevices?.getUserMedia) {
@@ -270,6 +458,13 @@ if (!navigator.mediaDevices?.getUserMedia) {
   cameraButton.title = "Camera access is not supported by this browser";
 }
 
+navigator.mediaDevices?.addEventListener?.("devicechange", () => {
+  if (cameraStream) {
+    refreshCameraDevices(cameraStream.getVideoTracks()[0]?.getSettings?.().deviceId || "")
+      .catch((error) => console.warn("Could not refresh the camera list.", error));
+  }
+});
+
 for (const eventName of ["dragenter", "dragover"]) {
   uploadSurface.addEventListener(eventName, (event) => {
     event.preventDefault();
@@ -295,6 +490,8 @@ window.addEventListener("message", (event) => {
   if (event.source !== viewerFrame.contentWindow || event.data?.type !== "infinisplat:viewer-state") return;
   if (event.data.state === "ready") {
     setViewerState("ready", "Viewer ready", "Interactive scene loaded");
+    cameraDistance.disabled = false;
+    resetViewButton.disabled = false;
   } else if (event.data.state === "error") {
     setViewerState("error", "Viewer initialization failed", "Check the browser console for details");
   } else if (event.data.state === "timeout") {
@@ -339,6 +536,9 @@ async function loadExamples() {
 async function runPipeline() {
   if (!selectedFile || !client || running) return;
   setRunning(true);
+  cameraDistance.disabled = true;
+  resetViewButton.disabled = true;
+  resetViewerControls();
   viewerFrame.removeAttribute("src");
   setDownload(plyDownload, null, "Preparing PLY...");
   setDownload(htmlDownload, null, "Preparing HTML viewer...");
@@ -352,7 +552,10 @@ async function runPipeline() {
 
     setViewerState("loading", "Preparing scene", "Creating the downloadable Gaussian PLY");
     const ply = resultValue(
-      await client.predict("/export_ply", { request_id: reconstruction.request_id }),
+      await client.predict("/export_ply", {
+        request_id: reconstruction.request_id,
+        z_offset: bakeZOffset.checked ? Number(zOffset.value) : 0,
+      }),
     );
     if (!ply?.url) throw new Error("The PLY export returned no file.");
     setDownload(plyDownload, ply.url, "Download PLY - Ready");

src/demo/server_frontend/index.html

@@ -13,7 +13,7 @@
         ? requestedTheme
         : (prefersDark ? "dark" : "light");
   </script>
-  <link rel="stylesheet" href="/infinisplat/assets/styles.css?v=6">
+  <link rel="stylesheet" href="/infinisplat/assets/styles.css?v=8">
 </head>
 <body>
   <main class="app-shell">
@@ -49,6 +49,12 @@
               <small>JPG, PNG, or WebP</small>
             </button>
             <div class="camera-options" id="cameraOptions" hidden>
+              <label class="camera-select-control">
+                <span>Camera</span>
+                <select id="cameraSelect" aria-label="Camera device">
+                  <option value="">Automatic</option>
+                </select>
+              </label>
               <fieldset class="format-control">
                 <legend>Camera format</legend>
                 <label>
@@ -94,6 +100,22 @@
             </div>
           </div>
         </div>
+        <div class="viewer-tools" aria-label="Viewer and export positioning">
+          <div class="viewer-tool-row">
+            <label for="cameraDistance">Camera distance</label>
+            <input id="cameraDistance" type="range" min="25" max="300" value="100" step="5" disabled>
+            <output id="cameraDistanceValue" for="cameraDistance">100%</output>
+            <button id="resetViewButton" type="button" disabled>Reset view</button>
+          </div>
+          <div class="viewer-tool-row export-z-row">
+            <label class="bake-z-control" title="Move every splat along the world Z axis before creating the PLY and HTML viewer">
+              <input id="bakeZOffset" type="checkbox">
+              <span>Bake Z offset into export</span>
+            </label>
+            <input id="zOffset" type="range" min="-2" max="2" value="0" step="0.05" disabled>
+            <output id="zOffsetValue" for="zOffset">0.00</output>
+          </div>
+        </div>
         <div class="download-bar">
           <a id="plyDownload" class="artifact-button disabled" aria-disabled="true">Download PLY</a>
           <a id="htmlDownload" class="artifact-button disabled" aria-disabled="true">Download HTML viewer</a>
@@ -111,6 +133,6 @@
   </main>
 
   <div class="toast" id="toast" role="status" aria-live="polite"></div>
-  <script type="module" src="/infinisplat/assets/app.js?v=7"></script>
+  <script type="module" src="/infinisplat/assets/app.js?v=10"></script>
 </body>
 </html>

src/demo/server_frontend/styles.css

@@ -336,6 +336,34 @@ button, input { font: inherit; }
   backdrop-filter: blur(8px);
 }
 
+.camera-select-control {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 650;
+}
+
+.camera-select-control select {
+  min-width: 0;
+  min-height: 34px;
+  padding: 0 28px 0 9px;
+  overflow: hidden;
+  border: 1px solid var(--border-strong);
+  border-radius: 5px;
+  background: var(--surface);
+  color: var(--text);
+  font-size: 0.74rem;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.camera-select-control select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
+.camera-select-control select:disabled { cursor: not-allowed; opacity: 0.65; }
+
 .format-control {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -538,6 +566,44 @@ button, input { font: inherit; }
 
 @keyframes viewer-spin { to { transform: rotate(360deg); } }
 
+.viewer-tools {
+  display: grid;
+  gap: 8px;
+  padding: 0 12px 12px;
+}
+
+.viewer-tool-row {
+  display: grid;
+  grid-template-columns: auto minmax(80px, 1fr) 44px auto;
+  align-items: center;
+  gap: 9px;
+  min-height: 34px;
+  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 650;
+}
+
+.viewer-tool-row input[type="range"] { width: 100%; accent-color: var(--primary); }
+.viewer-tool-row output { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
+
+.viewer-tool-row button {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: 5px;
+  background: var(--surface);
+  color: var(--text);
+  font-size: 0.72rem;
+  font-weight: 650;
+  cursor: pointer;
+}
+
+.viewer-tool-row button:hover:not(:disabled) { border-color: var(--primary); background: var(--surface-hover); }
+.viewer-tool-row button:disabled, .viewer-tool-row input:disabled { cursor: not-allowed; opacity: 0.5; }
+.export-z-row { grid-template-columns: minmax(155px, auto) minmax(80px, 1fr) 44px; }
+.bake-z-control { display: flex; align-items: center; gap: 6px; cursor: pointer; }
+.bake-z-control input { accent-color: var(--primary); }
+
 .artifact-button {
   display: inline-flex;
   align-items: center;
@@ -660,7 +726,10 @@ button, input { font: inherit; }
   .panel-heading { min-height: 52px; padding: 14px; }
   .source-panel .panel-heading p { margin-left: 8px; }
   .panel-content { padding: 9px; }
-  .source-actions, .download-bar { padding: 0 9px 9px; }
+  .source-actions, .download-bar, .viewer-tools { padding: 0 9px 9px; }
+  .viewer-tool-row { grid-template-columns: 1fr 44px auto; }
+  .viewer-tool-row > label:first-child { grid-column: 1 / -1; }
+  .export-z-row { grid-template-columns: minmax(0, 1fr) 44px; }
   .upload-surface { min-height: 360px; }
   .upload-surface img, .viewer-shell { height: 360px; }
   .camera-stage[data-format="landscape"] { width: min(100%, 480px); }

src/model/encoder/depth/infinidepth/implicit_pda.py

@@ -26,7 +26,11 @@ from src.model.encoder.depth.infinidepth.warp_utils import WarpMedian
 from typing import Optional
 
 EPS = 1e-6
-acc_dtype = torch.bfloat16 if torch.cuda.get_device_capability()[0] >= 8 else torch.float16
+acc_dtype = (
+    torch.bfloat16
+    if torch.cuda.is_available() and torch.cuda.get_device_capability()[0] >= 8
+    else torch.float16
+)
 
 
 def _clear_torchhub_package(package_name: str) -> None:

src/model/encoder/depth/infinidepth/implicit_promptda_simple/prompt_models/selfattn.py

@@ -5,7 +5,11 @@ from src.model.encoder.depth.infinidepth.implicit_promptda_simple.perceive_io im
 from src.model.encoder.depth.infinidepth.implicit_promptda_simple.prompt_models.utils.pe_utils import PositionEmbeddingRandom
 from torch import Tensor
 
-acc_dtype = torch.bfloat16 if torch.cuda.get_device_capability()[0] >= 8 else torch.float16
+acc_dtype = (
+    torch.bfloat16
+    if torch.cuda.is_available() and torch.cuda.get_device_capability()[0] >= 8
+    else torch.float16
+)
 
 
 class SelfAttnPromptModel(nn.Module):

tests/test_hf_runtime.py

@@ -161,6 +161,36 @@ def test_filtered_ply_export_removes_spatial_outlier(tmp_path, monkeypatch) -> N
     assert float(captured["gaussians"].mean_vectors.abs().max()) < 1.0
 
 
+def test_filtered_ply_export_can_translate_z(tmp_path, monkeypatch) -> None:
+    artifact_path = tmp_path / "gaussians.pt"
+    gaussians = _gaussians()
+    save_gaussian_artifact(
+        GaussianArtifact(
+            gaussians=gaussians,
+            focal_length_px=1200.0,
+            image_shape=(1152, 1536),
+        ),
+        artifact_path,
+    )
+    captured = {}
+    monkeypatch.setattr(hf_runtime, "filter_final_gaussian_floaters", lambda value: value)
+
+    def fake_save_ply(*, gaussians, path, **_) -> None:
+        captured["gaussians"] = gaussians
+        path.write_bytes(b"ply")
+
+    monkeypatch.setattr(
+        hf_runtime,
+        "save_ply",
+        fake_save_ply,
+    )
+
+    export_filtered_gaussian_ply(artifact_path, tmp_path / "output", z_offset=1.25)
+
+    expected = gaussians.mean_vectors + torch.tensor([0.0, 0.0, 1.25])
+    assert torch.equal(captured["gaussians"].mean_vectors, expected)
+
+
 def test_build_splat_transform_command_is_fixed_and_non_interactive() -> None:
     command = build_splat_transform_command(
         scene_ply=Path("scene.ply"),
@@ -251,13 +281,33 @@ def test_supersplat_viewer_bridge_accepts_external_script(tmp_path) -> None:
     viewer_path = tmp_path / "viewer.html"
     script_path = tmp_path / "index.js"
     viewer_path.write_text("<html><head></head><body></body></html>")
-    script_path.write_text("window.firstFrame?.();")
+    script_path.write_text(
+        "window.firstFrame?.();\n"
+        "    // Create the viewer\n"
+        "    return new Viewer(global, gsplatLoad, skyboxLoad, collisionLoad);"
+    )
 
     patch_supersplat_html_viewer_bridge(viewer_path, script_path)
 
     assert "data-infinisplat-viewer-bridge" in viewer_path.read_text()
 
 
+def test_supersplat_viewer_bridge_patches_camera_controls(tmp_path) -> None:
+    viewer_path = tmp_path / "viewer.html"
+    script_path = tmp_path / "index.js"
+    viewer_path.write_text("<html><head></head><body></body></html>")
+    script_path.write_text(
+        "window.firstFrame?.();\n"
+        "    // Create the viewer\n"
+        "    return new Viewer(global, gsplatLoad, skyboxLoad, collisionLoad);"
+    )
+
+    patch_supersplat_html_viewer_bridge(viewer_path, script_path)
+
+    assert "window.infinisplatViewerControls" in script_path.read_text()
+    assert 'event.data.action === "distance"' in viewer_path.read_text()
+
+
 def test_supersplat_viewer_bridge_rejects_changed_bundle(tmp_path) -> None:
     viewer_path = tmp_path / "viewer.html"
     viewer_path.write_text("<html><head></head><body></body></html>")
@@ -329,8 +379,8 @@ def test_hf_space_header_content() -> None:
     assert hf_ui.FULL_TITLE == (
         "Implicit Gaussian Decoding for Large-Baseline Monocular View Synthesis"
     )
-    assert hf_ui.GITHUB_URL == "https://github.com/PLUS-WAVE/InfiniSplat-oss"
-    assert hf_ui.PROJECT_PAGE_URL == "https://pluswave.top/InfiniSplat-page/"
+    assert hf_ui.GITHUB_URL == "https://github.com/zju3dv/InfiniSplat"
+    assert hf_ui.PROJECT_PAGE_URL == "https://zju3dv.github.io/InfiniSplat"
     assert hf_ui.INPUT_IMAGE_HINT == (
         "Better for indoor scenes due to HyperSim-only training"
     )

tests/test_webcam_frontend.py

@@ -10,6 +10,7 @@ def test_custom_frontend_exposes_camera_controls() -> None:
 
     assert 'id="cameraButton"' in markup
     assert 'id="cameraPreview"' in markup
+    assert 'id="cameraSelect"' in markup
     assert 'id="captureButton"' in markup
     assert 'id="cancelCameraButton"' in markup
     assert 'name="cameraFormat" value="landscape"' in markup
@@ -22,14 +23,37 @@ def test_custom_frontend_captures_camera_as_jpeg_file() -> None:
     script = (FRONTEND_ROOT / "app.js").read_text()
 
     assert "navigator.mediaDevices.getUserMedia" in script
-    assert 'canvas.toBlob(resolve, "image/jpeg", 0.92)' in script
+    assert "navigator.mediaDevices.enumerateDevices" in script
+    assert 'deviceId: { exact: selectedCameraDeviceId }' in script
+    assert 'addEventListener?.("devicechange"' in script
+    assert 'width: { ideal: 2560 }' in script
+    assert 'height: { ideal: 1920 }' in script
+    assert 'aspectRatio: { ideal: 4 / 3 }' in script
+    assert 'new ImageCapture(track)' in script
+    assert 'advanced[mode] = "continuous"' in script
+    assert 'context.imageSmoothingQuality = "high"' in script
+    assert 'imageCapture.takePhoto(photoSettings || undefined)' in script
+    assert 'canvas.toBlob(resolve, "image/jpeg", 0.95)' in script
     assert "targetRatio = dimensions.width / dimensions.height" in script
     assert "cropWidth = sourceHeight * targetRatio" in script
     assert "cropHeight = sourceWidth / targetRatio" in script
+    assert "will be enlarged; it may look soft" in script
     assert "new File([blob]" in script
     assert "stopCamera();" in script
 
 
+def test_custom_frontend_exposes_view_and_export_depth_controls() -> None:
+    markup = (FRONTEND_ROOT / "index.html").read_text()
+    script = (FRONTEND_ROOT / "app.js").read_text()
+
+    assert 'id="cameraDistance" type="range"' in markup
+    assert 'id="resetViewButton"' in markup
+    assert 'id="bakeZOffset" type="checkbox"' in markup
+    assert 'id="zOffset" type="range"' in markup
+    assert 'type: "infinisplat:viewer-control"' in script
+    assert 'z_offset: bakeZOffset.checked ? Number(zOffset.value) : 0' in script
+
+
 def test_gradio_fallback_accepts_webcam_input() -> None:
     source = (REPO_ROOT / "src/demo/hf_ui.py").read_text()