Hugging Face's logo

Spaces:
pollen-robotics
/
Reachy-Mini_Best_Spaces
Running

App Files Community
Anne-Charlotte commited on
Commit
5ed5c81
·
verified ·
1 Parent(s): a2e9e90

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +103 -275
index.html CHANGED
@@ -1,280 +1,108 @@
1
- <!doctype html>
2
- <html>
3
-
4
  <head>
5
- <meta charset="utf-8" />
6
- <meta name="viewport" content="width=device-width" />
7
- <title>Example App - Reachy Mini Template</title>
8
- <link rel="stylesheet" href="style.css" />
 
9
  </head>
10
-
11
  <body>
12
- <div class="hero">
13
- <div class="hero-content">
14
- <div class="app-icon">🤖⚡</div>
15
- <h1>Example Reachy Mini App</h1>
16
- <p class="tagline">Template for creating your own Reachy Mini applications</p>
17
- </div>
18
- </div>
19
-
20
- <div class="container">
21
- <div class="main-card">
22
- <div class="app-preview">
23
- <div class="preview-image">
24
- <div class="camera-feed">🛠️</div>
25
- </div>
26
- </div>
27
- </div>
28
-
29
- <div class="app-details">
30
- <h2>Example Template App</h2>
31
- <div class="template-info">
32
- <div class="info-box">
33
- <h3>🎨 Template Purpose</h3>
34
- <p>This is an example landing page for Reachy Mini apps. Feel free to duplicate this template and
35
- customize it for your own applications!</p>
36
- </div>
37
- <div class="info-box">
38
- <h3>🚀 Getting Started</h3>
39
- <p>Use this template to showcase your Reachy Mini app with a landing page. Simply modify the
40
- content, add your app's repository URL, and deploy!</p>
41
- </div>
42
- </div>
43
-
44
-
45
- <div class="how-to-use">
46
- <h3>How to Use This Template</h3>
47
- <div class="steps">
48
- <div class="step">
49
- <span class="step-number">1</span>
50
- <div>
51
- <h4>Duplicate & Customize</h4>
52
- <p>Copy this template and modify the content for your app</p>
53
- </div>
54
- </div>
55
- <div class="step">
56
- <span class="step-number">2</span>
57
- <div>
58
- <h4>Update Repository URL</h4>
59
- <p>Change the JavaScript to point to your app's Git repository</p>
60
- </div>
61
- </div>
62
- <div class="step">
63
- <span class="step-number">3</span>
64
- <div>
65
- <h4>Deploy to HF Spaces</h4>
66
- <p>Upload your customized version to Hugging Face Spaces</p>
67
- </div>
68
- </div>
69
- </div>
70
- </div>
71
- </div>
72
- </div>
73
-
74
- <div class="download-section">
75
- <div class="download-card">
76
- <h2>Install This Example App</h2>
77
- <p>Try out the installation process with this template app</p>
78
-
79
- <div class="dashboard-config">
80
- <label for="dashboardUrl">Your Reachy Dashboard URL:</label>
81
- <input type="url" id="dashboardUrl" value="http://localhost:8000"
82
- placeholder="http://your-reachy-ip:8000" />
83
- </div>
84
-
85
- <button id="installBtn" class="install-btn primary">
86
- <span class="btn-icon">📥</span>
87
- Install Example App to Reachy
88
- </button>
89
-
90
- <div id="installStatus" class="install-status"></div>
91
-
92
- </div>
93
- </div>
94
-
95
- <div class="footer">
96
- <p>
97
- 🤖 Template for Reachy Mini Apps •
98
- <a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
99
- <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Apps" target="_blank">Browse More
100
- Apps</a>
101
- </p>
102
- </div>
103
- </div>
104
-
105
- <script>
106
- // Get the current Hugging Face Space URL as the repository URL
107
- function getCurrentSpaceUrl() {
108
- // Get current page URL and convert to repository format
109
- const currentUrl = window.location.href;
110
-
111
- // Remove any trailing slashes and query parameters
112
- const cleanUrl = currentUrl.split('?')[0].replace(/\/$/, '');
113
-
114
- return cleanUrl;
115
- }
116
-
117
- // Parse TOML content to extract project name
118
- function parseTomlProjectName(tomlContent) {
119
- try {
120
- const lines = tomlContent.split('\n');
121
- let inProjectSection = false;
122
-
123
- for (const line of lines) {
124
- const trimmedLine = line.trim();
125
-
126
- // Check if we're entering the [project] section
127
- if (trimmedLine === '[project]') {
128
- inProjectSection = true;
129
- continue;
130
- }
131
-
132
- // Check if we're entering a different section
133
- if (trimmedLine.startsWith('[') && trimmedLine !== '[project]') {
134
- inProjectSection = false;
135
- continue;
136
- }
137
-
138
- // If we're in the project section, look for the name field
139
- if (inProjectSection && trimmedLine.startsWith('name')) {
140
- const match = trimmedLine.match(/name\s*=\s*["']([^"']+)["']/);
141
- if (match) {
142
- // Convert to lowercase and replace invalid characters for app naming
143
- return match[1].toLowerCase().replace(/[^a-z0-9-_]/g, '-');
144
- }
145
- }
146
- }
147
-
148
- throw new Error('Project name not found in pyproject.toml');
149
- } catch (error) {
150
- console.error('Error parsing pyproject.toml:', error);
151
- return 'unknown-app';
152
- }
153
- }
154
-
155
- // Fetch and parse pyproject.toml from the current space
156
- async function getAppNameFromCurrentSpace() {
157
- try {
158
- // Fetch pyproject.toml from the current space
159
- const response = await fetch('./pyproject.toml');
160
- if (!response.ok) {
161
- throw new Error(`Failed to fetch pyproject.toml: ${response.status}`);
162
- }
163
-
164
- const tomlContent = await response.text();
165
- return parseTomlProjectName(tomlContent);
166
- } catch (error) {
167
- console.error('Error fetching app name from current space:', error);
168
- // Fallback to extracting from URL if pyproject.toml is not accessible
169
- const url = getCurrentSpaceUrl();
170
- const parts = url.split('/');
171
- const spaceName = parts[parts.length - 1];
172
- return spaceName.toLowerCase().replace(/[^a-z0-9-_]/g, '-');
173
- }
174
- }
175
-
176
- async function installToReachy() {
177
- const dashboardUrl = document.getElementById('dashboardUrl').value.trim();
178
- const statusDiv = document.getElementById('installStatus');
179
- const installBtn = document.getElementById('installBtn');
180
-
181
- if (!dashboardUrl) {
182
- showStatus('error', 'Please enter your Reachy dashboard URL');
183
- return;
184
- }
185
-
186
- try {
187
- installBtn.disabled = true;
188
- installBtn.innerHTML = '<span class="btn-icon">⏳</span>Installing...';
189
- showStatus('loading', 'Connecting to your Reachy dashboard...');
190
-
191
- // Test connection
192
- const testResponse = await fetch(`${dashboardUrl}/api/status`, {
193
- method: 'GET',
194
- mode: 'cors',
195
- });
196
-
197
- if (!testResponse.ok) {
198
- throw new Error('Cannot connect to dashboard. Make sure the URL is correct and the dashboard is running.');
199
- }
200
-
201
- showStatus('loading', 'Reading app configuration...');
202
-
203
- // Get app name from pyproject.toml in current space
204
- const appName = await getAppNameFromCurrentSpace();
205
-
206
- // Get current space URL as repository URL
207
- const repoUrl = getCurrentSpaceUrl();
208
-
209
- showStatus('loading', `Starting installation of "${appName}"...`);
210
-
211
- // Start installation
212
- const installResponse = await fetch(`${dashboardUrl}/api/install`, {
213
- method: 'POST',
214
- mode: 'cors',
215
- headers: {
216
- 'Content-Type': 'application/json',
217
- },
218
- body: JSON.stringify({
219
- url: repoUrl,
220
- name: appName
221
- })
222
- });
223
-
224
- const result = await installResponse.json();
225
-
226
- if (installResponse.ok) {
227
- showStatus('success', `✅ Installation started for "${appName}"! Check your dashboard for progress.`);
228
- setTimeout(() => {
229
- showStatus('info', `Open your dashboard at ${dashboardUrl} to see the installed app.`);
230
- }, 3000);
231
- } else {
232
- throw new Error(result.detail || 'Installation failed');
233
- }
234
-
235
- } catch (error) {
236
- console.error('Installation error:', error);
237
- showStatus('error', `❌ ${error.message}`);
238
- } finally {
239
- installBtn.disabled = false;
240
- installBtn.innerHTML = '<span class="btn-icon">📥</span>Install App to Reachy';
241
- }
242
- }
243
-
244
- function showStatus(type, message) {
245
- const statusDiv = document.getElementById('installStatus');
246
- statusDiv.className = `install-status ${type}`;
247
- statusDiv.textContent = message;
248
- statusDiv.style.display = 'block';
249
- }
250
-
251
- function copyToClipboard() {
252
- const repoUrl = document.getElementById('repoUrl').textContent;
253
- navigator.clipboard.writeText(repoUrl).then(() => {
254
- showStatus('success', '📋 Repository URL copied to clipboard!');
255
- }).catch(() => {
256
- showStatus('error', 'Failed to copy URL. Please copy manually.');
257
- });
258
- }
259
-
260
- // Update the displayed repository URL on page load
261
- document.addEventListener('DOMContentLoaded', () => {
262
- // Auto-detect local dashboard
263
- const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
264
- if (isLocalhost) {
265
- document.getElementById('dashboardUrl').value = 'http://localhost:8000';
266
- }
267
-
268
- // Update the repository URL display if element exists
269
- const repoUrlElement = document.getElementById('repoUrl');
270
- if (repoUrlElement) {
271
- repoUrlElement.textContent = getCurrentSpaceUrl();
272
- }
273
- });
274
-
275
- // Event listeners
276
- document.getElementById('installBtn').addEventListener('click', installToReachy);
277
- </script>
278
  </body>
