Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta | |
| name="viewport" | |
| content="width=device-width, initial-scale=1.0, viewport-fit=cover" | |
| > | |
| <meta | |
| name="theme-color" | |
| content="#070a0d" | |
| > | |
| <title>LocateAnything Live</title> | |
| <link | |
| rel="stylesheet" | |
| href="/static/style.css" | |
| > | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <!-- ============================= --> | |
| <!-- Top navigation --> | |
| <!-- ============================= --> | |
| <header class="topbar"> | |
| <div class="brand"> | |
| <div class="brand-mark"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <div> | |
| <div class="brand-name"> | |
| Locate<span>Anything</span> | |
| </div> | |
| <div class="brand-version"> | |
| LIVE V2 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="connection"> | |
| <span | |
| id="connectionDot" | |
| class="connection-dot offline" | |
| ></span> | |
| <span id="connectionText"> | |
| Connecting | |
| </span> | |
| </div> | |
| </header> | |
| <!-- ============================= --> | |
| <!-- Main --> | |
| <!-- ============================= --> | |
| <main class="main"> | |
| <!-- Camera --> | |
| <section class="viewer"> | |
| <div class="camera-card"> | |
| <video | |
| id="camera" | |
| autoplay | |
| muted | |
| playsinline | |
| ></video> | |
| <canvas | |
| id="overlay" | |
| ></canvas> | |
| <div | |
| id="cameraPlaceholder" | |
| class="camera-placeholder" | |
| > | |
| <div class="camera-icon"> | |
| <svg | |
| viewBox="0 0 24 24" | |
| aria-hidden="true" | |
| > | |
| <path | |
| d="M15 10l4.5-2.5A1 1 0 0 1 21 8.37v7.26a1 1 0 0 1-1.5.87L15 14" | |
| /> | |
| <rect | |
| x="3" | |
| y="6" | |
| width="12" | |
| height="12" | |
| rx="2" | |
| /> | |
| </svg> | |
| </div> | |
| <h2> | |
| Camera ready | |
| </h2> | |
| <p> | |
| Start the camera to begin | |
| live visual localization. | |
| </p> | |
| <button | |
| id="startButton" | |
| class="primary-button" | |
| type="button" | |
| > | |
| Start camera | |
| </button> | |
| </div> | |
| <!-- Live badge --> | |
| <div | |
| id="liveBadge" | |
| class="live-badge hidden" | |
| > | |
| <span class="live-pulse"></span> | |
| LIVE | |
| </div> | |
| <!-- FPS --> | |
| <div | |
| id="fpsBadge" | |
| class="fps-badge hidden" | |
| > | |
| 0 FPS | |
| </div> | |
| <!-- Center reticle --> | |
| <div | |
| id="reticle" | |
| class="reticle hidden" | |
| ></div> | |
| </div> | |
| <!-- Camera controls --> | |
| <div class="camera-controls"> | |
| <button | |
| id="stopButton" | |
| class="control-button danger" | |
| type="button" | |
| disabled | |
| > | |
| <span class="button-icon">■</span> | |
| Stop | |
| </button> | |
| <button | |
| id="snapshotButton" | |
| class="control-button" | |
| type="button" | |
| disabled | |
| > | |
| <span class="button-icon">◉</span> | |
| Snapshot | |
| </button> | |
| <label | |
| class="control-button upload-button" | |
| > | |
| <span class="button-icon"> | |
| ↑ | |
| </span> | |
| Upload | |
| <input | |
| id="imageUpload" | |
| type="file" | |
| accept="image/*" | |
| hidden | |
| > | |
| </label> | |
| </div> | |
| </section> | |
| <!-- ============================= --> | |
| <!-- Control panel --> | |
| <!-- ============================= --> | |
| <aside class="sidebar"> | |
| <div class="panel"> | |
| <div class="panel-header"> | |
| <div> | |
| <div class="eyebrow"> | |
| VISUAL SEARCH | |
| </div> | |
| <h1> | |
| Find anything. | |
| </h1> | |
| </div> | |
| <div class="model-chip"> | |
| <span></span> | |
| NVIDIA | |
| </div> | |
| </div> | |
| <!-- Search --> | |
| <div class="search-wrapper"> | |
| <svg | |
| class="search-icon" | |
| viewBox="0 0 24 24" | |
| > | |
| <circle | |
| cx="11" | |
| cy="11" | |
| r="7" | |
| /> | |
| <path | |
| d="m16 16 5 5" | |
| /> | |
| </svg> | |
| <input | |
| id="query" | |
| type="text" | |
| value="person" | |
| autocomplete="off" | |
| placeholder="What do you want to find?" | |
| aria-label="Object to locate" | |
| > | |
| <button | |
| id="clearQuery" | |
| class="clear-query" | |
| type="button" | |
| aria-label="Clear search" | |
| > | |
| × | |
| </button> | |
| </div> | |
| <!-- Quick searches --> | |
| <div class="quick-section"> | |
| <div class="section-label"> | |
| QUICK SEARCH | |
| </div> | |
| <div class="chips"> | |
| <button | |
| class="chip active" | |
| data-query="person" | |
| type="button" | |
| > | |
| Person | |
| </button> | |
| <button | |
| class="chip" | |
| data-query="phone" | |
| type="button" | |
| > | |
| Phone | |
| </button> | |
| <button | |
| class="chip" | |
| data-query="bottle" | |
| type="button" | |
| > | |
| Bottle | |
| </button> | |
| <button | |
| class="chip" | |
| data-query="car" | |
| type="button" | |
| > | |
| Car | |
| </button> | |
| <button | |
| class="chip" | |
| data-query="all objects" | |
| type="button" | |
| > | |
| All objects | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mode --> | |
| <div class="mode-section"> | |
| <div class="section-label"> | |
| MODE | |
| </div> | |
| <div class="mode-switch"> | |
| <button | |
| class="mode-button active" | |
| data-mode="ground" | |
| type="button" | |
| > | |
| <strong> | |
| Ground | |
| </strong> | |
| <span> | |
| Natural language | |
| </span> | |
| </button> | |
| <button | |
| class="mode-button" | |
| data-mode="detect" | |
| type="button" | |
| > | |
| <strong> | |
| Detect | |
| </strong> | |
| <span> | |
| Object instances | |
| </span> | |
| </button> | |
| <button | |
| class="mode-button" | |
| data-mode="ocr" | |
| type="button" | |
| > | |
| <strong> | |
| OCR | |
| </strong> | |
| <span> | |
| Visible text | |
| </span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Statistics --> | |
| <div class="stats"> | |
| <div class="stat"> | |
| <div | |
| id="objectCount" | |
| class="stat-value" | |
| > | |
| 0 | |
| </div> | |
| <div class="stat-label"> | |
| Objects | |
| </div> | |
| </div> | |
| <div class="stat"> | |
| <div | |
| id="latency" | |
| class="stat-value" | |
| > | |
| — | |
| </div> | |
| <div class="stat-label"> | |
| Latency | |
| </div> | |
| </div> | |
| <div class="stat"> | |
| <div | |
| id="inferenceFps" | |
| class="stat-value" | |
| > | |
| — | |
| </div> | |
| <div class="stat-label"> | |
| Inference | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Detection status --> | |
| <div | |
| id="statusBox" | |
| class="status-box" | |
| > | |
| <div class="status-icon"> | |
| <span></span> | |
| </div> | |
| <div> | |
| <strong id="statusTitle"> | |
| Ready to locate | |
| </strong> | |
| <p id="statusMessage"> | |
| Start the camera and point it | |
| at something. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results --> | |
| <div | |
| id="resultsPanel" | |
| class="results-panel hidden" | |
| > | |
| <div class="results-header"> | |
| <span> | |
| DETECTIONS | |
| </span> | |
| <span | |
| id="resultsCount" | |
| > | |
| 0 | |
| </span> | |
| </div> | |
| <div | |
| id="resultsList" | |
| class="results-list" | |
| ></div> | |
| </div> | |
| <!-- Model information --> | |
| <div class="model-info"> | |
| <div class="model-info-icon"> | |
| ✦ | |
| </div> | |
| <div> | |
| <strong> | |
| LocateAnything-3B | |
| </strong> | |
| <span> | |
| NVIDIA visual grounding | |
| </span> | |
| </div> | |
| </div> | |
| </aside> | |
| </main> | |
| <!-- ============================= --> | |
| <!-- Bottom mobile controls --> | |
| <!-- ============================= --> | |
| <div class="mobile-bar"> | |
| <button | |
| id="mobileStart" | |
| class="mobile-action primary" | |
| type="button" | |
| > | |
| Start | |
| </button> | |
| <button | |
| id="mobileSnapshot" | |
| class="mobile-action" | |
| type="button" | |
| disabled | |
| > | |
| Snapshot | |
| </button> | |
| </div> | |
| <!-- ============================= --> | |
| <!-- Permission message --> | |
| <!-- ============================= --> | |
| <div | |
| id="permissionModal" | |
| class="modal hidden" | |
| > | |
| <div class="modal-card"> | |
| <div class="modal-icon"> | |
| 📷 | |
| </div> | |
| <h2> | |
| Camera permission needed | |
| </h2> | |
| <p> | |
| Allow camera access in your browser | |
| to use live visual localization. | |
| </p> | |
| <button | |
| id="permissionClose" | |
| class="primary-button" | |
| type="button" | |
| > | |
| Try again | |
| </button> | |
| </div> | |
| </div> | |
| <!-- ============================= --> | |
| <!-- JavaScript --> | |
| <!-- ============================= --> | |
| <script src="/static/app.js"></script> | |
| </div> | |
| </body> | |
| </html> |