| | <!doctype html> |
| | <html> |
| |
|
| | <head> |
| | <meta charset="utf-8" /> |
| | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| | <title>Reachy Mini Remote Control App</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=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600&display=swap" rel="stylesheet"> |
| | <link rel="stylesheet" href="style.css" /> |
| | </head> |
| |
|
| | <body> |
| | <header class="hero"> |
| | <div class="topline"> |
| | <div class="brand"> |
| | <span class="logo">🎮</span> |
| | <span class="brand-name">Reachy Mini</span> |
| | </div> |
| | <div class="pill">Remote telepresence · Audio streaming · Live control</div> |
| | </div> |
| | <div class="hero-grid"> |
| | <div class="hero-copy"> |
| | <p class="eyebrow">Remote Control App</p> |
| | <h1>Be there, remotely.</h1> |
| | <p class="lede"> |
| | Control Reachy Mini from anywhere with full audio-visual telepresence. Move the robot, see through its camera, hear what it hears, and speak through it—perfect for remote monitoring, pet cameras, or staying connected. |
| | </p> |
| | <div class="hero-actions"> |
| | <a class="btn primary" href="#highlights">Explore features</a> |
| | <a class="btn ghost" href="#story">Learn more</a> |
| | </div> |
| | <div class="hero-badges"> |
| | <span>Bidirectional audio</span> |
| | <span>Live camera feed</span> |
| | <span>Keyboard control</span> |
| | <span>Web-based interface</span> |
| | </div> |
| | </div> |
| | <div class="hero-visual"> |
| | <div class="glass-card"> |
| | <img src="space.png" alt="Reachy Mini remote control interface" class="space-preview-image" /> |
| | <p class="caption">Control Reachy Mini in real-time with full sensory feedback through your browser.</p> |
| | </div> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | <section class="section space-setup"> |
| | <div class="section-header"> |
| | <p class="eyebrow">Setup your control space</p> |
| | <h2>How to remotely control your robot</h2> |
| | <p class="intro"> |
| | Use our public space, or clone your own private space for complete control. |
| | </p> |
| | </div> |
| |
|
| | <div class="setup-grid"> |
| | <div class="setup-card featured"> |
| | <div class="setup-icon">🌐</div> |
| | <h3>Option 1: Public Space (Recommended)</h3> |
| | <p class="setup-description"> |
| | Perfect for most users. Connect your robot to our public Hugging Face Space with secure per-user isolation. Each user's connection is kept completely separate—your video, audio, and controls never mix with other users. |
| | </p> |
| |
|
| | <div style="background: rgba(16, 185, 129, 0.1); border-left: 3px solid rgba(16, 185, 129, 0.5); padding: 1rem; margin: 1rem 0; border-radius: 0.5rem;"> |
| | <h4 style="margin: 0 0 0.5rem 0; color: #10b981; font-size: 0.95rem;">⚡ Quick Setup:</h4> |
| | <ol style="margin: 0; padding-left: 1.5rem; color: #d1d5db; font-size: 0.9rem; line-height: 1.6;"> |
| | <li><strong>Create a Hugging Face account</strong> (free) at <a href="https://huggingface.co/join" target="_blank" style="color: #10b981; text-decoration: underline;">huggingface.co/join</a></li> |
| | <li><strong>Install this app</strong> on your Reachy Mini robot</li> |
| | <li><strong>Log in to HuggingFace:</strong> Open the robot dashboard or desktop app and sign in with your HuggingFace account — the token is picked up automatically</li> |
| | <li><strong>Open the control interface</strong> in your browser: <a href="https://huggingfacem4-reachy-mini-remote-control.hf.space" target="_blank" style="color: #10b981; text-decoration: underline;">huggingfacem4-reachy-mini-remote-control.hf.space</a></li> |
| | <li><strong>Start controlling!</strong> Your robot should appear connected in the interface</li> |
| | </ol> |
| | <p style="margin: 0.75rem 0 0 0; font-size: 0.85rem; color: #9ca3af;"> |
| | 🔒 <strong>Secure:</strong> Your token authenticates your robot and creates an isolated session. Other users on the same space cannot access your robot's video, audio, or controls. |
| | </p> |
| | <p style="margin: 0.5rem 0 0 0; font-size: 0.85rem; color: #9ca3af;"> |
| | 💤 <strong>Note:</strong> The control Space may be asleep if it hasn't been used in 48 hours. Open it in your browser first and wait for it to fully load (~30 seconds) before your robot connects. |
| | </p> |
| | </div> |
| |
|
| | <div class="connection-info"> |
| | <label>Control interface (open in browser):</label> |
| | <code class="uri-code">https://huggingfacem4-reachy-mini-remote-control.hf.space</code> |
| | <button class="btn-copy" onclick="copyToClipboard('https://huggingfacem4-reachy-mini-remote-control.hf.space', this)">📋 Copy</button> |
| | </div> |
| | </div> |
| |
|
| | <div class="setup-card"> |
| | <div class="setup-icon">🔒</div> |
| | <h3>Option 2: Private Space (Advanced)</h3> |
| | <p class="setup-description"> |
| | For users who want their own dedicated infrastructure. Clone your own private Hugging Face Space with full control over the deployment. Note: The public space is already secure with per-user isolation, so this is optional. |
| | </p> |
| |
|
| | <div style="background: rgba(139, 92, 246, 0.1); border-left: 3px solid rgba(139, 92, 246, 0.5); padding: 1rem; margin: 1rem 0; border-radius: 0.5rem;"> |
| | <h4 style="margin: 0 0 0.5rem 0; color: #a78bfa; font-size: 0.95rem;">📋 Setup Flow for Private Space:</h4> |
| | <ol style="margin: 0; padding-left: 1.5rem; color: #d1d5db; font-size: 0.9rem; line-height: 1.6;"> |
| | <li><strong>Clone Your Space:</strong> Sign in below and click "Clone Private Space" to create your own private control server</li> |
| | <li><strong>Create Access Token:</strong> Visit <a href="https://huggingface.co/settings/tokens" target="_blank" style="color: #a78bfa; text-decoration: underline;">huggingface.co/settings/tokens</a> and create a token with 'read' permissions</li> |
| | <li><strong>Install App on Robot:</strong> Install this app on your Reachy Mini robot</li> |
| | <li><strong>Configure in Settings:</strong> Open the app's settings page on your robot and enter both your private space URI and your token</li> |
| | <li><strong>Connect & Control:</strong> Your robot will authenticate and connect to your private space</li> |
| | </ol> |
| | <p style="margin: 0.75rem 0 0 0; font-size: 0.85rem; color: #9ca3af;"> |
| | 💡 <strong>Why clone?</strong> A private space gives you dedicated compute resources and the ability to customize the server. However, the public space already provides secure per-user isolation, so cloning is optional. |
| | </p> |
| | </div> |
| |
|
| | <div class="auth-section" id="auth-section"> |
| | <div id="login-view" class="auth-view"> |
| | <p class="auth-prompt">Sign in to Hugging Face to clone your private space:</p> |
| | <button class="btn primary" onclick="loginToHuggingFace()"> |
| | 🤗 Sign in with Hugging Face |
| | </button> |
| | </div> |
| |
|
| | <div id="authenticated-view" class="auth-view" style="display: none;"> |
| | <p class="auth-welcome">Welcome, <span id="username">user</span>! 👋</p> |
| |
|
| | <div id="no-space-view" class="space-view"> |
| | <p class="space-prompt">Clone your private control space to get started:</p> |
| | <button class="btn primary" onclick="cloneSpace()"> |
| | <span id="clone-btn-text">🚀 Clone Private Space</span> |
| | </button> |
| | <p class="setup-note">This will create a space named "reachy-mini-remote-control" in your account.</p> |
| | </div> |
| |
|
| | <div id="has-space-view" class="space-view" style="display: none;"> |
| | <div class="space-info-card"> |
| | <div class="space-status"> |
| | <span class="status-badge">✓ Space Ready</span> |
| | <span id="space-url-display">your-username/reachy-mini-remote-control</span> |
| | </div> |
| | <div class="connection-info"> |
| | <label>Your Private Server URI:</label> |
| | <code class="uri-code" id="private-uri">wss://your-username-reachy-mini-remote-control.hf.space</code> |
| | <button class="btn-copy" onclick="copyPrivateUri(event)">📋 Copy</button> |
| | </div> |
| | <p class="setup-note">Configure this URI in your robot's settings for private control.</p> |
| | <a id="space-link" href="#" target="_blank" class="btn ghost">Open Your Space →</a> |
| | </div> |
| | </div> |
| |
|
| | <button class="btn-text" onclick="logout()">Sign out</button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div class="comparison-table"> |
| | <h3>Which option is right for you?</h3> |
| | <table> |
| | <thead> |
| | <tr> |
| | <th>Feature</th> |
| | <th>Public Space</th> |
| | <th>Private Space</th> |
| | </tr> |
| | </thead> |
| | <tbody> |
| | <tr> |
| | <td>Setup Time</td> |
| | <td>2-3 minutes</td> |
| | <td>5 minutes</td> |
| | </tr> |
| | <tr> |
| | <td>Account Required</td> |
| | <td>Free HF account</td> |
| | <td>Free HF account</td> |
| | </tr> |
| | <tr> |
| | <td>User Isolation</td> |
| | <td>✅ Secure per-user sessions</td> |
| | <td>✅ Complete isolation</td> |
| | </tr> |
| | <tr> |
| | <td>Infrastructure</td> |
| | <td>Shared compute</td> |
| | <td>Dedicated compute</td> |
| | </tr> |
| | <tr> |
| | <td>Best For</td> |
| | <td>Most users</td> |
| | <td>Custom deployments</td> |
| | </tr> |
| | </tbody> |
| | </table> |
| | </div> |
| | </section> |
| |
|
| | <section id="highlights" class="section features"> |
| | <div class="section-header"> |
| | <p class="eyebrow">What's inside</p> |
| | <h2>Complete remote telepresence for your robot</h2> |
| | <p class="intro"> |
| | Everything you need to control and experience Reachy Mini from anywhere, with seamless audio-visual streaming. |
| | </p> |
| | </div> |
| | <div class="feature-grid"> |
| | <div class="feature-card"> |
| | <span class="icon">⌨️</span> |
| | <h3>Keyboard control</h3> |
| | <p>Control Reachy Mini's head movements and body position with intuitive keyboard shortcuts (WASD, Q/E for tilting).</p> |
| | </div> |
| | <div class="feature-card"> |
| | <span class="icon">📹</span> |
| | <h3>Live camera feed</h3> |
| | <p>See exactly what the robot sees with real-time video streaming directly to your browser.</p> |
| | </div> |
| | <div class="feature-card"> |
| | <span class="icon">🎧</span> |
| | <h3>Hear remotely</h3> |
| | <p>Listen to the robot's surroundings with crystal-clear audio streaming from its microphones.</p> |
| | </div> |
| | <div class="feature-card"> |
| | <span class="icon">🎙️</span> |
| | <h3>Speak through the robot</h3> |
| | <p>Your voice comes out of Reachy Mini's speakers, enabling two-way communication.</p> |
| | </div> |
| | <div class="feature-card"> |
| | <span class="icon">🌐</span> |
| | <h3>Web-based access</h3> |
| | <p>No installation required—control from any device with a modern web browser.</p> |
| | </div> |
| | <div class="feature-card"> |
| | <span class="icon">🔒</span> |
| | <h3>Secure connection</h3> |
| | <p>Direct connection to your robot with secure streaming protocols.</p> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | <section id="story" class="section story"> |
| | <div class="story-grid"> |
| | <div class="story-card"> |
| | <p class="eyebrow">How it works</p> |
| | <h3>From connection to control in seconds</h3> |
| | <ul class="story-list"> |
| | <li><span>🔗</span> Connect to your Reachy Mini through the web interface—no app installation needed.</li> |
| | <li><span>👀</span> See live video from the robot's camera with minimal latency.</li> |
| | <li><span>⌨️</span> Control head movements with keyboard shortcuts—WASD for positioning, Q/E for tilting, J/L for body rotation.</li> |
| | <li><span>🔊</span> Hear and speak through the robot for full telepresence experience.</li> |
| | </ul> |
| | </div> |
| | <div class="story-card secondary"> |
| | <p class="eyebrow">Use cases</p> |
| | <h3>Perfect for remote monitoring and telepresence</h3> |
| | <p class="story-text"> |
| | Whether you're checking on pets at home, monitoring a remote location, or providing remote presence at an event, the app gives you eyes, ears, and a voice wherever your Reachy Mini is. Control the robot naturally while staying fully immersed in its environment. |
| | </p> |
| | <div class="chips"> |
| | <span class="chip">Pet monitoring</span> |
| | <span class="chip">Remote presence</span> |
| | <span class="chip">Home security</span> |
| | <span class="chip">Remote assistance</span> |
| | <span class="chip">Virtual tours</span> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | <script type="module" src="hf-auth.js"></script> |
| |
|
| | <footer class="footer"> |
| | <p> |
| | Reachy Mini Remote Control App by <a href="https://github.com/pollen-robotics" target="_blank" rel="noopener">Pollen Robotics</a>. |
| | Explore more apps on <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Apps" target="_blank" rel="noopener">Hugging Face Spaces</a>. |
| | </p> |
| | </footer> |
| |
|
| | </body> |
| |
|
| | </html> |
| |
|
