Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Reachy Echo - Reachy Mini App</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=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <a href="https://www.runreachyrun.com" class="logo-link"> | |
| <img src="logo.png" alt="runreachyrun" class="logo"> | |
| </a> | |
| <div class="badge-wrapper"> | |
| <span class="badge">Reachy Mini App</span> | |
| </div> | |
| <h1>Reachy Echo</h1> | |
| <p class="tagline">A companion robot that remembers you and grows with you</p> | |
| </header> | |
| <main> | |
| <!-- Memory Demo --> | |
| <section class="demo-section"> | |
| <div class="demo-box"> | |
| <div class="robot-icon">🤖</div> | |
| <div class="memory-display"> | |
| <div class="memory-bubbles"> | |
| <div class="bubble left">"Hi Echo, my name is Alex"</div> | |
| <div class="bubble right">"Hello Alex! I'll remember that."</div> | |
| <div class="bubble left">...</div> | |
| <div class="bubble right">"Good morning, Alex! Ready for another day?"</div> | |
| </div> | |
| </div> | |
| <div class="memory-stats"> | |
| <span>Facts: 12</span> | |
| <span>Sessions: 47</span> | |
| <span>Days: 30</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Hero with 6 feature cards --> | |
| <section class="hero"> | |
| <div class="feature-grid"> | |
| <div class="feature"> | |
| <div class="icon-box purple"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> | |
| </div> | |
| <h3>Memory System</h3> | |
| <p>Remembers your name, preferences, and conversation history across sessions</p> | |
| </div> | |
| <div class="feature"> | |
| <div class="icon-box cyan"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg> | |
| </div> | |
| <h3>Proactive Greetings</h3> | |
| <p>Morning greetings, break reminders, and welcome backs when you return</p> | |
| </div> | |
| <div class="feature"> | |
| <div class="icon-box amber"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg> | |
| </div> | |
| <h3>Build Celebration</h3> | |
| <p>Detects successful builds and celebrates your coding wins</p> | |
| </div> | |
| <div class="feature"> | |
| <div class="icon-box green"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/><path d="M12 6v6l4 2"/></svg> | |
| </div> | |
| <h3>Work Break Reminder</h3> | |
| <p>After 2 hours of focus, suggests a healthy break</p> | |
| </div> | |
| <div class="feature"> | |
| <div class="icon-box purple"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="m9 12 2 2 4-4"/></svg> | |
| </div> | |
| <h3>18+ Models</h3> | |
| <p>Hot-swap between Llama, Claude, GPT, Gemini and more via LiteLLM</p> | |
| </div> | |
| <div class="feature"> | |
| <div class="icon-box cyan"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/></svg> | |
| </div> | |
| <h3>Privacy-First</h3> | |
| <p>All data stored locally. "Forget Me" button clears everything</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Install Section --> | |
| <section class="install"> | |
| <h2>Install on Your Reachy Mini</h2> | |
| <div class="install-steps"> | |
| <div class="step"> | |
| <span class="step-num">1</span> | |
| <div class="step-content"> | |
| <h4>Install the package</h4> | |
| <div class="code-block"> | |
| <code>pip install git+https://huggingface.co/spaces/RyeCatcher/reachy-echo</code> | |
| <button class="copy-btn" onclick="copyCode(this)">Copy</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <span class="step-num">2</span> | |
| <div class="step-content"> | |
| <h4>Start the Reachy Mini daemon</h4> | |
| <div class="code-block"> | |
| <code>reachy-mini-daemon</code> | |
| <button class="copy-btn" onclick="copyCode(this)">Copy</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <span class="step-num">3</span> | |
| <div class="step-content"> | |
| <h4>Launch from dashboard</h4> | |
| <p>Find Reachy Echo in Applications at <strong>localhost:8000</strong></p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How it works --> | |
| <section class="how-it-works"> | |
| <h2>How It Works</h2> | |
| <div class="workflow"> | |
| <div class="workflow-step"> | |
| <div class="workflow-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> | |
| </div> | |
| <p>Chat with Echo</p> | |
| </div> | |
| <div class="workflow-arrow">→</div> | |
| <div class="workflow-step"> | |
| <div class="workflow-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg> | |
| </div> | |
| <p>Echo extracts facts</p> | |
| </div> | |
| <div class="workflow-arrow">→</div> | |
| <div class="workflow-step"> | |
| <div class="workflow-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"/><path d="M12 6v6l4 2"/></svg> | |
| </div> | |
| <p>Memory grows over time</p> | |
| </div> | |
| <div class="workflow-arrow">→</div> | |
| <div class="workflow-step"> | |
| <div class="workflow-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="10" x="3" y="11" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" x2="8" y1="16" y2="16"/><line x1="16" x2="16" y1="16" y2="16"/></svg> | |
| </div> | |
| <p>Robot becomes companion</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Proactive Behaviors Table --> | |
| <section class="behaviors"> | |
| <h2>Proactive Behaviors</h2> | |
| <div class="behavior-table"> | |
| <div class="behavior-row"> | |
| <span class="behavior-name">Morning Greeting</span> | |
| <span class="behavior-trigger">6-11am, first appearance</span> | |
| <span class="behavior-cooldown">12 hours</span> | |
| </div> | |
| <div class="behavior-row"> | |
| <span class="behavior-name">Work Break Reminder</span> | |
| <span class="behavior-trigger">2 hours continuous work</span> | |
| <span class="behavior-cooldown">1 hour</span> | |
| </div> | |
| <div class="behavior-row"> | |
| <span class="behavior-name">Build Celebration</span> | |
| <span class="behavior-trigger">Success pattern detected</span> | |
| <span class="behavior-cooldown">2 minutes</span> | |
| </div> | |
| <div class="behavior-row"> | |
| <span class="behavior-name">Build Support</span> | |
| <span class="behavior-trigger">Failure pattern detected</span> | |
| <span class="behavior-cooldown">5 minutes</span> | |
| </div> | |
| <div class="behavior-row"> | |
| <span class="behavior-name">Return Greeting</span> | |
| <span class="behavior-trigger">30+ min absence</span> | |
| <span class="behavior-cooldown">1 hour</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About --> | |
| <section class="about"> | |
| <h2>About This Project</h2> | |
| <p> | |
| Echo transforms Reachy Mini from a voice interface into a <strong>relationship</strong>. | |
| Most robot apps forget everything between sessions. Echo remembers your name, | |
| your preferences, and your conversations — building a real connection over time. | |
| </p> | |
| <p> | |
| Part of the <strong>Run Reachy Run</strong> project — documenting the journey | |
| of building apps with Reachy Mini. Built with Claude Code. | |
| </p> | |
| <div class="about-links"> | |
| <a href="https://www.runreachyrun.com/apps/echo" target="_blank" rel="noopener">Learn more on runreachyrun.com →</a> | |
| <a href="https://huggingface.co/spaces/RyeCatcher/reachy-echo/tree/main" target="_blank" rel="noopener">View Source Code →</a> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <a href="https://www.runreachyrun.com" class="footer-logo-link"> | |
| <img src="logo.png" alt="runreachyrun" class="footer-logo"> | |
| <span class="footer-site-name">runreachyrun.com</span> | |
| </a> | |
| <div class="footer-links"> | |
| <a href="https://github.com/BioInfo/reachy" target="_blank" rel="noopener"> | |
| <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon"> | |
| <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> | |
| </svg> | |
| GitHub | |
| </a> | |
| <a href="https://twitter.com/bioinfo" target="_blank" rel="noopener"> | |
| <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon"> | |
| <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/> | |
| </svg> | |
| </a> | |
| <a href="https://huggingface.co/spaces/RyeCatcher/reachy-echo" target="_blank" rel="noopener"> | |
| <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon"> | |
| <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/> | |
| </svg> | |
| HuggingFace | |
| </a> | |
| <a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" rel="noopener"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="social-icon"> | |
| <rect x="3" y="11" width="18" height="10" rx="2"/> | |
| <circle cx="12" cy="5" r="3"/> | |
| </svg> | |
| Reachy Mini SDK | |
| </a> | |
| </div> | |
| <p class="copyright">MIT License · Built with Claude Code</p> | |
| </footer> | |
| </div> | |
| <script> | |
| function copyCode(btn) { | |
| const code = btn.parentElement.querySelector('code').textContent; | |
| navigator.clipboard.writeText(code).then(() => { | |
| btn.textContent = 'Copied!'; | |
| btn.classList.add('copied'); | |
| setTimeout(() => { | |
| btn.textContent = 'Copy'; | |
| btn.classList.remove('copied'); | |
| }, 2000); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |