Update index.html

index.html

@@ -13,18 +13,21 @@
         import { HfInference } from 'https://cdn.skypack.dev/@huggingface/[email protected]';
         let hf = new HfInference();
 
-        document.querySelector("#token").addEventListener("change", (e) => {
-            hf = new HfInference(e.target.value)
+        document.querySelector("#tokenBtn").addEventListener("click", (e) => {
+            const token = document.querySelector("#token").value;
+            hf = new HfInference(token)
+            init()
         })
 
         document.addEventListener("DOMContentLoaded", async () => {
-            const image = document.querySelector("#example-img");
-            const imgBlob = await fetch(image.src).then((r) => r.blob());
-            detectObjects(imgBlob, image.naturalWidth, image.naturalHeight);
+            init();
         })
-
+        function init() {
+            const img = document.querySelector("#example-img");
+            const blob = new Blob([img.src], { type: "image/png" });
+            detectObjects(blob, img.naturalWidth, img.naturalHeight);
+        }
         async function detectObjects(imgBlob, imgW, imgH) {
-            console.log(imgBlob, imgW, imgH)
             try {
                 const objectDetectionRes = await hf.objectDetection({
                     data: imgBlob,
@@ -73,7 +76,7 @@
         <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%">Set Token</button>
+            <button style="flex: 1 1 0%" id="tokenBtn">Set Token</button>
         </div>
     </div>