| <!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 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> |
|
|
| <section class="section space-setup"> |
| <div class="section-header"> |
| <p class="eyebrow">Setup your control space</p> |
| <h2>Public or Private—You Choose</h2> |
| <p class="intro"> |
| Use our shared public space for quick testing, or clone your own private space for dedicated robot control. |
| </p> |
| </div> |
|
|
| <div class="setup-grid"> |
| <div class="setup-card"> |
| <div class="setup-icon">🌐</div> |
| <h3>Option 1: Shared Public Space</h3> |
| <p class="setup-description"> |
| Perfect for testing and demos. Connect your robot to our public Hugging Face Space—no account or token required. Note: This space is shared among all 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>Install this app on your Reachy Mini robot</li> |
| <li>Copy the server URI below</li> |
| <li>Paste it in the app's settings page on your robot</li> |
| <li>Start controlling immediately—no authentication needed!</li> |
| </ol> |
| </div> |
|
|
| <div class="connection-info"> |
| <label>Server URI:</label> |
| <code class="uri-code">wss://huggingfacem4-reachy-mini-remote-control.hf.space</code> |
| <button class="btn-copy" onclick="copyToClipboard('wss://huggingfacem4-reachy-mini-remote-control.hf.space', this)">📋 Copy</button> |
| </div> |
| </div> |
|
|
| <div class="setup-card featured"> |
| <div class="setup-icon">🔒</div> |
| <h3>Option 2: Your Private Space</h3> |
| <p class="setup-description"> |
| Recommended for dedicated use. Clone your own private Hugging Face Space for exclusive robot control. Requires a free Hugging Face account. |
| </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 HuggingFace token</li> |
| <li><strong>Connect & Control:</strong> Your robot will authenticate and connect to your private space securely</li> |
| </ol> |
| <p style="margin: 0.75rem 0 0 0; font-size: 0.85rem; color: #9ca3af;"> |
| 💡 <strong>Note:</strong> Private spaces require authentication. The token ensures only your robot can connect to your private control space. |
| </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>Instant</td> |
| <td>2-3 minutes</td> |
| </tr> |
| <tr> |
| <td>Account Required</td> |
| <td>No</td> |
| <td>Free HF account</td> |
| </tr> |
| <tr> |
| <td>Privacy</td> |
| <td>Shared with others</td> |
| <td>Private to you</td> |
| </tr> |
| <tr> |
| <td>Best For</td> |
| <td>Quick testing & demos</td> |
| <td>Dedicated use & security</td> |
| </tr> |
| </tbody> |
| </table> |
| </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> |
|
|
