|
|
<!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> |
