|
|
<html> |
|
|
<head> |
|
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> |
|
|
<title>Candle YOLOv8 Rust/WASM</title> |
|
|
</head> |
|
|
<body></body> |
|
|
</html> |
|
|
|
|
|
<!doctype html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<style> |
|
|
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;300;400&family=Source+Sans+3:wght@100;200;300;400;500;600;700;800;900&display=swap"); |
|
|
html, |
|
|
body { |
|
|
font-family: "Source Sans 3", sans-serif; |
|
|
} |
|
|
code, |
|
|
output, |
|
|
select, |
|
|
pre { |
|
|
font-family: "Source Code Pro", monospace; |
|
|
} |
|
|
</style> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script |
|
|
src="https://cdn.jsdelivr.net/gh/huggingface/hub-js-utils/share-canvas.js" |
|
|
type="module" |
|
|
></script> |
|
|
<script type="module"> |
|
|
const MODEL_BASEURL = |
|
|
"https://huggingface.co/lmz/candle-yolo-v8/resolve/main/"; |
|
|
|
|
|
const MODELS = { |
|
|
yolov8n: { |
|
|
model_size: "n", |
|
|
url: "yolov8n.safetensors", |
|
|
}, |
|
|
yolov8s: { |
|
|
model_size: "s", |
|
|
url: "yolov8s.safetensors", |
|
|
}, |
|
|
yolov8m: { |
|
|
model_size: "m", |
|
|
url: "yolov8m.safetensors", |
|
|
}, |
|
|
yolov8l: { |
|
|
model_size: "l", |
|
|
url: "yolov8l.safetensors", |
|
|
}, |
|
|
yolov8x: { |
|
|
model_size: "x", |
|
|
url: "yolov8x.safetensors", |
|
|
}, |
|
|
yolov8n_pose: { |
|
|
model_size: "n", |
|
|
url: "yolov8n-pose.safetensors", |
|
|
}, |
|
|
yolov8s_pose: { |
|
|
model_size: "s", |
|
|
url: "yolov8s-pose.safetensors", |
|
|
}, |
|
|
yolov8m_pose: { |
|
|
model_size: "m", |
|
|
url: "yolov8m-pose.safetensors", |
|
|
}, |
|
|
yolov8l_pose: { |
|
|
model_size: "l", |
|
|
url: "yolov8l-pose.safetensors", |
|
|
}, |
|
|
yolov8x_pose: { |
|
|
model_size: "x", |
|
|
url: "yolov8x-pose.safetensors", |
|
|
}, |
|
|
}; |
|
|
|
|
|
const COCO_PERSON_SKELETON = [ |
|
|
[4, 0], |
|
|
[3, 0], |
|
|
[16, 14], |
|
|
[14, 12], |
|
|
[6, 12], |
|
|
[6, 5], |
|
|
[6, 8], |
|
|
[8, 10], |
|
|
[1, 2], |
|
|
[1, 3], |
|
|
[2, 4], |
|
|
[3, 5], |
|
|
[4, 6], |
|
|
[5, 7], |
|
|
[7, 9], |
|
|
[5, 11], |
|
|
[11, 12], |
|
|
[11, 13], |
|
|
[13, 15], |
|
|
]; |
|
|
|
|
|
|
|
|
const yoloWorker = new Worker("./yoloWorker.js", { type: "module" }); |
|
|
|
|
|
let hasImage = false; |
|
|
|
|
|
document.querySelector("#image-select").addEventListener("click", (e) => { |
|
|
const target = e.target; |
|
|
if (target.nodeName === "IMG") { |
|
|
const href = target.src; |
|
|
drawImageCanvas(href); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.querySelector("#file-upload").addEventListener("change", (e) => { |
|
|
const target = e.target; |
|
|
if (target.files.length > 0) { |
|
|
const href = URL.createObjectURL(target.files[0]); |
|
|
drawImageCanvas(href); |
|
|
} |
|
|
}); |
|
|
|
|
|
const dropArea = document.querySelector("#drop-area"); |
|
|
dropArea.addEventListener("dragenter", (e) => { |
|
|
e.preventDefault(); |
|
|
dropArea.classList.add("border-blue-700"); |
|
|
}); |
|
|
dropArea.addEventListener("dragleave", (e) => { |
|
|
e.preventDefault(); |
|
|
dropArea.classList.remove("border-blue-700"); |
|
|
}); |
|
|
dropArea.addEventListener("dragover", (e) => { |
|
|
e.preventDefault(); |
|
|
}); |
|
|
dropArea.addEventListener("drop", (e) => { |
|
|
e.preventDefault(); |
|
|
dropArea.classList.remove("border-blue-700"); |
|
|
const url = e.dataTransfer.getData("text/uri-list"); |
|
|
const files = e.dataTransfer.files; |
|
|
|
|
|
if (files.length > 0) { |
|
|
const href = URL.createObjectURL(files[0]); |
|
|
drawImageCanvas(href); |
|
|
} else if (url) { |
|
|
drawImageCanvas(url); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.querySelector("#clear-btn").addEventListener("click", () => { |
|
|
drawImageCanvas(); |
|
|
}); |
|
|
|
|
|
function drawImageCanvas(imgURL) { |
|
|
const canvas = document.querySelector("#canvas"); |
|
|
const canvasResult = document.querySelector("#canvas-result"); |
|
|
canvasResult |
|
|
.getContext("2d") |
|
|
.clearRect(0, 0, canvas.width, canvas.height); |
|
|
const ctx = canvas.getContext("2d"); |
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
|
document.querySelector("#share-btn").classList.add("invisible"); |
|
|
document.querySelector("#clear-btn").classList.add("invisible"); |
|
|
document.querySelector("#detect").disabled = true; |
|
|
hasImage = false; |
|
|
canvas.parentElement.style.height = "auto"; |
|
|
|
|
|
if (imgURL && imgURL !== "") { |
|
|
const img = new Image(); |
|
|
img.crossOrigin = "anonymous"; |
|
|
|
|
|
img.onload = () => { |
|
|
canvas.width = img.width; |
|
|
canvas.height = img.height; |
|
|
ctx.drawImage(img, 0, 0); |
|
|
|
|
|
canvas.parentElement.style.height = canvas.offsetHeight + "px"; |
|
|
hasImage = true; |
|
|
document.querySelector("#detect").disabled = false; |
|
|
document.querySelector("#clear-btn").classList.remove("invisible"); |
|
|
}; |
|
|
img.src = imgURL; |
|
|
} |
|
|
} |
|
|
|
|
|
async function classifyImage( |
|
|
imageURL, |
|
|
modelID, |
|
|
modelURL, |
|
|
modelSize, |
|
|
confidence, |
|
|
iou_threshold, |
|
|
updateStatus |
|
|
) { |
|
|
return new Promise((resolve, reject) => { |
|
|
yoloWorker.postMessage({ |
|
|
imageURL, |
|
|
modelID, |
|
|
modelURL, |
|
|
modelSize, |
|
|
confidence, |
|
|
iou_threshold, |
|
|
}); |
|
|
yoloWorker.addEventListener("message", (event) => { |
|
|
if ("status" in event.data) { |
|
|
updateStatus(event.data.status); |
|
|
} |
|
|
if ("error" in event.data) { |
|
|
reject(new Error(event.data.error)); |
|
|
} |
|
|
if (event.data.status === "complete") { |
|
|
resolve(event.data); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
document.querySelector("#detect").addEventListener("click", async () => { |
|
|
if (!hasImage) { |
|
|
return; |
|
|
} |
|
|
const modelID = document.querySelector("#model").value; |
|
|
const modelURL = MODEL_BASEURL + MODELS[modelID].url; |
|
|
const modelSize = MODELS[modelID].model_size; |
|
|
const confidence = parseFloat( |
|
|
document.querySelector("#confidence").value |
|
|
); |
|
|
const iou_threshold = parseFloat( |
|
|
document.querySelector("#iou_threshold").value |
|
|
); |
|
|
|
|
|
const canvasInput = document.querySelector("#canvas"); |
|
|
const canvas = document.querySelector("#canvas-result"); |
|
|
canvas.width = canvasInput.width; |
|
|
canvas.height = canvasInput.height; |
|
|
|
|
|
const scale = canvas.width / canvas.offsetWidth; |
|
|
|
|
|
const ctx = canvas.getContext("2d"); |
|
|
ctx.drawImage(canvasInput, 0, 0); |
|
|
const imageURL = canvas.toDataURL(); |
|
|
|
|
|
const results = await await classifyImage( |
|
|
imageURL, |
|
|
modelID, |
|
|
modelURL, |
|
|
modelSize, |
|
|
confidence, |
|
|
iou_threshold, |
|
|
updateStatus |
|
|
); |
|
|
|
|
|
const { output } = results; |
|
|
|
|
|
ctx.lineWidth = 1 + 2 * scale; |
|
|
ctx.strokeStyle = "#3c8566"; |
|
|
ctx.fillStyle = "#0dff9a"; |
|
|
const fontSize = 14 * scale; |
|
|
ctx.font = `${fontSize}px sans-serif`; |
|
|
for (const detection of output) { |
|
|
|
|
|
let xmin, xmax, ymin, ymax, label, confidence, keypoints; |
|
|
if ("keypoints" in detection) { |
|
|
xmin = detection.xmin; |
|
|
xmax = detection.xmax; |
|
|
ymin = detection.ymin; |
|
|
ymax = detection.ymax; |
|
|
confidence = detection.confidence; |
|
|
keypoints = detection.keypoints; |
|
|
} else { |
|
|
const [_label, bbox] = detection; |
|
|
label = _label; |
|
|
xmin = bbox.xmin; |
|
|
xmax = bbox.xmax; |
|
|
ymin = bbox.ymin; |
|
|
ymax = bbox.ymax; |
|
|
confidence = bbox.confidence; |
|
|
} |
|
|
const [x, y, w, h] = [xmin, ymin, xmax - xmin, ymax - ymin]; |
|
|
|
|
|
const text = `${label ? label + " " : ""}${confidence.toFixed(2)}`; |
|
|
const width = ctx.measureText(text).width; |
|
|
ctx.fillStyle = "#3c8566"; |
|
|
ctx.fillRect(x - 2, y - fontSize, width + 4, fontSize); |
|
|
ctx.fillStyle = "#e3fff3"; |
|
|
|
|
|
ctx.strokeRect(x, y, w, h); |
|
|
ctx.fillText(text, x, y - 2); |
|
|
if (keypoints) { |
|
|
ctx.save(); |
|
|
ctx.fillStyle = "magenta"; |
|
|
ctx.strokeStyle = "yellow"; |
|
|
|
|
|
for (const keypoint of keypoints) { |
|
|
const { x, y } = keypoint; |
|
|
ctx.beginPath(); |
|
|
ctx.arc(x, y, 3, 0, 2 * Math.PI); |
|
|
ctx.fill(); |
|
|
} |
|
|
ctx.beginPath(); |
|
|
for (const [xid, yid] of COCO_PERSON_SKELETON) { |
|
|
|
|
|
if (keypoints[xid] && keypoints[yid]) { |
|
|
ctx.moveTo(keypoints[xid].x, keypoints[xid].y); |
|
|
ctx.lineTo(keypoints[yid].x, keypoints[yid].y); |
|
|
} |
|
|
} |
|
|
ctx.stroke(); |
|
|
ctx.restore(); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
function updateStatus(statusMessage) { |
|
|
const button = document.querySelector("#detect"); |
|
|
if (statusMessage === "detecting") { |
|
|
button.disabled = true; |
|
|
button.classList.add("bg-blue-700"); |
|
|
button.classList.remove("bg-blue-950"); |
|
|
button.textContent = "Predicting..."; |
|
|
} else if (statusMessage === "complete") { |
|
|
button.disabled = false; |
|
|
button.classList.add("bg-blue-950"); |
|
|
button.classList.remove("bg-blue-700"); |
|
|
button.textContent = "Predict"; |
|
|
document.querySelector("#share-btn").classList.remove("invisible"); |
|
|
} |
|
|
} |
|
|
document.querySelector("#share-btn").addEventListener("click", () => { |
|
|
shareToCommunity( |
|
|
"lmz/candle-yolo", |
|
|
"Candle + YOLOv8", |
|
|
"YOLOv8 with [Candle](https://github.com/huggingface/candle)", |
|
|
"canvas-result", |
|
|
"share-btn" |
|
|
); |
|
|
}); |
|
|
</script> |
|
|
</head> |
|
|
<body class="container max-w-4xl mx-auto p-4"> |
|
|
<main class="grid grid-cols-1 gap-8 relative"> |
|
|
<span class="absolute text-5xl -ml-[1em]"> 🕯️ </span> |
|
|
<div> |
|
|
<h1 class="text-5xl font-bold">Candle YOLOv8</h1> |
|
|
<h2 class="text-2xl font-bold">Rust/WASM Demo</h2> |
|
|
<p class="max-w-lg"> |
|
|
This demo showcases object detection and pose estimation models in |
|
|
your browser using Rust/WASM. It utilizes |
|
|
<a |
|
|
href="https://huggingface.co/lmz/candle-yolo-v8" |
|
|
target="_blank" |
|
|
class="underline hover:text-blue-500 hover:no-underline" |
|
|
> |
|
|
safetensor's YOLOv8 models |
|
|
</a> |
|
|
and a WASM runtime built with |
|
|
<a |
|
|
href="https://github.com/huggingface/candle/" |
|
|
target="_blank" |
|
|
class="underline hover:text-blue-500 hover:no-underline" |
|
|
>Candle </a |
|
|
>. |
|
|
</p> |
|
|
<p> |
|
|
To run pose estimation, select a yolo pose model from the dropdown |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="model" class="font-medium">Models Options: </label> |
|
|
<select |
|
|
id="model" |
|
|
class="border-2 border-gray-500 rounded-md font-light" |
|
|
> |
|
|
<option value="yolov8n" selected>yolov8n (6.37 MB)</option> |
|
|
<option value="yolov8s">yolov8s (22.4 MB)</option> |
|
|
<option value="yolov8m">yolov8m (51.9 MB)</option> |
|
|
<option value="yolov8l">yolov8l (87.5 MB)</option> |
|
|
<option value="yolov8x">yolov8x (137 MB)</option> |
|
|
|
|
|
<option value="yolov8n_pose">yolov8n_pose (6.65 MB)</option> |
|
|
<option value="yolov8s_pose">yolov8s_pose (23.3 MB)</option> |
|
|
<option value="yolov8m_pose">yolov8m_pose (53 MB)</option> |
|
|
<option value="yolov8l_pose">yolov8l_pose (89.1 MB)</option> |
|
|
<option value="yolov8x_pose">yolov8x_pose (139 MB)</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<button |
|
|
id="detect" |
|
|
disabled |
|
|
class="bg-gray-700 hover:bg-gray-800 text-white font-normal py-2 px-4 rounded disabled:bg-gray-300 disabled:cursor-not-allowed" |
|
|
> |
|
|
Predict |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="py-1"> |
|
|
<button |
|
|
id="clear-btn" |
|
|
class="text-xs bg-white rounded-md disabled:opacity-50 flex gap-1 items-center ml-auto invisible" |
|
|
> |
|
|
<svg |
|
|
class="" |
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
viewBox="0 0 13 12" |
|
|
height="1em" |
|
|
> |
|
|
<path |
|
|
d="M1.6.7 12 11.1M12 .7 1.6 11.1" |
|
|
stroke="#2E3036" |
|
|
stroke-width="2" |
|
|
/> |
|
|
</svg> |
|
|
Clear image |
|
|
</button> |
|
|
</div> |
|
|
<div |
|
|
id="drop-area" |
|
|
class="flex flex-col items-center justify-center border-2 border-gray-300 border-dashed rounded-xl relative aspect-video w-full overflow-hidden" |
|
|
> |
|
|
<div |
|
|
class="flex flex-col items-center justify-center space-y-1 text-center" |
|
|
> |
|
|
<svg |
|
|
width="25" |
|
|
height="25" |
|
|
viewBox="0 0 25 25" |
|
|
fill="none" |
|
|
xmlns="http://www.w3.org/2000/svg" |
|
|
> |
|
|
<path |
|
|
d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z" |
|
|
fill="#000" |
|
|
/> |
|
|
</svg> |
|
|
<div class="flex text-sm text-gray-600"> |
|
|
<label |
|
|
for="file-upload" |
|
|
class="relative cursor-pointer bg-white rounded-md font-medium text-blue-950 hover:text-blue-700" |
|
|
> |
|
|
<span>Drag and drop your image here</span> |
|
|
<span class="block text-xs">or</span> |
|
|
<span class="block text-xs">Click to upload</span> |
|
|
</label> |
|
|
</div> |
|
|
<input |
|
|
id="file-upload" |
|
|
name="file-upload" |
|
|
type="file" |
|
|
class="sr-only" |
|
|
/> |
|
|
</div> |
|
|
<canvas |
|
|
id="canvas" |
|
|
class="absolute pointer-events-none w-full" |
|
|
></canvas> |
|
|
<canvas |
|
|
id="canvas-result" |
|
|
class="absolute pointer-events-none w-full" |
|
|
></canvas> |
|
|
</div> |
|
|
<div class="text-right py-2"> |
|
|
<button |
|
|
id="share-btn" |
|
|
class="bg-white rounded-md hover:outline outline-orange-200 disabled:opacity-50 invisible" |
|
|
> |
|
|
<img |
|
|
src="https://huggingface.co/datasets/huggingface/badges/raw/main/share-to-community-sm.svg" |
|
|
/> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex gap-3 items-center" id="image-select"> |
|
|
<h3 class="font-medium">Examples:</h3> |
|
|
|
|
|
<img |
|
|
src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/candle/examples/sf.jpg" |
|
|
class="cursor-pointer w-24 h-24 object-cover" |
|
|
/> |
|
|
<img |
|
|
src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/candle/examples/bike.jpeg" |
|
|
class="cursor-pointer w-24 h-24 object-cover" |
|
|
/> |
|
|
<img |
|
|
src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/candle/examples/000000000077.jpg" |
|
|
class="cursor-pointer w-24 h-24 object-cover" |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="grid grid-cols-3 max-w-md items-center gap-3"> |
|
|
<label class="text-sm font-medium" for="confidence" |
|
|
>Confidence Threshold</label |
|
|
> |
|
|
<input |
|
|
type="range" |
|
|
id="confidence" |
|
|
name="confidence" |
|
|
min="0" |
|
|
max="1" |
|
|
step="0.01" |
|
|
value="0.25" |
|
|
oninput="this.nextElementSibling.value = Number(this.value).toFixed(2)" |
|
|
/> |
|
|
<output |
|
|
class="text-xs font-light px-1 py-1 border border-gray-700 rounded-md w-min" |
|
|
>0.25</output |
|
|
> |
|
|
|
|
|
<label class="text-sm font-medium" for="iou_threshold" |
|
|
>IoU Threshold</label |
|
|
> |
|
|
|
|
|
<input |
|
|
type="range" |
|
|
id="iou_threshold" |
|
|
name="iou_threshold" |
|
|
min="0" |
|
|
max="1" |
|
|
step="0.01" |
|
|
value="0.45" |
|
|
oninput="this.nextElementSibling.value = Number(this.value).toFixed(2)" |
|
|
/> |
|
|
<output |
|
|
class="font-extralight text-xs px-1 py-1 border border-gray-700 rounded-md w-min" |
|
|
>0.45</output |
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</body> |
|
|
</html> |
|
|
|
