| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>RF-DETR WebGPU</title> |
| <link rel="stylesheet" href="style.css" /> |
| </head> |
| <body> |
|
|
| <h1>RF-DETR WebGPU</h1> |
| <div class="subtitle"> |
| Real-Time Detection Transformers<br> |
| running 100% locally in your browser. |
| </div> |
|
|
| <div class="container"> |
| <div id="status"> |
| <div class="spinner"></div> |
| <div id="status-content"> |
| <div id="status-text">Initializing...</div> |
| <div id="status-sub">Please allow camera access</div> |
| </div> |
| </div> |
| <div id="fps">FPS: 0.0</div> |
| <video id="webcam" autoplay playsinline muted></video> |
| <canvas id="overlay"></canvas> |
| </div> |
|
|
| <div class="controls"> |
| <label class="control-label"> |
| <span>Threshold</span> |
| <input type="range" id="threshold" min="0" max="1" step="0.01" value="0.5"> |
| <span id="thresh-val">0.50</span> |
| </label> |
| </div> |
|
|
| <footer> |
| Powered by <a href="https://github.com/huggingface/transformers.js" target="_blank">Transformers.js v4</a> |
| </footer> |
|
|
| <script type="module"> |
| import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@next'; |
| |
| const video = document.getElementById('webcam'); |
| const overlay = document.getElementById('overlay'); |
| const status = document.getElementById('status'); |
| const statusText = document.getElementById('status-text'); |
| const statusSub = document.getElementById('status-sub'); |
| const fpsElem = document.getElementById('fps'); |
| const slider = document.getElementById('threshold'); |
| const sliderVal = document.getElementById('thresh-val'); |
| |
| let detector; |
| let lastTime = performance.now(); |
| let threshold = 0.5; |
| |
| const inputCanvas = document.createElement('canvas'); |
| const inputCtx = inputCanvas.getContext('2d', { willReadFrequently: true }); |
| |
| const COLORS = ['#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899']; |
| |
| slider.addEventListener('input', (e) => { |
| threshold = parseFloat(e.target.value); |
| sliderVal.textContent = threshold.toFixed(2); |
| }); |
| |
| |
| function resizeOverlay() { |
| const width = video.clientWidth; |
| const height = video.clientHeight; |
| const dpr = window.devicePixelRatio || 1; |
| |
| overlay.width = width * dpr; |
| overlay.height = height * dpr; |
| |
| const ctx = overlay.getContext('2d'); |
| ctx.scale(dpr, dpr); |
| |
| inputCanvas.width = video.videoWidth; |
| inputCanvas.height = video.videoHeight; |
| } |
| |
| window.addEventListener('resize', resizeOverlay); |
| |
| |
| try { |
| const stream = await navigator.mediaDevices.getUserMedia({ |
| video: { |
| facingMode: 'environment', |
| width: { ideal: 640 }, |
| height: { ideal: 480 } |
| }, |
| audio: false |
| }); |
| |
| video.srcObject = stream; |
| await new Promise(r => video.onloadedmetadata = r); |
| video.play(); |
| resizeOverlay(); |
| |
| } catch (e) { |
| statusText.textContent = "Camera Error"; |
| statusSub.textContent = e.message; |
| document.querySelector('.spinner').style.display = 'none'; |
| throw e; |
| } |
| |
| |
| statusText.textContent = "Loading Model..."; |
| statusSub.textContent = "Downloading RF-DETR Nano (fp32)"; |
| |
| try { |
| detector = await pipeline('object-detection', 'onnx-community/rfdetr_nano-ONNX', { |
| device: 'webgpu', |
| dtype: 'fp32', |
| }); |
| |
| |
| statusText.textContent = "Compiling Shaders..."; |
| statusSub.textContent = "This may take a moment"; |
| |
| inputCtx.drawImage(video, 0, 0, inputCanvas.width, inputCanvas.height); |
| await detector(inputCanvas, { threshold: 0.5, percentage: true }); |
| |
| status.style.opacity = '0'; |
| setTimeout(() => status.style.display = 'none', 300); |
| |
| } catch (e) { |
| statusText.textContent = "Model Error"; |
| statusSub.textContent = e.message; |
| document.querySelector('.spinner').style.display = 'none'; |
| throw e; |
| } |
| |
| |
| async function loop() { |
| const now = performance.now(); |
| const dt = now - lastTime; |
| lastTime = now; |
| |
| if (dt > 0) { |
| fpsElem.textContent = `FPS: ${(1000 / dt).toFixed(1)}`; |
| } |
| |
| inputCtx.drawImage(video, 0, 0, inputCanvas.width, inputCanvas.height); |
| |
| const results = await detector(inputCanvas, { |
| threshold: threshold, |
| percentage: true |
| }); |
| drawResults(results); |
| |
| requestAnimationFrame(loop); |
| } |
| |
| function drawResults(results) { |
| const ctx = overlay.getContext('2d'); |
| const w = video.clientWidth; |
| const h = video.clientHeight; |
| |
| |
| ctx.save(); |
| ctx.setTransform(1, 0, 0, 1, 0, 0); |
| ctx.clearRect(0, 0, overlay.width, overlay.height); |
| ctx.restore(); |
| |
| |
| ctx.font = '600 13px system-ui'; |
| ctx.lineWidth = 2.5; |
| |
| results.forEach((res, i) => { |
| const { box, label, score } = res; |
| const color = COLORS[i % COLORS.length]; |
| |
| const x1 = box.xmin * w; |
| const y1 = box.ymin * h; |
| const width = (box.xmax - box.xmin) * w; |
| const height = (box.ymax - box.ymin) * h; |
| |
| |
| ctx.strokeStyle = color; |
| ctx.beginPath(); |
| ctx.roundRect(x1, y1, width, height, 6); |
| ctx.stroke(); |
| |
| |
| ctx.fillStyle = color; |
| const text = `${label} ${(score*100).toFixed(0)}%`; |
| const textMetrics = ctx.measureText(text); |
| const textWidth = textMetrics.width; |
| const textHeight = 22; |
| |
| ctx.beginPath(); |
| ctx.roundRect(x1, y1 - textHeight - 4, textWidth + 12, textHeight, 4); |
| ctx.fill(); |
| |
| ctx.fillStyle = 'white'; |
| ctx.fillText(text, x1 + 6, y1 - 9); |
| }); |
| } |
| |
| requestAnimationFrame(loop); |
| |
| </script> |
| </body> |
| </html> |
