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