Show all models

index.js

@@ -1,22 +1,25 @@
 import { env, AutoProcessor, AutoModel, RawImage } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.1';
 
-// Since we will download the model from the Hugging Face Hub, we can skip the local model check
 env.allowLocalModels = false;
 
-// Reference the elements that we will need
 const status = document.getElementById('status');
 const fileUpload = document.getElementById('upload');
-const imageContainer = document.getElementById('container');
 const example = document.getElementById('example');
+const resultsContainer = document.getElementById('results');
 
 const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
 const THRESHOLD = 0.25;
+const MODEL_VARIANTS = ['yolov10n', 'yolov10s', 'yolov10m', 'yolov10b', 'yolov10l', 'yolov10x'];
+
+status.textContent = 'Loading models...';
+
+const models = await Promise.all(MODEL_VARIANTS.map(async variant => {
+    const model_id = `onnx-community/${variant}`;
+    const processor = await AutoProcessor.from_pretrained(model_id);
+    const model = await AutoModel.from_pretrained(model_id);
+    return { variant, processor, model };
+}));
 
-// Create a new object detection pipeline
-status.textContent = 'Loading model...';
-const model_id = 'onnx-community/yolov10x';
-const processor = await AutoProcessor.from_pretrained(model_id);
-const model = await AutoModel.from_pretrained(model_id);
 status.textContent = 'Ready';
 
 example.addEventListener('click', (e) => {
@@ -31,51 +34,53 @@ fileUpload.addEventListener('change', function (e) {
     }
 
     const reader = new FileReader();
-
-    // Set up a callback when the file is loaded
     reader.onload = e2 => detect(e2.target.result);
-
     reader.readAsDataURL(file);
 });
 
-
-// Detect objects in the image
 async function detect(url) {
-    // Update UI
-    imageContainer.innerHTML = '';
+    resultsContainer.innerHTML = '';
 
-    // Read image
     const image = await RawImage.fromURL(url);
-
-    // Set container width and height depending on the image aspect ratio
     const ar = image.width / image.height;
     const [cw, ch] = (ar > 1) ? [640, 640 / ar] : [640 * ar, 640];
-    imageContainer.style.width = `${cw}px`;
-    imageContainer.style.height = `${ch}px`;
-    imageContainer.style.backgroundImage = `url(${url})`;
 
     status.textContent = 'Analysing...';
 
-    // Preprocess image
-    const inputs = await processor(image);
-
-    // Predict bounding boxes
-    const { output0 } = await model({ images: inputs.pixel_values });
+    await Promise.all(models.map(async ({ variant, processor, model }) => {
+        const inputs = await processor(image);
+        const { output0 } = await model({ images: inputs.pixel_values });
+        
+        const sizes = inputs.reshaped_input_sizes[0].reverse();
+        const container = document.createElement('div');
+        container.className = 'image-container';
+        container.style.width = `${cw}px`;
+        container.style.height = `${ch}px`;
+        container.style.backgroundImage = `url(${url})`;
+
+        const label = document.createElement('div');
+        label.textContent = variant;
+        label.style.position = 'absolute';
+        label.style.top = '0';
+        label.style.left = '0';
+        label.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+        label.style.color = '#fff';
+        label.style.padding = '5px';
+        container.appendChild(label);
+
+        output0.tolist()[0].forEach(x => renderBox(x, sizes, container, model.config.id2label));
+
+        resultsContainer.appendChild(container);
+    }));
 
     status.textContent = '';
-
-    const sizes = inputs.reshaped_input_sizes[0].reverse();
-    output0.tolist()[0].forEach(x => renderBox(x, sizes));
 }
 
-// Render a bounding box and label on the image
-function renderBox([xmin, ymin, xmax, ymax, score, id], [w, h]) {
-    if (score < THRESHOLD) return; // Skip boxes with low confidence
+function renderBox([xmin, ymin, xmax, ymax, score, id], [w, h], container, id2label) {
+    if (score < THRESHOLD) return;
 
-    // Generate a random color for the box
     const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
 
-    // Draw the box
     const boxElement = document.createElement('div');
     boxElement.className = 'bounding-box';
     Object.assign(boxElement.style, {
@@ -84,14 +89,13 @@ function renderBox([xmin, ymin, xmax, ymax, score, id], [w, h]) {
         top: 100 * ymin / h + '%',
         width: 100 * (xmax - xmin) / w + '%',
         height: 100 * (ymax - ymin) / h + '%',
-    })
+    });
 
-    // Draw label
     const labelElement = document.createElement('span');
-    labelElement.textContent = model.config.id2label[id];
+    labelElement.textContent = id2label[id];
     labelElement.className = 'bounding-box-label';
     labelElement.style.backgroundColor = color;
 
     boxElement.appendChild(labelElement);
-    imageContainer.appendChild(boxElement);
-}
+    container.appendChild(boxElement);
+}