Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Moltbot Body - Reachy Mini 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">Moltbot Body</span> | |
| </div> | |
| <div class="pill">Voice conversation · Moltbot AI · Expressive motion</div> | |
| </div> | |
| <div class="hero-grid"> | |
| <div class="hero-copy"> | |
| <p class="eyebrow">Reachy Mini App</p> | |
| <h1>Give Moltbot a physical presence.</h1> | |
| <p class="lede"> | |
| Connect your Moltbot AI assistant to a Reachy Mini robot. Listen through the microphone, transcribe with Whisper, respond through Moltbot, and speak with natural TTS—all while moving expressively. | |
| </p> | |
| <div class="hero-actions"> | |
| <a class="btn primary" href="#highlights">Explore features</a> | |
| <a class="btn ghost" href="#architecture">See how it works</a> | |
| </div> | |
| <div class="hero-badges"> | |
| <span>Local Whisper STT</span> | |
| <span>Moltbot Gateway</span> | |
| <span>ElevenLabs TTS</span> | |
| <span>Expressive head movement</span> | |
| </div> | |
| </div> | |
| <div class="hero-visual"> | |
| <div class="glass-card"> | |
| <div class="architecture-preview"> | |
| <pre> | |
| Microphone → VAD → Whisper STT | |
| ↓ | |
| Moltbot Gateway | |
| ↓ | |
| ElevenLabs TTS → Speaker | |
| ↓ | |
| MovementManager | |
| HeadWobbler | |
| </pre> | |
| </div> | |
| <p class="caption">End-to-end voice conversation pipeline with expressive robot motion.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <section id="highlights" class="section features"> | |
| <div class="section-header"> | |
| <p class="eyebrow">What's inside</p> | |
| <h2>A complete voice interface for your robot</h2> | |
| <p class="intro"> | |
| Moltbot Body combines speech recognition, AI conversation, and expressive motion into a seamless experience. | |
| </p> | |
| </div> | |
| <div class="feature-grid"> | |
| <div class="feature-card"> | |
| <span class="icon">🎤</span> | |
| <h3>Voice activation</h3> | |
| <p>Listens continuously and detects when you're speaking using voice activity detection.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <span class="icon">📝</span> | |
| <h3>Local transcription</h3> | |
| <p>Fast, private speech-to-text using Whisper running locally on your machine.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <span class="icon">🧠</span> | |
| <h3>Moltbot brain</h3> | |
| <p>Claude-powered responses through the Moltbot gateway with full tool access and memory.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <span class="icon">🔊</span> | |
| <h3>Natural voice</h3> | |
| <p>High-quality streaming text-to-speech through ElevenLabs for natural conversation.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <span class="icon">💃</span> | |
| <h3>Expressive motion</h3> | |
| <p>Audio-driven head wobble and breathing animations bring the robot to life while speaking.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <span class="icon">⚡</span> | |
| <h3>Low latency</h3> | |
| <p>Optimized pipeline with profiling tools to measure and minimize response time.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="architecture" class="section story"> | |
| <div class="story-grid"> | |
| <div class="story-card"> | |
| <p class="eyebrow">How it works</p> | |
| <h3>From speech to response in under a second</h3> | |
| <ul class="story-list"> | |
| <li><span>🎤</span> Robot microphone captures your voice continuously.</li> | |
| <li><span>🔇</span> Voice Activity Detection identifies when you stop speaking.</li> | |
| <li><span>📝</span> Whisper transcribes your speech locally and privately.</li> | |
| <li><span>🧠</span> Moltbot gateway processes your message with full AI capabilities.</li> | |
| <li><span>🔊</span> ElevenLabs streams natural voice output in real-time.</li> | |
| <li><span>🤖</span> Head wobbles expressively while the robot speaks.</li> | |
| </ul> | |
| </div> | |
| <div class="story-card secondary"> | |
| <p class="eyebrow">Prerequisites</p> | |
| <h3>What you need to get started</h3> | |
| <p class="story-text"> | |
| This app requires a running Moltbot gateway, an ElevenLabs API key for TTS, and a Reachy Mini robot connected to your network. | |
| </p> | |
| <div class="chips"> | |
| <span class="chip">Moltbot Gateway</span> | |
| <span class="chip">ElevenLabs API</span> | |
| <span class="chip">Reachy Mini</span> | |
| <span class="chip">Python 3.12+</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer class="footer"> | |
| <p> | |
| Moltbot Body — giving Moltbot a physical presence with Reachy Mini. | |
| Learn more about <a href="https://docs.molt.bot/" target="_blank" rel="noopener">Moltbot</a> and | |
| <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini" target="_blank" rel="noopener">Reachy Mini</a>. | |
| </p> | |
| </footer> | |
| </body> | |
| </html> | |