File size: 5,187 Bytes
49c6bc2 30b3fa6 49c6bc2 30b3fa6 49c6bc2 1b5177c 49c6bc2 1b5177c 49c6bc2 1b5177c 49c6bc2 1b5177c 49c6bc2 1b5177c 49c6bc2 1b5177c 49c6bc2 1b5177c 49c6bc2 1b5177c 49c6bc2 1b5177c 49c6bc2 3f47979 49c6bc2 30b3fa6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
<!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>
<!-- Hero Section -->
<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>
<!-- Technical 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 -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-links">
<a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" rel="noopener">> Documentation</a>
<a href="https://huggingface.co/spaces/pollen-robotics/Reachy-Mini_Best_Spaces" 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/u3QtUBhy" 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> |