| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> |
| <title>Hand Tracker - Reachy Mini</title> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
|
|
| |
| <div id="loginView" class="login-view"> |
| <div class="login-card"> |
| <h2>Hand Tracker</h2> |
| <p>Track your hand with Reachy Mini's camera — inference runs in your browser.</p> |
| <button class="btn-hf" id="loginBtn"> |
| <svg width="16" height="16" viewBox="0 0 95 88" fill="currentColor"> |
| <path d="M47.5 0C26.3 0 9.1 17.2 9.1 38.4v2.9c0 4.5 1.1 9 3.2 13L0 88h95L82.7 54.3c2.1-4 3.2-8.5 3.2-13v-2.9C85.9 17.2 68.7 0 47.5 0z"/> |
| </svg> |
| Sign in with Hugging Face |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="appView" class="app-view"> |
| <header> |
| <div class="brand">Hand Tracker <span>Reachy Mini</span></div> |
| <div class="user-info"> |
| <span id="username"></span> |
| <button class="btn-logout" id="logoutBtn">Sign out</button> |
| </div> |
| </header> |
|
|
| <main> |
| <div class="video-container"> |
| <video id="video" autoplay playsinline muted></video> |
| <canvas id="overlay"></canvas> |
|
|
| <div class="hud"> |
| <div class="hud-top"> |
| <div class="badge-group"> |
| <div class="badge status-disconnected" id="statusBadge">Disconnected</div> |
| <div class="badge hidden" id="latencyBadge">--</div> |
| </div> |
| <div class="badge-group"> |
| <div class="badge hidden" id="fpsBadge">-- fps</div> |
| </div> |
| </div> |
| <div class="hud-bottom"> |
| <div class="badge tracking-disabled hidden" id="trackBadge">Tracking off</div> |
| <div class="badge hidden" id="headBadge">Y:0 P:0</div> |
| </div> |
| </div> |
|
|
| <div class="model-loading hidden" id="modelLoading"> |
| <div class="spinner"></div> |
| Loading hand detection model... |
| </div> |
| </div> |
|
|
| <div class="controls"> |
| <button class="btn btn-connect" id="connectBtn">Connect</button> |
| <select id="robotList" class="hidden"> |
| <option value="">Select robot...</option> |
| </select> |
| <button class="btn btn-start" id="startBtn" disabled>Start</button> |
| <button class="btn btn-stop" id="stopBtn" disabled>Stop</button> |
|
|
| <div class="spacer"></div> |
|
|
| <label class="toggle"> |
| <input type="checkbox" id="trackingToggle" checked> |
| <span>Track</span> |
| </label> |
| </div> |
| </main> |
| </div> |
|
|
| <script type="module" src="app.js"></script> |
| </body> |
| </html> |
|
|
