Update index.js

index.js

@@ -8,6 +8,8 @@ const status = document.getElementById('status');
 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'];
 
 const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/astronaut.png';
 
@@ -21,13 +23,13 @@ example.addEventListener('click', (e) => {
     detect(EXAMPLE_URL);
 });
 
+const reader = new FileReader();
 fileUpload.addEventListener('change', function (e) {
     const file = e.target.files[0];
     if (!file) {
         return;
     }
 
-    const reader = new FileReader();
 
     // Set up a callback when the file is loaded
     reader.onload = e2 => detect(e2.target.result);
@@ -36,6 +38,13 @@ fileUpload.addEventListener('change', function (e) {
 });
 
 
+labels.addEventListener('blur', (e) => {
+  candidate_labels = e.target.value.split(",");
+  if (reader.readyState === "DONE") {
+    detect(reader.result);
+  }
+});
+
 // Detect objects in the image
 async function detect(img) {
     imageContainer.innerHTML = '';
@@ -43,7 +52,6 @@ async function detect(img) {
 
     status.textContent = 'Analysing...';
   
-    const candidate_labels = ['human face', 'rocket', 'helmet', 'american flag'];
     const output = await detector(img, candidate_labels, { percentage: true });
     console.warn(output);
     status.textContent = '';