Start kiosk capture and rotate scene automatically

src/demo/infer_single_image.py

@@ -838,7 +838,7 @@ def _resolve_checkpoint_path(checkpoint: str | Path) -> Path:
 
 
 def patch_supersplat_html_auto_rotate(html_path: Path) -> None:
-    """Patch SuperSplat HTML so generated camera animation starts paused.
+    """Pause generated camera animation unless the viewer opts into rotation.
 
     Args:
         html_path: Generated SuperSplat HTML path.
@@ -848,14 +848,18 @@ def patch_supersplat_html_auto_rotate(html_path: Path) -> None:
     """
     source = html_path.read_text(encoding="utf-8")
     old = "noanim: url.searchParams.has('noanim'),"
-    new = "noanim: true,"
+    new = "noanim: !url.searchParams.has('autorotate'),"
     if new in source:
         return
-    if old not in source:
+    if old in source:
+        source = source.replace(old, new, 1)
+    elif "noanim: true," in source:
+        source = source.replace("noanim: true,", new, 1)
+    else:
         raise RuntimeError(
-            "Could not pause SuperSplat HTML animation; the viewer bundle changed."
+            "Could not configure SuperSplat camera rotation; the viewer bundle changed."
         )
-    html_path.write_text(source.replace(old, new, 1), encoding="utf-8")
+    html_path.write_text(source, encoding="utf-8")
 
 
 def patch_supersplat_html_viewer_bridge(

src/demo/server_frontend/app.js

@@ -32,6 +32,7 @@ const htmlDownload = document.getElementById("htmlDownload");
 const kioskCooldown = document.getElementById("kioskCooldown");
 const kioskCooldownTime = document.getElementById("kioskCooldownTime");
 const kioskStartButton = document.getElementById("kioskStartButton");
+const kioskCameraSelect = document.getElementById("kioskCameraSelect");
 const urlParams = new URLSearchParams(window.location.search);
 const kioskIntervalMinutes = Math.min(60, Math.max(1, Number.parseInt(urlParams.get("interval") || "3", 10) || 3));
 document.getElementById("kioskIntervalLabel").textContent = `${kioskIntervalMinutes} ${kioskIntervalMinutes === 1 ? "minute" : "minutes"}`;
@@ -60,8 +61,16 @@ const cameraFormats = {
 const KIOSK_COOLDOWN_DEFAULT_SECONDS = 180;
 const KIOSK_COOLDOWN_MAX_SECONDS = 3600;
 const KIOSK_COOLDOWN_STORAGE_KEY = "infinisplat:kiosk-cooldown-until";
+const KIOSK_CAMERA_STORAGE_KEY = "infinisplat:kiosk-camera-device";
 const KIOSK_ENABLED_VALUES = new Set(["1", "true", "yes", "on"]);
 const kioskMode = KIOSK_ENABLED_VALUES.has((urlParams.get("kiosk") || "").toLowerCase());
+if (kioskMode) {
+  try {
+    selectedCameraDeviceId = window.localStorage.getItem(KIOSK_CAMERA_STORAGE_KEY) || "";
+  } catch (error) {
+    console.warn("The kiosk camera selection could not be read from storage.", error);
+  }
+}
 let cooldownUntil = 0;
 let cooldownTotalMs = 0;
 let cooldownTicker = null;
@@ -360,7 +369,7 @@ 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)) {
+  if (selectedCameraDeviceId && devices.length && !availableIds.has(selectedCameraDeviceId)) {
     selectedCameraDeviceId = "";
   }
 
@@ -379,6 +388,21 @@ async function refreshCameraDevices(activeDeviceId = "") {
   const preferredId = selectedCameraDeviceId || activeDeviceId;
   cameraSelect.value = availableIds.has(preferredId) ? preferredId : "";
   cameraSelect.disabled = running || devices.length < 2;
+
+  kioskCameraSelect.replaceChildren();
+  const kioskAutomaticOption = document.createElement("option");
+  kioskAutomaticOption.value = "";
+  kioskAutomaticOption.textContent = "Automatic camera";
+  kioskCameraSelect.append(kioskAutomaticOption);
+  devices.forEach((device, index) => {
+    const option = document.createElement("option");
+    option.value = device.deviceId;
+    option.textContent = device.label || `Camera ${index + 1}`;
+    kioskCameraSelect.append(option);
+  });
+  const kioskPreferredId = selectedCameraDeviceId || activeDeviceId;
+  kioskCameraSelect.value = availableIds.has(kioskPreferredId) ? kioskPreferredId : "";
+  kioskCameraSelect.disabled = devices.length < 2 || cameraStream !== null;
 }
 
 async function switchCamera() {
@@ -447,6 +471,11 @@ async function startCamera() {
     console.error(error);
     if (error?.name === "NotFoundError" || error?.name === "OverconstrainedError") {
       selectedCameraDeviceId = "";
+      try {
+        window.localStorage.removeItem(KIOSK_CAMERA_STORAGE_KEY);
+      } catch (storageError) {
+        console.warn("The unavailable kiosk camera selection could not be cleared.", storageError);
+      }
     }
     stopCamera();
     if (kioskMode && cameraButton.dataset.kioskStarted === "true") {
@@ -569,6 +598,19 @@ kioskStartButton.addEventListener("click", () => {
   startCamera();
 });
 cameraSelect.addEventListener("change", switchCamera);
+kioskCameraSelect.addEventListener("change", () => {
+  selectedCameraDeviceId = kioskCameraSelect.value;
+  cameraSelect.value = selectedCameraDeviceId;
+  try {
+    if (selectedCameraDeviceId) {
+      window.localStorage.setItem(KIOSK_CAMERA_STORAGE_KEY, selectedCameraDeviceId);
+    } else {
+      window.localStorage.removeItem(KIOSK_CAMERA_STORAGE_KEY);
+    }
+  } catch (error) {
+    console.warn("The kiosk camera selection could not be saved.", error);
+  }
+});
 cancelCameraButton.addEventListener("click", stopCamera);
 captureButton.addEventListener("click", capturePhoto);
 for (const input of cameraFormatInputs) input.addEventListener("change", updateCameraFrame);
@@ -602,6 +644,8 @@ navigator.mediaDevices?.addEventListener?.("devicechange", () => {
   if (cameraStream) {
     refreshCameraDevices(cameraStream.getVideoTracks()[0]?.getSettings?.().deviceId || "")
       .catch((error) => console.warn("Could not refresh the camera list.", error));
+  } else if (kioskMode) {
+    refreshCameraDevices().catch((error) => console.warn("Could not refresh kiosk cameras.", error));
   }
 });
 
@@ -707,7 +751,7 @@ async function runPipeline() {
     );
     if (!viewer?.url) throw new Error("The viewer export returned no file.");
     setViewerState("loading", "Initializing 3D viewer", "Loading scene data and waiting for the first rendered frame");
-    viewerFrame.src = `${viewer.url}?v=${Date.now()}`;
+    viewerFrame.src = `${viewer.url}?v=${Date.now()}${kioskMode ? "&autorotate" : ""}`;
     reconstructed = true;
     if (kioskMode) document.documentElement.dataset.kioskState = "showcase";
 
@@ -727,6 +771,11 @@ async function runPipeline() {
     showToast(errorMessage(error), true);
   } finally {
     if (reconstructed) beginCooldown();
+    else if (kioskMode && cameraButton.dataset.kioskStarted === "true") {
+      document.documentElement.dataset.kioskState = "showcase";
+      window.clearTimeout(kioskCaptureTimer);
+      kioskCaptureTimer = window.setTimeout(startCamera, 15000);
+    }
     setRunning(false);
   }
 }
@@ -737,6 +786,7 @@ async function connect() {
   try {
     client = await Client.connect(window.location.origin);
     reconstructButton.disabled = !selectedFile || inputsLocked();
+    if (kioskMode && selectedFile && !running) window.setTimeout(runPipeline, 0);
     const template = resultValue(await client.predict("/viewer_template", {}));
     if (template?.url) viewerPreloader.src = template.url;
   } catch (error) {
@@ -750,6 +800,9 @@ if (kioskMode) {
   document.documentElement.dataset.kioskState = "welcome";
   cameraButton.dataset.kioskStarted = "true";
   cameraButton.textContent = "Start 3D playground";
+  refreshCameraDevices().catch((error) => {
+    console.warn("Could not list kiosk cameras.", error);
+  });
   const deadline = storedCooldownDeadline();
   if (Number.isFinite(deadline) && deadline > Date.now()) {
     beginCooldown(kioskCooldownMs || deadline - Date.now(), deadline);

src/demo/server_frontend/index.html

@@ -17,13 +17,14 @@
       document.documentElement.dataset.kiosk = "on";
     }
   </script>
-  <link rel="stylesheet" href="/infinisplat/assets/styles.css?v=10">
+  <link rel="stylesheet" href="/infinisplat/assets/styles.css?v=11">
 </head>
 <body>
   <main class="app-shell">
     <section class="kiosk-welcome" aria-label="Fubar Labs 3D Printing Playground">
       <div><span class="kiosk-eyebrow">FUBAR LABS · NEW JERSEY MAKER SPACE</span><h2>Make something <em>impossible.</em></h2>
-        <p>Step into the 3D Printing Playground. Start the camera and it will capture a fresh photo every few minutes, turning each one into a scene you can explore in 3D.</p>
+        <p>Choose a camera and start the 3D Printing Playground. It captures automatically, then brings every new scene to life with a rotating 3D view.</p>
+        <label class="kiosk-camera-picker" for="kioskCameraSelect"><span>CAMERA</span><select id="kioskCameraSelect" aria-label="Select kiosk camera"><option value="">Choose a camera…</option></select></label>
         <button class="kiosk-start" id="kioskStartButton" type="button">Start the 3D playground <span aria-hidden="true">↗</span></button></div>
       <div class="kiosk-instructions"><span class="kiosk-live-dot"></span><span>Live 3D showcase</span><small>New scene every <b id="kioskIntervalLabel">3 minutes</b></small></div>
     </section>
@@ -153,6 +154,6 @@
   </main>
 
   <div class="toast" id="toast" role="status" aria-live="polite"></div>
-  <script type="module" src="/infinisplat/assets/app.js?v=12"></script>
+  <script type="module" src="/infinisplat/assets/app.js?v=13"></script>
 </body>
 </html>

src/demo/server_frontend/styles.css

@@ -567,6 +567,7 @@ button, input { font: inherit; }
 :root[data-kiosk="on"][data-kiosk-state="welcome"] .source-panel { display: block; position: fixed; right: 24px; bottom: 24px; z-index: 10; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
 :root[data-kiosk="on"][data-kiosk-state="welcome"] .kiosk-welcome { min-height: 54vh; align-items: center; justify-content: center; text-align: center; }
 :root[data-kiosk="on"][data-kiosk-state="welcome"] .kiosk-welcome > div:first-child { max-width: 800px; }
+:root[data-kiosk="on"][data-kiosk-state="welcome"] .kiosk-welcome p { margin-inline: auto; }
 :root[data-kiosk="on"][data-kiosk-state="welcome"] .kiosk-instructions { display: none; }
 :root[data-kiosk="on"][data-kiosk-state="welcome"] .workspace { display: none; }
 :root[data-kiosk="on"][data-kiosk-state="processing"] .kiosk-welcome { display: none; }
@@ -574,6 +575,9 @@ button, input { font: inherit; }
 .kiosk-welcome h2 { margin: 6px 0; font-size: clamp(1.8rem, 4vw, 3.8rem); letter-spacing: -.045em; line-height: 1; }
 .kiosk-welcome h2 em { color: #b8f34a; font-style: normal; }
 .kiosk-welcome p { max-width: 650px; margin: 9px 0 0; color: #b0beb6; font-size: clamp(.8rem, 1.15vw, 1rem); }
+.kiosk-camera-picker { display: grid; grid-template-columns: auto minmax(180px, 280px); align-items: center; justify-content: center; gap: 12px; margin: 20px auto 0; color: #b8f34a; font-size: .68rem; font-weight: 850; letter-spacing: .15em; text-align: left; }
+.kiosk-camera-picker select { min-height: 44px; padding: 0 38px 0 13px; border: 1px solid #536756; border-radius: 6px; background: #111a14; color: #f1f7f2; font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: 0; }
+.kiosk-camera-picker select:disabled { opacity: .6; }
 .kiosk-instructions { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 9px; flex-shrink: 0; padding: 12px 15px; border: 1px solid #35453b; border-radius: 9px; background: #121a16; color: #e3eee6; font-size: .82rem; font-weight: 700; }
 .kiosk-instructions small { grid-column: 2; color: #9eaea4; font-size: .7rem; font-weight: 500; }
 .kiosk-instructions b { color: #b8f34a; font-weight: 700; }