Spaces:
Running
Running
| <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 Perplexity — 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 Perplexity</h2> | |
| <p>Sign in with your HuggingFace account to connect your Reachy Mini and start a conversation powered by Perplexity 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 Perplexity <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">Perplexity API Key</label> | |
| <input type="password" id="apiKeyInput" class="setting-input" placeholder="pplx-…" autocomplete="off"> | |
| <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_perplexity" }); | |
| const DEFAULT_SYSTEM_PROMPT = | |
| "You are Reachy Mini, a friendly and curious robot assistant by Pollen Robotics. " + | |
| "Keep responses concise (2–3 sentences). You have access to current information via Perplexity search."; | |
| // ── Runtime state ───────────────────────────────────────────── | |
| let selectedRobotId = null; | |
| let detachVideo = null; | |
| let latencyIntervalId = null; | |
| let animIntervalId = 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('pplx_api_key') || ''; | |
| document.getElementById('systemPromptInput').value = | |
| localStorage.getItem('pplx_system_prompt') || DEFAULT_SYSTEM_PROMPT; | |
| 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('pplx_api_key', document.getElementById('apiKeyInput').value.trim()); | |
| localStorage.setItem('pplx_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 (_) {} | |
| setIdleMotion(); | |
| }); | |
| 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); | |
| // Robot motion | |
| 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()) sendToPerplexity(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('pplx_api_key'); | |
| if (!apiKey) { | |
| openSettings(); | |
| addMessage('msg-system', 'Enter your Perplexity API key in Settings first.'); | |
| return; | |
| } | |
| speechSynthesis.cancel(); | |
| setConvState('listening'); | |
| try { | |
| recognition.start(); | |
| } catch (_) { | |
| setConvState('idle'); | |
| } | |
| } | |
| // ── Perplexity API ──────────────────────────────────────────── | |
| async function sendToPerplexity(userText) { | |
| setConvState('thinking'); | |
| addMessage('msg-user', userText); | |
| conversationHistory.push({ role: 'user', content: userText }); | |
| const apiKey = localStorage.getItem('pplx_api_key') || ''; | |
| const systemPrompt = localStorage.getItem('pplx_system_prompt') || DEFAULT_SYSTEM_PROMPT; | |
| try { | |
| const res = await fetch('https://api.perplexity.ai/chat/completions', { | |
| method: 'POST', | |
| headers: { | |
| 'Authorization': `Bearer ${apiKey}`, | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| model: 'llama-3.1-sonar-small-128k-online', | |
| messages: [ | |
| { role: 'system', content: systemPrompt }, | |
| ...conversationHistory.slice(-10), | |
| ], | |
| }), | |
| }); | |
| if (!res.ok) { | |
| const err = await res.text(); | |
| throw new Error(`Perplexity ${res.status}: ${err}`); | |
| } | |
| const data = await res.json(); | |
| const reply = data.choices[0].message.content; | |
| conversationHistory.push({ role: 'assistant', content: reply }); | |
| addMessage('msg-assistant', reply); | |
| speakReply(reply); | |
| } catch (e) { | |
| console.error('Perplexity error:', e); | |
| 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.0; | |
| 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; | |
| } | |
| // ── Robot Motion ────────────────────────────────────────────── | |
| function stopAnimLoop() { | |
| if (animIntervalId) { clearInterval(animIntervalId); animIntervalId = null; } | |
| } | |
| function isStreaming() { return robot.state === 'streaming'; } | |
| function setIdleMotion() { | |
| stopAnimLoop(); | |
| if (!isStreaming()) return; | |
| robot.setHeadRpyDeg(0, 0, 0); | |
| robot.setAntennasDeg(0, 0); | |
| } | |
| function setListeningMotion() { | |
| stopAnimLoop(); | |
| if (!isStreaming()) return; | |
| robot.setHeadRpyDeg(8, 5, 0); | |
| robot.setAntennasDeg(110, 110); | |
| } | |
| function setThinkingMotion() { | |
| stopAnimLoop(); | |
| if (!isStreaming()) return; | |
| let t = 0; | |
| animIntervalId = setInterval(() => { | |
| if (!isStreaming()) { stopAnimLoop(); return; } | |
| t += 0.15; | |
| robot.setAntennasDeg(70 * Math.sin(t), -70 * Math.sin(t)); | |
| robot.setHeadRpyDeg(0, 8 * Math.sin(t * 0.4), 0); | |
| }, 100); | |
| } | |
| function setSpeakingMotion() { | |
| stopAnimLoop(); | |
| if (!isStreaming()) return; | |
| let t = 0; | |
| animIntervalId = setInterval(() => { | |
| if (!isStreaming()) { stopAnimLoop(); return; } | |
| t += 0.12; | |
| robot.setHeadRpyDeg(0, -6 * Math.abs(Math.sin(t)), 0); | |
| robot.setAntennasDeg(30 + 25 * Math.sin(t), 30 + 25 * Math.sin(t)); | |
| }, 100); | |
| } | |
| </script> | |
| </body> | |
| </html> | |