Cleanup

examples/javascript-object-detection/index.js

@@ -3,48 +3,58 @@ import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers
 // Since we will download the model from the Hugging Face Hub, we can skip the local model check
 env.allowLocalModels = false;
 
-const statusParagraph = document.getElementById('status');
-const fileUploadElement = document.getElementById('file-upload');
+// Reference the elements that we will need
+const status = document.getElementById('status');
+const fileUpload = document.getElementById('file-upload');
 const imageContainer = document.getElementById('image-container');
 
-// Start loading the model on page load
-statusParagraph.textContent = 'Loading model...';
+// Create a new object detection pipeline
+status.textContent = 'Loading model...';
 const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-statusParagraph.textContent = 'Ready';
+status.textContent = 'Ready';
 
-fileUploadElement.addEventListener('change', function (e) {
+fileUpload.addEventListener('change', function (e) {
     const file = e.target.files[0];
-    const fr = new FileReader();
-    fr.onload = (e) => {
+    if (!file) {
+        return;
+    }
+
+    const reader = new FileReader();
+
+    // Set up a callback when the file is loaded
+    reader.onload = function (e2) {
         imageContainer.innerHTML = '';
         const image = document.createElement('img');
-        image.src = e.target.result;
+        image.src = e2.target.result;
         imageContainer.appendChild(image);
-        runModel(image);
+        detect(image);
     };
-    fr.readAsDataURL(file);
+    reader.readAsDataURL(file);
 });
 
-async function runModel(img) {
-    statusParagraph.textContent = 'Analysing...';
+
+// Detect objects in the image
+async function detect(img) {
+    status.textContent = 'Analysing...';
     const output = await detector(img.src, {
         threshold: 0.5,
         percentage: true,
     });
-    statusParagraph.textContent = '';
-    output.forEach(renderBox)
+    status.textContent = '';
+    output.forEach(renderBox);
 }
 
+// Render a bounding box and label on the image
 function renderBox({ box, label }) {
     const { xmax, xmin, ymax, ymin } = box;
 
     // Generate a random color for the box
     const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
 
     // Draw the box
-    const boundingBoxElement = document.createElement('div');
-    boundingBoxElement.className = 'bounding-box';
-    Object.assign(boundingBoxElement.style, {
+    const boxElement = document.createElement('div');
+    boxElement.className = 'bounding-box';
+    Object.assign(boxElement.style, {
         borderColor: color,
         left: 100 * xmin + '%',
         top: 100 * ymin + '%',
@@ -53,11 +63,11 @@ function renderBox({ box, label }) {
     })
 
     // Draw label
-    const labelSpan = document.createElement('span');
-    labelSpan.textContent = label;
-    labelSpan.className = 'bounding-box-label';
-    labelSpan.style.backgroundColor = color;
+    const labelElement = document.createElement('span');
+    labelElement.textContent = label;
+    labelElement.className = 'bounding-box-label';
+    labelElement.style.backgroundColor = color;
 
-    boundingBoxElement.appendChild(labelSpan);
-    imageContainer.appendChild(boundingBoxElement);
+    boxElement.appendChild(labelElement);
+    imageContainer.appendChild(boxElement);
 }