index.js

import { env, AutoProcessor, AutoModel, RawImage } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';

env.allowLocalModels = false;

const status = document.getElementById('status');
const fileUpload = document.getElementById('upload');
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 };
}));

status.textContent = 'Ready';

example.addEventListener('click', (e) => {
    e.preventDefault();
    detect(EXAMPLE_URL);
});

fileUpload.addEventListener('change', function (e) {
    const file = e.target.files[0];
    if (!file) {
        return;
    }

    const reader = new FileReader();
    reader.onload = e2 => detect(e2.target.result);
    reader.readAsDataURL(file);
});

async function detect(url) {
    resultsContainer.innerHTML = '';

    const image = await RawImage.fromURL(url);
    const ar = image.width / image.height;
    const [cw, ch] = (ar > 1) ? [640, 640 / ar] : [640 * ar, 640];

    status.textContent = 'Analysing...';

    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 = '';
}

function renderBox([xmin, ymin, xmax, ymax, score, id], [w, h], container, id2label) {
    if (score < THRESHOLD) return;

    const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);

    const boxElement = document.createElement('div');
    boxElement.className = 'bounding-box';
    Object.assign(boxElement.style, {
        borderColor: color,
        left: 100 * xmin / w + '%',
        top: 100 * ymin / h + '%',
        width: 100 * (xmax - xmin) / w + '%',
        height: 100 * (ymax - ymin) / h + '%',
    });

    const labelElement = document.createElement('span');
    labelElement.textContent = id2label[id];
    labelElement.className = 'bounding-box-label';
    labelElement.style.backgroundColor = color;

    boxElement.appendChild(labelElement);
    container.appendChild(boxElement);
}