Upload app.py with huggingface_hub

app.py

@@ -57,6 +57,569 @@ MOBILE_CSS = """
 /* Status indicators */
 .status-online { color: #4CAF50; font-weight: bold; }
 .status-offline { color: #F44336; font-weight: bold; }
+
+/* PWA install banner */
+#pwa-install { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000;
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: white;
+    padding: 16px; text-align: center; box-shadow: 0 -4px 12px rgba(0,0,0,0.3); }
+#pwa-install button { background: #2196F3; color: white; border: none; padding: 12px 24px;
+    border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; margin: 0 8px; }
+#pwa-install .dismiss { background: transparent; color: #999; }
+
+/* Auth tokens section */
+.token-input input { font-family: monospace !important; letter-spacing: 1px; }
+"""
+
+
+# =============================================================================
+# PWA + SERVICE WORKER + NOTIFICATIONS + DEVICE ACCESS
+# =============================================================================
+
+PWA_HEAD_HTML = """
+<script>
+// ═══════════════════════════════════════════════════════════
+// PWA MANIFEST (inline, no separate file needed on HF Spaces)
+// ═══════════════════════════════════════════════════════════
+const manifest = {
+    name: "Neon VLA",
+    short_name: "Neon",
+    description: "Teaching robots to see time — VLA for humanoid control",
+    start_url: window.location.href.split('?')[0],
+    display: "standalone",
+    background_color: "#1a1a2e",
+    theme_color: "#2196F3",
+    orientation: "any",
+    icons: [
+        { src: "https://huggingface.co/spaces/cagataydev/neon-vla/resolve/main/icon-192.png",
+          sizes: "192x192", type: "image/png" },
+        { src: "https://huggingface.co/spaces/cagataydev/neon-vla/resolve/main/icon-512.png",
+          sizes: "512x512", type: "image/png" },
+    ],
+    categories: ["robotics", "ai", "science"],
+};
+// Inject manifest as blob URL
+const manifestBlob = new Blob([JSON.stringify(manifest)], {type: 'application/json'});
+const manifestUrl = URL.createObjectURL(manifestBlob);
+const link = document.createElement('link');
+link.rel = 'manifest';
+link.href = manifestUrl;
+document.head.appendChild(link);
+
+// Meta tags for iOS PWA
+const metas = [
+    ['apple-mobile-web-app-capable', 'yes'],
+    ['apple-mobile-web-app-status-bar-style', 'black-translucent'],
+    ['apple-mobile-web-app-title', 'Neon VLA'],
+    ['theme-color', '#2196F3'],
+    ['viewport', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover'],
+];
+metas.forEach(([name, content]) => {
+    let m = document.createElement('meta');
+    m.name = name; m.content = content;
+    document.head.appendChild(m);
+});
+
+// ═══════════════════════════════════════════════════════════
+// SERVICE WORKER (inline registration)
+// ═══════════════════════════════════════════════════════════
+const swCode = `
+self.addEventListener('install', e => { self.skipWaiting(); });
+self.addEventListener('activate', e => { e.waitUntil(clients.claim()); });
+self.addEventListener('push', e => {
+    const data = e.data ? e.data.json() : { title: 'Neon VLA', body: 'Notification' };
+    e.waitUntil(self.registration.showNotification(data.title, {
+        body: data.body, icon: '/favicon.ico', badge: '/favicon.ico',
+        vibrate: [200, 100, 200], tag: data.tag || 'neon',
+        data: data.url || '/',
+    }));
+});
+self.addEventListener('notificationclick', e => {
+    e.notification.close();
+    e.waitUntil(clients.openWindow(e.notification.data));
+});
+`;
+if ('serviceWorker' in navigator) {
+    const swBlob = new Blob([swCode], {type: 'application/javascript'});
+    const swUrl = URL.createObjectURL(swBlob);
+    navigator.serviceWorker.register(swUrl, {scope: '/'}).catch(() => {
+        // Blob SW may fail on some browsers; that's ok, non-critical
+        console.log('SW registration skipped (blob URL not supported in this context)');
+    });
+}
+
+// ═══════════════════════════════════════════════════════════
+// PWA INSTALL PROMPT
+// ═══════════════════════════════════════════════════════════
+let deferredPrompt = null;
+window.addEventListener('beforeinstallprompt', e => {
+    e.preventDefault();
+    deferredPrompt = e;
+    document.getElementById('pwa-install').style.display = 'block';
+});
+function installPWA() {
+    if (!deferredPrompt) return;
+    deferredPrompt.prompt();
+    deferredPrompt.userChoice.then(r => {
+        document.getElementById('pwa-install').style.display = 'none';
+        deferredPrompt = null;
+    });
+}
+function dismissInstall() {
+    document.getElementById('pwa-install').style.display = 'none';
+}
+
+// ═══════════════════════════════════════════════════════════
+// NOTIFICATIONS API
+// ═══════════════════════════════════════════════════════════
+window.neonNotify = async function(title, body, tag) {
+    if (!('Notification' in window)) return;
+    if (Notification.permission === 'default') await Notification.requestPermission();
+    if (Notification.permission === 'granted') {
+        new Notification(title, { body: body, icon: '/favicon.ico', tag: tag || 'neon',
+            vibrate: [200, 100, 200] });
+    }
+};
+
+// ═══════════════════════════════════════════════════════════
+// TOKEN STORAGE (localStorage, never sent to server)
+// ═══════════════════════════════════════════════════════════
+window.neonTokens = {
+    save: function(key, value) { localStorage.setItem('neon_' + key, value); },
+    get: function(key) { return localStorage.getItem('neon_' + key) || ''; },
+    clear: function(key) { localStorage.removeItem('neon_' + key); },
+};
+</script>
+
+<!-- PWA install banner -->
+<div id="pwa-install">
+    <div style="font-weight:600; font-size:16px; margin-bottom:8px;">📱 Install Neon VLA</div>
+    <div style="font-size:13px; color:#ccc; margin-bottom:12px;">Add to home screen for offline access & push notifications</div>
+    <button onclick="installPWA()">⬇️ Install App</button>
+    <button class="dismiss" onclick="dismissInstall()">Not now</button>
+</div>
+"""
+
+
+# =============================================================================
+# DATA CAPTURE — iPhone LiDAR, Camera, Video upload
+# =============================================================================
+
+def get_capture_html():
+    """HTML for iPhone data capture: LiDAR, camera, video upload."""
+    return """
+<div id="capture-panel" style="font-family: -apple-system, system-ui, sans-serif;">
+<style>
+    .cap-section { background: #f8f9fa; border-radius: 16px; padding: 16px; margin: 12px 0; }
+    .cap-btn { width: 100%; min-height: 56px; font-size: 16px; font-weight: 600;
+               border-radius: 14px; border: 2px solid #ddd; cursor: pointer; margin: 6px 0;
+               display: flex; align-items: center; justify-content: center; gap: 8px; background: white; }
+    .cap-btn:active { transform: scale(0.97); background: #E3F2FD; }
+    .cap-btn.recording { background: #FFEBEE; border-color: #F44336; animation: pulse 1s infinite; }
+    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }
+    .cap-status { font-size: 13px; color: #666; text-align: center; margin: 4px 0; }
+    .cap-progress { height: 4px; background: #eee; border-radius: 2px; margin: 8px 0; overflow: hidden; }
+    .cap-progress-bar { height: 100%; background: #4CAF50; border-radius: 2px; transition: width 0.3s; width: 0%; }
+    .token-row { display: flex; gap: 8px; margin: 8px 0; align-items: center; }
+    .token-row input { flex: 1; padding: 12px; border-radius: 10px; border: 1.5px solid #ddd;
+                       font-size: 14px; font-family: monospace; }
+    .token-row button { min-width: 60px; padding: 12px; border-radius: 10px; border: none;
+                        background: #4CAF50; color: white; font-weight: 600; cursor: pointer; }
+    .token-row button.delete { background: #F44336; min-width: 40px; }
+    .saved-badge { display: inline-block; background: #E8F5E9; color: #2E7D32; padding: 2px 8px;
+                   border-radius: 6px; font-size: 12px; font-weight: 600; }
+    .upload-zone { border: 2px dashed #ccc; border-radius: 16px; padding: 32px; text-align: center;
+                   cursor: pointer; transition: all 0.2s; margin: 8px 0; }
+    .upload-zone:hover, .upload-zone.dragover { border-color: #2196F3; background: #E3F2FD; }
+    .upload-zone input { display: none; }
+    #lidar-canvas { width: 100%; height: 200px; background: #000; border-radius: 12px; }
+</style>
+
+<!-- ══════ AUTH TOKENS ══════ -->
+<div class="cap-section">
+    <h3 style="margin:0 0 8px">🔑 Authentication</h3>
+    <p style="font-size:13px; color:#888; margin:0 0 12px">Tokens stored locally in your browser only — never sent to our server.</p>
+
+    <label style="font-size:13px; font-weight:600;">HuggingFace Token</label>
+    <div class="token-row">
+        <input type="password" id="hf-token" placeholder="hf_..." oninput="checkTokenSaved('hf')">
+        <button onclick="saveToken('hf')">Save</button>
+        <button class="delete" onclick="clearToken('hf')">✕</button>
+    </div>
+    <div class="cap-status" id="hf-status"></div>
+
+    <label style="font-size:13px; font-weight:600;">GitHub Token</label>
+    <div class="token-row">
+        <input type="password" id="gh-token" placeholder="ghp_..." oninput="checkTokenSaved('gh')">
+        <button onclick="saveToken('gh')">Save</button>
+        <button class="delete" onclick="clearToken('gh')">✕</button>
+    </div>
+    <div class="cap-status" id="gh-status"></div>
+
+    <label style="font-size:13px; font-weight:600;">Robot WebSocket URL</label>
+    <div class="token-row">
+        <input type="text" id="robot-url" placeholder="ws://192.168.123.10:10100" oninput="checkTokenSaved('robot')">
+        <button onclick="saveToken('robot')">Save</button>
+        <button class="delete" onclick="clearToken('robot')">✕</button>
+    </div>
+    <div class="cap-status" id="robot-status"></div>
+</div>
+
+<!-- ══════ IPHONE LIDAR CAPTURE ══════ -->
+<div class="cap-section">
+    <h3 style="margin:0 0 8px">📡 iPhone LiDAR Scanner</h3>
+    <p style="font-size:13px; color:#888; margin:0 0 8px">Requires iPhone 12 Pro+ or iPad Pro with LiDAR. Uses WebXR Depth API.</p>
+
+    <canvas id="lidar-canvas"></canvas>
+    <div class="cap-status" id="lidar-status">Tap to start LiDAR scanning</div>
+    <div class="cap-progress"><div class="cap-progress-bar" id="lidar-progress"></div></div>
+
+    <button class="cap-btn" id="lidar-btn" onclick="toggleLidar()">
+        📡 Start LiDAR Scan
+    </button>
+    <button class="cap-btn" onclick="downloadLidarData()" style="background:#E8F5E9;">
+        💾 Download Point Cloud (.ply)
+    </button>
+</div>
+
+<!-- ══════ CAMERA CAPTURE ══════ -->
+<div class="cap-section">
+    <h3 style="margin:0 0 8px">📹 Camera Recording</h3>
+    <p style="font-size:13px; color:#888; margin:0 0 8px">Record episodes from your phone camera for robot training data.</p>
+
+    <video id="camera-preview" autoplay playsinline muted
+           style="width:100%; border-radius:12px; background:#000; max-height:300px; object-fit:cover;"></video>
+    <div class="cap-status" id="camera-status">Tap to start camera</div>
+
+    <button class="cap-btn" id="camera-btn" onclick="toggleCamera()">
+        📹 Start Camera
+    </button>
+    <button class="cap-btn" id="record-btn" onclick="toggleRecording()" style="display:none;">
+        🔴 Record Episode
+    </button>
+    <div class="cap-status" id="record-status"></div>
+</div>
+
+<!-- ══════ VIDEO UPLOAD ══════ -->
+<div class="cap-section">
+    <h3 style="margin:0 0 8px">📤 Upload Training Video</h3>
+    <p style="font-size:13px; color:#888; margin:0 0 8px">Upload demonstration videos to create training episodes.</p>
+
+    <div class="upload-zone" id="upload-zone" onclick="document.getElementById('video-input').click()"
+         ondragover="event.preventDefault(); this.classList.add('dragover')"
+         ondragleave="this.classList.remove('dragover')"
+         ondrop="event.preventDefault(); this.classList.remove('dragover'); handleVideoDrop(event)">
+        <div style="font-size:48px;">🎬</div>
+        <div style="font-size:15px; font-weight:600; margin:8px 0;">Tap to select or drag video</div>
+        <div style="font-size:13px; color:#999;">MP4, MOV, WebM · Max 500MB</div>
+        <input type="file" id="video-input" accept="video/*" onchange="handleVideoSelect(event)">
+    </div>
+    <div class="cap-progress"><div class="cap-progress-bar" id="upload-progress"></div></div>
+    <div class="cap-status" id="upload-status"></div>
+</div>
+
+<!-- ══════ PUSH NOTIFICATIONS ══════ -->
+<div class="cap-section">
+    <h3 style="margin:0 0 8px">🔔 Notifications</h3>
+    <button class="cap-btn" onclick="enableNotifications()">
+        🔔 Enable Push Notifications
+    </button>
+    <div class="cap-status" id="notif-status"></div>
+    <button class="cap-btn" onclick="testNotification()" style="background:#FFF3E0;">
+        🧪 Test Notification
+    </button>
+</div>
+
+<script>
+// ── Token Management ────────────────────────────────
+function saveToken(type) {
+    const input = document.getElementById(type === 'hf' ? 'hf-token' : type === 'gh' ? 'gh-token' : 'robot-url');
+    if (!input.value) return;
+    neonTokens.save(type + '_token', input.value);
+    document.getElementById(type + '-status').innerHTML = '<span class="saved-badge">✅ Saved securely</span>';
+    // Also inject into Gradio state if needed
+    if (type === 'hf') window._neonHfToken = input.value;
+    if (type === 'gh') window._neonGhToken = input.value;
+}
+function clearToken(type) {
+    neonTokens.clear(type + '_token');
+    const input = document.getElementById(type === 'hf' ? 'hf-token' : type === 'gh' ? 'gh-token' : 'robot-url');
+    input.value = '';
+    document.getElementById(type + '-status').textContent = 'Cleared';
+}
+function checkTokenSaved(type) {
+    // Real-time feedback
+}
+// Restore tokens on load
+window.addEventListener('load', () => {
+    ['hf', 'gh', 'robot'].forEach(type => {
+        const val = neonTokens.get(type + '_token');
+        if (val) {
+            const input = document.getElementById(type === 'hf' ? 'hf-token' : type === 'gh' ? 'gh-token' : 'robot-url');
+            input.value = val;
+            document.getElementById(type + '-status').innerHTML = '<span class="saved-badge">✅ Saved</span>';
+            if (type === 'hf') window._neonHfToken = val;
+            if (type === 'gh') window._neonGhToken = val;
+        }
+    });
+});
+
+// ── LiDAR (WebXR Depth API) ────────────────────────
+let xrSession = null;
+let lidarPoints = [];
+let lidarRunning = false;
+
+async function toggleLidar() {
+    const btn = document.getElementById('lidar-btn');
+    if (lidarRunning) {
+        if (xrSession) xrSession.end();
+        lidarRunning = false;
+        btn.textContent = '📡 Start LiDAR Scan';
+        btn.classList.remove('recording');
+        document.getElementById('lidar-status').textContent = `Captured ${lidarPoints.length} points`;
+        return;
+    }
+
+    // Check WebXR support
+    if (!navigator.xr) {
+        document.getElementById('lidar-status').textContent = '❌ WebXR not supported. Use iPhone 12 Pro+ Safari.';
+        return;
+    }
+
+    try {
+        const supported = await navigator.xr.isSessionSupported('immersive-ar');
+        if (!supported) {
+            // Fallback: use depth estimation from camera
+            document.getElementById('lidar-status').textContent = '⚠️ AR not supported. Using camera depth fallback...';
+            startCameraDepthFallback();
+            return;
+        }
+
+        xrSession = await navigator.xr.requestSession('immersive-ar', {
+            requiredFeatures: ['depth-sensing'],
+            depthSensing: { usagePreference: ['cpu-optimized'], dataFormatPreference: ['luminance-alpha'] }
+        });
+
+        lidarRunning = true;
+        lidarPoints = [];
+        btn.textContent = '⏹️ Stop Scanning';
+        btn.classList.add('recording');
+        document.getElementById('lidar-status').textContent = 'Scanning... move your phone slowly';
+
+        const canvas = document.getElementById('lidar-canvas');
+        const gl = canvas.getContext('webgl2');
+        const refSpace = await xrSession.requestReferenceSpace('local');
+
+        xrSession.requestAnimationFrame(function onFrame(time, frame) {
+            if (!lidarRunning) return;
+            const pose = frame.getViewerPose(refSpace);
+            if (pose) {
+                for (const view of pose.views) {
+                    const depthInfo = frame.getDepthInformation(view);
+                    if (depthInfo) {
+                        // Sample depth at grid points
+                        for (let y = 0; y < depthInfo.height; y += 4) {
+                            for (let x = 0; x < depthInfo.width; x += 4) {
+                                const depth = depthInfo.getDepthInMeters(x / depthInfo.width, y / depthInfo.height);
+                                if (depth > 0 && depth < 10) {
+                                    lidarPoints.push([
+                                        (x / depthInfo.width - 0.5) * depth,
+                                        (y / depthInfo.height - 0.5) * depth,
+                                        -depth
+                                    ]);
+                                }
+                            }
+                        }
+                        document.getElementById('lidar-status').textContent = `Scanning... ${lidarPoints.length} points`;
+                        const pct = Math.min(100, lidarPoints.length / 100);
+                        document.getElementById('lidar-progress').style.width = pct + '%';
+                    }
+                }
+            }
+            xrSession.requestAnimationFrame(onFrame);
+        });
+
+        xrSession.addEventListener('end', () => { lidarRunning = false; });
+    } catch (e) {
+        document.getElementById('lidar-status').textContent = '❌ ' + e.message;
+    }
+}
+
+function startCameraDepthFallback() {
+    // Use regular camera as fallback — records video frames for monocular depth estimation
+    document.getElementById('lidar-status').textContent = 'Using camera video → will estimate depth server-side';
+    toggleCamera();
+}
+
+function downloadLidarData() {
+    if (!lidarPoints.length) {
+        document.getElementById('lidar-status').textContent = 'No points captured yet';
+        return;
+    }
+    // Export as PLY format
+    let ply = `ply\\nformat ascii 1.0\\nelement vertex ${lidarPoints.length}\\n`;
+    ply += 'property float x\\nproperty float y\\nproperty float z\\nend_header\\n';
+    lidarPoints.forEach(p => { ply += `${p[0].toFixed(4)} ${p[1].toFixed(4)} ${p[2].toFixed(4)}\\n`; });
+    const blob = new Blob([ply], {type: 'application/octet-stream'});
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = `neon-lidar-${Date.now()}.ply`;
+    a.click();
+    document.getElementById('lidar-status').textContent = `Downloaded ${lidarPoints.length} points`;
+}
+
+// ── Camera Recording ────────────────────────────────
+let cameraStream = null;
+let mediaRecorder = null;
+let recordedChunks = [];
+let isRecording = false;
+
+async function toggleCamera() {
+    const btn = document.getElementById('camera-btn');
+    const recordBtn = document.getElementById('record-btn');
+    const preview = document.getElementById('camera-preview');
+
+    if (cameraStream) {
+        cameraStream.getTracks().forEach(t => t.stop());
+        cameraStream = null;
+        preview.srcObject = null;
+        btn.textContent = '📹 Start Camera';
+        recordBtn.style.display = 'none';
+        document.getElementById('camera-status').textContent = 'Camera stopped';
+        return;
+    }
+
+    try {
+        cameraStream = await navigator.mediaDevices.getUserMedia({
+            video: { facingMode: 'environment', width: { ideal: 1920 }, height: { ideal: 1080 } },
+            audio: true,
+        });
+        preview.srcObject = cameraStream;
+        btn.textContent = '⏹️ Stop Camera';
+        recordBtn.style.display = 'block';
+        document.getElementById('camera-status').textContent = 'Camera active — tap Record to capture an episode';
+    } catch (e) {
+        document.getElementById('camera-status').textContent = '❌ ' + e.message;
+    }
+}
+
+function toggleRecording() {
+    const btn = document.getElementById('record-btn');
+    if (isRecording) {
+        mediaRecorder.stop();
+        isRecording = false;
+        btn.textContent = '🔴 Record Episode';
+        btn.classList.remove('recording');
+        return;
+    }
+    if (!cameraStream) return;
+    recordedChunks = [];
+    mediaRecorder = new MediaRecorder(cameraStream, { mimeType: 'video/webm;codecs=vp9' });
+    mediaRecorder.ondataavailable = e => { if (e.data.size > 0) recordedChunks.push(e.data); };
+    mediaRecorder.onstop = () => {
+        const blob = new Blob(recordedChunks, { type: 'video/webm' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `neon-episode-${Date.now()}.webm`;
+        a.click();
+        document.getElementById('record-status').textContent = `Episode saved (${(blob.size/1e6).toFixed(1)} MB)`;
+        if (window.neonNotify) neonNotify('Neon VLA', 'Episode recorded successfully!', 'record');
+    };
+    mediaRecorder.start(100);
+    isRecording = true;
+    btn.textContent = '⏹️ Stop Recording';
+    btn.classList.add('recording');
+    document.getElementById('record-status').textContent = 'Recording...';
+    // Track duration
+    let sec = 0;
+    const timer = setInterval(() => {
+        if (!isRecording) { clearInterval(timer); return; }
+        sec++;
+        document.getElementById('record-status').textContent = `Recording... ${sec}s`;
+    }, 1000);
+}
+
+// ── Video Upload ────────────────────────────────────
+function handleVideoSelect(e) { uploadVideo(e.target.files[0]); }
+function handleVideoDrop(e) { uploadVideo(e.dataTransfer.files[0]); }
+
+async function uploadVideo(file) {
+    if (!file) return;
+    const status = document.getElementById('upload-status');
+    const progress = document.getElementById('upload-progress');
+
+    if (file.size > 500 * 1024 * 1024) {
+        status.textContent = '❌ File too large (max 500MB)';
+        return;
+    }
+
+    status.textContent = `Uploading ${file.name} (${(file.size/1e6).toFixed(1)} MB)...`;
+
+    // If HF token available, upload to HF dataset
+    const hfToken = neonTokens.get('hf_token');
+    if (hfToken) {
+        try {
+            const formData = new FormData();
+            formData.append('file', file);
+
+            // Use HF Hub API to upload
+            const resp = await fetch(
+                `https://huggingface.co/api/datasets/cagataydev/neon-episodes/upload/main/${file.name}`,
+                {
+                    method: 'POST',
+                    headers: { 'Authorization': `Bearer ${hfToken}` },
+                    body: formData,
+                }
+            );
+
+            if (resp.ok) {
+                status.textContent = `✅ Uploaded to HuggingFace: cagataydev/neon-episodes/${file.name}`;
+                progress.style.width = '100%';
+                if (window.neonNotify) neonNotify('Neon VLA', `Video uploaded: ${file.name}`, 'upload');
+            } else {
+                status.textContent = `⚠️ Upload failed (${resp.status}). Downloading locally instead.`;
+                downloadVideoLocally(file);
+            }
+        } catch (e) {
+            status.textContent = `⚠️ Upload error. Downloading locally.`;
+            downloadVideoLocally(file);
+        }
+    } else {
+        status.textContent = '💡 Add HF Token above to upload directly to HuggingFace. Downloading locally...';
+        downloadVideoLocally(file);
+    }
+}
+
+function downloadVideoLocally(file) {
+    const url = URL.createObjectURL(file);
+    const a = document.createElement('a');
+    a.href = url; a.download = file.name; a.click();
+    document.getElementById('upload-status').textContent = `Saved locally: ${file.name}`;
+}
+
+// ── Push Notifications ──────────────────────────────
+async function enableNotifications() {
+    const status = document.getElementById('notif-status');
+    if (!('Notification' in window)) {
+        status.textContent = '❌ Notifications not supported in this browser';
+        return;
+    }
+    const perm = await Notification.requestPermission();
+    if (perm === 'granted') {
+        status.innerHTML = '<span class="saved-badge">✅ Notifications enabled</span>';
+        neonNotify('Neon VLA', 'Notifications are working!', 'test');
+    } else {
+        status.textContent = '❌ Permission denied. Enable in browser settings.';
+    }
+}
+
+function testNotification() {
+    if (window.neonNotify) {
+        neonNotify('🤖 Training Complete', 'neon-g1-v1 finished training. Loss: 0.0023', 'train');
+    }
+}
+</script>
+</div>
 """
 
 
@@ -709,6 +1272,7 @@ with gr.Blocks(
     title="Neon VLA",
     theme=gr.themes.Soft(),
     css=MOBILE_CSS,
+    head=PWA_HEAD_HTML,
 ) as demo:
 
     # Header — compact for phone
@@ -761,7 +1325,14 @@ with gr.Blocks(
             gr.HTML(get_robot_control_html())
 
         # ═══════════════════════════════════════════════════════════
-        # TAB 3: TRAIN — simplified training interface
+        # TAB 3: CAPTURE — LiDAR, camera, video upload, auth
+        # ═══════════════════════════════════════════════════════════
+        with gr.TabItem("📱 Capture"):
+            gr.Markdown("### Record Data from Your Phone")
+            gr.HTML(get_capture_html())
+
+        # ═══════════════════════════════════════════════════════════
+        # TAB 4: TRAIN — simplified training interface
         # ═══════════════════════════════════════════════════════════
         with gr.TabItem("🏋️ Train"):
             gr.Markdown("### Quick Training Demo (ZeroGPU)")