Hugging Face's logo

Spaces:
sankarlabs
/
boo_hide
Running

App Files Community
sankarlabs Claude Sonnet 4.6 commited on
Commit
2f7a4eb
·
1 Parent(s): 1981dbb

Redesign launcher landing page with cartoon comic strip and full guide

Browse files

- Comic strip: mic → robot sleeps → robot wakes
- Feature cards: offline voice, sleep pose, auto-recovery, web control
- Voice command reference cards (hide vs wake)
- How it works flow diagram
- Install instructions with copy button

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Files changed (1) hide show
  1. index.html +274 -10
index.html CHANGED
@@ -4,35 +4,299 @@
4
  <head>
5
  <meta charset="utf-8" />
6
  <meta name="viewport" content="width=device-width" />
7
- <title> Boo Hide </title>
8
  <link rel="stylesheet" href="style.css" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </head>
10
 
11
  <body>
 
12
  <div class="hero">
13
  <div class="hero-content">
14
- <div class="app-icon">🤖⚡</div>
15
- <h1> Boo Hide </h1>
16
- <p class="tagline">Enter your tagline here</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  </div>
18
  </div>
19
 
 
20
  <div class="container">
21
  <div class="main-card">
22
- <div class="app-preview">
23
- <div class="preview-image">
24
- <div class="camera-feed">🛠️</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
  </div>
26
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  </div>
28
  </div>
29
 
30
  <div class="footer">
31
  <p>
32
- 🤖 Boo Hide •
33
  <a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
34
- <a href="https://huggingface.co/spaces/pollen-robotics/reachy-mini-landing-page#apps" target="_blank">Browse More
35
- Apps</a>
36
  </p>
37
  </div>
38
  </body>
 
4
  <head>
5
  <meta charset="utf-8" />
6
  <meta name="viewport" content="width=device-width" />
7
+ <title>Boo Hide — Voice Peek-a-Boo for Reachy Mini</title>
8
  <link rel="stylesheet" href="style.css" />
