Hugging Face's logo

Spaces:
Inayatgaming
/
Remove-BG
Running

App Files Community
1
Inayatgaming commited on
Commit
df39f48
·
verified ·
1 Parent(s): 386e79a

Create static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +616 -0
static/index.html ADDED
@@ -0,0 +1,616 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+
6
+ <meta
7
+ name="viewport"
8
+ content="width=device-width, initial-scale=1.0, viewport-fit=cover"
9
+ >
10
+
11
+ <meta
12
+ name="theme-color"
13
+ content="#070a0d"
14
+ >
15
+
16
+ <title>LocateAnything Live</title>
17
+
18
+ <link
19
+ rel="stylesheet"
20
+ href="/static/style.css"
21
+ >
22
+ </head>
23
+
24
+ <body>
25
+
26
+ <div id="app">
27
+
28
+ <!-- ============================= -->
29
+ <!-- Top navigation -->
30
+ <!-- ============================= -->
31
+
32
+ <header class="topbar">
33
+
34
+ <div class="brand">
35
+
36
+ <div class="brand-mark">
37
+ <span></span>
38
+ <span></span>
39
+ <span></span>
40
+ </div>
41
+
42
+ <div>
43
+ <div class="brand-name">
44
+ Locate<span>Anything</span>
45
+ </div>
46
+
47
+ <div class="brand-version">
48
+ LIVE V2
49
+ </div>
50
+ </div>
51
+
52
+ </div>
53
+
54
+
55
+ <div class="connection">
56
+
57
+ <span
58
+ id="connectionDot"
59
+ class="connection-dot offline"
60
+ ></span>
61
+
62
+ <span id="connectionText">
63
+ Connecting
64
+ </span>
65
+
66
+ </div>
67
+
68
+ </header>
69
+
70
+
71
+ <!-- ============================= -->
72
+ <!-- Main -->
73
+ <!-- ============================= -->
74
+
75
+ <main class="main">
76
+
77
+ <!-- Camera -->
78
+ <section class="viewer">
79
+
80
+ <div class="camera-card">
81
+
82
+ <video
83
+ id="camera"
84
+ autoplay
85
+ muted
86
+ playsinline
87
+ ></video>
88
+
89
+ <canvas
90
+ id="overlay"
91
+ ></canvas>
92
+
93
+ <div
94
+ id="cameraPlaceholder"
95
+ class="camera-placeholder"
96
+ >
97
+
98
+ <div class="camera-icon">
99
+ <svg
100
+ viewBox="0 0 24 24"
101
+ aria-hidden="true"
102
+ >
103
+ <path
104
+ d="M15 10l4.5-2.5A1 1 0 0 1 21 8.37v7.26a1 1 0 0 1-1.5.87L15 14"
105
+ />
106
+ <rect
107
+ x="3"
108
+ y="6"
109
+ width="12"
110
+ height="12"
111
+ rx="2"
112
+ />
113
+ </svg>
114
+ </div>
115
+
116
+ <h2>
117
+ Camera ready
118
+ </h2>
119
+
120
+ <p>
121
+ Start the camera to begin
122
+ live visual localization.
123
+ </p>
124
+
125
+ <button
126
+ id="startButton"
127
+ class="primary-button"
128
+ type="button"
129
+ >
130
+ Start camera
131
+ </button>
132
+
133
+ </div>
134
+
135
+
136
+ <!-- Live badge -->
137
+
138
+ <div
139
+ id="liveBadge"
140
+ class="live-badge hidden"
141
+ >
142
+
143
+ <span class="live-pulse"></span>
144
+
145
+ LIVE
146
+
147
+ </div>
148
+
149
+
150
+ <!-- FPS -->
151
+
152
+ <div
153
+ id="fpsBadge"
154
+ class="fps-badge hidden"
155
+ >
156
+ 0 FPS
157
+ </div>
158
+
159
+
160
+ <!-- Center reticle -->
161
+
162
+ <div
163
+ id="reticle"
164
+ class="reticle hidden"
165
+ ></div>
166
+
167
+ </div>
168
+
169
+
170
+ <!-- Camera controls -->
171
+
172
+ <div class="camera-controls">
173
+
174
+ <button
175
+ id="stopButton"
176
+ class="control-button danger"
177
+ type="button"
178
+ disabled
179
+ >
180
+ <span class="button-icon">■</span>
181
+ Stop
182
+ </button>
183
+
184
+
185
+ <button
186
+ id="snapshotButton"
187
+ class="control-button"
188
+ type="button"
189
+ disabled
190
+ >
191
+ <span class="button-icon">◉</span>
192
+ Snapshot
193
+ </button>
194
+
195
+
196
+ <label
197
+ class="control-button upload-button"
198
+ >
199
+
200
+ <span class="button-icon">
201
+ ↑
202
+ </span>
203
+
204
+ Upload
205
+
206
+ <input
207
+ id="imageUpload"
208
+ type="file"
209
+ accept="image/*"
210
+ hidden
211
+ >
212
+
213
+ </label>
214
+
215
+ </div>
216
+
217
+ </section>
218
+
219
+
220
+ <!-- ============================= -->
221
+ <!-- Control panel -->
222
+ <!-- ============================= -->
223
+
224
+ <aside class="sidebar">
225
+
226
+ <div class="panel">
227
+
228
+ <div class="panel-header">
229
+
230
+ <div>
231
+
232
+ <div class="eyebrow">
233
+ VISUAL SEARCH
234
+ </div>
235
+
236
+ <h1>
237
+ Find anything.
238
+ </h1>
239
+
240
+ </div>
241
+
242
+ <div class="model-chip">
243
+ <span></span>
244
+ NVIDIA
245
+ </div>
246
+
247
+ </div>
248
+
249
+
250
+ <!-- Search -->
251
+
252
+ <div class="search-wrapper">
253
+
254
+ <svg
255
+ class="search-icon"
256
+ viewBox="0 0 24 24"
257
+ >
258
+ <circle
259
+ cx="11"
260
+ cy="11"
261
+ r="7"
262
+ />
263
+
264
+ <path
265
+ d="m16 16 5 5"
266
+ />
267
+ </svg>
268
+
269
+
270
+ <input
271
+ id="query"
272
+ type="text"
273
+ value="person"
274
+ autocomplete="off"
275
+ placeholder="What do you want to find?"
276
+ aria-label="Object to locate"
277
+ >
278
+
279
+ <button
280
+ id="clearQuery"
281
+ class="clear-query"
282
+ type="button"
283
+ aria-label="Clear search"
284
+ >
285
+ ×
286
+ </button>
287
+
288
+ </div>
289
+
290
+
291
+ <!-- Quick searches -->
292
+
293
+ <div class="quick-section">
294
+
295
+ <div class="section-label">
296
+ QUICK SEARCH
297
+ </div>
298
+
299
+ <div class="chips">
300
+
301
+ <button
302
+ class="chip active"
303
+ data-query="person"
304
+ type="button"
305
+ >
306
+ Person
307
+ </button>
308
+
309
+ <button
310
+ class="chip"
311
+ data-query="phone"
312
+ type="button"
313
+ >
314
+ Phone
315
+ </button>
316
+
317
+ <button
318
+ class="chip"
319
+ data-query="bottle"
320
+ type="button"
321
+ >
322
+ Bottle
323
+ </button>
324
+
325
+ <button
326
+ class="chip"
327
+ data-query="car"
328
+ type="button"
329
+ >
330
+ Car
331
+ </button>
332
+
333
+ <button
334
+ class="chip"
335
+ data-query="all objects"
336
+ type="button"
337
+ >
338
+ All objects
339
+ </button>
340
+
341
+ </div>
342
+
343
+ </div>
344
+
345
+
346
+ <!-- Mode -->
347
+
348
+ <div class="mode-section">
349
+
350
+ <div class="section-label">
351
+ MODE
352
+ </div>
353
+
354
+ <div class="mode-switch">
355
+
356
+ <button
357
+ class="mode-button active"
358
+ data-mode="ground"
359
+ type="button"
360
+ >
361
+ <strong>
362
+ Ground
363
+ </strong>
364
+
365
+ <span>
366
+ Natural language
367
+ </span>
368
+ </button>
369
+
370
+
371
+ <button
372
+ class="mode-button"
373
+ data-mode="detect"
374
+ type="button"
375
+ >
376
+ <strong>
377
+ Detect
378
+ </strong>
379
+
380
+ <span>
381
+ Object instances
382
+ </span>
383
+ </button>
384
+
385
+
386
+ <button
387
+ class="mode-button"
388
+ data-mode="ocr"
389
+ type="button"
390
+ >
391
+ <strong>
392
+ OCR
393
+ </strong>
394
+
395
+ <span>
396
+ Visible text
397
+ </span>
398
+ </button>
399
+
400
+ </div>
401
+
402
+ </div>
403
+
404
+
405
+ <!-- Statistics -->
406
+
407
+ <div class="stats">
408
+
409
+ <div class="stat">
410
+
411
+ <div
412
+ id="objectCount"
413
+ class="stat-value"
414
+ >
415
+ 0
416
+ </div>
417
+
418
+ <div class="stat-label">
419
+ Objects
420
+ </div>
421
+
422
+ </div>
423
+
424
+
425
+ <div class="stat">
426
+
427
+ <div
428
+ id="latency"
429
+ class="stat-value"
430
+ >
431
+ —
432
+ </div>
433
+
434
+ <div class="stat-label">
435
+ Latency
436
+ </div>
437
+
438
+ </div>
439
+
440
+
441
+ <div class="stat">
442
+
443
+ <div
444
+ id="inferenceFps"
445
+ class="stat-value"
446
+ >
447
+ —
448
+ </div>
449
+
450
+ <div class="stat-label">
451
+ Inference
452
+ </div>
453
+
454
+ </div>
455
+
456
+ </div>
457
+
458
+
459
+ <!-- Detection status -->
460
+
461
+ <div
462
+ id="statusBox"
463
+ class="status-box"
464
+ >
465
+
466
+ <div class="status-icon">
467
+ <span></span>
468
+ </div>
469
+
470
+ <div>
471
+
472
+ <strong id="statusTitle">
473
+ Ready to locate
474
+ </strong>
475
+
476
+ <p id="statusMessage">
477
+ Start the camera and point it
478
+ at something.
479
+ </p>
480
+
481
+ </div>
482
+
483
+ </div>
484
+
485
+ </div>
486
+
487
+
488
+ <!-- Results -->
489
+
490
+ <div
491
+ id="resultsPanel"
492
+ class="results-panel hidden"
493
+ >
494
+
495
+ <div class="results-header">
496
+
497
+ <span>
498
+ DETECTIONS
499
+ </span>
500
+
501
+ <span
502
+ id="resultsCount"
503
+ >
504
+ 0
505
+ </span>
506
+
507
+ </div>
508
+
509
+ <div
510
+ id="resultsList"
511
+ class="results-list"
512
+ ></div>
513
+
514
+ </div>
515
+
516
+
517
+ <!-- Model information -->
518
+
519
+ <div class="model-info">
520
+
521
+ <div class="model-info-icon">
522
+ ✦
523
+ </div>
524
+
525
+ <div>
526
+
527
+ <strong>
528
+ LocateAnything-3B
529
+ </strong>
530
+
531
+ <span>
532
+ NVIDIA visual grounding
533
+ </span>
534
+
535
+ </div>
536
+
537
+ </div>
538
+
539
+ </aside>
540
+
541
+ </main>
542
+
543
+
544
+ <!-- ============================= -->
545
+ <!-- Bottom mobile controls -->
546
+ <!-- ============================= -->
547
+
548
+ <div class="mobile-bar">
549
+
550
+ <button
551
+ id="mobileStart"
552
+ class="mobile-action primary"
553
+ type="button"
554
+ >
555
+ Start
556
+ </button>
557
+
558
+ <button
559
+ id="mobileSnapshot"
560
+ class="mobile-action"
561
+ type="button"
562
+ disabled
563
+ >
564
+ Snapshot
565
+ </button>
566
+
567
+ </div>
568
+
569
+
570
+ <!-- ============================= -->
571
+ <!-- Permission message -->
572
+ <!-- ============================= -->
573
+
574
+ <div
575
+ id="permissionModal"
576
+ class="modal hidden"
577
+ >
578
+
579
+ <div class="modal-card">
580
+
581
+ <div class="modal-icon">
582
+ 📷
583
+ </div>
584
+
585
+ <h2>
586
+ Camera permission needed
587
+ </h2>
588
+
589
+ <p>
590
+ Allow camera access in your browser
591
+ to use live visual localization.
592
+ </p>
593
+
594
+ <button
595
+ id="permissionClose"
596
+ class="primary-button"
597
+ type="button"
598
+ >
599
+ Try again
600
+ </button>
601
+
602
+ </div>
603
+
604
+ </div>
605
+
606
+
607
+ <!-- ============================= -->
608
+ <!-- JavaScript -->
609
+ <!-- ============================= -->
610
+
611
+ <script src="/static/app.js"></script>
612
+
613
+ </div>
614
+
615
+ </body>
616
+ </html>