Hugging Face's logo

Spaces:
pollen-robotics
/
hand_tracker_app
Running

App Files Community
cduss commited on
Commit
f80fdc0
·
1 Parent(s): 5e72799

update front

Browse files
Files changed (1) hide show
  1. index.html +90 -102
index.html CHANGED
@@ -22,131 +22,112 @@
22
  <div class="app-preview">
23
  <div class="preview-image">
24
  <div class="camera-feed">🛠️</div>
25
- <div class="detection-overlay">
26
- <div class="bbox">🎯 Your Code Here</div>
27
- <div class="bbox">⚙️ Build Something Cool</div>
28
- </div>
29
  </div>
30
  </div>
 
31
 
32
- <div class="app-details">
33
- <h2>Example Template App</h2>
34
- <div class="template-info">
35
- <div class="info-box">
36
- <h3>🎨 Template Purpose</h3>
37
- <p>This is an example landing page for Reachy Mini apps. Feel free to duplicate this template
38
- and customize it for your own applications!</p>
39
- </div>
40
- <div class="info-box">
41
- <h3>🚀 Getting Started</h3>
42
- <p>Use this template to showcase your Reachy Mini app with a professional landing page. Simply
43
- modify the content, add your app's repository URL, and deploy!</p>
44
- </div>
45
  </div>
46
-
47
- <div class="features-grid">
48
- <div class="feature">
49
- <span class="feature-icon">📝</span>
50
- <div>
51
- <h3>Easy to Customize</h3>
52
- <p>Simple HTML/CSS template that's easy to modify for your needs</p>
53
- </div>
54
- </div>
55
- <div class="feature">
56
- <span class="feature-icon">🔌</span>
57
  <div>
58
- <h3>Dashboard Integration</h3>
59
- <p>Built-in install button connects directly to Reachy dashboards</p>
60
  </div>
61
  </div>
62
- <div class="feature">
63
- <span class="feature-icon">📱</span>
64
  <div>
65
- <h3>Responsive Design</h3>
66
- <p>Looks great on desktop, tablet, and mobile devices</p>
67
  </div>
68
  </div>
69
- <div class="feature">
70
- <span class="feature-icon">⚡</span>
71
  <div>
72
- <h3>Fast & Modern</h3>
73
- <p>Clean, professional design with smooth animations</p>
74
- </div>
75
- </div>
76
- </div>
77
-
78
- <div class="how-to-use">
79
- <h3>How to Use This Template</h3>
80
- <div class="steps">
81
- <div class="step">
82
- <span class="step-number">1</span>
83
- <div>
84
- <h4>Duplicate & Customize</h4>
85
- <p>Copy this template and modify the content for your app</p>
86
- </div>
87
- </div>
88
- <div class="step">
89
- <span class="step-number">2</span>
90
- <div>
91
- <h4>Update Repository URL</h4>
92
- <p>Change the JavaScript to point to your app's Git repository</p>
93
- </div>
94
- </div>
95
- <div class="step">
96
- <span class="step-number">3</span>
97
- <div>
98
- <h4>Deploy to HF Spaces</h4>
99
- <p>Upload your customized version to Hugging Face Spaces</p>
100
- </div>
101
  </div>
102
  </div>
103
  </div>
104
  </div>
105
  </div>
 
106
 
107
- <div class="download-section">
108
- <div class="download-card">
109
- <h2>Install This Example App</h2>
110
- <p>Try out the installation process with this template app</p>
111
 
112
- <div class="dashboard-config">
113
- <label for="dashboardUrl">Your Reachy Dashboard URL:</label>
114
- <input type="url" id="dashboardUrl" value="http://localhost:8000"
115
- placeholder="http://your-reachy-ip:8000" />
116
- </div>
117
 
118
- <button id="installBtn" class="install-btn primary">
119
- <span class="btn-icon">📥</span>
120
- Install Example App to Reachy
121
- </button>
122
 
123
- <div id="installStatus" class="install-status"></div>
124
 
125
- <div class="manual-option">
126
- <h3>Manual Installation</h3>
127
- <p>Or copy this repository URL for manual installation:</p>
128
- <div class="manual-install">
129
- <code id="repoUrl">https://github.com/your-username/your-reachy-app.git</code>
130
- <button onclick="copyToClipboard()" class="copy-btn">📋 Copy</button>
131
- </div>
132
  </div>
133
  </div>
134
  </div>
 
135
 
136
- <div class="footer">
137
- <p>
138
- 🤖 Template for Reachy Mini Apps •
139
- <a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
140
- <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Apps" target="_blank">Browse More
141
- Apps</a>
142
- </p>
143
- </div>
144
  </div>
145
 
146
  <script>
147
- // 🔧 CUSTOMIZE THESE VALUES FOR YOUR APP:
148
  const APP_REPO_URL = "https://github.com/your-username/your-reachy-app.git";
149
- const APP_NAME = "example-app";
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
150
 
151
  async function installToReachy() {
152
  const dashboardUrl = document.getElementById('dashboardUrl').value.trim();
@@ -175,6 +156,9 @@
175
 
176
  showStatus('loading', 'Starting installation...');
177
 
 
 
 
178
  // Start installation
179
  const installResponse = await fetch(`${dashboardUrl}/api/install`, {
180
  method: 'POST',
@@ -184,14 +168,14 @@
184
  },
185
  body: JSON.stringify({
186
  url: APP_REPO_URL,
187
- name: APP_NAME
188
  })
189
  });
190
 
191
  const result = await installResponse.json();
192
 
