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>Reachy Mini - Pollen Robotics</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link rel="preconnect" href="https://cdn.jsdelivr.net" 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"> | |
| <link rel="icon" href="https://raw.githubusercontent.com/pollen-robotics/reachy-mini-desktop-app/develop/src-tauri/icons/128x128.png" /> | |
| <!-- Modern host-shell SDK entries. The standalone path loads | |
| `host/auto` (exports `mountHost`); the embed path loads | |
| `host/embed` (`connectToHost`). Same package, two entries, | |
| picked at runtime by the dispatcher at the bottom of <body>. | |
| Pinned to the exact tarball the three Pollen reference apps | |
| ship against — see APP_CREATION_GUIDE §10 (mixing SDK / host / | |
| daemon versions causes silent protocol drift). --> | |
| <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@pollen-robotics/reachy-mini-sdk@1.8.0-rc1-main.fd4354c/host/dist/entry/auto.js" crossorigin> | |
| <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/@pollen-robotics/reachy-mini-sdk@1.8.0-rc1-main.fd4354c/host/dist/entry/embed.js" crossorigin> | |
| <!-- HF Spaces helper variables. In production (sdk: static + | |
| hf_oauth: true), HF substitutes these placeholders at file- | |
| serve time and the SDK reads them off `window.huggingface.variables`. | |
| Locally the placeholders stay raw (the leading `__` gives them | |
| away) — we drop the global so `mountHost()` falls back to a | |
| devToken or a manually-passed clientId. --> | |
| <script> | |
| (function () { | |
| var clientId = "__OAUTH_CLIENT_ID__"; | |
| var scopes = "__OAUTH_SCOPES__"; | |
| var spaceHost = "__SPACE_HOST__"; | |
| var spaceId = "__SPACE_ID__"; | |
| var looksSubstituted = clientId && clientId.indexOf("__") !== 0; | |
| if (looksSubstituted) { | |
| window.huggingface = window.huggingface || {}; | |
| window.huggingface.variables = { | |
| OAUTH_CLIENT_ID: clientId, | |
| OAUTH_SCOPES: scopes && scopes.indexOf("__") !== 0 ? scopes : "openid profile", | |
| SPACE_HOST: spaceHost && spaceHost.indexOf("__") !== 0 ? spaceHost : "", | |
| SPACE_ID: spaceId && spaceId.indexOf("__") !== 0 ? spaceId : "", | |
| }; | |
| } | |
| })(); | |
| </script> | |
| <!-- `process` shim for CDN-loaded ESM. | |
| The host bundle (`host/dist/entry/auto.js`) was built expecting | |
| a downstream bundler (Vite/Rollup) to substitute `process.env.NODE_ENV` | |
| at build time. Loaded raw from jsdelivr that substitution never | |
| happens, and the chunk crashes on first reference with | |
| `ReferenceError: process is not defined`. A tiny shim assigned | |
| BEFORE the module imports run resolves it. The double-`??=` keeps | |
| us a polite citizen in case any later loader brings a real `process`. | |
| (We DON'T need this when using a bundler — see the `dashboard/` | |
| sibling app, where Vite handles the substitution.) --> | |
| <script> | |
| globalThis.process ??= { env: {} }; | |
| globalThis.process.env ??= {}; | |
| globalThis.process.env.NODE_ENV ??= 'production'; | |
| </script> | |
| <!-- Pre-paint visibility gate. Both paths start with #mainApp hidden: | |
| - Standalone: mountHost() owns the page; #mainApp stays hidden. | |
| - Embed: #mainApp is revealed by the embed handler once | |
| connectToHost() resolves. While the handshake is in flight | |
| we seed a "Connecting…" status pill so the eventual paint | |
| reads as "almost there" rather than "broken". --> | |
| <script> | |
| (function () { | |
| try { | |
| document.addEventListener('DOMContentLoaded', function () { | |
| var main = document.getElementById('mainApp'); | |
| if (main) main.classList.add('hidden'); | |
| var params = new URLSearchParams(window.location.search); | |
| if (params.get('embedded') === '1' || params.get('embed') === '1') { | |
| var statusText = document.getElementById('statusText'); | |
| var statusIndicator = document.getElementById('statusIndicator'); | |
| if (statusIndicator) statusIndicator.className = 'status-indicator connecting'; | |
| if (statusText) statusText.textContent = 'Connecting…'; | |
| } | |
| }); | |
| } catch (e) { /* best-effort polish */ } | |
| })(); | |
| </script> | |
| </head> | |
| <body> | |
| <!-- | |
| Host shell mount point. On a standalone visit, `mountHost()` from | |
| the SDK's `host/auto` entry renders the full host UI (sign-in, | |
| robot picker, top bar, leave button) into this div, owns OAuth | |
| + connection lifecycle, and iframes back into THIS page with | |
| `?embedded=1` once a robot is awake. We no longer hand-roll the | |
| sign-in screen, picker, or Stop button — the host owns them. | |
| --> | |
| <div id="root"></div> | |
| <!-- Main App — the post-connect surface. Hidden until either the | |
| host shell shows us (standalone path, in-iframe) or the embed | |
| dispatcher resolves connectToHost() (embed path). Everything | |
| below this point is unchanged feature-wise vs the original | |
| single-file demo. --> | |
| <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">Reachy Mini <span>by Pollen Robotics</span></div> | |
| </div> | |
| <div class="user-section"> | |
| <!-- Daemon version is filled in once the WebRTC data channel | |
| is open (via reachy.getVersion()). Hidden until then so | |
| we don't show a stale/empty badge during connect. The | |
| host shell's top bar shows the signed-in user + sign-out | |
| menu, so we no longer duplicate them here. --> | |
| <div id="daemonVersion" class="user-badge hidden" title="Daemon version"></div> | |
| </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"> | |
| <!-- | |
| Connect / Stop are gone — the host shell's top | |
| bar owns "leave session", and the iframe boots | |
| already-connected via connectToHost(). Only the | |
| per-direction audio toggles remain on the video, | |
| since they're local-mute settings, not session | |
| lifecycle. | |
| --> | |
| <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> | |
| <button class="btn btn-mute muted" id="micBtn" onclick="toggleMic()" disabled> | |
| <svg id="micOffIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <line x1="1" y1="1" x2="23" y2="23"></line> | |
| <path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"></path> | |
| <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2c0 .76-.13 1.49-.35 2.17"></path> | |
| <line x1="12" y1="19" x2="12" y2="23"></line> | |
| <line x1="8" y1="23" x2="16" y2="23"></line> | |
| </svg> | |
| <svg id="micOnIcon" class="hidden" 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 id="micText">Mic Off</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Robot Selector removed — the host shell owns robot | |
| picking. By the time the embed handler runs, the | |
| session is already up against the chosen robot. --> | |
| <!-- Head Control - RPY Sliders --> | |
| <div class="panel"> | |
| <div class="panel-header">Head Orientation</div> | |
| <div class="panel-content"> | |
| <div class="slider-row"> | |
| <span class="slider-label">Roll</span> | |
| <input type="range" class="slider" id="rollSlider" min="-20" max="20" value="0" step="0.5"> | |
| <span class="slider-value" id="rollValue">0.0°</span> | |
| </div> | |
| <div class="slider-row"> | |
| <span class="slider-label">Pitch</span> | |
| <input type="range" class="slider" id="pitchSlider" min="-30" max="30" value="0" step="0.5"> | |
| <span class="slider-value" id="pitchValue">0.0°</span> | |
| </div> | |
| <div class="slider-row"> | |
| <span class="slider-label">Yaw</span> | |
| <input type="range" class="slider" id="yawSlider" min="-160" max="160" value="0" step="0.5"> | |
| <span class="slider-value" id="yawValue">0.0°</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Body / Base Yaw --> | |
| <div class="panel"> | |
| <div class="panel-header">Body</div> | |
| <div class="panel-content"> | |
| <div class="slider-row"> | |
| <span class="slider-label">Yaw</span> | |
| <input type="range" class="slider" id="bodyYawSlider" min="-160" max="160" value="0" step="1"> | |
| <span class="slider-value" id="bodyYawValue">0°</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Antennas --> | |
| <div class="panel"> | |
| <div class="panel-header">Antennas</div> | |
| <div class="panel-content"> | |
| <div class="slider-row"> | |
| <span class="slider-label">Right</span> | |
| <input type="range" class="slider" id="rightAntSlider" min="-175" max="175" value="0"> | |
| <span class="slider-value" id="rightAntValue">0°</span> | |
| </div> | |
| <div class="slider-row"> | |
| <span class="slider-label">Left</span> | |
| <input type="range" class="slider" id="leftAntSlider" min="-175" max="175" value="0"> | |
| <span class="slider-value" id="leftAntValue">0°</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Animations --> | |
| <div class="panel"> | |
| <div class="panel-header">Animations</div> | |
| <div class="panel-content"> | |
| <div class="sound-row"> | |
| <button class="btn btn-primary" id="btnWakeUp" onclick="playWakeUp()" disabled>Wake up</button> | |
| <button class="btn btn-secondary" id="btnGotoSleep" onclick="playGotoSleep()" disabled>Go to sleep</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Torque --> | |
| <div class="panel"> | |
| <div class="panel-header">Torque</div> | |
| <div class="panel-content"> | |
| <div class="sound-row"> | |
| <!-- Label and action flip based on the current motor | |
| mode, which is surfaced via the 'state' event. --> | |
| <button class="btn btn-primary" id="btnTorqueToggle" onclick="toggleTorque()" disabled>Torque …</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sound --> | |
| <div class="panel"> | |
| <div class="panel-header">Sound</div> | |
| <div class="panel-content"> | |
| <div class="sound-row"> | |
| <input type="text" class="sound-input" id="soundInput" placeholder="Sound file..."> | |
| <button class="btn btn-primary" id="btnPlaySound" onclick="playSound()" disabled>Play</button> | |
| </div> | |
| <div class="sound-presets"> | |
| <span class="preset-chip" onclick="playSoundPreset('wake_up.wav')">wake_up</span> | |
| <span class="preset-chip" onclick="playSoundPreset('go_sleep.wav')">go_sleep</span> | |
| <span class="preset-chip" onclick="playSoundPreset('yes.wav')">yes</span> | |
| <span class="preset-chip" onclick="playSoundPreset('no.wav')">no</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Volume --> | |
| <div class="panel"> | |
| <div class="panel-header">Volume</div> | |
| <div class="panel-content"> | |
| <div class="slider-row"> | |
| <span class="slider-label">Speaker</span> | |
| <input type="range" class="slider" id="volumeSlider" min="0" max="100" value="50" disabled> | |
| <span class="slider-value" id="volumeValue">--</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Daemon logs --> | |
| <div class="panel"> | |
| <div class="panel-header"> | |
| Daemon logs | |
| <button class="btn btn-secondary" id="btnClearLogs" onclick="clearLogs()" style="margin-left:auto;font-size:0.8em;padding:4px 8px;">Clear</button> | |
| </div> | |
| <div class="panel-content"> | |
| <pre id="logsView" style="max-height:240px;overflow:auto;background:#0b0b0b;color:#c8c8c8;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;padding:8px;margin:0;white-space:pre-wrap;word-break:break-word;border-radius:6px;">Waiting for stream...</pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="module"> | |
| // ===== SDK imports (modern host-shell pattern) ===== | |
| // | |
| // Three entry points from the same npm pin | |
| // (@pollen-robotics/reachy-mini-sdk@1.8.0-rc1-main.fd4354c — the | |
| // exact tarball the three Pollen reference apps ship against; | |
| // see APP_CREATION_GUIDE §10 on version drift): | |
| // | |
| // - host/dist/entry/auto.js → `mountHost` (standalone path) | |
| // - host/dist/entry/embed.js → `connectToHost` (embed path) | |
| // - root (/+esm bundled by jsdelivr) math helpers | |
| // | |
| // jsdelivr's `/+esm` endpoint inlines the SDK's bare npm deps | |
| // (notably `@huggingface/hub`) into a single self-contained | |
| // ESM bundle so the browser doesn't choke on the bare specifier. | |
| // The host bundles are already Vite-built and self-contained, so | |
| // they load straight from `host/dist/entry/*.js`. | |
| import { mountHost } from "https://cdn.jsdelivr.net/npm/@pollen-robotics/reachy-mini-sdk@1.8.0-rc1-main.fd4354c/host/dist/entry/auto.js"; | |
| import { connectToHost } from "https://cdn.jsdelivr.net/npm/@pollen-robotics/reachy-mini-sdk@1.8.0-rc1-main.fd4354c/host/dist/entry/embed.js"; | |
| import { matrixToRpy, radToDeg, rpyToMatrix, degToRad } from "https://cdn.jsdelivr.net/npm/@pollen-robotics/reachy-mini-sdk@1.8.0-rc1-main.fd4354c/+esm"; | |
| // Live SDK instance for the running session. Set on the embed | |
| // path by `connectToHost().reachy`. All callbacks below read | |
| // `robot` at call time, so the late assignment is invisible to | |
| // them. | |
| let robot = null; | |
| // ===== Module-scope state (unchanged from the legacy demo) ===== | |
| let headSlidersActive = false; | |
| let bodyYawSliderActive = false; | |
| // Last body yaw the user *committed* via the slider, in degrees. | |
| // The baseline for the tank-coupled head counter-rotation must | |
| // be the last COMMANDED value (this variable), never telemetry — | |
| // telemetry lags one WebRTC RTT, so cumulative deltas computed | |
| // against it stall under rapid drags. | |
| let lastBodyYawDeg = 0; | |
| let detachVideo = null; | |
| let latencyIntervalId = null; | |
| // Returned by reachy.subscribeLogs(); call to stop the daemon-side | |
| // journalctl stream. Reset on every leave. | |
| let logsUnsub = null; | |
| // Cap the logs panel so a long session doesn't grow without bound. | |
| const LOGS_MAX_LINES = 500; | |
| // Inline-onclick handlers. Sign-in / sign-out / connect / stop | |
| // are gone — the host shell owns them now. | |
| window.playSound = playSound; | |
| window.playSoundPreset = playSoundPreset; | |
| window.playWakeUp = playWakeUp; | |
| window.playGotoSleep = playGotoSleep; | |
| window.toggleTorque = toggleTorque; | |
| window.toggleMute = toggleMute; | |
| window.toggleMic = toggleMic; | |
| window.clearLogs = clearLogs; | |
| // ===== Dispatcher ===== | |
| // | |
| // Standalone visit (no `?embedded=1`): mountHost() renders the | |
| // full host shell into #root. The shell handles HF OAuth + robot | |
| // picker + the leave button, and once a robot is awake it iframes | |
| // THIS page at `?embedded=1`. No further JS in this module runs | |
| // in the outer document. | |
| // | |
| // Embed visit: connectToHost() decodes the hash creds, brings | |
| // the WebRTC session up, wakes the robot, and resolves with a | |
| // typed handle. We replay its video+audio into our <video>, then | |
| // wire the legacy slider / sound / log / latency UI exactly as | |
| // before. | |
| document.addEventListener('DOMContentLoaded', async () => { | |
| const params = new URLSearchParams(window.location.search); | |
| const isEmbed = params.get('embedded') === '1' || params.get('embed') === '1'; | |
| if (!isEmbed) { | |
| mountHost({ | |
| appName: 'Reachy Mini WebRTC Demo', | |
| appIconUrl: 'https://raw.githubusercontent.com/pollen-robotics/reachy-mini-desktop-app/develop/src-tauri/icons/128x128.png', | |
| appEmoji: '🤖', | |
| // We use the robot's mic in the audio toggles; the host | |
| // needs to know so it negotiates an inbound audio track. | |
| enableMicrophone: true, | |
| }); | |
| return; | |
| } | |
| try { | |
| const handle = await connectToHost(); | |
| robot = handle.reachy; | |
| // The host bridge captured the inbound video+audio tracks | |
| // during boot; replay them into our <video>. attachVideo | |
| // returns a cleanup we hold for the onLeave teardown. | |
| detachVideo = handle.media.attachVideo(document.getElementById('remoteVideo')); | |
| // Wire all the post-connect UI. Order matters: bind the | |
| // event listeners FIRST so we don't miss the `state` / | |
| // `micSupported` ticks that fire right after the session | |
| // is already up. | |
| initRobotEvents(); | |
| initSliders(); | |
| showMainApp(); | |
| updateStatus('connected', 'Connected'); | |
| enableControls(true); | |
| startLatencyDisplay(); | |
| fetchDaemonVersionOnce(); | |
| syncVolumeSlider(); | |
| startLogsStream(); | |
| // Host-requested leave (user clicks the top-bar leave | |
| // button, or page lifecycle tears down). Best-effort | |
| // cleanup — the iframe is about to be unmounted anyway. | |
| handle.onLeave(() => { | |
| try { if (detachVideo) detachVideo(); } catch (_) {} | |
| detachVideo = null; | |
| stopLatencyDisplay(); | |
| stopLogsStream(); | |
| }); | |
| } catch (err) { | |
| console.error('[embed] connectToHost failed:', err); | |
| updateStatus('', 'Embed connect failed: ' + (err?.message || err)); | |
| } | |
| }); | |
| function showMainApp() { | |
| document.getElementById('mainApp').classList.remove('hidden'); | |
| } | |
| // ===================== Robot Events ===================== | |
| // | |
| // We only bind the events that drive *in-iframe* UI (state echo, | |
| // mic-support gate, telemetry-driven slider sync, server-initiated | |
| // session-stop messages). Sign-in / picker / connect-button state | |
| // events are gone — the host shell handles them outside the iframe. | |
| function initRobotEvents() { | |
| robot.addEventListener('sessionStopped', (e) => { | |
| enableControls(false); | |
| // e.detail.message is set when the stop was server-initiated | |
| // (e.g. a local Python app took over the robot). Surfaced in | |
| // the in-iframe status pill so the user has a reason for the | |
| // sudden silence. | |
| updateStatus('connected', e.detail?.message || 'Session ended'); | |
| updateMicButton(); | |
| stopLatencyDisplay(); | |
| // Disable the volume slider and clear the version pill — | |
| // they only make sense while the data channel is open. | |
| document.getElementById('volumeSlider').disabled = true; | |
| document.getElementById('volumeValue').textContent = '--'; | |
| document.getElementById('daemonVersion').classList.add('hidden'); | |
| // Reset the torque button label so it doesn't claim a stale | |
| // state between sessions. | |
| const tb = document.getElementById('btnTorqueToggle'); | |
| tb.textContent = 'Torque …'; | |
| delete tb.dataset.currentMode; | |
| stopLogsStream(); | |
| }); | |
| robot.addEventListener('state', (e) => updateStateDisplay(e.detail)); | |
| robot.addEventListener('micSupported', () => { | |
| enableControls(robot.state === 'streaming'); | |
| }); | |
| robot.addEventListener('error', (e) => { | |
| console.error(`[${e.detail.source}]`, e.detail.error); | |
| if (e.detail.source === 'webrtc') { | |
| updateStatus('', 'Connection lost'); | |
| } | |
| }); | |
| } | |
| // ===================== Connection ===================== | |
| function updateStatus(status, text) { | |
| document.getElementById('statusIndicator').className = 'status-indicator ' + status; | |
| document.getElementById('statusText').textContent = text; | |
| } | |
| // Wake-on-stream is handled inside autoConnect() now (it calls | |
| // robot.ensureAwake() after startSession resolves), so no | |
| // ensureAwakeOnce() wrapper lives here any more. | |
| // ---- Daemon version (fetched once per session over WebRTC) ---- | |
| async function fetchDaemonVersionOnce() { | |
| try { | |
| const v = await robot.getVersion(); | |
| if (!v) return; | |
| const el = document.getElementById('daemonVersion'); | |
| el.textContent = `Daemon v${v}`; | |
| el.classList.remove('hidden'); | |
| } catch (e) { | |
| // Data channel closed mid-request, or lib version too old | |
| // to support get_version. Non-fatal — but log at WARN so | |
| // a stale CDN-cached lib (missing the method) is visible | |
| // in the browser console without "Verbose" level turned on. | |
| console.warn('getVersion failed:', e); | |
| } | |
| } | |
| // ---- Volume slider wiring ---- | |
| // | |
| // Two events matter: | |
| // - 'input' fires continuously while dragging — used for the | |
| // live "75%" label so the UI feels responsive. | |
| // - 'change' fires on release — the only moment we actually | |
| // call setVolume over WebRTC. Avoids spamming the | |
| // robot with one command per pixel of drag. | |
| // | |
| // syncVolumeSlider() runs on streaming-start to pull the robot's | |
| // real current volume so the slider reflects reality rather than | |
| // the default "50" in the markup. | |
| async function syncVolumeSlider() { | |
| const slider = document.getElementById('volumeSlider'); | |
| const label = document.getElementById('volumeValue'); | |
| // Early detection: if the loaded JS lib predates the volume | |
| // commands (stale jsdelivr cache, old branch), fail loudly | |
| // rather than silently rendering "n/a". | |
| if (typeof robot.getVolume !== 'function') { | |
| console.warn( | |
| 'robot.getVolume is not a function — the reachy-mini.js ' + | |
| 'lib loaded from CDN is older than the webrtc_example UI. ' + | |
| 'Purge jsdelivr and hard-refresh the page.' | |
| ); | |
| label.textContent = 'lib'; | |
| return; | |
| } | |
| try { | |
| const v = await robot.getVolume(); | |
| if (v == null) { | |
| // Volume control unavailable (unsupported platform or | |
| // audio stack down) — keep the slider disabled. | |
| label.textContent = 'n/a'; | |
| return; | |
| } | |
| slider.value = v; | |
| label.textContent = `${v}%`; | |
| slider.disabled = false; | |
| } catch (e) { | |
| // Log at WARN so it's visible without "Verbose" level. | |
| console.warn('getVolume failed:', e); | |
| label.textContent = 'n/a'; | |
| } | |
| } | |
| // ===================== Daemon log stream ===================== | |
| // | |
| // The daemon exposes its `journalctl -u reachy-mini-daemon` lines as | |
| // typed `log_line` messages on the WebRTC data channel. We open the | |
| // subscription on streaming-start and tear it down on stop so the | |
| // daemon-side subprocess only runs while a peer is actively viewing. | |
| // The same SDK call works for the LAN-direct GStreamer signaling | |
| // path and the Central + WebRTC remote path — both share the typed | |
| // command surface. | |
| function appendLogLine({ timestamp, line }) { | |
| const view = document.getElementById('logsView'); | |
| if (!view) return; | |
| const wasInitial = view.firstChild && view.firstChild.nodeType === Node.TEXT_NODE | |
| && view.textContent === 'Waiting for stream...'; | |
| if (wasInitial) view.textContent = ''; | |
| // Auto-scroll only if the user is already pinned to the bottom; | |
| // otherwise let them browse history without snapping back. | |
| const stick = view.scrollTop + view.clientHeight >= view.scrollHeight - 4; | |
| const div = document.createElement('div'); | |
| div.textContent = timestamp ? `${timestamp} ${line}` : line; | |
| view.appendChild(div); | |
| // Trim oldest lines past the cap so the DOM doesn't grow forever. | |
| while (view.childElementCount > LOGS_MAX_LINES) { | |
| view.removeChild(view.firstChild); | |
| } | |
| if (stick) view.scrollTop = view.scrollHeight; | |
| } | |
| function startLogsStream() { | |
| if (typeof robot.subscribeLogs !== 'function') { | |
| console.warn( | |
| 'robot.subscribeLogs is not a function — the reachy-mini.js ' + | |
| 'lib loaded from CDN predates the daemon log feature. ' + | |
| 'Purge jsdelivr and hard-refresh the page.' | |
| ); | |
| document.getElementById('logsView').textContent = 'subscribeLogs not in SDK'; | |
| return; | |
| } | |
| stopLogsStream(); | |
| document.getElementById('logsView').textContent = 'Subscribing...'; | |
| try { | |
| logsUnsub = robot.subscribeLogs({ | |
| onLine: appendLogLine, | |
| onError: (err) => { | |
| appendLogLine({ timestamp: '', line: `[log_stream_error] ${err}` }); | |
| }, | |
| }); | |
| } catch (e) { | |
| console.warn('subscribeLogs failed:', e); | |
| document.getElementById('logsView').textContent = `Failed: ${e.message || e}`; | |
| } | |
| } | |
| function stopLogsStream() { | |
| if (logsUnsub) { | |
| try { logsUnsub(); } catch (e) { console.warn('logsUnsub threw:', e); } | |
| logsUnsub = null; | |
| } | |
| } | |
| function clearLogs() { | |
| const view = document.getElementById('logsView'); | |
| if (view) view.textContent = ''; | |
| } | |
| (function initVolumeSlider() { | |
| const slider = document.getElementById('volumeSlider'); | |
| const label = document.getElementById('volumeValue'); | |
| slider.addEventListener('input', () => { | |
| label.textContent = `${slider.value}%`; | |
| }); | |
| slider.addEventListener('change', async () => { | |
| const requested = parseInt(slider.value, 10); | |
| if (typeof robot.setVolume !== 'function') { | |
| console.warn( | |
| 'robot.setVolume is not a function — old JS lib on CDN; ' + | |
| 'purge jsdelivr and hard-refresh.' | |
| ); | |
| return; | |
| } | |
| try { | |
| const applied = await robot.setVolume(requested); | |
| if (applied != null) { | |
| // Server may clamp/round — reflect the truth back | |
| // into the UI so the slider isn't a lie. | |
| slider.value = applied; | |
| label.textContent = `${applied}%`; | |
| } | |
| } catch (e) { | |
| console.warn('setVolume failed:', e); | |
| } | |
| }); | |
| })(); | |
| // Connection bring-up (auth, picker, session start, wake) is | |
| // owned by the host shell now — see `mountHost()` in the | |
| // dispatcher above. The legacy `connectAndStream` / | |
| // `presentRobotPicker` / `refreshPickerOnList` helpers are gone. | |
| // ===================== Latency ===================== | |
| function startLatencyDisplay() { | |
| const badge = document.getElementById('latencyBadge'); | |
| const label = document.getElementById('latencyValue'); | |
| badge.classList.remove('hidden'); | |
| latencyIntervalId = setInterval(async () => { | |
| const video = document.getElementById('remoteVideo'); | |
| let bufLagMs = null; | |
| let rttMs = null; | |
| let vidJitterMs = null; | |
| let audJitterMs = null; | |
| // Buffer lag (how far behind live edge) | |
| if (video && video.buffered && video.buffered.length > 0) { | |
| const end = video.buffered.end(video.buffered.length - 1); | |
| bufLagMs = Math.round((end - video.currentTime) * 1000); | |
| } | |
| // WebRTC stats: RTT + jitter buffer delay (video & audio) | |
| if (robot._pc) { | |
| try { | |
| const stats = await robot._pc.getStats(); | |
| stats.forEach(report => { | |
| if (report.type === 'candidate-pair' && report.currentRoundTripTime != null) { | |
| rttMs = Math.round(report.currentRoundTripTime * 1000); | |
| } | |
| if (report.type === 'inbound-rtp' && report.jitterBufferDelay != null && report.jitterBufferEmittedCount > 0) { | |
| const jMs = Math.round((report.jitterBufferDelay / report.jitterBufferEmittedCount) * 1000); | |
| if (report.kind === 'video') vidJitterMs = jMs; | |
| if (report.kind === 'audio') audJitterMs = jMs; | |
| } | |
| }); | |
| } catch (_) { /* no stats yet */ } | |
| } | |
| // Display | |
| const parts = []; | |
| if (bufLagMs != null) parts.push(`buf ${bufLagMs}ms`); | |
| if (rttMs != null) parts.push(`rtt ${rttMs}ms`); | |
| if (vidJitterMs != null) parts.push(`v-jit ${vidJitterMs}ms`); | |
| if (audJitterMs != null) parts.push(`a-jit ${audJitterMs}ms`); | |
| label.textContent = parts.length ? parts.join(' · ') : '--'; | |
| // Color based on buffer lag | |
| badge.classList.remove('good', 'ok', 'bad'); | |
| if (bufLagMs != null) { | |
| if (bufLagMs < 200) badge.classList.add('good'); | |
| else if (bufLagMs < 500) badge.classList.add('ok'); | |
| else badge.classList.add('bad'); | |
| } | |
| }, 1000); | |
| } | |
| function stopLatencyDisplay() { | |
| if (latencyIntervalId) { clearInterval(latencyIntervalId); latencyIntervalId = null; } | |
| const badge = document.getElementById('latencyBadge'); | |
| badge.classList.add('hidden'); | |
| badge.classList.remove('good', 'ok', 'bad'); | |
| } | |
| // ===================== Session ===================== | |
| // Session lifecycle (start / stop / wake / sleep on leave) lives | |
| // in the host shell. The iframe receives an already-connected, | |
| // already-awake handle via connectToHost(). The `handle.onLeave()` | |
| // wired in the dispatcher above is our only teardown hook. | |
| // ===================== Audio ===================== | |
| function toggleMute() { | |
| robot.setAudioMuted(!robot.audioMuted); | |
| updateMuteButton(); | |
| } | |
| function toggleMic() { | |
| robot.setMicMuted(!robot.micMuted); | |
| updateMicButton(); | |
| } | |
| function updateMuteButton() { | |
| const muted = robot.audioMuted; | |
| const btn = document.getElementById('muteBtn'); | |
| btn.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 updateMicButton() { | |
| const muted = robot.micMuted; | |
| const btn = document.getElementById('micBtn'); | |
| btn.classList.toggle('muted', muted); | |
| document.getElementById('micOffIcon').classList.toggle('hidden', !muted); | |
| document.getElementById('micOnIcon').classList.toggle('hidden', muted); | |
| document.getElementById('micText').textContent = muted ? 'Mic Off' : 'Mic On'; | |
| } | |
| function enableControls(enabled) { | |
| document.getElementById('btnPlaySound').disabled = !enabled; | |
| document.getElementById('btnWakeUp').disabled = !enabled; | |
| document.getElementById('btnGotoSleep').disabled = !enabled; | |
| document.getElementById('btnTorqueToggle').disabled = !enabled; | |
| document.getElementById('muteBtn').disabled = !enabled; | |
| document.getElementById('micBtn').disabled = !enabled || !robot.micSupported; | |
| } | |
| // ===================== State Display ===================== | |
| // The "state" event ships raw wire units (flat 4×4 matrix, radians); | |
| // the UI works in degrees, so we convert at the boundary. | |
| function updateStateDisplay(state) { | |
| // Also gate on bodyYawSliderActive: dragging the body slider | |
| // mutates yawSlider.value (head/body rotate together), and the | |
| // daemon's mid-IK present_head_pose lags the target. Without | |
| // this gate, matrixToRpy of the in-flight pose pumps drifted | |
| // roll/pitch/yaw back into the head sliders, which the next | |
| // body-input event reads and re-sends — visible as pitch/roll | |
| // jitter while the body slider is being dragged. | |
| if (state.head && !headSlidersActive && !bodyYawSliderActive) { | |
| // state.head is number[16] (flat row-major 4×4); matrixToRpy | |
| // wants nested 4×4, so unflatten. | |
| const m = [ | |
| state.head.slice(0, 4), | |
| state.head.slice(4, 8), | |
| state.head.slice(8, 12), | |
| state.head.slice(12, 16), | |
| ]; | |
| const rpy = matrixToRpy(m); | |
| document.getElementById('rollSlider').value = rpy.roll; | |
| document.getElementById('rollValue').textContent = rpy.roll.toFixed(1) + '°'; | |
| document.getElementById('pitchSlider').value = rpy.pitch; | |
| document.getElementById('pitchValue').textContent = rpy.pitch.toFixed(1) + '°'; | |
| document.getElementById('yawSlider').value = rpy.yaw; | |
| document.getElementById('yawValue').textContent = rpy.yaw.toFixed(1) + '°'; | |
| } | |
| if (state.antennas) { | |
| const r = radToDeg(state.antennas[0]).toFixed(0); | |
| const l = radToDeg(state.antennas[1]).toFixed(0); | |
| document.getElementById('rightAntSlider').value = r; | |
| document.getElementById('rightAntValue').textContent = r + '°'; | |
| document.getElementById('leftAntSlider').value = l; | |
| document.getElementById('leftAntValue').textContent = l + '°'; | |
| } | |
| if (typeof state.body_yaw === 'number' && !bodyYawSliderActive) { | |
| const y = radToDeg(state.body_yaw).toFixed(0); | |
| document.getElementById('bodyYawSlider').value = y; | |
| document.getElementById('bodyYawValue').textContent = y + '°'; | |
| // Sync the delta baseline so the next drag computes from | |
| // the robot's actual current yaw, not whatever the slider | |
| // happened to be at on page load. | |
| lastBodyYawDeg = parseFloat(y); | |
| } | |
| if (state.motor_mode) updateTorqueButton(state.motor_mode); | |
| } | |
| function updateTorqueButton(mode) { | |
| const btn = document.getElementById('btnTorqueToggle'); | |
| if (!btn) return; | |
| // Normalise: anything other than "disabled" is considered "on" | |
| // for toggle purposes. gravity_compensation is torque-on too. | |
| const isOn = mode && mode !== 'disabled'; | |
| btn.textContent = isOn ? 'Torque: On (click to disable)' : 'Torque: Off (click to enable)'; | |
| // Stash the current intent so the click handler knows which | |
| // direction to flip without rereading _robotState. | |
| btn.dataset.currentMode = mode; | |
| } | |
| // ===================== Sliders ===================== | |
| function initSliders() { | |
| // Head | |
| const rollSlider = document.getElementById('rollSlider'); | |
| const pitchSlider = document.getElementById('pitchSlider'); | |
| const yawSlider = document.getElementById('yawSlider'); | |
| const rollValue = document.getElementById('rollValue'); | |
| const pitchValue = document.getElementById('pitchValue'); | |
| const yawValue = document.getElementById('yawValue'); | |
| // Body yaw | |
| const bodyYawSlider = document.getElementById('bodyYawSlider'); | |
| const bodyYawValue = document.getElementById('bodyYawValue'); | |
| // Antennas | |
| const rightSlider = document.getElementById('rightAntSlider'); | |
| const leftSlider = document.getElementById('leftAntSlider'); | |
| const rightAntValue = document.getElementById('rightAntValue'); | |
| const leftAntValue = document.getElementById('leftAntValue'); | |
| // Single source of truth: read every slider's DOM state and | |
| // ship it in one atomic setTarget command. Per-slider input | |
| // handlers update their label, optionally run cross-slider | |
| // compensation (body-yaw drag → head-yaw counter-rotation), | |
| // then call this. One round-trip per gesture, no chance for | |
| // the daemon to see a half-applied target between components. | |
| function sendCurrentTarget() { | |
| robot.setTarget({ | |
| head: rpyToMatrix( | |
| parseFloat(rollSlider.value), | |
| parseFloat(pitchSlider.value), | |
| parseFloat(yawSlider.value), | |
| ).flat(), | |
| antennas: [ | |
| degToRad(parseFloat(rightSlider.value)), | |
| degToRad(parseFloat(leftSlider.value)), | |
| ], | |
| body_yaw: degToRad(parseFloat(bodyYawSlider.value)), | |
| }); | |
| } | |
| const onStart = () => { headSlidersActive = true; }; | |
| const onEnd = () => { headSlidersActive = false; }; | |
| for (const s of [rollSlider, pitchSlider, yawSlider]) { | |
| s.addEventListener('mousedown', onStart); | |
| s.addEventListener('touchstart', onStart); | |
| s.addEventListener('mouseup', onEnd); | |
| s.addEventListener('touchend', onEnd); | |
| } | |
| rollSlider.addEventListener('input', () => { rollValue.textContent = parseFloat(rollSlider.value).toFixed(1) + '°'; sendCurrentTarget(); }); | |
| pitchSlider.addEventListener('input', () => { pitchValue.textContent = parseFloat(pitchSlider.value).toFixed(1) + '°'; sendCurrentTarget(); }); | |
| yawSlider.addEventListener('input', () => { yawValue.textContent = parseFloat(yawSlider.value).toFixed(1) + '°'; sendCurrentTarget(); }); | |
| // Body yaw — the head pose in setTarget is interpreted in world | |
| // frame (see look_at_world in the Python SDK), so the IK splits | |
| // the requested world yaw between body rotation and the stewart | |
| // platform. Mechanical limit: |head_yaw_world − body_yaw| ≤ 65°. | |
| // | |
| // To keep that relative yaw constant as the user drags the body | |
| // slider, we move the head's commanded world yaw by the same | |
| // delta — head and body rotate together (tank-style). The | |
| // per-component values are then shipped atomically by | |
| // sendCurrentTarget(). | |
| const onBodyStart = () => { bodyYawSliderActive = true; }; | |
| const onBodyEnd = () => { bodyYawSliderActive = false; }; | |
| bodyYawSlider.addEventListener('mousedown', onBodyStart); | |
| bodyYawSlider.addEventListener('touchstart', onBodyStart); | |
| bodyYawSlider.addEventListener('mouseup', onBodyEnd); | |
| bodyYawSlider.addEventListener('touchend', onBodyEnd); | |
| const yawMin = parseFloat(yawSlider.min); | |
| const yawMax = parseFloat(yawSlider.max); | |
| bodyYawSlider.addEventListener('input', () => { | |
| const newBodyDeg = parseFloat(bodyYawSlider.value); | |
| const delta = newBodyDeg - lastBodyYawDeg; | |
| // Add the body-yaw delta to the head-yaw slider, clamped | |
| // to its range. Once the head slider saturates, the head's | |
| // world yaw stops keeping up with the body, the relative | |
| // yaw starts to grow, and beyond ~65° the daemon's safe-IK | |
| // will modulate body_yaw to stay within mechanical limits. | |
| const newHeadYaw = Math.max(yawMin, Math.min(yawMax, | |
| parseFloat(yawSlider.value) + delta)); | |
| yawSlider.value = newHeadYaw; | |
| yawValue.textContent = newHeadYaw.toFixed(1) + '°'; | |
| bodyYawValue.textContent = newBodyDeg.toFixed(0) + '°'; | |
| sendCurrentTarget(); | |
| lastBodyYawDeg = newBodyDeg; | |
| }); | |
| rightSlider.addEventListener('input', () => { | |
| rightAntValue.textContent = rightSlider.value + '°'; | |
| sendCurrentTarget(); | |
| }); | |
| leftSlider.addEventListener('input', () => { | |
| leftAntValue.textContent = leftSlider.value + '°'; | |
| sendCurrentTarget(); | |
| }); | |
| } | |
| // ===================== Sound ===================== | |
| function playSound() { | |
| const file = document.getElementById('soundInput').value.trim(); | |
| if (file) robot.playSound(file); | |
| } | |
| function playSoundPreset(file) { | |
| document.getElementById('soundInput').value = file; | |
| robot.playSound(file); | |
| } | |
| // ===================== Animations ===================== | |
| // | |
| // Fire-and-forget: the robot plays the full trajectory (~2 s) and | |
| // we don't await completion. The buttons are briefly disabled | |
| // during the motion to prevent the user from spamming the same | |
| // animation on top of itself, using is_move_running from the | |
| // state event as the authoritative "busy" signal. | |
| // | |
| // Staleness detection: if the lib loaded from CDN predates these | |
| // methods (typeof check), warn instead of silently failing. Same | |
| // pattern as the volume controls. | |
| function playWakeUp() { | |
| // Click receipt log: present so that "no log at all" definitively | |
| // means the click event never reached this function (button still | |
| // disabled, stale HTML in browser cache, or redeploy not live). | |
| console.log('[animations] playWakeUp clicked; robot.state=', robot.state, | |
| '; robot.wakeUp typeof=', typeof robot.wakeUp); | |
| if (typeof robot.wakeUp !== 'function') { | |
| console.warn('robot.wakeUp is not a function — stale JS lib; purge jsdelivr + hard-refresh.'); | |
| return; | |
| } | |
| const ok = robot.wakeUp(); | |
| console.log('[animations] robot.wakeUp() returned', ok); | |
| } | |
| function playGotoSleep() { | |
| console.log('[animations] playGotoSleep clicked; robot.state=', robot.state, | |
| '; robot.gotoSleep typeof=', typeof robot.gotoSleep); | |
| if (typeof robot.gotoSleep !== 'function') { | |
| console.warn('robot.gotoSleep is not a function — stale JS lib; purge jsdelivr + hard-refresh.'); | |
| return; | |
| } | |
| const ok = robot.gotoSleep(); | |
| console.log('[animations] robot.gotoSleep() returned', ok); | |
| } | |
| // ===================== Torque ===================== | |
| // | |
| // The "current mode" read from the button's dataset is populated by | |
| // updateTorqueButton() on every state-event. If a user clicks before | |
| // the first state tick arrives, currentMode is falsy and we default | |
| // to enabling — the safe-ish choice that matches what wakeUp() would | |
| // do. The label then self-corrects on the next state tick. | |
| function toggleTorque() { | |
| if (typeof robot.setMotorMode !== 'function') { | |
| console.warn('robot.setMotorMode is not a function — stale JS lib; purge jsdelivr + hard-refresh.'); | |
| return; | |
| } | |
| const btn = document.getElementById('btnTorqueToggle'); | |
| const currentMode = btn.dataset.currentMode; | |
| const next = (currentMode && currentMode !== 'disabled') ? 'disabled' : 'enabled'; | |
| console.log('[torque] toggle click; currentMode=', currentMode, '→ sending', next); | |
| robot.setMotorMode(next); | |
| // Optimistic UI update. If the robot rejects or differs, the | |
| // next state tick (within ~500 ms) will overwrite. | |
| updateTorqueButton(next); | |
| } | |
| </script> | |
| </body> | |
| </html> | |