clawbody/index.html at main · asmolebot/clawbody · GitHub

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ClawBody - 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;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>

<section class="hero">
    <div class="topline">
        <div class="brand">
            <span class="logo">🦞</span>
            <span class="brand-name">ClawBody</span>
        </div>
        <div class="pill">Voice conversation · OpenClaw AI · Expressive motion</div>
    </div>

    <div class="hero-grid">
        <div class="hero-copy">
            <div class="eyebrow">Reachy Mini App</div>
            <h1>Give OpenClaw a physical body.</h1>
            <p class="lede">
                Connect your OpenClaw AI assistant (Clawson) to a Reachy Mini robot.
                Ultra-responsive voice conversation through OpenAI Realtime API,
                intelligent responses from OpenClaw, and expressive robot movements.
            </p>
            <div class="hero-actions">
                <a href="#simulator" class="btn primary">🖥️ Try with Simulator</a>
                <a href="#features" class="btn ghost">See features</a>
            </div>
            <div class="hero-badges">
                <span>🎙️ OpenAI Realtime</span>
                <span>🦞 OpenClaw Gateway</span>
                <span>💃 Expressive movement</span>
                <span>🖥️ No robot required!</span>
            </div>
        </div>
        <div class="hero-visual">
            <div class="glass-card">
                <img src="https://huggingface.co/spaces/pollen-robotics/reachy_mini_conversation_app/resolve/main/docs/assets/reachy_mini_dance.gif"
                     alt="Reachy Mini Robot Dancing"
                     class="hero-gif">
                <p class="caption">Works with physical robot OR MuJoCo simulator!</p>
            </div>
        </div>
    </div>
</section>

<section class="section simulator-callout" id="simulator">
    <div class="story-card highlight">
        <h2>🖥️ No Robot? No Problem!</h2>
        <p class="story-text" style="font-size: 1.1rem;">
            <strong>You don't need a physical Reachy Mini robot to use ClawBody!</strong><br><br>
            ClawBody works with the Reachy Mini Simulator, a MuJoCo-based physics simulation
            that runs on your computer. Watch Clawson move and express emotions on screen
            while you talk to your OpenClaw agent.
        </p>
        <div class="architecture-preview" style="margin: 1.5rem 0;">
<pre>
# Install simulator support
pip install "reachy-mini[mujoco]"

# Start the simulator (opens 3D window)
reachy-mini-daemon --sim

# In another terminal, run ClawBody
clawbody --gradio
</pre>
        </div>
        <p class="caption">🍎 Mac Users: Use <code>mjpython -m reachy_mini.daemon.app.main --sim</code> instead</p>
        <a href="https://huggingface.co/docs/reachy_mini/platforms/simulation/get_started" class="btn primary" style="margin-top: 1rem;" target="_blank">
            📚 Simulator Setup Guide
        </a>
    </div>
</section>

<section class="section" id="features">
    <div class="section-header">
        <h2>What's inside</h2>
        <p class="intro">
            ClawBody combines real-time voice conversation, OpenClaw intelligence, and expressive robot motion.
        </p>
    </div>
    <div class="feature-grid">
        <div class="feature-card">
            <div class="icon">🎤</div>
            <h3>Real-time voice</h3>
            <p>Sub-second latency using OpenAI's Realtime API for natural, responsive conversation.</p>
        </div>
        <div class="feature-card">
            <div class="icon">🦞</div>
            <h3>OpenClaw brain</h3>
            <p>Full Clawson capabilities—tools, memory, personality—through the OpenClaw gateway.</p>
        </div>
        <div class="feature-card">
            <div class="icon">👀</div>
            <h3>Vision</h3>
            <p>See through the robot's camera. Ask Clawson what it sees and get visual descriptions.</p>
        </div>
        <div class="feature-card">
            <div class="icon">💃</div>
            <h3>Expressive motion</h3>
            <p>Audio-driven head wobble, emotions, dances, and natural movements while speaking.</p>
        </div>
        <div class="feature-card">
            <div class="icon">🖥️</div>
            <h3>Simulator support</h3>
            <p>No robot? Run with MuJoCo simulator and watch Clawson move in a 3D window.</p>
        </div>
        <div class="feature-card">
            <div class="icon">⚡</div>
            <h3>Hybrid architecture</h3>
            <p>Best of both worlds: OpenAI's voice tech + OpenClaw's full AI capabilities.</p>
        </div>
    </div>
</section>

<section class="section story" id="how-it-works">
    <div class="story-grid">
        <div class="story-card">
            <h3>How it works</h3>
            <p class="story-text">From speech to response in under a second</p>
            <ol class="story-list">
                <li><span>🎤</span> Robot (or simulator) captures your voice</li>
                <li><span>🔇</span> Voice Activity Detection identifies when you stop speaking</li>
                <li><span>📝</span> OpenAI Realtime transcribes your speech instantly</li>
                <li><span>🦞</span> OpenClaw processes your message with full AI capabilities</li>
                <li><span>🔊</span> OpenAI Realtime speaks the response naturally</li>
                <li><span>🤖</span> Robot moves expressively while speaking</li>
            </ol>
        </div>
        <div class="story-card secondary">
            <h3>Prerequisites</h3>
            <p class="story-text">Choose your setup:</p>
            <div class="chips">
                <span class="chip">🦞 OpenClaw Gateway</span>
                <span class="chip">🔑 OpenAI API Key</span>
                <span class="chip">🐍 Python 3.11+</span>
            </div>
            <p class="story-text" style="margin-top: 1rem;">
                <strong>Option A:</strong> 🤖 Physical Reachy Mini robot<br>
                <strong>Option B:</strong> 🖥️ MuJoCo Simulator (free, no hardware!)
            </p>
            <a href="https://huggingface.co/spaces/tomrikert/clawbody/blob/main/README.md" class="btn ghost wide" style="margin-top: 1rem;">
                View installation guide
            </a>
        </div>
    </div>
</section>

<section class="section">
    <div class="section-header">
        <h2>Quick start</h2>
        <p class="intro">Get ClawBody running with the simulator</p>
    </div>
    <div class="story-card">
        <div class="architecture-preview">
<pre>
# Clone ClawBody
git clone https://github.com/tomrikert/clawbody
cd clawbody

# Create virtual environment
python -m venv .venv
source .venv/bin/activate

# Install ClawBody + simulator
pip install -e .
pip install "reachy-mini[mujoco]"

# Configure (edit with your OpenClaw URL and OpenAI key)
cp .env.example .env
nano .env

# Terminal 1: Start simulator
reachy-mini-daemon --sim

# Terminal 2: Run ClawBody
clawbody --gradio
</pre>
        </div>
    </div>
</section>

<footer class="footer">
    <p>
        ClawBody — giving OpenClaw a physical presence with Reachy Mini.<br>
        <strong>Works with physical robot OR simulator!</strong><br><br>
        Learn more about <a href="https://github.com/openclaw/openclaw">OpenClaw</a>,
        <a href="https://github.com/pollen-robotics/reachy_mini">Reachy Mini</a>, and
        <a href="https://huggingface.co/docs/reachy_mini/platforms/simulation/get_started">the Simulator</a>.
    </p>
</footer>

</body>
</html>