| <!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> |
|
|
| |
| <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> |
|
|
| |
| <script src="{{ url_for('static', path='js/main.js') }}"></script> |
|
|
| |
| <script type="module" src="{{ url_for('static', path='js/viewer.js') }}"></script> |
| </body> |
|
|
| </html> |
