Hugging Face's logo

Spaces:
LeRobot-worldwide-hackathon
/
LeFunnyRobot
Running

App Files Community
YoussefSharawy91 commited on
Commit
032aa32
·
verified ·
1 Parent(s): eefa42a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +441 -19
index.html CHANGED
@@ -1,19 +1,441 @@
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>🇪🇬Wall-E Training Interface</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes pulse {
11
+ 0%, 100% { opacity: 1; }
12
+ 50% { opacity: 0.6; }
13
+ }
14
+ .pulse-animation {
15
+ animation: pulse 2s infinite;
16
+ }
17
+ .graph-line {
18
+ stroke-width: 3;
19
+ stroke-linecap: round;
20
+ }
21
+ #wall-e-container {
22
+ transition: all 0.3s ease;
23
+ }
24
+ .joint-highlight {
25
+ box-shadow: 0 0 15px currentColor;
26
+ }
27
+
28
+ /* Specific Wall-E part styles for transform origins */
29
+ /* #wall-e-neck is removed */
30
+ #wall-e-head {
31
+ transform-origin: bottom center; /* Rotate from the base of the head */
32
+ }
33
+ #wall-e-left-arm, #wall-e-right-arm {
34
+ transform-origin: top center; /* Arms swing from the shoulder/top joint */
35
+ }
36
+ #wall-e-left-wheel, #wall-e-right-wheel {
37
+ transform-origin: center center; /* Wheels rotate around their center */
38
+ }
39
+ /* Ensure Wall-E parts are positioned absolutely within their container for movement */
40
+ #wall-e-body-main {
41
+ position: absolute;
42
+ top: 0;
43
+ left: 50%;
44
+ transform: translateX(-50%);
45
+ }
46
+ #wall-e-tracks-base {
47
+ position: absolute;
48
+ bottom: 0;
49
+ left: 0;
50
+ }
51
+ /* #wall-e-neck positioning removed */
52
+ #wall-e-head {
53
+ position: absolute;
54
+ top: 50px; /* Adjusted: now positioned relative to the main Wall-E container */
55
+ left: 50%;
56
+ transform: translateX(-50%);
57
+ z-index: 15; /* Ensure head is above other parts if needed */
58
+ }
59
+ #wall-e-left-arm {
60
+ position: absolute;
61
+ top: 30px; /* Adjusted position to look like it comes from the body */
62
+ left: -10px;
63
+ z-index: 5;
64
+ }
65
+ #wall-e-right-arm {
66
+ position: absolute;
67
+ top: 30px; /* Adjusted position */
68
+ right: -10px;
69
+ z-index: 5;
70
+ }
71
+ #wall-e-left-wheel {
72
+ position: absolute;
73
+ bottom: 2px;
74
+ left: 10px;
75
+ }
76
+ #wall-e-right-wheel {
77
+ position: absolute;
78
+ bottom: 2px;
79
+ right: 10px;
80
+ }
81
+ </style>
82
+ </head>
83
+ <body class="bg-gray-900 text-white min-h-screen">
84
+ <div class="container mx-auto px-4 py-8">
85
+ <header class="flex flex-col md:flex-row justify-between items-center mb-8">
86
+ <div class="flex items-center mb-4 md:mb-0">
87
+ <i class="fas fa-robot text-4xl text-yellow-400 mr-3"></i>
88
+ <h1 class="text-3xl font-bold bg-gradient-to-r from-yellow-400 to-green-400 bg-clip-text text-transparent">
89
+ 🇪🇬Wall-E Training Module
90
+ </h1>
91
+ </div>
92
+ <div class="flex items-center space-x-4">
93
+ <div class="relative">
94
+ <div class="h-3 w-3 rounded-full bg-green-500 absolute -top-1 -right-1 animate-ping"></div>
95
+ <span class="px-4 py-2 bg-gray-800 rounded-lg flex items-center">
96
+ <span class="mr-2">Training Mode</span>
97
+ <i class="fas fa-brain text-yellow-400"></i>
98
+ </span>
99
+ </div>
100
+ </div>
101
+ </header>
102
+
103
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
104
+ <div class="lg:col-span-2 space-y-6">
105
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
106
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
107
+ <i class="fas fa-video mr-2 text-yellow-400"></i>
108
+ Video Input Source
109
+ </h2>
110
+ <div class="relative pt-[56.25%] bg-black rounded-lg overflow-hidden mb-4">
111
+ <iframe class="absolute top-0 left-0 w-full h-full"
112
+ src="https://www.youtube.com/embed/8-_9n5DtKOc?modestbranding=1&rel=0"
113
+ frameborder="0"
114
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
115
+ allowfullscreen></iframe>
116
+ </div>
117
+ <div class="flex flex-wrap gap-3 mt-4">
118
+ <input type="text" placeholder="Enter YouTube URL..."
119
+ class="flex-1 px-4 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-400">
120
+ <button class="px-6 py-2 bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-semibold rounded-lg transition flex items-center">
121
+ <i class="fas fa-link mr-2"></i> Load
122
+ </button>
123
+ </div>
124
+ </div>
125
+
126
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
127
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
128
+ <i class="fas fa-database mr-2 text-green-400"></i>
129
+ Data Collection
130
+ </h2>
131
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
132
+ <div class="bg-gray-700 p-4 rounded-lg">
133
+ <div class="text-sm text-gray-400 mb-1">Frames Processed</div>
134
+ <div class="text-2xl font-mono">1,248</div>
135
+ </div>
136
+ <div class="bg-gray-700 p-4 rounded-lg">
137
+ <div class="text-sm text-gray-400 mb-1">Data Points</div>
138
+ <div class="text-2xl font-mono">7,488</div>
139
+ </div>
140
+ <div class="bg-gray-700 p-4 rounded-lg">
141
+ <div class="text-sm text-gray-400 mb-1">Accuracy</div>
142
+ <div class="text-2xl font-mono">92.7%</div>
143
+ </div>
144
+ </div>
145
+ <div class="flex flex-wrap gap-3">
146
+ <button id="start-btn" class="px-6 py-3 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition flex items-center">
147
+ <i class="fas fa-play mr-2"></i> Start Collection
148
+ </button>
149
+ <button class="px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition flex items-center">
150
+ <i class="fas fa-stop mr-2"></i> Stop
151
+ </button>
152
+ <button class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition flex items-center">
153
+ <i class="fas fa-save mr-2"></i> Save Dataset
154
+ </button>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <div class="space-y-6">
160
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
161
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
162
+ <i class="fas fa-robot mr-2 text-yellow-400"></i>
163
+ Joint Visualization
164
+ </h2>
165
+ <div id="wall-e-container" class="flex justify-center items-center h-64 relative">
166
+ <div class="relative w-40 h-48">
167
+ <div id="wall-e-body-main" class="w-24 h-32 bg-yellow-400 rounded-t-full"></div>
168
+ <div id="wall-e-tracks-base" class="w-full h-8 bg-gray-600 rounded-full"></div>
169
+
170
+ <div id="wall-e-head" class="w-12 h-8 bg-yellow-300 rounded-t-full">
171
+ <div class="absolute top-1 left-2 w-8 h-6 bg-white rounded-full flex justify-between px-1">
172
+ <div class="w-3 h-3 bg-blue-500 rounded-full mt-1"></div>
173
+ <div class="w-3 h-3 bg-blue-500 rounded-full mt-1"></div>
174
+ </div>
175
+ </div>
176
+
177
+ <div id="wall-e-left-arm" class="w-4 h-16 bg-yellow-500 rounded-lg">
178
+ <div class="absolute bottom-0 w-6 h-4 bg-gray-600 rounded-full -left-1"></div>
179
+ </div>
180
+ <div id="wall-e-right-arm" class="w-4 h-16 bg-yellow-500 rounded-lg">
181
+ <div class="absolute bottom-0 w-6 h-4 bg-gray-600 rounded-full -right-1"></div>
182
+ </div>
183
+
184
+ <div id="wall-e-left-wheel" class="w-8 h-8 rounded-full bg-gray-700 border-2 border-gray-500"></div>
185
+ <div id="wall-e-right-wheel" class="w-8 h-8 rounded-full bg-gray-700 border-2 border-gray-500"></div>
186
+ </div>
187
+ </div>
188
+ <div class="mt-4 grid grid-cols-3 gap-2">
189
+ <div class="flex items-center">
190
+ <div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
191
+ <span class="text-sm">Left Arm</span>
192
+ </div>
193
+ <div class="flex items-center">
194
+ <div class="w-4 h-4 rounded-full bg-green-500 mr-2"></div>
195
+ <span class="text-sm">Right Arm</span>
196
+ </div>
197
+ <div class="flex items-center">
198
+ <div class="w-4 h-4 rounded-full bg-purple-500 mr-2"></div>
199
+ <span class="text-sm">Left Wheel</span>
200
+ </div>
201
+ <div class="flex items-center">
202
+ <div class="w-4 h-4 rounded-full bg-yellow-500 mr-2"></div>
203
+ <span class="text-sm">Right Wheel</span>
204
+ </div>
205
+ <div class="flex items-center">
206
+ <div class="w-4 h-4 rounded-full bg-pink-500 mr-2"></div>
207
+ <span class="text-sm">Head</span>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700">
213
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
214
+ <i class="fas fa-chart-line mr-2 text-blue-400"></i>
215
+ Joint Motion Data
216
+ </h2>
217
+ <div class="h-64 relative">
218
+ <svg id="motion-graph" class="w-full h-full" viewBox="0 0 500 250" preserveAspectRatio="none">
219
+ <line x1="0" y1="50" x2="500" y2="50" stroke="#374151" stroke-width="1" stroke-dasharray="5,5" />
220
+ <line x1="0" y1="100" x2="500" y2="100" stroke="#374151" stroke-width="1" stroke-dasharray="5,5" />
221
+ <line x1="0" y1="150" x2="500" y2="150" stroke="#374151" stroke-width="1" stroke-dasharray="5,5" />
222
+ <line x1="0" y1="200" x2="500" y2="200" stroke="#374151" stroke-width="1" stroke-dasharray="5,5" />
223
+
224
+ </svg>
225
+ <div id="graph-legend" class="absolute bottom-0 right-0 bg-gray-900 bg-opacity-80 p-2 rounded-tl-lg text-xs">
226
+ <div class="flex items-center mb-1">
227
+ <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
228
+ <span>Left Arm</span>
229
+ </div>
230
+ <div class="flex items-center mb-1">
231
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
232
+ <span>Right Arm</span>
233
+ </div>
234
+ <div class="flex items-center mb-1">
235
+ <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
236
+ <span>Left Wheel</span>
237
+ </div>
238
+ <div class="flex items-center mb-1">
239
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
240
+ <span>Right Wheel</span>
241
+ </div>
242
+ <div class="flex items-center">
243
+ <div class="w-3 h-3 rounded-full bg-pink-500 mr-2"></div>
244
+ <span>Head</span>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <div class="mt-8 bg-gray-800 rounded-xl p-4 shadow-lg border border-gray-700">
253
+ <div class="flex items-center justify-between">
254
+ <div class="flex items-center">
255
+ <div class="h-3 w-3 rounded-full bg-green-500 mr-2"></div>
256
+ <span class="text-sm">System Active</span>
257
+ </div>
258
+ <div class="text-sm text-gray-400">
259
+ <span id="status-message">Ready to collect training data...</span>
260
+ </div>
261
+ <div class="text-sm">
262
+ <i class="fas fa-battery-three-quarters text-green-500 mr-1"></i>
263
+ <span>78% Power</span>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <script>
270
+ document.addEventListener('DOMContentLoaded', function() {
271
+ // Update joint references - 'neck' element is now removed
272
+ const joints = {
273
+ 'left-arm': { element: document.getElementById('wall-e-left-arm'), color: 'blue', path: null, points: [], currentRotation: 0 },
274
+ 'right-arm': { element: document.getElementById('wall-e-right-arm'), color: 'green', path: null, points: [], currentRotation: 0 },
275
+ 'left-wheel': { element: document.getElementById('wall-e-left-wheel'), color: 'purple', path: null, points: [], currentRotation: 0 },
276
+ 'right-wheel': { element: document.getElementById('wall-e-right-wheel'), color: 'yellow', path: null, points: [], currentRotation: 0 },
277
+ 'head': { element: document.getElementById('wall-e-head'), color: 'pink', path: null, points: [], currentRotation: 0, currentY: 0 }
278
+ };
279
+
280
+ const svg = document.getElementById('motion-graph');
281
+ const statusMessage = document.getElementById('status-message');
282
+ const startBtn = document.getElementById('start-btn');
283
+
284
+ // Initialize graph paths
285
+ Object.keys(joints).forEach(joint => {
286
+ joints[joint].path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
287
+ joints[joint].path.classList.add('graph-line');
288
+ joints[joint].path.setAttribute('stroke', joints[joint].color);
289
+ joints[joint].path.setAttribute('fill', 'none');
290
+ svg.appendChild(joints[joint].path);
291
+ });
292
+
293
+ // Generate funny joint movements
294
+ function generateRandomMovement() {
295
+ Object.keys(joints).forEach(jointName => {
296
+ const joint = joints[jointName];
297
+ let movementValue = 0;
298
+ let transformStyle = '';
299
+
300
+ const randomAmplitude = (Math.random() * 0.7 + 0.3); // Between 0.3 and 1.0 for more varied movement
301
+
302
+ if (jointName === 'head') {
303
+ // Head: Bobbing, tilting, and swiveling slightly (now directly from body)
304
+ const rotationRange = 25; // Max 25 degrees tilt
305
+ const bobbingAmplitude = 20; // Max 20px bob
306
+ const baseHeadY = 50; // Original top positioning of head div in CSS
307
+
308
+ movementValue = rotationRange * (Math.sin(Date.now() / 250 + Math.PI / 2) * randomAmplitude); // Tilt
309
+ joint.currentY = baseHeadY + (bobbingAmplitude * (Math.sin(Date.now() / 150) * randomAmplitude)); // Bobbing
310
+
311
+ transformStyle = `translateX(-50%) translateY(${joint.currentY}px) rotate(${movementValue}deg)`;
312
+ } else if (jointName === 'left-arm') {
313
+ // Left Arm: Wild, exaggerated swings
314
+ const swingRange = 70; // Max 70 degrees swing
315
+ movementValue = swingRange * (Math.sin(Date.now() / 200) * randomAmplitude);
316
+ transformStyle = `rotate(${movementValue}deg)`;
317
+ } else if (jointName === 'right-arm') {
318
+ // Right Arm: Opposite wild swing to left arm
319
+ const swingRange = 70; // Max 70 degrees swing
320
+ movementValue = swingRange * (-Math.sin(Date.now() / 200) * randomAmplitude); // Opposite phase
321
+ transformStyle = `rotate(${movementValue}deg)`;
322
+ } else if (jointName === 'left-wheel' || jointName === 'right-wheel') {
323
+ // Wheels: Subtle bounce
324
+ const bounceAmplitude = 5; // Max 5px bounce
325
+ movementValue = bounceAmplitude * (Math.sin(Date.now() / 100) * randomAmplitude);
326
+ transformStyle = `translateY(${movementValue}px)`;
327
+ }
328
+
329
+ joint.element.style.transform = transformStyle;
330
+
331
+ // Add point to graph (normalized to 0-200 range)
332
+ let graphNormalizedValue = 100; // default to center
333
+ if (jointName === 'head') {
334
+ graphNormalizedValue = 100 + (movementValue * 2); // Scale degrees for graph
335
+ } else if (jointName.includes('arm')) {
336
+ graphNormalizedValue = 100 + (movementValue * 1.5); // Scale degrees for graph
337
+ } else if (jointName.includes('wheel')) {
338
+ graphNormalizedValue = 100 + (movementValue * 5); // Scale pixels for graph
339
+ }
340
+
341
+ joint.points.push(graphNormalizedValue);
342
+ if (joint.points.length > 100) {
343
+ joint.points.shift();
344
+ }
345
+
346
+ // Highlight the joint
347
+ joint.element.classList.add('joint-highlight');
348
+ setTimeout(() => {
349
+ joint.element.classList.remove('joint-highlight');
350
+ }, 200); // Shorter highlight duration
351
+ });
352
+
353
+ updateGraph();
354
+ }
355
+
356
+ // Update the graph with current data points
357
+ function updateGraph() {
358
+ Object.keys(joints).forEach(joint => {
359
+ let pathData = '';
360
+ joints[joint].points.forEach((point, index) => {
361
+ const x = index * (500 / 100);
362
+ const y = 250 - point;
363
+ if (index === 0) {
364
+ pathData += `M ${x} ${y}`;
365
+ } else {
366
+ pathData += ` L ${x} ${y}`;
367
+ }
368
+ });
369
+ joints[joint].path.setAttribute('d', pathData);
370
+ });
371
+ }
372
+
373
+ // Start/stop data collection
374
+ let isCollecting = false;
375
+ let collectionInterval;
376
+
377
+ startBtn.addEventListener('click', function() {
378
+ if (isCollecting) return;
379
+
380
+ isCollecting = true;
381
+ startBtn.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> Collecting...';
382
+ startBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
383
+ startBtn.classList.add('bg-yellow-600', 'hover:bg-yellow-700');
384
+
385
+ statusMessage.textContent = "Analyzing Wall-E's movements from video...";
386
+
387
+ // Start generating funny movements continuously
388
+ collectionInterval = setInterval(() => {
389
+ generateRandomMovement();
390
+
391
+ // Funny status updates
392
+ const messages = [
393
+ "Wall-E is telling robot jokes...",
394
+ "Analyzing comedy patterns...",
395
+ "Detecting sarcasm in movements...",
396
+ "Translating robot laughter...",
397
+ "Teaching Wall-E stand-up...",
398
+ "Processing punchlines...",
399
+ "Calculating funny bone position..."
400
+ ];
401
+ if (Math.random() > 0.6) { // More frequent funny messages
402
+ statusMessage.textContent = messages[Math.floor(Math.random() * messages.length)];
403
+ }
404
+ }, 100); // Even faster update for more fluid animation
405
+
406
+ // Simulate completion after 15 seconds
407
+ setTimeout(() => {
408
+ stopCollection();
409
+ statusMessage.textContent = "Training complete! Wall-E's humor rating increased by 12%!"; // Funnier completion message
410
+ }, 15000);
411
+ });
412
+
413
+ function stopCollection() {
414
+ clearInterval(collectionInterval);
415
+ isCollecting = false;
416
+ startBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Start Collection';
417
+ startBtn.classList.remove('bg-yellow-600', 'hover:bg-yellow-700');
418
+ startBtn.classList.add('bg-green-600', 'hover:bg-green-700');
419
+ }
420
+
421
+ // Start animation immediately
422
+ const autoInterval = setInterval(generateRandomMovement, 100); // Start faster
423
+ updateGraph();
424
+
425
+ // Highlight joints on legend hover
426
+ const legendItems = document.querySelectorAll('#graph-legend > div');
427
+ legendItems.forEach((item, index) => {
428
+ const jointName = Object.keys(joints)[index];
429
+ item.addEventListener('mouseenter', () => {
430
+ joints[jointName].path.setAttribute('stroke-width', '5');
431
+ joints[jointName].element.classList.add('joint-highlight');
432
+ });
433
+ item.addEventListener('mouseleave', () => {
434
+ joints[jointName].path.setAttribute('stroke-width', '3');
435
+ joints[jointName].element.classList.remove('joint-highlight');
436
+ });
437
+ });
438
+ });
439
+ </script>
440
+ </body>
441
+ </html>