Public
Edited
Oct 1, 2023
4 forks
23 stars
html`<div style="position: relative; background-image: url(${imageBase64}); background-size: 100% auto; height: ${height}px;">
${objectsHtml}
</div>`
image = providedImage || FileAttachment("IMG_5846.jpeg")
mod = import("https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0")
detector = await mod.pipeline(
"object-detection",
"Xenova/detr-resnet-50"
)
objects = {
if (!image) {
return null;
}
return await detector(imageBase64, { threshold: 0.6, percentage: true });
}
objectsHtml = {
let bits = [];
if (objects) {
objects.forEach((o) => {
bits.push(renderBox(o));
});
}
return bits.join("");
}
rendered = image.image()
height = rendered.height
width = rendered.width
imageBase64 = {
return new Promise(async (resolve) => {
const reader = new FileReader();
reader.readAsDataURL(await image.blob());
reader.onloadend = () => {
resolve(reader.result);
};
});
}
html`<code>${objectsHtml.replace(/</g, "<")}</code>`
// Adapted from https://github.com/xenova/transformers.js/blob/5b31129218e2f6ea001f8477a094f4f3f15a2502/examples/vanilla-js/index.js#L48
function renderBox({ box, label, score }) {
const { xmax, xmin, ymax, ymin } = box;
// 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");
Object.assign(boxElement.style, {
borderWidth: "2px",
borderStyle: "solid",
borderColor: color,
left: 100 * xmin + "%",
top: 100 * ymin + "%",
width: 100 * (xmax - xmin) + "%",
height: 100 * (ymax - ymin) + "%",
position: "absolute"
});
// Draw label
const labelElement = document.createElement("span");
labelElement.textContent = label + " " + (score * 100).toFixed(2) + "%";
labelElement.style.backgroundColor = color;
labelElement.style.color = "white";
boxElement.appendChild(labelElement);
return boxElement.outerHTML;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.