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;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
