Spaces:

cduss
/

hand_tracker_live_app_demo

Running

cduss Claude Opus 4.6 commited on Mar 5

Commit

ca21095

1 Parent(s): b8a7602

Hand tracking demo: MediaPipe HandLandmarker + proportional head control

Browser-side inference on robot's WebRTC video stream. Detects biggest hand,
computes centroid offset from center, drives robot head yaw/pitch to track it.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Files changed (6) hide show

hand_tracker_live_app_demo/main.py +5 -58
hand_tracker_live_app_demo/static/index.html +0 -27
hand_tracker_live_app_demo/static/main.js +0 -47
hand_tracker_live_app_demo/static/style.css +0 -25
index.html +637 -35
style.css +345 -398

hand_tracker_live_app_demo/main.py CHANGED Viewed

@@ -1,70 +1,17 @@
 import threading
 from reachy_mini import ReachyMini, ReachyMiniApp
-from reachy_mini.utils import create_head_pose
-import numpy as np
 import time
-from pydantic import BaseModel
 class HandTrackerLiveAppDemo(ReachyMiniApp):
-    # Optional: URL to a custom configuration page for the app
-    # eg. "http://localhost:8042"
-    custom_app_url: str | None = "http://0.0.0.0:8042"
-    # Optional: specify a media backend ("gstreamer", "gstreamer_no_video", "default", etc.)
-    # On the wireless, use gstreamer_no_video to optimise CPU usage if the app does not use video streaming
     request_media_backend: str | None = None
     def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
-        t0 = time.time()
-        antennas_enabled = True
-        sound_play_requested = False
-        # You can ignore this part if you don't want to add settings to your app. If you set custom_app_url to None, you have to remove this part as well.
-        # === vvv ===
-        class AntennaState(BaseModel):
-            enabled: bool
-        @self.settings_app.post("/antennas")
-        def update_antennas_state(state: AntennaState):
-            nonlocal antennas_enabled
-            antennas_enabled = state.enabled
-            return {"antennas_enabled": antennas_enabled}
-        @self.settings_app.post("/play_sound")
-        def request_sound_play():
-            nonlocal sound_play_requested
-            sound_play_requested = True
-        # === ^^^ ===
-        # Main control loop
         while not stop_event.is_set():
-            t = time.time() - t0
-            yaw_deg = 30.0 * np.sin(2.0 * np.pi * 0.2 * t)
-            head_pose = create_head_pose(yaw=yaw_deg, degrees=True)
-            if antennas_enabled:
-                amp_deg = 25.0
-                a = amp_deg * np.sin(2.0 * np.pi * 0.5 * t)
-                antennas_deg = np.array([a, -a])
-            else:
-                antennas_deg = np.array([0.0, 0.0])
-            if sound_play_requested:
-                print("Playing sound...")
-                reachy_mini.media.play_sound("wake_up.wav")
-                sound_play_requested = False
-            antennas_rad = np.deg2rad(antennas_deg)
-            reachy_mini.set_target(
-                head=head_pose,
-                antennas=antennas_rad,
-            )
-            time.sleep(0.02)
 if __name__ == "__main__":
@@ -72,4 +19,4 @@ if __name__ == "__main__":
     try:
         app.wrapped_run()
     except KeyboardInterrupt:
-        app.stop()

 import threading
 from reachy_mini import ReachyMini, ReachyMiniApp
 import time
 class HandTrackerLiveAppDemo(ReachyMiniApp):
+    custom_app_url: str | None = None
     request_media_backend: str | None = None
     def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
+        # All head control is handled by the browser via WebRTC data channel.
+        # This loop just keeps the app alive.
         while not stop_event.is_set():
+            time.sleep(0.1)
 if __name__ == "__main__":
     try:
         app.wrapped_run()
     except KeyboardInterrupt:
+        app.stop()

hand_tracker_live_app_demo/static/index.html DELETED Viewed

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Reachy Mini example app template</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/static/style.css">
-</head>
-<body>
-    <h1>Reachy Mini – Control Panel</h1>
-    <div id="controls">
-        <label style="display:flex; align-items:center; gap:8px;">
-            <input type="checkbox" id="antenna-checkbox" checked>
-            Antennas
-        </label>
-        <button id="sound-btn">Play Sound</button>
-    </div>
-    <div id="status">Antennas status: running</div>
-    <script src="/static/main.js"></script>
-</body>
-</html>

hand_tracker_live_app_demo/static/main.js DELETED Viewed

@@ -1,47 +0,0 @@
-let antennasEnabled = true;
-async function updateAntennasState(enabled) {
-    try {
-        const resp = await fetch("/antennas", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ enabled }),
-        });
-        const data = await resp.json();
-        antennasEnabled = data.antennas_enabled;
-        updateUI();
-    } catch (e) {
-        document.getElementById("status").textContent = "Backend error";
-    }
-}
-async function playSound() {
-    try {
-        await fetch("/play_sound", { method: "POST" });
-    } catch (e) {
-        console.error("Error triggering sound:", e);
-    }
-}
-function updateUI() {
-    const checkbox = document.getElementById("antenna-checkbox");
-    const status = document.getElementById("status");
-    checkbox.checked = antennasEnabled;
-    if (antennasEnabled) {
-        status.textContent = "Antennas status: running";
-    } else {
-        status.textContent = "Antennas status: stopped";
-    }
-}
-document.getElementById("antenna-checkbox").addEventListener("change", (e) => {
-    updateAntennasState(e.target.checked);
-});
-document.getElementById("sound-btn").addEventListener("click", () => {
-    playSound();
-});
-updateUI();

