Apppublic
webml-community/YOLO26-WebGPU

sourceHugging Faceapache-2.0updated 8mo agoView on Hugging Face
69likes
index.html96 linesDownload Raw Back to root
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> FPS41            </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>96