9
+ <style>
10
+ /* ── Extra styles for the landing page ── */
11
+ .scene {
12
+ display: flex;
13
+ align-items: center;
14
+ justify-content: center;
15
+ gap: 1.5rem;
16
+ flex-wrap: wrap;
17
+ padding: 2rem 1rem 1rem;
18
+ }
19
+ .scene-step {
20
+ display: flex;
21
+ flex-direction: column;
22
+ align-items: center;
23
+ gap: 0.4rem;
24
+ }
25
+ .scene-emoji { font-size: 3.5rem; line-height: 1; }
26
+ .scene-label {
27
+ font-size: 0.75rem;
28
+ font-weight: 700;
29
+ text-transform: uppercase;
30
+ letter-spacing: 0.08em;
31
+ color: rgba(255,255,255,0.7);
32
+ }
33
+ .scene-arrow { font-size: 2rem; color: rgba(255,255,255,0.5); margin-top: 1.2rem; }
34
+
35
+ .comic-strip {
36
+ display: flex;
37
+ gap: 0;
38
+ border-radius: 16px;
39
+ overflow: hidden;
40
+ border: 3px solid rgba(255,255,255,0.15);
41
+ max-width: 600px;
42
+ margin: 0 auto 1.5rem;
43
+ }
44
+ .comic-panel {
45
+ flex: 1;
46
+ padding: 1.5rem 1rem;
47
+ text-align: center;
48
+ display: flex;
49
+ flex-direction: column;
50
+ align-items: center;
51
+ gap: 0.5rem;
52
+ }
53
+ .comic-panel:nth-child(1) { background: #1e1b4b; }
54
+ .comic-panel:nth-child(2) { background: #1c0505; border-left: 2px solid rgba(255,255,255,0.1); border-right: 2px solid rgba(255,255,255,0.1); }
55
+ .comic-panel:nth-child(3) { background: #042f2e; }
56
+ .comic-panel .emoji { font-size: 2.8rem; }
57
+ .comic-panel .caption {
58
+ font-size: 0.8rem;
59
+ color: rgba(255,255,255,0.6);
60
+ font-weight: 600;
61
+ text-transform: uppercase;
62
+ letter-spacing: 0.06em;
63
+ }
64
+ .comic-panel .word {
65
+ font-size: 1.1rem;
66
+ font-weight: 800;
67
+ color: #a78bfa;
68
+ font-family: monospace;
69
+ }
70
+ .comic-panel.hide-panel .word { color: #fca5a5; }
71
+ .comic-panel.wake-panel .word { color: #6ee7b7; }
72
+
73
+ .features-grid {
74
+ display: grid;
75
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
76
+ gap: 1.25rem;
77
+ padding: 2.5rem 3rem;
78
+ }
79
+ .feature-card {
80
+ background: #f8faff;
81
+ border: 2px solid #e0e7ff;
82
+ border-radius: 14px;
83
+ padding: 1.5rem;
84
+ text-align: center;
85
+ }
86
+ .feature-card .icon { font-size: 2.2rem; margin-bottom: 0.75rem; }
87
+ .feature-card h3 { color: #1e293b; font-size: 1rem; margin-bottom: 0.4rem; }
88
+ .feature-card p { color: #64748b; font-size: 0.88rem; line-height: 1.5; }
89
+
90
+ .commands-section {
91
+ padding: 0 3rem 2.5rem;
92
+ }
93
+ .commands-section h2 {
94
+ text-align: center;
95
+ font-size: 1.5rem;
96
+ color: #1e293b;
97
+ margin-bottom: 1.25rem;
98
+ }
99
+ .command-grid {
100
+ display: grid;
101
+ grid-template-columns: 1fr 1fr;
102
+ gap: 1rem;
103
+ }
104
+ .command-card {
105
+ border-radius: 12px;
106
+ padding: 1.25rem;
107
+ display: flex;
108
+ align-items: flex-start;
109
+ gap: 0.75rem;
110
+ }
111
+ .command-card.hide-card { background: #1c0505; border: 1px solid #7f1d1d; }
112
+ .command-card.wake-card { background: #022c22; border: 1px solid #064e3b; }
113
+ .command-card .cmd-icon { font-size: 2rem; flex-shrink: 0; }
114
+ .command-card h3 { font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
115
+ .command-card.hide-card h3 { color: #fca5a5; }
116
+ .command-card.wake-card h3 { color: #6ee7b7; }
117
+ .command-card .words { font-size: 1rem; color: #e2e8f0; }
118
+ .command-card .words strong { font-weight: 800; }
119
+ .command-card .desc { font-size: 0.8rem; color: #94a3b8; margin-top: 0.25rem; }
120
+
121
+ .how-it-works {
122
+ background: #fefce8;
123
+ border: 2px solid #fde047;
124
+ border-radius: 14px;
125
+ padding: 2rem;
126
+ margin: 0 3rem 2.5rem;
127
+ }
128
+ .how-it-works h2 { color: #a16207; text-align: center; margin-bottom: 1.5rem; font-size: 1.3rem; }
129
+ .flow {
130
+ display: flex;
131
+ align-items: center;
132
+ justify-content: center;
133
+ gap: 0.5rem;
134
+ flex-wrap: wrap;
135
+ font-size: 0.9rem;
136
+ }
137
+ .flow-box {
138
+ background: white;
139
+ border: 2px solid #fde047;
140
+ border-radius: 10px;
141
+ padding: 0.6rem 1rem;
142
+ text-align: center;
143
+ min-width: 90px;
144
+ }
145
+ .flow-box .f-icon { font-size: 1.4rem; }
146
+ .flow-box .f-label { font-size: 0.7rem; color: #a16207; font-weight: 700; }
147
+ .flow-arrow { color: #a16207; font-size: 1.4rem; }
148
+
149
+ .download-card {
150
+ margin: 0 0 3rem;
151
+ border-radius: 0;
152
+ box-shadow: none;
153
+ border-top: 2px solid #e2e8f0;
154
+ }
155
+
156
+ @media (max-width: 600px) {
157
+ .command-grid { grid-template-columns: 1fr; }
158
+ .features-grid { padding: 1.5rem; }
159
+ .commands-section, .how-it-works { padding-left: 1.5rem; padding-right: 1.5rem; }
160
+ .how-it-works { margin-left: 1.5rem; margin-right: 1.5rem; }
161
+ .comic-strip { flex-direction: column; border-radius: 12px; }
162
+ .comic-panel { border-left: none !important; border-right: none !important; border-top: 2px solid rgba(255,255,255,0.1); }
163
+ .comic-panel:first-child { border-top: none; }
164
+ }
165
+ </style>
166
  </head>
167
 
168
  <body>
169
+ <!-- ── Hero ── -->
170
  <div class="hero">
171
  <div class="hero-content">
172
+ <div class="app-icon">👻🤖</div>
173
+ <h1>Boo Hide</h1>
174
+ <p class="tagline">Voice-activated peek-a-boo for Reachy Mini — say <strong style="color:#fff">"Boo!"</strong> and the robot hides. Say <strong style="color:#fff">"Wake"</strong> to bring it back.</p>
175
+ </div>
176
+
177
+ <!-- Comic strip preview -->
178
+ <div class="container" style="margin-top:2rem;">
179
+ <div class="comic-strip">
180
+ <div class="comic-panel">
181
+ <div class="emoji">🎙️🤖</div>
182
+ <div class="word">"boo!"</div>
183
+ <div class="caption">you say</div>
184
+ </div>
185
+ <div class="comic-panel hide-panel">
186
+ <div class="emoji">😴💤</div>
187
+ <div class="word">hiding...</div>
188
+ <div class="caption">robot sleeps</div>
189
+ </div>
190
+ <div class="comic-panel wake-panel">
191
+ <div class="emoji">🙌🤖</div>
192
+ <div class="word">"wake!"</div>
193
+ <div class="caption">robot returns</div>
194
+ </div>
195
+ </div>
196
  </div>
197
  </div>
198
 
199
+ <!-- ── Main card ── -->
200
  <div class="container">
201
  <div class="main-card">
202
+
203
+ <!-- Features -->
204
+ <div class="features-grid">
205
+ <div class="feature-card">
206
+ <div class="icon">🎙️</div>
207
+ <h3>Offline Voice</h3>
208
+ <p>Uses Vosk on-device — no internet, no cloud, no lag.</p>
209
+ </div>
210
+ <div class="feature-card">
211
+ <div class="icon">😴</div>
212
+ <h3>Sleep Pose</h3>
213
+ <p>Robot plays a sleep sound and curls into rest position.</p>
214
+ </div>
215
+ <div class="feature-card">
216
+ <div class="icon">⏱️</div>
217
+ <h3>Auto-Recovery</h3>
218
+ <p>Robot wakes itself up after 30 seconds automatically.</p>
219
+ </div>
220
+ <div class="feature-card">
221
+ <div class="icon">🌐</div>
222
+ <h3>Web Control</h3>
223
+ <p>Live status and manual buttons in your browser.</p>
224
  </div>
225
  </div>
226
+
227
+ <!-- Voice commands -->
228
+ <div class="commands-section">
229
+ <h2>🗣️ Voice Commands</h2>
230
+ <div class="command-grid">
231
+ <div class="command-card hide-card">
232
+ <div class="cmd-icon">😴</div>
233
+ <div>
234
+ <h3>Hide the robot</h3>
235
+ <div class="words"><strong>boo</strong> · peek · hide · go</div>
236
+ <div class="desc">Robot plays sleep sound and goes to rest pose.</div>
237
+ </div>
238
+ </div>
239
+ <div class="command-card wake-card">
240
+ <div class="cmd-icon">🙌</div>
241
+ <div>
242
+ <h3>Wake it up</h3>
243
+ <div class="words"><strong>wake</strong> · come · ready</div>
244
+ <div class="desc">Robot plays wake sound and stands back up.</div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- How it works -->
251
+ <div class="how-it-works">
252
+ <h2>⚙️ How It Works</h2>
253
+ <div class="flow">
254
+ <div class="flow-box">
255
+ <div class="f-icon">🎙️</div>
256
+ <div class="f-label">Mic</div>
257
+ </div>
258
+ <div class="flow-arrow">→</div>
259
+ <div class="flow-box">
260
+ <div class="f-icon">🧠</div>
261
+ <div class="f-label">Vosk ASR</div>
262
+ </div>
263
+ <div class="flow-arrow">→</div>
264
+ <div class="flow-box">
265
+ <div class="f-icon">📋</div>
266
+ <div class="f-label">Grammar</div>
267
+ </div>
268
+ <div class="flow-arrow">→</div>
269
+ <div class="flow-box">
270
+ <div class="f-icon">😴</div>
271
+ <div class="f-label">Sleep / Wake</div>
272
+ </div>
273
+ </div>
274
+ <p style="text-align:center; margin-top:1rem; color:#a16207; font-size:0.85rem;">
275
+ Audio captured at 16 kHz from the robot's onboard mic · Grammar-constrained recognizer keeps it fast and accurate
276
+ </p>
277
+ </div>
278
+
279
+ <!-- Install -->
280
+ <div class="download-card" style="padding:2.5rem 3rem;">
281
+ <h2>🚀 Install on Your Robot</h2>
282
+ <p>Open the Reachy Mini Launcher and search for <strong>Boo Hide</strong>, or install manually:</p>
283
+ <div class="manual-option" style="margin-top:1.5rem;">
284
+ <div class="manual-install">
285
+ <code>pip install "boo_hide @ git+https://huggingface.co/spaces/sankarlabs/boo_hide"</code>
286
+ <button class="copy-btn" onclick="navigator.clipboard.writeText('pip install \"boo_hide @ git+https://huggingface.co/spaces/sankarlabs/boo_hide\"'); this.textContent='✓'">Copy</button>
287
+ </div>
288
+ <p class="manual-steps">Works on Reachy Mini Wireless (CM4) · Wired · Simulator (button-only mode)</p>
289
+ </div>
290
+ </div>
291
+
292
  </div>
293
  </div>
294
 
295
  <div class="footer">
296
  <p>
297
+ 👻 Boo Hide •
298
  <a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
299
+ <a href="https://huggingface.co/spaces/pollen-robotics/reachy-mini-landing-page#apps" target="_blank">Browse More Apps</a>
 
300
  </p>
301
  </div>
302
  </body>