Spaces:

robertkeus
/

reachys-brain

Running

App Files Files Community

robertkeus commited on 27 days ago

Commit

c4f758d

verified ·

1 Parent(s): 3efb295

Improved landing page with full documentation, features, API reference, and app branding

Browse files

Files changed (9) hide show

README.md +2 -2
index.html +432 -50
reachy_ios_bridge/app_tools.py +101 -0
reachy_ios_bridge/openai_realtime.py +14 -1
reachy_ios_bridge/routes/__init__.py +2 -0
reachy_ios_bridge/routes/conversation.py +42 -9
reachy_ios_bridge/routes/conversation_messages.py +88 -0
reachy_ios_bridge/server.py +2 -0
style.css +711 -85

README.md CHANGED Viewed

@@ -1,8 +1,8 @@
 ---
 title: Reachy iOS Bridge
 emoji: 🤖📱
-colorFrom: blue
-colorTo: green
 sdk: static
 pinned: false
 tags:

 ---
 title: Reachy iOS Bridge
 emoji: 🤖📱
+colorFrom: yellow
+colorTo: yellow
 sdk: static
 pinned: false
 tags:

index.html CHANGED Viewed

@@ -5,65 +5,447 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Reachy iOS Bridge</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <div class="container">
-        <header>
-            <div class="logo">
-                <span class="icon">🤖</span>
-                <span class="icon-phone">📱</span>
-            </div>
-            <h1>Reachy iOS Bridge</h1>
-            <p class="tagline">Voice assistant integration for Reachy Mini</p>
         </header>
-        <main>
-            <section class="features">
-                <div class="feature">
-                    <span class="feature-icon">🗣️</span>
-                    <h3>Text-to-Speech</h3>
-                    <p>OpenAI TTS for natural-sounding voices in any language</p>
-                </div>
-                <div class="feature">
-                    <span class="feature-icon">💬</span>
-                    <h3>Voice Conversations</h3>
-                    <p>OpenAI Realtime API for interactive voice chat</p>
-                </div>
-                <div class="feature">
-                    <span class="feature-icon">🎭</span>
-                    <h3>Head Animations</h3>
-                    <p>Expressive head movements and gestures</p>
-                </div>
-                <div class="feature">
-                    <span class="feature-icon">⚡</span>
-                    <h3>Low Latency</h3>
-                    <p>Local WiFi communication (~1-5ms)</p>
-                </div>
-            </section>
-            <section class="info">
-                <h2>How It Works</h2>
-                <p>
-                    This app runs an HTTP server on your Reachy Mini that allows an iOS device
-                    to control speech, animations, and voice conversations. Your iPhone becomes
-                    the "brain" for Reachy, handling speech recognition and AI processing.
-                </p>
-            </section>
-            <section class="requirements">
                 <h2>Requirements</h2>
-                <ul>
-                    <li>Reachy Mini with Python 3.10+</li>
-                    <li>iPhone on the same WiFi network</li>
-                    <li>OpenAI API key for TTS and voice features</li>
-                </ul>
-            </section>
-        </main>
-        <footer>
-            <p>See the <a href="https://huggingface.co/spaces/robertkeus/reachy_ios_bridge/blob/main/README.md">README</a> for full documentation</p>
         </footer>
     </div>
 </body>
 </html>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Reachy iOS Bridge</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=DM+Serif+Display:ital@0;1&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">
