Update index.js

index.js

@@ -9,6 +9,8 @@ const fileUpload = document.getElementById('upload');
 const imageContainer = document.getElementById('container');
 const example = document.getElementById('example');
 const labels = document.getElementById('labels');
+const form = document.getElementById('form');
+
 let parsedLabels = ['human face', 'rocket', 'helmet', 'american flag'];
 let img = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/astronaut.png';
 
@@ -33,7 +35,6 @@ fileUpload.addEventListener('change', function (e) {
     // Set up a callback when the file is loaded
     reader.onload = (e2) => {
       img = e2.target.result;
-      console.log('img in fileUpload event:', img, e2.target.result);
       detect();
     }
 
@@ -43,23 +44,27 @@ fileUpload.addEventListener('change', function (e) {
 
 labels.addEventListener('blur', (e) => {
   parsedLabels = e.target.value.split(",");
-  console.warn(img);
   if (img) {
     status.textContent = 'Analysing...';
     detect();
   }
 });
 
+form.addEventListener('submit', () => {
+  if (img) {
+    status.textContent = 'Analysing...';
+    detect();
+  }
+})
+
 // Detect objects in the image
 async function detect() {
-    console.warn(parsedLabels);
     imageContainer.innerHTML = '';
     imageContainer.style.backgroundImage = `url(${img})`;
 
     status.textContent = 'Analysing...';
   
     const output = await detector(img, parsedLabels, { percentage: true });
-    console.warn(output);
     status.textContent = '';
     output.forEach(renderBox);