Hugging Face's logo

Spaces:
nzhenev
/
anycoder-1e973fcc
Running

App Files Community
nzhenev commited on
Commit
223fd23
·
verified ·
1 Parent(s): 6765bba

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +778 -19
index.html CHANGED
@@ -1,19 +1,778 @@
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>SAM3 Scene Reconstructor | AI Spatial Analysis</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+
12
+ <style>
13
+ :root {
14
+ --bg-dark: #0a0b10;
15
+ --bg-panel: #14161f;
16
+ --accent: #6366f1;
17
+ --accent-glow: rgba(99, 102, 241, 0.4);
18
+ --text-main: #f3f4f6;
19
+ --text-muted: #9ca3af;
20
+ --border: #2d303e;
21
+ --success: #10b981;
22
+ --grid-color: rgba(255, 255, 255, 0.03);
23
+ }
24
+
25
+ * {
26
+ box-sizing: border-box;
27
+ margin: 0;
28
+ padding: 0;
29
+ }
30
+
31
+ body {
32
+ font-family: 'Inter', sans-serif;
33
+ background-color: var(--bg-dark);
34
+ color: var(--text-main);
35
+ height: 100vh;
36
+ overflow: hidden;
37
+ display: flex;
38
+ flex-direction: column;
39
+ }
40
+
41
+ /* Background Grid Animation */
42
+ .bg-grid {
43
+ position: fixed;
44
+ top: 0;
45
+ left: 0;
46
+ width: 200%;
47
+ height: 200%;
48
+ background-image:
49
+ linear-gradient(var(--grid-color) 1px, transparent 1px),
50
+ linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
51
+ background-size: 40px 40px;
52
+ transform: perspective(500px) rotateX(60deg) translateY(-100px) translateZ(-200px);
53
+ animation: gridMove 20s linear infinite;
54
+ z-index: -1;
55
+ pointer-events: none;
56
+ }
57
+
58
+ @keyframes gridMove {
59
+ 0% { transform: perspective(500px) rotateX(60deg) translateY(0) translateZ(-200px); }
60
+ 100% { transform: perspective(500px) rotateX(60deg) translateY(40px) translateZ(-200px); }
61
+ }
62
+
63
+ /* Header */
64
+ header {
65
+ height: 60px;
66
+ background: rgba(20, 22, 31, 0.8);
67
+ backdrop-filter: blur(10px);
68
+ border-bottom: 1px solid var(--border);
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: space-between;
72
+ padding: 0 24px;
73
+ z-index: 100;
74
+ }
75
+
76
+ .logo {
77
+ display: flex;
78
+ align-items: center;
79
+ gap: 12px;
80
+ font-weight: 700;
81
+ font-size: 1.2rem;
82
+ letter-spacing: -0.02em;
83
+ }
84
+
85
+ .logo i {
86
+ color: var(--accent);
87
+ font-size: 1.4rem;
88
+ filter: drop-shadow(0 0 8px var(--accent-glow));
89
+ }
90
+
91
+ .anycoder-link {
92
+ font-family: 'Space Mono', monospace;
93
+ font-size: 0.8rem;
94
+ color: var(--text-muted);
95
+ text-decoration: none;
96
+ border: 1px solid var(--border);
97
+ padding: 6px 12px;
98
+ border-radius: 4px;
99
+ transition: all 0.3s ease;
100
+ }
101
+
102
+ .anycoder-link:hover {
103
+ border-color: var(--accent);
104
+ color: var(--accent);
105
+ background: rgba(99, 102, 241, 0.1);
106
+ }
107
+
108
+ /* Main Layout */
109
+ main {
110
+ flex: 1;
111
+ display: grid;
112
+ grid-template-columns: 300px 1fr 320px;
113
+ gap: 1px;
114
+ background: var(--border); /* Creates gap borders */
115
+ height: calc(100vh - 60px);
116
+ }
117
+
118
+ /* Panels Common */
119
+ .panel {
120
+ background: var(--bg-dark);
121
+ display: flex;
122
+ flex-direction: column;
123
+ overflow: hidden;
124
+ }
125
+
126
+ .panel-header {
127
+ padding: 16px;
128
+ font-weight: 600;
129
+ font-size: 0.9rem;
130
+ border-bottom: 1px solid var(--border);
131
+ display: flex;
132
+ justify-content: space-between;
133
+ align-items: center;
134
+ background: var(--bg-panel);
135
+ }
136
+
137
+ .panel-content {
138
+ flex: 1;
139
+ overflow-y: auto;
140
+ padding: 20px;
141
+ }
142
+
143
+ /* Left Sidebar - Controls */
144
+ .upload-zone {
145
+ border: 2px dashed var(--border);
146
+ border-radius: 8px;
147
+ padding: 30px 20px;
148
+ text-align: center;
149
+ cursor: pointer;
150
+ transition: all 0.3s;
151
+ margin-bottom: 24px;
152
+ position: relative;
153
+ overflow: hidden;
154
+ }
155
+
156
+ .upload-zone:hover {
157
+ border-color: var(--accent);
158
+ background: rgba(99, 102, 241, 0.05);
159
+ }
160
+
161
+ .upload-zone i {
162
+ font-size: 2rem;
163
+ color: var(--text-muted);
164
+ margin-bottom: 12px;
165
+ }
166
+
167
+ .upload-zone p {
168
+ font-size: 0.9rem;
169
+ color: var(--text-muted);
170
+ }
171
+
172
+ .control-group {
173
+ margin-bottom: 24px;
174
+ }
175
+
176
+ .control-label {
177
+ display: block;
178
+ font-size: 0.8rem;
179
+ color: var(--text-muted);
180
+ margin-bottom: 8px;
181
+ font-weight: 500;
182
+ }
183
+
184
+ .slider-container {
185
+ display: flex;
186
+ align-items: center;
187
+ gap: 10px;
188
+ }
189
+
190
+ input[type="range"] {
191
+ flex: 1;
192
+ -webkit-appearance: none;
193
+ height: 4px;
194
+ background: var(--border);
195
+ border-radius: 2px;
196
+ outline: none;
197
+ }
198
+
199
+ input[type="range"]::-webkit-slider-thumb {
200
+ -webkit-appearance: none;
201
+ width: 16px;
202
+ height: 16px;
203
+ background: var(--accent);
204
+ border-radius: 50%;
205
+ cursor: pointer;
206
+ box-shadow: 0 0 10px var(--accent-glow);
207
+ }
208
+
209
+ .setting-toggle {
210
+ display: flex;
211
+ justify-content: space-between;
212
+ align-items: center;
213
+ padding: 12px;
214
+ background: var(--bg-panel);
215
+ border: 1px solid var(--border);
216
+ border-radius: 6px;
217
+ margin-bottom: 8px;
218
+ cursor: pointer;
219
+ }
220
+
221
+ .setting-toggle.active {
222
+ border-color: var(--accent);
223
+ }
224
+
225
+ .toggle-switch {
226
+ width: 36px;
227
+ height: 20px;
228
+ background: var(--border);
229
+ border-radius: 10px;
230
+ position: relative;
231
+ transition: 0.3s;
232
+ }
233
+
234
+ .setting-toggle.active .toggle-switch {
235
+ background: var(--accent);
236
+ }
237
+
238
+ .toggle-switch::after {
239
+ content: '';
240
+ position: absolute;
241
+ top: 2px;
242
+ left: 2px;
243
+ width: 16px;
244
+ height: 16px;
245
+ background: white;
246
+ border-radius: 50%;
247
+ transition: 0.3s;
248
+ }
249
+
250
+ .setting-toggle.active .toggle-switch::after {
251
+ transform: translateX(16px);
252
+ }
253
+
254
+ .btn-primary {
255
+ width: 100%;
256
+ padding: 14px;
257
+ background: var(--accent);
258
+ color: white;
259
+ border: none;
260
+ border-radius: 6px;
261
+ font-weight: 600;
262
+ cursor: pointer;
263
+ transition: 0.2s;
264
+ display: flex;
265
+ align-items: center;
266
+ justify-content: center;
267
+ gap: 8px;
268
+ margin-top: auto;
269
+ }
270
+
271
+ .btn-primary:hover {
272
+ background: #5659d6;
273
+ box-shadow: 0 0 15px var(--accent-glow);
274
+ }
275
+
276
+ /* Center - Viewport */
277
+ .viewport {
278
+ position: relative;
279
+ background: #000;
280
+ overflow: hidden;
281
+ display: flex;
282
+ align-items: center;
283
+ justify-content: center;
284
+ }
285
+
286
+ .viewport-overlay {
287
+ position: absolute;
288
+ top: 20px;
289
+ left: 20px;
290
+ display: flex;
291
+ gap: 10px;
292
+ }
293
+
294
+ .badge {
295
+ background: rgba(0,0,0,0.6);
296
+ backdrop-filter: blur(4px);
297
+ padding: 4px 8px;
298
+ border-radius: 4px;
299
+ font-size: 0.75rem;
300
+ font-family: 'Space Mono', monospace;
301
+ border: 1px solid rgba(255,255,255,0.1);
302
+ }
303
+
304
+ /* The 3D Scene Simulation */
305
+ .scene-container {
306
+ width: 100%;
307
+ height: 100%;
308
+ position: relative;
309
+ perspective: 1000px;
310
+ transform-style: preserve-3d;
311
+ }
312
+
313
+ .reconstruction-layer {
314
+ position: absolute;
315
+ top: 0; left: 0;
316
+ width: 100%; height: 100%;
317
+ display: flex;
318
+ justify-content: center;
319
+ align-items: center;
320
+ }
321
+
322
+ /* Simulated Human Skeleton/Mesh */
323
+ .human-mesh {
324
+ width: 200px;
325
+ height: 400px;
326
+ position: relative;
327
+ transform-style: preserve-3d;
328
+ animation: rotateModel 10s infinite linear;
329
+ display: none; /* Hidden initially */
330
+ }
331
+
332
+ @keyframes rotateModel {
333
+ 0% { transform: rotateY(0deg); }
334
+ 100% { transform: rotateY(360deg); }
335
+ }
336
+
337
+ /* Simple CSS Geometric Human Representation */
338
+ .head { width: 40px; height: 50px; background: rgba(99, 102, 241, 0.2); border: 1px solid var(--accent); border-radius: 12px; position: absolute; top: 0; left: 80px; box-shadow: 0 0 20px var(--accent-glow); }
339
+ .torso { width: 80px; height: 120px; background: rgba(99, 102, 241, 0.15); border: 1px solid var(--accent); position: absolute; top: 55px; left: 60px; clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%); }
340
+ .arm-l { width: 20px; height: 140px; background: rgba(99, 102, 241, 0.15); border: 1px solid var(--accent); position: absolute; top: 55px; left: 30px; transform-origin: top; transform: rotate(10deg); }
341
+ .arm-r { width: 20px; height: 140px; background: rgba(99, 102, 241, 0.15); border: 1px solid var(--accent); position: absolute; top: 55px; right: 30px; transform-origin: top; transform: rotate(-10deg); }
342
+ .leg-l { width: 25px; height: 160px; background: rgba(99, 102, 241, 0.15); border: 1px solid var(--accent); position: absolute; top: 180px; left: 65px; }
343
+ .leg-r { width: 25px; height: 160px; background: rgba(99, 102, 241, 0.15); border: 1px solid var(--accent); position: absolute; top: 180px; right: 65px; }
344
+
345
+ /* Point Cloud Effect */
346
+ .points {
347
+ position: absolute;
348
+ width: 4px; height: 4px;
349
+ background: var(--success);
350
+ border-radius: 50%;
351
+ box-shadow: 0 0 4px var(--success);
352
+ }
353
+
354
+ /* Right Sidebar - Data */
355
+ .data-card {
356
+ background: var(--bg-panel);
357
+ border: 1px solid var(--border);
358
+ border-radius: 6px;
359
+ padding: 12px;
360
+ margin-bottom: 12px;
361
+ }
362
+
363
+ .data-card h4 {
364
+ font-size: 0.75rem;
365
+ text-transform: uppercase;
366
+ color: var(--text-muted);
367
+ margin-bottom: 8px;
368
+ display: flex;
369
+ justify-content: space-between;
370
+ }
371
+
372
+ .metric-value {
373
+ font-family: 'Space Mono', monospace;
374
+ font-size: 1.1rem;
375
+ color: var(--text-main);
376
+ }
377
+
378
+ .progress-bar {
379
+ height: 4px;
380
+ background: var(--border);
381
+ border-radius: 2px;
382
+ margin-top: 8px;
383
+ overflow: hidden;
384
+ }
385
+
386
+ .progress-fill {
387
+ height: 100%;
388
+ background: var(--accent);
389
+ width: 0%;
390
+ transition: width 0.5s ease;
391
+ }
392
+
393
+ .log-console {
394
+ font-family: 'Space Mono', monospace;
395
+ font-size: 0.7rem;
396
+ color: var(--text-muted);
397
+ height: 200px;
398
+ overflow-y: auto;
399
+ background: #000;
400
+ padding: 10px;
401
+ border-radius: 4px;
402
+ }
403
+
404
+ .log-entry {
405
+ margin-bottom: 4px;
406
+ border-left: 2px solid transparent;
407
+ padding-left: 6px;
408
+ }
409
+ .log-entry.info { border-color: var(--accent); color: #c7d2fe; }
410
+ .log-entry.success { border-color: var(--success); color: #d1fae5; }
411
+
412
+ /* Loading Animation */
413
+ .scanning-laser {
414
+ position: absolute;
415
+ top: 0;
416
+ left: 0;
417
+ width: 100%;
418
+ height: 2px;
419
+ background: var(--success);
420
+ box-shadow: 0 0 15px var(--success);
421
+ animation: scan 2s ease-in-out infinite;
422
+ display: none;
423
+ z-index: 10;
424
+ }
425
+
426
+ @keyframes scan {
427
+ 0% { top: 0%; opacity: 0; }
428
+ 10% { opacity: 1; }
429
+ 90% { opacity: 1; }
430
+ 100% { top: 100%; opacity: 0; }
431
+ }
432
+
433
+ /* Responsive */
434
+ @media (max-width: 1024px) {
435
+ main {
436
+ grid-template-columns: 250px 1fr;
437
+ }
438
+ .right-panel {
439
+ display: none;
440
+ }
441
+ }
442
+
443
+ @media (max-width: 768px) {
444
+ main {
445
+ grid-template-columns: 1fr;
446
+ display: block;
447
+ overflow-y: auto;
448
+ }
449
+ .panel {
450
+ height: auto;
451
+ min-height: 300px;
452
+ border-bottom: 1px solid var(--border);
453
+ }
454
+ }
455
+ </style>
456
+ </head>
457
+ <body>
458
+
459
+ <div class="bg-grid"></div>
460
+
461
+ <header>
462
+ <div class="logo">
463
+ <i class="fa-solid fa-cube"></i>
464
+ <span>SAM3 Reconstructor</span>
465
+ </div>
466
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
467
+ </header>
468
+
469
+ <main>
470
+ <!-- Left Panel: Controls -->
471
+ <aside class="panel">
472
+ <div class="panel-header">
473
+ <span>Input & Configuration</span>
474
+ <i class="fa-solid fa-sliders"></i>
475
+ </div>
476
+ <div class="panel-content">
477
+ <div class="upload-zone" id="dropZone">
478
+ <i class="fa-solid fa-cloud-arrow-up"></i>
479
+ <p><strong>Drop Video or Image</strong><br>or click to browse</p>
480
+ <input type="file" id="fileInput" hidden accept="image/*,video/*">
481
+ </div>
482
+
483
+ <div class="control-group">
484
+ <label class="control-label">Mesh Density</label>
485
+ <div class="slider-container">
486
+ <span style="font-size: 0.8rem; color:var(--text-muted)">Low</span>
487
+ <input type="range" min="1" max="100" value="75" class="slider">
488
+ <span style="font-size: 0.8rem; color:var(--text-muted)">High</span>
489
+ </div>
490
+ </div>
491
+
492
+ <div class="control-group">
493
+ <label class="control-label">Body Shape Precision</label>
494
+ <div class="setting-toggle active" onclick="toggleSetting(this)">
495
+ <span>SMPL-X Model</span>
496
+ <div class="toggle-switch"></div>
497
+ </div>
498
+ </div>
499
+
500
+ <div class="control-group">
501
+ <label class="control-label">Features</label>
502
+ <div class="setting-toggle active" onclick="toggleSetting(this)">
503
+ <span>Temporal Consistency</span>
504
+ <div class="toggle-switch"></div>
505
+ </div>
506
+ <div class="setting-toggle" onclick="toggleSetting(this)">
507
+ <span>Texture Projection</span>
508
+ <div class="toggle-switch"></div>
509
+ </div>
510
+ </div>
511
+
512
+ <button class="btn-primary" id="processBtn" onclick="startReconstruction()">
513
+ <i class="fa-solid fa-play"></i> Start Reconstruction
514
+ </button>
515
+ </div>
516
+ </aside>
517
+
518
+ <!-- Center Panel: Viewport -->
519
+ <section class="panel">
520
+ <div class="panel-header">
521
+ <span>3D Viewport</span>
522
+ <div style="display: flex; gap: 10px;">
523
+ <i class="fa-solid fa-expand" style="cursor: pointer; color: var(--text-muted);"></i>
524
+ <i class="fa-solid fa-camera" style="cursor: pointer; color: var(--text-muted);"></i>
525
+ </div>
526
+ </div>
527
+ <div class="viewport" id="viewport">
528
+ <div class="viewport-overlay">
529
+ <div class="badge"><i class="fa-solid fa-video"></i> Source: None</div>
530
+ <div class="badge"><i class="fa-solid fa-ruler-combined"></i> Scale: 1:1</div>
531
+ <div class="badge" id="fpsCounter">FPS: 0</div>
532
+ </div>
533
+
534
+ <div class="scene-container">
535
+ <div class="scanning-laser" id="laser"></div>
536
+
537
+ <div class="reconstruction-layer">
538
+ <!-- Placeholder for when no content is loaded -->
539
+ <div id="placeholder-text" style="text-align: center; color: var(--text-muted);">
540
+ <i class="fa-solid fa-cube" style="font-size: 4rem; margin-bottom: 20px; opacity: 0.2;"></i>
541
+ <p>Waiting for input...</p>
542
+ </div>
543
+
544
+ <!-- The 3D Model Representation -->
545
+ <div class="human-mesh" id="humanModel">
546
+ <div class="head"></div>
547
+ <div class="torso"></div>
548
+ <div class="arm-l"></div>
549
+ <div class="arm-r"></div>
550
+ <div class="leg-l"></div>
551
+ <div class="leg-r"></div>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ </div>
556
+ </section>
557
+
558
+ <!-- Right Panel: Analytics -->
559
+ <aside class="panel right-panel">
560
+ <div class="panel-header">
561
+ <span>Analysis Data</span>
562
+ <i class="fa-solid fa-chart-pie"></i>
563
+ </div>
564
+ <div class="panel-content">
565
+ <div class="data-card">
566
+ <h4>Processing Status <span id="statusText">Idle</span></h4>
567
+ <div class="progress-bar">
568
+ <div class="progress-fill" id="mainProgress"></div>
569
+ </div>
570
+ </div>
571
+
572
+ <div class="data-card">
573
+ <h4>Detected Persons</h4>
574
+ <div class="metric-value" id="personCount">0</div>
575
+ </div>
576
+
577
+ <div class="data-card">
578
+ <h4>Shape Parameters (Betas)</h4>
579
+ <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px;">
580
+ <div style="background:rgba(0,0,0,0.3); padding: 4px; border-radius: 4px; font-size: 0.7rem;">H: <span id="valH">0.00</span></div>
581
+ <div style="background:rgba(0,0,0,0.3); padding: 4px; border-radius: 4px; font-size: 0.7rem;">W: <span id="valW">0.00</span></div>
582
+ <div style="background:rgba(0,0,0,0.3); padding: 4px; border-radius: 4px; font-size: 0.7rem;">D: <span id="valD">0.00</span></div>
583
+ <div style="background:rgba(0,0,0,0.3); padding: 4px; border-radius: 4px; font-size: 0.7rem;">Pose: <span id="valP">0.00</span></div>
584
+ </div>
585
+ </div>
586
+
587
+ <div class="control-label" style="margin-top: 10px;">System Log</div>
588
+ <div class="log-console" id="consoleLog">
589
+ <div class="log-entry info">> System initialized</div>
590
+ <div class="log-entry info">> Ready for SAM3 input</div>
591
+ </div>
592
+ </div>
593
+ </aside>
594
+ </main>
595
+
596
+ <script>
597
+ // DOM Elements
598
+ const dropZone = document.getElementById('dropZone');
599
+ const fileInput = document.getElementById('fileInput');
600
+ const processBtn = document.getElementById('processBtn');
601
+ const placeholderText = document.getElementById('placeholder-text');
602
+ const humanModel = document.getElementById('humanModel');
603
+ const laser = document.getElementById('laser');
604
+ const mainProgress = document.getElementById('mainProgress');
605
+ const statusText = document.getElementById('statusText');
606
+ const consoleLog = document.getElementById('consoleLog');
607
+ const personCount = document.getElementById('personCount');
608
+ const fpsCounter = document.getElementById('fpsCounter');
609
+
610
+ // State
611
+ let isProcessing = false;
612
+ let animationFrameId;
613
+
614
+ // Event Listeners
615
+ dropZone.addEventListener('click', () => fileInput.click());
616
+
617
+ dropZone.addEventListener('dragover', (e) => {
618
+ e.preventDefault();
619
+ dropZone.style.borderColor = 'var(--accent)';
620
+ dropZone.style.background = 'rgba(99, 102, 241, 0.1)';
621
+ });
622
+
623
+ dropZone.addEventListener('dragleave', (e) => {
624
+ e.preventDefault();
625
+ dropZone.style.borderColor = 'var(--border)';
626
+ dropZone.style.background = 'transparent';
627
+ });
628
+
629
+ dropZone.addEventListener('drop', (e) => {
630
+ e.preventDefault();
631
+ dropZone.style.borderColor = 'var(--border)';
632
+ dropZone.style.background = 'transparent';
633
+ if (e.dataTransfer.files.length > 0) {
634
+ handleFile(e.dataTransfer.files[0]);
635
+ }
636
+ });
637
+
638
+ fileInput.addEventListener('change', (e) => {
639
+ if (fileInput.files.length > 0) {
640
+ handleFile(fileInput.files[0]);
641
+ }
642
+ });
643
+
644
+ function toggleSetting(element) {
645
+ element.classList.toggle('active');
646
+ log(`Setting changed: ${element.querySelector('span').innerText} -> ${element.classList.contains('active')}`);
647
+ }
648
+
649
+ function handleFile(file) {
650
+ log(`File loaded: ${file.name}`, 'info');
651
+ dropZone.innerHTML = `<i class="fa-solid fa-check" style="color: var(--success)"></i><p><strong>${file.name}</strong><br>Ready to process</p>`;
652
+ processBtn.disabled = false;
653
+ }
654
+
655
+ function log(message, type = 'info') {
656
+ const entry = document.createElement('div');
657
+ entry.className = `log-entry ${type}`;
658
+ entry.innerText = `> ${message}`;
659
+ consoleLog.appendChild(entry);
660
+ consoleLog.scrollTop = consoleLog.scrollHeight;
661
+ }
662
+
663
+ function startReconstruction() {
664
+ if (isProcessing) return;
665
+ isProcessing = true;
666
+
667
+ // UI Updates
668
+ processBtn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Processing...';
669
+ placeholderText.style.display = 'none';
670
+ humanModel.style.display = 'none'; // Hide first
671
+ laser.style.display = 'block';
672
+ statusText.innerText = "Analyzing...";
673
+ statusText.style.color = "var(--accent)";
674
+
675
+ log("Initializing SAM3 Model...", 'info');
676
+
677
+ // Simulation Timeline
678
+ let progress = 0;
679
+ const interval = setInterval(() => {
680
+ progress += 1;
681
+ mainProgress.style.width = `${progress}%`;
682
+
683
+ // Random data updates
684
+ updateRandomStats();
685
+
686
+ if (progress === 30) {
687
+ log("Segmenting foreground objects...", 'info');
688
+ statusText.innerText = "Segmentation";
689
+ }
690
+
691
+ if (progress === 60) {
692
+ log("Estimating SMPL-X parameters...", 'info');
693
+ statusText.innerText = "Shape Est.";
694
+ }
695
+
696
+ if (progress === 80) {
697
+ log("Generating mesh topology...", 'info');
698
+ statusText.innerText = "Meshing";
699
+ humanModel.style.display = 'block'; // Show model wireframe-ish
700
+ humanModel.style.opacity = '0.5';
701
+ }
702
+
703
+ if (progress >= 100) {
704
+ clearInterval(interval);
705
+ finishProcessing();
706
+ }
707
+ }, 50); // 5 seconds total simulation
708
+ }
709
+
710
+ function finishProcessing() {
711
+ isProcessing = false;
712
+ processBtn.innerHTML = '<i class="fa-solid fa-rotate-right"></i> Restart';
713
+ laser.style.display = 'none';
714
+ statusText.innerText = "Completed";
715
+ statusText.style.color = "var(--success)";
716
+ humanModel.style.opacity = '1';
717
+
718
+ log("Reconstruction complete.", 'success');
719
+ log("Scene rendered successfully.", 'success');
720
+
721
+ personCount.innerText = "1";
722
+ startFPSLoop();
723
+ spawnParticles();
724
+ }
725
+
726
+ function updateRandomStats() {
727
+ document.getElementById('valH').innerText = (Math.random() * 2 - 1).toFixed(2);
728
+ document.getElementById('valW').innerText = (Math.random() * 2 - 1).toFixed(2);
729
+ document.getElementById('valD').innerText = (Math.random() * 2 - 1).toFixed(2);
730
+ document.getElementById('valP').innerText = (Math.random()).toFixed(2);
731
+ }
732
+
733
+ function startFPSLoop() {
734
+ setInterval(() => {
735
+ fpsCounter.innerText = `FPS: ${Math.floor(Math.random() * 10 + 55)}`; // Fake 60fps
736
+ }, 500);
737
+ }
738
+
739
+ // Visual Flair: Spawn particles around the model
740
+ function spawnParticles() {
741
+ const container = document.querySelector('.scene-container');
742
+
743
+ setInterval(() => {
744
+ if (!isProcessing && document.getElementById('statusText').innerText === "Completed") {
745
+ const dot = document.createElement('div');
746
+ dot.classList.add('points');
747
+
748
+ // Random position around center
749
+ const angle = Math.random() * Math.PI * 2;
750
+ const radius = 100 + Math.random() * 50;
751
+ const x = Math.cos(angle) * radius;
752
+ const z = Math.sin(angle) * radius;
753
+ const y = (Math.random() - 0.5) * 300;
754
+
755
+ dot.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`;
756
+ dot.style.left = '50%';
757
+ dot.style.top = '50%';
758
+
759
+ container.appendChild(dot);
760
+
761
+ // Animate and remove
762
+ const anim = dot.animate([
763
+ { opacity: 0, transform: `translate3d(${x}px, ${y}px, ${z}px) scale(0)` },
764
+ { opacity: 1, transform: `translate3d(${x}px, ${y}px, ${z}px) scale(1)`, offset: 0.1 },
765
+ { opacity: 0, transform: `translate3d(${x}px, ${y - 50}px, ${z}px) scale(0)` }
766
+ ], {
767
+ duration: 2000,
768
+ easing: 'ease-out'
769
+ });
770
+
771
+ anim.onfinish = () => dot.remove();
772
+ }
773
+ }, 100);
774
+ }
775
+
776
+ </script>
777
+ </body>
778
+ </html>