p5(sketch => {
let mobileNet
let video
let predictor
let slider
let addButton
let trainButton
let label = "-"
let loss = "-"
function onTraining(lossValue) {
if (lossValue === null) predictor.predict(video, onPrediction)
else loss = lossValue
}
function onPrediction(error, results) {
if (error) label = error.message
else label = results.value
predictor.predict(video, onPrediction)
}
sketch.setup = function() {
sketch.createCanvas(640, 480)
sketch.background(0)
video = sketch.createCapture(sketch.VIDEO)
video.hide()
mobileNet = ml5.featureExtractor('MobileNet')
predictor = mobileNet.regression(video)
slider = sketch.createSlider(0, 1, 0, 0.01)
addButton = sketch.createButton("Add");
addButton.mousePressed(() => predictor.addImage(video, slider.value()))
trainButton = sketch.createButton("Train");
trainButton.mousePressed(() => predictor.train(onTraining))
};
sketch.draw = function() {
sketch.image(video, 0, 0)
sketch.fill(0)
sketch.rect(0, 0, 640, 54)
sketch.fill(255)
sketch.textSize(24)
sketch.text("Loss: " + loss, 10, 24)
sketch.text("Label: " + label, 10, 48)
}
})
import { p5 } from "@bberak/p5"
ml5 = require("https://unpkg.com/ml5@0.12.2/dist/ml5.min.js")
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.
