object-detection-vue

Running

App Files Files Community

Arsala Grey commited on Oct 24, 2023

Commit

3529c31

•

1 Parent(s): 7e2f64e

added loading and sorted detected objects

Browse files

Files changed (2) hide show

index.html +26 -16
index.js +35 -9

index.html CHANGED Viewed

@@ -1,34 +1,44 @@
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>Image Object Detection - HuggingFace.js Live Examples</title>
-    <link rel="stylesheet" href="/utils.css" />
     <link rel="stylesheet" href="/pico.classless.min.css" />
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
   </head>
   <body>
     <div id="generate-text-stream-app" class="container">
       <h1>Detect Objects In Images</h1>
-      <label for="hf-token">Hugging Face Token</label>
-      <input id="hf-token" v-model="token" placeholder="HF-TOKEN" type="password" />
-      <label for="model-select">Select a model</label>
-      <select id="model-select" v-model="selectedModel" >
-        <option v-for="model in models" :value="model">
-          {{ model }}
-        </option>
-      </select>
-      <label for="current-image">Current Image</label>
-      <div class="image-container">
-      <img :src="imageUrl" id="current-image" />
-      </div>
       <div class="grid grid-cols-2 gap-2">
-        <button class="btn-info" @click="shuffle">SHUFFLE</button>
         <button class="btn-success" @click="run">DETECT OBJECTS</button>
       </div>
-      <h2>Result</h2>
     </div>
     <script type="module" src="./index.js"></script>
   </body>

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>Image Object Detection - HuggingFace.js Live Examples</title>
     <link rel="stylesheet" href="/pico.classless.min.css" />
+    <link rel="stylesheet" href="/main.css" />
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
   </head>
   <body>
     <div id="generate-text-stream-app" class="container">
       <h1>Detect Objects In Images</h1>
       <div class="grid grid-cols-2 gap-2">
+        <div>
+          <label for="hf-token">Hugging Face Token</label>
+          <input
+            id="hf-token"
+            v-model="token"
+            placeholder="HF-TOKEN"
+            type="password"
+          />
+        </div>
+        <div>
+          <label for="model-select">Select a model</label>
+          <select id="model-select" v-model="selectedModel">
+            <option v-for="model in models" :value="model">{{ model }}</option>
+          </select>
+        </div>
+      </div>
+      <div class="grid grid-cols-3 gap-2">
+        <button class="btn-info" @click="shuffle">RANDOM IMAGE</button>
+        <button class="btn-gray" @click="upload">UPLOAD IMAGE</button>
         <button class="btn-success" @click="run">DETECT OBJECTS</button>
       </div>
+      <h2>{{statusMessage}}</h2>
+      <div class="image-container">
+        <div id="image-wrapper">
+          <img :src="imageUrl" id="current-image" />
+        </div>
+      </div>
     </div>
     <script type="module" src="./index.js"></script>
   </body>

index.js CHANGED Viewed

@@ -1,11 +1,11 @@
-const { createApp, ref, onMounted } = Vue;
 import { HfInference } from "https://cdn.skypack.dev/@huggingface/inference@latest";
 const getRandomImageUrl = async () => {
     const randomImageRequest = await fetch("https://source.unsplash.com/random/640x480")
     return randomImageRequest.url
 }
