| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Hand Tracking App - Reachy Mini</title> |
| | <meta name="description" content="Control Reachy Mini's antennas with your hands using MediaPipe hand tracking technology."> |
| | <link rel="stylesheet" href="style.css"> |
| | </head> |
| | <body> |
| |
|
| | |
| | <section class="hero"> |
| | <div class="container"> |
| | <div class="hero-grid"> |
| | <div> |
| | <img src="assets/reachy-mini-hand-tracking.gif" alt="Hand Tracking Demo" class="hero-gif"> |
| | </div> |
| | |
| | <div class="hero-content"> |
| | <div class="hero-header"> |
| | <img src="assets/reachy-mini-waving.png" alt="Reachy Mini" class="hero-icon"> |
| | <h1 class="hero-title">Hand Tracking</h1> |
| | </div> |
| | |
| | <div class="tags"> |
| | <span class="tag">vision</span> |
| | <span class="tag">lite</span> |
| | <span class="tag">hands-tracking</span> |
| | <span class="tag">mediapipe</span> |
| | </div> |
| | |
| | <p class="hero-description"> |
| | Control <b>Reachy Mini’s head and antennas</b> using natural hand movements, powered by real-time hand tracking with MediaPipe. <br> |
| | Reachy Mini follows the position of your hand with its head, while the orientation of your fingers controls the antennas. |
| | </p> |
| | <p style="color: #b45309; background: #fef3c7; padding: 10px; border-radius: 6px;"> |
| | ⚠️ This application is available only on <b>Reachy Mini Lite.</b> |
| | </p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="technical"> |
| | <div class="container"> |
| | <div class="technical-grid"> |
| | <div> |
| | <h2 class="section-title">How it works</h2> |
| | |
| | <p class="section-text"> |
| | Simply place <strong>one or two hands</strong> in front of Reachy Mini’s camera. |
| | </p> |
| | |
| | <p class="section-text"> |
| | With <strong>one hand</strong>, Reachy Mini tracks your hand position with its head, and |
| | <strong>finger orientation controls both antennas together</strong>. |
| | </p> |
| | |
| | <p class="section-text"> |
| | With <strong>two hands</strong>, each hand controls one antenna independently |
| | </p> |
| |
|
| | <p class="section-text"> |
| | For best tracking results, keep your hands at least <strong>50 cm</strong> away from the robot’s camera. |
| | </p> |
| | |
| | |
| | <div class="section-text"> |
| | <span>From the UI, you can:</span> |
| | <ul style="padding-left: 1.2rem; margin-top: 0;"> |
| | <li>Enable or disable tracking features</li> |
| | <li>Select the preferred hand to track</li> |
| | <li>Change antenna behavior modes</li> |
| | <li>View the robot’s live camera feed in real time</li> |
| | </ul> |
| | </div> |
| | |
| | <h2 class="section-title" style="margin-top: 2rem;">How to install</h2> |
| | |
| | <ol class="install-steps"> |
| | <li> |
| | <span> |
| | Make sure you already have the |
| | <a href="https://github.com/pollen-robotics/reachy-mini-desktop-app/releases/latest" |
| | class="link-tertiary">dashboard</a> |
| | installed. |
| | </span> |
| | </li> |
| | <li> |
| | <span>Connect to your Reachy Mini using the dashboard.</span> |
| | </li> |
| | <li> |
| | <span>Navigate to the "Applications" tab in the dashboard.</span> |
| | </li> |
| | <li> |
| | <span>Find "Hand Tracking" in the list of available applications.</span> |
| | </li> |
| | <li> |
| | <span>Click "Install" and allow camera access when prompted.</span> |
| | </li> |
| | </ol> |
| | </div> |
| | |
| | |
| | <div> |
| | <img src="assets/reachy_mini_move_antenna.gif" alt="Dashboard Demo" class="demo-gif"> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="footer"> |
| | <div class="container"> |
| | <div class="footer-content"> |
| | <div class="footer-links"> |
| | <a href="https://huggingface.co/docs/reachy_mini/index" target="_blank" rel="noopener">> Documentation</a> |
| | <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini#apps" target="_blank" rel="noopener">> Browse other apps</a> |
| | <a href="https://huggingface.co/blog/pollen-robotics/make-and-publish-your-reachy-mini-apps" target="_blank" rel="noopener">> Make and publish your Reachy Mini app</a> |
| | </div> |
| | <p class="footer-help"> |
| | Need help? Contact us on <a href="https://discord.gg/2bAhWfXme9" target="_blank" rel="noopener">Discord</a> and join the community. |
| | Proudly brought by <a href="https://www.pollen-robotics.com/" target="_blank">Pollen Robotics</a> x 🤗 <a href="https://huggingface.co" target="_blank">Hugging Face</a> |
| | </p> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | </body> |
| | </html> |