+                <span class="nav-logo">🤖</span>
+                <span class="nav-title">Reachy iOS Bridge</span>
+            </div>
+            <div class="nav-links">
+                <a href="#features">Features</a>
+                <a href="#getting-started">Setup</a>
+                <a href="#api">API</a>
+                <a href="#help">Help</a>
+            </div>
+        </nav>
+        <!-- Hero Section -->
+        <header class="hero">
+            <div class="hero-content">
+                <div class="hero-badge">Reachy Mini App</div>
+                <h1>Reachy iOS Bridge</h1>
+                <p class="hero-tagline">Turn your iPhone into the brain for Reachy Mini</p>
+                <p class="hero-description">
+                    A native iOS voice assistant that brings natural conversations to your robot.
+                    Powered by OpenAI's real-time voice API and Apple Intelligence.
+                </p>
+                <div class="hero-actions">
+                    <a href="#getting-started" class="btn btn-primary">Get Started</a>
+                    <a href="https://github.com/robertkeus/reachy-ios-bridge" class="btn btn-secondary">View Source</a>
+                </div>
+            </div>
+            <div class="hero-visual">
+                <div class="device-stack">
+                    <div class="device robot">
+                        <span class="device-icon">🤖</span>
+                        <span class="device-label">Reachy Mini</span>
+                    </div>
+                    <div class="connection-line">
+                        <span class="signal"></span>
+                        <span class="signal"></span>
+                        <span class="signal"></span>
+                    </div>
+                    <div class="device phone">
+                        <span class="device-icon">📱</span>
+                        <span class="device-label">iPhone</span>
+                    </div>
+                </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>Apple Intelligence</h3>
+                    <p>On-device AI with iOS 26+ Foundation Models. Private, fast, and always available.</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>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 your device. Voice processing happens locally when possible.</p>
+                </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 with on-device speech recognition, Apple Intelligence, and OpenAI integration.</p>
+                        <div class="arch-tags">
+                            <span class="tag">SpeechRecognizer</span>
+                            <span class="tag">LLMService</span>
+                            <span class="tag">OpenAI Realtime</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 TTS, voice management, and robot control abstraction.</p>
+                        <div class="arch-tags">
+                            <span class="tag">OpenAI TTS</span>
+                            <span class="tag">Voice Selection</span>
+                            <span class="tag">API Gateway</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/reachy_ios_bridge</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/reachy_ios_bridge</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 at <code>http://127.0.0.1:8000</code>, select "Reachy iOS Bridge" 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>Build the companion iOS app from the source repository:</p>
+                        <div class="code-block">
+                            <code>open ReachyBridge/ReachyBridge.xcodeproj</code>
+                        </div>
+                        <p class="step-note">Requires iPhone 15 Pro or newer for Apple Intelligence features.</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>API Reference</h2>
+                <p>HTTP endpoints 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/reachy_ios_bridge/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 15 Pro or newer</li>
+                        <li>iOS 17+ (iOS 26+ for Apple Intelligence)</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>
+        <!-- Footer -->
+        <footer class="footer">
+            <div class="footer-content">
+                <div class="footer-brand">
+                    <span class="footer-logo">🤖📱</span>
+                    <span>Reachy iOS Bridge</span>
+                </div>
+                <div class="footer-links">
+                    <a href="https://huggingface.co/spaces/robertkeus/reachy_ios_bridge/blob/main/README.md">Documentation</a>
+                    <a href="https://github.com/robertkeus/reachy-ios-bridge">GitHub</a>
+                    <a href="https://huggingface.co/pollen-robotics">Pollen Robotics</a>
+                </div>
+                <p class="footer-copyright">MIT License</p>
+            </div>
         </footer>
     </div>
 </body>
 </html>

reachy_ios_bridge/app_tools.py CHANGED Viewed

@@ -130,6 +130,40 @@ APP_TOOLS = [
             "properties": {},
             "required": []
         }
     }
 ]
@@ -279,6 +313,14 @@ class AppToolsHandler:
             elif tool_name == "go_to_sleep":
                 return await self._go_to_sleep()
             else:
                 return {"success": False, "error": f"Unknown tool: {tool_name}"}
@@ -558,6 +600,65 @@ class AppToolsHandler:
         except Exception as e:
             logger.error(f"Failed to go to sleep: {e}", exc_info=True)
             return {"success": False, "error": str(e)}
 # Global tools handler instance

             "properties": {},
             "required": []
         }
+    },
+    {
+        "type": "function",
+        "name": "remember_user_name",
+        "description": (
+            "Store the user's name for personalized greetings. "
+            "Use this when the user tells you their name (e.g., 'My name is John', 'I'm Sarah', 'Call me Mike'). "
+            "IMPORTANT: Only use the first name or nickname the user prefers. "
+            "This makes future greetings more personal."
+        ),
+        "parameters": {
+            "type": "object",
+            "properties": {
+                "name": {
+                    "type": "string",
+                    "description": "The user's name or preferred nickname to remember"
+                }
+            },
+            "required": ["name"]
+        }
+    },
+    {
+        "type": "function",
+        "name": "get_user_name",
+        "description": (
+            "Retrieve the user's stored name. "
+            "Use this to check if you already know the user's name. "
+            "Returns the stored name or null if not set."
+        ),
+        "parameters": {
+            "type": "object",
+            "properties": {},
+            "required": []
+        }
     }
 ]
             elif tool_name == "go_to_sleep":
                 return await self._go_to_sleep()
+            elif tool_name == "remember_user_name":
+                return await self._remember_user_name(
+                    name=arguments.get("name", "")
+                )
+            elif tool_name == "get_user_name":
+                return await self._get_user_name()
             else:
                 return {"success": False, "error": f"Unknown tool: {tool_name}"}
         except Exception as e:
             logger.error(f"Failed to go to sleep: {e}", exc_info=True)
             return {"success": False, "error": str(e)}
+    async def _remember_user_name(self, name: str) -> dict:
+        """Store the user's name for personalized interactions.
+        Args:
+            name: The user's name to remember.
+        Returns:
+            Result dictionary with success status.
+        """
+        if not name or not name.strip():
+            return {"success": False, "error": "Name cannot be empty"}
+        # Clean up the name (capitalize first letter, trim whitespace)
+        clean_name = name.strip().title()
+        try:
+            db = get_database()
+            await db.set_user_setting("user_name", clean_name)
+            logger.info(f"👤 Remembered user name: {clean_name}")
+            return {
+                "success": True,
+                "message": f"Nice to meet you, {clean_name}! I'll remember your name.",
+                "name": clean_name
+            }
+        except Exception as e:
+            logger.error(f"Failed to remember user name: {e}", exc_info=True)
+            return {"success": False, "error": str(e)}
+    async def _get_user_name(self) -> dict:
+        """Retrieve the stored user name.
+        Returns:
+            Result dictionary with the user's name if stored.
+        """
+        try:
+            db = get_database()
+            name = await db.get_user_setting("user_name")
+            if name:
+                logger.info(f"👤 Retrieved user name: {name}")
+                return {
+                    "success": True,
+                    "name": name,
+                    "message": f"The user's name is {name}"
+                }
+            else:
+                return {
+                    "success": True,
+                    "name": None,
+                    "message": "I don't know the user's name yet"
+                }
+        except Exception as e:
+            logger.error(f"Failed to get user name: {e}", exc_info=True)
+            return {"success": False, "error": str(e)}
 # Global tools handler instance

