| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <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>"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Labofnac WebGPU YOLO26</title> |
| <link rel="stylesheet" href="./style.css" /> |
| </head> |
| <body> |
| <main class="container"> |
| |
| <header class="header"> |
| <h1 class="title">Labofnac YOLO26 <span class="accent">WebGPU</span></h1> |
| <p class="subtitle">Detection d'objet et estimation des poses (Armature) en temps réel depuis votre navigateur</p> |
| </header> |
|
|
| |
| <div class="main-content"> |
| |
| <div class="video-section"> |
| <div class="video-container"> |
| <video id="video" autoplay playsinline muted></video> |
| <canvas id="canvas"></canvas> |
| |
| |
| <div id="loader" class="loader-overlay"> |
| <div class="spinner"></div> |
| <p id="loader-text">Initialisation...</p> |
| </div> |
| |
| |
| <div class="status-badge"> |
| <span id="status-dot" class="status-dot"></span> |
| <span id="status-text">Prêt</span> |
| </div> |
| |
| |
| <div class="fps-badge"> |
| <span id="fps">0</span> FPS |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="controls"> |
| |
| <div class="control-group"> |
| <label for="model-select">Select Model</label> |
| <select id="model-select"> |
| <option value="onnx-community/yolo26n-ONNX">Nano (Fastest)</option> |
| <option value="onnx-community/yolo26s-ONNX">Small</option> |
| <option value="onnx-community/yolo26m-ONNX">Medium</option> |
| <option value="onnx-community/yolo26l-ONNX">Large</option> |
| <option value="onnx-community/yolo26x-ONNX">X-Large (Accurate)</option> |
| </select> |
| </div> |
|
|
| |
| <div class="toggle-group"> |
| <label class="toggle"> |
| <input type="checkbox" id="toggle-detect" checked /> |
| <span class="toggle-slider"></span> |
| <span class="toggle-label">Object(s)</span> |
| </label> |
| <label class="toggle"> |
| <input type="checkbox" id="toggle-pose" checked /> |
| <span class="toggle-slider"></span> |
| <span class="toggle-label">Armature(s)</span> |
| </label> |
| </div> |
|
|
| |
| <div class="control-group threshold-control"> |
| <label for="threshold">Confiance: <span id="threshold-value">50%</span></label> |
| <input type="range" id="threshold" min="0" max="100" value="50" /> |
| </div> |
|
|
| |
| <button id="start-btn" class="btn-primary" disabled> |
| <span id="btn-icon">▶</span> |
| <span id="btn-text">Lancer Camera</span> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <footer class="footer"> |
| <p>Powered by <a href="https://huggingface.co/docs/transformers.js" target="_blank">🤗 Transformers.js</a></p> |
| </footer> |
| </main> |
|
|
| <script type="module" src="./main.js"></script> |
| </body> |
| </html> |
|
|
