Update index.js

index.js

@@ -44,17 +44,27 @@ fileUpload.addEventListener('change', function (e) {
 
 
 // Detect objects in the image
-async function detect(img) {
+async function detect(url) {
+    // Read image
+    const image = await RawImage.fromURL(url);
+
+    // Update UI
     imageContainer.innerHTML = '';
-    imageContainer.style.backgroundImage = `url(${img})`;
+    imageContainer.style.backgroundImage = `url(${url})`;
 
-    status.textContent = 'Analysing...';
+    // Set container width and height depending on the image aspect ratio
+    const ar = image.width / image.height;
+    const [cw, ch] = (ar > 720 / 480) ? [720, 720 / ar] : [480 * ar, 480];
+    imageContainer.style.width = `${cw}px`;
+    imageContainer.style.height = `${ch}px`;
 
-    const image = await RawImage.fromURL(img);
+    status.textContent = 'Analysing...';
 
+    // Preprocess image
     const { pixel_values } = await processor(image);
 
-    const { outputs } = await model({images: pixel_values});
+    // Predict bounding boxes
+    const { outputs } = await model({ images: pixel_values });
   
     status.textContent = '';
     outputs.tolist().forEach(renderBox);