Hugging Face's logo

Spaces:
trtd56
/
rock_paper_scissors
Running

App Files Community
trtd56 commited on
Commit
db60adf
·
1 Parent(s): 16172a3

Add landing page for Hugging Face Spaces

Browse files
Files changed (1) hide show
  1. index.html +413 -18
index.html CHANGED
@@ -1,19 +1,414 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </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>Rock Paper Scissors - Reachy Mini App</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
16
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17
+ min-height: 100vh;
18
+ color: #333;
19
+ }
20
+
21
+ .container {
22
+ max-width: 900px;
23
+ margin: 0 auto;
24
+ padding: 40px 20px;
25
+ }
26
+
27
+ header {
28
+ text-align: center;
29
+ color: white;
30
+ margin-bottom: 40px;
31
+ }
32
+
33
+ .emoji-title {
34
+ font-size: 4rem;
35
+ margin-bottom: 10px;
36
+ }
37
+
38
+ h1 {
39
+ font-size: 2.5rem;
40
+ margin-bottom: 10px;
41
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
42
+ }
43
+
44
+ .subtitle {
45
+ font-size: 1.2rem;
46
+ opacity: 0.9;
47
+ }
48
+
49
+ .card {
50
+ background: white;
51
+ border-radius: 16px;
52
+ padding: 30px;
53
+ margin-bottom: 24px;
54
+ box-shadow: 0 10px 40px rgba(0,0,0,0.1);
55
+ }
56
+
57
+ .card h2 {
58
+ color: #667eea;
59
+ margin-bottom: 20px;
60
+ display: flex;
61
+ align-items: center;
62
+ gap: 10px;
63
+ }
64
+
65
+ .card h2 .icon {
66
+ font-size: 1.5rem;
67
+ }
68
+
69
+ .features {
70
+ display: grid;
71
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
72
+ gap: 20px;
73
+ margin-top: 20px;
74
+ }
75
+
76
+ .feature {
77
+ text-align: center;
78
+ padding: 20px;
79
+ background: #f8f9ff;
80
+ border-radius: 12px;
81
+ }
82
+
83
+ .feature .icon {
84
+ font-size: 2.5rem;
85
+ margin-bottom: 10px;
86
+ }
87
+
88
+ .feature h3 {
89
+ color: #667eea;
90
+ margin-bottom: 8px;
91
+ }
92
+
93
+ .feature p {
94
+ color: #666;
95
+ font-size: 0.9rem;
96
+ }
97
+
98
+ .steps {
99
+ counter-reset: step;
100
+ }
101
+
102
+ .step {
103
+ display: flex;
104
+ align-items: flex-start;
105
+ gap: 20px;
106
+ margin-bottom: 20px;
107
+ padding: 20px;
108
+ background: #f8f9ff;
109
+ border-radius: 12px;
110
+ }
111
+
112
+ .step-number {
113
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
114
+ color: white;
115
+ width: 40px;
116
+ height: 40px;
117
+ border-radius: 50%;
118
+ display: flex;
119
+ align-items: center;
120
+ justify-content: center;
121
+ font-weight: bold;
122
+ flex-shrink: 0;
123
+ }
124
+
125
+ .step-content h3 {
126
+ color: #333;
127
+ margin-bottom: 5px;
128
+ }
129
+
130
+ .step-content p {
131
+ color: #666;
132
+ }
133
+
134
+ .gestures {
135
+ display: flex;
136
+ justify-content: center;
137
+ gap: 40px;
138
+ margin: 30px 0;
139
+ }
140
+
141
+ .gesture {
142
+ text-align: center;
143
+ }
144
+
145
+ .gesture .icon {
146
+ font-size: 4rem;
147
+ display: block;
148
+ margin-bottom: 10px;
149
+ }
150
+
151
+ .gesture .name {
152
+ font-weight: bold;
153
+ color: #667eea;
154
+ }
155
+
156
+ pre {
157
+ background: #1e1e1e;
158
+ color: #d4d4d4;
159
+ padding: 20px;
160
+ border-radius: 8px;
161
+ overflow-x: auto;
162
+ font-size: 0.9rem;
163
+ }
164
+
165
+ code {
166
+ font-family: 'Monaco', 'Menlo', monospace;
167
+ }
168
+
169
+ .tech-stack {
170
+ display: flex;
171
+ flex-wrap: wrap;
172
+ gap: 10px;
173
+ margin-top: 15px;
174
+ }
175
+
176
+ .tech-badge {
177
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
178
+ color: white;
179
+ padding: 8px 16px;
180
+ border-radius: 20px;
181
+ font-size: 0.9rem;
182
+ }
183
+
184
+ .links {
185
+ display: flex;
186
+ flex-wrap: wrap;
187
+ gap: 15px;
188
+ margin-top: 20px;
189
+ }
190
+
191
+ .links a {
192
+ color: #667eea;
193
+ text-decoration: none;
194
+ padding: 10px 20px;
195
+ border: 2px solid #667eea;
196
+ border-radius: 8px;
197
+ transition: all 0.3s;
198
+ }
199
+
200
+ .links a:hover {
201
+ background: #667eea;
202
+ color: white;
203
+ }
204
+
205
+ .state-diagram {
206
+ background: #f8f9ff;
207
+ padding: 20px;
208
+ border-radius: 12px;
209
+ text-align: center;
210
+ font-family: monospace;
211
+ line-height: 1.8;
212
+ }
213
+
214
+ .state-diagram .state {
215
+ display: inline-block;
216
+ background: #667eea;
217
+ color: white;
218
+ padding: 5px 15px;
219
+ border-radius: 20px;
220
+ margin: 5px;
221
+ }
222
+
223
+ .state-diagram .arrow {
224
+ color: #999;
225
+ }
226
+
227
+ footer {
228
+ text-align: center;
229
+ color: white;
230
+ margin-top: 40px;
231
+ opacity: 0.8;
232
+ }
233
+
234
+ footer a {
235
+ color: white;
236
+ }
237
+
238
+ @media (max-width: 600px) {
239
+ .emoji-title {
240
+ font-size: 3rem;
241
+ }
242
+
243
+ h1 {
244
+ font-size: 1.8rem;
245
+ }
246
+
247
+ .gestures {
248
+ gap: 20px;
249
+ }
250
+
251
+ .gesture .icon {
252
+ font-size: 3rem;
253
+ }
254
+ }
255
+ </style>
256
+ </head>
257
+ <body>
258
+ <div class="container">
259
+ <header>
260
+ <div class="emoji-title">✊ ✌️ ✋</div>
261
+ <h1>Rock Paper Scissors</h1>
262
+ <p class="subtitle">A gesture-based game for Reachy Mini robot</p>
263
+ </header>
264
+
265
+ <div class="card">
266
+ <h2><span class="icon">🎮</span> About This App</h2>
267
+ <p>An intuitive rock-paper-scissors game designed for children. Play using only <strong>gestures, sounds, and movements</strong> - no screen or language dependency required.</p>
268
+
269
+ <div class="features">
270
+ <div class="feature">
271
+ <div class="icon">🖐️</div>
272
+ <h3>Gesture Recognition</h3>
273
+ <p>Real-time hand detection using MediaPipe</p>
274
+ </div>
275
+ <div class="feature">
276
+ <div class="icon">🔊</div>
277
+ <h3>Audio Feedback</h3>
278
+ <p>R2-D2 style sound effects</p>
279
+ </div>
280
+ <div class="feature">
281
+ <div class="icon">🤖</div>
282
+ <h3>Robot Animations</h3>
283
+ <p>Expressive head and antenna movements</p>
284
+ </div>
285
+ <div class="feature">
286
+ <div class="icon">🌐</div>
287
+ <h3>Web Interface</h3>
288
+ <p>Real-time status display for debugging</p>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <div class="card">
294
+ <h2><span class="icon">🎯</span> How to Play</h2>
295
+
296
+ <div class="steps">
297
+ <div class="step">
298
+ <div class="step-number">1</div>
299
+ <div class="step-content">
300
+ <h3>Wave to Start</h3>
301
+ <p>Wave your hand at Reachy Mini's camera to begin the game</p>
302
+ </div>
303
+ </div>
304
+ <div class="step">
305
+ <div class="step-number">2</div>
306
+ <div class="step-content">
307
+ <h3>Countdown</h3>
308
+ <p>Count down together with the robot: 3, 2, 1...</p>
309
+ </div>
310
+ </div>
311
+ <div class="step">
312
+ <div class="step-number">3</div>
313
+ <div class="step-content">
314
+ <h3>Show Your Gesture</h3>
315
+ <p>Display Rock, Paper, or Scissors when the countdown ends</p>
316
+ </div>
317
+ </div>
318
+ <div class="step">
319
+ <div class="step-number">4</div>
320
+ <div class="step-content">
321
+ <h3>See the Result</h3>
322
+ <p>Win, lose, or draw is shown with animations and sounds!</p>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <div class="gestures">
328
+ <div class="gesture">
329
+ <span class="icon">✊</span>
330
+ <span class="name">Rock</span>
331
+ </div>
332
+ <div class="gesture">
333
+ <span class="icon">✌️</span>
334
+ <span class="name">Scissors</span>
335
+ </div>
336
+ <div class="gesture">
337
+ <span class="icon">✋</span>
338
+ <span class="name">Paper</span>
339
+ </div>
340
+ </div>
341
+ </div>
342
+
343
+ <div class="card">
344
+ <h2><span class="icon">📦</span> Installation</h2>
345
+
346
+ <h3 style="margin: 20px 0 10px;">Prerequisites</h3>
347
+ <ul style="margin-left: 20px; color: #666;">
348
+ <li>Python 3.10 or higher</li>
349
+ <li>Reachy Mini SDK</li>
350
+ <li>Camera device</li>
351
+ </ul>
352
+
353
+ <h3 style="margin: 20px 0 10px;">Quick Start</h3>
354
+ <pre><code># Clone the repository
355
+ git clone https://huggingface.co/spaces/trtd56/rock_paper_scissors
356
+
357
+ # Navigate to directory
358
+ cd rock_paper_scissors
359
+
360
+ # Install
361
+ pip install -e .
362
+
363
+ # Run with Reachy Mini
364
+ reachy-mini run rock_paper_scissors</code></pre>
365
+
366
+ <p style="margin-top: 15px; color: #666;">
367
+ <strong>Note:</strong> The MediaPipe model is automatically downloaded on first run.
368
+ </p>
369
+ </div>
370
+
371
+ <div class="card">
372
+ <h2><span class="icon">🔄</span> Game States</h2>
373
+ <div class="state-diagram">
374
+ <span class="state">IDLE</span>
375
+ <span class="arrow">→ wave →</span>
376
+ <span class="state">COUNTDOWN</span>
377
+ <span class="arrow">→ 3,2,1 →</span>
378
+ <span class="state">DETECT</span>
379
+ <span class="arrow">→ gesture →</span>
380
+ <span class="state">RESULT</span>
381
+ <span class="arrow">→</span>
382
+ <span class="state">IDLE</span>
383
+ </div>
384
+ </div>
385
+
386
+ <div class="card">
387
+ <h2><span class="icon">🛠️</span> Tech Stack</h2>
388
+ <div class="tech-stack">
389
+ <span class="tech-badge">Reachy Mini SDK</span>
390
+ <span class="tech-badge">MediaPipe</span>
391
+ <span class="tech-badge">NumPy</span>
392
+ <span class="tech-badge">Pydantic</span>
393
+ <span class="tech-badge">Python 3.10+</span>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="card">
398
+ <h2><span class="icon">🔗</span> Resources</h2>
399
+ <div class="links">
400
+ <a href="https://docs.pollen-robotics.com/reachy-mini/" target="_blank">Reachy Mini Docs</a>
401
+ <a href="https://developers.google.com/mediapipe/solutions/vision/hand_landmarker" target="_blank">MediaPipe Hand Landmarker</a>
402
+ <a href="https://huggingface.co/blog/pollen-robotics/make-and-publish-your-reachy-mini-apps" target="_blank">Publishing Guide</a>
403
+ </div>
404
+ </div>
405
+
406
+ <footer>
407
+ <p>Made with ❤️ for Reachy Mini</p>
408
+ <p style="margin-top: 10px;">
409
+ <a href="https://github.com/pollen-robotics/reachy-mini" target="_blank">GitHub</a>
410
+ </p>
411
+ </footer>
412
+ </div>
413
+ </body>
414
  </html>