<!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/inference@1.5.2';
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>