huggingfaceDemo

Running

App Files Files Community

boazchung commited on Feb 5

Commit

f3a01cb

•

1 Parent(s): d34fa87

Create objdetect.html

Browse files

Files changed (1) hide show

objdetect.html +89 -0

objdetect.html ADDED Viewed

	@@ -0,0 +1,89 @@

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