Hugging Face's logo

Spaces:
Will-Code
/
baseball-tracker-000001
Running

App Files Community
Will-Code commited on
Commit
61cdfa6
·
verified ·
1 Parent(s): 3085da0

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +512 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Baseball Tracker 000001
3
- emoji: 🌍
4
- colorFrom: pink
5
- colorTo: indigo
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: baseball-tracker-000001
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
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,512 @@
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>Baseball Flight Tracker</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
11
+ <style>
12
+ #cameraPreview, #3dView {
13
+ width: 100%;
14
+ height: 300px;
15
+ background-color: #1a202c;
16
+ border-radius: 12px;
17
+ overflow: hidden;
18
+ }
19
+ #3dView {
20
+ position: relative;
21
+ }
22
+ .ball-marker {
23
+ position: absolute;
24
+ width: 12px;
25
+ height: 12px;
26
+ background-color: red;
27
+ border-radius: 50%;
28
+ transform: translate(-50%, -50%);
29
+ z-index: 10;
30
+ }
31
+ .flight-path {
32
+ position: absolute;
33
+ background-color: rgba(255, 0, 0, 0.5);
34
+ height: 2px;
35
+ transform-origin: left center;
36
+ z-index: 5;
37
+ }
38
+ #cameraContainer {
39
+ position: relative;
40
+ }
41
+ .recording-indicator {
42
+ position: absolute;
43
+ top: 10px;
44
+ right: 10px;
45
+ background-color: rgba(255, 0, 0, 0.7);
46
+ color: white;
47
+ padding: 5px 10px;
48
+ border-radius: 20px;
49
+ font-size: 12px;
50
+ display: flex;
51
+ align-items: center;
52
+ gap: 5px;
53
+ z-index: 10;
54
+ }
55
+ .recording-dot {
56
+ width: 8px;
57
+ height: 8px;
58
+ background-color: white;
59
+ border-radius: 50%;
60
+ animation: pulse 1.5s infinite;
61
+ }
62
+ @keyframes pulse {
63
+ 0% { opacity: 1; }
64
+ 50% { opacity: 0.3; }
65
+ 100% { opacity: 1; }
66
+ }
67
+ </style>
68
+ </head>
69
+ <body class="bg-gray-100 text-gray-900">
70
+ <div class="container mx-auto px-4 py-6 max-w-md">
71
+ <header class="mb-6">
72
+ <div class="flex items-center justify-between">
73
+ <div>
74
+ <h1 class="text-2xl font-bold text-gray-800">Baseball Flight Tracker</h1>
75
+ <p class="text-gray-600">Track and visualize baseball trajectories</p>
76
+ </div>
77
+ <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center text-white">
78
+ <i class="fas fa-baseball-ball text-xl"></i>
79
+ </div>
80
+ </div>
81
+ </header>
82
+
83
+ <div class="bg-white rounded-xl shadow-md p-4 mb-6">
84
+ <div class="flex justify-between items-center mb-4">
85
+ <h2 class="text-lg font-semibold">Live Tracking</h2>
86
+ <div class="flex space-x-2">
87
+ <button id="recordBtn" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-full flex items-center gap-2 transition">
88
+ <i class="fas fa-circle"></i> Record
89
+ </button>
90
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 p-2 rounded-full transition">
91
+ <i class="fas fa-cog"></i>
92
+ </button>
93
+ </div>
94
+ </div>
95
+
96
+ <div id="cameraContainer" class="mb-4">
97
+ <div id="cameraPreview" class="relative">
98
+ <!-- Camera preview will be shown here -->
99
+ <div class="absolute inset-0 flex items-center justify-center text-white">
100
+ <i class="fas fa-camera text-4xl opacity-50"></i>
101
+ </div>
102
+ <!-- Ball markers and flight path will be added here during tracking -->
103
+ </div>
104
+ </div>
105
+
106
+ <div class="grid grid-cols-3 gap-2 mb-4">
107
+ <div class="bg-gray-100 p-3 rounded-lg text-center">
108
+ <p class="text-sm text-gray-500">Speed</p>
109
+ <p class="font-bold">-- mph</p>
110
+ </div>
111
+ <div class="bg-gray-100 p-3 rounded-lg text-center">
112
+ <p class="text-sm text-gray-500">Angle</p>
113
+ <p class="font-bold">--°</p>
114
+ </div>
115
+ <div class="bg-gray-100 p-3 rounded-lg text-center">
116
+ <p class="text-sm text-gray-500">Distance</p>
117
+ <p class="font-bold">-- ft</p>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <div class="bg-white rounded-xl shadow-md p-4 mb-6">
123
+ <h2 class="text-lg font-semibold mb-4">3D Visualization</h2>
124
+ <div id="3dView">
125
+ <!-- 3D stadium visualization will be rendered here -->
126
+ <div class="absolute inset-0 flex items-center justify-center text-white">
127
+ <i class="fas fa-baseball-ball text-4xl opacity-50"></i>
128
+ </div>
129
+ </div>
130
+ <div class="mt-3 flex justify-between">
131
+ <button id="viewHome" class="bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded text-sm transition">
132
+ Home View
133
+ </button>
134
+ <button id="viewPitcher" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded text-sm transition">
135
+ Pitcher View
136
+ </button>
137
+ <button id="viewSide" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-3 py-1 rounded text-sm transition">
138
+ Side View
139
+ </button>
140
+ </div>
141
+ </div>
142
+
143
+ <div class="bg-white rounded-xl shadow-md p-4">
144
+ <h2 class="text-lg font-semibold mb-4">Recent Sessions</h2>
145
+ <div class="space-y-3">
146
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
147
+ <div>
148
+ <p class="font-medium">Session #245</p>
149
+ <p class="text-sm text-gray-500">Today, 3:45 PM</p>
150
+ </div>
151
+ <div class="text-right">
152
+ <p class="font-medium">92 mph</p>
153
+ <p class="text-sm text-gray-500">Fastball</p>
154
+ </div>
155
+ </div>
156
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
157
+ <div>
158
+ <p class="font-medium">Session #244</p>
159
+ <p class="text-sm text-gray-500">Today, 2:30 PM</p>
160
+ </div>
161
+ <div class="text-right">
162
+ <p class="font-medium">85 mph</p>
163
+ <p class="text-sm text-gray-500">Curveball</p>
164
+ </div>
165
+ </div>
166
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
167
+ <div>
168
+ <p class="font-medium">Session #243</p>
169
+ <p class="text-sm text-gray-500">Yesterday</p>
170
+ </div>
171
+ <div class="text-right">
172
+ <p class="font-medium">89 mph</p>
173
+ <p class="text-sm text-gray-500">Slider</p>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ <button class="w-full mt-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 font-medium transition">
178
+ View All Sessions
179
+ </button>
180
+ </div>
181
+ </div>
182
+
183
+ <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg">
184
+ <div class="container mx-auto max-w-md px-4">
185
+ <div class="flex justify-around py-3">
186
+ <a href="#" class="flex flex-col items-center text-blue-500">
187
+ <i class="fas fa-home text-xl"></i>
188
+ <span class="text-xs mt-1">Home</span>
189
+ </a>
190
+ <a href="#" class="flex flex-col items-center text-gray-500">
191
+ <i class="fas fa-chart-line text-xl"></i>
192
+ <span class="text-xs mt-1">Stats</span>
193
+ </a>
194
+ <a href="#" class="flex flex-col items-center text-gray-500">
195
+ <i class="fas fa-video text-xl"></i>
196
+ <span class="text-xs mt-1">Record</span>
197
+ </a>
198
+ <a href="#" class="flex flex-col items-center text-gray-500">
199
+ <i class="fas fa-user text-xl"></i>
200
+ <span class="text-xs mt-1">Profile</span>
201
+ </a>
202
+ </div>
203
+ </div>
204
+ </nav>
205
+
206
+ <script>
207
+ // Simulate ball tracking
208
+ let isRecording = false;
209
+ const recordBtn = document.getElementById('recordBtn');
210
+ const cameraPreview = document.getElementById('cameraPreview');
211
+ let recordingIndicator = null;
212
+
213
+ recordBtn.addEventListener('click', function() {
214
+ isRecording = !isRecording;
215
+
216
+ if (isRecording) {
217
+ recordBtn.innerHTML = '<i class="fas fa-stop"></i> Stop';
218
+ recordBtn.classList.remove('bg-red-500');
219
+ recordBtn.classList.add('bg-gray-600');
220
+
221
+ // Add recording indicator
222
+ recordingIndicator = document.createElement('div');
223
+ recordingIndicator.className = 'recording-indicator';
224
+ recordingIndicator.innerHTML = `
225
+ <div class="recording-dot"></div>
226
+ REC
227
+ `;
228
+ cameraPreview.appendChild(recordingIndicator);
229
+
230
+ // Simulate ball tracking
231
+ simulateBallTracking();
232
+ } else {
233
+ recordBtn.innerHTML = '<i class="fas fa-circle"></i> Record';
234
+ recordBtn.classList.remove('bg-gray-600');
235
+ recordBtn.classList.add('bg-red-500');
236
+
237
+ // Remove recording indicator
238
+ if (recordingIndicator) {
239
+ cameraPreview.removeChild(recordingIndicator);
240
+ }
241
+
242
+ // Clear any existing markers
243
+ const markers = document.querySelectorAll('.ball-marker, .flight-path');
244
+ markers.forEach(marker => marker.remove());
245
+ }
246
+ });
247
+
248
+ function simulateBallTracking() {
249
+ if (!isRecording) return;
250
+
251
+ // Clear previous markers
252
+ const markers = document.querySelectorAll('.ball-marker, .flight-path');
253
+ markers.forEach(marker => marker.remove());
254
+
255
+ // Create flight path
256
+ const flightPath = document.createElement('div');
257
+ flightPath.className = 'flight-path';
258
+ flightPath.style.width = '0';
259
+ flightPath.style.left = '30%';
260
+ flightPath.style.top = '70%';
261
+ cameraPreview.appendChild(flightPath);
262
+
263
+ // Animate ball flight
264
+ let position = 0;
265
+ const interval = setInterval(() => {
266
+ if (!isRecording) {
267
+ clearInterval(interval);
268
+ return;
269
+ }
270
+
271
+ position += 2;
272
+
273
+ // Create new ball marker
274
+ const marker = document.createElement('div');
275
+ marker.className = 'ball-marker';
276
+ marker.style.left = `${30 + position}%`;
277
+ marker.style.top = `${70 - position * 0.7}%`;
278
+ cameraPreview.appendChild(marker);
279
+
280
+ // Update flight path
281
+ flightPath.style.width = `${position}%`;
282
+ flightPath.style.transform = `rotate(${-position * 0.5}deg)`;
283
+
284
+ // End simulation after reaching certain point
285
+ if (position >= 70) {
286
+ clearInterval(interval);
287
+ updateStats();
288
+ render3DStadium();
289
+ }
290
+ }, 50);
291
+ }
292
+
293
+ function updateStats() {
294
+ // Update the stats display with simulated data
295
+ document.querySelectorAll('.bg-gray-100 p.font-bold')[0].textContent = '92 mph';
296
+ document.querySelectorAll('.bg-gray-100 p.font-bold')[1].textContent = '24°';
297
+ document.querySelectorAll('.bg-gray-100 p.font-bold')[2].textContent = '380 ft';
298
+ }
299
+
300
+ // 3D Stadium Visualization
301
+ let scene, camera, renderer, controls, ball, stadium;
302
+
303
+ function init3D() {
304
+ const container = document.getElementById('3dView');
305
+
306
+ // Scene
307
+ scene = new THREE.Scene();
308
+ scene.background = new THREE.Color(0xf0f0f0);
309
+
310
+ // Camera
311
+ camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
312
+ camera.position.set(0, 10, 20);
313
+
314
+ // Renderer
315
+ renderer = new THREE.WebGLRenderer({ antialias: true });
316
+ renderer.setSize(container.clientWidth, container.clientHeight);
317
+ container.innerHTML = '';
318
+ container.appendChild(renderer.domElement);
319
+
320
+ // Controls
321
+ controls = new THREE.OrbitControls(camera, renderer.domElement);
322
+ controls.enableDamping = true;
323
+ controls.dampingFactor = 0.25;
324
+
325
+ // Lights
326
+ const ambientLight = new THREE.AmbientLight(0x404040);
327
+ scene.add(ambientLight);
328
+
329
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
330
+ directionalLight.position.set(1, 1, 1);
331
+ scene.add(directionalLight);
332
+
333
+ // Create simple stadium
334
+ createStadium();
335
+
336
+ // Handle window resize
337
+ window.addEventListener('resize', onWindowResize);
338
+
339
+ // Start animation loop
340
+ animate();
341
+ }
342
+
343
+ function createStadium() {
344
+ // Ground
345
+ const groundGeometry = new THREE.PlaneGeometry(40, 40);
346
+ const groundMaterial = new THREE.MeshStandardMaterial({
347
+ color: 0x4CAF50,
348
+ roughness: 0.8,
349
+ metalness: 0.2
350
+ });
351
+ const ground = new THREE.Mesh(groundGeometry, groundMaterial);
352
+ ground.rotation.x = -Math.PI / 2;
353
+ scene.add(ground);
354
+
355
+ // Infield (diamond)
356
+ const infieldGeometry = new THREE.CircleGeometry(10, 32);
357
+ const infieldMaterial = new THREE.MeshStandardMaterial({
358
+ color: 0xD2B48C,
359
+ roughness: 0.7
360
+ });
361
+ const infield = new THREE.Mesh(infieldGeometry, infieldMaterial);
362
+ infield.rotation.x = -Math.PI / 2;
363
+ infield.position.y = 0.01;
364
+ scene.add(infield);
365
+
366
+ // Bases
367
+ const baseGeometry = new THREE.BoxGeometry(1, 0.1, 1);
368
+ const baseMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
369
+
370
+ const firstBase = new THREE.Mesh(baseGeometry, baseMaterial);
371
+ firstBase.position.set(0, 0.02, 10);
372
+ scene.add(firstBase);
373
+
374
+ const secondBase = new THREE.Mesh(baseGeometry, baseMaterial);
375
+ secondBase.position.set(-10, 0.02, 0);
376
+ secondBase.rotation.y = Math.PI / 4;
377
+ scene.add(secondBase);
378
+
379
+ const thirdBase = new THREE.Mesh(baseGeometry, baseMaterial);
380
+ thirdBase.position.set(0, 0.02, -10);
381
+ scene.add(thirdBase);
382
+
383
+ // Home plate (pentagon shape)
384
+ const homePlateShape = new THREE.Shape();
385
+ homePlateShape.moveTo(0, 0);
386
+ homePlateShape.lineTo(-0.7, 0.7);
387
+ homePlateShape.lineTo(0, 1.4);
388
+ homePlateShape.lineTo(0.7, 0.7);
389
+ homePlateShape.lineTo(0, 0);
390
+
391
+ const homePlateGeometry = new THREE.ShapeGeometry(homePlateShape);
392
+ const homePlateMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
393
+ const homePlate = new THREE.Mesh(homePlateGeometry, homePlateMaterial);
394
+ homePlate.rotation.x = -Math.PI / 2;
395
+ homePlate.position.set(0, 0.02, 11);
396
+ homePlate.scale.set(5, 5, 1);
397
+ scene.add(homePlate);
398
+
399
+ // Pitcher's mound
400
+ const moundGeometry = new THREE.CylinderGeometry(1, 1, 0.2, 32);
401
+ const moundMaterial = new THREE.MeshStandardMaterial({
402
+ color: 0xD2B48C,
403
+ roughness: 0.7
404
+ });
405
+ const mound = new THREE.Mesh(moundGeometry, moundMaterial);
406
+ mound.position.set(0, 0.1, 0);
407
+ scene.add(mound);
408
+
409
+ // Simple stands
410
+ for (let i = 0; i < 4; i++) {
411
+ const angle = i * Math.PI / 2;
412
+ const x = Math.cos(angle) * 18;
413
+ const z = Math.sin(angle) * 18;
414
+
415
+ const standGeometry = new THREE.BoxGeometry(15, 5, 3);
416
+ const standMaterial = new THREE.MeshStandardMaterial({ color: 0x607D8B });
417
+ const stand = new THREE.Mesh(standGeometry, standMaterial);
418
+ stand.position.set(x, 2.5, z);
419
+ stand.lookAt(0, 2.5, 0);
420
+ scene.add(stand);
421
+ }
422
+ }
423
+
424
+ function render3DStadium() {
425
+ if (!scene) init3D();
426
+
427
+ // Create ball
428
+ if (ball) scene.remove(ball);
429
+
430
+ const ballGeometry = new THREE.SphereGeometry(0.5, 32, 32);
431
+ const ballMaterial = new THREE.MeshStandardMaterial({
432
+ color: 0xCC0000,
433
+ roughness: 0.3,
434
+ metalness: 0.5
435
+ });
436
+ ball = new THREE.Mesh(ballGeometry, ballMaterial);
437
+ scene.add(ball);
438
+
439
+ // Animate ball flight
440
+ const startPos = { x: 0, y: 2, z: 5 };
441
+ const endPos = { x: -15, y: 1, z: -10 };
442
+ const controlPos = { x: -5, y: 10, z: -2 };
443
+
444
+ let t = 0;
445
+ const ballInterval = setInterval(() => {
446
+ t += 0.02;
447
+
448
+ if (t > 1) {
449
+ clearInterval(ballInterval);
450
+ return;
451
+ }
452
+
453
+ // Quadratic Bezier curve
454
+ const x = (1-t)*(1-t)*startPos.x + 2*(1-t)*t*controlPos.x + t*t*endPos.x;
455
+ const y = (1-t)*(1-t)*startPos.y + 2*(1-t)*t*controlPos.y + t*t*endPos.y;
456
+ const z = (1-t)*(1-t)*startPos.z + 2*(1-t)*t*controlPos.z + t*t*endPos.z;
457
+
458
+ ball.position.set(x, y, z);
459
+ }, 20);
460
+ }
461
+
462
+ function onWindowResize() {
463
+ const container = document.getElementById('3dView');
464
+ camera.aspect = container.clientWidth / container.clientHeight;
465
+ camera.updateProjectionMatrix();
466
+ renderer.setSize(container.clientWidth, container.clientHeight);
467
+ }
468
+
469
+ function animate() {
470
+ requestAnimationFrame(animate);
471
+ controls.update();
472
+ renderer.render(scene, camera);
473
+ }
474
+
475
+ // View buttons
476
+ document.getElementById('viewHome').addEventListener('click', () => {
477
+ if (camera) {
478
+ camera.position.set(0, 10, 20);
479
+ camera.lookAt(0, 0, 0);
480
+ }
481
+ });
482
+
483
+ document.getElementById('viewPitcher').addEventListener('click', () => {
484
+ if (camera) {
485
+ camera.position.set(0, 2, 10);
486
+ camera.lookAt(0, 1.5, 0);
487
+ }
488
+ });
489
+
490
+ document.getElementById('viewSide').addEventListener('click', () => {
491
+ if (camera) {
492
+ camera.position.set(15, 5, 0);
493
+ camera.lookAt(0, 2, 0);
494
+ }
495
+ });
496
+
497
+ // Initialize 3D view on first recording
498
+ let is3DInitialized = false;
499
+ function checkAndInit3D() {
500
+ if (!is3DInitialized) {
501
+ init3D();
502
+ is3DInitialized = true;
503
+ }
504
+ }
505
+
506
+ // Demo button to show 3D without recording
507
+ document.querySelectorAll('#viewHome, #viewPitcher, #viewSide').forEach(btn => {
508
+ btn.addEventListener('click', checkAndInit3D);
509
+ });
510
+ </script>
511
+ <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=Will-Code/baseball-tracker-000001" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
512
+ </html>
prompts.txt ADDED
File without changes