Hugging Face's logo

Spaces:
udhyojakman
/
hi
Running

App Files Community
udhyojakman commited on
Commit
a19c9e9
·
verified ·
1 Parent(s): 3581ac1

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +402 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hi
3
- emoji: 🐨
4
- colorFrom: gray
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: hi
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,402 @@
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>Voice Controlled Jumping Jack Game</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 jump {
11
+ 0%, 100% { transform: translateY(0) rotate(0deg); }
12
+ 25% { transform: translateY(-100px) rotate(0deg); }
13
+ 50% { transform: translateY(0) rotate(0deg); }
14
+ 75% { transform: translateY(-100px) rotate(0deg); }
15
+ }
16
+
17
+ @keyframes armsUp {
18
+ 0%, 100% { transform: rotate(0deg); }
19
+ 50% { transform: rotate(180deg); }
20
+ }
21
+
22
+ @keyframes legsOut {
23
+ 0%, 100% { transform: rotate(0deg); }
24
+ 50% { transform: rotate(45deg); }
25
+ }
26
+
27
+ .character {
28
+ transition: all 0.3s ease;
29
+ }
30
+
31
+ .jumping {
32
+ animation: jump 1s infinite;
33
+ }
34
+
35
+ .arms-up .arm {
36
+ animation: armsUp 1s infinite;
37
+ }
38
+
39
+ .legs-out .leg {
40
+ animation: legsOut 1s infinite;
41
+ }
42
+
43
+ .pulse {
44
+ animation: pulse 1.5s infinite;
45
+ }
46
+
47
+ @keyframes pulse {
48
+ 0% { transform: scale(1); }
49
+ 50% { transform: scale(1.1); }
50
+ 100% { transform: scale(1); }
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="bg-gradient-to-b from-blue-100 to-purple-100 min-h-screen flex flex-col items-center justify-center p-4">
55
+ <div class="max-w-2xl w-full bg-white rounded-2xl shadow-xl overflow-hidden">
56
+ <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-6 text-white text-center">
57
+ <h1 class="text-3xl md:text-4xl font-bold mb-2">Jumping Jack Challenge</h1>
58
+ <p class="text-lg">Use your voice to do jumping jacks!</p>
59
+ </div>
60
+
61
+ <div class="p-6 md:p-8">
62
+ <div class="flex flex-col md:flex-row items-center justify-between gap-8 mb-8">
63
+ <div class="relative w-48 h-64 flex items-center justify-center">
64
+ <div id="character" class="character relative w-24 h-48">
65
+ <!-- Head -->
66
+ <div class="absolute w-12 h-12 bg-yellow-300 rounded-full top-0 left-1/2 transform -translate-x-1/2"></div>
67
+ <!-- Body -->
68
+ <div class="absolute w-6 h-20 bg-blue-500 top-12 left-1/2 transform -translate-x-1/2"></div>
69
+ <!-- Arms -->
70
+ <div class="arm absolute w-16 h-4 bg-blue-500 top-16 left-1/2 transform -translate-x-1/2"></div>
71
+ <div class="arm absolute w-16 h-4 bg-blue-500 top-16 left-1/2 transform -translate-x-1/2"></div>
72
+ <!-- Legs -->
73
+ <div class="leg absolute w-4 h-16 bg-blue-700 top-32 left-1/2 transform -translate-x-1/2"></div>
74
+ <div class="leg absolute w-4 h-16 bg-blue-700 top-32 left-1/2 transform -translate-x-1/2"></div>
75
+ </div>
76
+ </div>
77
+
78
+ <div class="flex-1">
79
+ <div class="bg-gray-100 rounded-lg p-4 mb-4">
80
+ <div class="flex items-center justify-between mb-2">
81
+ <h3 class="font-semibold text-lg">Voice Commands</h3>
82
+ <div id="micStatus" class="flex items-center">
83
+ <span class="w-3 h-3 rounded-full bg-red-500 mr-2"></span>
84
+ <span class="text-sm">Mic Off</span>
85
+ </div>
86
+ </div>
87
+ <p class="text-gray-700 mb-2">Say these commands:</p>
88
+ <ul class="grid grid-cols-2 gap-2">
89
+ <li class="bg-white px-3 py-1 rounded-full text-sm flex items-center">
90
+ <i class="fas fa-volume-up mr-2 text-blue-500"></i> "Start jumping"
91
+ </li>
92
+ <li class="bg-white px-3 py-1 rounded-full text-sm flex items-center">
93
+ <i class="fas fa-volume-up mr-2 text-blue-500"></i> "Stop jumping"
94
+ </li>
95
+ <li class="bg-white px-3 py-1 rounded-full text-sm flex items-center">
96
+ <i class="fas fa-volume-up mr-2 text-blue-500"></i> "Faster"
97
+ </li>
98
+ <li class="bg-white px-3 py-1 rounded-full text-sm flex items-center">
99
+ <i class="fas fa-volume-up mr-2 text-blue-500"></i> "Slower"
100
+ </li>
101
+ </ul>
102
+ </div>
103
+
104
+ <button id="startBtn" class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center pulse">
105
+ <i class="fas fa-microphone mr-2"></i> Start Voice Control
106
+ </button>
107
+ </div>
108
+ </div>
109
+
110
+ <div class="bg-gray-100 rounded-lg p-4">
111
+ <div class="flex items-center justify-between mb-2">
112
+ <h3 class="font-semibold text-lg">Activity Log</h3>
113
+ <button id="clearLog" class="text-sm text-blue-500 hover:text-blue-700">Clear</button>
114
+ </div>
115
+ <div id="log" class="h-24 overflow-y-auto text-sm">
116
+ <p class="text-gray-500 italic">Waiting for commands...</p>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="bg-gray-100 p-4 flex justify-between items-center">
122
+ <div class="flex items-center">
123
+ <div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center text-white mr-3">
124
+ <i class="fas fa-fire"></i>
125
+ </div>
126
+ <div>
127
+ <p class="text-xs text-gray-500">Jumping Jacks</p>
128
+ <p id="counter" class="font-bold">0</p>
129
+ </div>
130
+ </div>
131
+ <div class="flex items-center space-x-4">
132
+ <button id="resetBtn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition duration-200">
133
+ <i class="fas fa-redo mr-1"></i> Reset
134
+ </button>
135
+ <button id="helpBtn" class="w-10 h-10 bg-blue-500 hover:bg-blue-600 text-white rounded-full transition duration-200">
136
+ <i class="fas fa-question"></i>
137
+ </button>
138
+ </div>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Help Modal -->
143
+ <div id="helpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
144
+ <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
145
+ <div class="flex justify-between items-center mb-4">
146
+ <h3 class="text-xl font-bold">How to Play</h3>
147
+ <button id="closeHelp" class="text-gray-500 hover:text-gray-700">
148
+ <i class="fas fa-times"></i>
149
+ </button>
150
+ </div>
151
+ <div class="space-y-3">
152
+ <div class="flex items-start">
153
+ <div class="bg-blue-100 text-blue-600 w-8 h-8 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
154
+ <i class="fas fa-microphone"></i>
155
+ </div>
156
+ <p>Click "Start Voice Control" and allow microphone access when prompted.</p>
157
+ </div>
158
+ <div class="flex items-start">
159
+ <div class="bg-blue-100 text-blue-600 w-8 h-8 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
160
+ <i class="fas fa-comment-alt"></i>
161
+ </div>
162
+ <p>Say commands like "Start jumping", "Stop jumping", "Faster", or "Slower".</p>
163
+ </div>
164
+ <div class="flex items-start">
165
+ <div class="bg-blue-100 text-blue-600 w-8 h-8 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
166
+ <i class="fas fa-running"></i>
167
+ </div>
168
+ <p>The character will animate based on your commands.</p>
169
+ </div>
170
+ <div class="flex items-start">
171
+ <div class="bg-blue-100 text-blue-600 w-8 h-8 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
172
+ <i class="fas fa-chart-line"></i>
173
+ </div>
174
+ <p>Your jumping jacks are counted automatically.</p>
175
+ </div>
176
+ </div>
177
+ <div class="mt-6 pt-4 border-t border-gray-200">
178
+ <p class="text-sm text-gray-500">Note: For best results, use Chrome browser in a quiet environment.</p>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <script>
184
+ document.addEventListener('DOMContentLoaded', function() {
185
+ // DOM Elements
186
+ const startBtn = document.getElementById('startBtn');
187
+ const resetBtn = document.getElementById('resetBtn');
188
+ const helpBtn = document.getElementById('helpBtn');
189
+ const closeHelp = document.getElementById('closeHelp');
190
+ const helpModal = document.getElementById('helpModal');
191
+ const clearLog = document.getElementById('clearLog');
192
+ const log = document.getElementById('log');
193
+ const counter = document.getElementById('counter');
194
+ const character = document.getElementById('character');
195
+ const micStatus = document.getElementById('micStatus');
196
+
197
+ // Game state
198
+ let isJumping = false;
199
+ let jumpCount = 0;
200
+ let recognition;
201
+ let animationSpeed = 1;
202
+
203
+ // Initialize speech recognition
204
+ function initSpeechRecognition() {
205
+ const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
206
+
207
+ if (!SpeechRecognition) {
208
+ addToLog("Your browser doesn't support speech recognition. Try Chrome.", true);
209
+ startBtn.disabled = true;
210
+ return;
211
+ }
212
+
213
+ recognition = new SpeechRecognition();
214
+ recognition.continuous = true;
215
+ recognition.interimResults = true;
216
+ recognition.lang = 'en-US';
217
+
218
+ recognition.onstart = function() {
219
+ micStatus.innerHTML = '<span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span><span class="text-sm">Listening...</span>';
220
+ startBtn.innerHTML = '<i class="fas fa-microphone-slash mr-2"></i> Stop Voice Control';
221
+ startBtn.classList.remove('bg-green-500', 'pulse');
222
+ startBtn.classList.add('bg-red-500');
223
+ addToLog("Voice recognition activated. Start speaking commands.");
224
+ };
225
+
226
+ recognition.onerror = function(event) {
227
+ console.error('Speech recognition error', event.error);
228
+ micStatus.innerHTML = '<span class="w-3 h-3 rounded-full bg-red-500 mr-2"></span><span class="text-sm">Error</span>';
229
+ addToLog("Error occurred in speech recognition: " + event.error, true);
230
+ };
231
+
232
+ recognition.onend = function() {
233
+ if (isJumping) {
234
+ recognition.start(); // Restart if we're still in jumping mode
235
+ } else {
236
+ micStatus.innerHTML = '<span class="w-3 h-3 rounded-full bg-red-500 mr-2"></span><span class="text-sm">Mic Off</span>';
237
+ startBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i> Start Voice Control';
238
+ startBtn.classList.remove('bg-red-500');
239
+ startBtn.classList.add('bg-green-500', 'pulse');
240
+ }
241
+ };
242
+
243
+ recognition.onresult = function(event) {
244
+ const transcript = Array.from(event.results)
245
+ .map(result => result[0])
246
+ .map(result => result.transcript)
247
+ .join('');
248
+
249
+ if (event.results[0].isFinal) {
250
+ processCommand(transcript);
251
+ }
252
+ };
253
+ }
254
+
255
+ // Process voice commands
256
+ function processCommand(command) {
257
+ command = command.toLowerCase().trim();
258
+ addToLog("You said: " + command);
259
+
260
+ if (command.includes('start jumping') || command.includes('start jump')) {
261
+ startJumping();
262
+ } else if (command.includes('stop jumping') || command.includes('stop jump')) {
263
+ stopJumping();
264
+ } else if (command.includes('faster')) {
265
+ speedUp();
266
+ } else if (command.includes('slower')) {
267
+ slowDown();
268
+ } else if (command.includes('reset')) {
269
+ resetGame();
270
+ }
271
+ }
272
+
273
+ // Start jumping animation
274
+ function startJumping() {
275
+ if (!isJumping) {
276
+ isJumping = true;
277
+ character.classList.add('jumping', 'arms-up', 'legs-out');
278
+ updateAnimationSpeed();
279
+ addToLog("Started jumping jacks!");
280
+ }
281
+ }
282
+
283
+ // Stop jumping animation
284
+ function stopJumping() {
285
+ if (isJumping) {
286
+ isJumping = false;
287
+ character.classList.remove('jumping', 'arms-up', 'legs-out');
288
+ addToLog("Stopped jumping jacks.");
289
+ }
290
+ }
291
+
292
+ // Increase animation speed
293
+ function speedUp() {
294
+ if (animationSpeed < 3) {
295
+ animationSpeed += 0.5;
296
+ updateAnimationSpeed();
297
+ addToLog(`Increased speed to ${animationSpeed}x`);
298
+ }
299
+ }
300
+
301
+ // Decrease animation speed
302
+ function slowDown() {
303
+ if (animationSpeed > 0.5) {
304
+ animationSpeed -= 0.5;
305
+ updateAnimationSpeed();
306
+ addToLog(`Decreased speed to ${animationSpeed}x`);
307
+ }
308
+ }
309
+
310
+ // Update animation speed
311
+ function updateAnimationSpeed() {
312
+ const arms = document.querySelectorAll('.arm');
313
+ const legs = document.querySelectorAll('.leg');
314
+
315
+ character.style.animationDuration = `${1 / animationSpeed}s`;
316
+ arms.forEach(arm => arm.style.animationDuration = `${1 / animationSpeed}s`);
317
+ legs.forEach(leg => leg.style.animationDuration = `${1 / animationSpeed}s`);
318
+
319
+ // Count jumps based on animation cycles
320
+ if (isJumping) {
321
+ jumpCount += Math.floor(animationSpeed);
322
+ counter.textContent = jumpCount;
323
+ }
324
+ }
325
+
326
+ // Reset game
327
+ function resetGame() {
328
+ stopJumping();
329
+ jumpCount = 0;
330
+ animationSpeed = 1;
331
+ counter.textContent = '0';
332
+ addToLog("Counter reset to 0");
333
+ }
334
+
335
+ // Add message to log
336
+ function addToLog(message, isError = false) {
337
+ const now = new Date();
338
+ const timeString = now.toLocaleTimeString();
339
+ const logEntry = document.createElement('p');
340
+ logEntry.className = isError ? 'text-red-500' : 'text-gray-700';
341
+ logEntry.innerHTML = `<span class="text-gray-500">[${timeString}]</span> ${message}`;
342
+
343
+ // If "Waiting for commands..." is still there, remove it
344
+ if (log.firstChild && log.firstChild.classList.contains('italic')) {
345
+ log.removeChild(log.firstChild);
346
+ }
347
+
348
+ log.appendChild(logEntry);
349
+ log.scrollTop = log.scrollHeight;
350
+ }
351
+
352
+ // Clear log
353
+ function clearActivityLog() {
354
+ log.innerHTML = '<p class="text-gray-500 italic">Waiting for commands...</p>';
355
+ }
356
+
357
+ // Event listeners
358
+ startBtn.addEventListener('click', function() {
359
+ if (!recognition) {
360
+ initSpeechRecognition();
361
+ }
362
+
363
+ if (startBtn.classList.contains('bg-green-500')) {
364
+ // Start recognition
365
+ try {
366
+ recognition.start();
367
+ } catch (e) {
368
+ addToLog("Error starting speech recognition: " + e.message, true);
369
+ }
370
+ } else {
371
+ // Stop recognition
372
+ recognition.stop();
373
+ stopJumping();
374
+ }
375
+ });
376
+
377
+ resetBtn.addEventListener('click', resetGame);
378
+
379
+ helpBtn.addEventListener('click', function() {
380
+ helpModal.classList.remove('hidden');
381
+ });
382
+
383
+ closeHelp.addEventListener('click', function() {
384
+ helpModal.classList.add('hidden');
385
+ });
386
+
387
+ clearLog.addEventListener('click', clearActivityLog);
388
+
389
+ // Initialize
390
+ initSpeechRecognition();
391
+
392
+ // Simulate jumping jack counting when animating
393
+ setInterval(() => {
394
+ if (isJumping) {
395
+ jumpCount++;
396
+ counter.textContent = jumpCount;
397
+ }
398
+ }, 1000 / animationSpeed);
399
+ });
400
+ </script>
401
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=udhyojakman/hi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
402
+ </html>