Hugging Face's logo

Spaces:
pollen-robotics
/
Reachy_Mini_Assembly_Guide
Running

App Files Community
Anne-Charlotte commited on
Commit
decb267
·
verified ·
1 Parent(s): 80351db

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +93 -229
index.html CHANGED
@@ -3,264 +3,128 @@
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="assets/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="assets/how-to-create-hf-space-for-reachy-mini-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="assets/how-to-create-hf-space-for-reachy-mini-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="assets/how-to-create-hf-space-for-reachy-mini-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="assets/how-to-create-hf-space-for-reachy-mini-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="assets/how-to-create-hf-space-for-reachy-mini-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="assets/how-to-create-hf-space-for-reachy-mini-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="assets/how-to-create-hf-space-for-reachy-mini-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="assets/how-to-create-hf-space-for-reachy-mini-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="assets/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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Reachy Mini Robot - Assembly Guide</title>
7
+ <meta name="description" content="Step-by-step assembly guide for Reachy Mini Robot. Follow 51 detailed steps to build your robot.">
8
  <link rel="stylesheet" href="style.css">
9
  </head>
10
  <body>
11
+ <!-- Header -->
12
+ <header class="header">
 
 
13
  <div class="container">
14
+ <div class="header-content">
15
+ <div class="header-left">
16
+ <img src="reachy-mini-icon-happy.png" alt="Reachy Mini Robot" class="robot-icon">
17
+ <div>
18
+ <h1 class="title">Reachy Mini Robot</h1>
19
+ <p class="subtitle">Assembly Guide</p>
20
+ </div>
21
+ </div>
22
+ <div class="steps-badge">
23
+ <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
24
+ <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
25
+ </svg>
26
+ <span class="steps-text">51 Steps</span>
27
+ </div>
28
  </div>
29
+ </div>
30
+ </header>
31
 
32
+ <!-- Main Content -->
33
+ <main class="main-content">
34
+ <div class="container">
35
+ <!-- Introduction -->
36
+ <div class="intro-section">
37
+ <h2 class="intro-title">Welcome to Your Assembly Journey</h2>
38
+ <p class="intro-text">
39
+ Follow this step-by-step guide to assemble your Reachy Mini Robot.
40
+ Use the navigation buttons to move through each step at your own pace.
41
+ </p>
42
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
 
44
+ <!-- Carousel -->
45
+ <div class="carousel">
46
+ <!-- Step Counter -->
47
+ <div class="step-counter">
48
+ <span id="stepDisplay" class="step-counter-text">Step 1/51</span>
49
+ </div>
 
 
 
 
50
 
51
+ <!-- Image Display -->
52
+ <div class="image-container">
53
+ <img id="stepImage" src="steps/step1.jpg" alt="Assembly step 1" class="step-image">
54
+ <div id="placeholderText" class="placeholder" style="display: none;">
55
+ <div class="placeholder-icon">
56
+ <span id="placeholderNumber">1</span>
 
 
 
57
  </div>
58
+ <p class="placeholder-text">Step <span id="placeholderStep">1</span> image will be added here</p>
59
  </div>
60
+ </div>
61
 
62
+ <!-- Navigation Controls -->
63
+ <div class="controls">
64
+ <div class="controls-top">
65
+ <button id="prevBtn" class="btn btn-secondary">
66
+ <svg class="icon-left" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
67
+ <polyline points="15 18 9 12 15 6"></polyline>
68
+ </svg>
69
+ Previous
70
+ </button>
71
+
72
+ <!-- Step Indicators -->
73
+ <div class="indicators" id="indicators"></div>
74
+
75
+ <button id="nextBtn" class="btn btn-primary">
76
+ Next
77
+ <svg class="icon-right" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
78
+ <polyline points="9 18 15 12 9 6"></polyline>
79
+ </svg>
80
+ </button>
81
+ </div>
82
 
83
+ <!-- Progress Bar -->
84
+ <div class="progress-bar">
85
+ <div id="progressFill" class="progress-fill"></div>
 
 
 
 
 
 
 
86
  </div>
87
  </div>
88
  </div>
89
 
90
+ <!-- Tips Section -->
91
+ <div class="tips-grid">
92
+ <div class="tip-card">
93
+ <div class="tip-icon">⏱️</div>
94
+ <h3 class="tip-title">Take Your Time</h3>
95
+ <p class="tip-text">
96
+ Each step is designed to be completed in approximately 1 minute. Don't rush!
97
+ </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  </div>
99
 
100
+ <div class="tip-card">
101
+ <div class="tip-icon">🔧</div>
102
+ <h3 class="tip-title">Check Your Parts</h3>
103
+ <p class="tip-text">
104
+ Make sure you have all the components listed in each step before proceeding.
105
+ </p>
106
  </div>
107
 
108
+ <div class="tip-card">
109
+ <div class="tip-icon">✨</div>
110
+ <h3 class="tip-title">Have Fun!</h3>
111
+ <p class="tip-text">
112
+ Enjoy the assembly process and watch your Reachy Mini come to life.
113
+ </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
114
  </div>
115
  </div>
116
  </div>
117
+ </main>
118
 
119
  <!-- Footer -->
120
  <footer class="footer">
121
  <div class="container">
122
+ <p class="footer-text">
123
+ Need help? Check the documentation or contact support.
124
+ </p>
 
125
  </div>
126
  </footer>
127
 
128
+ <script src="script.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
129
  </body>
130
  </html>