Update index.js

index.js

@@ -42,11 +42,18 @@ async function detect(img) {
     imageContainer.style.backgroundImage = `url(${img})`;
 
     status.textContent = 'Analysing...';
+    
+    var const = new Image();
+    image.src = img;
+  
     const candidate_labels = ['human face', 'rocket', 'helmet', 'american flag'];
-    const output = await detector(img, candidate_labels);
-    console.error(img, output);
-    status.textContent = '';
-    output.forEach(renderBox);
+    image.onload = function () {
+      const output = await detector(img, candidate_labels);
+      const relativeOutput = output.map({box, label} => ({box: {xmax: box.xmax / image.width, xmin: box.xmin / image.width, ymax: box.ymax / image.height, ymin: box.ymin / image.height}, label}))
+      status.textContent = '';
+      output.forEach(renderBox);
+    };
+   
 }
 
 // Render a bounding box and label on the image
@@ -61,10 +68,10 @@ function renderBox({ box, label }) {
     boxElement.className = 'bounding-box';
     Object.assign(boxElement.style, {
         borderColor: color,
-        left: xmin + 'px',
-        top: ymin + 'px',
-        width: (xmax - xmin) + 'px',
-        height: (ymax - ymin) + 'px',
+        left: 100 * xmin + '%',
+        top: 100 * ymin + '%',
+        width: 100 * (xmax - xmin) + '%',
+        height: 100 * (ymax - ymin) + '%',
     })
 
     // Draw label
@@ -75,4 +82,4 @@ function renderBox({ box, label }) {
 
     boxElement.appendChild(labelElement);
     imageContainer.appendChild(boxElement);
-}
+}