-const ObjectDatectionModels = ["facebook/detr-resnet-50"]
 const getImageBuffer = async (imageUrl) => {
     const imageRequest = await fetch(imageUrl)
@@ -22,6 +22,8 @@ const drawDetectedObjects = (img, detections) => {
     container.style.height = `${img.height}px`;
     img.parentNode.insertBefore(container, img);
     detections.forEach(detection => {
         const { xmin, ymin, xmax, ymax } = detection.box;
         const label = detection.label;
@@ -39,18 +41,33 @@ const drawDetectedObjects = (img, detections) => {
         tooltip.innerText = `${label}: ${confidence}`;
         box.appendChild(tooltip);
-        container.appendChild(box);
     });
 };
 const app = createApp({
     setup() {
         const token = ref(localStorage.getItem("token") || "");
-        const models = ref(ObjectDatectionModels);
         const selectedModel = ref("");
         const imageUrl = ref("");
         const detectedObjects = ref([]);
         const run = async () => {
             try {
                 const hf = new HfInference(token.value);
                 const imageData = await getImageBuffer(imageUrl.value);
@@ -58,18 +75,25 @@ const app = createApp({
                     data: imageData,
                     model: selectedModel.value,
                 });
-                console.log(result);
                 detectedObjects.value = result
                 drawDetectedObjects(document.getElementById('current-image'), result)
             } catch (e) {
-                console.log(e);
             }
         };
-        const shuffle = async () => {
-            imageUrl.value = await getRandomImageUrl()
             document.getElementById('detected-objects-container').remove()
             document.getElementsByClassName('bounding-box').forEach(box => box.remove())
         };
         onMounted(async () => {
@@ -91,7 +115,9 @@ const app = createApp({
             shuffle,
             models,
             selectedModel,
-            imageUrl
         };
     },
 });

+const { createApp, ref, onMounted, computed } = Vue;
 import { HfInference } from "https://cdn.skypack.dev/@huggingface/inference@latest";
 const getRandomImageUrl = async () => {
     const randomImageRequest = await fetch("https://source.unsplash.com/random/640x480")
     return randomImageRequest.url
 }
+const ObjectDetectionModels = ["facebook/detr-resnet-50", "hustvl/yolos-tiny", "facebook/detr-resnet-101"]
 const getImageBuffer = async (imageUrl) => {
     const imageRequest = await fetch(imageUrl)
     container.style.height = `${img.height}px`;
     img.parentNode.insertBefore(container, img);
+    const detectedObjectBoxes = []
     detections.forEach(detection => {
         const { xmin, ymin, xmax, ymax } = detection.box;
         const label = detection.label;
         tooltip.innerText = `${label}: ${confidence}`;
         box.appendChild(tooltip);
+        detectedObjectBoxes.push(box)
     });
+    detectedObjectBoxes.sort((a, b) => {
+        const aSize = a.style.width * a.style.height
+        const bSize = b.style.width * b.style.height
+        return aSize - bSize
+    }).forEach(box => container.appendChild(box))
 };
 const app = createApp({
     setup() {
         const token = ref(localStorage.getItem("token") || "");
+        const models = ref(ObjectDetectionModels);
         const selectedModel = ref("");
         const imageUrl = ref("");
         const detectedObjects = ref([]);
+        const loading = ref(false);
+        const statusMessage = computed(() => {
+            if (loading.value) return "Loading...";
+            if (detectedObjects.value.length === 0) return "No objects detected";
+            if (detectedObjects.value.length === 1) return "1 object detected";
+            return `${detectedObjects.value.length} objects detected`;
+        })
         const run = async () => {
+            loading.value = true;
             try {
                 const hf = new HfInference(token.value);
                 const imageData = await getImageBuffer(imageUrl.value);
                     data: imageData,
                     model: selectedModel.value,
                 });
                 detectedObjects.value = result
                 drawDetectedObjects(document.getElementById('current-image'), result)
+                console.log(detectedObjects.value)
+                loading.value = false;
             } catch (e) {
+                console.error(e);
+                loading.value = false;
             }
         };
+        const reset = () => {
             document.getElementById('detected-objects-container').remove()
             document.getElementsByClassName('bounding-box').forEach(box => box.remove())
+            detectedObjects.value = []
+        }
+        const shuffle = async () => {
+            imageUrl.value = await getRandomImageUrl()
+            reset()
         };
         onMounted(async () => {
             shuffle,
             models,
             selectedModel,
+            imageUrl,
+            loading,
+            statusMessage
         };
     },
 });