File size: 5,280 Bytes
6af0b1a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!doctype html>
<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>