Update index.js

index.js

@@ -1,4 +1,4 @@
-import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.10.1';
+import { env, AutoModel, AutoProcessor, 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;
@@ -13,7 +13,11 @@ const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs
 
 // Create a new object detection pipeline
 status.textContent = 'Loading model...';
-const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
+const model_id = 'onnx-community/yolov10n';
+const model = await AutoModel.from_pretrained(model_id, {
+    quantized: false,    // (Optional) Use unquantized version.
+});
+const processor = await AutoProcessor.from_pretrained(model_id);
 status.textContent = 'Ready';
 
 example.addEventListener('click', (e) => {
@@ -42,18 +46,21 @@ async function detect(img) {
     imageContainer.style.backgroundImage = `url(${img})`;
 
     status.textContent = 'Analysing...';
-    const output = await detector(img, {
-        threshold: 0.5,
-        percentage: true,
-    });
+    const image = await RawImage.read(url);
+    const { pixel_values } = await processor(image);
+    const { output0 } = await model({ images: pixel_values });
+    const predictions = output0.tolist()[0];
+    const threshold = 0.5;
+    for (const [xmin, ymin, xmax, ymax, score, id] of predictions) {
+        if (score < threshold) continue;
+        renderBox(xmin, ymin, xmax, ymax, score, model.config.id2label[id]);
+    }
     status.textContent = '';
     output.forEach(renderBox);
 }
 
 // Render a bounding box and label on the image
-function renderBox({ box, label }) {
-    const { xmax, xmin, ymax, ymin } = box;
-
+function renderBox(xmin, ymin, xmax, ymax, score, label) {
     // Generate a random color for the box
     const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
 
@@ -70,7 +77,7 @@ function renderBox({ box, label }) {
 
     // Draw label
     const labelElement = document.createElement('span');
-    labelElement.textContent = label;
+    labelElement.textContent = `${label} (${(score * 100).toFixed(2)}%)`;
     labelElement.className = 'bounding-box-label';
     labelElement.style.backgroundColor = color;