Spaces:

onitsche
/

talk_with_claude

Running

Oliver Nitsche Claude Sonnet 4.6 commited on 27 days ago

Commit

771abdd

1 Parent(s): 4a11cd1

Initial scaffold: Talk with Claude via Reachy Mini

Static HF Space — Claude API (streaming) + animated robot gestures.

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

Files changed (3) hide show

README.md +8 -5
index.html +650 -17
style.css +524 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Talk With Claude
-emoji: 🏆
-colorFrom: blue
 colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Talk with Claude — Reachy Mini
+emoji: 🤖
+colorFrom: purple
 colorTo: indigo
 sdk: static
 pinned: false
+hf_oauth: true
+hf_oauth_expiration_minutes: 480
+tags:
+  - reachy_mini
+  - reachy_mini_js_app
 ---

index.html CHANGED Viewed

@@ -1,19 +1,652 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</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>Talk with Claude — 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 View -->
+    <div id="loginView" class="login-view">
+        <div class="login-card">
+            <img class="login-logo" src="https://raw.githubusercontent.com/pollen-robotics/reachy-mini-desktop-app/develop/src-tauri/icons/128x128.png" alt="Reachy Mini">
+            <h2>Talk with Claude</h2>
+            <p>Sign in with your HuggingFace account to connect your Reachy Mini and have an animated conversation powered by Claude AI.</p>
+            <button class="btn-hf" onclick="loginToHuggingFace()">
+                <svg width="18" height="18" 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>
+    <!-- Main App -->
+    <div id="mainApp" class="hidden">
+        <header class="header">
+            <div class="logo">
+                <img src="https://raw.githubusercontent.com/pollen-robotics/reachy-mini-desktop-app/develop/src-tauri/icons/128x128.png" alt="Reachy Mini">
+                <div class="logo-text">Talk with Claude <span>via Reachy Mini</span></div>
+            </div>
+            <div class="user-section">
+                <div class="user-badge"><span id="username">@user</span></div>
+                <button class="btn-icon" onclick="openSettings()" title="Settings" aria-label="Settings">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="3"></circle>
+                        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+                    </svg>
+                </button>
+                <button class="btn-logout" onclick="logout()">Sign out</button>
+            </div>
+        </header>
+        <div class="app-container">
+            <!-- Video -->
+            <div class="video-container">
+                <video id="remoteVideo" autoplay playsinline muted></video>
+                <div class="video-overlay-top">
+                    <div class="connection-badge">
+                        <div class="status-indicator" id="statusIndicator"></div>
+                        <span id="statusText">Disconnected</span>
+                    </div>
+                    <div class="robot-name" id="robotName"></div>
+                    <div class="latency-badge hidden" id="latencyBadge">
+                        <span id="latencyValue">--</span>
+                    </div>
+                </div>
+                <div class="video-overlay-bottom">
+                    <div class="video-controls">
+                        <button class="btn btn-secondary" id="connectBtn" onclick="connectSignaling()">Connect</button>
+                        <button class="btn btn-primary"   id="startBtn"   onclick="startStream()"     disabled>Start</button>
+                        <button class="btn btn-danger"    id="stopBtn"    onclick="stopStream()"      disabled>Stop</button>
+                        <button class="btn btn-mute muted" id="muteBtn"   onclick="toggleMute()"      disabled>
+                            <svg id="speakerOffIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+                                <line x1="23" y1="9" x2="17" y2="15"></line>
+                                <line x1="17" y1="9" x2="23" y2="15"></line>
+                            </svg>
+                            <svg id="speakerOnIcon" class="hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+                                <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
+                            </svg>
+                            <span id="muteText">Unmute</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Robot Selector -->
+            <div id="robotSelector" class="panel hidden">
+                <div class="panel-header">Available Robots</div>
+                <div class="panel-content">
+                    <div id="robotList" class="robot-list">
+                        <div style="color: var(--text-muted); font-size: 0.85em;">Searching…</div>
+                    </div>
+                </div>
+            </div>
+            <!-- Conversation History -->
+            <div class="panel" id="conversationPanel">
+                <div class="panel-header">Conversation</div>
+                <div class="panel-content">
+                    <div id="conversationHistory" class="conversation-history">
+                        <div class="message msg-system">Connect your robot and press Talk to start.</div>
+                    </div>
+                    <div id="interimTranscript" class="interim-transcript"></div>
+                </div>
+            </div>
+            <!-- Talk Panel -->
+            <div class="panel" id="talkPanel">
+                <div class="panel-header">Voice</div>
+                <div class="panel-content talk-content">
+                    <div id="convStateLabel" class="conv-state state-idle">Idle</div>
+                    <button id="talkBtn" class="talk-btn" onclick="startListening()" disabled aria-label="Start talking">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
+                            <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
+                            <line x1="12" y1="19" x2="12" y2="23"></line>
+                            <line x1="8" y1="23" x2="16" y2="23"></line>
+                        </svg>
+                        <span>Talk</span>
+                    </button>
+                    <button id="stopSpeakBtn" class="btn btn-danger hidden" onclick="stopSpeaking()">Stop</button>
+                    <p id="sttUnsupported" class="error-text hidden">Speech recognition is not supported in this browser. Please use Chrome or Edge.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Settings Modal -->
+    <div id="settingsModal" class="modal hidden" onclick="closeSettingsOnBackdrop(event)">
+        <div class="modal-card">
+            <h3>Settings</h3>
+            <label class="setting-label" for="apiKeyInput">Anthropic API Key</label>
+            <input type="password" id="apiKeyInput" class="setting-input" placeholder="sk-ant-…" autocomplete="off">
+            <label class="setting-label" for="modelSelect">Model</label>
+            <select id="modelSelect" class="setting-input">
+                <option value="claude-haiku-4-5-20251001">Claude Haiku 4.5 — Fast</option>
+                <option value="claude-sonnet-4-6">Claude Sonnet 4.6 — Smart</option>
+            </select>
+            <label class="setting-label" for="systemPromptInput">System Prompt <span class="optional">(optional)</span></label>
+            <textarea id="systemPromptInput" class="setting-textarea" rows="4"></textarea>
+            <div class="modal-buttons">
+                <button class="btn btn-primary"   onclick="saveSettings()">Save</button>
+                <button class="btn btn-secondary" onclick="closeSettings()">Cancel</button>
+            </div>
+        </div>
+    </div>
+    <script type="module">
+        import { ReachyMini } from "https://cdn.jsdelivr.net/gh/pollen-robotics/reachy_mini@v1.7.1/js/reachy-mini.js";
+        const robot = new ReachyMini({ appName: "talk_with_claude" });
+        const DEFAULT_SYSTEM_PROMPT =
+            "You are Reachy Mini, a friendly and curious robot assistant by Pollen Robotics, powered by Claude AI. " +
+            "Keep responses concise (2–3 sentences), warm, and expressive. You love exploring ideas and engaging with humans.";
+        // ── Runtime state ─────────────────────────────────────────────
+        let selectedRobotId      = null;
+        let detachVideo          = null;
+        let latencyIntervalId    = null;
+        let animIntervalId       = null;
+        let idleBreathTimeoutId  = null;
+        let recognition          = null;
+        let convState            = 'idle'; // idle | listening | thinking | speaking
+        const conversationHistory = [];
+        // ── Globals for onclick ───────────────────────────────────────
+        window.loginToHuggingFace      = () => robot.login();
+        window.logout                  = logout;
+        window.connectSignaling        = connectSignaling;
+        window.startStream             = startStream;
+        window.stopStream              = stopStream;
+        window.toggleMute              = toggleMute;
+        window.startListening          = startListening;
+        window.stopSpeaking            = stopSpeaking;
+        window.openSettings            = openSettings;
+        window.closeSettings           = closeSettings;
+        window.closeSettingsOnBackdrop = closeSettingsOnBackdrop;
+        window.saveSettings            = saveSettings;
+        // ── Init ──────────────────────────────────────────────────────
+        document.addEventListener('DOMContentLoaded', async () => {
+            document.getElementById('apiKeyInput').value =
+                localStorage.getItem('claude_api_key') || '';
+            document.getElementById('systemPromptInput').value =
+                localStorage.getItem('claude_system_prompt') || DEFAULT_SYSTEM_PROMPT;
+            const savedModel = localStorage.getItem('claude_model') || 'claude-haiku-4-5-20251001';
+            document.getElementById('modelSelect').value = savedModel;
+            if (await robot.authenticate()) {
+                showMainApp();
+            } else {
+                showLogin();
+            }
+            initRobotEvents();
+            initSpeechRecognition();
+        });
+        // ── Auth ──────────────────────────────────────────────────────
+        function logout() {
+            if (detachVideo) { detachVideo(); detachVideo = null; }
+            stopAnimLoop();
+            robot.logout();
+            showLogin();
+        }
+        function showLogin() {
+            document.getElementById('loginView').classList.remove('hidden');
+            document.getElementById('mainApp').classList.add('hidden');
+        }
+        function showMainApp() {
+            document.getElementById('loginView').classList.add('hidden');
+            document.getElementById('mainApp').classList.remove('hidden');
+            document.getElementById('username').textContent = '@' + robot.username;
+        }
+        // ── Settings ──────────────────────────────────────────────────
+        function openSettings() {
+            document.getElementById('settingsModal').classList.remove('hidden');
+        }
+        function closeSettings() {
+            document.getElementById('settingsModal').classList.add('hidden');
+        }
+        function closeSettingsOnBackdrop(e) {
+            if (e.target === document.getElementById('settingsModal')) closeSettings();
+        }
+        function saveSettings() {
+            localStorage.setItem('claude_api_key',       document.getElementById('apiKeyInput').value.trim());
+            localStorage.setItem('claude_model',         document.getElementById('modelSelect').value);
+            localStorage.setItem('claude_system_prompt', document.getElementById('systemPromptInput').value.trim());
+            closeSettings();
+        }
+        // ── Robot Events ──────────────────────────────────────────────
+        function initRobotEvents() {
+            robot.addEventListener('robotsChanged', (e) => displayRobots(e.detail.robots));
+            robot.addEventListener('streaming', async () => {
+                updateStatus('connected', 'Connected');
+                enableTalk(true);
+                document.getElementById('robotSelector').classList.add('hidden');
+                startLatencyDisplay();
+                try { await robot.ensureAwake(); } catch (_) {}
+                greetingAnimation();
+            });
+            robot.addEventListener('sessionStopped', () => {
+                document.getElementById('startBtn').disabled = !selectedRobotId;
+                document.getElementById('stopBtn').disabled  = true;
+                document.getElementById('robotSelector').classList.remove('hidden');
+                enableTalk(false);
+                updateStatus('connected', 'Connected');
+                stopLatencyDisplay();
+                stopAnimLoop();
+                setConvState('idle');
+            });
+            robot.addEventListener('disconnected', () => {
+                updateStatus('', 'Disconnected');
+                document.getElementById('connectBtn').disabled = false;
+                document.getElementById('robotSelector').classList.add('hidden');
+                enableTalk(false);
+                stopAnimLoop();
+            });
+            robot.addEventListener('error', (e) => console.error(`[${e.detail.source}]`, e.detail.error));
+        }
+        // ── Connection ────────────────────────────────────────────────
+        function updateStatus(cls, text) {
+            document.getElementById('statusIndicator').className = 'status-indicator ' + cls;
+            document.getElementById('statusText').textContent = text;
+        }
+        async function connectSignaling() {
+            if (!robot.isAuthenticated) return;
+            updateStatus('connecting', 'Connecting…');
+            document.getElementById('connectBtn').disabled = true;
+            try {
+                await robot.connect();
+                updateStatus('connected', 'Connected');
+                document.getElementById('robotSelector').classList.remove('hidden');
+            } catch (e) {
+                console.error('Connection failed:', e);
+                updateStatus('', 'Disconnected');
+                document.getElementById('connectBtn').disabled = false;
+            }
+        }
+        function displayRobots(robots) {
+            const list = document.getElementById('robotList');
+            list.innerHTML = '';
+            if (!robots?.length) {
+                list.innerHTML = '<div style="color:var(--text-muted)">No robots online</div>';
+                document.getElementById('startBtn').disabled = true;
+                return;
+            }
+            for (const r of robots) {
+                const div = document.createElement('div');
+                div.className = 'robot-card' + (r.id === selectedRobotId ? ' selected' : '');
+                div.innerHTML = `<div class="name">${r.meta?.name || 'Reachy Mini'}</div><div class="id">${r.id.slice(0, 12)}…</div>`;
+                div.onclick = () => {
+                    document.querySelectorAll('.robot-card').forEach(el => el.classList.remove('selected'));
+                    div.classList.add('selected');
+                    selectedRobotId = r.id;
+                    document.getElementById('robotName').textContent = r.meta?.name || 'Reachy Mini';
+                    document.getElementById('startBtn').disabled = false;
+                };
+                list.appendChild(div);
+            }
+        }
+        async function startStream() {
+            if (!selectedRobotId) return;
+            updateStatus('connecting', 'Starting…');
+            detachVideo = robot.attachVideo(document.getElementById('remoteVideo'));
+            document.getElementById('startBtn').disabled = true;
+            document.getElementById('stopBtn').disabled  = false;
+            try {
+                await robot.startSession(selectedRobotId);
+            } catch (e) {
+                if (detachVideo) { detachVideo(); detachVideo = null; }
+                document.getElementById('startBtn').disabled = !selectedRobotId;
+                document.getElementById('stopBtn').disabled  = true;
+                const msg = e.reason === 'robot_busy'
+                    ? `Robot busy — "${e.activeApp}" is already connected`
+                    : (e.message || 'Session failed');
+                updateStatus('disconnected', msg);
+            }
+        }
+        async function stopStream() {
+            if (detachVideo) { detachVideo(); detachVideo = null; }
+            await robot.stopSession();
+        }
+        // ── Audio ─────────────────────────────────────────────────────
+        function toggleMute() {
+            robot.setAudioMuted(!robot.audioMuted);
+            const muted = robot.audioMuted;
+            document.getElementById('muteBtn').classList.toggle('muted', muted);
+            document.getElementById('speakerOffIcon').classList.toggle('hidden', !muted);
+            document.getElementById('speakerOnIcon').classList.toggle('hidden', muted);
+            document.getElementById('muteText').textContent = muted ? 'Unmute' : 'Mute';
+        }
+        function enableTalk(on) {
+            document.getElementById('talkBtn').disabled = !on;
+            document.getElementById('muteBtn').disabled = !on;
+        }
+        // ── Latency ───────────────────────────────────────────────────
+        function startLatencyDisplay() {
+            const badge = document.getElementById('latencyBadge');
+            const label = document.getElementById('latencyValue');
+            badge.classList.remove('hidden');
+            latencyIntervalId = setInterval(() => {
+                const video = document.getElementById('remoteVideo');
+                let ms = null;
+                if (video?.buffered?.length > 0) {
+                    ms = Math.round((video.buffered.end(video.buffered.length - 1) - video.currentTime) * 1000);
+                }
+                label.textContent = ms != null ? `buf ${ms}ms` : '--';
+                badge.classList.remove('good', 'ok', 'bad');
+                if (ms != null) badge.classList.add(ms < 200 ? 'good' : ms < 500 ? 'ok' : 'bad');
+            }, 1000);
+        }
+        function stopLatencyDisplay() {
+            if (latencyIntervalId) { clearInterval(latencyIntervalId); latencyIntervalId = null; }
+            document.getElementById('latencyBadge').classList.add('hidden');
+        }
+        // ── Conversation State Machine ────────────────────────────────
+        function setConvState(state) {
+            convState = state;
+            const labels = { idle: 'Idle', listening: 'Listening…', thinking: 'Thinking…', speaking: 'Speaking…' };
+            const el = document.getElementById('convStateLabel');
+            el.textContent = labels[state] || state;
+            el.className = `conv-state state-${state}`;
+            const isListening = state === 'listening';
+            const isSpeaking  = state === 'speaking';
+            document.getElementById('talkBtn').classList.toggle('hidden',      isListening || isSpeaking);
+            document.getElementById('stopSpeakBtn').classList.toggle('hidden', !isSpeaking);
+            if (state === 'idle')           setIdleMotion();
+            else if (state === 'listening') setListeningMotion();
+            else if (state === 'thinking')  setThinkingMotion();
+            else if (state === 'speaking')  setSpeakingMotion();
+        }
+        // ── Speech Recognition ────────────────────────────────────────
+        function initSpeechRecognition() {
+            const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
+            if (!SR) {
+                document.getElementById('sttUnsupported').classList.remove('hidden');
+                return;
+            }
+            recognition = new SR();
+            recognition.continuous     = false;
+            recognition.interimResults = true;
+            recognition.lang           = navigator.language || 'en-US';
+            recognition.onresult = (e) => {
+                const transcript = Array.from(e.results).map(r => r[0].transcript).join('');
+                document.getElementById('interimTranscript').textContent = transcript;
+                if (e.results[e.results.length - 1].isFinal) {
+                    document.getElementById('interimTranscript').textContent = '';
+                    if (transcript.trim()) sendToClaude(transcript.trim());
+                }
+            };
+            recognition.onerror = (e) => {
+                if (e.error === 'no-speech') { setConvState('idle'); return; }
+                console.error('STT error:', e.error);
+                addMessage('msg-system', `Mic error: ${e.error}`);
+                setConvState('idle');
+            };
+            recognition.onend = () => {
+                if (convState === 'listening') setConvState('idle');
+            };
+        }
+        function startListening() {
+            if (!recognition) return;
+            const apiKey = localStorage.getItem('claude_api_key');
+            if (!apiKey) {
+                openSettings();
+                addMessage('msg-system', 'Enter your Anthropic API key in Settings first.');
+                return;
+            }
+            speechSynthesis.cancel();
+            setConvState('listening');
+            try {
+                recognition.start();
+            } catch (_) {
+                setConvState('idle');
+            }
+        }
+        // ── Claude API (streaming) ─────────────────────────────────────
+        async function sendToClaude(userText) {
+            setConvState('thinking');
+            addMessage('msg-user', userText);
+            conversationHistory.push({ role: 'user', content: userText });
+            const apiKey      = localStorage.getItem('claude_api_key') || '';
+            const systemPrompt = localStorage.getItem('claude_system_prompt') || DEFAULT_SYSTEM_PROMPT;
+            const model        = localStorage.getItem('claude_model') || 'claude-haiku-4-5-20251001';
+            const assistantDiv = createStreamingMessage();
+            try {
+                const res = await fetch('https://api.anthropic.com/v1/messages', {
+                    method: 'POST',
+                    headers: {
+                        'x-api-key':   apiKey,
+                        'anthropic-version': '2023-06-01',
+                        'anthropic-dangerous-direct-browser-access': 'true',
+                        'content-type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        model,
+                        max_tokens: 512,
+                        stream:     true,
+                        system:     systemPrompt,
+                        messages:   conversationHistory.slice(-10),
+                    }),
+                });
+                if (!res.ok) {
+                    const err = await res.text();
+                    throw new Error(`Claude ${res.status}: ${err}`);
+                }
+                const reader  = res.body.getReader();
+                const decoder = new TextDecoder();
+                let fullReply = '';
+                let buffer    = '';
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+                    buffer += decoder.decode(value, { stream: true });
+                    const lines = buffer.split('\n');
+                    buffer = lines.pop(); // keep incomplete last line
+                    for (const line of lines) {
+                        if (!line.startsWith('data: ')) continue;
+                        const data = line.slice(6).trim();
+                        if (!data || data === '[DONE]') continue;
+                        try {
+                            const ev = JSON.parse(data);
+                            if (ev.type === 'content_block_delta' && ev.delta?.type === 'text_delta') {
+                                fullReply += ev.delta.text;
+                                updateStreamingMessage(assistantDiv, fullReply);
+                            }
+                        } catch (_) {}
+                    }
+                }
+                assistantDiv.classList.remove('streaming');
+                conversationHistory.push({ role: 'assistant', content: fullReply });
+                speakReply(fullReply);
+            } catch (e) {
+                console.error('Claude error:', e);
+                assistantDiv.remove();
+                addMessage('msg-system', `Error: ${e.message}`);
+                setConvState('idle');
+            }
+        }
+        // ── TTS ───────────────────────────────────────────────────────
+        function speakReply(text) {
+            setConvState('speaking');
+            const utt   = new SpeechSynthesisUtterance(text);
+            utt.lang    = navigator.language || 'en-US';
+            utt.rate    = 1.05;
+            utt.onend   = () => setConvState('idle');
+            utt.onerror = () => setConvState('idle');
+            speechSynthesis.speak(utt);
+        }
+        function stopSpeaking() {
+            speechSynthesis.cancel();
+            setConvState('idle');
+        }
+        // ── Chat UI ───────────────────────────────────────────────────
+        function addMessage(cls, text) {
+            const history = document.getElementById('conversationHistory');
+            const placeholder = history.querySelector('.msg-system');
+            if (placeholder && conversationHistory.length <= 1) placeholder.remove();
+            const div = document.createElement('div');
+            div.className = `message ${cls}`;
+            div.textContent = text;
+            history.appendChild(div);
+            history.scrollTop = history.scrollHeight;
+            return div;
+        }
+        function createStreamingMessage() {
+            const history = document.getElementById('conversationHistory');
+            const placeholder = history.querySelector('.msg-system');
+            if (placeholder && conversationHistory.length <= 1) placeholder.remove();
+            const div = document.createElement('div');
+            div.className = 'message msg-assistant streaming';
+            div.textContent = '';
+            history.appendChild(div);
+            history.scrollTop = history.scrollHeight;
+            return div;
+        }
+        function updateStreamingMessage(div, text) {
+            div.textContent = text;
+            const history = document.getElementById('conversationHistory');
+            history.scrollTop = history.scrollHeight;
+        }
+        // ── Robot Motion ──────────────────────────────────────────────
+        function stopAnimLoop() {
+            if (animIntervalId) { clearInterval(animIntervalId); animIntervalId = null; }
+            if (idleBreathTimeoutId) { clearTimeout(idleBreathTimeoutId); idleBreathTimeoutId = null; }
+        }
+        function isRobotStreaming() { return robot.state === 'streaming'; }
+        function delay(ms) { return new Promise(r => setTimeout(r, ms)); }
+        // Greeting nod played once when a session starts
+        async function greetingAnimation() {
+            if (!isRobotStreaming()) return;
+            robot.setHeadRpyDeg(0, -18, 0);
+            robot.setAntennasDeg(100, 100);
+            await delay(500);
+            if (!isRobotStreaming()) return;
+            robot.setHeadRpyDeg(0, 12, 0);
+            robot.setAntennasDeg(10, 10);
+            await delay(350);
+            if (!isRobotStreaming()) return;
+            robot.setHeadRpyDeg(0, -5, 0);
+            robot.setAntennasDeg(55, 55);
+            await delay(300);
+            if (!isRobotStreaming()) return;
+            setIdleMotion();
+        }
+        // Idle: neutral pose, then gentle breathing sway
+        function setIdleMotion() {
+            stopAnimLoop();
+            if (!isRobotStreaming()) return;
+            robot.setHeadRpyDeg(0, 0, 0);
+            robot.setAntennasDeg(15, 15);
+            let t = 0;
+            idleBreathTimeoutId = setTimeout(() => {
+                idleBreathTimeoutId = null;
+                if (convState !== 'idle') return;
+                animIntervalId = setInterval(() => {
+                    if (convState !== 'idle' || !isRobotStreaming()) { stopAnimLoop(); return; }
+                    t += 0.025;
+                    robot.setHeadRpyDeg(0, 1.5 * Math.sin(t), 0);
+                }, 100);
+            }, 1200);
+        }
+        // Listening: attentive forward lean, antennas up
+        function setListeningMotion() {
+            stopAnimLoop();
+            if (!isRobotStreaming()) return;
+            robot.setHeadRpyDeg(8, 10, 0);
+            robot.setAntennasDeg(120, 120);
+        }
+        // Thinking: head scans side to side, antennas wiggle asymmetrically
+        function setThinkingMotion() {
+            stopAnimLoop();
+            if (!isRobotStreaming()) return;
+            let t = 0;
+            animIntervalId = setInterval(() => {
+                if (!isRobotStreaming()) { stopAnimLoop(); return; }
+                t += 0.07;
+                const yaw   = 18 * Math.sin(t * 0.5);
+                const pitch =  5 * Math.sin(t * 0.3);
+                robot.setHeadRpyDeg(0, pitch, yaw);
+                robot.setAntennasDeg(
+                    55 * Math.sin(t),
+                    -55 * Math.sin(t + 1.0),
+                );
+            }, 100);
+        }
+        // Speaking: nodding head, swaying body, antennas bouncing expressively
+        function setSpeakingMotion() {
+            stopAnimLoop();
+            if (!isRobotStreaming()) return;
+            let t = 0;
+            animIntervalId = setInterval(() => {
+                if (!isRobotStreaming()) { stopAnimLoop(); return; }
+                t += 0.1;
+                const pitch = -7 * Math.abs(Math.sin(t * 1.3)) - 1;
+                const roll  =  3 * Math.sin(t * 0.6);
+                const yaw   =  6 * Math.sin(t * 0.35);
+                robot.setHeadRpyDeg(roll, pitch, yaw);
+                try { robot.setBodyYawDeg(-4 * Math.sin(t * 0.35)); } catch (_) {}
+                const wave = 28 * Math.sin(t * 1.6);
+                robot.setAntennasDeg(42 + wave, 42 - wave * 0.6);
+            }, 100);
+        }
+    </script>
+</body>
 </html>

