Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Face Tracker</title> | |
| <link rel="stylesheet" href="style.css"/> | |
| </head> | |
| <body> | |
| <nav> | |
| <a href="#" class="nav-brand"><span class="dot"></span> jrubiosainz</a> | |
| <div class="nav-links"> | |
| <a href="#features">Features</a> | |
| <a href="#install">Install</a> | |
| <a href="https://huggingface.co/reachy-mini#/apps">App Store</a> | |
| </div> | |
| </nav> | |
| <section class="hero"> | |
| <div class="badge">Reachy Mini App</div> | |
| <h1>👤 Face Tracker</h1> | |
| <p class="tagline">Your robot smoothly follows your face and reacts to how close you are.</p> | |
| </section> | |
| <div class="video-showcase"> | |
| <div class="video-frame"> | |
| <video autoplay loop muted playsinline> | |
| <source src="demo.mp4" type="video/mp4"> | |
| </video> | |
| </div> | |
| <p class="video-label">MuJoCo simulator — face detection with proximity-based emotions</p> | |
| </div> | |
| <section class="features" id="features"> | |
| <h2>Features</h2> | |
| <p class="subtitle">What makes this app tick</p> | |
| <div class="feature-grid"> | |
| <div class="feature-card"> | |
| <div class="icon">👁️</div> | |
| <h3>Smooth Tracking</h3> | |
| <p>MediaPipe face detection with exponential smoothing. Natural, non-jittery head movement that feels alive.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon">📏</div> | |
| <h3>Proximity Emotions</h3> | |
| <p>Close up = happy greeting. Arm's length = curious attention. Walk away = lonely drift. No face = idle wander.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="icon">🎯</div> | |
| <h3>Smart Focus</h3> | |
| <p>Tracks the closest and largest face. Handles multiple people gracefully — always knows who to look at.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="install" id="install"> | |
| <h2>Get Started</h2> | |
| <div class="steps"> | |
| <div class="step"> | |
| <div class="step-num">1</div> | |
| <div><h4>Open Dashboard</h4><p>Go to your Reachy Mini control dashboard and browse apps.</p></div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-num">2</div> | |
| <div><h4>Install</h4><p>Search for "Face Tracker" and click Install. Dependencies are handled automatically.</p></div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-num">3</div> | |
| <div><h4>Launch</h4><p>Start the app and watch your robot come alive.</p></div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| 👤 Face Tracker · Built by <a href="https://huggingface.co/jrubiosainz">jrubiosainz</a> · <a href="https://huggingface.co/reachy-mini#/apps">Browse More Apps</a> | |
| </footer> | |
| </body> | |
| </html> |