reachy_ios_bridge/openai_realtime.py CHANGED Viewed

@@ -203,6 +203,15 @@ You can express emotions through your responses: happy, sad, surprised, or thoug
 Be warm, curious, and engaging. You enjoy helping people and having conversations.
 When greeting someone, be enthusiastic but not overwhelming.
 TOOLS AND CAPABILITIES:
 IMPORTANT RULE - ALWAYS ANNOUNCE TOOL USAGE:
@@ -251,7 +260,11 @@ Before using ANY tool, you MUST tell the user what you're about to do. This help
 5. POWER CONTROL: Control your motors (no confirmation needed):
    - "Wake up", "Turn on": Use wake_up
-   - "Go to sleep", "Sleep": Use go_to_sleep""" + language_instruction
     def set_custom_personality(
         self,

 Be warm, curious, and engaging. You enjoy helping people and having conversations.
 When greeting someone, be enthusiastic but not overwhelming.
+PERSONALIZATION:
+- You can remember the user's name for more personal interactions.
+- When a user introduces themselves or tells you their name (e.g., "My name is John", "I'm Sarah", "Call me Mike"),
+  use the remember_user_name tool to save it. This makes conversations more personal!
+- You can use get_user_name to check if you already know someone's name.
+- IMPORTANT: If you DON'T know the user's name yet and it's the first few exchanges, naturally ask for their name.
+  Example: "By the way, I don't think I know your name yet. What should I call you?"
+  Don't ask for their name every single time - just once if you don't know it.
 TOOLS AND CAPABILITIES:
 IMPORTANT RULE - ALWAYS ANNOUNCE TOOL USAGE:
 5. POWER CONTROL: Control your motors (no confirmation needed):
    - "Wake up", "Turn on": Use wake_up
+   - "Go to sleep", "Sleep": Use go_to_sleep
+6. PERSONALIZATION: Remember user details for personal interactions.
+   - When user says their name: Use remember_user_name to save it
+   - To check if you know their name: Use get_user_name""" + language_instruction
     def set_custom_personality(
         self,

reachy_ios_bridge/routes/__init__.py CHANGED Viewed

@@ -10,6 +10,7 @@ from .power import router as power_router
 from .speech import router as speech_router
 from .state import router as state_router
 from .tools import router as tools_router
 from .voice import router as voice_router
 from .volume import router as volume_router
@@ -24,6 +25,7 @@ __all__ = [
     "speech_router",
     "state_router",
     "tools_router",
     "voice_router",
     "volume_router",
 ]

 from .speech import router as speech_router
 from .state import router as state_router
 from .tools import router as tools_router
+from .user_settings import router as user_settings_router
 from .voice import router as voice_router
 from .volume import router as volume_router
     "speech_router",
     "state_router",
     "tools_router",
+    "user_settings_router",
     "voice_router",
     "volume_router",
 ]

reachy_ios_bridge/routes/conversation.py CHANGED Viewed

@@ -17,7 +17,10 @@ from ..openai_realtime import ConnectionState, OpenAIRealtimeService, SpeakingSt
 from ..speaking_gestures import SpeakingGesturesService
 from .audio_stream_manager import AudioStreamManager, ConversationTimings
-from .conversation_messages import GOODBYES, GREETINGS, STOP_COMMANDS
 logger = logging.getLogger(__name__)
@@ -416,7 +419,10 @@ def _on_app_change(data: dict) -> None:
 # MARK: - Greeting and Goodbye
 async def _send_greeting() -> None:
-    """Send a greeting message when conversation starts."""
     try:
         await asyncio.sleep(ConversationTimings.GREETING_ANIMATION_DELAY)
@@ -436,10 +442,22 @@ async def _send_greeting() -> None:
         # Get current language
         lang = openai_service.language if openai_service else "en"
-        greetings = GREETINGS.get(lang, GREETINGS["en"])
-        greeting = random.choice(greetings)
-        logger.info(f"👋 Sending greeting ({lang}): {greeting}")
         await openai_service.send_text_message(greeting)
     except Exception as e:
@@ -447,7 +465,10 @@ async def _send_greeting() -> None:
 async def _send_goodbye() -> None:
-    """Send a goodbye message when conversation ends."""
     try:
         if not openai_service or not openai_service.is_connected:
             logger.warning("Cannot send goodbye - not connected")
@@ -455,10 +476,22 @@ async def _send_goodbye() -> None:
         # Get current language
         lang = openai_service.language if openai_service else "en"
