Create objdetect.html
Browse files- objdetect.html +89 -0
objdetect.html
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html>
|
| 3 |
+
|
| 4 |
+
<head>
|
| 5 |
+
<meta charset="utf-8" />
|
| 6 |
+
<meta name="viewport" content="width=device-width" />
|
| 7 |
+
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
|
| 8 |
+
<title>Heelo huggingface.js</title>
|
| 9 |
+
</head>
|
| 10 |
+
|
| 11 |
+
<body>
|
| 12 |
+
<script type="module">
|
| 13 |
+
import { HfInference } from 'https://cdn.skypack.dev/@huggingface/[email protected]';
|
| 14 |
+
let hf = new HfInference()
|
| 15 |
+
document.querySelector("#tokenBtn").addEventListener("click", (e) => {
|
| 16 |
+
const token = document.querySelector("#token").value;
|
| 17 |
+
hf = new HfInference(token)
|
| 18 |
+
init()
|
| 19 |
+
})
|
| 20 |
+
document.addEventListener("DOMContentLoaded", async () => {
|
| 21 |
+
init();
|
| 22 |
+
})
|
| 23 |
+
function init() {
|
| 24 |
+
const img = document.querySelector("#example-img");
|
| 25 |
+
fetch(img.src)
|
| 26 |
+
.then((res) => res.blob())
|
| 27 |
+
.then((blob) => {
|
| 28 |
+
detectObjects(blob, img.naturalWidth, img.naturalHeight);
|
| 29 |
+
})
|
| 30 |
+
}
|
| 31 |
+
async function detectObjects(imgBlob, imgW, imgH) {
|
| 32 |
+
try {
|
| 33 |
+
const objectDetectionRes = await hf.objectDetection({
|
| 34 |
+
data: imgBlob,
|
| 35 |
+
model: "facebook/detr-resnet-50"
|
| 36 |
+
})
|
| 37 |
+
document.querySelector("#output").innerText = JSON.stringify(objectDetectionRes, null, 2);
|
| 38 |
+
const container = document.querySelector("#image-container");
|
| 39 |
+
container.querySelectorAll(".box").forEach((el) => el.remove());
|
| 40 |
+
const boxes = objectDetectionRes.map((obj) => {
|
| 41 |
+
const w = (100 * (obj.box.xmax - obj.box.xmin)) / imgW;
|
| 42 |
+
const h = (100 * (obj.box.ymax - obj.box.ymin)) / imgH;
|
| 43 |
+
const box = document.createElement("div");
|
| 44 |
+
box.classList.add("box");
|
| 45 |
+
box.style.position = "absolute";
|
| 46 |
+
box.style.border = "solid 2px red";
|
| 47 |
+
box.style.top = (100 * obj.box.ymin) / imgH + "%";
|
| 48 |
+
box.style.left = (100 * obj.box.xmin) / imgW + "%";
|
| 49 |
+
box.style.width = w + "%";
|
| 50 |
+
box.style.height = h + "%";
|
| 51 |
+
box.appendChild(document.createTextNode(obj.label));
|
| 52 |
+
return box;
|
| 53 |
+
})
|
| 54 |
+
boxes.forEach((box) => {
|
| 55 |
+
container.appendChild(box);
|
| 56 |
+
})
|
| 57 |
+
} catch (e) {
|
| 58 |
+
document.querySelector("#output").innerText = e.message;
|
| 59 |
+
}
|
| 60 |
+
}
|
| 61 |
+
document.querySelector("#image-file").addEventListener("change", async (e) => {
|
| 62 |
+
const file = e.target.files[0];
|
| 63 |
+
const newImage = new Image();
|
| 64 |
+
newImage.src = URL.createObjectURL(file)
|
| 65 |
+
const img = document.querySelector("#example-img");
|
| 66 |
+
img.src = newImage.src;
|
| 67 |
+
newImage.onload = () => {
|
| 68 |
+
detectObjects(file, newImage.naturalWidth, newImage.naturalHeight);
|
| 69 |
+
}
|
| 70 |
+
});
|
| 71 |
+
</script>
|
| 72 |
+
<h1> Hello huggingface.js </h1>
|
| 73 |
+
<div>
|
| 74 |
+
<label for="token">HF Token</label>
|
| 75 |
+
<div style="display: flex">
|
| 76 |
+
<input style="flex: 2 1 0%" type="password" id="token" />
|
| 77 |
+
<button style="flex: 1 1 0%" id="tokenBtn">Set Token</button>
|
| 78 |
+
</div>
|
| 79 |
+
</div>
|
| 80 |
+
|
| 81 |
+
<input type="file" id="image-file" accept="image/*" />
|
| 82 |
+
<div style="position: relative;" id="image-container">
|
| 83 |
+
<img id="example-img" width="100%"
|
| 84 |
+
src="https://raw.githubusercontent.com/huggingface/huggingface.js/main/packages/inference/test/cats.png">
|
| 85 |
+
</div>
|
| 86 |
+
<pre><code id="output"></code></pre>
|
| 87 |
+
</body>
|
| 88 |
+
|
| 89 |
+
</html>
|