Spaces:
Running
Running
| <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> |