Hugging Face's logo

Spaces:
fredmo
/
kaipop-dance-challenge
Running

App Files Community
fredmo commited on
Commit
6a00978
·
verified ·
1 Parent(s): cede0da

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +17 -7
index.html CHANGED
@@ -1,7 +1,7 @@
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
- <title>K-pop Dance Challenge ✨</title>
5
  <meta charset="utf-8">
6
  <link rel="preconnect" href="https://fonts.googleapis.com">
7
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -126,7 +126,7 @@
126
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
127
  }
128
 
129
- #toggle-skeleton {
130
  background-color: var(--blue);
131
  }
132
  #next-dancer {
@@ -134,6 +134,7 @@
134
  }
135
  #result h1 {
136
  font-size: 3em;
 
137
  }
138
 
139
  </style>
@@ -142,7 +143,7 @@
142
 
143
  <div id="app-container">
144
  <div id="song-selection" class="container">
145
- <h1> 🍨 K AI Pop Dance - Challenge your Friend 💖</h1>
146
  <p>Choose your battle track!</p>
147
  <button id="song-aespa">Aespa - Dirty Work</button>
148
  <button id="song-itzy">Itzy - girls will be girl</button>
@@ -157,7 +158,7 @@
157
  <div id="dancer-name" class="dancer-name"></div>
158
  </div>
159
  <div class="controls">
160
- <button id="toggle-skeleton">My Detected Moves</button>
161
  <button id="next-dancer" style="display: none;">Next Dancer! ✨</button>
162
  </div>
163
  </div>
@@ -165,6 +166,7 @@
165
  <div id="result" class="container">
166
  <h1>And the result is...</h1>
167
  <h1 id="score"></h1>
 
168
  </div>
169
  </div>
170
 
@@ -187,6 +189,8 @@
187
  const toggleSkeletonButton = document.getElementById('toggle-skeleton');
188
  const scoreDisplay = document.getElementById('score');
189
  const audioPlayer = document.getElementById('audio-player');
 
 
190
 
191
  // Game State
192
  let poseLandmarker;
@@ -211,7 +215,6 @@
211
  blackpink: { p1: 'Blink 1 🖤', p2: 'Blink 2 💖' }
212
  };
213
 
214
- // These are the body segments we will use for comparison.
215
  const POSE_SEGMENTS = [
216
  ['left_shoulder', 'left_elbow'], ['left_elbow', 'left_wrist'],
217
  ['right_shoulder', 'right_elbow'], ['right_elbow', 'right_wrist'],
@@ -221,7 +224,6 @@
221
  ['right_hip', 'right_knee'], ['right_knee', 'right_ankle']
222
  ];
223
 
224
- // Landmark names to indices map (for convenience)
225
  let landmarkNameToIndex = {};
226
 
227
  const POSE_LANDMARK_NAMES = [
@@ -404,6 +406,12 @@
404
  scoreDisplay.textContent = `${percentage}% Similarity! Great job! 🎉`;
405
  }
406
 
 
 
 
 
 
 
407
  // Event Listeners
408
  document.getElementById('song-aespa').addEventListener('click', () => selectSong('aespa'));
409
  document.getElementById('song-itzy').addEventListener('click', () => selectSong('itzy'));
@@ -414,11 +422,13 @@
414
  });
415
  toggleSkeletonButton.addEventListener('click', () => {
416
  showSkeleton = !showSkeleton;
417
- toggleSkeletonButton.textContent = showSkeleton ? 'Hide Moves' : 'Show Moves';
418
  });
 
419
 
420
  // Start the application
421
  main();
422
  </script>
 
423
  </body>
424
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
+ <title>✨ K-pop Dance Challenge ✨</title>
5
  <meta charset="utf-8">
6
  <link rel="preconnect" href="https://fonts.googleapis.com">
7
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
126
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
127
  }
128
 
129
+ #toggle-skeleton, #restart-button {
130
  background-color: var(--blue);
131
  }
132
  #next-dancer {
 
134
  }
135
  #result h1 {
136
  font-size: 3em;
137
+ margin-bottom: 20px;
138
  }
139
 
140
  </style>
 
143
 
144
  <div id="app-container">
145
  <div id="song-selection" class="container">
146
+ <h1> ✨🍨 K AI Pop Dance - Challenge your Friend 💖✨</h1>
147
  <p>Choose your battle track!</p>
148
  <button id="song-aespa">Aespa - Dirty Work</button>
149
  <button id="song-itzy">Itzy - girls will be girl</button>
 
158
  <div id="dancer-name" class="dancer-name"></div>
159
  </div>
160
  <div class="controls">
161
+ <button id="toggle-skeleton">Show Skeleton</button>
162
  <button id="next-dancer" style="display: none;">Next Dancer! ✨</button>
163
  </div>
164
  </div>
 
166
  <div id="result" class="container">
167
  <h1>And the result is...</h1>
168
  <h1 id="score"></h1>
169
+ <button id="restart-button">Play Again? 💖</button>
170
  </div>
171
  </div>
172
 
 
189
  const toggleSkeletonButton = document.getElementById('toggle-skeleton');
190
  const scoreDisplay = document.getElementById('score');
191
  const audioPlayer = document.getElementById('audio-player');
192
+ const restartButton = document.getElementById('restart-button');
193
+
194
 
195
  // Game State
196
  let poseLandmarker;
 
215
  blackpink: { p1: 'Blink 1 🖤', p2: 'Blink 2 💖' }
216
  };
217
 
 
218
  const POSE_SEGMENTS = [
219
  ['left_shoulder', 'left_elbow'], ['left_elbow', 'left_wrist'],
220
  ['right_shoulder', 'right_elbow'], ['right_elbow', 'right_wrist'],
 
224
  ['right_hip', 'right_knee'], ['right_knee', 'right_ankle']
225
  ];
226
 
 
227
  let landmarkNameToIndex = {};
228
 
229
  const POSE_LANDMARK_NAMES = [
 
406
  scoreDisplay.textContent = `${percentage}% Similarity! Great job! 🎉`;
407
  }
408
 
409
+ function restartGame() {
410
+ // The simplest and most robust way to restart is to reload the page.
411
+ // This guarantees all state is reset to its default.
412
+ location.reload();
413
+ }
414
+
415
  // Event Listeners
416
  document.getElementById('song-aespa').addEventListener('click', () => selectSong('aespa'));
417
  document.getElementById('song-itzy').addEventListener('click', () => selectSong('itzy'));
 
422
  });
423
  toggleSkeletonButton.addEventListener('click', () => {
424
  showSkeleton = !showSkeleton;
425
+ toggleSkeletonButton.textContent = showSkeleton ? 'Hide Skeleton' : 'Show Skeleton';
426
  });
427
+ restartButton.addEventListener('click', restartGame);
428
 
429
  // Start the application
430
  main();
431
  </script>
432
+ fredmo - 2025
433
  </body>
434
  </html>