Spaces:
Running
Running
File size: 3,505 Bytes
ac49be6 9421f12 338eb85 9421f12 c0594c6 338eb85 9421f12 c0594c6 338eb85 c0594c6 9421f12 c0594c6 338eb85 c0594c6 9421f12 338eb85 c0594c6 9421f12 c0594c6 338eb85 9421f12 338eb85 9421f12 338eb85 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
import { env, AutoProcessor, AutoModel, RawImage } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.1';
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);
} |