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);