| <!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> |
| </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 |
| <a href="https://huggingface.co/reachy-mini#/download" |
| class="link-tertiary" target="_blank" rel="noopener noreferrer">Reachy Mini Control</a> |
| installed. |
| </span> |
| </li> |
| <li> |
| <span>Connect to your Reachy Mini.</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> |