-        goodbyes = GOODBYES.get(lang, GOODBYES["en"])
-        goodbye = random.choice(goodbyes)
-        logger.info(f"👋 Sending goodbye ({lang}): {goodbye}")
         await openai_service.send_text_message(goodbye)
         # Play a friendly wave/goodbye animation

 from ..speaking_gestures import SpeakingGesturesService
 from .audio_stream_manager import AudioStreamManager, ConversationTimings
+from .conversation_messages import (
+    GOODBYES, GREETINGS, PERSONALIZED_GOODBYES, PERSONALIZED_GREETINGS, STOP_COMMANDS
+)
+from .user_settings import get_user_name_value
 logger = logging.getLogger(__name__)
 # MARK: - Greeting and Goodbye
 async def _send_greeting() -> None:
+    """Send a greeting message when conversation starts.
+    Uses personalized greetings when the user's name is known.
+    """
     try:
         await asyncio.sleep(ConversationTimings.GREETING_ANIMATION_DELAY)
         # Get current language
         lang = openai_service.language if openai_service else "en"
+        # Check if we know the user's name for personalized greeting
+        user_name = await get_user_name_value()
+        if user_name:
+            # Use personalized greeting with user's name
+            personalized_greetings = PERSONALIZED_GREETINGS.get(lang, PERSONALIZED_GREETINGS["en"])
+            greeting_template = random.choice(personalized_greetings)
+            greeting = greeting_template.format(name=user_name)
+            logger.info(f"👋 Sending personalized greeting ({lang}): {greeting}")
+        else:
+            # Use standard greeting
+            greetings = GREETINGS.get(lang, GREETINGS["en"])
+            greeting = random.choice(greetings)
+            logger.info(f"👋 Sending greeting ({lang}): {greeting}")
         await openai_service.send_text_message(greeting)
     except Exception as e:
 async def _send_goodbye() -> None:
+    """Send a goodbye message when conversation ends.
+    Uses personalized goodbyes when the user's name is known.
+    """
     try:
         if not openai_service or not openai_service.is_connected:
             logger.warning("Cannot send goodbye - not connected")
         # Get current language
         lang = openai_service.language if openai_service else "en"
+        # Check if we know the user's name for personalized goodbye
+        user_name = await get_user_name_value()
+        if user_name:
+            # Use personalized goodbye with user's name
+            personalized_goodbyes = PERSONALIZED_GOODBYES.get(lang, PERSONALIZED_GOODBYES["en"])
+            goodbye_template = random.choice(personalized_goodbyes)
+            goodbye = goodbye_template.format(name=user_name)
+            logger.info(f"👋 Sending personalized goodbye ({lang}): {goodbye}")
+        else:
+            # Use standard goodbye
+            goodbyes = GOODBYES.get(lang, GOODBYES["en"])
+            goodbye = random.choice(goodbyes)
+            logger.info(f"👋 Sending goodbye ({lang}): {goodbye}")
         await openai_service.send_text_message(goodbye)
         # Play a friendly wave/goodbye animation

reachy_ios_bridge/routes/conversation_messages.py CHANGED Viewed

