Hugging Face's logo

Spaces:
webml-community
/
YOLO26-WebGPU
Running

App Files Community
Xenova HF Staff commited on
Commit
9d29c41
·
verified ·
1 Parent(s): 3c1631a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +93 -17
index.html CHANGED
@@ -1,19 +1,95 @@
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
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚡️</text></svg>">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>YOLO26 WebGPU Demo</title>
8
+ <link rel="stylesheet" href="./style.css" />
9
+ </head>
10
+ <body>
11
+ <main class="container">
12
+ <!-- Header -->
13
+ <header class="header">
14
+ <h1 class="title">YOLO26 <span class="accent">WebGPU</span></h1>
15
+ <p class="subtitle">Real-time object detection & pose estimation in your browser</p>
16
+ </header>
17
+
18
+ <!-- Main Content: Video + Controls side by side -->
19
+ <div class="main-content">
20
+ <!-- Video Section -->
21
+ <div class="video-section">
22
+ <div class="video-container">
23
+ <video id="video" autoplay playsinline muted></video>
24
+ <canvas id="canvas"></canvas>
25
+
26
+ <!-- Overlay UI -->
27
+ <div id="loader" class="loader-overlay">
28
+ <div class="spinner"></div>
29
+ <p id="loader-text">Initializing...</p>
30
+ </div>
31
+
32
+ <!-- Status Badge -->
33
+ <div class="status-badge">
34
+ <span id="status-dot" class="status-dot"></span>
35
+ <span id="status-text">Ready</span>
36
+ </div>
37
+
38
+ <!-- FPS Counter -->
39
+ <div class="fps-badge">
40
+ <span id="fps">0</span> FPS
41
+ </div>
42
+ </div>
43
+ </div>
44
+
45
+ <!-- Controls -->
46
+ <div class="controls">
47
+ <!-- Model Select -->
48
+ <div class="control-group">
49
+ <label for="model-select">Model</label>
50
+ <select id="model-select">
51
+ <option value="onnx-community/yolo26n-ONNX">Nano (Fastest)</option>
52
+ <option value="onnx-community/yolo26s-ONNX">Small</option>
53
+ <option value="onnx-community/yolo26m-ONNX">Medium</option>
54
+ <option value="onnx-community/yolo26l-ONNX">Large</option>
55
+ <option value="onnx-community/yolo26x-ONNX">X-Large (Accurate)</option>
56
+ </select>
57
+ </div>
58
+
59
+ <!-- Toggles -->
60
+ <div class="toggle-group">
61
+ <label class="toggle">
62
+ <input type="checkbox" id="toggle-detect" checked />
63
+ <span class="toggle-slider"></span>
64
+ <span class="toggle-label">Detection</span>
65
+ </label>
66
+ <label class="toggle">
67
+ <input type="checkbox" id="toggle-pose" checked />
68
+ <span class="toggle-slider"></span>
69
+ <span class="toggle-label">Pose</span>
70
+ </label>
71
+ </div>
72
+
73
+ <!-- Threshold -->
74
+ <div class="control-group threshold-control">
75
+ <label for="threshold">Confidence: <span id="threshold-value">50%</span></label>
76
+ <input type="range" id="threshold" min="0" max="100" value="50" />
77
+ </div>
78
+
79
+ <!-- Start Button -->
80
+ <button id="start-btn" class="btn-primary" disabled>
81
+ <span id="btn-icon">▶</span>
82
+ <span id="btn-text">Start Camera</span>
83
+ </button>
84
+ </div>
85
+ </div>
86
+
87
+ <!-- Footer -->
88
+ <footer class="footer">
89
+ <p>Powered by <a href="https://huggingface.co/docs/transformers.js" target="_blank">🤗 Transformers.js</a></p>
90
+ </footer>
91
+ </main>
92
+
93
+ <script type="module" src="./main.js"></script>
94
+ </body>
95
  </html>