Public
Edited
Jan 22, 2023
viewof file = Inputs.file({ label: "Image File", accept: ".jpg,.jpeg,.bmp,.png,.gif", required: true })
fileMetadata = {
const image = await file.image()
return { url: await file.url(), width: image.width, height: image.height }
}
p5(sketch => {
let img
let detector
let objects = []
function onModelLoaded() {
detector.detect(img, onDetected)
}
function onDetected(error, results) {
if (error) console.error(error)
else objects = results
}
sketch.preload = function() {
img = sketch.loadImage(fileMetadata.url)
};
sketch.setup = function() {
sketch.createCanvas(fileMetadata.width, fileMetadata.height)
sketch.background(0)
sketch.image(img, 0, 0)
detector = ml5.objectDetector('cocossd', onModelLoaded)
};
sketch.draw = function() {
objects.forEach(obj => {
sketch.stroke(0, 255, 0)
sketch.strokeWeight(4)
sketch.noFill()
sketch.rect(obj.x, obj.y, obj.width, obj.height)
sketch.noStroke()
sketch.fill(255)
sketch.textSize(24)
sketch.text(obj.label, obj.x + 10, obj.y + 24)
})
}
})
import { p5 } from "@bberak/p5"
ml5 = import("https://cdn.skypack.dev/ml5@0.5.0").then(x => x.default)
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.
