Added web ui;

Added start.command for one-click setup; Updated readme.md for one-click setup;
Added images of web-ui;
Added new web viewer after ply is generated;
Cleaned up project by moving styles and js into seperate files;

README.md

@@ -89,6 +89,21 @@ If you find our work useful, please cite the following paper:
 
 Our codebase is built using multiple opensource contributions, please see [ACKNOWLEDGEMENTS](ACKNOWLEDGEMENTS) for more details.
 
+## Web Interface (One-Click Setup)
+
+For a simple web interface where you can upload images and download 3D Gaussians:
+
+**macOS:** Double-click `start.command` in Finder.
+
+This will automatically:
+- Create the conda environment if it doesn't exist
+- Install all dependencies if needed
+- Start the web server at http://localhost:8000
+
+![](data/web-dark.png)
+![](data/web-light.png)
+
+
 ## License
 
 Please check out the repository [LICENSE](LICENSE) before using the provided code and

src/sharp/web/README.md

@@ -0,0 +1,33 @@
+# Sharp Web Interface
+
+This is a web interface for the Sharp 3D prediction model.
+
+## Prerequisites
+
+Make sure you have the `sharp` package installed (see root README).
+Install the web dependencies:
+
+```bash
+pip install -r requirements.txt
+```
+
+## Running the Server
+
+Run the following command from the `web` directory:
+
+```bash
+python app.py
+```
+
+Or using uvicorn directly:
+
+```bash
+uvicorn app:app --reload --host 0.0.0.0 --port 8000
+```
+
+## Usage
+
+1. Open your browser and navigate to `http://localhost:8000`.
+2. Drag and drop images or click to select them.
+3. Click "Predict 3D Gaussians".
+4. A zip file containing the resulting `.ply` files will be downloaded automatically.

src/sharp/web/app.py

