Host WebGL viewer through Gradio wrapper

README.md

@@ -3,8 +3,8 @@ title: Gaussian Splat Walkthrough
 emoji: 🌀
 colorFrom: blue
 colorTo: green
-sdk: static
-app_file: index.html
+sdk: gradio
+app_file: app.py
 pinned: false
 license: mit
 ---

app.py

@@ -1,13 +1,66 @@
-from http.server import SimpleHTTPRequestHandler, ThreadingHTTPServer
+from pathlib import Path
+import html
 
+import gradio as gr
 
-class Handler(SimpleHTTPRequestHandler):
-    def end_headers(self):
-        self.send_header("Cross-Origin-Opener-Policy", "same-origin")
-        self.send_header("Cross-Origin-Embedder-Policy", "require-corp")
-        self.send_header("Cache-Control", "no-store")
-        super().end_headers()
 
+ROOT = Path(__file__).parent.resolve()
+
+
+def build_iframe() -> str:
+    document = (ROOT / "index.html").read_text(encoding="utf-8")
+    document = document.replace('href="/src/styles.css"', 'href="/gradio_api/file=src/styles.css"')
+    document = document.replace('src="/src/main.js"', 'src="/gradio_api/file=src/main.js"')
+    srcdoc = html.escape(document, quote=True)
+    return f"""
+    <iframe
+      title="Gaussian Splat Walkthrough"
+      srcdoc="{srcdoc}"
+      allow="fullscreen; xr-spatial-tracking"
+      sandbox="allow-scripts allow-same-origin allow-pointer-lock allow-forms allow-popups"
+      style="position:fixed; inset:0; width:100vw; height:100vh; border:0; background:#030607;"
+    ></iframe>
+    """
+
+
+css = """
+html, body, gradio-app, .gradio-container {
+  margin: 0 !important;
+  width: 100% !important;
+  min-width: 100% !important;
+  height: 100% !important;
+  min-height: 100vh !important;
+  overflow: hidden !important;
+  background: #030607 !important;
+}
+
+.gradio-container {
+  max-width: none !important;
+  padding: 0 !important;
+}
+
+footer,
+.footer {
+  display: none !important;
+}
+
+#splat-frame {
+  position: fixed !important;
+  inset: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+#splat-frame > div {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+"""
+
+with gr.Blocks(css=css, title="Gaussian Splat Walkthrough", fill_height=True) as demo:
+    gr.HTML(build_iframe(), elem_id="splat-frame")
 
 if __name__ == "__main__":
-    ThreadingHTTPServer(("0.0.0.0", 7860), Handler).serve_forever()
+    demo.launch(allowed_paths=[str(ROOT)])

requirements.txt

@@ -1 +1 @@
-# Static Hugging Face Space. Python dependencies are not required.
+gradio>=5.0,<6.0

src/main.js

@@ -129,6 +129,7 @@ let frameBucketStart = lastTime;
 let frameCount = 0;
 let isWalking = false;
 let tourEnabled = true;
+let tourStartTime = 0;
 let yaw = 0;
 let pitch = 0;
 let basis;
@@ -200,12 +201,13 @@ function stopTour() {
 
 function startTour() {
   tourEnabled = true;
+  tourStartTime = performance.now();
   dom.tourButton.classList.add('active');
   dom.tourButton.innerHTML = '<span class="button-icon">Ⅱ</span> Tour';
 }
 
 function updateTour(time) {
-  const t = time * 0.00009;
+  const t = Math.max(0, time - tourStartTime) * 0.00009;
   const radius = currentScene.tourRadius;
   const side = basis.right.clone().multiplyScalar(Math.cos(t) * radius);
   const forward = basis.forward.clone().multiplyScalar(Math.sin(t) * radius);