@@ -23,6 +23,7 @@ DANCE_MOVES = [
 ]
 # Greeting messages by language (when conversation starts)
 GREETINGS = {
     "en": [
         "Hello! I'm Reachy. How can I help you today?",
@@ -61,6 +62,53 @@ GREETINGS = {
     ],
 }
 # Goodbye messages by language (when conversation ends)
 GOODBYES = {
     "en": [
@@ -100,3 +148,43 @@ GOODBYES = {
     ],
 }

 ]
 # Greeting messages by language (when conversation starts)
+# These are used when we don't know the user's name
 GREETINGS = {
     "en": [
         "Hello! I'm Reachy. How can I help you today?",
     ],
 }
+# Personalized greeting messages by language (when we know the user's name)
+# {name} will be replaced with the user's name
+PERSONALIZED_GREETINGS = {
+    "en": [
+        "Hey {name}! Great to see you again. What can I do for you?",
+        "Hello {name}! How's it going? What would you like to talk about?",
+        "Hi {name}! Nice to see you. How can I help today?",
+        "{name}! Good to see you again. What's on your mind?",
+    ],
+    "nl": [
+        "Hey {name}! Leuk je weer te zien. Wat kan ik voor je doen?",
+        "Hallo {name}! Hoe gaat het? Waar wil je over praten?",
+        "Hoi {name}! Fijn je te zien. Hoe kan ik je helpen?",
+        "{name}! Goed je weer te zien. Wat heb je op je hart?",
+    ],
+    "de": [
+        "Hey {name}! Schön dich wiederzusehen. Was kann ich für dich tun?",
+        "Hallo {name}! Wie geht's? Worüber möchtest du sprechen?",
+        "Hi {name}! Schön dich zu sehen. Wie kann ich dir helfen?",
+        "{name}! Gut dich wiederzusehen. Was hast du auf dem Herzen?",
+    ],
+    "fr": [
+        "Hey {name}! Content de te revoir. Que puis-je faire pour toi?",
+        "Bonjour {name}! Comment ça va? De quoi voudrais-tu parler?",
+        "Salut {name}! Ravi de te voir. Comment puis-je t'aider?",
+        "{name}! Bon de te revoir. Qu'est-ce qui t'amène?",
+    ],
+    "es": [
+        "¡Hey {name}! Qué bueno verte de nuevo. ¿Qué puedo hacer por ti?",
+        "¡Hola {name}! ¿Cómo estás? ¿De qué te gustaría hablar?",
+        "¡Hola {name}! Me alegra verte. ¿En qué puedo ayudarte?",
+        "¡{name}! Qué bueno verte otra vez. ¿Qué tienes en mente?",
+    ],
+    "it": [
+        "Hey {name}! Bello rivederti. Cosa posso fare per te?",
+        "Ciao {name}! Come va? Di cosa vorresti parlare?",
+        "Ciao {name}! Felice di vederti. Come posso aiutarti?",
+        "{name}! Bello rivederti. Cosa hai in mente?",
+    ],
+    "pt": [
+        "Hey {name}! Que bom te ver de novo. O que posso fazer por você?",
+        "Olá {name}! Como você está? Sobre o que quer conversar?",
+        "Oi {name}! Bom te ver. Como posso ajudar?",
+        "{name}! Bom te ver de novo. O que você tem em mente?",
+    ],
+}
 # Goodbye messages by language (when conversation ends)
 GOODBYES = {
     "en": [
     ],
 }
+# Personalized goodbye messages by language (when we know the user's name)
+# {name} will be replaced with the user's name
+PERSONALIZED_GOODBYES = {
+    "en": [
+        "Goodbye {name}! It was great talking to you!",
+        "See you later {name}! Take care!",
+        "Bye {name}! Talk to you soon!",
+    ],
+    "nl": [
+        "Dag {name}! Het was fijn om met je te praten!",
+        "Tot ziens {name}! Pas goed op jezelf!",
+        "Doei {name}! Tot snel!",
+    ],
+    "de": [
+        "Tschüss {name}! Es war schön mit dir zu reden!",
+        "Bis bald {name}! Pass auf dich auf!",
+        "Ciao {name}! Bis zum nächsten Mal!",
+    ],
+    "fr": [
+        "Au revoir {name}! C'était super de parler avec toi!",
+        "À plus tard {name}! Prends soin de toi!",
+        "Salut {name}! À bientôt!",
+    ],
+    "es": [
+        "¡Adiós {name}! ¡Fue genial hablar contigo!",
+        "¡Hasta luego {name}! ¡Cuídate!",
+        "¡Chao {name}! ¡Nos vemos pronto!",
+    ],
+    "it": [
+        "Ciao {name}! È stato bello parlare con te!",
+        "A presto {name}! Prenditi cura di te!",
+        "Arrivederci {name}! Ci vediamo!",
+    ],
+    "pt": [
+        "Tchau {name}! Foi ótimo conversar com você!",
+        "Até mais {name}! Cuide-se!",
+        "Falou {name}! Até a próxima!",
+    ],
+}

reachy_ios_bridge/server.py CHANGED Viewed

@@ -27,6 +27,7 @@ from .routes import (
     speech_router,
     state_router,
     tools_router,
     voice_router,
     volume_router,
 )
@@ -113,6 +114,7 @@ app.include_router(power_router)
 app.include_router(speech_router)
 app.include_router(state_router)
 app.include_router(tools_router)
 app.include_router(voice_router)
 app.include_router(volume_router)

     speech_router,
     state_router,
     tools_router,
+    user_settings_router,
     voice_router,
     volume_router,
 )
 app.include_router(speech_router)
 app.include_router(state_router)
 app.include_router(tools_router)
+app.include_router(user_settings_router)
 app.include_router(voice_router)
 app.include_router(volume_router)

style.css CHANGED Viewed

@@ -1,3 +1,5 @@
 * {
     margin: 0;
     padding: 0;
@@ -5,188 +7,812 @@
 }
 :root {
-    --bg-primary: #0d1117;
-    --bg-secondary: #161b22;
-    --bg-card: #21262d;
-    --text-primary: #f0f6fc;
-    --text-secondary: #8b949e;
-    --accent: #58a6ff;
-    --accent-secondary: #7ee787;
-    --border: #30363d;
 }
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
     background: var(--bg-primary);
     color: var(--text-primary);
     line-height: 1.6;
     min-height: 100vh;
 }
-.container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 3rem 1.5rem;
 }
-header {
-    text-align: center;
-    margin-bottom: 3rem;
 }
-.logo {
-    font-size: 3rem;
-    margin-bottom: 1rem;
     display: flex;
-    justify-content: center;
-    gap: 0.5rem;
 }
-.icon {
-    animation: float 3s ease-in-out infinite;
 }
-.icon-phone {
-    animation: float 3s ease-in-out infinite 0.5s;
 }
-@keyframes float {
-    0%, 100% { transform: translateY(0); }
-    50% { transform: translateY(-8px); }
 }
-h1 {
-    font-size: 2.5rem;
     font-weight: 600;
-    margin-bottom: 0.5rem;
-    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }
-.tagline {
     color: var(--text-secondary);
-    font-size: 1.2rem;
 }
