Hugging Face's logo

Spaces:
pollen-robotics
/
marionette
Running

App Files Community
10
RemiFabre Anne-Charlotte commited on
Commit
744c3d7
·
verified ·
1 Parent(s): d5970e1

create index.html (#2)

Browse files

- create index.html (588ef379e091bd62786081d9d9a2358e8d20f05f)


Co-authored-by: Anne-Charlotte <Anne-Charlotte@users.noreply.huggingface.co>

Files changed (1) hide show
  1. index.html +423 -89
index.html CHANGED
@@ -1,94 +1,428 @@
1
- <!doctype html>
2
  <html lang="en">
3
-
4
  <head>
5
- <meta charset="utf-8" />
6
- <meta name="viewport" content="width=device-width" />
7
- <title>Marionette</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>Marionette</h1>
16
- <p class="tagline">Manual performance recorder for Reachy Mini — capture motion + sound, build your own
17
- datasets, and replay every take.</p>
18
- </div>
19
- </div>
20
-
21
- <div class="container">
22
- <div class="main-card">
23
- <div class="app-preview">
24
- <div class="preview-image">
25
- <div class="camera-feed">🎚️</div>
26
- <p class="preview-text">Countdown → Manual motion → Dataset ready</p>
27
- </div>
28
- </div>
29
- </div>
30
- </div>
31
-
32
- <div class="container">
33
- <div class="main-card app-details">
34
- <h2>Capture expressive head moves in minutes</h2>
35
- <div class="template-info">
36
- <div class="info-box">
37
- <h3>Relax &amp; guide Reachy Mini</h3>
38
- <p>Marionette gently positions the head, disables torque, and gives you full manual control to sculpt
39
- the motion exactly how you feel it.</p>
40
- </div>
41
- <div class="info-box">
42
- <h3>Record motion + audio</h3>
43
- <p>Encoder data + FK pose are sampled at 100&nbsp;Hz while an optional mic stream captures the vibe for
44
- each take.</p>
45
- </div>
46
- <div class="info-box">
47
- <h3>Ready for Hugging Face</h3>
48
- <p>Every move lands in <code>local_dataset/</code> using the Reachy Mini emotions schema (JSON + WAV)
49
- so sharing is a copy-paste away.</p>
50
- </div>
51
- </div>
52
-
53
- <div class="how-to-use">
54
- <h3>How it works</h3>
55
- <div class="steps">
56
- <div class="step">
57
- <div class="step-number">1</div>
58
- <div>
59
- <h4>Pick duration &amp; audio</h4>
60
- <p>Set the capture length, toggle sound, and give your move a label.</p>
61
- </div>
62
- </div>
63
- <div class="step">
64
- <div class="step-number">2</div>
65
- <div>
66
- <h4>Guide the motion</h4>
67
- <p>After the 3-2-1 countdown, move Reachy Mini’s head by hand. We log encoder + FK pose
68
- continuously.</p>
69
- </div>
70
- </div>
71
- <div class="step">
72
- <div class="step-number">3</div>
73
- <div>
74
- <h4>Replay &amp; iterate</h4>
75
- <p>Each take shows up in the in-app list with play buttons so you can review, refine, and
76
- export.</p>
77
- </div>
78
- </div>
79
- </div>
80
- </div>
81
- </div>
82
- </div>
83
-
84
- <div class="footer">
85
- <p>
86
- 🤖 Marionette •
87
- <a href="https://github.com/pollen-robotics" target="_blank" rel="noreferrer">Pollen Robotics</a> •
88
- <a href="https://huggingface.co/spaces/pollen-robotics/reachy-mini-landing-page#apps" target="_blank"
89
- rel="noreferrer">Browse More Apps</a>
90
- </p>
91
- </div>
92
- </body>
93
 
94
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
  <html lang="en">
 
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Marionette - Manual performance recorder for Reachy Mini</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ *, *::before, *::after {
10
+ box-sizing: border-box;
11
+ margin: 0;
12
+ padding: 0;
13
+ }
14
+
15
+ :root {
16
+ --background: #F6F6F8;
17
+ --foreground: #333333;
18
+ --card: hsl(0 0% 100%);
19
+ --card-foreground: hsl(240 10% 3.9%);
20
+ --primary: #FF9900;
21
+ --primary-foreground: hsl(0 0% 100%);
22
+ --muted: #E8E8EB;
23
+ --muted-foreground: #878789;
24
+ --border: #E0E0E0;
25
+ }
26
+
27
+ body {
28
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
29
+ background-color: var(--background);
30
+ color: var(--foreground);
31
+ line-height: 1.6;
32
+ min-height: 100vh;
33
+ }
34
+
35
+ .container {
36
+ max-width: 72rem;
37
+ margin: 0 auto;
38
+ padding: 0 1.5rem;
39
+ }
40
+
41
+ /* Hero Section */
42
+ .hero {
43
+ padding: 4rem 0;
44
+ }
45
+
46
+ .hero-grid {
47
+ display: grid;
48
+ grid-template-columns: 1fr;
49
+ gap: 3rem;
50
+ align-items: center;
51
+ }
52
+
53
+ @media (min-width: 768px) {
54
+ .hero-grid {
55
+ grid-template-columns: 1fr 1fr;
56
+ }
57
+ }
58
+
59
+ .hero video {
60
+ width: 100%;
61
+ max-width: 700px;
62
+ border-radius: 0.5rem;
63
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
64
+ }
65
+
66
+ .hero-content {
67
+ text-align: left;
68
+ }
69
+
70
+ .hero-title-wrapper {
71
+ display: flex;
72
+ align-items: center;
73
+ justify-content: center;
74
+ gap: 1rem;
75
+ margin-bottom: 1.5rem;
76
+ }
77
+
78
+ .hero-emoji {
79
+ font-size: 3.75rem;
80
+ }
81
+
82
+ .hero-title {
83
+ font-size: 3rem;
84
+ font-weight: 700;
85
+ color: var(--foreground);
86
+ }
87
+
88
+ .tags {
89
+ display: flex;
90
+ flex-wrap: wrap;
91
+ justify-content: center;
92
+ gap: 0.5rem;
93
+ margin-bottom: 1.5rem;
94
+ }
95
+
96
+ .tag {
97
+ display: inline-flex;
98
+ align-items: center;
99
+ padding: 0.25rem 0.75rem;
100
+ font-size: 0.75rem;
101
+ font-weight: 500;
102
+ border-radius: 9999px;
103
+ background-color: rgba(255, 153, 0, 0.15);
104
+ color: var(--primary);
105
+ }
106
+
107
+ .hero-description {
108
+ font-size: 1.125rem;
109
+ color: var(--muted-foreground);
110
+ max-width: 600px;
111
+ margin: 0 auto;
112
+ }
113
+
114
+ .hero-description strong {
115
+ color: var(--foreground);
116
+ }
117
+
118
+ /* Technical Section */
119
+ .technical {
120
+ padding: 4rem 0;
121
+ background-color: var(--card);
122
+ }
123
+
124
+ .technical-grid {
125
+ display: grid;
126
+ grid-template-columns: 1fr;
127
+ gap: 4rem;
128
+ align-items: flex-start;
129
+ }
130
+
131
+ @media (min-width: 768px) {
132
+ .technical-grid {
133
+ grid-template-columns: 1fr 1fr;
134
+ }
135
+ }
136
+
137
+ .technical h2 {
138
+ font-size: 1.5rem;
139
+ font-weight: 700;
140
+ color: var(--foreground);
141
+ margin-bottom: 1rem;
142
+ margin-top: 2rem;
143
+ }
144
+
145
+ .steps {
146
+ list-style: none;
147
+ display: flex;
148
+ flex-direction: column;
149
+ gap: 1rem;
150
+ }
151
+
152
+ .step {
153
+ display: flex;
154
+ align-items: flex-start;
155
+ gap: 1rem;
156
+ color: var(--muted-foreground);
157
+ }
158
+
159
+ .step-number {
160
+ display: flex;
161
+ align-items: center;
162
+ justify-content: center;
163
+ min-width: 1.75rem;
164
+ height: 1.75rem;
165
+ border-radius: 9999px;
166
+ background-color: var(--primary);
167
+ color: white;
168
+ font-size: 0.875rem;
169
+ font-weight: 600;
170
+ }
171
+
172
+ .step-content {
173
+ display: flex;
174
+ flex-direction: column;
175
+ gap: 0.25rem;
176
+ }
177
+
178
+ .step-title {
179
+ font-size: 0.875rem;
180
+ font-weight: 600;
181
+ color: var(--foreground);
182
+ }
183
+
184
+ .step-body {
185
+ font-size: 0.875rem;
186
+ color: var(--muted-foreground);
187
+ }
188
+
189
+ .step-body a {
190
+ color: var(--muted-foreground);
191
+ text-decoration: underline;
192
+ transition: color 0.2s;
193
+ }
194
 
195
+ .step-body a:hover {
196
+ color: var(--primary);
197
+ }
198
+
199
+ .technical video {
200
+ width: 100%;
201
+ border-radius: 0.5rem;
202
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
203
+ }
204
+
205
+ /* Footer */
206
+ footer {
207
+ background-color: var(--background);
208
+ border-top: 1px solid var(--border);
209
+ padding: 3rem 0;
210
+ }
211
+
212
+ .footer-grid {
213
+ display: grid;
214
+ grid-template-columns: 1fr;
215
+ gap: 2rem;
216
+ margin-bottom: 2rem;
217
+ }
218
+
219
+ @media (min-width: 768px) {
220
+ .footer-grid {
221
+ grid-template-columns: repeat(3, 1fr);
222
+ }
223
+ }
224
+
225
+ .footer-section h4 {
226
+ font-size: 0.875rem;
227
+ font-weight: 600;
228
+ color: var(--foreground);
229
+ margin-bottom: 0.75rem;
230
+ }
231
+
232
+ .footer-section ul {
233
+ list-style: none;
234
+ display: flex;
235
+ flex-direction: column;
236
+ gap: 0.5rem;
237
+ }
238
+
239
+ .footer-section a {
240
+ font-size: 0.875rem;
241
+ color: var(--muted-foreground);
242
+ text-decoration: none;
243
+ transition: color 0.2s;
244
+ }
245
+
246
+ .footer-section a:hover {
247
+ color: var(--primary);
248
+ }
249
+
250
+ .social-links {
251
+ display: flex;
252
+ gap: 0.75rem;
253
+ }
254
+
255
+ .social-link {
256
+ display: flex;
257
+ align-items: center;
258
+ justify-content: center;
259
+ width: 2.25rem;
260
+ height: 2.25rem;
261
+ border-radius: 9999px;
262
+ background-color: var(--muted);
263
+ color: var(--muted-foreground);
264
+ transition: all 0.2s;
265
+ }
266
+
267
+ .social-link:hover {
268
+ background-color: var(--primary);
269
+ color: white;
270
+ }
271
+
272
+ .social-link svg {
273
+ width: 1.25rem;
274
+ height: 1.25rem;
275
+ }
276
+
277
+ .footer-credit {
278
+ font-size: 0.875rem;
279
+ color: var(--muted-foreground);
280
+ text-align: center;
281
+ padding-top: 1.5rem;
282
+ border-top: 1px solid var(--border);
283
+ }
284
+
285
+ .footer-credit a {
286
+ color: var(--foreground);
287
+ font-weight: 600;
288
+ text-decoration: none;
289
+ transition: color 0.2s;
290
+ }
291
+
292
+ .footer-credit a:hover {
293
+ color: var(--primary);
294
+ }
295
+ </style>
296
+ </head>
297
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
298
 
299
+ <!-- Hero Section -->
300
+ <section class="hero">
301
+ <div class="container">
302
+ <div class="hero-grid">
303
+ <div>
304
+ <video autoplay loop muted playsinline>
305
+ <source src="marionette/assets/reachy-mini-demo-app-marionette.mp4" type="video/mp4" />
306
+ </video>
307
+ </div>
308
+
309
+ <div class="hero-content">
310
+ <div class="hero-title-wrapper">
311
+ <span class="hero-emoji">🎭</span>
312
+ <h1 class="hero-title">Marionette</h1>
313
+ </div>
314
+
315
+ <div class="tags">
316
+ <span class="tag">motion</span>
317
+ <span class="tag">dataset</span>
318
+ <span class="tag">Kids</span>
319
+ </div>
320
+
321
+ <p class="hero-description">
322
+ <strong>Manual performance recorder for Reachy Mini</strong><br />
323
+ Manually guide Reachy Mini to create natural motions, record movement and audio in real time, and automatically save everything in a share-ready format compatible with Hugging Face.
324
+ </p>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </section>
329
+
330
+ <!-- Technical Section -->
331
+ <section class="technical">
332
+ <div class="container">
333
+ <div class="technical-grid">
334
+ <div>
335
+ <h2>How it works</h2>
336
+ <ol class="steps">
337
+ <li class="step">
338
+ <span class="step-number">1</span>
339
+ <div class="step-content">
340
+ <div class="step-title">Connect Reachy Mini & launch the app</div>
341
+ <div class="step-body">
342
+ Connect to your Reachy Mini, navigate to the "Applications" tab, find "Marionette" and click "Launch" (make sure you already have the <a href="https://hf.co/reachy-mini/#download" target="_blank" rel="noreferrer">dashboard</a> installed).
343
+ </div>
344
+ </div>
345
+ </li>
346
+ <li class="step">
347
+ <span class="step-number">2</span>
348
+ <div class="step-content">
349
+ <div class="step-title">Pick duration & audio</div>
350
+ <div class="step-body">Choose the recording length, enable or disable sound, and label your motion.</div>
351
+ </div>
352
+ </li>
353
+ <li class="step">
354
+ <span class="step-number">3</span>
355
+ <div class="step-content">
356
+ <div class="step-title">Guide the motion</div>
357
+ <div class="step-body">After a 3-2-1 countdown, gently move Reachy Mini's head by hand. Marionette disables torque to give you full manual control, while encoder data and FK poses are recorded at 100 Hz.</div>
358
+ </div>
359
+ </li>
360
+ <li class="step">
361
+ <span class="step-number">4</span>
362
+ <div class="step-content">
363
+ <div class="step-title">Replay & share</div>
364
+ <div class="step-body">Review and refine each take directly in the app, then export it automatically to local_dataset/ using the Reachy Mini emotions format (JSON + WAV), ready to share or upload.</div>
365
+ </div>
366
+ </li>
367
+ </ol>
368
+ </div>
369
+
370
+ <div>
371
+ <video autoplay loop muted playsinline>
372
+ <source src="marionette/assets/reachy-mini-demo-marionette-dashboard.mp4" type="video/mp4" />
373
+ </video>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </section>
378
+
379
+ <!-- Footer -->
380
+ <footer>
381
+ <div class="container">
382
+ <div class="footer-grid">
383
+ <div class="footer-section">
384
+ <h4>Resources</h4>
385
+ <ul>
386
+ <li><a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" rel="noopener noreferrer">Read the Documentation</a></li>
387
+ <li><a href="https://github.com/pollen-robotics/reachy_mini/blob/develop/docs/troubleshooting.md" target="_blank" rel="noopener noreferrer">Troubleshooting & FAQ</a></li>
388
+ </ul>
389
+ </div>
390
+
391
+ <div class="footer-section">
392
+ <h4>Reachy Mini Apps</h4>
393
+ <ul>
394
+ <li><a href="https://hf.co/reachy-mini/#apps" target="_blank" rel="noopener noreferrer">Browse other apps</a></li>
395
+ <li><a href="https://huggingface.co/blog/pollen-robotics/make-and-publish-your-reachy-mini-apps" target="_blank" rel="noopener noreferrer">Make and publish your own app</a></li>
396
+ </ul>
397
+ </div>
398
+
399
+ <div class="footer-section">
400
+ <h4>Follow us</h4>
401
+ <div class="social-links">
402
+ <a href="https://discord.gg/2bAhWfXme9" target="_blank" rel="noopener noreferrer" aria-label="Discord" class="social-link">
403
+ <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
404
+ </a>
405
+ <a href="https://www.linkedin.com/company/pollen-robotics" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="social-link">
406
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg>
407
+ </a>
408
+ <a href="https://www.youtube.com/c/pollenrobotics" target="_blank" rel="noopener noreferrer" aria-label="YouTube" class="social-link">
409
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></svg>
410
+ </a>
411
+ <a href="https://github.com/pollen-robotics" target="_blank" rel="noopener noreferrer" aria-label="GitHub" class="social-link">
412
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
413
+ </a>
414
+ <a href="https://x.com/pollenrobotics" target="_blank" rel="noopener noreferrer" aria-label="X" class="social-link">
415
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/></svg>
416
+ </a>
417
+ </div>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="footer-credit">
422
+ Proudly brought by <a href="https://www.pollen-robotics.com/" target="_blank" rel="noopener noreferrer">Pollen Robotics</a> x 🤗 <a href="https://huggingface.co" target="_blank" rel="noopener noreferrer">Hugging Face</a>
423
+ </div>
424
+ </div>
425
+ </footer>
426
+
427
+ </body>
428
+ </html>