Sync from GitHub via huggingface-sync-action

demo.js

@@ -106,23 +106,53 @@ async function init() {
         cameraBtn.disabled = true;
         startBtn.disabled = true;
 
+        // Detect mobile device
+        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
         // Show loader
         showLoader('Loading YOLO26m model...');
         statusText.textContent = 'Loading AI model...';
         statusIndicator.className = 'status-dot loading';
 
-        // Load YOLO model
-        model = await AutoModel.from_pretrained('onnx-community/yolo26m-ONNX', {
-            device: 'webgpu',
-            dtype: 'fp16'
-        });
+        // Try WebGPU first on desktop, use WASM directly on mobile
+        let modelLoaded = false;
+
+        if (!isMobile) {
+            // Desktop: Try WebGPU first (faster)
+            try {
+                console.log('Attempting to load model with WebGPU...');
+                model = await AutoModel.from_pretrained('onnx-community/yolo26m-ONNX', {
+                    device: 'webgpu',
+                    dtype: 'fp16'
+                });
+                console.log('✅ Model loaded on WebGPU (fast)');
+                modelLoaded = true;
+            } catch (webgpuError) {
+                console.warn('WebGPU failed, falling back to WASM:', webgpuError);
+            }
+        } else {
+            console.log('Mobile device detected, using WASM backend');
+        }
+
+        // Fallback to WASM (works everywhere, including mobile)
+        if (!modelLoaded) {
+            showLoader(isMobile ? 'Loading model (mobile-optimized)...' : 'WebGPU not available, using WASM...');
+            console.log('Loading model with WASM backend...');
+
+            model = await AutoModel.from_pretrained('onnx-community/yolo26m-ONNX', {
+                device: 'wasm'
+            });
+            console.log('✅ Model loaded on WASM (compatible)');
+        }
 
         showLoader('Loading processor...');
         processor = await AutoProcessor.from_pretrained('onnx-community/yolo26m-ONNX');
 
         // Hide loader
         hideLoader();
-        statusText.textContent = 'Model ready! Open camera to begin';
+        statusText.textContent = isMobile
+            ? 'Model ready (WASM)! Open camera to begin'
+            : 'Model ready! Open camera to begin';
         statusIndicator.className = 'status-dot ready';
         cameraBtn.disabled = false;
 
@@ -284,9 +314,8 @@ async function detectAndProcess() {
 async function detectPhoneAndGetBoxes() {
     try {
         // Resize for faster inference (trade accuracy for speed)
-        const targetWidth = 320;  // Smaller = faster (try 320, 416, or 640)
+        const targetWidth = 256;  // Smaller = faster (256 for +5 FPS boost)
         const targetHeight = Math.round((targetWidth / offscreen.width) * offscreen.height);
-        console.log(`Detection resolution: ${targetWidth}x${targetHeight}`);
 
         // Create smaller canvas for YOLO
         const smallCanvas = document.createElement('canvas');
@@ -531,5 +560,27 @@ startBtn.addEventListener('click', async () => {
     }
 });
 
+// Page Visibility API - pause ONLY on mobile when tab hidden
+// Desktop: Keep running in background (users want continuous monitoring while working)
+// Mobile: Pause to prevent browser from killing tab
+const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
+if (isMobile) {
+    document.addEventListener('visibilitychange', () => {
+        if (document.hidden && isMonitoring) {
+            console.log('Mobile: Tab hidden, pausing to prevent browser from killing tab');
+            isMonitoring = false;
+            btnIcon.textContent = '▶️';
+            btnText.textContent = 'Start Detection';
+            statusText.textContent = 'Paused (tab hidden)';
+            statusIndicator.className = 'status-dot ready';
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+    });
+    console.log('Mobile detected: Will auto-pause when tab hidden');
+} else {
+    console.log('Desktop: Will keep monitoring in background tabs');
+}
+
 // Initialize on load
 init();

index.html

@@ -55,7 +55,8 @@
 					</div>
 					<div class="hero-tech" style="margin-top: 1.5rem;">
 						<div class="hero-tech-stack">
-							<span class="tech-pill">YOLO26n</span>
+							<span class="tech-pill">YOLO26m</span>
+							<span class="tech-pill">NVIDIA TensorRT</span>
 							<span class="tech-pill">OpenCV</span>
 							<span class="tech-pill">Groq (Llama 3.1)</span>
 							<span class="tech-pill">Edge TTS</span>

judgy_reachy_no_phone/detection.py

@@ -3,7 +3,7 @@
 import time
 import logging
 from collections import deque
-from typing import Optional
+from typing import Optional, Dict, Any
 
 import cv2
 import numpy as np
@@ -16,10 +16,16 @@ class PhoneDetector:
 
     PHONE_CLASS_ID = 67  # "cell phone" in COCO dataset
 
-    def __init__(self, confidence: float = 0.5):
-        self.confidence = confidence
+    # Adaptive confidence thresholds (like demo.js)
+    DETECTION_CONFIDENCE = 0.5  # Initial detection threshold
+    TRACKING_CONFIDENCE = 0.2   # Lower threshold when tracking existing phone
+    TRACKING_PERSIST_FRAMES = 3  # Keep tracking for N frames after losing detection
+
+    def __init__(self, confidence: float = 0.5, loading_callback=None):
+        self.confidence = confidence  # Kept for backward compatibility
         self.yolo_model = None
         self._initialized = False
+        self.loading_callback = loading_callback  # Callback to report loading progress
 
         # State tracking
         self.phone_visible = False
@@ -31,53 +37,206 @@ class PhoneDetector:
         # History for robust detection
         self.history = deque(maxlen=30)
 
+        # Tracking persistence (like demo.js)
+        self.last_phone_box: Optional[Dict[str, Any]] = None
+        self.frames_without_detection = 0
+
         # For visualization
         self.last_detections = []
 
+        # Loading state (like demo.js)
+        self.loading_status = "idle"  # idle, loading, ready, error
+        self.loading_message = ""
+
     def initialize(self):
-        """Load YOLO model."""
+        """Load YOLO model with progress reporting and TensorRT support."""
         if self._initialized:
             return True
 
         try:
+            # Report loading start
+            self.loading_status = "loading"
+            self.loading_message = "Loading YOLO26m model..."
+            if self.loading_callback:
+                self.loading_callback("loading", "Loading YOLO26m model...")
+            logger.info("Starting YOLO model initialization...")
+
             import torch
             from ultralytics import YOLO
+            import os
 
             # Auto-detect best device (supports CUDA, MPS, and CPU)
             if torch.cuda.is_available():
                 device = 'cuda'  # NVIDIA GPU
+                use_tensorrt = True
             elif torch.backends.mps.is_available():
                 device = 'mps'   # Apple Silicon GPU
+                use_tensorrt = False
             else:
                 device = 'cpu'   # Fallback to CPU
+                use_tensorrt = False
+
+            # TensorRT optimization for NVIDIA GPUs (2-3x faster!)
+            if use_tensorrt:
+                engine_path = "yolo26m.engine"
+
+                # Check if TensorRT engine already exists
+                if os.path.exists(engine_path):
+                    try:
+                        logger.info("Found existing TensorRT engine, loading...")
+                        self.loading_message = "Loading TensorRT engine..."
+                        if self.loading_callback:
+                            self.loading_callback("loading", "Loading TensorRT engine...")
+
+                        self.yolo_model = YOLO(engine_path)
+                        logger.info("✅ Loaded TensorRT engine (2-3x faster!)")
+
+                    except Exception as e:
+                        logger.warning(f"TensorRT engine load failed: {e}, falling back to PyTorch")
+                        use_tensorrt = False
+                else:
+                    # Export to TensorRT engine (one-time, takes 1-2 minutes)
+                    try:
+                        logger.info("TensorRT engine not found, exporting (one-time setup, ~1-2 min)...")
+                        self.loading_message = "Exporting to TensorRT (first time, ~1-2 min)..."
+                        if self.loading_callback:
+                            self.loading_callback("loading", "Exporting to TensorRT (first time, ~1-2 min)...")
+
+                        # Load PyTorch model first
+                        temp_model = YOLO("yolo26m.pt")
+
+                        # Export to TensorRT
+                        temp_model.export(format='engine', device=0, half=True, workspace=4)
+                        logger.info("✅ TensorRT export complete!")
+
+                        # Load the exported engine
+                        self.yolo_model = YOLO(engine_path)
+                        logger.info("✅ Loaded TensorRT engine (2-3x faster!)")
+
+                    except Exception as e:
+                        logger.warning(f"TensorRT export failed: {e}, using PyTorch instead")
+                        use_tensorrt = False
+
+            # Fallback to PyTorch (if not NVIDIA GPU or TensorRT failed)
+            if not use_tensorrt:
+                self.loading_message = f"Loading YOLO26m on {device.upper()}..."
+                if self.loading_callback:
+                    self.loading_callback("loading", f"Loading YOLO26m on {device.upper()}...")
+
+                self.yolo_model = YOLO("yolo26m.pt").to(device)
+                logger.info(f"Loaded YOLO26m on {device.upper()} (PyTorch)")
+
+            # Report success
+            backend = "TensorRT" if use_tensorrt else device.upper()
+            self.loading_status = "ready"
+            self.loading_message = f"Model ready on {backend}"
+            if self.loading_callback:
+                self.loading_callback("ready", f"Model ready on {backend}")
 
-            # Use pretrained YOLO26n model
-            self.yolo_model = YOLO("yolo26n.pt").to(device)
             self._initialized = True
-            logger.info(f"YOLO model loaded on {device.upper()}")
+            logger.info(f"YOLO26m model loaded on {backend}")
             return True
+
         except Exception as e:
+            # Report error
+            self.loading_status = "error"
+            self.loading_message = f"Failed to load model: {str(e)}"
+            if self.loading_callback:
+                self.loading_callback("error", f"Failed to load model: {str(e)}")
             logger.error(f"Failed to load YOLO: {e}")
             return False
 
     def detect_phone(self, frame: np.ndarray) -> bool:
-        """Check if phone is in frame."""
+        """
+        Check if phone is in frame (backward compatible).
+
+        For new tracking features, use detect_phone_with_tracking() instead.
+        """
+        detections = self.detect_phone_with_tracking(frame)
+        return len(detections) > 0
+
+    def detect_phone_with_tracking(self, frame: np.ndarray) -> list:
+        """
+        Detect phone with YOLO's built-in ByteTrack tracking + adaptive confidence.
+
+        Returns:
+            List of detection dicts with keys: x1, y1, x2, y2, confidence, class_name, track_id
+
+        NOTE: To revert to custom tracking, see git history or the old implementation
+        that used manual tracking persistence (TRACKING_PERSIST_FRAMES approach).
+        """
         if not self._initialized:
             if not self.initialize():
-                return False
+                return []
 
         try:
-            results = self.yolo_model(frame, verbose=False, conf=self.confidence)
+            # Adaptive confidence: lower threshold when we have active tracks
+            confidence_threshold = (
+                self.TRACKING_CONFIDENCE if self.last_phone_box
+                else self.DETECTION_CONFIDENCE
+            )
+
+            # Use YOLO's built-in tracker (ByteTrack) instead of manual tracking
+            # persist=True keeps track IDs across frames, tracker="bytetrack.yaml"
+            results = self.yolo_model.track(
+                frame,
+                persist=True,  # Maintain track IDs across frames
+                conf=confidence_threshold,  # Adaptive confidence
+                tracker="bytetrack.yaml",  # ByteTrack algorithm (robust, fast)
+                verbose=False,
+                classes=[self.PHONE_CLASS_ID]  # Only track phones
+            )
             self.last_detections = results  # Save for visualization
 
+            # Collect tracked phones with their IDs
+            new_detections = []
+            best_phone = None
+            best_score = 0.0
+
             for result in results:
+                if result.boxes is None or len(result.boxes) == 0:
+                    continue
+
                 for box in result.boxes:
                     if int(box.cls) == self.PHONE_CLASS_ID:
-                        return True
-            return False
+                        conf = float(box.conf)
+                        x1, y1, x2, y2 = map(int, box.xyxy[0])
+
+                        # Get track ID (ByteTrack assigns persistent IDs)
+                        track_id = int(box.id[0]) if box.id is not None else None
+
+                        detection = {
+                            'x1': x1,
+                            'y1': y1,
+                            'x2': x2,
+                            'y2': y2,
+                            'confidence': conf,
+                            'class_name': 'cell phone',
+                            'track_id': track_id
+                        }
+
+                        new_detections.append(detection)
+
+                        # Track the most confident phone for state tracking
+                        if conf > best_score:
+                            best_score = conf
+                            best_phone = detection
+
+            # Update last_phone_box with the best detection (for adaptive confidence)
+            if best_phone:
+                self.last_phone_box = best_phone
+                self.frames_without_detection = 0
+            else:
+                # ByteTrack handles occlusion, but we still track when we lose all detections
+                self.frames_without_detection += 1
+                if self.frames_without_detection >= self.TRACKING_PERSIST_FRAMES:
+                    self.last_phone_box = None
+
+            return new_detections
+
         except Exception as e:
-            logger.debug(f"YOLO detection error: {e}")
-            return False
+            logger.debug(f"YOLO tracking error: {e}")
+            return []
 
     def draw_detections(self, frame: np.ndarray) -> np.ndarray:
         """Draw detection boxes on frame."""
@@ -126,7 +285,9 @@ class PhoneDetector:
             "put_down" - Phone just put down (optional praise)
             None - No state change
         """
-        phone_in_frame = self.detect_phone(frame)
+        # Use new tracking-enabled detection
+        detections = self.detect_phone_with_tracking(frame)
+        phone_in_frame = len(detections) > 0
 
         # Add to history
         self.history.append(phone_in_frame)
@@ -150,6 +311,14 @@ class PhoneDetector:
                 self.last_reaction_time = now
                 return "picked_up"
 
+        # Periodic reactions while STILL holding phone (like demo.js)
+        if self.phone_visible and phone_in_frame:
+            now = time.time()
+            if now - self.last_reaction_time >= cooldown:
+                self.phone_count += 1
+                self.last_reaction_time = now
+                return "picked_up"  # Shame again!
+
         # Check for phone put down (slow to confirm - avoids flickering)
         if self.consecutive_no_phone >= putdown_threshold and self.phone_visible:
             self.phone_visible = False
@@ -172,3 +341,23 @@ class PhoneDetector:
     def reset_count(self):
         """Reset daily count."""
         self.phone_count = 0
+
+    def reset_tracking(self):
+        """Reset tracking state (useful when stopping/starting monitoring)."""
+        self.phone_visible = False
+        self.consecutive_phone = 0
+        self.consecutive_no_phone = 0
+        self.last_phone_box = None
+        self.frames_without_detection = 0
+        self.last_reaction_time = 0
+
+        # Reset ByteTrack tracker (clear track IDs)
+        if self.yolo_model and hasattr(self.yolo_model, 'predictor'):
+            try:
+                # This resets the tracker's internal state
+                self.yolo_model.predictor.trackers = []
+                logger.debug("ByteTrack tracker reset")
+            except Exception as e:
+                logger.debug(f"Tracker reset error (non-critical): {e}")
+
+        logger.debug("Tracking state reset")

judgy_reachy_no_phone/main.py

@@ -42,8 +42,17 @@ class JudgyReachyNoPhone(ReachyMiniApp):
         super().__init__()
         self.config = Config()
 
-        # Components
-        self.detector = PhoneDetector(confidence=self.config.DETECTION_CONFIDENCE)
+        # Loading state tracking (like demo.js)
+        self.model_loading_status = "idle"  # idle, loading, ready, error
+        self.model_loading_message = ""
+        self.camera_loading_status = "idle"  # idle, connecting, ready, error
+        self.camera_loading_message = "Waiting for camera connection..."
+
+        # Components (pass loading callback to detector)
+        self.detector = PhoneDetector(
+            confidence=self.config.DETECTION_CONFIDENCE,
+            loading_callback=self._on_model_loading
+        )
         self.llm = LLMResponder(api_key=self.config.GROQ_API_KEY, personality="pure_reachy")
         # Don't pass config voice defaults - let personalities use their own defaults
         self.tts = TextToSpeech(
@@ -80,6 +89,12 @@ class JudgyReachyNoPhone(ReachyMiniApp):
         self.camera_fps = 0
         self.detection_event_queue = []
 
+    def _on_model_loading(self, status: str, message: str):
+        """Callback for model loading progress (like demo.js)."""
+        self.model_loading_status = status
+        self.model_loading_message = message
+        logger.info(f"Model loading: {status} - {message}")
+
         # Register API endpoint for personalities (must be before server starts)
         @self.settings_app.get("/api/personalities")
         def get_personalities():
@@ -222,7 +237,8 @@ class JudgyReachyNoPhone(ReachyMiniApp):
         )
         ui_thread.start()
 
-        # Initialize detector
+        # Initialize detector (reports loading progress)
+        logger.info("Initializing YOLO model...")
         self.detector.initialize()
 
         # Auto-detect: Use laptop webcam in simulation, robot camera otherwise
@@ -231,12 +247,19 @@ class JudgyReachyNoPhone(ReachyMiniApp):
 
         if is_simulation:
             logger.info("Simulation mode detected - using laptop webcam...")
+            self.camera_loading_status = "connecting"
+            self.camera_loading_message = "Opening laptop webcam..."
+
             webcam = cv2.VideoCapture(0)
             if not webcam.isOpened():
                 logger.error("Failed to open laptop webcam!")
+                self.camera_loading_status = "error"
+                self.camera_loading_message = "Failed to open webcam"
                 webcam = None
             else:
                 logger.info("Laptop webcam opened successfully!")
+                self.camera_loading_status = "ready"
+                self.camera_loading_message = "Camera connected"
                 self.camera_running = True
 
                 # Start fast camera thread
@@ -248,7 +271,12 @@ class JudgyReachyNoPhone(ReachyMiniApp):
                 camera_thread.start()
         else:
             logger.info("Real robot detected - using robot camera...")
+            self.camera_loading_status = "connecting"
+            self.camera_loading_message = "Connecting to robot camera..."
+
             self.camera_running = True
+            self.camera_loading_status = "ready"
+            self.camera_loading_message = "Camera connected"
 
             # Start camera thread with robot's media system
             camera_thread = threading.Thread(
@@ -408,6 +436,20 @@ class JudgyReachyNoPhone(ReachyMiniApp):
             reset: bool = False  # If True, reset all stats (Start Fresh)
             personality: str = "pure_reachy"  # Robot personality
 
+        # API endpoint: Get loading status (like demo.js)
+        @self.settings_app.get("/api/loading-status")
+        def get_loading_status():
+            return {
+                "model_status": self.model_loading_status,
+                "model_message": self.model_loading_message,
+                "camera_status": self.camera_loading_status,
+                "camera_message": self.camera_loading_message,
+                "overall_ready": (
+                    self.model_loading_status == "ready" and
+                    self.camera_loading_status == "ready"
+                )
+            }
+
         # API endpoint: Get video frame
         @self.settings_app.get("/api/video-frame")
         def get_video_frame():
@@ -440,7 +482,7 @@ class JudgyReachyNoPhone(ReachyMiniApp):
             else:
                 status_text = "✅ Phone-free"
 
-            mode_text = f"YOLO26n | {'LLM + TTS' if self.llm.client else 'Pre-written lines'} → {'ElevenLabs' if self.tts.eleven_client else 'Edge TTS'}"
+            mode_text = f"YOLO26m | {'LLM + TTS' if self.llm.client else 'Pre-written lines'} → {'ElevenLabs' if self.tts.eleven_client else 'Edge TTS'}"
 
             # Determine button text
             if self.is_monitoring:
@@ -622,7 +664,7 @@ class JudgyReachyNoPhone(ReachyMiniApp):
             # Build mode string
             llm_text = "LLM + TTS" if result["groq_valid"] else "Pre-written lines"
             tts_text = "ElevenLabs" if result["eleven_valid"] else "Edge TTS"
-            result["mode"] = f"YOLO26n | {llm_text} → {tts_text}"
+            result["mode"] = f"YOLO26m | {llm_text} → {tts_text}"
 
             return result
 

judgy_reachy_no_phone/static/index.html

@@ -51,8 +51,14 @@
                             <path d="M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10"></path>
                             <line x1="1" y1="1" x2="23" y2="23"></line>
                         </svg>
-                        <div class="camera-status">Camera Inactive</div>
-                        <div class="camera-message">Waiting for camera connection...</div>
+                        <div class="camera-status" id="camera-status">Camera Inactive</div>
+                        <div class="camera-message" id="camera-message">Waiting for camera connection...</div>
+                    </div>
+
+                    <!-- Loading Overlay (like demo.js) -->
+                    <div id="loader-overlay" class="loader-overlay">
+                        <div class="spinner"></div>
+                        <p id="loader-text" class="loader-text">Initializing...</p>
                     </div>
                 </div>
             </div>

judgy_reachy_no_phone/static/main.js

@@ -3,6 +3,9 @@ let selectedPersonality = 'pure_reachy';
 let currentVoicePersonality = null;
 let voiceOverrides = JSON.parse(localStorage.getItem('voiceOverrides') || '{}');
 
+// Loading state (like demo.js)
+let loadingCheckInterval = null;
+
 // Load personalities from config dynamically
 async function loadPersonalities() {
     try {
@@ -74,7 +77,7 @@ async function updateUIForAPIKeys() {
 
     // If no API keys at all, show default message
     if (!groqKey && !elevenKey) {
-        document.getElementById('mode-text').textContent = 'YOLO26n | Pre-written personality lines → Edge TTS';
+        document.getElementById('mode-text').textContent = 'YOLO26m | Pre-written personality lines → Edge TTS';
         document.getElementById('api-notice').classList.remove('hidden');
         // Keep personalities enabled - they still have different voices and pre-written lines
         return;
@@ -421,6 +424,65 @@ async function updatePersonalityWhileRunning() {
     }
 }
 
+// Loading status functions (like demo.js)
+const showLoader = (text) => {
+    const loader = document.getElementById('loader-overlay');
+    const loaderText = document.getElementById('loader-text');
+    loaderText.textContent = text;
+    loader.classList.add('visible');
+};
+
+const hideLoader = () => {
+    const loader = document.getElementById('loader-overlay');
+    loader.classList.remove('visible');
+};
+
+// Check loading status and update UI
+async function checkLoadingStatus() {
+    try {
+        const response = await fetch('/api/loading-status');
+        const data = await response.json();
+
+        const cameraStatus = document.getElementById('camera-status');
+        const cameraMessage = document.getElementById('camera-message');
+
+        // Update loader overlay
+        if (data.model_status === 'loading') {
+            showLoader(data.model_message);
+        } else if (data.camera_status === 'connecting') {
+            showLoader(data.camera_message);
+        } else if (data.overall_ready) {
+            hideLoader();
+            // Stop polling once everything is ready
+            if (loadingCheckInterval) {
+                clearInterval(loadingCheckInterval);
+                loadingCheckInterval = null;
+            }
+        } else if (data.model_status === 'error' || data.camera_status === 'error') {
+            hideLoader();
+            if (loadingCheckInterval) {
+                clearInterval(loadingCheckInterval);
+                loadingCheckInterval = null;
+            }
+        }
+
+        // Update camera placeholder status
+        if (data.camera_status === 'connecting') {
+            cameraStatus.textContent = 'Connecting...';
+            cameraMessage.textContent = data.camera_message;
+        } else if (data.camera_status === 'ready') {
+            cameraStatus.textContent = 'Camera Ready';
+            cameraMessage.textContent = data.camera_message;
+        } else if (data.camera_status === 'error') {
+            cameraStatus.textContent = 'Camera Error';
+            cameraMessage.textContent = data.camera_message;
+        }
+
+    } catch (e) {
+        console.error('Loading status check failed:', e);
+    }
+}
+
 // Initial update - wait for personalities to load first
 async function initialize() {
     // Load personalities first
@@ -451,6 +513,10 @@ async function initialize() {
     updateVideo();
     updateUIForAPIKeys();
 
+    // Start loading status check (poll every 500ms until ready)
+    checkLoadingStatus();  // Check immediately
+    loadingCheckInterval = setInterval(checkLoadingStatus, 500);
+
     // Auto-update every 100ms for smooth video
     setInterval(() => {
         updateVideo();

judgy_reachy_no_phone/static/style.css

@@ -729,6 +729,53 @@ body {
     50% { opacity: 0.5; }
 }
 
+/* Loading Overlay (like demo.js) */
+.loader-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.9);
+    backdrop-filter: blur(8px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.loader-overlay.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 4px solid rgba(255, 255, 255, 0.1);
+    border-top-color: #667eea;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.loader-text {
+    color: #f1f5f9;
+    font-size: 1rem;
+    font-weight: 600;
+    margin-top: 1.5rem;
+    text-align: center;
+}
+
 /* Responsive */
 @media (max-width: 1200px) {
     .main-container {

style.css

@@ -335,46 +335,6 @@ section {
 	margin-right: auto;
 }
 
-/* Callout Box */
-.callout-box {
-	background: linear-gradient(135deg, rgba(255, 107, 74, 0.1), rgba(155, 126, 232, 0.08));
-	border: 2px solid rgba(255, 107, 74, 0.3);
-	border-radius: var(--radius-lg);
-	padding: 2.5rem;
-	text-align: center;
-	box-shadow: var(--shadow-lg);
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-
-.callout-icon {
-	font-size: 3.5rem;
-	margin-bottom: 1.25rem;
-}
-
-.callout-title {
-	font-family: 'Inter', sans-serif;
-	font-size: 1.75rem;
-	font-weight: 700;
-	margin-bottom: 1.25rem;
-	color: var(--text-primary);
-	line-height: 1.3;
-}
-
-.callout-text {
-	font-size: 1rem;
-	line-height: 1.7;
-	color: var(--text-body);
-	margin: 0;
-}
-
-.callout-text strong {
-	color: var(--coral-light);
-	font-weight: 700;
-}
-
 /* Configuration Section */
 .config-section {
 	text-align: center;
@@ -431,12 +391,6 @@ section {
 	opacity: 1;
 }
 
-.config-icon {
-	font-size: 3rem;
-	margin-bottom: 1.25rem;
-	display: inline-block;
-}
-
 .config-card h3 {
 	font-family: 'Inter', sans-serif;
 	font-size: 1.5rem;
@@ -751,47 +705,6 @@ section {
 	color: var(--coral);
 }
 
-	text-align: center;
-}
-
-.tech-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-	gap: 1rem;
-	max-width: 800px;
-	margin: 0 auto;
-}
-
-.tech-badge {
-	background: var(--bg-card);
-	border: 2px solid var(--border-soft);
-	border-radius: var(--radius-md);
-	padding: 1.5rem 1.25rem;
-	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-	box-shadow: var(--shadow-sm);
-}
-
-.tech-badge:hover {
-	border-color: var(--coral);
-	transform: translateY(-3px) scale(1.02);
-	box-shadow: var(--shadow-md);
-}
-
-.tech-label {
-	font-size: 0.7rem;
-	text-transform: uppercase;
-	letter-spacing: 0.06em;
-	color: var(--coral);
-	margin-bottom: 0.5rem;
-	font-weight: 700;
-}
-
-.tech-value {
-	font-family: 'Inter', sans-serif;
-	font-size: 0.95rem;
-	font-weight: 600;
-	color: var(--text-primary);
-}
 
 /* Footer */
 .footer {
@@ -837,20 +750,6 @@ section {
 }
 
 /* Responsive Design */
-@media (max-width: 900px) {
-	.steps-flow {
-		grid-template-columns: repeat(2, 1fr);
-		gap: 1rem;
-	}
-
-	.steps-flow::before {
-		display: none;
-	}
-
-	.step-box {
-		margin: 0;
-	}
-}
 
 @media (max-width: 768px) {
 	.hero-grid {
@@ -909,14 +808,6 @@ section {
 	.api-link-inline {
 		display: none;
 	}
-
-	.steps-flow {
-		grid-template-columns: 1fr;
-	}
-
-	.tech-grid {
-		grid-template-columns: repeat(2, 1fr);
-	}
 }
 
 @media (max-width: 480px) {
@@ -928,10 +819,6 @@ section {
 		font-size: 1.75rem;
 	}
 
-	.tech-grid {
-		grid-template-columns: 1fr;
-	}
-
 	.logo-text {
 		font-size: 0.9rem;
 	}
@@ -1196,262 +1083,6 @@ section {
 	font-style: italic;
 }
 
-/* Sidebar */
-.demo-sidebar {
-	display: flex;
-	flex-direction: column;
-	gap: 1.5rem;
-}
-
-.demo-card {
-	background: #1e293b;
-	border: 2px solid #334155;
-	border-radius: 16px;
-	padding: 1.5rem;
-}
-
-.demo-card-title {
-	color: #f1f5f9;
-	font-size: 1.1rem;
-	font-weight: 700;
-	margin-bottom: 1rem;
-}
-
-/* Stats */
-.stat-grid {
-	display: grid;
-	gap: 0.75rem;
-}
-
-.stat-item {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 0.75rem 0;
-	border-bottom: 1px solid #334155;
-}
-
-.stat-item:last-child {
-	border-bottom: none;
-}
-
-.stat-label {
-	color: #94a3b8;
-	font-size: 0.9rem;
-}
-
-.stat-value {
-	color: #f1f5f9;
-	font-weight: 700;
-	font-size: 1.1rem;
-}
-
-/* Select */
-.demo-select {
-	width: 100%;
-	padding: 0.75rem 1rem;
-	background: #0f172a;
-	border: 2px solid #334155;
-	border-radius: 8px;
-	color: #f1f5f9;
-	font-size: 1rem;
-	cursor: pointer;
-	transition: all 0.2s ease;
-}
-
-.demo-select:hover, .demo-select:focus {
-	border-color: #667eea;
-	outline: none;
-}
-
-/* Settings */
-.setting-item {
-	margin-bottom: 1.5rem;
-}
-
-.setting-item:last-child {
-	margin-bottom: 0;
-}
-
-.setting-label {
-	display: block;
-	color: #94a3b8;
-	font-size: 0.9rem;
-	margin-bottom: 0.5rem;
-}
-
-.demo-slider {
-	width: 100%;
-	height: 6px;
-	border-radius: 3px;
-	background: #334155;
-	outline: none;
-	-webkit-appearance: none;
-}
-
-.demo-slider::-webkit-slider-thumb {
-	-webkit-appearance: none;
-	appearance: none;
-	width: 20px;
-	height: 20px;
-	border-radius: 50%;
-	background: #667eea;
-	cursor: pointer;
-	transition: all 0.2s ease;
-}
-
-.demo-slider::-webkit-slider-thumb:hover {
-	background: #764ba2;
-	transform: scale(1.1);
-}
-
-.demo-slider::-moz-range-thumb {
-	width: 20px;
-	height: 20px;
-	border-radius: 50%;
-	background: #667eea;
-	cursor: pointer;
-	border: none;
-	transition: all 0.2s ease;
-}
-
-.demo-slider::-moz-range-thumb:hover {
-	background: #764ba2;
-	transform: scale(1.1);
-}
-
-.setting-checkbox {
-	display: flex;
-	align-items: center;
-	gap: 0.75rem;
-	color: #f1f5f9;
-	cursor: pointer;
-	user-select: none;
-}
-
-.setting-checkbox input[type="checkbox"] {
-	width: 20px;
-	height: 20px;
-	cursor: pointer;
-	accent-color: #667eea;
-}
-
-/* Note */
-.demo-note {
-	background: rgba(102, 126, 234, 0.1);
-	border: 2px solid rgba(102, 126, 234, 0.3);
-	border-radius: 12px;
-	padding: 1rem;
-	color: #cbd5e1;
-	font-size: 0.85rem;
-	line-height: 1.6;
-}
-
-.demo-note strong {
-	color: #f1f5f9;
-	display: block;
-	margin-bottom: 0.5rem;
-}
-
-.demo-note p {
-	margin: 0;
-}
-
-/* API Keys Section */
-.api-note {
-	color: #94a3b8;
-	font-size: 0.85rem;
-	margin-bottom: 1rem;
-	line-height: 1.5;
-}
-
-.demo-input {
-	width: 100%;
-	padding: 0.75rem 1rem;
-	background: #0f172a;
-	border: 2px solid #334155;
-	border-radius: 8px;
-	color: #f1f5f9;
-	font-size: 0.9rem;
-	transition: all 0.2s ease;
-}
-
-.demo-input:hover,
-.demo-input:focus {
-	border-color: #667eea;
-	outline: none;
-}
-
-.demo-input::placeholder {
-	color: #475569;
-}
-
-.api-link-inline {
-	color: #667eea;
-	text-decoration: none;
-	font-size: 0.85rem;
-	margin-left: 0.5rem;
-	transition: color 0.2s ease;
-}
-
-.api-link-inline:hover {
-	color: #764ba2;
-	text-decoration: underline;
-}
-
-.mode-indicator {
-	margin-top: 1rem;
-	padding: 0.75rem;
-	background: rgba(102, 126, 234, 0.1);
-	border-radius: 8px;
-	text-align: center;
-}
-
-#mode-text {
-	color: #cbd5e1;
-	font-size: 0.85rem;
-	font-weight: 600;
-}
-
-/* Secondary Controls Row */
-.demo-controls-secondary {
-	display: flex;
-	gap: 1rem;
-	flex-wrap: wrap;
-	margin-top: 1rem;
-}
-
-.demo-controls-secondary .btn-demo {
-	flex: 1;
-	min-width: 120px;
-}
-
-/* Pure Reachy Mode Info */
-.reachy-description {
-	color: #cbd5e1;
-	font-size: 0.85rem;
-	line-height: 1.6;
-	margin: 0;
-}
-
-/* Demo Download Button */
-.demo-download-btn {
-	display: inline-block;
-	margin-top: 1rem;
-	padding: 0.75rem 1.5rem;
-	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-	color: white;
-	text-decoration: none;
-	border-radius: 8px;
-	font-weight: 600;
-	transition: all 0.2s ease;
-}
-
-.demo-download-btn:hover {
-	transform: translateY(-2px);
-	box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
-}
-
 .demo-section .section-subtitle {
 	max-width: 1500px;  
 	line-height: 1.8; 
@@ -1514,43 +1145,6 @@ section {
 	transform: translateY(-3px);
 }
 
-/* Scroll Indicator */
-.scroll-indicator {
-	position: absolute;
-	bottom: 2rem;
-	left: 50%;
-	transform: translateX(-50%);
-	z-index: 10;
-}
-
-.scroll-arrow {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 48px;
-	height: 48px;
-	border-radius: 50%;
-	background: rgba(255, 255, 255, 0.1);
-	border: 2px solid rgba(255, 255, 255, 0.3);
-	color: white;
-	text-decoration: none;
-	transition: all 0.3s ease;
-	animation: bounce 2s infinite;
-}
-
-.scroll-arrow:hover {
-	background: rgba(255, 255, 255, 0.2);
-	border-color: rgba(255, 255, 255, 0.5);
-}
-
-@keyframes bounce {
-	0%, 100% {
-		transform: translateY(0);
-	}
-	50% {
-		transform: translateY(-10px);
-	}
-}
 
 /* Make hero section position relative for scroll indicator */
 .hero-section {
@@ -1562,14 +1156,6 @@ section {
 	max-width: 1450px;  /* Wider for more spread out content */
 }
 
-/* Robot Animation Container */
-.robot-container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 1rem;
-}
-
 /* Green background container (stationary, vertical rectangle) */
 .robot-bg {
 	background: #3DDE99;  /* Reachy green */
@@ -1588,7 +1174,7 @@ section {
 	height: 150%;
 	display: block;
 	object-fit: cover;  /* Fill the container */
-	transform-origin: center center;                                                                                               
+	transform-origin: center center;
     margin: -25%;  /* Re-center after zoom */
 	animation: robot-idle 3s ease-in-out infinite;
 }
@@ -1871,22 +1457,6 @@ section {
 	}
 }
 
-/* Mobile-specific subtitle */
-.mobile-subtitle {
-	display: none;  /* Hidden on desktop */
-}
-
-@media (max-width: 640px) {
-	.mobile-subtitle {
-		display: block;  /* Show on mobile */
-		color: #cbd5e1;
-		font-size: 0.85rem;
-		line-height: 1.5;
-		text-align: center;
-		margin-bottom: 2rem;
-		padding: 0 1rem;
-	}
-}
 
 /* Mobile: Tighter hero spacing and GIF closer to top */
 @media (max-width: 640px) {
@@ -1985,119 +1555,6 @@ h4, h5, h6, strong {
 	font-weight: 500;  /* Medium for buttons */
 }
 
-/* Mobile: Smaller 3-column personalities */
-@media (max-width: 640px) {
-	.personalities-grid {
-		grid-template-columns: repeat(3, 1fr);
-		gap: 0.25rem;  /* Tighter spacing */
-	}
-
-	.personality-card {
-		padding: 0.5rem 0.25rem;  /* Minimal padding */
-		border: none;
-		background: transparent;
-		box-shadow: none;
-	}
-
-	.personality-card:hover {
-		transform: none;
-		box-shadow: none;
-	}
-
-	.personality-emoji {
-		font-size: 1.5rem;
-		margin-bottom: 0.25rem;
-	}
-
-	.personality-card h3 {
-		font-size: 0.75rem;
-		margin-bottom: 0.25rem;
-	}
-
-	.personality-card p {
-		display: none;  /* Hide description on mobile */
-	}
-
-	.personality-tags {
-		display: none;  /* Hide tags to save space */
-	}
-}
-
-/* Mobile: Compact features (3 columns) */
-@media (max-width: 640px) {
-	.features-grid {
-		grid-template-columns: repeat(3, 1fr);
-		gap: 0.25rem;
-	}
-
-	.feature-item {
-		padding: 0.75rem 0.5rem;
-		border: none;
-		background: transparent;
-		box-shadow: none;
-	}
-
-	.feature-item:hover {
-		transform: none;
-	}
-
-	.feature-icon-badge {
-		width: 36px;
-		height: 36px;
-		margin-bottom: 0.5rem;
-		border-radius: 8px;
-	}
-
-	.feature-icon-badge svg {
-		width: 16px;
-		height: 16px;
-	}
-
-	.feature-item h3 {
-		font-size: 0.75rem;
-		margin-bottom: 0.25rem;
-	}
-
-	.feature-item p {
-		display: none;  /* Hide description */
-	}
-}
-
-/* Mobile: Compact steps (2x2 grid for 4 steps) */
-@media (max-width: 640px) {
-	.steps-flow {
-		grid-template-columns: repeat(2, 1fr);
-		gap: 0.5rem;
-	}
-
-	.step-box {
-		padding: 1rem 0.75rem;
-		margin: 0;
-		border: none;
-		background: transparent;
-		box-shadow: none;
-	}
-
-	.step-box:hover {
-		transform: none;
-	}
-
-	.step-num {
-		width: 32px;
-		height: 32px;
-		font-size: 0.9rem;
-		margin-bottom: 0.5rem;
-	}
-
-	.step-box h3 {
-		font-size: 0.75rem;
-		margin-bottom: 0.25rem;
-	}
-
-	.step-box p {
-		font-size: 0.65rem;
-	}
-}
 
 /* Mobile: Prevent all overflow */
 @media (max-width: 640px) {
@@ -2126,7 +1583,6 @@ h4, h5, h6, strong {
 @media (max-width: 640px) {
 	.config-section,
 	.features-section,
-	.how-section,
 	.personalities-section {
 		display: none;
 	}