@@ -0,0 +1,184 @@
+import sys
+from pathlib import Path
+import logging
+import shutil
+import tempfile
+import zipfile
+import io as python_io
+import base64
+
+from fastapi import FastAPI, Request, UploadFile, File
+from fastapi.responses import HTMLResponse, StreamingResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+import torch
+import numpy as np
+
+# Add src to path so we can import sharp
+sys.path.append(str(Path(__file__).parent.parent / "src"))
+
+from sharp.models import (
+    PredictorParams,
+    RGBGaussianPredictor,
+    create_predictor,
+)
+from sharp.utils import io as sharp_io
+from sharp.utils.gaussians import save_ply
+from sharp.cli.predict import predict_image, DEFAULT_MODEL_URL
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+LOGGER = logging.getLogger(__name__)
+
+app = FastAPI()
+
+# Mount static files if needed (we created the dir)
+app.mount("/static", StaticFiles(directory=Path(__file__).parent / "static"), name="static")
+
+templates = Jinja2Templates(directory=Path(__file__).parent / "templates")
+
+# Global variables for the model
+predictor: RGBGaussianPredictor = None
+device: torch.device = None
+
+@app.on_event("startup")
+async def startup_event():
+    global predictor, device
+    
+    # Determine device
+    if torch.cuda.is_available():
+        device_str = "cuda"
+    elif torch.mps.is_available():
+        device_str = "mps"
+    else:
+        device_str = "cpu"
+    
+    device = torch.device(device_str)
+    LOGGER.info(f"Using device: {device}")
+
+    # Load model
+    LOGGER.info("Loading model...")
+    try:
+        # Try to load from cache or download
+        state_dict = torch.hub.load_state_dict_from_url(DEFAULT_MODEL_URL, progress=True, map_location=device)
+        
+        predictor = create_predictor(PredictorParams())
+        predictor.load_state_dict(state_dict)
+        predictor.eval()
+        predictor.to(device)
+        LOGGER.info("Model loaded successfully.")
+    except Exception as e:
+        LOGGER.error(f"Failed to load model: {e}")
+        raise e
+
+@app.get("/", response_class=HTMLResponse)
+async def read_root(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+@app.post("/predict")
+async def predict(files: list[UploadFile] = File(...)):
+    """Process images and return PLY data for viewing or download."""
+    if not predictor:
+        return JSONResponse({"error": "Model not loaded"}, status_code=500)
+
+    # Create a temporary directory to process files
+    with tempfile.TemporaryDirectory() as temp_dir:
+        temp_path = Path(temp_dir)
+        results = []
+        
+        for file in files:
+            try:
+                # Save uploaded file
+                file_path = temp_path / file.filename
+                with open(file_path, "wb") as buffer:
+                    shutil.copyfileobj(file.file, buffer)
+                
+                LOGGER.info(f"Processing {file.filename}")
+                
+                # Load image using sharp's IO to get focal length and handle rotation
+                image, _, f_px = sharp_io.load_rgb(file_path)
+                
+                # Run prediction
+                gaussians = predict_image(predictor, image, f_px, device)
+                
+                # Save PLY
+                ply_filename = f"{file_path.stem}.ply"
+                ply_path = temp_path / ply_filename
+                
+                height, width = image.shape[:2]
+                save_ply(gaussians, f_px, (height, width), ply_path)
+                
+                # Read PLY file and encode as base64
+                with open(ply_path, "rb") as f:
+                    ply_data = base64.b64encode(f.read()).decode("utf-8")
+                
+                results.append({
+                    "filename": file.filename,
+                    "ply_filename": ply_filename,
+                    "ply_data": ply_data,
+                    "width": width,
+                    "height": height,
+                    "focal_length": f_px,
+                })
+                
+            except Exception as e:
+                LOGGER.error(f"Error processing {file.filename}: {e}")
+                results.append({
+                    "filename": file.filename,
+                    "error": str(e),
+                })
+        
+        return JSONResponse({"results": results})
+
+
+@app.post("/predict/download")
+async def predict_download(files: list[UploadFile] = File(...)):
+    """Process images and return a ZIP file for download."""
+    if not predictor:
+        return HTMLResponse("Model not loaded", status_code=500)
+
+    # Create a temporary directory to process files
+    with tempfile.TemporaryDirectory() as temp_dir:
+        temp_path = Path(temp_dir)
+        output_zip = python_io.BytesIO()
+        
+        with zipfile.ZipFile(output_zip, "w") as zf:
+            for file in files:
+                try:
+                    # Save uploaded file
+                    file_path = temp_path / file.filename
+                    with open(file_path, "wb") as buffer:
+                        shutil.copyfileobj(file.file, buffer)
+                    
+                    LOGGER.info(f"Processing {file.filename}")
+                    
+                    # Load image using sharp's IO to get focal length and handle rotation
+                    image, _, f_px = sharp_io.load_rgb(file_path)
+                    
+                    # Run prediction
+                    gaussians = predict_image(predictor, image, f_px, device)
+                    
+                    # Save PLY
+                    ply_filename = f"{file_path.stem}.ply"
+                    ply_path = temp_path / ply_filename
+                    
+                    height, width = image.shape[:2]
+                    save_ply(gaussians, f_px, (height, width), ply_path)
+                    
+                    # Add to zip
+                    zf.write(ply_path, ply_filename)
+                    
+                except Exception as e:
+                    LOGGER.error(f"Error processing {file.filename}: {e}")
+                    continue
+        
+        output_zip.seek(0)
+        return StreamingResponse(
+            output_zip, 
+            media_type="application/zip", 
+            headers={"Content-Disposition": "attachment; filename=gaussians.zip"}
+        )
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

src/sharp/web/requirements.txt

@@ -0,0 +1,4 @@
+fastapi
+uvicorn
+python-multipart
+jinja2

src/sharp/web/static/css/styles.css

@@ -0,0 +1,724 @@
+:root {
+    /* Dark mode (default) */
+    --bg-primary: #0a0a0f;
+    --bg-secondary: #1a1a2e;
+    --bg-tertiary: #0f0f1a;
+    --text-primary: #ffffff;
+    --text-secondary: rgba(255, 255, 255, 0.9);
+    --text-muted: rgba(255, 255, 255, 0.6);
+    --text-dim: rgba(255, 255, 255, 0.4);
+    --text-dimmer: rgba(255, 255, 255, 0.3);
+    --card-bg: rgba(255, 255, 255, 0.03);
+    --card-border: rgba(255, 255, 255, 0.08);
+    --card-highlight: rgba(255, 255, 255, 0.05);
+    --upload-bg: rgba(255, 255, 255, 0.02);
+    --upload-border: rgba(255, 255, 255, 0.15);
+    --file-item-bg: rgba(255, 255, 255, 0.05);
+    --loader-bg: rgba(255, 255, 255, 0.03);
+    --particle-connection: rgba(255, 255, 255, 0.02);
+    --glow-color: rgba(99, 102, 241, 0.1);
+    --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
+[data-theme="light"] {
+    --bg-primary: #f8fafc;
+    --bg-secondary: #e2e8f0;
+    --bg-tertiary: #f1f5f9;
+    --text-primary: #0f172a;
+    --text-secondary: #1e293b;
+    --text-muted: #64748b;
+    --text-dim: #94a3b8;
+    --text-dimmer: #cbd5e1;
+    --card-bg: rgba(255, 255, 255, 0.8);
+    --card-border: rgba(0, 0, 0, 0.08);
+    --card-highlight: rgba(255, 255, 255, 0.5);
+    --upload-bg: rgba(99, 102, 241, 0.02);
+    --upload-border: rgba(99, 102, 241, 0.2);
+    --file-item-bg: rgba(99, 102, 241, 0.05);
+    --loader-bg: rgba(99, 102, 241, 0.05);
+    --particle-connection: rgba(99, 102, 241, 0.08);
+    --glow-color: rgba(99, 102, 241, 0.15);
+    --shadow-color: rgba(99, 102, 241, 0.1);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    min-height: 100vh;
+    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
+    color: var(--text-primary);
+    overflow-x: hidden;
+    transition: background 0.3s ease, color 0.3s ease;
+}
+
+#particleCanvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.app-container {
+    position: relative;
+    z-index: 1;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+}
+
+.header {
+    text-align: center;
+    margin-bottom: 2.5rem;
+}
+
+.logo {
+    font-size: 3rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 0.5rem;
+    letter-spacing: -0.02em;
+}
+
+.tagline {
+    font-size: 1.1rem;
+    color: var(--text-muted);
+    font-weight: 400;
+}
+
+.theme-toggle {
+    position: fixed;
+    top: 1.5rem;
+    right: 1.5rem;
+    z-index: 100;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 1px solid var(--card-border);
+    background: var(--card-bg);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 12px var(--shadow-color);
+}
+
+.theme-toggle:hover {
+    transform: scale(1.1);
+    border-color: #a855f7;
+}
+
+.theme-toggle svg {
+    width: 22px;
+    height: 22px;
+    transition: all 0.3s ease;
+}
+
+.theme-toggle .sun-icon {
+    stroke: #f59e0b;
+    display: none;
+}
+
+.theme-toggle .moon-icon {
+    stroke: var(--text-muted);
+}
+
+[data-theme="light"] .theme-toggle .sun-icon {
+    display: block;
+}
+
+[data-theme="light"] .theme-toggle .moon-icon {
+    display: none;
+}
+
+.card {
+    background: var(--card-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid var(--card-border);
+    border-radius: 24px;
+    padding: 2.5rem;
+    width: 100%;
+    max-width: 520px;
+    box-shadow:
+        0 4px 24px var(--shadow-color),
+        0 0 80px var(--glow-color),
+        inset 0 1px 0 var(--card-highlight);
+    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+[data-theme="light"] .card {
+    background: rgba(255, 255, 255, 0.12);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    box-shadow:
+        0 8px 32px rgba(99, 102, 241, 0.1),
+        0 0 60px rgba(99, 102, 241, 0.06),
+        0 0 0 1px rgba(255, 255, 255, 0.3) inset;
+}
+
+.upload-zone {
+    border: 2px dashed var(--upload-border);
+    border-radius: 16px;
+    padding: 3rem 2rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: var(--upload-bg);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    position: relative;
+    overflow: hidden;
+}
+
+[data-theme="light"] .upload-zone {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(99, 102, 241, 0.25);
+    box-shadow:
+        0 4px 16px rgba(99, 102, 241, 0.08),
+        0 0 0 1px rgba(255, 255, 255, 0.25) inset;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+}
+
+[data-theme="light"] .upload-zone:hover {
+    background: rgba(255, 255, 255, 0.18);
+    border-color: rgba(99, 102, 241, 0.4);
+    box-shadow:
+        0 8px 24px rgba(99, 102, 241, 0.12),
+        0 0 0 1px rgba(255, 255, 255, 0.35) inset;
+}
+
+[data-theme="light"] .upload-zone.has-files {
+    background: rgba(34, 197, 94, 0.06);
+    border-color: rgba(34, 197, 94, 0.35);
+    box-shadow:
+        0 4px 16px rgba(34, 197, 94, 0.08),
+        0 0 0 1px rgba(255, 255, 255, 0.25) inset;
+}
+
+.upload-zone::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.upload-zone:hover {
+    border-color: rgba(99, 102, 241, 0.5);
+    transform: translateY(-2px);
+}
+
+.upload-zone:hover::before {
+    opacity: 1;
+}
+
+.upload-zone.drag-over {
+    border-color: #a855f7;
+    background: rgba(168, 85, 247, 0.1);
+}
+
+.upload-zone.has-files {
+    border-color: rgba(34, 197, 94, 0.5);
+    background: rgba(34, 197, 94, 0.05);
+}
+
+.upload-icon {
+    width: 64px;
+    height: 64px;
+    margin: 0 auto 1.25rem;
+    position: relative;
+    z-index: 1;
+}
+
+.upload-icon svg {
+    width: 100%;
+    height: 100%;
+    stroke: var(--text-dim);
+    transition: stroke 0.3s ease;
+}
+
+.upload-zone:hover .upload-icon svg {
+    stroke: #a855f7;
+}
+
+.upload-text {
+    position: relative;
+    z-index: 1;
+}
+
+.upload-text h3 {
+    font-size: 1.1rem;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+    color: var(--text-secondary);
+}
+
+.upload-text p {
+    font-size: 0.875rem;
+    color: var(--text-dim);
+}
+
+.file-list {
+    margin-top: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.file-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    background: var(--file-item-bg);
+    border-radius: 10px;
+    animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.file-item .file-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.file-item .file-icon svg {
+    width: 18px;
+    height: 18px;
+    stroke: white;
+}
+
+.file-item .file-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.file-item .file-name {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.file-item .file-size {
+    font-size: 0.75rem;
+    color: var(--text-dim);
+}
+
+.file-item .file-preview {
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+    object-fit: cover;
+}
+
+.submit-btn {
+    width: 100%;
+    margin-top: 1.5rem;
+    padding: 1rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    font-family: inherit;
+    color: white;
+    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
+    border: none;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.submit-btn::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #db2777 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.submit-btn:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
+}
+
+.submit-btn:hover:not(:disabled)::before {
+    opacity: 1;
+}
+
+.submit-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.submit-btn span {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.loader-container {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 2rem;
+    padding: 2rem;
+    background: var(--loader-bg);
+    border-radius: 16px;
+}
+
+.loader-container.active {
+    display: flex;
+}
+
+.loader {
+    width: 48px;
+    height: 48px;
+    position: relative;
+}
+
+.loader::before,
+.loader::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: 3px solid transparent;
+}
+
+.loader::before {
+    border-top-color: #6366f1;
+    animation: spin 1s linear infinite;
+}
+
+.loader::after {
+    border-right-color: #a855f7;
+    animation: spin 1.5s linear infinite reverse;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.loader-text {
+    margin-top: 1rem;
+    font-size: 0.875rem;
+    color: var(--text-muted);
+}
+
+.loader-subtext {
+    font-size: 0.75rem;
+    color: var(--text-dimmer);
+    margin-top: 0.25rem;
+}
+
+.results {
+    margin-top: 1.5rem;
+}
+
+.result-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem 1.25rem;
+    background: rgba(34, 197, 94, 0.1);
+    border: 1px solid rgba(34, 197, 94, 0.2);
+    border-radius: 12px;
+    animation: fadeIn 0.5s ease;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.result-item .success-icon {
+    width: 40px;
+    height: 40px;
+    background: rgba(34, 197, 94, 0.2);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.result-item .success-icon svg {
+    width: 20px;
+    height: 20px;
+    stroke: #22c55e;
+}
+
+.result-item .result-text {
+    flex: 1;
+}
+
+.result-item .result-title {
+    font-weight: 600;
+    color: #22c55e;
+    font-size: 0.9375rem;
+}
+
+.result-item .result-desc {
+    font-size: 0.8125rem;
+    color: var(--text-muted);
+    margin-top: 0.125rem;
+}
+
+.footer {
+    margin-top: 2rem;
+    text-align: center;
+    font-size: 0.8125rem;
+    color: var(--text-dimmer);
+}
+
+.footer a {
+    color: var(--text-muted);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+.footer a:hover {
+    color: #a855f7;
+}
+
+/* Viewer styles */
+.viewer-container {
+    display: none;
+    flex-direction: column;
+    width: 100%;
+    max-width: 900px;
+    margin-top: 1.5rem;
+}
+
+.viewer-container.active {
+    display: flex;
+}
+
+.viewer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.25rem;
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: 16px 16px 0 0;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.viewer-title {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.viewer-title h3 {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.viewer-title .file-badge {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.75rem;
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
+    border-radius: 20px;
+    color: var(--text-muted);
+}
+
+.viewer-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.viewer-btn {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    font-family: inherit;
+    color: var(--text-secondary);
+    background: var(--file-item-bg);
+    border: 1px solid var(--card-border);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.viewer-btn:hover {
+    background: rgba(99, 102, 241, 0.15);
+    border-color: rgba(99, 102, 241, 0.3);
+}
+
+.viewer-btn svg {
+    width: 16px;
+    height: 16px;
+}
+
+.viewer-btn.primary {
+    background: linear-gradient(135deg, #6366f1, #a855f7);
+    border: none;
+    color: white;
+}
+
+.viewer-btn.primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+}
+
+.viewer-canvas-container {
+    position: relative;
+    width: 100%;
+    height: 500px;
+    background: #000;
+    border-left: 1px solid var(--card-border);
+    border-right: 1px solid var(--card-border);
+    overflow: hidden;
+}
+
+.viewer-canvas-container canvas {
+    width: 100% !important;
+    height: 100% !important;
+}
+
+.viewer-controls-hint {
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0.5rem 1rem;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(10px);
+    border-radius: 8px;
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.7);
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+}
+
+.viewer-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem;
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: 0 0 16px 16px;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.viewer-footer span {
+    font-size: 0.75rem;
+    color: var(--text-dim);
+}
+
+.viewer-footer a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+.viewer-footer a:hover {
+    color: var(--text-primary);
+    text-decoration: underline;
+}
+
+.back-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    font-family: inherit;
+    color: var(--text-muted);
+    background: transparent;
+    border: 1px solid var(--card-border);
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-bottom: 1rem;
+}
+
+.back-btn:hover {
+    color: var(--text-secondary);
+    border-color: var(--text-dim);
+}
+
+.back-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+/* Hide card when viewing */
+.card.hidden {
+    display: none;
+}
+
+.header.minimized {
+    margin-bottom: 1rem;
+}
+
+.header.minimized .logo {
+    font-size: 2rem;
+}
+
+.header.minimized .tagline {
+    display: none;
+}

src/sharp/web/static/js/main.js

@@ -0,0 +1,331 @@
+// Global state for PLY data (on window so module script can access)
+window.currentPlyData = null;
+window.currentPlyFilename = null;
+
+// Particle system for background
+const canvas = document.getElementById('particleCanvas');
+const ctx = canvas.getContext('2d');
+let particles = [];
+let animationId;
+let mouseX = 0, mouseY = 0;
+
+function resizeCanvas() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+}
+
+class Particle {
+    constructor() {
+        this.reset();
+    }
+
+    reset() {
+        this.x = Math.random() * canvas.width;
+        this.y = Math.random() * canvas.height;
+        this.z = Math.random() * 1000;
+        this.baseSize = Math.random() * 2 + 0.5;
+        this.color = this.getColor();
+        this.vx = (Math.random() - 0.5) * 0.3;
+        this.vy = (Math.random() - 0.5) * 0.3;
+        this.vz = (Math.random() - 0.5) * 2;
+    }
+
+    getColor() {
+        const colors = [
+            { r: 99, g: 102, b: 241 },   // indigo
+            { r: 168, g: 85, b: 247 },   // purple
+            { r: 236, g: 72, b: 153 },   // pink
+            { r: 59, g: 130, b: 246 },   // blue
+            { r: 139, g: 92, b: 246 },   // violet
+        ];
+        return colors[Math.floor(Math.random() * colors.length)];
+    }
+
+    update() {
+        // Mouse interaction
+        const dx = mouseX - this.x;
+        const dy = mouseY - this.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist < 150) {
+            const force = (150 - dist) / 150;
+            this.vx -= (dx / dist) * force * 0.5;
+            this.vy -= (dy / dist) * force * 0.5;
+        }
+
+        this.x += this.vx;
+        this.y += this.vy;
+        this.z += this.vz;
+
+        // Damping
+        this.vx *= 0.99;
+        this.vy *= 0.99;
+
+        // Wrap around
+        if (this.x < 0) this.x = canvas.width;
+        if (this.x > canvas.width) this.x = 0;
+        if (this.y < 0) this.y = canvas.height;
+        if (this.y > canvas.height) this.y = 0;
+        if (this.z < 0 || this.z > 1000) this.vz *= -1;
+    }
+
+    draw() {
+        const perspective = 1000 / (1000 + this.z);
+        const size = this.baseSize * perspective * 3;
+        const isLightMode = document.documentElement.getAttribute('data-theme') === 'light';
+        const alpha = perspective * (isLightMode ? 0.4 : 0.6);
+
+        ctx.beginPath();
+        const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, size * 2);
+        gradient.addColorStop(0, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${alpha})`);
+        gradient.addColorStop(1, `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, 0)`);
+        ctx.fillStyle = gradient;
+        ctx.arc(this.x, this.y, size * 2, 0, Math.PI * 2);
+        ctx.fill();
+    }
+}
+
+function initParticles() {
+    particles = [];
+    const count = Math.min(200, Math.floor((canvas.width * canvas.height) / 8000));
+    for (let i = 0; i < count; i++) {
+        particles.push(new Particle());
+    }
+}
+
+function animate() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    particles.forEach(p => {
+        p.update();
+        p.draw();
+    });
+
+    // Draw connections
+    const isLightMode = document.documentElement.getAttribute('data-theme') === 'light';
+    ctx.strokeStyle = isLightMode ? 'rgba(99, 102, 241, 0.08)' : 'rgba(255, 255, 255, 0.02)';
+    ctx.lineWidth = 0.5;
+    for (let i = 0; i < particles.length; i++) {
+        for (let j = i + 1; j < particles.length; j++) {
+            const dx = particles[i].x - particles[j].x;
+            const dy = particles[i].y - particles[j].y;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            if (dist < 100) {
+                ctx.beginPath();
+                ctx.moveTo(particles[i].x, particles[i].y);
+                ctx.lineTo(particles[j].x, particles[j].y);
+                ctx.stroke();
+            }
+        }
+    }
+
+    animationId = requestAnimationFrame(animate);
+}
+
+window.addEventListener('resize', () => {
+    resizeCanvas();
+    initParticles();
+});
+
+document.addEventListener('mousemove', (e) => {
+    mouseX = e.clientX;
+    mouseY = e.clientY;
+});
+
+resizeCanvas();
+initParticles();
+animate();
+
+// Theme toggle functionality
+const themeToggle = document.getElementById('themeToggle');
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+
+function setTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    localStorage.setItem('theme', theme);
+}
+
+function getPreferredTheme() {
+    const stored = localStorage.getItem('theme');
+    if (stored) return stored;
+    return prefersDark.matches ? 'dark' : 'light';
+}
+
+// Initialize theme
+setTheme(getPreferredTheme());
+
+themeToggle.addEventListener('click', () => {
+    const current = document.documentElement.getAttribute('data-theme');
+    setTheme(current === 'light' ? 'dark' : 'light');
+});
+
+// Listen for system theme changes
+prefersDark.addEventListener('change', (e) => {
+    if (!localStorage.getItem('theme')) {
+        setTheme(e.matches ? 'dark' : 'light');
+    }
+});
+
+// Upload functionality
+const dropZone = document.getElementById('dropZone');
+const fileInput = document.getElementById('fileInput');
+const fileList = document.getElementById('fileList');
+const form = document.getElementById('uploadForm');
+const loaderContainer = document.getElementById('loaderContainer');
+const results = document.getElementById('results');
+const submitBtn = document.getElementById('submitBtn');
+
+dropZone.addEventListener('click', () => fileInput.click());
+
+dropZone.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropZone.classList.add('drag-over');
+});
+
+dropZone.addEventListener('dragleave', () => {
+    dropZone.classList.remove('drag-over');
+});
+
+dropZone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropZone.classList.remove('drag-over');
+    fileInput.files = e.dataTransfer.files;
+    updateFileList();
+});
+
+fileInput.addEventListener('change', updateFileList);
+
+function formatFileSize(bytes) {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+}
+
+function updateFileList() {
+    fileList.innerHTML = '';
+
+    if (fileInput.files.length > 0) {
+        dropZone.classList.add('has-files');
+    } else {
+        dropZone.classList.remove('has-files');
+    }
+
+    for (const file of fileInput.files) {
+        const div = document.createElement('div');
+        div.className = 'file-item';
+
+        // Create preview
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const preview = div.querySelector('.file-preview');
+            if (preview) preview.src = e.target.result;
+        };
+        reader.readAsDataURL(file);
+
+        div.innerHTML = `
+            <img class="file-preview" src="" alt="">
+            <div class="file-info">
+                <div class="file-name">${file.name}</div>
+                <div class="file-size">${formatFileSize(file.size)}</div>
+            </div>
+        `;
+        fileList.appendChild(div);
+    }
+}
+
+form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    if (fileInput.files.length === 0) return;
+
+    submitBtn.disabled = true;
+    dropZone.style.display = 'none';
+    fileList.style.display = 'none';
+    submitBtn.style.display = 'none';
+    loaderContainer.classList.add('active');
+    results.innerHTML = '';
+
+    const formData = new FormData();
+    for (const file of fileInput.files) {
+        formData.append('files', file);
+    }
+
+    try {
+        const response = await fetch('/predict', {
+            method: 'POST',
+            body: formData
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+
+            if (data.results && data.results.length > 0) {
+                const result = data.results[0];
+
+                if (result.error) {
+                    showError(result.error);
+                } else {
+                    // Store the PLY data and show the viewer
+                    window.currentPlyData = result.ply_data;
+                    window.currentPlyFilename = result.ply_filename;
+
+                    // Show viewer (check if module loaded)
+                    if (typeof window.showViewer === 'function') {
+                        window.showViewer(result);
+                    } else {
+                        // Fallback: offer download if viewer module failed to load
+                        showError('3D viewer failed to load. Click the download button to get your PLY file.');
+                        // Trigger download
+                        downloadPly(result.ply_data, result.ply_filename);
+                    }
+                }
+            }
+        } else {
+            const error = await response.text();
+            showError(error);
+            // Restore upload UI on error
+            dropZone.style.display = '';
+            fileList.style.display = '';
+            submitBtn.style.display = '';
+        }
+    } catch (err) {
+        showError(err.message);
+        // Restore upload UI on error
+        dropZone.style.display = '';
+        fileList.style.display = '';
+        submitBtn.style.display = '';
+    } finally {
+        submitBtn.disabled = false;
+        loaderContainer.classList.remove('active');
+    }
+});
+
+function showError(message) {
+    results.innerHTML = `
+        <div class="result-item" style="background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.2);">
+            <div class="success-icon" style="background: rgba(239, 68, 68, 0.2);">
+                <svg viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </div>
+            <div class="result-text">
+                <div class="result-title" style="color: #ef4444;">Error</div>
+                <div class="result-desc">${message}</div>
+            </div>
+        </div>
+    `;
+}
+
+function downloadPly(plyData, filename) {
+    const binaryString = atob(plyData);
+    const bytes = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+    }
+    const blob = new Blob([bytes], { type: 'application/octet-stream' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+}

src/sharp/web/static/js/viewer.js

@@ -0,0 +1,175 @@
+import * as GaussianSplats3D from '@mkkellogg/gaussian-splats-3d';
+import * as THREE from 'three';
+
+// Make THREE available globally for the viewer
+window.THREE = THREE;
+window.GaussianSplats3D = GaussianSplats3D;
+
+// Viewer state
+let viewer = null;
+let initialCameraPosition = null;
+let initialCameraTarget = null;
+
+// DOM elements
+const card = document.querySelector('.card');
+const header = document.querySelector('.header');
+const viewerContainer = document.getElementById('viewerContainer');
+const viewerCanvasContainer = document.getElementById('viewerCanvasContainer');
+const viewerFilename = document.getElementById('viewerFilename');
+const backBtn = document.getElementById('backBtn');
+const resetViewBtn = document.getElementById('resetViewBtn');
+const downloadBtn = document.getElementById('downloadBtn');
+const controlsHint = document.getElementById('controlsHint');
+
+// Expose showViewer to global scope
+window.showViewer = async function (result) {
+    // Update filename badge
+    viewerFilename.textContent = result.ply_filename;
+
+    // Hide card and show viewer
+    card.classList.add('hidden');
+    header.classList.add('minimized');
+    viewerContainer.classList.add('active');
+
+    // Decode base64 PLY data
+    const binaryString = atob(result.ply_data);
+    const bytes = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+    }
+    const plyBlob = new Blob([bytes], { type: 'application/octet-stream' });
+    const plyUrl = URL.createObjectURL(plyBlob);
+
+    // Clean up previous viewer if exists
+    if (viewer) {
+        viewer.dispose();
+        viewer = null;
+        // Clear the container
+        while (viewerCanvasContainer.firstChild) {
+            if (viewerCanvasContainer.firstChild.id !== 'controlsHint') {
+                viewerCanvasContainer.removeChild(viewerCanvasContainer.firstChild);
+            } else {
+                break;
+            }
+        }
+    }
+
+    // Wait for container to be visible and sized
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    try {
+        // Create the Gaussian Splat viewer
+        viewer = new GaussianSplats3D.Viewer({
+            cameraUp: [0, -1, 0],
+            initialCameraPosition: [0, 0, -3],
+            initialCameraLookAt: [0, 0, 0],
+            rootElement: viewerCanvasContainer,
+            sharedMemoryForWorkers: false,
+            dynamicScene: false,
+            sceneRevealMode: GaussianSplats3D.SceneRevealMode.Instant,
+            antialiased: true,
+        });
+
+        // Load the PLY file - specify format since blob URLs don't have extensions
+        await viewer.addSplatScene(plyUrl, {
+            splatAlphaRemovalThreshold: 5,
+            showLoadingUI: false,
+            progressiveLoad: false,
+            format: GaussianSplats3D.SceneFormat.Ply,
+        });
+
+        viewer.start();
+
+        // Store initial camera state for reset
+        if (viewer.camera) {
+            initialCameraPosition = viewer.camera.position.clone();
+            initialCameraTarget = new THREE.Vector3(0, 0, 0);
+        }
+
+        // Hide controls hint after a few seconds
+        setTimeout(() => {
+            controlsHint.style.opacity = '0';
+        }, 5000);
+
+        // Cleanup blob URL after loading
+        URL.revokeObjectURL(plyUrl);
+
+    } catch (error) {
+        console.error('Error loading Gaussian Splat:', error);
+        viewerCanvasContainer.innerHTML = `
+            <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #ef4444; text-align: center; padding: 2rem;">
+                <div>
+                    <p style="font-size: 1.1rem; margin-bottom: 0.5rem;">Failed to load 3D viewer</p>
+                    <p style="font-size: 0.875rem; opacity: 0.7;">${error.message}</p>
+                </div>
+            </div>
+        `;
+    }
+};
+
+// Back button handler
+backBtn.addEventListener('click', () => {
+    // Clean up viewer
+    if (viewer) {
+        viewer.dispose();
+        viewer = null;
+    }
+
+    // Clear the canvas container except for the hint
+    const hint = document.getElementById('controlsHint');
+    viewerCanvasContainer.innerHTML = '';
+    if (hint) {
+        hint.style.opacity = '1';
+        viewerCanvasContainer.appendChild(hint);
+    }
+
+    // Restore upload UI elements
+    const dropZone = document.getElementById('dropZone');
+    const fileList = document.getElementById('fileList');
+    const submitBtn = document.getElementById('submitBtn');
+    dropZone.style.display = '';
+    fileList.style.display = '';
+    submitBtn.style.display = '';
+
+    // Show card and hide viewer
+    card.classList.remove('hidden');
+    header.classList.remove('minimized');
+    viewerContainer.classList.remove('active');
+});
+
+// Reset view button handler
+resetViewBtn.addEventListener('click', () => {
+    if (viewer && viewer.camera && initialCameraPosition) {
+        viewer.camera.position.copy(initialCameraPosition);
+        viewer.camera.lookAt(initialCameraTarget);
+        if (viewer.controls) {
+            viewer.controls.target.copy(initialCameraTarget);
+            viewer.controls.update();
+        }
+    }
+});
+
+// Download button handler
+downloadBtn.addEventListener('click', () => {
+    if (window.currentPlyData && window.currentPlyFilename) {
+        const binaryString = atob(window.currentPlyData);
+        const bytes = new Uint8Array(binaryString.length);
+        for (let i = 0; i < binaryString.length; i++) {
+            bytes[i] = binaryString.charCodeAt(i);
+        }
+        const blob = new Blob([bytes], { type: 'application/octet-stream' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = window.currentPlyFilename;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+});
+
+// Handle window resize for the viewer
+window.addEventListener('resize', () => {
+    if (viewer && viewerContainer.classList.contains('active')) {
+        // The viewer should handle resize automatically
+    }
+});

src/sharp/web/templates/index.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sharp</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', path='css/styles.css') }}">
+    <script type="importmap">
+    {
+        "imports": {
+            "three": "https://esm.sh/three@0.164.0",
+            "@mkkellogg/gaussian-splats-3d": "https://esm.sh/@mkkellogg/gaussian-splats-3d@0.4.6"
+        }
+    }
+    </script>
+</head>
+
+<body>
+    <canvas id="particleCanvas"></canvas>
+
+    <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
+        <svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round"
+            stroke-linejoin="round">
+            <circle cx="12" cy="12" r="5" />
+            <line x1="12" y1="1" x2="12" y2="3" />
+            <line x1="12" y1="21" x2="12" y2="23" />
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+            <line x1="1" y1="12" x2="3" y2="12" />
+            <line x1="21" y1="12" x2="23" y2="12" />
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </svg>
+        <svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round"
+            stroke-linejoin="round">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+    </button>
+
+    <div class="app-container">
+        <header class="header">
+            <h1 class="logo">Sharp</h1>
+            <p class="tagline">Transform images into Gaussian Splats</p>
+        </header>
+
+        <div class="card">
+            <form id="uploadForm">
+                <div class="upload-zone" id="dropZone">
+                    <div class="upload-icon">
+                        <svg viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke-linecap="round"
+                            stroke-linejoin="round">
+                            <path d="M12 16V4m0 0l-4 4m4-4l4 4" />
+                            <path d="M3 20h18" />
+                        </svg>
+                    </div>
+                    <div class="upload-text">
+                        <h3>Drop your image here</h3>
+                        <p>or click to browse</p>
+                    </div>
+                    <input type="file" id="fileInput" name="files" accept="image/*" style="display: none">
+                </div>
+
+                <div class="file-list" id="fileList"></div>
+
+                <button type="submit" class="submit-btn" id="submitBtn">
+                    <span>
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M12 3v18M3 12l9 9 9-9" />
+                        </svg>
+                        Generate
+                    </span>
+                </button>
+            </form>
+
+            <div class="loader-container" id="loaderContainer">
+                <div class="loader"></div>
+                <p class="loader-text">Generating Gaussian Splats...</p>
+                <p class="loader-subtext">This may take a moment</p>
+            </div>
+
+            <div class="results" id="results"></div>
+        </div>
+
+        <!-- 3D Viewer Container -->
+        <div class="viewer-container" id="viewerContainer">
+            <button class="back-btn" id="backBtn">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                    stroke-linejoin="round">
+                    <path d="M19 12H5M12 19l-7-7 7-7" />
+                </svg>
+                Back to Upload
+            </button>
+
+            <div class="viewer-header">
+                <div class="viewer-title">
+                    <h3>3D Gaussian Splat Viewer</h3>
+                    <span class="file-badge" id="viewerFilename">output.ply</span>
+                </div>
+                <div class="viewer-actions">
+                    <button class="viewer-btn" id="resetViewBtn">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                            stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+                            <path d="M3 3v5h5" />
+                        </svg>
+                        Reset View
+                    </button>
+                    <button class="viewer-btn primary" id="downloadBtn">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                            stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                            <polyline points="7 10 12 15 17 10" />
+                            <line x1="12" y1="15" x2="12" y2="3" />
+                        </svg>
+                        Download PLY
+                    </button>
+                </div>
+            </div>
+
+            <div class="viewer-canvas-container" id="viewerCanvasContainer">
+                <div class="viewer-controls-hint" id="controlsHint">
+                    🖱️ Left click + drag to rotate • Scroll to zoom • Right click + drag to pan
+                </div>
+            </div>
+
+            <div class="viewer-footer">
+                <span>Powered by <a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a> & <a
+                        href="https://github.com/mkkellogg/GaussianSplats3D" target="_blank" rel="noopener">Gaussian
+                        Splats 3D</a></span>
+            </div>
+        </div>
+
+        <footer class="footer">
+            <p><a href="https://apple.github.io/ml-sharp/" target="_blank" rel="noopener">Mescheder et al., 2025</a> •
+                Sharp: Monocular View Synthesis in Less Than a Second</p>
+        </footer>
+    </div>
+
+    <!-- Main application script -->
+    <script src="{{ url_for('static', path='js/main.js') }}"></script>
+
+    <!-- 3D Gaussian Splat Viewer Module -->
+    <script type="module" src="{{ url_for('static', path='js/viewer.js') }}"></script>
+</body>
+
+</html>

start.command

@@ -0,0 +1,94 @@
+#!/bin/bash
+# Sharp Web Interface - One-Click Launcher
+# Double-click this file to start the Sharp web interface
+
+# Change to the script's directory
+cd "$(dirname "$0")"
+
+ENV_NAME="sharp"
+PYTHON_VERSION="3.13"
+
+echo "======================================"
+echo "  Sharp 3D Prediction - Web Interface"
+echo "======================================"
+echo ""
+
+# Check if conda is available
+if ! command -v conda &> /dev/null; then
+    echo "❌ Conda is not installed or not in PATH."
+    echo ""
+    echo "Please install Miniconda or Anaconda first:"
+    echo "  https://docs.conda.io/en/latest/miniconda.html"
+    echo ""
+    read -p "Press Enter to exit..."
+    exit 1
+fi
+
+# Initialize conda for this shell session
+eval "$(conda shell.bash hook)"
+
+# Check if the environment exists
+if ! conda env list | grep -q "^${ENV_NAME} "; then
+    echo "📦 Creating conda environment '${ENV_NAME}' with Python ${PYTHON_VERSION}..."
+    conda create -n "$ENV_NAME" python="$PYTHON_VERSION" -y
+    if [ $? -ne 0 ]; then
+        echo "❌ Failed to create conda environment."
+        read -p "Press Enter to exit..."
+        exit 1
+    fi
+    echo "✅ Environment created."
+    echo ""
+fi
+
+# Activate the environment
+echo "🔄 Activating conda environment '${ENV_NAME}'..."
+conda activate "$ENV_NAME"
+if [ $? -ne 0 ]; then
+    echo "❌ Failed to activate conda environment."
+    read -p "Press Enter to exit..."
+    exit 1
+fi
+
+# Check if sharp is installed by trying to import it
+echo "🔍 Checking if dependencies are installed..."
+if ! python -c "import sharp" 2>/dev/null; then
+    echo "📦 Installing project dependencies (this may take a few minutes)..."
+    pip install -r requirements.txt
+    if [ $? -ne 0 ]; then
+        echo "❌ Failed to install requirements."
+        read -p "Press Enter to exit..."
+        exit 1
+    fi
+    echo "✅ Dependencies installed."
+    echo ""
+fi
+
+# Check if web dependencies are installed
+if ! python -c "import fastapi" 2>/dev/null; then
+    echo "📦 Installing web interface dependencies..."
+    pip install -r src/sharp/web/requirements.txt
+    if [ $? -ne 0 ]; then
+        echo "❌ Failed to install web requirements."
+        read -p "Press Enter to exit..."
+        exit 1
+    fi
+    echo "✅ Web dependencies installed."
+    echo ""
+fi
+
+echo "======================================"
+echo "🚀 Starting Sharp Web Interface..."
+echo "======================================"
+echo ""
+echo "Open your browser and go to:"
+echo ""
+echo "  👉  http://localhost:8000"
+echo ""
+echo "Press Ctrl+C to stop the server."
+echo ""
+
+# Start the web server
+python src/sharp/web/app.py
+
+# Keep terminal open if server stops unexpectedly
+read -p "Press Enter to exit..."