style.css CHANGED Viewed

@@ -1,28 +1,534 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+:root {
+    --claude-primary:      #7C3AED;
+    --claude-light:        #9D5BFF;
+    --claude-dark:         #6025C4;
+    --pollen-dark:         #0F0E17;
+    --pollen-darker:       #09080F;
+    --pollen-card:         #1A1630;
+    --pollen-card-light:   #221E40;
+    --text-primary:        #FFFFFF;
+    --text-secondary:      #A0AEC0;
+    --text-muted:          #718096;
+    --success:             #48BB78;
+    --warning:             #ECC94B;
+    --danger:              #F56565;
+    --listening:           #63B3ED;
+    --thinking:            #B794F4;
+    --speaking:            #68D391;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
 body {
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    background: var(--pollen-darker);
+    color: var(--text-primary);
+    min-height: 100vh;
+    min-height: 100dvh;
+    overflow-x: hidden;
+}
+/* ── Header ─────────────────────────────────────────────────── */
+.header {
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(10px);
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid rgba(124, 58, 237, 0.3);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.logo img {
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+}
+.logo-text {
+    font-weight: 700;
+    font-size: 1em;
+    color: var(--claude-light);
+}
+.logo-text span {
+    color: var(--text-secondary);
+    font-weight: 400;
+    font-size: 0.85em;
+}
+.user-section {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.user-badge {
+    background: var(--pollen-card);
+    padding: 4px 12px;
+    border-radius: 16px;
+    font-size: 0.8em;
+}
+.btn-logout {
+    background: transparent;
+    border: 1px solid var(--text-muted);
+    color: var(--text-secondary);
+    padding: 4px 12px;
+    border-radius: 12px;
+    cursor: pointer;
+    font-size: 0.75em;
+}
+.btn-icon {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    transition: color 0.2s;
+    min-width: 44px;
+    min-height: 44px;
+}
+.btn-icon:hover { color: var(--claude-light); }
+.btn-icon svg {
+    width: 20px;
+    height: 20px;
+}
+/* ── Main Layout ─────────────────────────────────────────────── */
+.app-container {
+    display: flex;
+    flex-direction: column;
+    padding: 8px;
+    gap: 8px;
+    max-width: 900px;
+    margin: 0 auto;
+}
+/* ── Video ───────────────────────────────────────────────────── */
+.video-container {
+    position: relative;
+    background: #000;
+    border-radius: 12px;
+    overflow: hidden;
+    aspect-ratio: 16 / 9;
+    width: 100%;
+}
+video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    background: linear-gradient(135deg, #09080F 0%, #1A1630 100%);
+}
+.video-overlay-top {
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    padding: 12px;
+    background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+.connection-badge {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(0,0,0,0.5);
+    padding: 6px 12px;
+    border-radius: 16px;
+    font-size: 0.8em;
+}
+.latency-badge {
+    background: rgba(0,0,0,0.5);
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: 0.75em;
+    font-variant-numeric: tabular-nums;
+    color: var(--text-secondary);
+}
+.latency-badge.good { color: var(--success); }
+.latency-badge.ok   { color: var(--warning); }
+.latency-badge.bad  { color: var(--danger);  }
+.status-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--danger);
+}
+.status-indicator.connected  { background: var(--success); box-shadow: 0 0 8px var(--success); }
+.status-indicator.connecting { background: var(--warning); animation: blink 0.8s infinite; }
+@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+.robot-name {
+    background: rgba(0,0,0,0.5);
+    padding: 6px 12px;
+    border-radius: 16px;
+    font-size: 0.8em;
+    font-weight: 500;
+}
+.video-overlay-bottom {
+    position: absolute;
+    bottom: 0; left: 0; right: 0;
+    padding: 12px;
+    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
+}
+.video-controls {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+/* ── Buttons ─────────────────────────────────────────────────── */
+.btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 0.85em;
+    cursor: pointer;
+    transition: all 0.2s;
+    min-height: 44px;
+}
+.btn-primary   { background: var(--claude-primary); color: white; }
+.btn-secondary { background: rgba(255,255,255,0.15); color: white; }
+.btn-danger    { background: var(--danger); color: white; }
+.btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.btn-mute {
+    background: rgba(255,255,255,0.15);
+    color: white;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.btn-mute.muted { background: var(--danger); }
+.btn-mute svg   { width: 16px; height: 16px; }
+/* ── Panels ──────────────────────────────────────────────────── */
+.panel {
+    background: var(--pollen-card);
+    border-radius: 12px;
+    overflow: hidden;
+}
+.panel-header {
+    padding: 10px 14px;
+    background: rgba(0,0,0,0.2);
+    font-weight: 600;
+    font-size: 0.85em;
+    color: var(--claude-light);
+}
+.panel-content { padding: 12px; }
+/* ── Robot Selector ──────────────────────────────────────────── */
+.robot-list { display: flex; flex-direction: column; gap: 8px; }
+.robot-card {
+    padding: 10px 14px;
+    background: var(--pollen-darker);
+    border: 2px solid transparent;
+    border-radius: 8px;
+    cursor: pointer;
+}
+.robot-card:hover    { background: var(--pollen-card-light); }
+.robot-card.selected { border-color: var(--claude-primary); }
+.robot-card .name    { font-weight: 600; font-size: 0.9em; }
+.robot-card .id      { font-size: 0.75em; color: var(--text-muted); font-family: monospace; }
+/* ── Conversation History ────────────────────────────────────── */
+.conversation-history {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-height: 240px;
+    overflow-y: auto;
+    padding-bottom: 4px;
+}
+.message {
+    padding: 8px 12px;
+    border-radius: 10px;
+    font-size: 0.88em;
+    line-height: 1.4;
+    max-width: 90%;
+    word-break: break-word;
+}
+.msg-user {
+    background: var(--claude-dark);
+    color: white;
+    align-self: flex-end;
+    border-bottom-right-radius: 3px;
+}
+.msg-assistant {
+    background: var(--pollen-card-light);
+    color: var(--text-primary);
+    align-self: flex-start;
+    border-bottom-left-radius: 3px;
+}
+.msg-assistant.streaming::after {
+    content: '▌';
+    animation: blink-cursor 0.6s step-end infinite;
+    color: var(--claude-light);
+    margin-left: 1px;
+}
+@keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+.msg-system {
+    color: var(--text-muted);
+    font-size: 0.82em;
+    text-align: center;
+    align-self: center;
+    font-style: italic;
+}
+.interim-transcript {
+    color: var(--text-muted);
+    font-size: 0.85em;
+    font-style: italic;
+    min-height: 1.2em;
+    margin-top: 6px;
+    padding: 0 2px;
+}
+/* ── Talk Panel ──────────────────────────────────────────────── */
+.talk-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 20px 12px;
+}
+.conv-state {
+    font-size: 0.9em;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    transition: color 0.3s;
+}
+.state-idle      { color: var(--text-muted); }
+.state-listening { color: var(--listening); }
+.state-thinking  { color: var(--thinking);  }
+.state-speaking  { color: var(--speaking);  }
+.talk-btn {
+    width: 88px;
+    height: 88px;
+    border-radius: 50%;
+    border: 3px solid var(--claude-primary);
+    background: transparent;
+    color: var(--claude-light);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    font-size: 0.8em;
+    font-weight: 600;
+    transition: all 0.2s;
+}
+.talk-btn:hover:not(:disabled) {
+    background: rgba(124, 58, 237, 0.15);
+    transform: scale(1.05);
+}
+.talk-btn:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+    border-color: var(--text-muted);
+    color: var(--text-muted);
 }
+.talk-btn svg {
+    width: 32px;
+    height: 32px;
 }
+.error-text {
+    color: var(--danger);
+    font-size: 0.82em;
+    text-align: center;
 }
+/* ── Modal ───────────────────────────────────────────────────── */
+.modal {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    z-index: 100;
 }
+.modal-card {
+    background: var(--pollen-card);
+    border-radius: 16px;
+    padding: 24px;
+    width: 100%;
+    max-width: 420px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
+.modal-card h3 {
+    color: var(--claude-light);
+    font-size: 1.1em;
+    margin-bottom: 4px;
+}
+.setting-label {
+    font-size: 0.85em;
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+.optional {
+    font-weight: 400;
+    color: var(--text-muted);
+    font-size: 0.9em;
+}
+.setting-input,
+.setting-textarea,
+.setting-select {
+    width: 100%;
+    padding: 10px 12px;
+    background: var(--pollen-darker);
+    border: 1px solid var(--pollen-card-light);
+    border-radius: 8px;
+    color: var(--text-primary);
+    font-size: 0.85em;
+    font-family: inherit;
+    resize: vertical;
+}
+.setting-input:focus,
+.setting-textarea:focus,
+.setting-select:focus {
+    outline: none;
+    border-color: var(--claude-primary);
+}
+.modal-buttons {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    margin-top: 4px;
+}
+/* ── Login View ──────────────────────────────────────────────── */
+.login-view {
+    min-height: 100vh;
+    min-height: 100dvh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+}
+.login-card {
+    background: var(--pollen-card);
+    padding: 40px;
+    border-radius: 16px;
+    text-align: center;
+    max-width: 380px;
+    border: 1px solid rgba(124, 58, 237, 0.2);
+}
+.login-logo {
+    width: 72px;
+    height: 72px;
+    margin-bottom: 20px;
+    border-radius: 12px;
+}
+.login-card h2 {
+    color: var(--claude-light);
+    margin-bottom: 10px;
+    font-size: 1.5em;
+}
+.login-card p {
+    color: var(--text-secondary);
+    margin-bottom: 24px;
+    font-size: 0.9em;
+    line-height: 1.5;
+}
+.btn-hf {
+    background: #FFD21E;
+    color: #000;
+    border: none;
+    padding: 12px 28px;
+    border-radius: 8px;
+    font-size: 0.95em;
+    font-weight: 700;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 44px;
+}
+/* ── Desktop Layout ──────────────────────────────────────────── */
+@media (min-width: 768px) {
+    .app-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-areas:
+            "video       conversation"
+            "robots      talk";
+        align-items: start;
+        gap: 12px;
+    }
+    .video-container        { grid-area: video; }
+    #robotSelector          { grid-area: robots; }
+    #conversationPanel      { grid-area: conversation; }
+    #talkPanel              { grid-area: talk; }
+    .conversation-history   { max-height: 320px; }
+}
+.hidden { display: none !important; }