279
-
280
  </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>Awesome Reachy Mini Apps</title>
7
+ <meta name="description" content="A collection of awesome applications and demos built for the Reachy Mini robot">
8
+ <link rel="stylesheet" href="style.css">
9
  </head>
 
10
  <body>
11
+ <div class="container">
12
+ <header class="hero">
13
+ <div class="hero-content">
14
+ <h1 class="hero-title">
15
+ <span class="gradient-text">Awesome Reachy Mini Apps</span>
16
+ </h1>
17
+ <p class="hero-description">
18
+ A curated collection of applications and demos showcasing the capabilities of Reachy Mini in robotics, AI, and human-robot interaction.
19
+ </p>
20
+ <div class="hero-badges">
21
+ <span class="badge">Robotics</span>
22
+ <span class="badge">AI</span>
23
+ <span class="badge">HRI</span>
24
+ </div>
25
+ </div>
26
+ </header>
27
+
28
+ <main class="main-content">
29
+ <section class="intro-section">
30
+ <h2>About This Collection</h2>
31
+ <p>
32
+ This repository contains a collection of awesome applications and demos built for the Reachy Mini robot.
33
+ These applications showcase the capabilities of Reachy Mini in various domains, including robotics, AI,
34
+ and human-robot interaction.
35
+ </p>
36
+ <p class="cta-text">Feel free to explore and contribute to this list!</p>
37
+ </section>
38
+
39
+ <section class="apps-section">
40
+ <h2 class="section-title">Applications & Demos</h2>
41
+
42
+ <div class="apps-grid">
43
+ <article class="app-card">
44
+ <div class="card-header">
45
+ <h3 class="card-title">Conversational Demo</h3>
46
+ <span class="author-badge">by Pollen Robotics</span>
47
+ </div>
48
+ <p class="card-description">
49
+ A demo that combines LLM realtime APIs, vision pipelines, and choreographed motion libraries
50
+ to enable natural conversations with Reachy Mini.
51
+ </p>
52
+ <div class="card-footer">
53
+ <a href="https://github.com/pollen-robotics/reachy_mini_conversation_demo"
54
+ class="card-link"
55
+ target="_blank"
56
+ rel="noopener noreferrer">
57
+ <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
58
+ <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
59
+ </svg>
60
+ View on GitHub
61
+ </a>
62
+ </div>
63
+ </article>
64
+
65
+ <article class="app-card">
66
+ <div class="card-header">
67
+ <h3 class="card-title">Reachy Mini Dancer</h3>
68
+ <span class="author-badge">by @Townie</span>
69
+ </div>
70
+ <p class="card-description">
71
+ A desktop viewer with daemon UI and choreography system that brings Reachy Mini to life
72
+ through expressive dance movements and coordinated motion sequences.
73
+ </p>
74
+ <div class="card-footer">
75
+ <a href="https://github.com/LAURA-agent/reachy_mini_dancer"
76
+ class="card-link"
77
+ target="_blank"
78
+ rel="noopener noreferrer">
79
+ <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
80
+ <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
81
+ </svg>
82
+ View on GitHub
83
+ </a>
84
+ </div>
85
+ </article>
86
+ </div>
87
+ </section>
88
+
89
+ <section class="contribute-section">
90
+ <div class="contribute-card">
91
+ <h2>Want to Contribute?</h2>
92
+ <p>
93
+ Have you built something awesome with Reachy Mini? We'd love to feature your project!
94
+ Contributions are welcome and encouraged.
95
+ </p>
96
+ <a href="https://github.com" class="contribute-button" target="_blank" rel="noopener noreferrer">
97
+ Contribute Your App
98
+ </a>
99
+ </div>
100
+ </section>
101
+ </main>
102
+
103
+ <footer class="footer">
104
+ <p>Built with ❤️ for the Reachy Mini Community</p>
105
+ </footer>
106
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
107
  </body>
 
108
  </html>