193
  if (installResponse.ok) {
194
- showStatus('success', `✅ Installation started! Check your dashboard for progress.`);
195
  setTimeout(() => {
196
  showStatus('info', `Open your dashboard at ${dashboardUrl} to see the installed app.`);
197
  }, 3000);
@@ -224,16 +208,20 @@
224
  });
225
  }
226
 
227
- // Event listeners
228
- document.getElementById('installBtn').addEventListener('click', installToReachy);
229
-
230
- // Auto-detect local dashboard
231
  document.addEventListener('DOMContentLoaded', () => {
 
232
  const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
233
  if (isLocalhost) {
234
  document.getElementById('dashboardUrl').value = 'http://localhost:8000';
235
  }
 
 
 
236
  });
 
 
 
237
  </script>
238
  </body>
239
 
 
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
35
+ and 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
40
+ modify the content, add your app's repository URL, and deploy!</p>
41
+ </div>
42
+ </div>
43
+ <div class="how-to-use">
44
+ <h3>How to Use This Template</h3>
45
+ <div class="steps">
46
+ <div class="step">
47
+ <span class="step-number">1</span>
48
  <div>
49
+ <h4>Duplicate & Customize</h4>
50
+ <p>Copy this template and modify the content for your app</p>
51
  </div>
52
  </div>
53
+ <div class="step">
54
+ <span class="step-number">2</span>
55
  <div>
56
+ <h4>Update Repository URL</h4>
57
+ <p>Change the JavaScript to point to your app's Git repository</p>
58
  </div>
59
  </div>
60
+ <div class="step">
61
+ <span class="step-number">3</span>
62
  <div>
63
+ <h4>Deploy to HF Spaces</h4>
64
+ <p>Upload your customized version to Hugging Face Spaces</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  </div>
66
  </div>
67
  </div>
68
  </div>
69
  </div>
70
+ </div>
71
 
72
+ <div class="download-section">
73
+ <div class="download-card">
74
+ <h2>Install This Example App</h2>
75
+ <p>Try out the installation process with this template app</p>
76
 
77
+ <div class="dashboard-config">
78
+ <label for="dashboardUrl">Your Reachy Dashboard URL:</label>
79
+ <input type="url" id="dashboardUrl" value="http://localhost:8000"
80
+ placeholder="http://your-reachy-ip:8000" />
81
+ </div>
82
 
83
+ <button id="installBtn" class="install-btn primary">
84
+ <span class="btn-icon">📥</span>
85
+ Install Example App to Reachy
86
+ </button>
87
 
88
+ <div id="installStatus" class="install-status"></div>
89
 
90
+ <div class="manual-option">
91
+ <h3>Manual Installation</h3>
92
+ <p>Or copy this repository URL for manual installation:</p>
93
+ <div class="manual-install">
94
+ <code id="repoUrl">https://github.com/your-username/your-reachy-app.git</code>
95
+ <button onclick="copyToClipboard()" class="copy-btn">📋 Copy</button>
 
96
  </div>
97
  </div>
98
  </div>
99
+ </div>
100
 
101
+ <div class="footer">
102
+ <p>
103
+ 🤖 Template for Reachy Mini Apps •
104
+ <a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
105
+ <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Apps" target="_blank">Browse More
106
+ Apps</a>
107
+ </p>
108
+ </div>
109
  </div>
110
 
111
  <script>
112
+ // 🔧 CUSTOMIZE THIS VALUE FOR YOUR APP:
113
  const APP_REPO_URL = "https://github.com/your-username/your-reachy-app.git";
114
+
115
+ // Auto-extract app name from repository URL
116
+ function getAppNameFromUrl(url) {
117
+ try {
118
+ // Remove .git extension if present
119
+ let cleanUrl = url.replace(/\.git$/, '');
120
+
121
+ // Extract the last part of the URL (repository name)
122
+ const parts = cleanUrl.split('/');
123
+ const repoName = parts[parts.length - 1];
124
+
125
+ // Convert to lowercase and replace invalid characters
126
+ return repoName.toLowerCase().replace(/[^a-z0-9-_]/g, '-');
127
+ } catch (error) {
128
+ return 'app-from-repo';
129
+ }
130
+ }
131
 
132
  async function installToReachy() {
133
  const dashboardUrl = document.getElementById('dashboardUrl').value.trim();
 
156
 
157
  showStatus('loading', 'Starting installation...');
158
 
159
+ // Auto-generate app name from repository URL
160
+ const appName = getAppNameFromUrl(APP_REPO_URL);
161
+
162
  // Start installation
163
  const installResponse = await fetch(`${dashboardUrl}/api/install`, {
164
  method: 'POST',
 
168
  },
169
  body: JSON.stringify({
170
  url: APP_REPO_URL,
171
+ name: appName
172
  })
173
  });
174
 
175
  const result = await installResponse.json();
176
 
177
  if (installResponse.ok) {
178
+ showStatus('success', `✅ Installation started for "${appName}"! Check your dashboard for progress.`);
179
  setTimeout(() => {
180
  showStatus('info', `Open your dashboard at ${dashboardUrl} to see the installed app.`);
181
  }, 3000);
 
208
  });
209
  }
210
 
211
+ // Update the displayed repository URL on page load
 
 
 
212
  document.addEventListener('DOMContentLoaded', () => {
213
+ // Auto-detect local dashboard
214
  const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
215
  if (isLocalhost) {
216
  document.getElementById('dashboardUrl').value = 'http://localhost:8000';
217
  }
218
+
219
+ // Update the repository URL display
220
+ document.getElementById('repoUrl').textContent = APP_REPO_URL;
221
  });
222
+
223
+ // Event listeners
224
+ document.getElementById('installBtn').addEventListener('click', installToReachy);
225
  </script>
226
  </body>
227