Spaces:
Running
Running
Show all models
Browse files
index.js
CHANGED
@@ -1,22 +1,25 @@
|
|
1 |
import { env, AutoProcessor, AutoModel, RawImage } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.1';
|
2 |
|
3 |
-
// Since we will download the model from the Hugging Face Hub, we can skip the local model check
|
4 |
env.allowLocalModels = false;
|
5 |
|
6 |
-
// Reference the elements that we will need
|
7 |
const status = document.getElementById('status');
|
8 |
const fileUpload = document.getElementById('upload');
|
9 |
-
const imageContainer = document.getElementById('container');
|
10 |
const example = document.getElementById('example');
|
|
|
11 |
|
12 |
const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
|
13 |
const THRESHOLD = 0.25;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
14 |
|
15 |
-
// Create a new object detection pipeline
|
16 |
-
status.textContent = 'Loading model...';
|
17 |
-
const model_id = 'onnx-community/yolov10x';
|
18 |
-
const processor = await AutoProcessor.from_pretrained(model_id);
|
19 |
-
const model = await AutoModel.from_pretrained(model_id);
|
20 |
status.textContent = 'Ready';
|
21 |
|
22 |
example.addEventListener('click', (e) => {
|
@@ -31,51 +34,53 @@ fileUpload.addEventListener('change', function (e) {
|
|
31 |
}
|
32 |
|
33 |
const reader = new FileReader();
|
34 |
-
|
35 |
-
// Set up a callback when the file is loaded
|
36 |
reader.onload = e2 => detect(e2.target.result);
|
37 |
-
|
38 |
reader.readAsDataURL(file);
|
39 |
});
|
40 |
|
41 |
-
|
42 |
-
// Detect objects in the image
|
43 |
async function detect(url) {
|
44 |
-
|
45 |
-
imageContainer.innerHTML = '';
|
46 |
|
47 |
-
// Read image
|
48 |
const image = await RawImage.fromURL(url);
|
49 |
-
|
50 |
-
// Set container width and height depending on the image aspect ratio
|
51 |
const ar = image.width / image.height;
|
52 |
const [cw, ch] = (ar > 1) ? [640, 640 / ar] : [640 * ar, 640];
|
53 |
-
imageContainer.style.width = `${cw}px`;
|
54 |
-
imageContainer.style.height = `${ch}px`;
|
55 |
-
imageContainer.style.backgroundImage = `url(${url})`;
|
56 |
|
57 |
status.textContent = 'Analysing...';
|
58 |
|
59 |
-
|
60 |
-
|
61 |
-
|
62 |
-
|
63 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
64 |
|
65 |
status.textContent = '';
|
66 |
-
|
67 |
-
const sizes = inputs.reshaped_input_sizes[0].reverse();
|
68 |
-
output0.tolist()[0].forEach(x => renderBox(x, sizes));
|
69 |
}
|
70 |
|
71 |
-
|
72 |
-
|
73 |
-
if (score < THRESHOLD) return; // Skip boxes with low confidence
|
74 |
|
75 |
-
// Generate a random color for the box
|
76 |
const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
|
77 |
|
78 |
-
// Draw the box
|
79 |
const boxElement = document.createElement('div');
|
80 |
boxElement.className = 'bounding-box';
|
81 |
Object.assign(boxElement.style, {
|
@@ -84,14 +89,13 @@ function renderBox([xmin, ymin, xmax, ymax, score, id], [w, h]) {
|
|
84 |
top: 100 * ymin / h + '%',
|
85 |
width: 100 * (xmax - xmin) / w + '%',
|
86 |
height: 100 * (ymax - ymin) / h + '%',
|
87 |
-
})
|
88 |
|
89 |
-
// Draw label
|
90 |
const labelElement = document.createElement('span');
|
91 |
-
labelElement.textContent =
|
92 |
labelElement.className = 'bounding-box-label';
|
93 |
labelElement.style.backgroundColor = color;
|
94 |
|
95 |
boxElement.appendChild(labelElement);
|
96 |
-
|
97 |
-
}
|
|
|
1 |
import { env, AutoProcessor, AutoModel, RawImage } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.1';
|
2 |
|
|
|
3 |
env.allowLocalModels = false;
|
4 |
|
|
|
5 |
const status = document.getElementById('status');
|
6 |
const fileUpload = document.getElementById('upload');
|
|
|
7 |
const example = document.getElementById('example');
|
8 |
+
const resultsContainer = document.getElementById('results');
|
9 |
|
10 |
const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
|
11 |
const THRESHOLD = 0.25;
|
12 |
+
const MODEL_VARIANTS = ['yolov10n', 'yolov10s', 'yolov10m', 'yolov10b', 'yolov10l', 'yolov10x'];
|
13 |
+
|
14 |
+
status.textContent = 'Loading models...';
|
15 |
+
|
16 |
+
const models = await Promise.all(MODEL_VARIANTS.map(async variant => {
|
17 |
+
const model_id = `onnx-community/${variant}`;
|
18 |
+
const processor = await AutoProcessor.from_pretrained(model_id);
|
19 |
+
const model = await AutoModel.from_pretrained(model_id);
|
20 |
+
return { variant, processor, model };
|
21 |
+
}));
|
22 |
|
|
|
|
|
|
|
|
|
|
|
23 |
status.textContent = 'Ready';
|
24 |
|
25 |
example.addEventListener('click', (e) => {
|
|
|
34 |
}
|
35 |
|
36 |
const reader = new FileReader();
|
|
|
|
|
37 |
reader.onload = e2 => detect(e2.target.result);
|
|
|
38 |
reader.readAsDataURL(file);
|
39 |
});
|
40 |
|
|
|
|
|
41 |
async function detect(url) {
|
42 |
+
resultsContainer.innerHTML = '';
|
|
|
43 |
|
|
|
44 |
const image = await RawImage.fromURL(url);
|
|
|
|
|
45 |
const ar = image.width / image.height;
|
46 |
const [cw, ch] = (ar > 1) ? [640, 640 / ar] : [640 * ar, 640];
|
|
|
|
|
|
|
47 |
|
48 |
status.textContent = 'Analysing...';
|
49 |
|
50 |
+
await Promise.all(models.map(async ({ variant, processor, model }) => {
|
51 |
+
const inputs = await processor(image);
|
52 |
+
const { output0 } = await model({ images: inputs.pixel_values });
|
53 |
+
|
54 |
+
const sizes = inputs.reshaped_input_sizes[0].reverse();
|
55 |
+
const container = document.createElement('div');
|
56 |
+
container.className = 'image-container';
|
57 |
+
container.style.width = `${cw}px`;
|
58 |
+
container.style.height = `${ch}px`;
|
59 |
+
container.style.backgroundImage = `url(${url})`;
|
60 |
+
|
61 |
+
const label = document.createElement('div');
|
62 |
+
label.textContent = variant;
|
63 |
+
label.style.position = 'absolute';
|
64 |
+
label.style.top = '0';
|
65 |
+
label.style.left = '0';
|
66 |
+
label.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
|
67 |
+
label.style.color = '#fff';
|
68 |
+
label.style.padding = '5px';
|
69 |
+
container.appendChild(label);
|
70 |
+
|
71 |
+
output0.tolist()[0].forEach(x => renderBox(x, sizes, container, model.config.id2label));
|
72 |
+
|
73 |
+
resultsContainer.appendChild(container);
|
74 |
+
}));
|
75 |
|
76 |
status.textContent = '';
|
|
|
|
|
|
|
77 |
}
|
78 |
|
79 |
+
function renderBox([xmin, ymin, xmax, ymax, score, id], [w, h], container, id2label) {
|
80 |
+
if (score < THRESHOLD) return;
|
|
|
81 |
|
|
|
82 |
const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
|
83 |
|
|
|
84 |
const boxElement = document.createElement('div');
|
85 |
boxElement.className = 'bounding-box';
|
86 |
Object.assign(boxElement.style, {
|
|
|
89 |
top: 100 * ymin / h + '%',
|
90 |
width: 100 * (xmax - xmin) / w + '%',
|
91 |
height: 100 * (ymax - ymin) / h + '%',
|
92 |
+
});
|
93 |
|
|
|
94 |
const labelElement = document.createElement('span');
|
95 |
+
labelElement.textContent = id2label[id];
|
96 |
labelElement.className = 'bounding-box-label';
|
97 |
labelElement.style.backgroundColor = color;
|
98 |
|
99 |
boxElement.appendChild(labelElement);
|
100 |
+
container.appendChild(boxElement);
|
101 |
+
}
|