hand_tracker_live_app_demo/static/style.css DELETED Viewed

@@ -1,25 +0,0 @@
-body {
-    font-family: sans-serif;
-    margin: 24px;
-}
-#sound-btn {
-    padding: 10px 20px;
-    border: none;
-    color: white;
-    cursor: pointer;
-    font-size: 16px;
-    border-radius: 6px;
-    background-color: #3498db;
-}
-#status {
-    margin-top: 16px;
-    font-weight: bold;
-}
-#controls {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-}

index.html CHANGED Viewed

@@ -1,40 +1,642 @@
 <!doctype html>
-<html>
 <head>
-	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width" />
-	<title> Hand Tracker Live App Demo </title>
-	<link rel="stylesheet" href="style.css" />
 </head>
 <body>
-	<div class="hero">
-		<div class="hero-content">
-			<div class="app-icon">🤖⚡</div>
-			<h1> Hand Tracker Live App Demo </h1>
-			<p class="tagline">Enter your tagline here</p>
-		</div>
-	</div>
-	<div class="container">
-		<div class="main-card">
-			<div class="app-preview">
-				<div class="preview-image">
-					<div class="camera-feed">🛠️</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="footer">
-		<p>
-			🤖 Hand Tracker Live App Demo •
-			<a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
-			<a href="https://huggingface.co/spaces/pollen-robotics/reachy-mini-landing-page#apps" target="_blank">Browse More
-				Apps</a>
-		</p>
-	</div>
-</body>
-</html>

 <!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="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@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
