Update index.js

index.js

@@ -11,16 +11,16 @@ const example = document.getElementById('example');
 
 const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
 
+const IMAGE_SIZE = 128;
+
 // Create a new object detection pipeline
 status.textContent = 'Loading model...';
 const processor = await AutoProcessor.from_pretrained('Xenova/yolov9-c');
 
-// Testing
-processor.feature_extractor.size = { width: 128, height: 128 }
+// For this demo, we resize the image to IMAGE_SIZE x IMAGE_SIZE
+processor.feature_extractor.size = { width: IMAGE_SIZE, height: IMAGE_SIZE }
 
-const model = await AutoModel.from_pretrained('Xenova/yolov9-c', {
-    // quantized: false,
-});
+const model = await AutoModel.from_pretrained('Xenova/yolov9-c');
 status.textContent = 'Ready';
 
 example.addEventListener('click', (e) => {
@@ -71,10 +71,10 @@ function renderBox([xmin, ymin, xmax, ymax, score, id]) {
     boxElement.className = 'bounding-box';
     Object.assign(boxElement.style, {
         borderColor: color,
-        left: 100 * xmin / 640 + '%',
-        top: 100 * ymin / 640 + '%',
-        width: 100 * (xmax - xmin) / 640 + '%',
-        height: 100 * (ymax - ymin) / 640 + '%',
+        left: 100 * xmin / IMAGE_SIZE + '%',
+        top: 100 * ymin / IMAGE_SIZE + '%',
+        width: 100 * (xmax - xmin) / IMAGE_SIZE + '%',
+        height: 100 * (ymax - ymin) / IMAGE_SIZE + '%',
     })
 
     // Draw label