p5(sketch => {
let mobileNet
let video
let classifier
let oneButton
let twoButton
let threeButton
let fourButton
let fiveButton
let trainButton
let label = "-"
let loss = "-"
function onTraining(lossValue) {
if (lossValue === null) classifier.classify(video, onPrediction)
else loss = lossValue
}
function onPrediction(error, results) {
if (error) label = error.message
else {
results.sort((x, y) => y.confidence - x.confidence)
label = `${results[0].label} (${results[0].confidence})`
}
classifier.classify(video, onPrediction)
}
sketch.setup = function() {
sketch.createCanvas(640, 480)
sketch.background(0)
video = sketch.createCapture(sketch.VIDEO)
video.hide()
mobileNet = ml5.featureExtractor('MobileNet')
classifier = mobileNet.classification(video, { numLabels: 5 })
oneButton = sketch.createButton("Button one");
oneButton.mousePressed(() => classifier.addImage(video, 'one'))
twoButton = sketch.createButton("Button two");
twoButton.mousePressed(() => classifier.addImage(video, 'two'))
threeButton = sketch.createButton("Button three");
threeButton.mousePressed(() => classifier.addImage(video, 'three'))
fourButton = sketch.createButton("Button four");
fourButton.mousePressed(() => classifier.addImage(video, 'four'))
fiveButton = sketch.createButton("Button five");
fiveButton.mousePressed(() => classifier.addImage(video, 'five'))
trainButton = sketch.createButton("Train");
trainButton.mousePressed(() => classifier.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)
}
})