-main {
     display: flex;
-    flex-direction: column;
-    gap: 2.5rem;
 }
-.features {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 1rem;
 }
-.feature {
-    background: var(--bg-card);
     border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 1.5rem;
     text-align: center;
-    transition: transform 0.2s, border-color 0.2s;
 }
-.feature:hover {
     transform: translateY(-4px);
     border-color: var(--accent);
 }
 .feature-icon {
-    font-size: 2rem;
     display: block;
-    margin-bottom: 0.75rem;
 }
-.feature h3 {
-    font-size: 1rem;
-    font-weight: 600;
     margin-bottom: 0.5rem;
     color: var(--text-primary);
 }
-.feature p {
-    font-size: 0.875rem;
     color: var(--text-secondary);
 }
-.info, .requirements {
-    background: var(--bg-secondary);
     border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 1.5rem;
 }
-h2 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
-    color: var(--accent);
 }
-.info p {
     color: var(--text-secondary);
 }
-.requirements ul {
-    list-style: none;
     display: flex;
-    flex-direction: column;
     gap: 0.5rem;
 }
-.requirements li {
     color: var(--text-secondary);
-    padding-left: 1.5rem;
     position: relative;
 }
-.requirements li::before {
     content: "→";
     position: absolute;
     left: 0;
-    color: var(--accent-secondary);
 }
-footer {
-    margin-top: 3rem;
-    text-align: center;
-    padding-top: 1.5rem;
-    border-top: 1px solid var(--border);
 }
-footer p {
     color: var(--text-secondary);
 }
-footer a {
     color: var(--accent);
     text-decoration: none;
 }
-footer a:hover {
     text-decoration: underline;
 }
-@media (max-width: 480px) {
-    .container {
-        padding: 2rem 1rem;
     }
-    h1 {
-        font-size: 1.75rem;
     }
-    .logo {
         font-size: 2.5rem;
     }
-    .features {
         grid-template-columns: 1fr;
     }
 }

+/* Reachy iOS Bridge - Matching App Branding */
 * {
     margin: 0;
     padding: 0;
 }
 :root {
+    /* Light mode (default) - warm cream palette */
+    --bg-primary: #FBF5EF;
+    --bg-secondary: #F5EDE5;
+    --surface: #FFFFFF;
+    --text-primary: #2D3748;
+    --text-secondary: #5A6578;
+    --accent: #E8A954;
+    --accent-dark: #D4863A;
+    --accent-light: #F5C882;
+    --button-primary: #7889A8;
+    --button-primary-dark: #5F6F8C;
+    --success: #6B9B7A;
+    --warning: #E89B54;
+    --error: #C97066;
+    --divider: #E8E4DF;
+    --border: #E0DCD6;
+    --shadow: rgba(45, 55, 72, 0.08);
+    --code-bg: #F0EBE5;
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg-primary: #1A1815;
+        --bg-secondary: #141210;
+        --surface: #252220;
+        --text-primary: #F5F0E8;
+        --text-secondary: #A8A098;
+        --divider: #3A3632;
+        --border: #3A3632;
+        --shadow: rgba(0, 0, 0, 0.3);
+        --code-bg: #2D2A26;
+    }
+}
+html {
+    scroll-behavior: smooth;
 }
 body {
+    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
     background: var(--bg-primary);
     color: var(--text-primary);
     line-height: 1.6;
     min-height: 100vh;
 }
+.page-wrapper {
+    width: 100%;
+    overflow-x: hidden;
 }
+/* Navigation */
+.nav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 2rem;
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--divider);
+    backdrop-filter: blur(10px);
 }
+.nav-brand {
     display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }
+.nav-logo {
+    font-size: 1.5rem;
 }
+.nav-title {
+    font-family: 'DM Serif Display', Georgia, serif;
+    font-size: 1.25rem;
+    font-weight: 400;
+    color: var(--text-primary);
 }
+.nav-links {
+    display: flex;
+    gap: 2rem;
 }
