Update index.js

index.js

@@ -10,6 +10,7 @@ const imageContainer = document.getElementById('container');
 const example = document.getElementById('example');
 
 const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
+const IMAGE_SIZE = 640;
 
 // Create a new object detection pipeline
 status.textContent = 'Loading model...';
@@ -50,7 +51,6 @@ async function detect(img) {
     const { pixel_values } = await processor(image);
     const { output0 } = await model({ images: pixel_values });
     const predictions = output0.tolist()[0];
-    console.log(predictions);
     const threshold = 0.5;
     for (const [xmin, ymin, xmax, ymax, score, id] of predictions) {
         if (score < threshold) continue;
@@ -69,10 +69,10 @@ function renderBox(xmin, ymin, xmax, ymax, score, label) {
     boxElement.className = 'bounding-box';
     Object.assign(boxElement.style, {
         borderColor: color,
-        left: 100 * xmin + '%',
-        top: 100 * ymin + '%',
-        width: 100 * (xmax - xmin) + '%',
-        height: 100 * (ymax - ymin) + '%',
+        left: 100 * xmin / IMAGE_SIZE + '%',
+        top: 100 * ymin / IMAGE_SIZE + '%',
+        width: 100 * (xmax - xmin) / IMAGE_SIZE + '%',
+        height: 100 * (ymax - ymin) / IMAGE_SIZE + '%',
     })
 
     // Draw label