Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Reachy F1 Commentator - Interactive Race Commentary for Reachy Mini</title> | |
| <meta name="description" content="An interactive F1 race commentary system for Reachy Mini that generates organic, context-rich commentary with audio synthesis and synchronized robot movements."> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <h1>🏎️ Reachy F1 Commentator</h1> | |
| <p class="tagline">Bring Formula 1 races to life with your Reachy Mini robot</p> | |
| </div> | |
| </div> | |
| </header> | |
| <main> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <h2>Interactive Race Commentary Meets Robotics</h2> | |
| <p class="lead">Transform your Reachy Mini into an enthusiastic F1 commentator with organic, context-rich commentary, synchronized movements, and professional audio synthesis.</p> | |
| <div class="cta-buttons"> | |
| <a href="#installation" class="btn btn-primary">Get Started</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="video-demo"> | |
| <div class="container"> | |
| <h2>See It In Action</h2> | |
| <div class="video-wrapper"> | |
| <iframe | |
| width="560" | |
| height="315" | |
| src="https://www.youtube.com/embed/lnIk2DD-noM" | |
| title="Reachy F1 Commentator Demo" | |
| frameborder="0" | |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" | |
| allowfullscreen> | |
| </iframe> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="features"> | |
| <div class="container"> | |
| <h2>Features</h2> | |
| <div class="feature-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🎙️</div> | |
| <h3>Enhanced Organic Commentary</h3> | |
| <p>210 unique templates with 5 excitement levels and 5 perspectives (technical, strategic, dramatic, positional, historical) for natural-sounding commentary that never repeats.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🏁</div> | |
| <h3>Quick Demo Mode</h3> | |
| <p>2-3 minute pre-configured demonstration perfect for showcasing. No internet required - includes overtakes, pit stops, fastest laps, and incidents.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon">📊</div> | |
| <h3>Full Historical Race Mode</h3> | |
| <p>Replay any F1 race from 2023-2025 using real data from the OpenF1 API. <strong>China 2025</strong> is recommended as it has complete telemetry (221 overtakes, 25 pit stops). Note: Not all races have full data available.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🔊</div> | |
| <h3>Professional Audio Synthesis</h3> | |
| <p>ElevenLabs text-to-speech integration with streaming audio for natural, expressive commentary that plays through Reachy's speakers.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🤖</div> | |
| <h3>Synchronized Robot Movements</h3> | |
| <p>Reachy's head movements are perfectly synchronized with commentary excitement levels, creating an engaging and lifelike presentation.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🌐</div> | |
| <h3>Intuitive Web Interface</h3> | |
| <p>Browser-based control panel for race selection, playback speed (1x-20x), and configuration. Easy to use, no command-line required.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="how-it-works"> | |
| <div class="container"> | |
| <h2>How It Works</h2> | |
| <div class="workflow"> | |
| <div class="workflow-step"> | |
| <div class="step-number">1</div> | |
| <h3>Select Your Race</h3> | |
| <p>Choose from Quick Demo mode or browse historical F1 races from 2023-2025. <strong>Try China 2025 for the best experience</strong> - it has complete telemetry data with 221 overtakes and 25 pit stops. Configure your preferred playback speed (1x-20x).</p> | |
| </div> | |
| <div class="workflow-step"> | |
| <div class="step-number">2</div> | |
| <h3>AI-Powered Commentary Generation</h3> | |
| <p>The system analyzes race events in real-time, enriches context from multiple data sources, and generates organic commentary using 210 unique templates.</p> | |
| </div> | |
| <div class="workflow-step"> | |
| <div class="step-number">3</div> | |
| <h3>Audio Synthesis & Robot Control</h3> | |
| <p>Commentary is converted to natural speech via ElevenLabs, streamed to Reachy's speakers, and synchronized with expressive head movements.</p> | |
| </div> | |
| <div class="workflow-step"> | |
| <div class="step-number">4</div> | |
| <h3>Live Commentary Experience</h3> | |
| <p>Watch as Reachy brings the race to life with dynamic commentary, tracking overtakes, pit stops, fastest laps, and dramatic moments.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="commentary-examples"> | |
| <div class="container"> | |
| <h2>Commentary Variations</h2> | |
| <p class="section-intro">Every event has multiple commentary variations with different excitement levels and perspectives:</p> | |
| <div class="examples-showcase"> | |
| <h3>Example: Overtake for P1</h3> | |
| <div class="example-box"> | |
| <p>"Fantastic overtake by Hamilton on Verstappen, now in P1!"</p> | |
| <p>"There it is! Hamilton takes the lead from Verstappen!"</p> | |
| <p>"Hamilton makes a brilliant move on Verstappen for P1!"</p> | |
| <p>"And Hamilton is through! That's P1 now for Hamilton!"</p> | |
| </div> | |
| <p class="note">210 unique templates across 5 excitement levels and 5 perspectives ensure fresh, natural-sounding commentary throughout the race</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="technical-highlights"> | |
| <div class="container"> | |
| <h2>Technical Highlights</h2> | |
| <div class="tech-grid"> | |
| <div class="tech-item"> | |
| <h4>Context Enrichment</h4> | |
| <p>Pulls data from multiple OpenF1 API endpoints to create rich, contextual commentary with driver stats, team info, and race history.</p> | |
| </div> | |
| <div class="tech-item"> | |
| <h4>Narrative Tracking</h4> | |
| <p>Detects ongoing battles, comebacks, and strategy divergence to create compelling story arcs throughout the race.</p> | |
| </div> | |
| <div class="tech-item"> | |
| <h4>Frequency Controls</h4> | |
| <p>Intelligent tracking prevents repetitive content patterns, ensuring fresh commentary throughout long races.</p> | |
| </div> | |
| <div class="tech-item"> | |
| <h4>Event Prioritization</h4> | |
| <p>Significance scoring with context bonuses ensures the most important moments get the attention they deserve.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="installation" class="installation"> | |
| <div class="container"> | |
| <h2>Installation</h2> | |
| <div class="install-methods"> | |
| <div class="install-card primary"> | |
| <h3>🎯 Via Reachy Dashboard (Recommended)</h3> | |
| <ol class="install-steps"> | |
| <li>Open your Reachy Mini dashboard at <code>http://reachy-mini:8000</code></li> | |
| <li>Navigate to the <strong>Apps</strong> section</li> | |
| <li>Find <strong>Reachy F1 Commentator</strong> in the app store</li> | |
| <li>Click <strong>Install</strong> - all dependencies are handled automatically</li> | |
| </ol> | |
| <p class="method-note">✨ The easiest way to install - one-click installation with automatic dependency management.</p> | |
| </div> | |
| <div class="install-card"> | |
| <h3>Via Reachy Mini App Assistant</h3> | |
| <div class="code-block"> | |
| <code>reachy-mini-app-assistant install reachy-f1-commentator</code> | |
| </div> | |
| <p class="method-note">Command-line installation for users who prefer terminal access.</p> | |
| </div> | |
| <div class="install-card"> | |
| <h3>Manual Installation (Advanced)</h3> | |
| <div class="code-block"> | |
| <code>pip install git+https://huggingface.co/spaces/d10g/reachy-f1-commentator</code> | |
| </div> | |
| <p class="method-note">For advanced users or custom installations.</p> | |
| </div> | |
| </div> | |
| <div class="requirements"> | |
| <h3>Requirements</h3> | |
| <ul> | |
| <li><strong>Reachy Mini</strong> robot (or simulation mode for development)</li> | |
| <li><strong>Python 3.9+</strong></li> | |
| <li><strong>ElevenLabs API Key</strong> for audio synthesis (<a href="https://elevenlabs.io/" target="_blank">sign up here</a>)</li> | |
| <li><strong>Internet Connection</strong> for Full Historical Race mode</li> | |
| </ul> | |
| <p class="note"><em>💡 Tip: Start with <strong>China 2025</strong> for the best historical race experience - it has complete overtake, pit stop, and race control data.</em></p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="usage"> | |
| <div class="container"> | |
| <h2>Quick Start</h2> | |
| <div class="usage-steps"> | |
| <div class="usage-step"> | |
| <h3>1. Launch the App</h3> | |
| <p>Start from the Reachy Mini dashboard or run directly:</p> | |
| <div class="code-block"> | |
| <code>python -m reachy_f1_commentator.main</code> | |
| </div> | |
| </div> | |
| <div class="usage-step"> | |
| <h3>2. Open Web Interface</h3> | |
| <p>Navigate to <code>http://reachy-mini:8080</code> in your browser to access the control panel.</p> | |
| </div> | |
| <div class="usage-step"> | |
| <h3>3. Configure & Start</h3> | |
| <p>Enter your ElevenLabs API key, select a race or demo mode, choose playback speed, and hit Start Commentary!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="architecture"> | |
| <div class="container"> | |
| <h2>Architecture</h2> | |
| <p class="section-intro">Built with modern Python and designed for extensibility:</p> | |
| <div class="arch-diagram"> | |
| <div class="arch-layer"> | |
| <h4>Web Interface</h4> | |
| <p>FastAPI + HTML/CSS/JS</p> | |
| </div> | |
| <div class="arch-arrow">↓</div> | |
| <div class="arch-layer"> | |
| <h4>Commentary Engine</h4> | |
| <p>Template Library + Context Enricher + Narrative Tracker</p> | |
| </div> | |
| <div class="arch-arrow">↓</div> | |
| <div class="arch-layer"> | |
| <h4>Output Layer</h4> | |
| <p>Speech Synthesizer + Motion Controller</p> | |
| </div> | |
| <div class="arch-arrow">↓</div> | |
| <div class="arch-layer"> | |
| <h4>Reachy Mini</h4> | |
| <p>Audio Playback + Head Movements</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="credits"> | |
| <div class="container"> | |
| <h2>Credits & Acknowledgments</h2> | |
| <div class="credits-grid"> | |
| <div class="credit-item"> | |
| <h4>Pollen Robotics</h4> | |
| <p>Reachy Mini platform and SDK</p> | |
| </div> | |
| <div class="credit-item"> | |
| <h4>Hugging Face</h4> | |
| <p>App hosting and distribution</p> | |
| </div> | |
| <div class="credit-item"> | |
| <h4>OpenF1</h4> | |
| <p>Historical race data API</p> | |
| </div> | |
| <div class="credit-item"> | |
| <h4>ElevenLabs</h4> | |
| <p>Text-to-speech synthesis</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="cta-final"> | |
| <div class="container"> | |
| <h2>Ready to Get Started?</h2> | |
| <p>Install Reachy F1 Commentator today and bring Formula 1 races to life with your robot!</p> | |
| <div class="cta-buttons"> | |
| <a href="#installation" class="btn btn-primary">Install Now</a> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="container"> | |
| <p>Reachy F1 Commentator - MIT License</p> | |
| <p>Built with ❤️ for the Reachy Mini community</p> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> | |