+.nav-links a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 0.95rem;
+    transition: color 0.2s;
+}
+.nav-links a:hover {
+    color: var(--accent);
+}
+/* Hero Section */
+.hero {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+    padding: 5rem 4rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+.hero-badge {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: var(--accent);
+    color: white;
+    font-size: 0.8rem;
     font-weight: 600;
+    border-radius: 2rem;
+    margin-bottom: 1.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+.hero h1 {
+    font-family: 'DM Serif Display', Georgia, serif;
+    font-size: 3.5rem;
+    font-weight: 400;
+    line-height: 1.1;
+    margin-bottom: 1rem;
+    background: linear-gradient(135deg, var(--text-primary), var(--accent));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }
+.hero-tagline {
+    font-size: 1.5rem;
     color: var(--text-secondary);
+    margin-bottom: 1.5rem;
+    font-weight: 500;
+}
+.hero-description {
+    color: var(--text-secondary);
+    font-size: 1.1rem;
+    margin-bottom: 2rem;
+    max-width: 480px;
 }
+.hero-actions {
     display: flex;
+    gap: 1rem;
 }
+/* Buttons */
+.btn {
+    display: inline-block;
+    padding: 1rem 2rem;
+    border-radius: 2rem;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 600;
+    font-size: 1rem;
+    text-decoration: none;
+    transition: all 0.2s;
+    cursor: pointer;
+    border: none;
+}
+.btn-primary {
+    background: var(--accent);
+    color: white;
+}
+.btn-primary:hover {
+    background: var(--accent-dark);
+    transform: translateY(-2px);
+}
+.btn-secondary {
+    background: var(--surface);
+    color: var(--text-primary);
+    border: 1px solid var(--border);
+}
+.btn-secondary:hover {
+    background: var(--divider);
+}
+/* Hero Visual */
+.hero-visual {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.device-stack {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     gap: 1rem;
 }
+.device {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 2rem 3rem;
+    background: var(--surface);
+    border-radius: 1.5rem;
+    box-shadow: 0 8px 32px var(--shadow);
     border: 1px solid var(--border);
+}
+.device-icon {
+    font-size: 3rem;
+}
+.device-label {
+    font-weight: 600;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+.connection-line {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 0;
+}
+.signal {
+    width: 8px;
+    height: 8px;
+    background: var(--accent);
+    border-radius: 50%;
+    animation: pulse 1.5s ease-in-out infinite;
+}
+.signal:nth-child(2) { animation-delay: 0.3s; }
+.signal:nth-child(3) { animation-delay: 0.6s; }
+@keyframes pulse {
+    0%, 100% { opacity: 0.3; transform: scale(0.8); }
+    50% { opacity: 1; transform: scale(1); }
+}
+/* Sections */
+.section {
+    padding: 5rem 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+.section-alt {
+    background: var(--bg-secondary);
+    max-width: none;
+    padding-left: 2rem;
+    padding-right: 2rem;
+}
+.section-alt > * {
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+}
+.section-header {
     text-align: center;
+    margin-bottom: 3rem;
+}
+.section-header h2 {
+    font-family: 'DM Serif Display', Georgia, serif;
+    font-size: 2.5rem;
+    font-weight: 400;
+    margin-bottom: 0.75rem;
+    color: var(--text-primary);
+}
+.section-header p {
+    color: var(--text-secondary);
+    font-size: 1.1rem;
+}
+/* Features Grid */
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 1.5rem;
 }
+.feature-card {
+    background: var(--surface);
+    padding: 2rem;
+    border-radius: 1rem;
+    border: 1px solid var(--border);
+    transition: all 0.3s;
+}
+.feature-card:hover {
     transform: translateY(-4px);
+    box-shadow: 0 12px 32px var(--shadow);
     border-color: var(--accent);
 }
 .feature-icon {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
     display: block;
 }
+.feature-card h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
     margin-bottom: 0.5rem;
     color: var(--text-primary);
 }
+.feature-card p {
     color: var(--text-secondary);
+    font-size: 0.95rem;
 }
+/* Architecture */
+.architecture {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    max-width: 600px;
+    margin: 0 auto;
+}
+.arch-layer {
+    display: flex;
+    gap: 1.5rem;
+    padding: 2rem;
+    background: var(--surface);
+    border-radius: 1rem;
     border: 1px solid var(--border);
+    align-items: flex-start;
 }
+.arch-icon {
+    font-size: 2rem;
+    flex-shrink: 0;
+}
+.arch-content h3 {
+    font-size: 1.2rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
 }
+.arch-content p {
     color: var(--text-secondary);
+    font-size: 0.95rem;
+    margin-bottom: 0.75rem;
 }
+.arch-tags {
     display: flex;
+    flex-wrap: wrap;
     gap: 0.5rem;
 }
+.tag {
+    padding: 0.25rem 0.75rem;
+    background: var(--code-bg);
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+    border-radius: 1rem;
+    font-weight: 500;
+}
+.arch-connector {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0.5rem 0;
+}
+.connector-line {
+    width: 2px;
+    height: 24px;
+    background: linear-gradient(to bottom, var(--accent), var(--accent-light));
+}
+.connector-label {
+    font-size: 0.75rem;
+    color: var(--accent);
+    font-weight: 600;
+    margin-top: 0.25rem;
+}
+/* Steps */
+.steps {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    max-width: 700px;
+    margin: 0 auto;
+}
+.step {
+    display: flex;
+    gap: 1.5rem;
+}
+.step-number {
+    width: 48px;
+    height: 48px;
+    background: var(--accent);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+    font-weight: 700;
+    flex-shrink: 0;
+}
+.step-content h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+}
+.step-content p {
     color: var(--text-secondary);
+    margin-bottom: 0.75rem;
+}
+.step-content ul {
+    list-style: none;
+    padding: 0;
+}
+.step-content li {
+    color: var(--text-secondary);
+    padding: 0.25rem 0;
+    padding-left: 1.25rem;
     position: relative;
 }
+.step-content li::before {
     content: "→";
     position: absolute;
     left: 0;
+    color: var(--accent);
 }
+.step-note {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    font-style: italic;
+}
+.code-block {
+    background: var(--code-bg);
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    margin: 0.5rem 0;
+    overflow-x: auto;
+}
+.code-block code {
+    font-family: 'SF Mono', Consolas, monospace;
+    font-size: 0.9rem;
+    color: var(--text-primary);
+}
+code {
+    font-family: 'SF Mono', Consolas, monospace;
+    background: var(--code-bg);
+    padding: 0.15rem 0.4rem;
+    border-radius: 0.25rem;
+    font-size: 0.9em;
+}
+/* API Grid */
+.api-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+    gap: 1.5rem;
+}
+.api-card {
+    background: var(--surface);
+    padding: 1.5rem;
+    border-radius: 1rem;
+    border: 1px solid var(--border);
+}
+.api-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+}
+.api-method {
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+.api-method.get {
+    background: var(--success);
+    color: white;
+}
+.api-method.post {
+    background: var(--button-primary);
+    color: white;
+}
+.api-header code {
+    font-size: 1rem;
+    font-weight: 600;
+    background: transparent;
+    padding: 0;
+}
+.api-card > p {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    margin-bottom: 1rem;
+}
+.api-response {
+    background: var(--code-bg);
+    border-radius: 0.5rem;
+    overflow: hidden;
+}
+.api-response pre {
+    padding: 1rem;
+    font-family: 'SF Mono', Consolas, monospace;
+    font-size: 0.85rem;
+    color: var(--text-primary);
+    margin: 0;
+    overflow-x: auto;
 }
+.api-note {
+    margin-top: 0.75rem;
+    font-size: 0.85rem;
     color: var(--text-secondary);
 }
+.api-more {
+    text-align: center;
+    margin-top: 2rem;
+}
+.api-more a {
     color: var(--accent);
     text-decoration: none;
+    font-weight: 600;
 }
+.api-more a:hover {
     text-decoration: underline;
 }
+/* Voices Grid */
+.voices-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+}
+.voice-card {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    background: var(--surface);
+    border-radius: 1rem;
+    border: 1px solid var(--border);
+    transition: all 0.2s;
+}
+.voice-card:hover {
+    border-color: var(--accent);
+    transform: translateY(-2px);
+}
+.voice-avatar {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: 700;
+    font-size: 1.25rem;
+    flex-shrink: 0;
+}
+.voice-info h4 {
+    font-weight: 700;
+    font-size: 1rem;
+    margin-bottom: 0.125rem;
+}
+.voice-info p {
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+}
+/* Help Grid */
+.help-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+}
+.help-card {
+    background: var(--surface);
+    padding: 1.5rem;
+    border-radius: 1rem;
+    border: 1px solid var(--border);
+}
+.help-card h3 {
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+}
+.help-card ol {
+    padding-left: 1.25rem;
+}
+.help-card li {
+    color: var(--text-secondary);
+    padding: 0.35rem 0;
+    font-size: 0.95rem;
+}
+.help-card code {
+    font-size: 0.8rem;
+}
+/* Requirements Grid */
+.requirements-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2rem;
+    max-width: 700px;
+    margin: 0 auto;
+}
+.req-card {
+    background: var(--surface);
+    padding: 2rem;
+    border-radius: 1rem;
+    border: 1px solid var(--border);
+    text-align: center;
+}
+.req-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+.req-card h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+}
+.req-card ul {
+    list-style: none;
+    padding: 0;
+}
+.req-card li {
+    color: var(--text-secondary);
+    padding: 0.35rem 0;
+}
+/* Footer */
+.footer {
+    border-top: 1px solid var(--divider);
+    padding: 3rem 2rem;
+    margin-top: 2rem;
+}
+.footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    text-align: center;
+}
+.footer-brand {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-family: 'DM Serif Display', Georgia, serif;
+    font-size: 1.25rem;
+}
+.footer-logo {
+    font-size: 1.5rem;
+}
+.footer-links {
+    display: flex;
+    gap: 2rem;
+}
+.footer-links a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.2s;
+}
+.footer-links a:hover {
+    color: var(--accent);
+}
+.footer-copyright {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+/* Responsive */
+@media (max-width: 900px) {
+    .hero {
+        grid-template-columns: 1fr;
+        text-align: center;
+        padding: 3rem 1.5rem;
+        gap: 3rem;
+    }
+    .hero-description {
+        max-width: none;
     }
+    .hero-actions {
+        justify-content: center;
     }
+    .hero h1 {
         font-size: 2.5rem;
     }
+    .nav-links {
+        display: none;
+    }
+    .section {
+        padding: 3rem 1.5rem;
+    }
+    .section-header h2 {
+        font-size: 2rem;
+    }
+    .features-grid,
+    .api-grid,
+    .help-grid {
         grid-template-columns: 1fr;
     }
 }
+@media (max-width: 480px) {
+    .hero h1 {
+        font-size: 2rem;
+    }
+    .hero-tagline {
+        font-size: 1.2rem;
+    }
+    .device {
+        padding: 1.5rem 2rem;
+    }
+    .device-icon {
+        font-size: 2rem;
+    }
+    .hero-actions {
+        flex-direction: column;
+    }
+    .btn {
+        width: 100%;
+        text-align: center;
+    }
+    .voices-grid {
+        grid-template-columns: 1fr;
+    }
+}