fixed error when resetting. Also fixed zIndex issue

index.js

@@ -31,9 +31,13 @@ const drawDetectedObjects = (img, detections) => {
         box.classList.add('bounding-box');
         box.style.left = `${xmin}px`;
         box.style.top = `${ymin}px`;
-        box.style.width = `${xmax - xmin}px`;
-        box.style.height = `${ymax - ymin}px`;
+        const width = xmax - xmin
+        const height = ymax - ymin
+        box.style.width = `${width}px`;
+        box.style.height = `${height}px`;
 
+        const area = width * height
+        box.area = area
         const tooltip = document.createElement('div');
         tooltip.classList.add('tooltip');
         tooltip.innerText = `${label}: ${confidence}`;
@@ -41,12 +45,14 @@ const drawDetectedObjects = (img, detections) => {
 
         detectedObjectBoxes.push(box)
     });
-
+    let zIndex = 0
     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))
+        return b.area - a.area
+    }).forEach(box => {
+        box.style.zIndex = zIndex
+        container.appendChild(box)
+        zIndex++
+    })
 };
 const app = createApp({
     setup() {
@@ -67,9 +73,7 @@ const app = createApp({
         })
 
         const run = async () => {
-            if (detectedObjects.value.length > 0) {
-                removeDetectedObjects()
-            }
+            reset()
             loading.value = true;
             try {
                 const hf = new HfInference(token.value);
@@ -87,21 +91,24 @@ const app = createApp({
                 didErrorOccur.value = true
             }
         };
-
-        const removeDetectedObjects = () => {
-            document.getElementById('detected-objects-container').remove()
-            document.getElementsByClassName('bounding-box').forEach(box => box.remove())
-            detectedObjects.value = []
-        }
-
         const reset = () => {
-            removeDetectedObjects()
+            try {
+                document.getElementById('detected-objects-container')?.remove()
+                const boundingBoxes = document.getElementsByClassName('bounding-box')
+                for (const box of boundingBoxes) {
+                    box.remove()
+                }
+            } catch (e) {
+                console.error(e)
+            }
             didErrorOccur.value = false
+            detectedObjects.value = []
         }
 
         const shuffle = async () => {
-            imageUrl.value = await getRandomImageUrl()
+            imageUrl.value = ""
             reset()
+            imageUrl.value = await getRandomImageUrl()
         };
 
         onMounted(async () => {