Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Rock Paper Scissors - Reachy Mini App</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| color: #333; | |
| } | |
| .container { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| padding: 40px 20px; | |
| } | |
| header { | |
| text-align: center; | |
| color: white; | |
| margin-bottom: 40px; | |
| } | |
| .emoji-title { | |
| font-size: 4rem; | |
| margin-bottom: 10px; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 10px; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.2); | |
| } | |
| .subtitle { | |
| font-size: 1.2rem; | |
| opacity: 0.9; | |
| } | |
| .card { | |
| background: white; | |
| border-radius: 16px; | |
| padding: 30px; | |
| margin-bottom: 24px; | |
| box-shadow: 0 10px 40px rgba(0,0,0,0.1); | |
| } | |
| .card h2 { | |
| color: #667eea; | |
| margin-bottom: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .card h2 .icon { | |
| font-size: 1.5rem; | |
| } | |
| .features { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .feature { | |
| text-align: center; | |
| padding: 20px; | |
| background: #f8f9ff; | |
| border-radius: 12px; | |
| } | |
| .feature .icon { | |
| font-size: 2.5rem; | |
| margin-bottom: 10px; | |
| } | |
| .feature h3 { | |
| color: #667eea; | |
| margin-bottom: 8px; | |
| } | |
| .feature p { | |
| color: #666; | |
| font-size: 0.9rem; | |
| } | |
| .steps { | |
| counter-reset: step; | |
| } | |
| .step { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| padding: 20px; | |
| background: #f8f9ff; | |
| border-radius: 12px; | |
| } | |
| .step-number { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| flex-shrink: 0; | |
| } | |
| .step-content h3 { | |
| color: #333; | |
| margin-bottom: 5px; | |
| } | |
| .step-content p { | |
| color: #666; | |
| } | |
| .gestures { | |
| display: flex; | |
| justify-content: center; | |
| gap: 40px; | |
| margin: 30px 0; | |
| } | |
| .gesture { | |
| text-align: center; | |
| } | |
| .gesture .icon { | |
| font-size: 4rem; | |
| display: block; | |
| margin-bottom: 10px; | |
| } | |
| .gesture .name { | |
| font-weight: bold; | |
| color: #667eea; | |
| } | |
| pre { | |
| background: #1e1e1e; | |
| color: #d4d4d4; | |
| padding: 20px; | |
| border-radius: 8px; | |
| overflow-x: auto; | |
| font-size: 0.9rem; | |
| } | |
| code { | |
| font-family: 'Monaco', 'Menlo', monospace; | |
| } | |
| .tech-stack { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-top: 15px; | |
| } | |
| .tech-badge { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| font-size: 0.9rem; | |
| } | |
| .links { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .links a { | |
| color: #667eea; | |
| text-decoration: none; | |
| padding: 10px 20px; | |
| border: 2px solid #667eea; | |
| border-radius: 8px; | |
| transition: all 0.3s; | |
| } | |
| .links a:hover { | |
| background: #667eea; | |
| color: white; | |
| } | |
| .state-diagram { | |
| background: #f8f9ff; | |
| padding: 20px; | |
| border-radius: 12px; | |
| text-align: center; | |
| font-family: monospace; | |
| line-height: 1.8; | |
| } | |
| .state-diagram .state { | |
| display: inline-block; | |
| background: #667eea; | |
| color: white; | |
| padding: 5px 15px; | |
| border-radius: 20px; | |
| margin: 5px; | |
| } | |
| .state-diagram .arrow { | |
| color: #999; | |
| } | |
| footer { | |
| text-align: center; | |
| color: white; | |
| margin-top: 40px; | |
| opacity: 0.8; | |
| } | |
| footer a { | |
| color: white; | |
| } | |
| @media (max-width: 600px) { | |
| .emoji-title { | |
| font-size: 3rem; | |
| } | |
| h1 { | |
| font-size: 1.8rem; | |
| } | |
| .gestures { | |
| gap: 20px; | |
| } | |
| .gesture .icon { | |
| font-size: 3rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="emoji-title">✊ ✌️ ✋</div> | |
| <h1>Rock Paper Scissors</h1> | |
| <p class="subtitle">A gesture-based game for Reachy Mini robot</p> | |
| </header> | |
| <div class="card"> | |
| <h2><span class="icon">🎮</span> About This App</h2> | |
| <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> | |
| <div class="features"> | |
| <div class="feature"> | |
| <div class="icon">🖐️</div> | |
| <h3>Gesture Recognition</h3> | |
| <p>Real-time hand detection using MediaPipe</p> | |
| </div> | |
| <div class="feature"> | |
| <div class="icon">🔊</div> | |
| <h3>Audio Feedback</h3> | |
| <p>R2-D2 style sound effects</p> | |
| </div> | |
| <div class="feature"> | |
| <div class="icon">🤖</div> | |
| <h3>Robot Animations</h3> | |
| <p>Expressive head and antenna movements</p> | |
| </div> | |
| <div class="feature"> | |
| <div class="icon">🌐</div> | |
| <h3>Web Interface</h3> | |
| <p>Real-time status display for debugging</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h2><span class="icon">🎯</span> How to Play</h2> | |
| <div class="steps"> | |
| <div class="step"> | |
| <div class="step-number">1</div> | |
| <div class="step-content"> | |
| <h3>Wave to Start</h3> | |
| <p>Wave your hand at Reachy Mini's camera to begin the game</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">2</div> | |
| <div class="step-content"> | |
| <h3>Countdown</h3> | |
| <p>Count down together with the robot: 3, 2, 1...</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">3</div> | |
| <div class="step-content"> | |
| <h3>Show Your Gesture</h3> | |
| <p>Display Rock, Paper, or Scissors when the countdown ends</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">4</div> | |
| <div class="step-content"> | |
| <h3>See the Result</h3> | |
| <p>Win, lose, or draw is shown with animations and sounds!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="gestures"> | |
| <div class="gesture"> | |
| <span class="icon">✊</span> | |
| <span class="name">Rock</span> | |
| </div> | |
| <div class="gesture"> | |
| <span class="icon">✌️</span> | |
| <span class="name">Scissors</span> | |
| </div> | |
| <div class="gesture"> | |
| <span class="icon">✋</span> | |
| <span class="name">Paper</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h2><span class="icon">📦</span> Installation</h2> | |
| <h3 style="margin: 20px 0 10px;">Prerequisites</h3> | |
| <ul style="margin-left: 20px; color: #666;"> | |
| <li>Python 3.10 or higher</li> | |
| <li>Reachy Mini SDK</li> | |
| <li>Camera device</li> | |
| </ul> | |
| <h3 style="margin: 20px 0 10px;">Quick Start</h3> | |
| <pre><code># Clone the repository | |
| git clone https://huggingface.co/spaces/trtd56/rock_paper_scissors | |
| # Navigate to directory | |
| cd rock_paper_scissors | |
| # Install | |
| pip install -e . | |
| # Run with Reachy Mini | |
| reachy-mini run rock_paper_scissors</code></pre> | |
| <p style="margin-top: 15px; color: #666;"> | |
| <strong>Note:</strong> The MediaPipe model is automatically downloaded on first run. | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <h2><span class="icon">🔄</span> Game States</h2> | |
| <div class="state-diagram"> | |
| <span class="state">IDLE</span> | |
| <span class="arrow">→ wave →</span> | |
| <span class="state">COUNTDOWN</span> | |
| <span class="arrow">→ 3,2,1 →</span> | |
| <span class="state">DETECT</span> | |
| <span class="arrow">→ gesture →</span> | |
| <span class="state">RESULT</span> | |
| <span class="arrow">→</span> | |
| <span class="state">IDLE</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h2><span class="icon">🛠️</span> Tech Stack</h2> | |
| <div class="tech-stack"> | |
| <span class="tech-badge">Reachy Mini SDK</span> | |
| <span class="tech-badge">MediaPipe</span> | |
| <span class="tech-badge">NumPy</span> | |
| <span class="tech-badge">Pydantic</span> | |
| <span class="tech-badge">Python 3.10+</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h2><span class="icon">🔗</span> Resources</h2> | |
| <div class="links"> | |
| <a href="https://docs.pollen-robotics.com/reachy-mini/" target="_blank">Reachy Mini Docs</a> | |
| <a href="https://developers.google.com/mediapipe/solutions/vision/hand_landmarker" target="_blank">MediaPipe Hand Landmarker</a> | |
| <a href="https://huggingface.co/blog/pollen-robotics/make-and-publish-your-reachy-mini-apps" target="_blank">Publishing Guide</a> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>Made with ❤️ for Reachy Mini</p> | |
| <p style="margin-top: 10px;"> | |
| <a href="https://github.com/pollen-robotics/reachy-mini" target="_blank">GitHub</a> | |
| </p> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> | |