Hugging Face's logo

Spaces:
robertkeus
/
reachys-brain
Running

App Files Community
1
reachys-brain / index.html
robertkeus's picture
robertkeus
Remove View Source button
cdad595 verified
raw
history blame contribute delete
41.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Reachy's Brain</title>
 <link rel="stylesheet" href="style.css">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700;800&family=Nunito:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
 <div class="page-wrapper">
 <!-- Navigation -->
 <nav class="nav">
 <div class="nav-brand">
 <img src="logo.png" alt="Reachy's Brain" class="nav-logo-img">
 <span class="nav-title">Reachy's Brain</span>
 </div>
 <div class="nav-links">
 <a href="#features">Features</a>
 <a href="features.html">Full Guide</a>
 <a href="#getting-started">Setup</a>
 <a href="#api">Bridge API</a>
 </div>
 </nav>
<!-- Hero Section -->
 <header class="hero">
 <div class="hero-content">
 <div class="hero-badge">Reachy Mini App</div>
 <h1>Reachy's Brain</h1>
 <p class="hero-tagline">Turn your iPhone into the brain for Reachy Mini</p>
 <p class="hero-description">
 Control your Reachy Mini from your iPhone. Voice conversations, animations,
weather, web search, vision, and more — all processed on the robot.
 </p>
 <div class="hero-actions">
 <a href="#getting-started" class="btn btn-primary">Get Started</a>
 </div>
 </div>
 <div class="hero-visual">
 <div class="hero-logo-container">
 <img src="logo.png" alt="Reachy's Brain" class="hero-logo">
 </div>
 </div>
 </header>
<!-- Features Section -->
 <section id="features" class="section">
 <div class="section-header">
 <h2>Features</h2>
 <p>Everything you need for natural robot conversations</p>
 </div>
 <div class="features-grid">
 <div class="feature-card">
 <div class="feature-icon">🗣️</div>
 <h3>Natural Speech</h3>
 <p>OpenAI TTS with 8 expressive voices. Multilingual support for conversations in any language.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">💬</div>
 <h3>Real-time Voice</h3>
 <p>OpenAI Realtime API for fluid, interruption-aware conversations with sub-second latency.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">🎭</div>
 <h3>Expressive Animations</h3>
 <p>Head movements, gestures, and emotional expressions that bring Reachy to life.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">🎬</div>
 <h3>Animation Recording</h3>
 <p>Record custom animations by moving Reachy's head. Save and replay your creations.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">🛠️</div>
 <h3>Built-in Tools</h3>
 <p>Weather forecasts, news updates, web search, current time, and camera vision for smart interactions.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">📷</div>
 <h3>Vision & Camera</h3>
 <p>Reachy can see and describe what's in front of it using the built-in camera.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">⏰</div>
 <h3>iOS Reminders</h3>
 <p>Create and manage reminders on your iPhone through voice commands. Never forget important tasks.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">📝</div>
 <h3>Notes</h3>
 <p>Capture thoughts and ideas instantly. Dictate notes to Reachy and save them to your device.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">🎙️</div>
 <h3>Meeting Notes</h3>
 <p>Automatic meeting note taker. Reachy listens, summarizes, and captures key points from your conversations.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">💬</div>
 <h3>Scheduled Messages</h3>
 <p>Schedule WhatsApp and iMessage messages to be sent later. Perfect for birthday wishes and reminders.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">👥</div>
 <h3>iOS Contacts</h3>
 <p>Access your iPhone contacts through voice. Find phone numbers, emails, and contact details instantly.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">♟️</div>
 <h3>Play Chess</h3>
 <p>Challenge Reachy to a game of chess. Play using voice commands and watch Reachy react to your moves.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">🃏</div>
 <h3>Memory Game</h3>
 <p>Test your memory with interactive card matching games. Reachy keeps track and celebrates your wins.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">📍</div>
 <h3>Location</h3>
 <p>Get your current location and find places nearby. Ask about distances and directions.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">🥚</div>
 <h3>Tamareachy</h3>
 <p>Virtual pet mode! Take care of Reachy by feeding, playing, and keeping it happy. Watch its mood change.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">🎯</div>
 <h3>Create Apps</h3>
 <p>Build custom apps for Reachy using natural language. Describe what you want and watch it come to life.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">🎭</div>
 <h3>Custom Personalities</h3>
 <p>Create unique AI personalities with different voices, behaviors, and conversation styles.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">🌐</div>
 <h3>Vibe Coding</h3>
 <p>Generate websites and web apps through conversation. Describe your vision and Reachy builds it.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">⚡</div>
 <h3>Ultra Low Latency</h3>
 <p>Local WiFi communication with ~1-5ms response times. No cloud dependency for control.</p>
 </div>
 <div class="feature-card">
 <div class="feature-icon">🔒</div>
 <h3>Privacy First</h3>
 <p>Your API keys stay on Reachy. All processing happens on the robot itself.</p>
 </div>
 </div>
 <div class="section-cta">
 <a href="features.html" class="btn btn-secondary">📖 View Complete Feature Guide</a>
 </div>
 </section>
