Update index.js

index.js

@@ -9,7 +9,8 @@ const fileUpload = document.getElementById('upload');
 const imageContainer = document.getElementById('container');
 const example = document.getElementById('example');
 const labels = document.getElementById('labels');
-let candidate_labels = ['human face', 'rocket', 'helmet', 'american flag'];
+let parsedLabels = ['human face', 'rocket', 'helmet', 'american flag'];
+let img;
 
 const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/astronaut.png';
 
@@ -32,22 +33,26 @@ fileUpload.addEventListener('change', function (e) {
 
 
     // Set up a callback when the file is loaded
-    reader.onload = e2 => detect(e2.target.result);
+    reader.onload = e2 => {
+      img = e2.target.result;
+      detect(img, parsedLabels);
+    }
 
     reader.readAsDataURL(file);
 });
 
 
 labels.addEventListener('blur', (e) => {
-  candidate_labels = e.target.value.split(",");
-  console.warn(candidate_labels, reader);
-  if (reader.readyState === "DONE") {
-    detect(reader.result);
+  parsedLabels = e.target.value.split(",");
+  console.warn(parsedLabels, reader);
+  if (img) {
+    status.textContent = 'Analysing...';
+    detect(img, parsedLabels);
   }
 });
 
 // Detect objects in the image
-async function detect(img) {
+async function detect(img, candidate_labels) {
     imageContainer.innerHTML = '';
     imageContainer.style.backgroundImage = `url(${img})`;