initial release

README.md

@@ -1,13 +1,66 @@
 ---
-title: Ml Sharp 3d Viewer
-emoji: 🌖
+title: SHARP 3D Gaussian Viewer
+emoji: 🔪
 colorFrom: indigo
-colorTo: indigo
+colorTo: purple
 sdk: gradio
-sdk_version: 6.4.0
+sdk_version: 6.2.0
 app_file: app.py
 pinned: false
-short_description: ml sharp with supersplat viewer
+models:
+- apple/Sharp
+preload_from_hub:
+  - apple/Sharp sharp_2572gikvuh.pt
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# SHARP 3D Gaussian Viewer
+
+Interactive 3D Gaussian Splat viewer powered by Apple's SHARP model.
+
+## Features
+
+- **Single-image 3D reconstruction**: Upload any image to generate a 3D Gaussian splat scene
+- **Interactive 3D viewer**: Explore the scene directly in your browser using SuperSplat Viewer
+- **Focal length control**: Adjust camera FOV for optimal viewing
+- **Download PLY**: Export the generated 3D scene for use in other applications
+- **Open in new tab**: View the 3D scene in a dedicated browser tab
+
+## How it Works
+
+1. **Upload an image** and optionally adjust the focal length
+2. **SHARP model** (server-side) predicts 3D Gaussians from your image
+3. **SuperSplat Viewer** (client-side) renders the 3D scene in your browser
+
+## Controls
+
+### Orbit Mode
+- **Left Mouse / One Finger**: Rotate camera
+- **Right Mouse / Two Finger**: Pan camera
+- **Scroll / Pinch**: Zoom in/out
+- **Double Click / Tap**: Set focus point
+
+### Fly Mode
+- **Left Mouse**: Look around
+- **W, S, A, D**: Fly movement
+
+## Credits
+
+- [ml-sharp](https://github.com/apple/ml-sharp) - Apple's SHARP model for single-image 3D Gaussian prediction
+- [supersplat-viewer](https://github.com/playcanvas/supersplat-viewer) - PlayCanvas 3D Gaussian Splat viewer
+
+## Citation
+
+```bibtex
+@inproceedings{Sharp2025:arxiv,
+  title      = {Sharp Monocular View Synthesis in Less Than a Second},
+  author     = {Lars Mescheder and Wei Dong and Shiwei Li and Xuyang Bai and Marcel Santos and Peiyun Hu and Bruno Lecouat and Mingmin Zhen and Amaël Delaunoy and Tian Fang and Yanghai Tsin and Stephan R. Richter and Vladlen Koltun},
+  journal    = {arXiv preprint arXiv:2512.10685},
+  year       = {2025},
+}
+```
+
+## License
+
+This demo is provided for research and educational purposes. See the respective licenses for:
+- [SHARP model license](https://github.com/apple/ml-sharp/blob/main/LICENSE)
+- [SuperSplat Viewer (MIT)](https://github.com/playcanvas/supersplat-viewer/blob/main/LICENSE)

app.py

@@ -1,7 +1,645 @@
+"""SHARP Gradio demo (PLY export + 3D viewer).
+
+This Space:
+- Runs Apple's SHARP model to predict a 3D Gaussian scene from a single image.
+- Exports a canonical `.ply` file for download.
+- Serves unique PLY and settings files per generation via the SuperSplat Viewer.
+
+Uses Gradio 6's static file serving (no FastAPI/uvicorn needed).
+"""
+
+from __future__ import annotations
+
+import json
+import math
+import time
+import uuid
+from pathlib import Path
+from typing import Final
+
 import gradio as gr
 
-def greet(name):
-    return "Hello " + name + "!!"
+from model_utils import predict_to_ply_gpu
+
+# -----------------------------------------------------------------------------
+# Paths & constants
+# -----------------------------------------------------------------------------
+
+APP_DIR: Final[Path] = Path(__file__).resolve().parent
+OUTPUTS_DIR: Final[Path] = APP_DIR / "outputs"
+VIEWER_DIR: Final[Path] = APP_DIR / "viewer"
+DEFAULT_SETTINGS_JSON: Final[Path] = VIEWER_DIR / "settings.default.json"
+
+DEFAULT_QUEUE_MAX_SIZE: Final[int] = 32
+DEFAULT_FOCAL_LENGTH_MM: Final[float] = 35.0
+SENSOR_HEIGHT_MM: Final[float] = 24.0  # Full-frame 35mm equivalent
+
+# Register static paths for Gradio 6 file serving
+gr.set_static_paths(paths=[str(VIEWER_DIR), str(OUTPUTS_DIR)])
+
+
+THEME: Final = gr.themes.Origin()
+
+CSS: Final[str] = """
+/* Keep layout stable when scrollbars appear/disappear */
+html { scrollbar-gutter: stable; }
+
+/* Use normal document flow */
+html, body { height: auto; }
+body { overflow: auto; }
+
+/* Full-width layout */
+.gradio-container {
+    max-width: none;
+    width: 100%;
+    margin: 0;
+    padding: 0.5rem 1rem 1rem;
+    box-sizing: border-box;
+}
+
+/* Header styling */
+#app-header {
+    margin-bottom: 0.5rem;
+}
+#app-header h2 {
+    margin: 0 0 0.25rem 0;
+    font-size: 1.5rem;
+}
+#app-header p {
+    margin: 0;
+    opacity: 0.85;
+}
+
+/* Main layout: controls left, viewer right (larger) */
+#main-row {
+    gap: 1rem;
+    align-items: stretch;
+}
+
+/* Left panel: controls */
+#controls-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+#controls-panel .input-image-container {
+    flex: 1;
+    min-height: 200px;
+}
+
+#input-image {
+    width: 100%;
+}
+#input-image img {
+    width: 100%;
+    height: auto;
+    max-height: 280px;
+    object-fit: contain;
+}
+
+/* Options row */
+#options-row {
+    gap: 0.5rem;
+}
+#options-row > div {
+    flex: 1;
+}
+
+/* Action buttons */
+#actions-row {
+    gap: 0.5rem;
+}
+#actions-row button {
+    flex: 1;
+    min-height: 42px;
+}
+
+/* Downloads row */
+#downloads-row {
+    gap: 0.5rem;
+    align-items: center;
+}
+#downloads-row > div {
+    flex: 1;
+}
+
+/* Right panel: 3D viewer (dominant) */
+#viewer-panel {
+    display: flex;
+    flex-direction: column;
+    min-height: 500px;
+}
+
+#viewer-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+/* Viewer iframe/placeholder */
+#viewer-html {
+    flex: 1;
+    min-height: 500px;
+}
+
+#viewer-html iframe {
+    width: 100%;
+    height: 100%;
+    min-height: 500px;
+    border: 0;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #000;
+}
+
+/* Placeholder styling */
+.viewer-placeholder {
+    width: 100%;
+    height: 100%;
+    min-height: 500px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px dashed var(--border-color-primary, rgba(127, 127, 127, 0.35));
+    border-radius: 12px;
+    background: var(--block-background-fill, rgba(127, 127, 127, 0.05));
+    color: var(--body-text-color, rgba(255, 255, 255, 0.92));
+    transition: all 0.3s ease;
+}
+.viewer-placeholder-inner {
+    max-width: 400px;
+    padding: 32px;
+    text-align: center;
+}
+.viewer-placeholder-icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+    opacity: 0.6;
+}
+.viewer-placeholder-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+.viewer-placeholder-desc {
+    font-size: 14px;
+    line-height: 1.5;
+    opacity: 0.75;
+}
+
+/* Loading state */
+.viewer-loading {
+    border-color: var(--primary-500;
+    background: linear-gradient(
+        135deg,
+        rgba(255, 102, 0, 0.05) 0%,
+        rgba(255, 102, 0, 0.1) 100%
+    );
+}
+.viewer-loading .viewer-placeholder-icon {
+    animation: pulse 1.5s ease-in-out infinite;
+}
+@keyframes pulse {
+    0%, 100% { opacity: 0.4; transform: scale(1); }
+    50% { opacity: 0.8; transform: scale(1.05); }
+}
+
+/* Status text */
+#status-text {
+    font-size: 13px;
+    opacity: 0.85;
+    margin-top: 0.5rem;
+}
+
+/* Responsive: stack on small screens */
+@media (max-width: 900px) {
+    #main-row {
+        flex-direction: column;
+    }
+    #controls-panel, #viewer-panel {
+        min-width: 100% !important;
+    }
+    #viewer-html, #viewer-html iframe, .viewer-placeholder {
+        min-height: 400px;
+    }
+    #input-image img {
+        max-height: 200px;
+    }
+}
+"""
+
+
+def _ensure_dir(path: Path) -> Path:
+    path.mkdir(parents=True, exist_ok=True)
+    return path
+
+
+_ensure_dir(OUTPUTS_DIR)
+_ensure_dir(VIEWER_DIR)
+
+
+# -----------------------------------------------------------------------------
+# FOV / Focal Length utilities
+# -----------------------------------------------------------------------------
+
+
+def focal_length_to_fov(focal_length_mm: float, sensor_height_mm: float = SENSOR_HEIGHT_MM) -> float:
+    """Convert focal length (mm) to vertical field of view (degrees).
+    
+    Uses the formula: FOV = 2 * atan(sensor_height / (2 * focal_length))
+    """
+    if focal_length_mm <= 0:
+        focal_length_mm = DEFAULT_FOCAL_LENGTH_MM
+    fov_rad = 2 * math.atan(sensor_height_mm / (2 * focal_length_mm))
+    return math.degrees(fov_rad)
+
+
+def create_settings_file(focal_length_mm: float, output_stem: str) -> Path:
+    """Create a unique settings.json for this generation."""
+    fov = focal_length_to_fov(focal_length_mm)
+    
+    # Load default settings as base
+    settings = {
+        "camera": {
+            "fov": fov,
+            "position": [0, 1, -1],
+            "target": [0, 0, 0],
+            "startAnim": "none",
+            "animTrack": ""
+        },
+        "background": {"color": [0, 0, 0, 0]},
+        "animTracks": []
+    }
+    
+    if DEFAULT_SETTINGS_JSON.exists():
+        try:
+            existing = json.loads(DEFAULT_SETTINGS_JSON.read_text(encoding="utf-8"))
+            # Merge, preserving existing values but updating FOV
+            if "background" in existing:
+                settings["background"] = existing["background"]
+            if "camera" in existing:
+                settings["camera"] = {**settings["camera"], **existing["camera"]}
+            settings["camera"]["fov"] = fov  # Always update FOV
+            if "animTracks" in existing:
+                settings["animTracks"] = existing["animTracks"]
+        except Exception:
+            pass
+    
+    settings_path = OUTPUTS_DIR / f"{output_stem}.settings.json"
+    settings_path.write_text(json.dumps(settings, indent=2), encoding="utf-8")
+    return settings_path
+
+
+# -----------------------------------------------------------------------------
+# Validation & file operations
+# -----------------------------------------------------------------------------
+
+
+def _validate_image(image_path: str | None) -> None:
+    if not image_path:
+        raise gr.Error("Please upload an image first.")
+
+
+def _generate_output_stem() -> str:
+    """Generate unique output file stem."""
+    ts = int(time.time() * 1000)
+    uid = uuid.uuid4().hex[:8]
+    return f"scene_{ts}_{uid}"
+
+
+# -----------------------------------------------------------------------------
+# HTML generators
+# -----------------------------------------------------------------------------
+
+
+def viewer_url_for_output(ply_filename: str, settings_filename: str) -> str:
+    """URL for the viewer with specific output files."""
+    # Use absolute paths with /gradio_api/file= prefix for content and settings
+    content_path = f"/gradio_api/file=outputs/{ply_filename}"
+    settings_path = f"/gradio_api/file=outputs/{settings_filename}"
+    return f"/gradio_api/file=viewer/index.html?content={content_path}&settings={settings_path}&noanim"
+
+
+def viewer_placeholder_html() -> str:
+    return """
+<div class="viewer-placeholder">
+    <div class="viewer-placeholder-inner">
+        <div class="viewer-placeholder-icon">🎨</div>
+        <div class="viewer-placeholder-title">3D Viewer</div>
+        <div class="viewer-placeholder-desc">
+            Upload an image and click <strong>Generate</strong> to create a 3D Gaussian scene.
+            The interactive viewer will appear here.
+        </div>
+    </div>
+</div>
+"""
+
+
+def viewer_loading_html() -> str:
+    """Loading placeholder with timer element."""
+    return """
+<div class="viewer-placeholder viewer-loading">
+    <div class="viewer-placeholder-inner">
+        <div class="viewer-placeholder-icon">⚡</div>
+        <div class="viewer-placeholder-title">Generating 3D Scene...</div>
+        <div class="viewer-placeholder-desc">
+            Running SHARP model inference. This may take a moment.
+        </div>
+        <div id="generation-timer" style="font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 28px; font-weight: 600; color: var(--primary-500); margin-top: 16px;">0s</div>
+    </div>
+</div>
+"""
+
+
+def viewer_iframe_html(ply_filename: str, settings_filename: str) -> str:
+    src = viewer_url_for_output(ply_filename, settings_filename)
+    return f"""
+<iframe 
+    src="{src}" 
+    allow="xr-spatial-tracking; fullscreen" 
+    referrerpolicy="no-referrer"
+    loading="eager"
+></iframe>
+"""
+
+
+# -----------------------------------------------------------------------------
+# Main inference function
+# -----------------------------------------------------------------------------
+
+
+def run_sharp(
+    image_path: str | None,
+    focal_length_mm: float,
+) -> tuple[object, object, str, object, object, object, str]:
+    """Run SHARP inference.
+    
+    Returns: (ply_download, viewer_html, status, generate_btn, clear_btn, open_viewer_btn, current_viewer_url)
+    """
+    _validate_image(image_path)
+
+    try:
+        # Generate unique output stem
+        output_stem = _generate_output_stem()
+        
+        # Create settings file with FOV
+        settings_path = create_settings_file(focal_length_mm, output_stem)
+        
+        # Run inference
+        ply_path = predict_to_ply_gpu(image_path)
+        
+        # Rename PLY to unique name in outputs
+        unique_ply_path = OUTPUTS_DIR / f"{output_stem}.ply"
+        ply_path.rename(unique_ply_path)
+        
+        fov = focal_length_to_fov(focal_length_mm)
+        status = f"✓ Generated **{unique_ply_path.name}** | FOV: {fov:.1f}°"
+        
+        viewer_url = viewer_url_for_output(unique_ply_path.name, settings_path.name)
+
+        return (
+            gr.update(value=str(unique_ply_path), visible=True, interactive=True),
+            viewer_iframe_html(unique_ply_path.name, settings_path.name),
+            status,
+            gr.update(interactive=True, value="Generate"),
+            gr.update(interactive=True),
+            gr.update(visible=True, interactive=True),
+            viewer_url,
+        )
+    except gr.Error:
+        raise
+    except Exception as e:
+        raise gr.Error(f"Generation failed: {type(e).__name__}: {e}") from e
+
+
+def start_generation() -> tuple[str, object, object]:
+    """Start generation: show loading state.
+    
+    Returns: (viewer_html, generate_btn, clear_btn)
+    """
+    return (
+        viewer_loading_html(),
+        gr.update(interactive=False, value="Generating..."),
+        gr.update(interactive=False),
+    )
+
+
+def clear_all() -> tuple:
+    """Clear all inputs and outputs.
+    
+    Returns: (image, ply_download, viewer_html, status, generate_btn, clear_btn, open_viewer_btn, current_viewer_url)
+    """
+    return (
+        None,
+        gr.update(value=None, visible=False),
+        viewer_placeholder_html(),
+        "",
+        gr.update(interactive=True, value="Generate"),
+        gr.update(interactive=False),
+        gr.update(visible=False),
+        "",
+    )
+
+
+def on_image_change(image_path: str | None) -> tuple[object, object]:
+    """Handle image upload/removal.
+    
+    Returns: (generate_btn, clear_btn)
+    """
+    has_image = bool(image_path)
+    return (
+        gr.update(interactive=has_image, value="Generate"),
+        gr.update(interactive=has_image),
+    )
+
+
+# -----------------------------------------------------------------------------
+# UI
+# -----------------------------------------------------------------------------
+
+
+# Global JS for timer control and viewer URL (injected via head parameter)
+HEAD_JS: Final[str] = """
+<script>
+window.sharpTimer = {
+    interval: null,
+    start: function() {
+        this.stop();
+        var startTime = Date.now();
+        this.interval = setInterval(function() {
+            var el = document.getElementById('generation-timer');
+            if (!el) return;
+            var secs = Math.floor((Date.now() - startTime) / 1000);
+            var mins = Math.floor(secs / 60);
+            secs = secs % 60;
+            el.textContent = mins > 0 ? mins + ':' + (secs < 10 ? '0' : '') + secs : secs + 's';
+        }, 500);
+    },
+    stop: function() {
+        if (this.interval) {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+    }
+};
+window.openSharpViewer = function() {
+    var iframe = document.querySelector('#viewer-html iframe');
+    if (iframe && iframe.src) {
+        window.open(iframe.src, '_blank');
+    }
+};
+</script>
+"""
+
+
+def build_demo() -> gr.Blocks:
+    with gr.Blocks(
+        title="SHARP • Single-Image 3D Gaussian Prediction",
+        elem_id="sharp-root",
+    ) as demo:
+        # Hidden textbox to store viewer URL (State doesn't work well with js param)
+        current_viewer_url = gr.Textbox(value="", visible=False, elem_id="viewer-url-store")
+        
+        # Header
+        with gr.Column(elem_id="app-header"):
+            gr.Markdown("## SHARP")
+            gr.Markdown("Single-image **3D Gaussian scene** prediction")
+
+        # Main layout: controls (left, narrow) + viewer (right, wide)
+        with gr.Row(elem_id="main-row", equal_height=True):
+            # Left column: Controls
+            with gr.Column(scale=3, min_width=280, elem_id="controls-panel"):
+                # Image upload
+                image_in = gr.Image(
+                    label="Input Image",
+                    type="filepath",
+                    sources=["upload"],
+                    elem_id="input-image",
+                    show_label=True,
+                )
+                
+                # Options
+                with gr.Row(elem_id="options-row"):
+                    focal_length = gr.Slider(
+                        label="Focal Length (mm)",
+                        minimum=12,
+                        maximum=200,
+                        step=1,
+                        value=DEFAULT_FOCAL_LENGTH_MM,
+                        info="Affects viewer FOV",
+                    )
+                
+                # Action buttons
+                with gr.Row(elem_id="actions-row"):
+                    generate_btn = gr.Button(
+                        "Generate",
+                        variant="primary",
+                        interactive=False,
+                        elem_id="generate-btn",
+                    )
+                    clear_btn = gr.Button(
+                        "Clear",
+                        variant="secondary",
+                        interactive=False,
+                        elem_id="clear-btn",
+                    )
+                
+                # Downloads
+                with gr.Row(elem_id="downloads-row"):
+                    ply_download = gr.DownloadButton(
+                        label="Download PLY",
+                        value=None,
+                        visible=False,
+                        elem_id="ply-download",
+                    )
+                    open_viewer_btn = gr.Button(
+                        "Open Viewer in New Tab ↗",
+                        size="sm",
+                        visible=False,
+                        elem_id="open-viewer-btn",
+                    )
+                
+                # Status
+                status_md = gr.Markdown("", elem_id="status-text")
+            
+            # Right column: 3D Viewer (dominant)
+            with gr.Column(scale=7, min_width=400, elem_id="viewer-panel"):
+                viewer_html = gr.HTML(
+                    value=viewer_placeholder_html(),
+                    elem_id="viewer-html",
+                    label="3D Viewer",
+                )
+
+        # About section (collapsible)
+        with gr.Accordion("About", open=False):
+            gr.Markdown("""
+### SHARP Model
+**Sharp Monocular View Synthesis in Less Than a Second** (Apple, 2025)
+
+SHARP predicts a 3D Gaussian splatting scene from a single image, enabling novel view synthesis.
+
+```bibtex
+@inproceedings{Sharp2025:arxiv,
+  title   = {Sharp Monocular View Synthesis in Less Than a Second},
+  author  = {Lars Mescheder and Wei Dong and Shiwei Li and Xuyang Bai and Marcel Santos and Peiyun Hu and Bruno Lecouat and Mingmin Zhen and Amaël Delaunoy and Tian Fang and Yanghai Tsin and Stephan R. Richter and Vladlen Koltun},
+  journal = {arXiv preprint arXiv:2512.10685},
+  year    = {2025},
+}
+```
+
+### 3D Viewer
+Powered by [SuperSplat Viewer](https://github.com/playcanvas/supersplat-viewer) by PlayCanvas.
+            """.strip())
+
+        # --- Event handlers ---
+        
+        # Image change: enable/disable buttons
+        image_in.change(
+            fn=on_image_change,
+            inputs=[image_in],
+            outputs=[generate_btn, clear_btn],
+            queue=False,
+            show_progress="hidden",
+        )
+        
+        # Generate: start loading, run inference
+        generate_btn.click(
+            fn=start_generation,
+            outputs=[viewer_html, generate_btn, clear_btn],
+            queue=False,
+            show_progress="hidden",
+            js="() => { window.sharpTimer && window.sharpTimer.start(); }",
+        ).then(
+            fn=run_sharp,
+            inputs=[image_in, focal_length],
+            outputs=[ply_download, viewer_html, status_md, generate_btn, clear_btn, open_viewer_btn, current_viewer_url],
+            show_progress="hidden",
+        ).then(
+            fn=lambda: None,
+            js="() => { window.sharpTimer && window.sharpTimer.stop(); }",
+        )
+        
+        # Clear
+        clear_btn.click(
+            fn=clear_all,
+            outputs=[image_in, ply_download, viewer_html, status_md, generate_btn, clear_btn, open_viewer_btn, current_viewer_url],
+            queue=False,
+            show_progress="hidden",
+        )
+        
+        # Open viewer in new tab using global URL
+        open_viewer_btn.click(
+            fn=None,
+            js="() => { window.openSharpViewer(); }",
+        )
+
+        demo.queue(max_size=DEFAULT_QUEUE_MAX_SIZE, default_concurrency_limit=1)
+        return demo
+
+
+demo = build_demo()
 
-demo = gr.Interface(fn=greet, inputs="text", outputs="text")
-demo.launch()
+if __name__ == "__main__":
+    demo.launch(theme=THEME, css=CSS, head=HEAD_JS)

model_utils.py

@@ -0,0 +1,367 @@
+"""SHARP inference utilities (PLY export only).
+
+This module intentionally does *not* implement MP4/video rendering.
+It provides a small, Spaces/ZeroGPU-friendly wrapper that:
+- Caches model weights and predictor construction across requests.
+- Runs SHARP inference and exports a canonical `.ply`.
+
+Public API (used by the Gradio app):
+- predict_to_ply_gpu(...)
+"""
+
+from __future__ import annotations
+
+import os
+import threading
+import time
+import uuid
+from dataclasses import dataclass
+from pathlib import Path
+from typing import Final
+
+import torch
+
+try:
+    import spaces
+except Exception:  # pragma: no cover
+    spaces = None  # type: ignore[assignment]
+
+try:
+    # Prefer HF cache / Hub downloads (works with Spaces `preload_from_hub`).
+    from huggingface_hub import hf_hub_download, try_to_load_from_cache
+except Exception:  # pragma: no cover
+    hf_hub_download = None  # type: ignore[assignment]
+    try_to_load_from_cache = None  # type: ignore[assignment]
+
+from sharp.cli.predict import DEFAULT_MODEL_URL, predict_image
+from sharp.models import PredictorParams, create_predictor
+from sharp.utils import io
+from sharp.utils.gaussians import save_ply
+
+# -----------------------------------------------------------------------------
+# Helpers
+# -----------------------------------------------------------------------------
+
+
+def _now_ms() -> int:
+    return int(time.time() * 1000)
+
+
+def _ensure_dir(path: Path) -> Path:
+    path.mkdir(parents=True, exist_ok=True)
+    return path
+
+
+def _make_even(x: int) -> int:
+    return x if x % 2 == 0 else x + 1
+
+
+def _select_device(preference: str = "auto") -> torch.device:
+    """Select the best available device for inference (CPU/CUDA/MPS)."""
+    if preference not in {"auto", "cpu", "cuda", "mps"}:
+        raise ValueError("device preference must be one of: auto|cpu|cuda|mps")
+
+    if preference == "cpu":
+        return torch.device("cpu")
+    if preference == "cuda":
+        return torch.device("cuda" if torch.cuda.is_available() else "cpu")
+    if preference == "mps":
+        return torch.device("mps" if torch.backends.mps.is_available() else "cpu")
+
+    # auto
+    if torch.cuda.is_available():
+        return torch.device("cuda")
+    if torch.backends.mps.is_available():
+        return torch.device("mps")
+    return torch.device("cpu")
+
+
+# -----------------------------------------------------------------------------
+# Prediction outputs
+# -----------------------------------------------------------------------------
+
+
+@dataclass(frozen=True, slots=True)
+class PredictionOutputs:
+    """Outputs of SHARP inference."""
+
+    ply_path: Path
+
+
+# -----------------------------------------------------------------------------
+# Model wrapper
+# -----------------------------------------------------------------------------
+
+
+class ModelWrapper:
+    """Cached SHARP model wrapper for Gradio/Spaces."""
+
+    def __init__(
+        self,
+        *,
+        outputs_dir: str | Path = "outputs",
+        checkpoint_url: str = DEFAULT_MODEL_URL,
+        checkpoint_path: str | Path | None = None,
+        device_preference: str = "auto",
+        keep_model_on_device: bool | None = None,
+        hf_repo_id: str | None = None,
+        hf_filename: str | None = None,
+        hf_revision: str | None = None,
+    ) -> None:
+        self.outputs_dir = _ensure_dir(Path(outputs_dir))
+        self.checkpoint_url = checkpoint_url
+
+        env_ckpt = os.getenv("SHARP_CHECKPOINT_PATH") or os.getenv("SHARP_CHECKPOINT")
+        if checkpoint_path:
+            self.checkpoint_path = Path(checkpoint_path)
+        elif env_ckpt:
+            self.checkpoint_path = Path(env_ckpt)
+        else:
+            self.checkpoint_path = None
+
+        # Optional Hugging Face Hub fallback (useful when direct CDN download fails).
+        self.hf_repo_id = hf_repo_id or os.getenv("SHARP_HF_REPO_ID", "apple/Sharp")
+        self.hf_filename = hf_filename or os.getenv(
+            "SHARP_HF_FILENAME", "sharp_2572gikvuh.pt"
+        )
+        self.hf_revision = hf_revision or os.getenv("SHARP_HF_REVISION") or None
+
+        self.device_preference = device_preference
+
+        # For ZeroGPU, it's safer to not keep large tensors on CUDA across calls.
+        if keep_model_on_device is None:
+            keep_env = (
+                os.getenv("SHARP_KEEP_MODEL_ON_DEVICE")
+            )
+            self.keep_model_on_device = keep_env == "1"
+        else:
+            self.keep_model_on_device = keep_model_on_device
+
+        self._lock = threading.RLock()
+        self._predictor: torch.nn.Module | None = None
+        self._predictor_device: torch.device | None = None
+        self._state_dict: dict | None = None
+
+    def has_cuda(self) -> bool:
+        return torch.cuda.is_available()
+
+    def _load_state_dict(self) -> dict:
+        with self._lock:
+            if self._state_dict is not None:
+                return self._state_dict
+
+            # 1) Explicit local checkpoint path
+            if self.checkpoint_path is not None:
+                try:
+                    self._state_dict = torch.load(
+                        self.checkpoint_path,
+                        weights_only=True,
+                        map_location="cpu",
+                    )
+                    return self._state_dict
+                except Exception as e:
+                    raise RuntimeError(
+                        "Failed to load SHARP checkpoint from local path.\n\n"
+                        f"Path:\n  {self.checkpoint_path}\n\n"
+                        f"Original error:\n  {type(e).__name__}: {e}"
+                    ) from e
+
+            # 2) HF cache (no-network): best match for Spaces `preload_from_hub`.
+            hf_cache_error: Exception | None = None
+            if try_to_load_from_cache is not None:
+                try:
+                    cached = try_to_load_from_cache(
+                        repo_id=self.hf_repo_id,
+                        filename=self.hf_filename,
+                        revision=self.hf_revision,
+                        repo_type="model",
+                    )
+                except TypeError:
+                    cached = try_to_load_from_cache(self.hf_repo_id, self.hf_filename)  # type: ignore[misc]
+
+                try:
+                    if isinstance(cached, str) and Path(cached).exists():
+                        self._state_dict = torch.load(
+                            cached, weights_only=True, map_location="cpu"
+                        )
+                        return self._state_dict
+                except Exception as e:
+                    hf_cache_error = e
+
+            # 3) HF Hub download (reuse cache when available; may download otherwise).
+            hf_error: Exception | None = None
+            if hf_hub_download is not None:
+                # Attempt "local only" mode if supported (avoids network).
+                try:
+                    import inspect
+
+                    if "local_files_only" in inspect.signature(hf_hub_download).parameters:
+                        ckpt_path = hf_hub_download(
+                            repo_id=self.hf_repo_id,
+                            filename=self.hf_filename,
+                            revision=self.hf_revision,
+                            local_files_only=True,
+                        )
+                        if Path(ckpt_path).exists():
+                            self._state_dict = torch.load(
+                                ckpt_path, weights_only=True, map_location="cpu"
+                            )
+                            return self._state_dict
+                except Exception:
+                    pass
+
+                try:
+                    ckpt_path = hf_hub_download(
+                        repo_id=self.hf_repo_id,
+                        filename=self.hf_filename,
+                        revision=self.hf_revision,
+                    )
+                    self._state_dict = torch.load(
+                        ckpt_path,
+                        weights_only=True,
+                        map_location="cpu",
+                    )
+                    return self._state_dict
+                except Exception as e:
+                    hf_error = e
+
+            # 4) Default upstream CDN (torch hub cache). Last resort.
+            url_error: Exception | None = None
+            try:
+                self._state_dict = torch.hub.load_state_dict_from_url(
+                    self.checkpoint_url,
+                    progress=True,
+                    map_location="cpu",
+                )
+                return self._state_dict
+            except Exception as e:
+                url_error = e
+
+            # If we got here: all options failed.
+            hint_lines = [
+                "Failed to load SHARP checkpoint.",
+                "",
+                "Tried (in order):",
+                f"  1) HF cache (preload_from_hub): repo_id={self.hf_repo_id}, filename={self.hf_filename}, revision={self.hf_revision or 'None'}",
+                f"  2) HF Hub download: repo_id={self.hf_repo_id}, filename={self.hf_filename}, revision={self.hf_revision or 'None'}",
+                f"  3) URL (torch hub): {self.checkpoint_url}",
+                "",
+                "If network access is restricted, set a local checkpoint path:",
+                "  - SHARP_CHECKPOINT_PATH=/path/to/sharp_2572gikvuh.pt",
+                "",
+                "Original errors:",
+            ]
+            if try_to_load_from_cache is None:
+                hint_lines.append("  HF cache: huggingface_hub not installed")
+            elif hf_cache_error is not None:
+                hint_lines.append(
+                    f"  HF cache: {type(hf_cache_error).__name__}: {hf_cache_error}"
+                )
+            else:
+                hint_lines.append("  HF cache: (not found in cache)")
+
+            if hf_hub_download is None:
+                hint_lines.append("  HF download: huggingface_hub not installed")
+            else:
+                hint_lines.append(f"  HF download: {type(hf_error).__name__}: {hf_error}")
+
+            hint_lines.append(f"  URL: {type(url_error).__name__}: {url_error}")
+
+            raise RuntimeError("\n".join(hint_lines))
+
+    def _get_predictor(self, device: torch.device) -> torch.nn.Module:
+        with self._lock:
+            if self._predictor is None:
+                state_dict = self._load_state_dict()
+                predictor = create_predictor(PredictorParams())
+                predictor.load_state_dict(state_dict)
+                predictor.eval()
+                self._predictor = predictor
+                self._predictor_device = torch.device("cpu")
+
+            assert self._predictor is not None
+            assert self._predictor_device is not None
+
+            if self._predictor_device != device:
+                self._predictor.to(device)
+                self._predictor_device = device
+
+            return self._predictor
+
+    def _maybe_move_model_back_to_cpu(self) -> None:
+        if self.keep_model_on_device:
+            return
+        with self._lock:
+            if self._predictor is not None and self._predictor_device is not None:
+                if self._predictor_device.type != "cpu":
+                    self._predictor.to("cpu")
+                    self._predictor_device = torch.device("cpu")
+        if torch.cuda.is_available():
+            torch.cuda.empty_cache()
+
+    def _make_output_stem(self, input_path: Path) -> str:
+        return f"{input_path.stem}-{_now_ms()}-{uuid.uuid4().hex[:8]}"
+
+    def predict_to_ply(self, image_path: str | Path) -> PredictionOutputs:
+        """Run SHARP inference and export a .ply file."""
+        image_path = Path(image_path)
+        if not image_path.exists():
+            raise FileNotFoundError(f"Image does not exist: {image_path}")
+
+        device = _select_device(self.device_preference)
+        predictor = self._get_predictor(device)
+
+        image_np, _, f_px = io.load_rgb(image_path)
+        height, width = image_np.shape[:2]
+
+        with torch.no_grad():
+            gaussians = predict_image(predictor, image_np, f_px, device)
+
+        stem = self._make_output_stem(image_path)
+        ply_path = self.outputs_dir / f"{stem}.ply"
+
+        # save_ply expects (height, width).
+        save_ply(gaussians, f_px, (height, width), ply_path)
+
+        self._maybe_move_model_back_to_cpu()
+
+        return PredictionOutputs(ply_path=ply_path)
+
+
+# -----------------------------------------------------------------------------
+# ZeroGPU entrypoints
+# -----------------------------------------------------------------------------
+#
+# IMPORTANT: Do NOT decorate bound instance methods with `@spaces.GPU` on ZeroGPU.
+# The wrapper uses multiprocessing queues and pickles args/kwargs. If `self` is
+# included, Python will try to pickle the whole instance. ModelWrapper contains
+# a threading.RLock (not pickleable) and the model itself should not be pickled.
+#
+# Expose module-level functions that accept only pickleable arguments and
+# create/cache the ModelWrapper inside the GPU worker process.
+
+DEFAULT_OUTPUTS_DIR: Final[Path] = _ensure_dir(Path(__file__).resolve().parent / "outputs")
+
+_GLOBAL_MODEL: ModelWrapper | None = None
+_GLOBAL_MODEL_INIT_LOCK: Final[threading.Lock] = threading.Lock()
+
+
+def get_global_model(*, outputs_dir: str | Path = DEFAULT_OUTPUTS_DIR) -> ModelWrapper:
+    global _GLOBAL_MODEL
+    with _GLOBAL_MODEL_INIT_LOCK:
+        if _GLOBAL_MODEL is None:
+            _GLOBAL_MODEL = ModelWrapper(outputs_dir=outputs_dir)
+    return _GLOBAL_MODEL
+
+def predict_to_ply(
+    image_path: str | Path,
+) -> Path:
+    model = get_global_model()
+    return model.predict_to_ply(image_path).ply_path
+
+
+# Export the GPU-wrapped callable (or a no-op wrapper locally).
+if spaces is not None:
+    predict_to_ply_gpu = spaces.GPU(duration=180)(predict_to_ply)
+else:  # pragma: no cover
+    predict_to_ply_gpu = predict_to_ply

requirements.txt

@@ -0,0 +1,6 @@
+gradio==6.2.0
+spaces==0.44.0
+huggingface_hub>=1.2.3
+torch
+torchvision
+sharp @ git+https://github.com/apple/ml-sharp.git@cdb4ddc6796402bee5487c7312260f2edd8bd5f0

viewer/index.css

@@ -0,0 +1,367 @@
+:root {
+  --canvas-opacity: 1;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  touch-action: none;
+}
+
+body {
+  overflow: hidden;
+  font-family: "Arial", sans-serif;
+  -moz-user-select: none;
+       user-select: none;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+}
+
+canvas {
+  opacity: var(--canvas-opacity);
+}
+
+button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.spacer {
+  flex-grow: 1;
+}
+
+#ui {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+#ui * {
+  pointer-events: auto;
+}
+
+/* poster */
+#poster {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: var(--poster-url);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+/* loadingWrap */
+#loadingWrap {
+  position: fixed;
+  bottom: 120px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 380px;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+}
+#loadingWrap > #loadingText {
+  font-size: 18px;
+  color: #fff;
+  text-align: center;
+  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+}
+#loadingWrap > #loadingBar {
+  width: 100%;
+  height: 10px;
+  margin-top: 8px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+/* controlsWrap */
+#controlsWrap {
+  position: absolute;
+  left: max(16px, env(safe-area-inset-left));
+  right: max(16px, env(safe-area-inset-right));
+  bottom: max(16px, env(safe-area-inset-bottom));
+  display: flex;
+  flex-direction: column;
+}
+#controlsWrap.faded-in {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.5s ease-out;
+}
+#controlsWrap.faded-out {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s 0.5s, opacity 0.5s ease-out;
+}
+#controlsWrap > #timelineContainer {
+  height: 30px;
+  cursor: pointer;
+}
+#controlsWrap > #timelineContainer > #line {
+  width: 100%;
+  height: 50%;
+  border-bottom: 4px solid #d9d9d9;
+}
+#controlsWrap > #timelineContainer > #handle {
+  position: absolute;
+  top: 16.5px;
+  width: 12px;
+  height: 12px;
+  transform: translate(-50%, -50%);
+  border: 2px solid #d9d9d9;
+  border-radius: 50%;
+  background-color: #FFAF50;
+}
+#controlsWrap > #timelineContainer > #time {
+  position: absolute;
+  top: 0;
+  padding: 2px 4px;
+  transform: translate(-50%, -100%);
+  font-size: 12px;
+  border-radius: 4px;
+  color: #fff;
+  background-color: rgba(40, 40, 40, 0.5);
+}
+#controlsWrap > #buttonsContainer {
+  display: flex;
+  gap: 8px;
+  /* controlButton */
+}
+#controlsWrap > #buttonsContainer .controlButton {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  cursor: pointer;
+  color: #E0DCDD;
+  background-color: transparent;
+}
+#controlsWrap > #buttonsContainer .controlButton:hover {
+  color: #fff;
+}
+#controlsWrap > #buttonsContainer .controlButton {
+  /* icon styling */
+}
+#controlsWrap > #buttonsContainer .controlButton > svg {
+  display: block;
+  margin: auto;
+}
+#controlsWrap > #buttonsContainer .controlButton > svg > g.stroke {
+  fill: none;
+  stroke: black;
+  stroke-width: 2;
+  stroke-linejoin: round;
+  opacity: 0.4;
+}
+#controlsWrap > #buttonsContainer .controlButton > svg > g.fill {
+  fill: currentColor;
+  stroke: none;
+}
+#controlsWrap > #buttonsContainer .controlButton {
+  /* camera toggle styling */
+}
+#controlsWrap > #buttonsContainer .controlButton.toggle {
+  background: linear-gradient(90deg, transparent 0%, transparent 50%, #F60 50%, #F60 100%);
+  background-size: 200% 100%;
+  background-position: 100% 0%;
+  background-repeat: no-repeat;
+  transition: background-position 0.1s ease-in-out;
+}
+#controlsWrap > #buttonsContainer .controlButton.toggle.left {
+  margin-right: -4px;
+  border-radius: 4px 0px 0px 4px;
+}
+#controlsWrap > #buttonsContainer .controlButton.toggle.left:not(.active) {
+  background-position: 0% 0%;
+}
+#controlsWrap > #buttonsContainer .controlButton.toggle.right {
+  margin-left: -4px;
+  margin-right: 20px;
+  border-radius: 0px 4px 4px 0px;
+}
+#controlsWrap > #buttonsContainer .controlButton.toggle.right:not(.active) {
+  background-position: 200% 0%;
+}
+
+/* settingsPanel */
+#settingsPanel {
+  position: fixed;
+  right: max(16px, env(safe-area-inset-right));
+  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 70px);
+  padding: 10px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  font-size: 14px;
+  color: #E0DCDD;
+  background-color: #333;
+}
+#settingsPanel > .settingsRow {
+  display: flex;
+  gap: 4px;
+  width: 100%;
+}
+#settingsPanel > .settingsRow > button {
+  flex-grow: 1;
+  padding: 10px 20px;
+  border: 0;
+  cursor: pointer;
+  color: #E0DCDD;
+  background-color: #141414;
+}
+#settingsPanel > .settingsRow > button:hover {
+  color: #fff;
+}
+#settingsPanel > .settingsRow > div {
+  padding: 8px;
+  cursor: pointer;
+  color: #AAA;
+}
+#settingsPanel > .settingsRow > div.checkMark {
+  width: 16px;
+}
+#settingsPanel > .settingsRow > div.checkMark:not(.active) {
+  color: #333;
+}
+#settingsPanel > .settingsRow > div:hover {
+  color: #E0DCDD;
+}
+#settingsPanel > .divider {
+  width: 100%;
+  height: 1px;
+  margin: 8px 0;
+  background-color: #666;
+}
+
+/* infoPanel */
+#infoPanel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(2px);
+}
+#infoPanel > #infoPanelContent {
+  position: absolute;
+  top: 40px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  min-height: 280px;
+  min-width: 320px;
+  padding: 8px;
+  border-radius: 24px;
+  display: flex;
+  flex-direction: column;
+  color: #E0DCDD;
+  background-color: rgba(51, 51, 51, 0.8);
+}
+#infoPanel > #infoPanelContent > #tabs {
+  display: flex;
+  gap: 16px;
+  padding: 8px;
+  border-radius: 22px;
+  background-color: #282828;
+}
+#infoPanel > #infoPanelContent > #tabs > .tab {
+  padding: 8px;
+  border-radius: 16px;
+  cursor: pointer;
+  flex-grow: 1;
+  text-align: center;
+  font-weight: bold;
+  font-size: 14px;
+  color: #E0DCDD;
+  transition: background-color 250ms ease;
+}
+#infoPanel > #infoPanelContent > #tabs > .tab:hover {
+  background-color: #444;
+}
+#infoPanel > #infoPanelContent > #tabs > .tab.active {
+  background-color: #444;
+}
+#infoPanel > #infoPanelContent > #infoPanels {
+  padding: 16px;
+}
+#infoPanel > #infoPanelContent > #infoPanels h1 {
+  font-size: 14px;
+  font-weight: bold;
+  padding: 0 0 6px 0;
+  color: #fff;
+}
+#infoPanel > #infoPanelContent > #infoPanels .control-item {
+  display: flex;
+  justify-content: space-between;
+  gap: 32px;
+  line-height: 1.5;
+}
+#infoPanel > #infoPanelContent > #infoPanels .control-item > .control-action {
+  text-align: left;
+}
+#infoPanel > #infoPanelContent > #infoPanels .control-item > .control-key {
+  text-align: right;
+}
+#infoPanel > #infoPanelContent > #infoPanels .control-spacer {
+  border-bottom: 1px dashed #666;
+  margin: 10px 0;
+}
+
+#joystickBase {
+  position: absolute;
+  width: 96px;
+  height: 96px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  touch-action: none;
+  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 50%, black 100%);
+  background-color: rgba(0, 0, 0, 0.1333333333);
+}
+#joystickBase > #joystick {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  touch-action: none;
+  background-color: rgba(255, 255, 255, 0.5333333333);
+}
+
+#tooltip {
+  display: none;
+  position: absolute;
+  border-radius: 4px;
+  padding: 4px 4px;
+  font-size: 12px;
+  color: #E0DCDD;
+  background-color: #282828;
+}
+
+#annotations {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+#annotations * {
+  pointer-events: auto;
+}