+    <!-- Login -->
+    <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>
+    <!-- App -->
+    <div id="appView" class="hidden" style="display:none; flex-direction:column; height:100vh;">
+        <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>
+                <button class="btn-tune" id="tuneBtn">Tune</button>
+            </div>
+            <div class="tuning hidden" id="tuningPanel">
+                <label>
+                    Gain
+                    <input type="range" id="gainSlider" min="5" max="150" value="60">
+                    <span class="value" id="gainVal">60</span>
+                </label>
+                <label>
+                    Smooth
+                    <input type="range" id="smoothSlider" min="0" max="95" value="60">
+                    <span class="value" id="smoothVal">0.60</span>
+                </label>
+                <label>
+                    Dead
+                    <input type="range" id="dzSlider" min="0" max="15" value="3">
+                    <span class="value" id="dzVal">0.03</span>
+                </label>
+            </div>
+        </main>
+    </div>
+    <script type="module">
+        import { ReachyMini } from "https://cdn.jsdelivr.net/gh/pollen-robotics/reachy_mini@fix/js-app-latency/js/reachy-mini.js";
+        import { HandLandmarker, FilesetResolver } from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/vision_bundle.mjs";
+        // ─── Hand skeleton connections ───
+        const CONNECTIONS = [
+            [0,1],[1,2],[2,3],[3,4],
+            [5,6],[6,7],[7,8],
+            [9,10],[10,11],[11,12],
+            [13,14],[14,15],[15,16],
+            [17,18],[18,19],[19,20],
+            [0,5],[5,9],[9,13],[13,17],[0,17],
+        ];
+        // ─── State ───
+        const robot = new ReachyMini({ enableMicrophone: false });
+        let detector = null;
+        let detachVideo = null;
+        let selectedRobotId = null;
+        // Tracking state
+        let trackingEnabled = true;
+        let smoothX = 0.5, smoothY = 0.5;
+        let currentYaw = 0, currentPitch = 0;
+        let lastCmdTime = 0;
+        let lastFrameTime = 0;
+        let lastDetectTs = -1;
+        let frameCount = 0;
+        let fpsTime = 0;
+        let currentFps = 0;
+        let noHandFrames = 0;
+        let latencyPending = false;
+        let lastLatencyTime = 0;
+        const NO_HAND_RETURN_THRESHOLD = 60; // frames before returning to center
+        // Tuning params
+        let gain = 60;
+        let smoothing = 0.60;
+        let deadzone = 0.03;
+        const CMD_INTERVAL = 50; // ms (20 Hz)
+        // DOM refs
+        const $ = (id) => document.getElementById(id);
+        const video = $('video');
+        const canvas = $('overlay');
+        const ctx = canvas.getContext('2d');
+        // ─── Init ───
+        document.addEventListener('DOMContentLoaded', async () => {
+            if (await robot.authenticate()) {
+                showApp();
+            }
+            initEvents();
+            initTuning();
+        });
+        // ─── Auth ───
+        $('loginBtn').onclick = () => robot.login();
+        $('logoutBtn').onclick = () => {
+            if (detachVideo) { detachVideo(); detachVideo = null; }
+            robot.logout();
+            $('appView').style.display = 'none';
+            $('loginView').style.display = '';
+        };
+        function showApp() {
+            $('loginView').style.display = 'none';
+            $('appView').style.display = 'flex';
+            $('username').textContent = '@' + robot.username;
+        }
+        // ─── Robot events ───
+        function initEvents() {
+            robot.addEventListener('robotsChanged', (e) => {
+                const sel = $('robotList');
+                sel.innerHTML = '<option value="">Select robot...</option>';
+                for (const r of e.detail.robots) {
+                    const opt = document.createElement('option');
+                    opt.value = r.id;
+                    opt.textContent = r.meta?.name || r.id.slice(0, 12);
+                    sel.appendChild(opt);
+                }
+                sel.classList.remove('hidden');
+            });
+            $('robotList').onchange = (e) => {
+                selectedRobotId = e.target.value || null;
+                $('startBtn').disabled = !selectedRobotId;
+            };
+            robot.addEventListener('streaming', () => {
+                setStatus('streaming', 'Streaming');
+                $('startBtn').disabled = true;
+                $('stopBtn').disabled = false;
+                $('robotList').disabled = true;
+                showTrackingHud();
+                initDetector();
+            });
+            robot.addEventListener('sessionStopped', () => {
+                setStatus('connected', 'Connected');
+                $('startBtn').disabled = !selectedRobotId;
+                $('stopBtn').disabled = true;
+                $('robotList').disabled = false;
+                hideTrackingHud();
+                clearCanvas();
+                resetTrackingState();
+            });
+            robot.addEventListener('disconnected', () => {
+                setStatus('disconnected', 'Disconnected');
+                $('connectBtn').disabled = false;
+                $('startBtn').disabled = true;
+                $('stopBtn').disabled = true;
+                $('robotList').classList.add('hidden');
+                $('robotList').disabled = false;
+                hideTrackingHud();
+                clearCanvas();
+            });
+            robot.addEventListener('error', (e) => {
+                console.error(`[${e.detail.source}]`, e.detail.error);
+            });
+        }
+        // ─── Connection ───
+        $('connectBtn').onclick = async () => {
+            $('connectBtn').disabled = true;
+            setStatus('connecting', 'Connecting...');
+            try {
+                await robot.connect();
+                setStatus('connected', 'Connected');
+            } catch (e) {
+                console.error('Connect failed:', e);
+                setStatus('disconnected', 'Disconnected');
+                $('connectBtn').disabled = false;
+            }
+        };
+        $('startBtn').onclick = async () => {
+            if (!selectedRobotId) return;
+            setStatus('connecting', 'Starting...');
+            detachVideo = robot.attachVideo(video);
+            $('startBtn').disabled = true;
+            $('stopBtn').disabled = false;
+            try {
+                await robot.startSession(selectedRobotId);
+            } catch (e) {
+                console.error('Session failed:', e);
+                if (detachVideo) { detachVideo(); detachVideo = null; }
+                $('startBtn').disabled = !selectedRobotId;
+                $('stopBtn').disabled = true;
+                setStatus('connected', 'Connected');
+            }
+        };
+        $('stopBtn').onclick = async () => {
+            if (detachVideo) { detachVideo(); detachVideo = null; }
+            await robot.stopSession();
+        };
+        // ─── Status helpers ───
+        function setStatus(state, text) {
+            const b = $('statusBadge');
+            b.className = 'badge status-' + state;
+            b.textContent = text;
+        }
+        function showTrackingHud() {
+            $('fpsBadge').classList.remove('hidden');
+            $('trackBadge').classList.remove('hidden');
+            $('headBadge').classList.remove('hidden');
+            $('latencyBadge').classList.remove('hidden');
+            updateTrackBadge();
+        }
+        function hideTrackingHud() {
+            $('fpsBadge').classList.add('hidden');
+            $('trackBadge').classList.add('hidden');
+            $('headBadge').classList.add('hidden');
+            $('latencyBadge').classList.add('hidden');
+        }
+        function updateTrackBadge() {
+            const b = $('trackBadge');
+            if (!trackingEnabled) {
+                b.className = 'badge tracking-disabled';
+                b.textContent = 'Tracking off';
+            } else if (noHandFrames > 10) {
+                b.className = 'badge tracking-searching';
+                b.textContent = 'Searching...';
+            } else {
+                b.className = 'badge tracking-active';
+                b.textContent = 'Tracking';
+            }
+        }
+        // ─── Tracking toggle ───
+        $('trackingToggle').onchange = (e) => {
+            trackingEnabled = e.target.checked;
+            if (trackingEnabled) {
+                smoothX = 0.5;
+                smoothY = 0.5;
+            }
+            updateTrackBadge();
+            if (!trackingEnabled) {
+                clearCanvas();
+            }
+        };
+        // ─── Tuning ───
+        $('tuneBtn').onclick = () => {
+            $('tuningPanel').classList.toggle('hidden');
+        };
+        function initTuning() {
+            const gs = $('gainSlider'), ss = $('smoothSlider'), ds = $('dzSlider');
+            gs.oninput = () => { gain = +gs.value; $('gainVal').textContent = gain; };
+            ss.oninput = () => { smoothing = +ss.value / 100; $('smoothVal').textContent = smoothing.toFixed(2); };
+            ds.oninput = () => { deadzone = +ds.value / 100; $('dzVal').textContent = deadzone.toFixed(2); };
+        }
+        // ─── MediaPipe detector ───
+        async function initDetector() {
+            if (detector) {
+                startTracking();
+                return;
+            }
+            $('modelLoading').classList.remove('hidden');
+            try {
+                const vision = await FilesetResolver.forVisionTasks(
+                    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.14/wasm"
+                );
+                detector = await HandLandmarker.createFromOptions(vision, {
+                    baseOptions: {
+                        modelAssetPath: "https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/latest/hand_landmarker.task",
+                        delegate: "GPU",
+                    },
+                    runningMode: "VIDEO",
+                    numHands: 2,
+                });
+                console.log("Hand detector ready");
+            } catch (e) {
+                console.error("Failed to load hand detector:", e);
+                $('modelLoading').innerHTML = 'Failed to load model<br><button onclick="this.parentElement.classList.add(\'hidden\'); initDetector();" style="margin-top:0.5rem; padding:0.4rem 1rem; border-radius:6px; border:none; cursor:pointer;">Retry</button>';
+                startTracking(); // still run frame loop for video display
+                return;
+            }
+            $('modelLoading').classList.add('hidden');
+            startTracking();
+        }
+        // ─── Frame processing loop ───
+        function startTracking() {
+            frameCount = 0;
+            fpsTime = performance.now();
+            lastFrameTime = 0;
+            scheduleFrame();
+        }
+        function scheduleFrame() {
+            if (robot.state !== 'streaming') return;
+            if ('requestVideoFrameCallback' in video) {
+                video.requestVideoFrameCallback(onFrame);
+            } else {
+                requestAnimationFrame(onFrameFallback);
+            }
+        }
+        function onFrame(now, metadata) {
+            processFrame(now);
+            scheduleFrame();
+        }
+        function onFrameFallback(now) {
+            processFrame(now);
+            scheduleFrame();
+        }
+        function syncCanvasToVideo() {
+            if (!video.videoWidth || !video.videoHeight) return;
+            const cw = video.clientWidth;
+            const ch = video.clientHeight;
+            const vw = video.videoWidth;
+            const vh = video.videoHeight;
+            const videoAR = vw / vh;
+            const containerAR = cw / ch;
+            let rw, rh, ox, oy;
+            if (containerAR > videoAR) {
+                rh = ch;
+                rw = ch * videoAR;
+            } else {
+                rw = cw;
+                rh = cw / videoAR;
+            }
+            ox = (cw - rw) / 2;
+            oy = (ch - rh) / 2;
+            canvas.style.left = ox + 'px';
+            canvas.style.top = oy + 'px';
+            canvas.style.width = rw + 'px';
+            canvas.style.height = rh + 'px';
+            if (canvas.width !== vw || canvas.height !== vh) {
+                canvas.width = vw;
+                canvas.height = vh;
+            }
+        }
+        function processFrame(now) {
+            if (robot.state !== 'streaming') return;
+            if (video.readyState < 2) return;
+            syncCanvasToVideo();
+            // FPS counter
+            frameCount++;
+            const elapsed = now - fpsTime;
+            if (elapsed >= 1000) {
+                currentFps = Math.round(frameCount * 1000 / elapsed);
+                $('fpsBadge').textContent = currentFps + ' fps';
+                frameCount = 0;
+                fpsTime = now;
+            }
+            // Run detection (guard: timestamp must be strictly increasing)
+            let results = null;
+            if (detector && trackingEnabled && now > lastDetectTs) {
+                try {
+                    results = detector.detectForVideo(video, now);
+                    lastDetectTs = now;
+                } catch (e) {
+                    // Timestamp errors can happen on seek; ignore
+                }
+            }
+            // Clear canvas
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            if (!trackingEnabled) {
+                return;
+            }
+            const w = canvas.width;
+            const h = canvas.height;
+            // Draw center crosshair
+            drawCrosshair(w, h);
+            if (results && results.landmarks && results.landmarks.length > 0) {
+                noHandFrames = 0;
+                // Find biggest hand by bounding box area
+                let bestIdx = 0;
+                let bestArea = 0;
+                for (let i = 0; i < results.landmarks.length; i++) {
+                    const lm = results.landmarks[i];
+                    let minX = 1, maxX = 0, minY = 1, maxY = 0;
+                    for (const p of lm) {
+                        if (p.x < minX) minX = p.x;
+                        if (p.x > maxX) maxX = p.x;
+                        if (p.y < minY) minY = p.y;
+                        if (p.y > maxY) maxY = p.y;
+                    }
+                    const area = (maxX - minX) * (maxY - minY);
+                    if (area > bestArea) {
+                        bestArea = area;
+                        bestIdx = i;
+                    }
+                }
+                const hand = results.landmarks[bestIdx];
+                // Draw all hands (dimmed)
+                for (let i = 0; i < results.landmarks.length; i++) {
+                    drawHand(results.landmarks[i], w, h, i === bestIdx);
+                }
+                // Compute centroid of tracked hand
+                let cx = 0, cy = 0;
+                for (const p of hand) {
+                    cx += p.x;
+                    cy += p.y;
+                }
+                cx /= hand.length;
+                cy /= hand.length;
+                // Draw centroid marker
+                ctx.beginPath();
+                ctx.arc(cx * w, cy * h, 8, 0, Math.PI * 2);
+                ctx.fillStyle = 'rgba(255, 107, 53, 0.8)';
+                ctx.fill();
+                // Smooth position (EMA)
+                const alpha = 1 - smoothing;
+                smoothX = alpha * cx + smoothing * smoothX;
+                smoothY = alpha * cy + smoothing * smoothY;
+                // Error from center
+                let errorX = smoothX - 0.5;
+                let errorY = smoothY - 0.5;
+                // Apply deadzone
+                if (Math.abs(errorX) < deadzone) errorX = 0;
+                if (Math.abs(errorY) < deadzone) errorY = 0;
+                // Time delta
+                const dt = lastFrameTime ? Math.min((performance.now() - lastFrameTime) / 1000, 0.1) : 0;
+                lastFrameTime = performance.now();
+                // Proportional controller
+                // Yaw: hand right (errorX > 0) → yaw should decrease (look right)
+                // Pitch: hand below center (errorY > 0) → pitch should decrease (look down)
+                currentYaw -= gain * errorX * dt;
+                currentPitch -= gain * errorY * dt;
+                // Clamp to robot limits
+                currentYaw = Math.max(-45, Math.min(45, currentYaw));
+                currentPitch = Math.max(-30, Math.min(30, currentPitch));
+                // Draw error line from center to smoothed hand position
+                ctx.beginPath();
+                ctx.moveTo(0.5 * w, 0.5 * h);
+                ctx.lineTo(smoothX * w, smoothY * h);
+                ctx.strokeStyle = 'rgba(255, 107, 53, 0.4)';
+                ctx.lineWidth = 2;
+                ctx.setLineDash([6, 4]);
+                ctx.stroke();
+                ctx.setLineDash([]);
+            } else {
+                noHandFrames++;
+                lastFrameTime = performance.now();
+                // Slowly return to center when no hand detected
+                if (noHandFrames > NO_HAND_RETURN_THRESHOLD) {
+                    const returnRate = 0.97;
+                    currentYaw *= returnRate;
+                    currentPitch *= returnRate;
+                    // Snap to zero when very close
+                    if (Math.abs(currentYaw) < 0.5) currentYaw = 0;
+                    if (Math.abs(currentPitch) < 0.5) currentPitch = 0;
+                }
+            }
+            // Send head command at limited rate
+            const cmdNow = performance.now();
+            if (cmdNow - lastCmdTime >= CMD_INTERVAL) {
+                lastCmdTime = cmdNow;
+                robot.setHeadPose(0, currentPitch, currentYaw);
+            }
+            // Update HUD
+            updateTrackBadge();
+            $('headBadge').textContent = `Y:${currentYaw.toFixed(1)} P:${currentPitch.toFixed(1)}`;
+            const cmdNow2 = performance.now();
+            if (cmdNow2 - lastLatencyTime >= 2000) {
+                lastLatencyTime = cmdNow2;
+                updateLatencyBadge();
+            }
+        }
+        // ─── Drawing ───
+        function drawHand(landmarks, w, h, isTracked) {
+            const color = isTracked ? 'rgba(0, 230, 118, 0.8)' : 'rgba(0, 230, 118, 0.25)';
+            const dotColor = isTracked ? 'rgba(255, 107, 53, 0.9)' : 'rgba(255, 107, 53, 0.3)';
+            const lineWidth = isTracked ? 2.5 : 1;
+            const dotRadius = isTracked ? 4 : 2;
+            // Connections
+            ctx.strokeStyle = color;
+            ctx.lineWidth = lineWidth;
+            for (const [i, j] of CONNECTIONS) {
+                ctx.beginPath();
+                ctx.moveTo(landmarks[i].x * w, landmarks[i].y * h);
+                ctx.lineTo(landmarks[j].x * w, landmarks[j].y * h);
+                ctx.stroke();
+            }
+            // Landmarks
+            ctx.fillStyle = dotColor;
+            for (const p of landmarks) {
+                ctx.beginPath();
+                ctx.arc(p.x * w, p.y * h, dotRadius, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+        function drawCrosshair(w, h) {
+            const cx = w / 2, cy = h / 2;
+            const size = 20;
+            ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(cx - size, cy);
+            ctx.lineTo(cx + size, cy);
+            ctx.moveTo(cx, cy - size);
+            ctx.lineTo(cx, cy + size);
+            ctx.stroke();
+            // Small circle
+            ctx.beginPath();
+            ctx.arc(cx, cy, 4, 0, Math.PI * 2);
+            ctx.stroke();
+        }
+        function clearCanvas() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+        function resetTrackingState() {
+            smoothX = 0.5;
+            smoothY = 0.5;
+            currentYaw = 0;
+            currentPitch = 0;
+            lastCmdTime = 0;
+            lastFrameTime = 0;
+            lastDetectTs = -1;
+            noHandFrames = 0;
+        }
+        // ─── Latency badge ───
+        async function updateLatencyBadge() {
+            if (latencyPending || !robot._pc) return;
+            latencyPending = true;
+            try {
+                const stats = await robot._pc.getStats();
+                let rttMs = null;
+                stats.forEach(report => {
+                    if (report.type === 'candidate-pair' && report.currentRoundTripTime != null) {
+                        rttMs = Math.round(report.currentRoundTripTime * 1000);
+                    }
+                });
+                if (rttMs !== null) {
+                    $('latencyBadge').textContent = `rtt ${rttMs}ms`;
+                }
+            } catch (_) {}
+            latencyPending = false;
+        }
+    </script>
+</body>
+</html>

style.css CHANGED Viewed

@@ -1,411 +1,358 @@
-* {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-}
-body {
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-	line-height: 1.6;
-	color: #333;
-	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-	min-height: 100vh;
-}
-.hero {
-	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-	color: white;
-	padding: 4rem 2rem;
-	text-align: center;
-}
-.hero-content {
-	max-width: 800px;
-	margin: 0 auto;
-}
-.app-icon {
-	font-size: 4rem;
-	margin-bottom: 1rem;
-	display: inline-block;
-}
-.hero h1 {
-	font-size: 3rem;
-	font-weight: 700;
-	margin-bottom: 1rem;
-	background: linear-gradient(45deg, #fff, #f0f9ff);
-	background-clip: text;
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-}
-.tagline {
-	font-size: 1.25rem;
-	opacity: 0.9;
-	max-width: 600px;
-	margin: 0 auto;
-}
-.container {
-	max-width: 1200px;
-	margin: 0 auto;
-	padding: 0 2rem;
-	position: relative;
-	z-index: 2;
-}
-.main-card {
-	background: white;
-	border-radius: 20px;
-	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-	margin-top: -2rem;
-	overflow: hidden;
-	margin-bottom: 3rem;
-}
-.app-preview {
-	background: linear-gradient(135deg, #1e3a8a, #3b82f6);
-	padding: 3rem;
-	color: white;
-	text-align: center;
-	position: relative;
-}
-.preview-image {
-	background: #000;
-	border-radius: 15px;
-	padding: 2rem;
-	max-width: 500px;
-	margin: 0 auto;
-	position: relative;
-	overflow: hidden;
-}
-.camera-feed {
-	font-size: 4rem;
-	margin-bottom: 1rem;
-	opacity: 0.7;
-}
-.detection-overlay {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	width: 100%;
-}
-.bbox {
-	background: rgba(34, 197, 94, 0.9);
-	color: white;
-	padding: 0.5rem 1rem;
-	border-radius: 8px;
-	font-size: 0.9rem;
-	font-weight: 600;
-	margin: 0.5rem;
-	display: inline-block;
-	border: 2px solid #22c55e;
-}
-.app-details {
-	padding: 3rem;
-}
-.app-details h2 {
-	font-size: 2rem;
-	color: #1e293b;
-	margin-bottom: 2rem;
-	text-align: center;
-}
-.template-info {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-	gap: 2rem;
-	margin-bottom: 3rem;
-}
-.info-box {
-	background: #f0f9ff;
-	border: 2px solid #e0f2fe;
-	border-radius: 12px;
-	padding: 2rem;
-}
-.info-box h3 {
-	color: #0c4a6e;
-	margin-bottom: 1rem;
-	font-size: 1.2rem;
-}
-.info-box p {
-	color: #0369a1;
-	line-height: 1.6;
-}
-.how-to-use {
-	background: #fefce8;
-	border: 2px solid #fde047;
-	border-radius: 12px;
-	padding: 2rem;
-	margin-top: 3rem;
-}
-.how-to-use h3 {
-	color: #a16207;
-	margin-bottom: 1.5rem;
-	font-size: 1.3rem;
-	text-align: center;
-}
-.steps {
-	display: flex;
-	flex-direction: column;
-	gap: 1.5rem;
-}
-.step {
-	display: flex;
-	align-items: flex-start;
-	gap: 1rem;
-}
-.step-number {
-	background: #eab308;
-	color: white;
-	width: 2rem;
-	height: 2rem;
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-weight: bold;
-	flex-shrink: 0;
-}
-.step h4 {
-	color: #a16207;
-	margin-bottom: 0.5rem;
-	font-size: 1.1rem;
-}
-.step p {
-	color: #ca8a04;
-}
-.download-card {
-	background: white;
-	border-radius: 20px;
-	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-	padding: 3rem;
-	text-align: center;
-}
-.download-card h2 {
-	font-size: 2rem;
-	color: #1e293b;
-	margin-bottom: 1rem;
-}
-.download-card>p {
-	color: #64748b;
-	font-size: 1.1rem;
-	margin-bottom: 2rem;
-}
-.dashboard-config {
-	margin-bottom: 2rem;
-	text-align: left;
-	max-width: 400px;
-	margin-left: auto;
-	margin-right: auto;
-}
-.dashboard-config label {
-	display: block;
-	color: #374151;
-	font-weight: 600;
-	margin-bottom: 0.5rem;
-}
-.dashboard-config input {
-	width: 100%;
-	padding: 0.75rem 1rem;
-	border: 2px solid #e5e7eb;
-	border-radius: 8px;
-	font-size: 0.95rem;
-	transition: border-color 0.2s;
 }
-.dashboard-config input:focus {
-	outline: none;
-	border-color: #667eea;
-}
-.install-btn {
-	background: linear-gradient(135deg, #667eea, #764ba2);
-	color: white;
-	border: none;
-	padding: 1.25rem 3rem;
-	border-radius: 16px;
-	font-size: 1.2rem;
-	font-weight: 700;
-	cursor: pointer;
-	transition: all 0.3s ease;
-	display: inline-flex;
-	align-items: center;
-	gap: 0.75rem;
-	margin-bottom: 2rem;
-	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
-}
-.install-btn:hover:not(:disabled) {
-	transform: translateY(-3px);
-	box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
-}
-.install-btn:disabled {
-	opacity: 0.7;
-	cursor: not-allowed;
-	transform: none;
-}
-.manual-option {
-	background: #f8fafc;
-	border-radius: 12px;
-	padding: 2rem;
-	margin-top: 2rem;
-}
-.manual-option h3 {
-	color: #1e293b;
-	margin-bottom: 1rem;
-	font-size: 1.2rem;
-}
-.manual-option>p {
-	color: #64748b;
-	margin-bottom: 1rem;
-}
-.btn-icon {
-	font-size: 1.1rem;
-}
-.install-status {
-	padding: 1rem;
-	border-radius: 8px;
-	font-size: 0.9rem;
-	text-align: center;
-	display: none;
-	margin-top: 1rem;
-}
-.install-status.success {
-	background: #dcfce7;
-	color: #166534;
-	border: 1px solid #bbf7d0;
-}
-.install-status.error {
-	background: #fef2f2;
-	color: #dc2626;
-	border: 1px solid #fecaca;
-}
-.install-status.loading {
-	background: #dbeafe;
-	color: #1d4ed8;
-	border: 1px solid #bfdbfe;
-}
-.install-status.info {
-	background: #e0f2fe;
-	color: #0369a1;
-	border: 1px solid #7dd3fc;
-}
-.manual-install {
-	background: #1f2937;
-	border-radius: 8px;
-	padding: 1rem;
-	margin-bottom: 1rem;
-	display: flex;
-	align-items: center;
-	gap: 1rem;
-}
-.manual-install code {
-	color: #10b981;
-	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
-	font-size: 0.85rem;
-	flex: 1;
-	overflow-x: auto;
-}
-.copy-btn {
-	background: #374151;
-	color: white;
-	border: none;
-	padding: 0.5rem 1rem;
-	border-radius: 6px;
-	font-size: 0.8rem;
-	cursor: pointer;
-	transition: background-color 0.2s;
 }
-.copy-btn:hover {
-	background: #4b5563;
 }
-.manual-steps {
-	color: #6b7280;
-	font-size: 0.9rem;
-	line-height: 1.8;
 }
-.footer {
-	text-align: center;
-	padding: 2rem;
-	color: white;
-	opacity: 0.8;
 }
-.footer a {
-	color: white;
-	text-decoration: none;
-	font-weight: 600;
-}
-.footer a:hover {
-	text-decoration: underline;
 }
-/* Responsive Design */
-@media (max-width: 768px) {
-	.hero {
-		padding: 2rem 1rem;
-	}
-	.hero h1 {
-		font-size: 2rem;
-	}
-	.container {
-		padding: 0 1rem;
-	}
-	.app-details,
-	.download-card {
-		padding: 2rem;
-	}
-	.features-grid {
-		grid-template-columns: 1fr;
-	}
-	.download-options {
-		grid-template-columns: 1fr;
-	}
-}

+* { margin: 0; padding: 0; box-sizing: border-box; }
+:root {
+    --bg: #0a0a1a;
+    --surface: #1a1a2e;
+    --border: #2a2a40;
+    --accent: #FF6B35;
+    --accent-dim: rgba(255, 107, 53, 0.15);
+    --text: #e0e0e0;
+    --text-muted: #888;
+    --green: #00e676;
+    --yellow: #ffd740;
+    --red: #ff5252;
 }
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    user-select: none;
+}
+.hidden { display: none !important; }
+/* ── Login ── */
+.login-view {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background: radial-gradient(ellipse at center, #1a1a3e 0%, var(--bg) 70%);
+}
+.login-card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 3rem;
+    text-align: center;
+    max-width: 380px;
+    width: 90%;
+}
+.login-card h2 {
+    font-size: 1.8rem;
+    margin-bottom: 0.5rem;
+    color: var(--accent);
+}
+.login-card p {
+    color: var(--text-muted);
+    margin-bottom: 2rem;
+    font-size: 0.9rem;
+}
+.btn-hf {
+    background: #FFD21E;
+    color: #1a1a1a;
+    border: none;
+    padding: 0.8rem 1.5rem;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: transform 0.15s, box-shadow 0.15s;
+}
+.btn-hf:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(255, 210, 30, 0.3);
+}
+/* ── Header ── */
+header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.6rem 1rem;
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+}
+.brand {
+    font-weight: 700;
+    font-size: 1rem;
+    color: var(--accent);
+}
+.brand span {
+    color: var(--text-muted);
+    font-weight: 400;
+    font-size: 0.85rem;
+    margin-left: 0.4rem;
+}
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    font-size: 0.85rem;
+    color: var(--text-muted);
+}
+.btn-logout {
+    background: none;
+    border: 1px solid var(--border);
+    color: var(--text-muted);
+    padding: 0.3rem 0.8rem;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: border-color 0.15s;
+}
+.btn-logout:hover { border-color: var(--text-muted); }
+/* ── Main layout ── */
+main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+/* ── Video ── */
+.video-container {
+    flex: 1;
+    position: relative;
+    background: #000;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.video-container video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+}
+.video-container canvas {
+    position: absolute;
+    pointer-events: none;
+}
+/* ── HUD badges ── */
+.hud {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    padding: 0.6rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.hud-top, .hud-bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+.badge {
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(8px);
+    padding: 0.3rem 0.6rem;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+    white-space: nowrap;
+}
+.badge.status-disconnected { border-left: 3px solid var(--red); }
+.badge.status-connecting { border-left: 3px solid var(--yellow); }
+.badge.status-connected { border-left: 3px solid var(--green); }
+.badge.status-streaming { border-left: 3px solid var(--green); }
+.badge.tracking-active { border-left: 3px solid var(--green); }
+.badge.tracking-searching { border-left: 3px solid var(--yellow); }
+.badge.tracking-disabled { border-left: 3px solid var(--text-muted); }
+.badge-group {
+    display: flex;
+    gap: 0.4rem;
+    flex-wrap: wrap;
+}
+.model-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+.model-loading .spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--border);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin: 0 auto 0.8rem;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+/* ── Controls bar ── */
+.controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.8rem;
+    background: var(--surface);
+    border-top: 1px solid var(--border);
+    flex-shrink: 0;
+    flex-wrap: wrap;
+}
+.controls select {
+    background: var(--bg);
+    color: var(--text);
+    border: 1px solid var(--border);
+    padding: 0.4rem 0.6rem;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    min-width: 120px;
+}
+.btn {
+    padding: 0.4rem 0.9rem;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.15s;
+}
+.btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+.btn-connect { background: var(--accent); color: #fff; }
+.btn-start { background: var(--green); color: #111; }
+.btn-stop { background: var(--red); color: #fff; }
+.spacer { flex: 1; }
+/* ── Toggle ── */
+.toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    cursor: pointer;
+}
+.toggle input[type="checkbox"] {
+    appearance: none;
+    width: 36px;
+    height: 20px;
+    background: var(--border);
+    border-radius: 10px;
+    position: relative;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+.toggle input[type="checkbox"]::after {
+    content: '';
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    background: #fff;
+    border-radius: 50%;
+    top: 2px;
+    left: 2px;
+    transition: transform 0.2s;
+}
+.toggle input[type="checkbox"]:checked {
+    background: var(--accent);
+}
+.toggle input[type="checkbox"]:checked::after {
+    transform: translateX(16px);
+}
+/* ── Tuning panel ── */
+.tuning {
+    display: flex;
+    gap: 1.5rem;
+    padding: 0.5rem 0.8rem;
+    background: var(--bg);
+    border-top: 1px solid var(--border);
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center;
 }
+.tuning label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    white-space: nowrap;
+}
+.tuning input[type="range"] {
+    width: 80px;
+    accent-color: var(--accent);
 }
+.tuning .value {
+    font-family: 'SF Mono', monospace;
+    color: var(--text);
+    min-width: 2.5em;
+    text-align: right;
 }
+.btn-tune {
+    background: none;
+    border: 1px solid var(--border);
+    color: var(--text-muted);
+    padding: 0.3rem 0.6rem;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    cursor: pointer;
 }
+.btn-tune:hover { border-color: var(--accent); color: var(--accent); }
+/* ── Responsive ── */
+@media (max-width: 600px) {
+    .controls { gap: 0.3rem; }
+    .btn { padding: 0.35rem 0.6rem; font-size: 0.75rem; }
+    .tuning { gap: 0.8rem; }
+    .tuning input[type="range"] { width: 60px; }
 }