Hugging Face's logo

Spaces:
pollen-robotics
/
Reachy_Mini_Assembly_Guide
Running

App Files Community
Anne-Charlotte commited on
Commit
1f65238
·
verified ·
1 Parent(s): fbb7131

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +262 -276
index.html CHANGED
@@ -1,280 +1,266 @@
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>Reachy Mini Space Template</title>
7
+ <link rel="stylesheet" href="style.css">
8
  </head>
 
9
  <body>
10
+ <!-- ============================================ -->
11
+ <!-- GUIDE PART - DELETE THIS SECTION BEFORE PUBLISHING -->
12
+ <!-- ============================================ -->
13
+ <section class="guide-section">
14
+ <div class="container">
15
+ <div class="guide-header">
16
+ <img src="reachy-mini-icon-happy.png" alt="Reachy Mini Robot" class="robot-icon">
17
+ <h1>Reachy Mini Template</h1>
18
+ <p class="guide-description">
19
+ Duplicate and customize this template to quickly set up a Space for your Reachy Mini project.
20
+ Add your app's content, repository URL, and deploy your Space in just a few minutes!
21
+ </p>
22
+ <p class="guide-info">
23
+ Creating a Hugging Face Space for your Reachy Mini app will make it visible on the Hugging Face platform
24
+ and directly accessible from the Reachy Mini dashboard, so users can easily discover, install, and run your
25
+ app on their robots.
26
+ </p>
27
+ </div>
28
+
29
+ <div class="how-to-section">
30
+ <h2>How to Use This Template</h2>
31
+
32
+ <!-- Carousel -->
33
+ <div class="carousel">
34
+ <div class="carousel-inner">
35
+ <!-- Step 1 -->
36
+ <div class="carousel-item active">
37
+ <div class="step-content">
38
+ <img src="step1.png" alt="Step 1: Duplicate this space" class="step-image">
39
+ <div class="step-text">
40
+ <h3>STEP 1: Duplicate this space</h3>
41
+ <p>Click on the three dots menu and select "Duplicate this Space" to create your own copy.</p>
42
+ </div>
43
+ </div>
44
+ </div>
45
+
46
+ <!-- Step 2 -->
47
+ <div class="carousel-item">
48
+ <div class="step-content">
49
+ <img src="step2.png" alt="Step 2: Change the name" class="step-image">
50
+ <div class="step-text">
51
+ <h3>STEP 2: Change the name of the space</h3>
52
+ <p><strong>NOTE:</strong> Put visibility on 'Private' as long as your space is not ready for new users.</p>
53
+ </div>
54
+ </div>
55
+ </div>
56
+
57
+ <!-- Step 3 -->
58
+ <div class="carousel-item">
59
+ <div class="step-content">
60
+ <img src="step3.png" alt="Step 3: Go to Files" class="step-image">
61
+ <div class="step-text">
62
+ <h3>STEP 3: Go to "Files"</h3>
63
+ <p>Navigate to the Files tab to access your Space's code and configuration files.</p>
64
+ </div>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Step 4 -->
69
+ <div class="carousel-item">
70
+ <div class="step-content">
71
+ <img src="step4.png" alt="Step 4: Edit README.md" class="step-image">
72
+ <div class="step-text">
73
+ <h3>STEP 4: Click on README.md section, then on the 'Edit' button</h3>
74
+ <p>The README.md contains your Space's metadata and configuration.</p>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
79
+ <!-- Step 5 -->
80
+ <div class="carousel-item">
81
+ <div class="step-content">
82
+ <img src="step5.png" alt="Step 5: Update metadata" class="step-image">
83
+ <div class="step-text">
84
+ <h3>STEP 5: Update your Space's metadata</h3>
85
+ <p>This will update your Space's thumbnail across all Hugging Face Spaces.
86
+ Make sure to include a clear description and add the <code>reachy_mini</code> tag so people can easily find your Space.</p>
87
+ </div>
88
+ </div>
89
+ </div>
90
+
91
+ <!-- Step 6 -->
92
+ <div class="carousel-item">
93
+ <div class="step-content">
94
+ <img src="step6.png" alt="Step 6: Update HTML and CSS" class="step-image">
95
+ <div class="step-text">
96
+ <h3>STEP 6: Update index.html and style.css</h3>
97
+ <p>Create a nice landing page for your Space. This is the storefront of your space.
98
+ Add as much useful information as possible so future users will want to install it.
99
+ Clearly state the goals and benefits of your space, and don't hesitate to mention its
100
+ limitations to encourage potential contributions.</p>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Step 7 -->
106
+ <div class="carousel-item">
107
+ <div class="step-content">
108
+ <img src="step7.png" alt="Step 7: Update Repository URL" class="step-image">
109
+ <div class="step-text">
110
+ <h3>STEP 7: Update Repository URL</h3>
111
+ <p>Change the JavaScript to point to your space's Git repository so users can install your app.</p>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Step 8 -->
117
+ <div class="carousel-item">
118
+ <div class="step-content">
119
+ <img src="step8.png" alt="Step 8: Make your space public" class="step-image">
120
+ <div class="step-text">
121
+ <h3>STEP 8: Put your space on PUBLIC</h3>
122
+ <p>Once everything is ready and tested, change your Space visibility to Public so everyone can use it!</p>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Carousel Controls -->
129
+ <button class="carousel-control prev" onclick="changeSlide(-1)">&#10094;</button>
130
+ <button class="carousel-control next" onclick="changeSlide(1)">&#10095;</button>
131
+
132
+ <!-- Carousel Indicators -->
133
+ <div class="carousel-indicators">
134
+ <span class="indicator active" onclick="currentSlide(1)"></span>
135
+ <span class="indicator" onclick="currentSlide(2)"></span>
136
+ <span class="indicator" onclick="currentSlide(3)"></span>
137
+ <span class="indicator" onclick="currentSlide(4)"></span>
138
+ <span class="indicator" onclick="currentSlide(5)"></span>
139
+ <span class="indicator" onclick="currentSlide(6)"></span>
140
+ <span class="indicator" onclick="currentSlide(7)"></span>
141
+ <span class="indicator" onclick="currentSlide(8)"></span>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="delete-warning">
147
+ ⚠️ <strong>Don't forget to remove this customization guide before making your Space public!</strong>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Separator -->
153
+ <div class="separator">
154
+ <h2>The template starts here 👇</h2>
155
+ </div>
156
+
157
+ <!-- ============================================ -->
158
+ <!-- CUSTOMIZATION PART - YOUR SPACE TEMPLATE -->
159
+ <!-- ============================================ -->
160
+ <section class="template-section">
161
+ <div class="container">
162
+ <!-- Hero Section -->
163
+ <div class="hero">
164
+ <img src="reachy-mini-icon-happy.png" alt="Reachy Mini Robot" class="hero-robot-icon">
165
+ <h1 class="hero-title">Your Space Title Here</h1>
166
+
167
+ <!-- Placeholder for user's demo image/GIF -->
168
+ <div class="demo-placeholder">
169
+ <p>Add your image, GIF, or demo of your Reachy Mini project here</p>
170
+ </div>
171
+
172
+ <!-- Keywords -->
173
+ <div class="keywords">
174
+ <span class="keyword">AI</span>
175
+ <span class="keyword">Fun</span>
176
+ <span class="keyword">LLM</span>
177
+ <span class="keyword">VLM</span>
178
+ </div>
179
+
180
+ <!-- Description -->
181
+ <p class="description">
182
+ Your space description here. Write a short and clear description so people immediately understand
183
+ your project. Be sure to describe your space well and include relevant keywords so people can easily
184
+ find it. The more details you add, the more attractive and useful your space will be for future users!
185
+ </p>
186
+
187
+ <!-- Install Button -->
188
+ <button class="install-button" onclick="installToReachy()">
189
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
190
+ <path d="M10 2V14M10 14L14 10M10 14L6 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
191
+ <path d="M2 18H18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
192
+ </svg>
193
+ Install to Your Reachy Mini
194
+ </button>
195
+
196
+ <!-- Dashboard URL Input (hidden by default) -->
197
+ <div id="dashboard-input" class="dashboard-input" style="display: none;">
198
+ <label for="dashboardUrl">Your Reachy Dashboard URL:</label>
199
+ <input type="text" id="dashboardUrl" placeholder="http://localhost:8000" value="http://localhost:8000">
200
+ <button onclick="proceedInstall()">Proceed with Installation</button>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </section>
205
+
206
+ <!-- Footer -->
207
+ <footer class="footer">
208
+ <div class="container">
209
+ <p>Created by <strong>[Your Name]</strong></p>
210
+ <a href="https://huggingface.co/spaces?search=reachy_mini" target="_blank" class="browse-link">
211
+ Browse More Reachy Mini Spaces →
212
+ </a>
213
+ </div>
214
+ </footer>
215
+
216
+ <!-- JavaScript -->
217
+ <script>
218
+ // Carousel functionality
219
+ let currentSlideIndex = 1;
220
+ showSlide(currentSlideIndex);
221
+
222
+ function changeSlide(n) {
223
+ showSlide(currentSlideIndex += n);
224
+ }
225
+
226
+ function currentSlide(n) {
227
+ showSlide(currentSlideIndex = n);
228
+ }
229
+
230
+ function showSlide(n) {
231
+ const slides = document.getElementsByClassName("carousel-item");
232
+ const indicators = document.getElementsByClassName("indicator");
233
+
234
+ if (n > slides.length) { currentSlideIndex = 1; }
235
+ if (n < 1) { currentSlideIndex = slides.length; }
236
+
237
+ for (let i = 0; i < slides.length; i++) {
238
+ slides[i].classList.remove("active");
239
+ }
240
+ for (let i = 0; i < indicators.length; i++) {
241
+ indicators[i].classList.remove("active");
242
+ }
243
+
244
+ slides[currentSlideIndex - 1].classList.add("active");
245
+ indicators[currentSlideIndex - 1].classList.add("active");
246
+ }
247
+
248
+ // Install functionality
249
+ function installToReachy() {
250
+ document.getElementById('dashboard-input').style.display = 'flex';
251
+ }
252
+
253
+ function proceedInstall() {
254
+ const dashboardUrl = document.getElementById('dashboardUrl').value;
255
+ // TODO: Update this URL to point to YOUR SPACE's Git repository
256
+ const repoUrl = 'https://huggingface.co/spaces/YOUR-USERNAME/YOUR-SPACE-NAME';
257
+
258
+ // Construct the installation URL
259
+ const installUrl = `${dashboardUrl}/install?repo=${encodeURIComponent(repoUrl)}`;
260
+
261
+ // Open in new window
262
+ window.open(installUrl, '_blank');
263
+ }
264
+ </script>
 
 
 
 
 
 
 
 
 
 
 
265
  </body>
266
+ </html>