| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DA-2 WebGPU Demo</title> | |
| <!-- Load ONNX Runtime Web with WebGPU support --> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ort.webgpu.min.js"></script> | |
| <style> | |
| body { font-family: sans-serif; padding: 20px; max-width: 1200px; margin: 0 auto; } | |
| canvas { max-width: 100%; border: 1px solid #ccc; margin-top: 10px; display: block; } | |
| #controls { margin-bottom: 20px; padding: 10px; background: #f0f0f0; border-radius: 5px; } | |
| .container { display: flex; flex-wrap: wrap; gap: 20px; } | |
| .view { flex: 1; min-width: 300px; } | |
| #status { margin-left: 10px; font-weight: bold; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>DA-2 Depth Estimation (WebGPU)</h1> | |
| <p>Upload a 360° panorama image to estimate depth.</p> | |
| <div id="controls"> | |
| <input type="file" id="imageInput" accept="image/*"> | |
| <button id="runBtn" disabled>Run Inference</button> | |
| <span id="status">Initializing...</span> | |
| </div> | |
| <div class="container"> | |
| <div class="view"> | |
| <h3>Input Image</h3> | |
| <canvas id="inputCanvas"></canvas> | |
| </div> | |
| <div class="view"> | |
| <h3>Depth Map</h3> | |
| <canvas id="outputCanvas"></canvas> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |