|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<meta charset="utf-8" /> |
|
<meta name="viewport" content="width=device-width" /> |
|
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css"> |
|
<title>Heelo huggingface.js</title> |
|
</head> |
|
|
|
<body> |
|
<script type="module"> |
|
import { HfInference } from 'https://cdn.skypack.dev/@huggingface/[email protected]'; |
|
let hf = new HfInference() |
|
document.querySelector("#tokenBtn").addEventListener("click", (e) => { |
|
const token = document.querySelector("#token").value; |
|
hf = new HfInference(token) |
|
init() |
|
}) |
|
document.addEventListener("DOMContentLoaded", async () => { |
|
init(); |
|
}) |
|
function init() { |
|
const img = document.querySelector("#example-img"); |
|
fetch(img.src) |
|
.then((res) => res.blob()) |
|
.then((blob) => { |
|
detectObjects(blob, img.naturalWidth, img.naturalHeight); |
|
}) |
|
} |
|
async function detectObjects(imgBlob, imgW, imgH) { |
|
try { |
|
const objectDetectionRes = await hf.objectDetection({ |
|
data: imgBlob, |
|
model: "facebook/detr-resnet-50" |
|
}) |
|
document.querySelector("#output").innerText = JSON.stringify(objectDetectionRes, null, 2); |
|
const container = document.querySelector("#image-container"); |
|
container.querySelectorAll(".box").forEach((el) => el.remove()); |
|
const boxes = objectDetectionRes.map((obj) => { |
|
const w = (100 * (obj.box.xmax - obj.box.xmin)) / imgW; |
|
const h = (100 * (obj.box.ymax - obj.box.ymin)) / imgH; |
|
const box = document.createElement("div"); |
|
box.classList.add("box"); |
|
box.style.position = "absolute"; |
|
box.style.border = "solid 2px red"; |
|
box.style.top = (100 * obj.box.ymin) / imgH + "%"; |
|
box.style.left = (100 * obj.box.xmin) / imgW + "%"; |
|
box.style.width = w + "%"; |
|
box.style.height = h + "%"; |
|
box.appendChild(document.createTextNode(obj.label)); |
|
return box; |
|
}) |
|
boxes.forEach((box) => { |
|
container.appendChild(box); |
|
}) |
|
} catch (e) { |
|
document.querySelector("#output").innerText = e.message; |
|
} |
|
} |
|
document.querySelector("#image-file").addEventListener("change", async (e) => { |
|
const file = e.target.files[0]; |
|
const newImage = new Image(); |
|
newImage.src = URL.createObjectURL(file) |
|
const img = document.querySelector("#example-img"); |
|
img.src = newImage.src; |
|
newImage.onload = () => { |
|
detectObjects(file, newImage.naturalWidth, newImage.naturalHeight); |
|
} |
|
}); |
|
</script> |
|
<h1> Hello huggingface.js </h1> |
|
<div> |
|
<label for="token">HF Token</label> |
|
<div style="display: flex"> |
|
<input style="flex: 2 1 0%" type="password" id="token" /> |
|
<button style="flex: 1 1 0%" id="tokenBtn">Set Token</button> |
|
</div> |
|
</div> |
|
|
|
<input type="file" id="image-file" accept="image/*" /> |
|
<div style="position: relative;" id="image-container"> |
|
<img id="example-img" width="100%" |
|
src="https://raw.githubusercontent.com/huggingface/huggingface.js/main/packages/inference/test/cats.png"> |
|
</div> |
|
<pre><code id="output"></code></pre> |
|
</body> |
|
|
|
</html> |
