Hugging Face's logo

Spaces:
RyeCatcher
/
echo
Running

App Files Community
1
RyeCatcher commited on
Commit
3d13631
·
verified ·
1 Parent(s): db82088

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +261 -18
index.html CHANGED
@@ -1,19 +1,262 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Reachy Echo - Reachy Mini App</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
11
+ </head>
12
+ <body>
13
+ <div class="container">
14
+ <header>
15
+ <a href="https://www.runreachyrun.com" class="logo-link">
16
+ <img src="logo.png" alt="runreachyrun" class="logo">
17
+ </a>
18
+ <div class="badge-wrapper">
19
+ <span class="badge">Reachy Mini App</span>
20
+ </div>
21
+ <h1>Reachy Echo</h1>
22
+ <p class="tagline">A companion robot that remembers you and grows with you</p>
23
+ </header>
24
+
25
+ <main>
26
+ <!-- Memory Demo -->
27
+ <section class="demo-section">
28
+ <div class="demo-box">
29
+ <div class="robot-icon">🤖</div>
30
+ <div class="memory-display">
31
+ <div class="memory-bubbles">
32
+ <div class="bubble left">"Hi Echo, my name is Alex"</div>
33
+ <div class="bubble right">"Hello Alex! I'll remember that."</div>
34
+ <div class="bubble left">...</div>
35
+ <div class="bubble right">"Good morning, Alex! Ready for another day?"</div>
36
+ </div>
37
+ </div>
38
+ <div class="memory-stats">
39
+ <span>Facts: 12</span>
40
+ <span>Sessions: 47</span>
41
+ <span>Days: 30</span>
42
+ </div>
43
+ </div>
44
+ </section>
45
+
46
+ <!-- Hero with 6 feature cards -->
47
+ <section class="hero">
48
+ <div class="feature-grid">
49
+ <div class="feature">
50
+ <div class="icon-box purple">
51
+ <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>
52
+ </div>
53
+ <h3>Memory System</h3>
54
+ <p>Remembers your name, preferences, and conversation history across sessions</p>
55
+ </div>
56
+ <div class="feature">
57
+ <div class="icon-box cyan">
58
+ <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>
59
+ </div>
60
+ <h3>Proactive Greetings</h3>
61
+ <p>Morning greetings, break reminders, and welcome backs when you return</p>
62
+ </div>
63
+ <div class="feature">
64
+ <div class="icon-box amber">
65
+ <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>
66
+ </div>
67
+ <h3>Build Celebration</h3>
68
+ <p>Detects successful builds and celebrates your coding wins</p>
69
+ </div>
70
+ <div class="feature">
71
+ <div class="icon-box green">
72
+ <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>
73
+ </div>
74
+ <h3>Work Break Reminder</h3>
75
+ <p>After 2 hours of focus, suggests a healthy break</p>
76
+ </div>
77
+ <div class="feature">
78
+ <div class="icon-box purple">
79
+ <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>
80
+ </div>
81
+ <h3>18+ Models</h3>
82
+ <p>Hot-swap between Llama, Claude, GPT, Gemini and more via LiteLLM</p>
83
+ </div>
84
+ <div class="feature">
85
+ <div class="icon-box cyan">
86
+ <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>
87
+ </div>
88
+ <h3>Privacy-First</h3>
89
+ <p>All data stored locally. "Forget Me" button clears everything</p>
90
+ </div>
91
+ </div>
92
+ </section>
93
+
94
+ <!-- Install Section -->
95
+ <section class="install">
96
+ <h2>Install on Your Reachy Mini</h2>
97
+ <div class="install-steps">
98
+ <div class="step">
99
+ <span class="step-num">1</span>
100
+ <div class="step-content">
101
+ <h4>Install the package</h4>
102
+ <div class="code-block">
103
+ <code>pip install git+https://huggingface.co/spaces/RyeCatcher/reachy-echo</code>
104
+ <button class="copy-btn" onclick="copyCode(this)">Copy</button>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ <div class="step">
109
+ <span class="step-num">2</span>
110
+ <div class="step-content">
111
+ <h4>Start the Reachy Mini daemon</h4>
112
+ <div class="code-block">
113
+ <code>reachy-mini-daemon</code>
114
+ <button class="copy-btn" onclick="copyCode(this)">Copy</button>
115
+ </div>
116
+ </div>
117
+ </div>
118
+ <div class="step">
119
+ <span class="step-num">3</span>
120
+ <div class="step-content">
121
+ <h4>Launch from dashboard</h4>
122
+ <p>Find Reachy Echo in Applications at <strong>localhost:8000</strong></p>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </section>
127
+
128
+ <!-- How it works -->
129
+ <section class="how-it-works">
130
+ <h2>How It Works</h2>
131
+ <div class="workflow">
132
+ <div class="workflow-step">
133
+ <div class="workflow-icon">
134
+ <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>
135
+ </div>
136
+ <p>Chat with Echo</p>
137
+ </div>
138
+ <div class="workflow-arrow">→</div>
139
+ <div class="workflow-step">
140
+ <div class="workflow-icon">
141
+ <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>
142
+ </div>
143
+ <p>Echo extracts facts</p>
144
+ </div>
145
+ <div class="workflow-arrow">→</div>
146
+ <div class="workflow-step">
147
+ <div class="workflow-icon">
148
+ <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>
149
+ </div>
150
+ <p>Memory grows over time</p>
151
+ </div>
152
+ <div class="workflow-arrow">→</div>
153
+ <div class="workflow-step">
154
+ <div class="workflow-icon">
155
+ <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>
156
+ </div>
157
+ <p>Robot becomes companion</p>
158
+ </div>
159
+ </div>
160
+ </section>
161
+
162
+ <!-- Proactive Behaviors Table -->
163
+ <section class="behaviors">
164
+ <h2>Proactive Behaviors</h2>
165
+ <div class="behavior-table">
166
+ <div class="behavior-row">
167
+ <span class="behavior-name">Morning Greeting</span>
168
+ <span class="behavior-trigger">6-11am, first appearance</span>
169
+ <span class="behavior-cooldown">12 hours</span>
170
+ </div>
171
+ <div class="behavior-row">
172
+ <span class="behavior-name">Work Break Reminder</span>
173
+ <span class="behavior-trigger">2 hours continuous work</span>
174
+ <span class="behavior-cooldown">1 hour</span>
175
+ </div>
176
+ <div class="behavior-row">
177
+ <span class="behavior-name">Build Celebration</span>
178
+ <span class="behavior-trigger">Success pattern detected</span>
179
+ <span class="behavior-cooldown">2 minutes</span>
180
+ </div>
181
+ <div class="behavior-row">
182
+ <span class="behavior-name">Build Support</span>
183
+ <span class="behavior-trigger">Failure pattern detected</span>
184
+ <span class="behavior-cooldown">5 minutes</span>
185
+ </div>
186
+ <div class="behavior-row">
187
+ <span class="behavior-name">Return Greeting</span>
188
+ <span class="behavior-trigger">30+ min absence</span>
189
+ <span class="behavior-cooldown">1 hour</span>
190
+ </div>
191
+ </div>
192
+ </section>
193
+
194
+ <!-- About -->
195
+ <section class="about">
196
+ <h2>About This Project</h2>
197
+ <p>
198
+ Echo transforms Reachy Mini from a voice interface into a <strong>relationship</strong>.
199
+ Most robot apps forget everything between sessions. Echo remembers your name,
200
+ your preferences, and your conversations — building a real connection over time.
201
+ </p>
202
+ <p>
203
+ Part of the <strong>Run Reachy Run</strong> project — documenting the journey
204
+ of building apps with Reachy Mini. Built with Claude Code.
205
+ </p>
206
+ <div class="about-links">
207
+ <a href="https://www.runreachyrun.com/apps/echo" target="_blank" rel="noopener">Learn more on runreachyrun.com →</a>
208
+ <a href="https://huggingface.co/spaces/RyeCatcher/reachy-echo/tree/main" target="_blank" rel="noopener">View Source Code →</a>
209
+ </div>
210
+ </section>
211
+ </main>
212
+
213
+ <footer>
214
+ <a href="https://www.runreachyrun.com" class="footer-logo-link">
215
+ <img src="logo.png" alt="runreachyrun" class="footer-logo">
216
+ <span class="footer-site-name">runreachyrun.com</span>
217
+ </a>
218
+ <div class="footer-links">
219
+ <a href="https://github.com/BioInfo/reachy" target="_blank" rel="noopener">
220
+ <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon">
221
+ <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"/>
222
+ </svg>
223
+ GitHub
224
+ </a>
225
+ <a href="https://twitter.com/bioinfo" target="_blank" rel="noopener">
226
+ <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon">
227
+ <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"/>
228
+ </svg>
229
+ Twitter
230
+ </a>
231
+ <a href="https://huggingface.co/spaces/RyeCatcher/reachy-echo" target="_blank" rel="noopener">
232
+ <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon">
233
+ <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"/>
234
+ </svg>
235
+ HuggingFace
236
+ </a>
237
+ <a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" rel="noopener">
238
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="social-icon">
239
+ <rect x="3" y="11" width="18" height="10" rx="2"/>
240
+ <circle cx="12" cy="5" r="3"/>
241
+ </svg>
242
+ Reachy Mini SDK
243
+ </a>
244
+ </div>
245
+ <p class="copyright">MIT License · Built with Claude Code</p>
246
+ </footer>
247
+ </div>
248
+ <script>
249
+ function copyCode(btn) {
250
+ const code = btn.parentElement.querySelector('code').textContent;
251
+ navigator.clipboard.writeText(code).then(() => {
252
+ btn.textContent = 'Copied!';
253
+ btn.classList.add('copied');
254
+ setTimeout(() => {
255
+ btn.textContent = 'Copy';
256
+ btn.classList.remove('copied');
257
+ }, 2000);
258
+ });
259
+ }
260
+ </script>
261
+ </body>
262
  </html>