<!-- Feature Examples Section -->
 <section id="examples" class="section section-alt">
 <div class="section-header">
 <h2>Feature Examples</h2>
 <p>See what you can do with Reachy's Brain</p>
 </div>
 <div class="examples-list">
 <div class="example-item">
 <div class="example-header">
 <span class="example-icon">🗣️</span>
 <h3>Voice Conversations</h3>
 </div>
 <div class="example-content">
 <p>Have natural, flowing conversations with Reachy using OpenAI's Realtime API.</p>
 <div class="example-commands">
 <div class="command">"Hey Reachy, tell me a joke"</div>
 <div class="command">"What's the meaning of life?"</div>
 <div class="command">"Can you explain quantum computing simply?"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">🌤️</span>
 <h3>Weather</h3>
 </div>
 <div class="example-content">
 <p>Get current weather conditions and forecasts for any location.</p>
 <div class="example-commands">
 <div class="command">"What's the weather like today?"</div>
 <div class="command">"Will it rain in Amsterdam tomorrow?"</div>
 <div class="command">"What's the temperature in Tokyo?"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">📰</span>
 <h3>News</h3>
 </div>
 <div class="example-content">
 <p>Stay informed with the latest news headlines and stories.</p>
 <div class="example-commands">
 <div class="command">"What's in the news today?"</div>
 <div class="command">"Tell me about the latest tech news"</div>
 <div class="command">"Any sports news?"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">🔍</span>
 <h3>Web Search</h3>
 </div>
 <div class="example-content">
 <p>Search the web for information, facts, and answers.</p>
 <div class="example-commands">
 <div class="command">"Search for the best Italian restaurants nearby"</div>
 <div class="command">"Who won the World Cup in 2022?"</div>
 <div class="command">"How tall is the Eiffel Tower?"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">📷</span>
 <h3>Vision & Camera</h3>
 </div>
 <div class="example-content">
 <p>Reachy can see and describe what's in front of it.</p>
 <div class="example-commands">
 <div class="command">"What do you see?"</div>
 <div class="command">"Describe what's on my desk"</div>
 <div class="command">"Can you read what's on this paper?"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">⏰</span>
 <h3>iOS Reminders</h3>
 </div>
 <div class="example-content">
 <p>Create and manage reminders directly on your iPhone.</p>
 <div class="example-commands">
 <div class="command">"Remind me to call mom at 5pm"</div>
 <div class="command">"Add a reminder to buy groceries tomorrow"</div>
 <div class="command">"Set a reminder for my dentist appointment on Friday"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">📝</span>
 <h3>Notes</h3>
 </div>
 <div class="example-content">
 <p>Quickly capture thoughts and ideas through voice.</p>
 <div class="example-commands">
 <div class="command">"Take a note: remember to update the project timeline"</div>
 <div class="command">"Save this idea: new feature for the app"</div>
 <div class="command">"Note to self: research machine learning frameworks"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">🎙️</span>
 <h3>Meeting Notes</h3>
 </div>
 <div class="example-content">
 <p>Automatic meeting transcription and summarization.</p>
 <div class="example-commands">
 <div class="command">"Start taking meeting notes"</div>
 <div class="command">"Summarize our discussion"</div>
 <div class="command">"What were the action items from this meeting?"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">💬</span>
 <h3>Scheduled Messages</h3>
 </div>
 <div class="example-content">
 <p>Schedule WhatsApp and iMessage messages to be sent at a specific time.</p>
 <div class="example-commands">
 <div class="command">"Send a WhatsApp to Mom tomorrow at 9am saying happy birthday"</div>
 <div class="command">"Schedule a message to John on Friday: Don't forget our meeting"</div>
 <div class="command">"Text Sarah at 6pm: I'm on my way home"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">👥</span>
 <h3>iOS Contacts</h3>
 </div>
 <div class="example-content">
 <p>Access your iPhone contacts and find contact information.</p>
 <div class="example-commands">
 <div class="command">"What's John's phone number?"</div>
 <div class="command">"Find Sarah's email address"</div>
 <div class="command">"Show me the contact details for my dentist"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">♟️</span>
 <h3>Play Chess</h3>
 </div>
 <div class="example-content">
 <p>Challenge Reachy to a game of chess using voice commands.</p>
 <div class="example-commands">
 <div class="command">"Let's play chess"</div>
 <div class="command">"Move pawn to e4"</div>
 <div class="command">"What's your next move?"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">🃏</span>
 <h3>Memory Game</h3>
 </div>
 <div class="example-content">
 <p>Play memory card matching games with Reachy.</p>
 <div class="example-commands">
 <div class="command">"Let's play a memory game"</div>
 <div class="command">"Flip card number 3"</div>
 <div class="command">"How many matches do I have?"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">📍</span>
 <h3>Location</h3>
 </div>
 <div class="example-content">
 <p>Get your current location and find nearby places.</p>
 <div class="example-commands">
 <div class="command">"Where am I right now?"</div>
 <div class="command">"Find coffee shops nearby"</div>
 <div class="command">"How far is the nearest train station?"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">🥚</span>
 <h3>Tamareachy</h3>
 </div>
 <div class="example-content">
 <p>Take care of Reachy like a virtual pet - feed it, play with it, and keep it happy!</p>
 <div class="example-commands">
 <div class="command">"Feed Reachy"</div>
 <div class="command">"How is Reachy feeling?"</div>
 <div class="command">"Play with Reachy"</div>
 <div class="command">"Give Reachy some water"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">🎭</span>
 <h3>Animations</h3>
 </div>
 <div class="example-content">
 <p>Trigger expressive head movements and gestures.</p>
 <div class="example-commands">
 <div class="command">"Nod your head"</div>
 <div class="command">"Do a happy dance"</div>
 <div class="command">"Look surprised"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">🎯</span>
 <h3>Create Apps</h3>
 </div>
 <div class="example-content">
 <p>Build custom apps for Reachy using natural language.</p>
 <div class="example-commands">
 <div class="command">"Create an app that tells dad jokes"</div>
 <div class="command">"Make a meditation timer app"</div>
 <div class="command">"Build a trivia game"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">🌐</span>
 <h3>Vibe Coding</h3>
 </div>
 <div class="example-content">
 <p>Generate websites and web apps through conversation.</p>
 <div class="example-commands">
 <div class="command">"Create a portfolio website for me"</div>
 <div class="command">"Build a simple todo list app"</div>
 <div class="command">"Make a landing page for my startup"</div>
 </div>
 </div>
 </div>
<div class="example-item">
 <div class="example-header">
 <span class="example-icon">🕐</span>
 <h3>Date & Time</h3>
 </div>
 <div class="example-content">
 <p>Get current time, dates, and time zone information.</p>
 <div class="example-commands">
 <div class="command">"What time is it?"</div>
 <div class="command">"What's the date today?"</div>
 <div class="command">"What time is it in New York?"</div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Architecture Section -->
 <section class="section section-alt">
 <div class="section-header">
 <h2>Architecture</h2>
 <p>A three-layer system designed for responsiveness</p>
 </div>
 <div class="architecture">
 <div class="arch-layer">
 <div class="arch-icon">📱</div>
 <div class="arch-content">
 <h3>iOS App</h3>
 <p>Native SwiftUI app for controlling Reachy, viewing conversations, and managing settings.</p>
 <div class="arch-tags">
 <span class="tag">Remote Control</span>
 <span class="tag">Conversation View</span>
 <span class="tag">Animation Recording</span>
 </div>
 </div>
 </div>
 <div class="arch-connector">
 <div class="connector-line"></div>
 <span class="connector-label">Port 8080</span>
 </div>
 <div class="arch-layer">
 <div class="arch-icon">🌉</div>
 <div class="arch-content">
 <h3>iOS Bridge</h3>
 <p>Python FastAPI server handling speech, TTS, voice conversations, and tools on Reachy.</p>
 <div class="arch-tags">
 <span class="tag">OpenAI Realtime</span>
 <span class="tag">TTS</span>
 <span class="tag">Tools</span>
 <span class="tag">Vision</span>
 </div>
 </div>
 </div>
 <div class="arch-connector">
 <div class="connector-line"></div>
 <span class="connector-label">Port 8000</span>
 </div>
 <div class="arch-layer">
 <div class="arch-icon">🤖</div>
 <div class="arch-content">
 <h3>Reachy Daemon</h3>
 <p>Built-in system daemon for motor control, animations, volume, and hardware management.</p>
 <div class="arch-tags">
 <span class="tag">Motors</span>
 <span class="tag">Animations</span>
 <span class="tag">Audio</span>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Getting Started Section -->
 <section id="getting-started" class="section">
 <div class="section-header">
 <h2>Getting Started</h2>
 <p>Up and running in minutes</p>
 </div>
 <div class="steps">
 <div class="step">
 <div class="step-number">1</div>
 <div class="step-content">
 <h3>Install on Reachy Mini</h3>
 <p>From the Reachy Mini dashboard, install this app from Hugging Face:</p>
 <div class="code-block">
 <code>robertkeus/reachys-brain</code>
 </div>
 <p class="step-note">Or install manually with pip:</p>
 <div class="code-block">
 <code>pip install git+https://huggingface.co/spaces/robertkeus/reachys-brain</code>
 </div>
 </div>
 </div>
 <div class="step">
 <div class="step-number">2</div>
 <div class="step-content">
 <h3>Start the Bridge</h3>
 <p>From the Reachy Mini dashboard (e.g. <code>http://reachy.local:8000</code>), select "Reachy's Brain" from installed applications.</p>
 <p class="step-note">The HTTP server will start on port 8080.</p>
 </div>
 </div>
 <div class="step">
 <div class="step-number">3</div>
 <div class="step-content">
 <h3>Get the iOS App</h3>
 <p class="coming-soon-badge">Coming Soon</p>
 <p>The companion iOS app will be available on the App Store.</p>
 <p class="step-note">Requires iOS 17 or newer.</p>
 </div>
 </div>
 <div class="step">
 <div class="step-number">4</div>
 <div class="step-content">
 <h3>Configure & Connect</h3>
 <p>In the iOS app Settings:</p>
 <ul>
 <li>Enter Reachy's IP address (find with <code>hostname -I</code>)</li>
 <li>Add your OpenAI API key</li>
 <li>Choose your preferred voice</li>
 </ul>
 </div>
 </div>
 </div>
 </section>
<!-- API Reference Section -->
 <section id="api" class="section section-alt">
 <div class="section-header">
 <h2>Bridge API Reference</h2>
 <p>HTTP endpoints on port 8080 for custom integrations</p>
 </div>
 <div class="api-grid">
 <div class="api-card">
 <div class="api-header">
 <span class="api-method get">GET</span>
 <code>/status</code>
 </div>
 <p>Get current robot status including connection, speaking, and animation states.</p>
 <div class="api-response">
 <pre>{
 "connected": true,
 "speaking": false,
 "animation_playing": false
}</pre>
 </div>
 </div>
 <div class="api-card">
 <div class="api-header">
 <span class="api-method post">POST</span>
 <code>/speak</code>
 </div>
 <p>Send text for text-to-speech with optional emotion.</p>
 <div class="api-response">
 <pre>{
 "text": "Hello!",
 "emotion": "happy"
}</pre>
 </div>
 <div class="api-note">
 Emotions: <code>neutral</code>, <code>happy</code>, <code>sad</code>, <code>surprised</code>, <code>thinking</code>
 </div>
 </div>
 <div class="api-card">
 <div class="api-header">
 <span class="api-method post">POST</span>
 <code>/motion</code>
 </div>
 <p>Trigger a head animation by name.</p>
 <div class="api-response">
 <pre>{
 "animation": "nod",
 "duration": 1.5
}</pre>
 </div>
 <div class="api-note">
 Animations: <code>nod</code>, <code>shake</code>, <code>happy</code>, <code>thinking</code>, and more
 </div>
 </div>
 <div class="api-card">
 <div class="api-header">
 <span class="api-method get">GET</span>
 <code>/voices</code>
 </div>
 <p>List available OpenAI TTS voices.</p>
 <div class="api-note">
 Voices: <code>alloy</code>, <code>ash</code>, <code>coral</code>, <code>echo</code>, <code>sage</code>, <code>shimmer</code>, <code>verse</code>, <code>ballad</code>
 </div>
 </div>
 <div class="api-card">
 <div class="api-header">
 <span class="api-method post">POST</span>
 <code>/voice</code>
 </div>
 <p>Set the active TTS voice.</p>
 <div class="api-response">
 <pre>{ "voice_id": "coral" }</pre>
 </div>
 </div>
 <div class="api-card">
 <div class="api-header">
 <span class="api-method post">POST</span>
 <code>/stop</code>
 </div>
 <p>Stop current speech and animation immediately.</p>
 </div>
 </div>
 <div class="api-more">
 <p>See the <a href="https://huggingface.co/spaces/robertkeus/reachys-brain/blob/main/README.md">full API documentation</a> for all endpoints.</p>
 </div>
 </section>
<!-- Voices Section -->
 <section class="section">
 <div class="section-header">
 <h2>Voice Library</h2>
 <p>8 expressive voices powered by OpenAI</p>
 </div>
 <div class="voices-grid">
 <div class="voice-card">
 <div class="voice-avatar" style="background: linear-gradient(135deg, #7889A8, #5F6F8C);">A</div>
 <div class="voice-info">
 <h4>Alloy</h4>
 <p>Neutral, balanced</p>
 </div>
 </div>
 <div class="voice-card">
 <div class="voice-avatar" style="background: linear-gradient(135deg, #E8A954, #D4863A);">C</div>
 <div class="voice-info">
 <h4>Coral</h4>
 <p>Clear, friendly</p>
 </div>
 </div>
 <div class="voice-card">
 <div class="voice-avatar" style="background: linear-gradient(135deg, #6B9B7A, #5A8A69);">S</div>
 <div class="voice-info">
 <h4>Sage</h4>
 <p>Calm, wise</p>
 </div>
 </div>
 <div class="voice-card">
 <div class="voice-avatar" style="background: linear-gradient(135deg, #9B7A8A, #8A6979);">A</div>
 <div class="voice-info">
 <h4>Ash</h4>
 <p>Soft, warm</p>
 </div>
 </div>
 <div class="voice-card">
 <div class="voice-avatar" style="background: linear-gradient(135deg, #7A9BB8, #698AA7);">E</div>
 <div class="voice-info">
 <h4>Echo</h4>
 <p>Deep, resonant</p>
 </div>
 </div>
 <div class="voice-card">
 <div class="voice-avatar" style="background: linear-gradient(135deg, #B89B7A, #A78A69);">B</div>
 <div class="voice-info">
 <h4>Ballad</h4>
 <p>Expressive, storytelling</p>
 </div>
 </div>
 <div class="voice-card">
 <div class="voice-avatar" style="background: linear-gradient(135deg, #E89B54, #D78A43);">S</div>
 <div class="voice-info">
 <h4>Shimmer</h4>
 <p>Bright, energetic</p>
 </div>
 </div>
 <div class="voice-card">
 <div class="voice-avatar" style="background: linear-gradient(135deg, #8A7AB8, #7969A7);">V</div>
 <div class="voice-info">
 <h4>Verse</h4>
 <p>Dynamic, engaging</p>
 </div>
 </div>
 </div>
 </section>
<!-- Help Section -->
 <section id="help" class="section section-alt">
 <div class="section-header">
 <h2>Troubleshooting</h2>
 <p>Common issues and solutions</p>
 </div>
 <div class="help-grid">
 <div class="help-card">
 <h3>🔇 No Sound from Reachy?</h3>
 <ol>
 <li>Check volume: <code>GET /volume</code> should return a value > 0</li>
 <li>Test audio: <code>speaker-test -D plug:reachymini_audio_sink -c 1 -t sine -f 440 -l 1</code></li>
 <li>Verify the daemon is running: <code>GET http://reachy.local:8000/api/daemon/status</code></li>
 </ol>
 </div>
 <div class="help-card">
 <h3>🔑 TTS Not Working?</h3>
 <ol>
 <li>Check if API key is set: <code>GET /openai/api-key</code> should return <code>{"configured": true}</code></li>
 <li>Set the key in iOS app Settings or via API</li>
 <li>Check server logs for OpenAI errors</li>
 </ol>
 </div>
 <div class="help-card">
 <h3>📡 Can't Connect to Reachy?</h3>
 <ol>
 <li>Ensure iPhone and Reachy are on the same WiFi network</li>
 <li>Find Reachy's IP: <code>hostname -I</code></li>
 <li>Try <code>http://reachy.local:8080</code> if mDNS is available</li>
 <li>Check that the bridge app is running on port 8080</li>
 </ol>
 </div>
 <div class="help-card">
 <h3>🤖 Animations Not Playing?</h3>
 <ol>
 <li>Verify Reachy is connected: <code>GET /status</code> should show <code>"connected": true</code></li>
 <li>Wake the robot: <code>POST /robot/wake</code></li>
 <li>Check that motors are enabled in the daemon dashboard</li>
 </ol>
 </div>
 </div>
 </section>
<!-- Requirements Section -->
 <section class="section">
 <div class="section-header">
 <h2>Requirements</h2>
 <p>What you need to get started</p>
 </div>
 <div class="requirements-grid">
 <div class="req-card">
 <div class="req-icon">📱</div>
 <h3>iOS Device</h3>
 <ul>
 <li>iPhone running iOS 17+</li>
 <li>Same WiFi network as Reachy</li>
 <li>OpenAI API key</li>
 </ul>
 </div>
 <div class="req-card">
 <div class="req-icon">🤖</div>
 <h3>Reachy Mini</h3>
 <ul>
 <li>Reachy Mini Wireless</li>
 <li>Python 3.10+</li>
 <li>Same WiFi as iPhone</li>
 </ul>
 </div>
 </div>
 </section>
<!-- Privacy & Terms Section -->
 <section id="legal" class="section section-alt">
 <div class="legal-grid">
 <div class="legal-card">
 <h2>Privacy Policy</h2>
 <div class="legal-content">
 <h4>Data Collection</h4>
 <p>Reachy's Brain does not collect, store, or transmit any personal data to external servers operated by us. All data processing happens locally on your Reachy Mini robot.</p>
<h4>OpenAI API</h4>
 <p>Voice conversations and text-to-speech are processed through OpenAI's API using your own API key. Your conversations are subject to <a href="https://openai.com/policies/privacy-policy" target="_blank">OpenAI's Privacy Policy</a>. We do not have access to your API key or conversation data.</p>
<h4>Camera & Vision</h4>
 <p>When using vision features, images from Reachy's camera are sent to OpenAI for processing. These images are not stored by us and are handled according to OpenAI's data policies.</p>
<h4>Local Storage</h4>
 <p>Settings, recorded animations, and conversation history are stored locally on your Reachy Mini. No data is synced to cloud services.</p>
<h4>Network Communication</h4>
 <p>The iOS app communicates with Reachy over your local WiFi network. No data is transmitted outside your network except for OpenAI API calls.</p>
 </div>
 </div>
<div class="legal-card">
 <h2>Terms of Service</h2>
 <div class="legal-content">
 <h4>Acceptance</h4>
 <p>By using Reachy's Brain, you agree to these terms. If you do not agree, please do not use the software.</p>
<h4>License</h4>
 <p>This software is provided under the MIT License. You are free to use, modify, and distribute it according to the license terms.</p>
<h4>API Keys</h4>
 <p>You are responsible for your own OpenAI API key and any costs incurred through its use. Keep your API key secure and do not share it.</p>
<h4>No Warranty</h4>
 <p>This software is provided "as is" without warranty of any kind. We are not liable for any damages arising from its use.</p>
<h4>Robot Safety</h4>
 <p>You are responsible for the safe operation of your Reachy Mini robot. Ensure the robot is placed securely and supervise its operation.</p>
<h4>Third-Party Services</h4>
 <p>Use of OpenAI services is subject to their terms. We are not responsible for third-party service availability or changes.</p>
 </div>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="footer">
 <div class="footer-content">
 <div class="footer-brand">
 <img src="logo.png" alt="Reachy's Brain" class="footer-logo-img">
 <span>Reachy's Brain</span>
 </div>
 <div class="footer-links">
 <a href="features.html">Feature Guide</a>
 <a href="https://huggingface.co/spaces/robertkeus/reachys-brain/tree/main">Source Code</a>
 <a href="privacy.html">Privacy Policy</a>
 <a href="terms.html">Terms of Service</a>
 </div>
 <p class="footer-copyright">MIT License</p>
 </div>
 </footer>
 </div>
</body>
</html>