viewer/index.html

@@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>SuperSplat Viewer</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+        <base href="">
+        <link rel="stylesheet" href="./index.css">
+        <script type="module">
+            const createImage = (url) => {
+                const img = new Image();
+                img.src = url;
+                return img;
+            };
+
+            const url = new URL(location.href);
+
+            const posterUrl = url.searchParams.get('poster');
+            const skyboxUrl = url.searchParams.get('skybox');
+            const settingsUrl = url.searchParams.has('settings') ? url.searchParams.get('settings') : './settings.json';
+            const contentUrl = url.searchParams.has('content') ? url.searchParams.get('content') : './scene.ply';
+
+            const sseConfig = {
+                poster: posterUrl && createImage(posterUrl),
+                skyboxUrl,
+                contentUrl,
+                contents: fetch(contentUrl),
+                noui: url.searchParams.has('noui'),
+                noanim: url.searchParams.has('noanim'),
+                ministats: url.searchParams.has('ministats'),
+                colorize: url.searchParams.has('colorize'),
+                unified: url.searchParams.has('unified'),
+                aa: url.searchParams.has('aa')
+            };
+
+            window.sse = {
+                config: sseConfig,
+                settings: fetch(settingsUrl).then(response => response.json())
+            };
+        </script>
+    </head>
+    <body>
+        <pc-app antialias="false" depth="true" high-resolution="true" stencil="false">
+            <pc-scene>
+                <!-- Camera (with XR support) -->
+                <pc-entity name="camera root">
+                    <pc-entity name="camera"></pc-entity>
+                </pc-entity>
+                <!-- Light (for XR controllers) -->
+                <pc-entity name="light" rotation="35 45 0">
+                    <pc-light color="white" intensity="1.5"></pc-light>
+                </pc-entity>
+                <!-- Splat -->
+                <pc-entity name="splat" rotation="0 0 180">
+                </pc-entity>
+            </pc-scene>
+        </pc-app>
+
+        <div id="ui">
+            <div id="poster"></div>
+
+            <!-- Loading Indicator -->
+            <div id="loadingWrap">
+                <div id="loadingText"></div>
+                <div id="loadingBar"></div>
+            </div>
+
+            <div id="controlsWrap" class="faded-in">
+
+                <!-- Timeline Panel -->
+                <div id="timelineContainer" class="hidden">
+                    <div id="line"></div>
+                    <div id="handle"></div>
+                    <div id="time" class="hidden">0:00</div>
+                </div>
+
+                <!-- Buttons Panel -->
+                <div id="buttonsContainer">
+                    <button id="play" class="controlButton hidden">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+                            <g class='stroke'><use href="#playIcon"/></g>
+                            <g class='fill'><use href="#playIcon"/></g>
+                        </svg>
+                    </button>
+                    <button id="pause" class="controlButton hidden">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px">
+                            <g class='stroke'><use href="#pauseIcon"/></g>
+                            <g class='fill'><use href="#pauseIcon"/></g>
+                        </svg>
+                    </button>
+
+                    <div class="spacer"></div>
+
+                    <button id="orbitCamera" class="controlButton toggle left">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+                            <g class='stroke'><use href="#orbitIcon"/></g>
+                            <g class='fill'><use href="#orbitIcon"/></g>
+                        </svg>
+                    </button>
+                    <button id="flyCamera" class="controlButton toggle right">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+                            <g class='stroke'><use href="#flyIcon"/></g>
+                            <g class='fill'><use href="#flyIcon"/></g>
+                        </svg>
+                    </button>
+
+                    <button id="arMode" class="controlButton hidden">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28">
+                            <g class='stroke'><use href="#arIcon"/></g>
+                            <g class='fill'><use href="#arIcon"/></g>
+                        </svg>
+                    </button>
+                    <button id="vrMode" class="controlButton hidden">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28">
+                            <g class='stroke'><use href="#vrIcon"/></g>
+                            <g class='fill'><use href="#vrIcon"/></g>
+                        </svg>
+                    </button>
+
+                    <button id="info" class="controlButton">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+                            <g class='stroke'><use href="#infoIcon"/></g>
+                            <g class='fill'><use href="#infoIcon"/></g>
+                        </svg>
+                    </button>
+                    <button id="settings" class="controlButton">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+                            <g class='stroke'><use href="#settingsIcon"/></g>
+                            <g class='fill'><use href="#settingsIcon"/></g>
+                        </svg>
+                    </button>
+
+                    <button id="enterFullscreen" class="controlButton">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+                            <g class='stroke'><use href="#enterFullscreenIcon"/></g>
+                            <g class='fill'><use href="#enterFullscreenIcon"/></g>
+                        </svg>
+                    </button>
+                    <button id="exitFullscreen" class="controlButton hidden">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+                            <g class='stroke'><use href="#exitFullscreenIcon"/></g>
+                            <g class='fill'><use href="#exitFullscreenIcon"/></g>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Settings Panel -->
+            <div id="settingsPanel" class="hidden">
+                <div class="settingsRow">
+                    <div id="hqCheck" class="checkMark">✓</div>
+                    <div id="hqOption">High Quality Render</div>
+                </div>
+                <div class="settingsRow">
+                    <div id="lqCheck" class="checkMark">✓</div>
+                    <div id="lqOption">Low Quality Render</div>
+                </div>
+                <div class="divider"></div>
+                <div class="settingsRow">
+                    <button id="frame">Frame</button>
+                    <button id="reset">Reset</button>
+                </div>
+            </div>
+
+            <!-- Info Panel -->
+            <div id="infoPanel" class="hidden">
+                <div id="infoPanelContent" onpointerdown="event.stopPropagation()">
+                    <div id="tabs">
+                        <div id="desktopTab" class="tab active">Desktop</div>
+                        <div id="touchTab" class="tab">Touch</div>
+                    </div>
+                    <div id="infoPanels">
+                        <div id="desktopInfoPanel">
+                            <div class="control-spacer"></div>
+                            <h1>Orbit Mode</h1>
+                            <div class="control-item">
+                                <span class="control-action">Orbit</span>
+                                <span class="control-key">Left Mouse</span>
+                            </div>
+                            <div class="control-item">
+                                <span class="control-action">Pan</span>
+                                <span class="control-key">Right Mouse</span>
+                            </div>
+                            <div class="control-item">
+                                <span class="control-action">Zoom</span>
+                                <span class="control-key">Mouse Wheel</span>
+                            </div>
+                            <div class="control-item">
+                                <span class="control-action">Set Focus</span>
+                                <span class="control-key">Double Click</span>
+                            </div>
+                            <div class="control-spacer"></div>
+                            <h1>Fly Mode</h1>
+                            <div class="control-item">
+                                <span class="control-action">Look Around</span>
+                                <span class="control-key">Left Mouse</span>
+                            </div>
+                            <div class="control-item">
+                                <span class="control-action">Fly</span>
+                                <span class="control-key">W,S,A,D</span>
+                            </div>
+                            <div class="control-spacer"></div>
+                            <div class="control-item">
+                                <span class="control-action">Frame Scene</span>
+                                <span class="control-key">F</span>
+                            </div>
+                            <div class="control-item">
+                                <span class="control-action">Reset Camera</span>
+                                <span class="control-key">R</span>
+                            </div>
+                        </div>
+                        <div id="touchInfoPanel" class="hidden">
+                            <div class="control-spacer"></div>
+                            <h1>Orbit Mode</h1>
+                            <div class="control-item">
+                                <span class="control-action">Orbit</span>
+                                <span class="control-key">One Finger Drag</span>
+                            </div>
+                            <div class="control-item">
+                                <span class="control-action">Pan</span>
+                                <span class="control-key">Two Finger Drag</span>
+                            </div>
+                            <div class="control-item">
+                                <span class="control-action">Zoom</span>
+                                <span class="control-key">Pinch</span>
+                            </div>
+                            <div class="control-item">
+                                <span class="control-action">Set Focus</span>
+                                <span class="control-key">Double Tap</span>
+                            </div>
+                            <div class="control-spacer"></div>
+                            <h1>Fly Mode</h1>
+                            <div class="control-item">
+                                <span class="control-action">Look Around</span>
+                                <span class="control-key">Touch on Right</span>
+                            </div>
+                            <div class="control-item">
+                                <span class="control-action">Fly</span>
+                                <span class="control-key">Touch on Left</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Touch Joystick -->
+            <div id="joystickBase" class="hidden">
+                <div id="joystick"></div>
+            </div>
+
+            <!-- Tooltip -->
+            <div id="tooltip"></div>
+        </div>
+
+        <!-- SVG Icons -->
+        <svg>
+            <symbol id="playIcon" viewBox="-2 0 24 24">
+                <path
+                    d="M1 1.98725C1 1.20022 1.87789 0.730421 2.5332 1.16694L14.5605 9.18061C15.146 9.57066 15.146 10.4302 14.5605 10.8203L2.5332 18.833C1.87788 19.2695 1 18.7997 1 18.0126V1.98725Z"
+                    transform="translate(2 2)"
+                />
+            </symbol>
+            <symbol id="pauseIcon" viewBox="0 0 20 20">
+                <path d="M5 16V4h3v12H5zm7-12h3v12h-3V4z"/>
+            </symbol>
+            <symbol id="orbitIcon" viewBox="-2 -2 20 20">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.44728 1.7561C6.14077 0.763957 8.53159 1.57857 10.4375 3.58357C12.75 3.02099 14.4585 3.40647 14.6491 4.73071C14.7831 5.66256 14.139 6.87994 12.9942 8.09008C13.7427 10.7586 13.2413 13.2551 11.5527 14.2444C9.85867 15.2369 7.46679 14.4208 5.56056 12.4143C3.34914 12.9521 1.691 12.6254 1.38412 11.4371L1.35092 11.2698C1.21678 10.3379 1.85972 9.11931 3.00457 7.90909C2.28693 5.34963 2.72037 2.94871 4.24741 1.88435L4.44728 1.7561ZM11.9889 9.03995C11.002 9.88136 9.79998 10.6808 8.47918 11.3303L8.13673 11.4937C7.70533 11.6942 7.28148 11.8681 6.8698 12.0172C7.32387 12.4287 7.79226 12.7587 8.25326 12.9983C9.39237 13.5903 10.3231 13.574 10.946 13.2092C11.5745 12.841 12.0613 12.0184 12.1263 10.7086C12.1518 10.1934 12.1065 9.62999 11.9889 9.03995ZM3.46225 9.20206C3.15128 9.5802 2.91825 9.93412 2.76238 10.2489C2.54363 10.6909 2.51958 10.967 2.53842 11.0985C2.54902 11.1721 2.56635 11.2146 2.67058 11.2763C2.81832 11.3636 3.12484 11.4626 3.6478 11.467C3.95641 11.4696 4.3074 11.4373 4.69402 11.3707C4.45655 11.0439 4.23084 10.6971 4.02215 10.3303C3.81017 9.95774 3.62416 9.58004 3.46225 9.20206ZM10.0358 4.9423C9.42018 5.13611 8.75205 5.40184 8.05014 5.74698C6.61265 6.45384 5.33887 7.34291 4.37175 8.24373C4.55213 8.73829 4.78227 9.2401 5.06511 9.73722C5.33995 10.2202 5.64271 10.6614 5.96355 11.0575C6.5793 10.8637 7.24782 10.5987 7.94988 10.2535C9.38732 9.54667 10.6605 8.65688 11.6276 7.7561C11.4473 7.26173 11.2176 6.76019 10.9349 6.26326C10.66 5.78001 10.3568 5.33855 10.0358 4.9423ZM7.74675 3.00219C6.60759 2.41015 5.67698 2.42644 5.05405 2.79126C4.42548 3.15953 3.93866 3.98199 3.87371 5.29191C3.84822 5.80668 3.89236 6.36967 4.00978 6.95922C4.91091 6.19088 5.9923 5.45862 7.17905 4.84269L7.52084 4.67016C8.07056 4.39986 8.6096 4.17089 9.12957 3.98266C8.67568 3.57138 8.20757 3.24172 7.74675 3.00219ZM12.3522 4.53344C12.0433 4.53086 11.6918 4.56177 11.3047 4.6285C11.5425 4.95566 11.7689 5.3029 11.9779 5.67016C12.1897 6.04255 12.3753 6.41999 12.5371 6.79777C12.8481 6.41965 13.0818 6.06635 13.2376 5.75154C13.4564 5.30973 13.4804 5.03352 13.4616 4.90193C13.451 4.82831 13.4337 4.7859 13.3294 4.7242C13.1817 4.63684 12.8753 4.53787 12.3522 4.53344Z"/>
+            </symbol>
+            <symbol id="flyIcon" viewBox="-2 -2 20 20">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.33337C13.4727 1.33337 14.6666 2.52728 14.6666 4.00004C14.6666 5.4728 13.4727 6.66671 12 6.66671C11.4931 6.66671 11.0194 6.52491 10.6159 6.27934L10.2721 6.62374C10.0345 6.86142 9.90102 7.18411 9.90102 7.52022V8.47986C9.90102 8.81597 10.0345 9.13866 10.2721 9.37634L10.6159 9.72009C11.0193 9.47463 11.4932 9.33337 12 9.33337C13.4727 9.33337 14.6666 10.5273 14.6666 12C14.6666 13.4728 13.4727 14.6667 12 14.6667C10.5272 14.6667 9.33331 13.4728 9.33331 12C9.33331 11.4932 9.47457 11.0194 9.72003 10.6159L9.37628 10.2722C9.1386 10.0345 8.81591 9.90108 8.4798 9.90108H7.52016C7.18405 9.90108 6.86136 10.0345 6.62368 10.2722L6.27928 10.6159C6.52485 11.0195 6.66665 11.4931 6.66665 12C6.66665 13.4728 5.47274 14.6667 3.99998 14.6667C2.52722 14.6667 1.33331 13.4728 1.33331 12C1.33331 10.5273 2.52722 9.33337 3.99998 9.33337C4.50658 9.33337 4.98008 9.47481 5.38344 9.72009L5.72784 9.37634C5.9655 9.13866 6.09894 8.81597 6.09894 8.47986V7.52022C6.09894 7.18411 5.9655 6.86142 5.72784 6.62374L5.38344 6.27934C4.98001 6.52473 4.5067 6.66671 3.99998 6.66671C2.52722 6.66671 1.33331 5.4728 1.33331 4.00004C1.33331 2.52728 2.52722 1.33337 3.99998 1.33337C5.47274 1.33337 6.66665 2.52728 6.66665 4.00004C6.66665 4.50676 6.52467 4.98008 6.27928 5.3835L6.62368 5.72791C6.86136 5.96556 7.18405 6.099 7.52016 6.099H8.4798C8.81591 6.099 9.1386 5.96556 9.37628 5.72791L9.72003 5.3835C9.47475 4.98014 9.33331 4.50664 9.33331 4.00004C9.33331 2.52728 10.5272 1.33337 12 1.33337ZM3.99998 10.3998C3.11632 10.3998 2.39972 11.1164 2.39972 12C2.39972 12.8837 3.11632 13.6003 3.99998 13.6003C4.88364 13.6003 5.60024 12.8837 5.60024 12C5.60024 11.7911 5.55917 11.5919 5.48631 11.4089L4.41469 12.4812C4.16723 12.7284 3.76625 12.7286 3.51886 12.4812C3.27147 12.2338 3.27158 11.8328 3.51886 11.5853L4.59047 10.5131C4.40769 10.4404 4.20862 10.3998 3.99998 10.3998ZM12 10.3998C11.7911 10.3998 11.5918 10.4403 11.4088 10.5131L12.4811 11.5853C12.7284 11.8328 12.7285 12.2338 12.4811 12.4812C12.2337 12.7286 11.8327 12.7284 11.5853 12.4812L10.513 11.4089C10.4402 11.5918 10.3997 11.7912 10.3997 12C10.3997 12.8837 11.1163 13.6003 12 13.6003C12.8836 13.6003 13.6002 12.8837 13.6002 12C13.6002 11.1164 12.8836 10.3998 12 10.3998ZM3.99998 2.39978C3.11632 2.39978 2.39972 3.11639 2.39972 4.00004C2.39972 4.8837 3.11632 5.6003 3.99998 5.6003C4.20871 5.6003 4.40763 5.55909 4.59047 5.48637L3.51886 4.41475C3.27158 4.16729 3.27147 3.76631 3.51886 3.51892C3.76625 3.27153 4.16723 3.27164 4.41469 3.51892L5.48631 4.59054C5.55903 4.40769 5.60024 4.20877 5.60024 4.00004C5.60024 3.11639 4.88364 2.39978 3.99998 2.39978ZM12 2.39978C11.1163 2.39978 10.3997 3.11639 10.3997 4.00004C10.3997 4.20868 10.4403 4.40775 10.513 4.59054L11.5853 3.51892C11.8327 3.27164 12.2337 3.27153 12.4811 3.51892C12.7285 3.76631 12.7284 4.16729 12.4811 4.41475L11.4088 5.48637C11.5918 5.55923 11.791 5.6003 12 5.6003C12.8836 5.6003 13.6002 4.8837 13.6002 4.00004C13.6002 3.11639 12.8836 2.39978 12 2.39978Z"/>
+            </symbol>
+            <symbol id="arIcon" viewBox="-2 -6 28 28">
+                <path d="M10.9482 16.9199C10.9799 16.9389 11.0201 16.9389 11.0518 16.9199L15.918 14H19.416L11.9775 18.4629C11.3758 18.8239 10.6242 18.8239 10.0225 18.4629L2.58398 14H6.08203L10.9482 16.9199Z"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M12.041 12H9.40527L8.35742 9.27441H3.56055L2.57031 12H0L4.67383 0H7.23633L12.041 12ZM4.30566 7.25195H7.58008L5.92676 2.7998L4.30566 7.25195Z"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M17.0039 0C18.2519 0 19.1577 0.108901 19.7207 0.327148C20.289 0.539972 20.7431 0.922473 21.083 1.47363C21.4229 2.02476 21.5928 2.65491 21.5928 3.36426C21.5928 4.26454 21.3353 5.00931 20.8203 5.59863C20.3051 6.18253 19.5348 6.5513 18.5098 6.7041C19.0196 7.00969 19.4393 7.34532 19.7686 7.71094C20.1031 8.07658 20.5523 8.72611 21.1152 9.65918L22.541 12H19.7207L18.0156 9.38867C17.4104 8.45586 16.9965 7.8691 16.7734 7.62891C16.5505 7.38348 16.3139 7.21724 16.0645 7.12988C15.8148 7.03711 15.4187 6.99023 14.877 6.99023H14.3994V12H12.041V0H17.0039ZM14.3994 5.0752H16.1436C17.2746 5.0752 17.9811 5.02592 18.2627 4.92773C18.5442 4.82951 18.7645 4.66003 18.9238 4.41992C19.0831 4.17982 19.1631 3.87966 19.1631 3.51953C19.163 3.11597 19.057 2.79138 18.8447 2.5459C18.6376 2.29488 18.3424 2.13677 17.96 2.07129C17.7687 2.04401 17.1951 2.03027 16.2393 2.03027H14.3994V5.0752Z"/>
+            </symbol>
+            <symbol id="vrIcon" viewBox="-2 -6 28 28">
+                <path d="M7.90039 16C7.90039 16.6075 8.39249 17.0996 9 17.0996H11V18.9004H9C7.39837 18.9004 6.09961 17.6016 6.09961 16V15H7.90039V16Z"/>
+                <path d="M16.9004 16C16.9004 17.6016 15.6016 18.9004 14 18.9004H12V17.0996H14C14.6075 17.0996 15.0996 16.6075 15.0996 16V15H16.9004V16Z"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.52148 4.70215L6.15918 9.11328L7.76465 4.70215L8.50195 2.7002L9.4834 0H15.9541C17.1903 0 18.0879 0.108014 18.6455 0.324219C19.2081 0.534989 19.6576 0.913398 19.9941 1.45898C20.3308 2.00484 20.499 2.62946 20.499 3.33203C20.499 4.22386 20.2446 4.96215 19.7344 5.5459C19.2241 6.12424 18.4606 6.48928 17.4453 6.64062C17.9503 6.94331 18.3662 7.27555 18.6924 7.6377C19.0238 7.99986 19.4688 8.64321 20.0264 9.56738L21.4385 11.8857H18.6455L16.9561 9.2998C16.3565 8.3758 15.9466 7.79459 15.7256 7.55664C15.5047 7.31345 15.2706 7.14802 15.0234 7.06152C14.7762 6.96965 14.3841 6.92384 13.8477 6.92383H13.374V11.8857H11.0381V2.54395L7.39941 11.8857H4.86133L0.102539 0H2.71289L4.52148 4.70215ZM13.374 5.02637H15.1025C16.2228 5.02636 16.9224 4.97814 17.2012 4.88086C17.4799 4.78356 17.6986 4.61574 17.8564 4.37793C18.0141 4.14017 18.0928 3.84288 18.0928 3.48633C18.0928 3.08641 17.9877 2.7647 17.7773 2.52148C17.5722 2.27286 17.2801 2.11565 16.9014 2.05078C16.712 2.02376 16.1439 2.01075 15.1973 2.01074H13.374V5.02637Z"/>
+            </symbol>
+            <symbol id="infoIcon" viewBox="-2 -2 24 24">
+                <path d="M9.98633 7.58301C10.2598 7.58301 10.4854 7.67643 10.6631 7.86328C10.8408 8.05013 10.9297 8.3099 10.9297 8.64258V14.0361C10.9297 14.4098 10.8408 14.6924 10.6631 14.8838C10.4854 15.0752 10.2598 15.1709 9.98633 15.1709C9.71289 15.1709 9.48958 15.0729 9.31641 14.877C9.14779 14.681 9.06348 14.4007 9.06348 14.0361V8.69727C9.06348 8.32812 9.14779 8.05013 9.31641 7.86328C9.48958 7.67643 9.71289 7.58301 9.98633 7.58301Z"/>
+                <path d="M10.0068 4.88965C10.2484 4.88965 10.4626 4.96712 10.6494 5.12207C10.8363 5.27702 10.9297 5.5026 10.9297 5.79883C10.9297 6.08594 10.8385 6.31152 10.6562 6.47559C10.474 6.63509 10.2575 6.71484 10.0068 6.71484C9.74707 6.71484 9.52376 6.63509 9.33691 6.47559C9.15462 6.31608 9.06348 6.09049 9.06348 5.79883C9.06348 5.53451 9.1569 5.31803 9.34375 5.14941C9.53516 4.97624 9.75618 4.88965 10.0068 4.88965Z"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM10 1.7998C5.47126 1.7998 1.7998 5.47126 1.7998 10C1.7998 14.5287 5.47126 18.2002 10 18.2002C14.5287 18.2002 18.2002 14.5287 18.2002 10C18.2002 5.47126 14.5287 1.7998 10 1.7998Z"/>
+            </symbol>
+            <symbol id="settingsIcon" viewBox="0 0 24 24">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 8C14.2091 8 16 9.79086 16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8ZM12 9.7998C10.785 9.7998 9.7998 10.785 9.7998 12C9.7998 13.215 10.785 14.2002 12 14.2002C13.215 14.2002 14.2002 13.215 14.2002 12C14.2002 10.785 13.215 9.7998 12 9.7998Z"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7119 2.2002C13.1961 2.20028 13.6296 2.49055 13.8164 2.93066L13.8506 3.02051L14.3652 4.56641C14.7875 4.70091 15.1932 4.87075 15.5801 5.07129L17.042 4.3418L17.1299 4.30176C17.5436 4.13502 18.017 4.21245 18.3564 4.50195L18.4268 4.56641L19.4336 5.57324C19.7985 5.93836 19.8889 6.49621 19.6582 6.95801L18.9268 8.41895C19.1274 8.80592 19.2971 9.21159 19.4316 9.63379L20.9795 10.1504C21.4693 10.3138 21.7997 10.7717 21.7998 11.2881V12.7119C21.7997 13.2284 21.4695 13.6873 20.9795 13.8506L19.4316 14.3652C19.2971 14.7875 19.1274 15.1932 18.9268 15.5801L19.6582 17.042C19.8889 17.5038 19.7985 18.0616 19.4336 18.4268L18.4268 19.4336C18.0616 19.7985 17.5038 19.8889 17.042 19.6582L15.5801 18.9268C15.1932 19.1274 14.7875 19.2971 14.3652 19.4316L13.8506 20.9795C13.6873 21.4695 13.2284 21.7997 12.7119 21.7998H11.2881C10.7717 21.7997 10.3138 21.4693 10.1504 20.9795L9.63379 19.4316C9.21159 19.2971 8.80592 19.1274 8.41895 18.9268L6.95801 19.6582C6.49621 19.8889 5.93836 19.7985 5.57324 19.4336L4.56641 18.4268C4.20146 18.0617 4.1112 17.5038 4.3418 17.042L5.07129 15.5801C4.87075 15.1932 4.70091 14.7875 4.56641 14.3652L3.02051 13.8506C2.53057 13.6873 2.20029 13.2283 2.2002 12.7119V11.2881C2.20024 10.7718 2.53076 10.3139 3.02051 10.1504L4.56641 9.63379C4.70094 9.21149 4.86966 8.80498 5.07031 8.41797L4.3418 6.95801C4.11113 6.49617 4.20145 5.93834 4.56641 5.57324L5.57324 4.56641C5.93834 4.20145 6.49617 4.11113 6.95801 4.3418L8.41797 5.07031C8.80498 4.86966 9.21149 4.70094 9.63379 4.56641L10.1504 3.02051L10.1836 2.92969C10.3706 2.49001 10.8042 2.20023 11.2881 2.2002H12.7119ZM11.0186 5.4707L10.8809 5.88477L10.458 5.99316C9.88479 6.13982 9.34317 6.36768 8.84473 6.66309L8.46875 6.88477L8.0791 6.69043L6.50098 5.90137L5.90137 6.50098L6.69043 8.0791L6.88477 8.46875L6.66309 8.84473C6.36768 9.34317 6.13982 9.88479 5.99316 10.458L5.88477 10.8809L5.4707 11.0186L3.7998 11.5762V12.4229L5.4707 12.9805L5.88477 13.1182L5.99316 13.541C6.13969 14.1141 6.36763 14.6556 6.66309 15.1543L6.88477 15.5303L6.69043 15.9199L5.90137 17.498L6.50098 18.0977L8.0791 17.3086L8.46875 17.1133L8.84473 17.3359C9.34314 17.6314 9.88463 17.8591 10.458 18.0059L10.8809 18.1143L11.0186 18.5283L11.5771 20.2002H12.4229L13.1182 18.1143L13.541 18.0059C14.1143 17.8593 14.6556 17.6314 15.1543 17.3359L15.5303 17.1143L15.9199 17.3086L17.498 18.0977L18.0977 17.498L17.3086 15.9199L17.1143 15.5303L17.3359 15.1543C17.6314 14.6556 17.8593 14.1143 18.0059 13.541L18.1143 13.1182L20.2002 12.4229V11.5762L18.1143 10.8809L18.0059 10.458C17.8591 9.88463 17.6314 9.34314 17.3359 8.84473L17.1133 8.46875L17.3086 8.0791L18.0977 6.50098L17.498 5.90137L15.9199 6.69043L15.5303 6.88477L15.1543 6.66309C14.6556 6.36763 14.1141 6.13969 13.541 5.99316L13.1182 5.88477L12.9805 5.4707L12.4229 3.7998H11.5762L11.0186 5.4707Z"/>
+            </symbol>
+            <symbol id="enterFullscreenIcon" viewBox="0 0 24 24">
+                <path d="M3 14.7002C3.49693 14.7002 3.90018 15.1027 3.90039 15.5996V20C3.90039 20.0552 3.94477 20.0996 4 20.0996H8.40039C8.89727 20.0998 9.2998 20.5031 9.2998 21C9.2998 21.4969 8.89727 21.9002 8.40039 21.9004H4C2.95066 21.9004 2.09961 21.0493 2.09961 20V15.5996C2.09982 15.1027 2.50307 14.7002 3 14.7002Z"/>
+                <path d="M21 14.7002C21.4969 14.7002 21.9002 15.1027 21.9004 15.5996V20C21.9004 21.0493 21.0493 21.9004 20 21.9004H15.5996C15.1027 21.9002 14.7002 21.4969 14.7002 21C14.7002 20.5031 15.1027 20.0998 15.5996 20.0996H20C20.0552 20.0996 20.0996 20.0552 20.0996 20V15.5996C20.0998 15.1027 20.5031 14.7002 21 14.7002Z"/>
+                <path d="M8.40039 2.09961C8.89727 2.09982 9.2998 2.50307 9.2998 3C9.2998 3.49693 8.89727 3.90018 8.40039 3.90039H4C3.94477 3.90039 3.90039 3.94477 3.90039 4V8.40039C3.90018 8.89727 3.49693 9.2998 3 9.2998C2.50307 9.2998 2.09982 8.89727 2.09961 8.40039V4C2.09961 2.95066 2.95066 2.09961 4 2.09961H8.40039Z"/>
+                <path d="M20 2.09961C21.0493 2.09961 21.9004 2.95066 21.9004 4V8.40039C21.9002 8.89727 21.4969 9.2998 21 9.2998C20.5031 9.2998 20.0998 8.89727 20.0996 8.40039V4C20.0996 3.94477 20.0552 3.90039 20 3.90039H15.5996C15.1027 3.90018 14.7002 3.49693 14.7002 3C14.7002 2.50307 15.1027 2.09982 15.5996 2.09961H20Z"/>
+            </symbol>
+            <symbol id="exitFullscreenIcon" viewBox="0 0 24 24">
+                <path d="M8 15.0996C8.49706 15.0996 8.90039 15.5029 8.90039 16V21C8.90039 21.4971 8.49706 21.9004 8 21.9004C7.50294 21.9004 7.09961 21.4971 7.09961 21V16.9004H3C2.50294 16.9004 2.09961 16.4971 2.09961 16C2.09961 15.5029 2.50294 15.0996 3 15.0996H8Z" />
+                <path d="M21 15.0996C21.4971 15.0996 21.9004 15.5029 21.9004 16C21.9004 16.4971 21.4971 16.9004 21 16.9004H16.9004V21C16.9004 21.4971 16.4971 21.9004 16 21.9004C15.5029 21.9004 15.0996 21.4971 15.0996 21V16C15.0996 15.5029 15.5029 15.0996 16 15.0996H21Z" />
+                <path d="M8 2.09961C8.49706 2.09961 8.90039 2.50294 8.90039 3V8C8.90039 8.49706 8.49706 8.90039 8 8.90039H3C2.50294 8.90039 2.09961 8.49706 2.09961 8C2.09961 7.50294 2.50294 7.09961 3 7.09961H7.09961V3C7.09961 2.50294 7.50294 2.09961 8 2.09961Z" />
+                <path d="M16 2.09961C16.4971 2.09961 16.9004 2.50294 16.9004 3V7.09961H21C21.4971 7.09961 21.9004 7.50294 21.9004 8C21.9004 8.49706 21.4971 8.90039 21 8.90039H16C15.5029 8.90039 15.0996 8.49706 15.0996 8V3C15.0996 2.50294 15.5029 2.09961 16 2.09961Z" />
+            </symbol>
+        </svg>
+
+        <!-- Application Script -->
+        <script type="module">
+            import { main } from './index.js';
+
+            const { config, settings } = window.sse;
+            const { poster } = config;
+
+            // Show the poster image
+            if (poster) {
+                const element = document.getElementById('poster');
+                element.style.setProperty('--poster-url', `url(${poster.src})`);
+                element.style.display = 'block';
+                element.style.filter = 'blur(40px)';
+
+                // hide the canvas
+                document.documentElement.style.setProperty('--canvas-opacity', '0');
+            }
+
+            document.addEventListener('DOMContentLoaded', async () => {
+                const [appElement, cameraElement, settingsJson] = await Promise.all([
+                    document.querySelector('pc-app').ready(),
+                    document.querySelector('pc-entity[name="camera"]').ready(),
+                    settings
+                ]);
+
+                const viewer = await main(appElement.app, cameraElement.entity, settingsJson, config);
+            });
+        </script>
+    </body>
+</html>

viewer/settings.default.json

@@ -0,0 +1,26 @@
+{
+  "background": {
+    "color": [
+      0,
+      0,
+      0,
+      0
+    ]
+  },
+  "camera": {
+    "fov": 37.84928883210247,
+    "position": [
+      0,
+      1,
+      -1
+    ],
+    "target": [
+      0,
+      0,
+      0
+    ],
+    "startAnim": "none",
+    "animTrack": ""
+  },
+  "animTracks": []
+}