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