model = ml5.neuralNetwork({
inputs: ['x', 'y'],
outputs: ['label'],
task: 'classification',
debug: false,
learningRate: undefined
})
function onCanvasPressed(e) {
const input = { x: state.mouse.x, y: state.mouse.y }
if (state.modelTrained) {
// Model has been trained - classify the input
model.classify(input, (error, results = []) => {
if (error) console.error(error)
else mergeState({ circles: [...state.circles, { ...input, ...results[0] }] })
})
} else {
// Model has not been trained - add data
const target = { label: state.label }
model.addData(input, target)
mergeState({ circles: [...state.circles, { ...input, ...target }] })
}
}
function onTrainModelButtonPressed() {
const onTraining = (e, l) => mergeState({ loss: l.loss });
const onComplete = () => mergeState({ modelTrained: true });
model.normalizeData();
model.train({ epochs: 200 }, onTraining, onComplete);
}
function onSaveDataButtonPressed() {
model.saveData('model_data')
}
function onSaveModelButtonPressed() {
model.save()
}
async function onLoadDataButtonPressed() {
const { data } = await dataFile.json()
data.forEach(({ xs: input, ys: target }) => {
model.addData(input, target)
mergeState({ circles: [...state.circles, { ...input, ...target }] })
})
}
async function onLoadModelButtonPressed() {
const onLoaded = () => mergeState({ modelTrained: true });
model.load({
model: await modelFile.url(),
metadata: await modelMetaFile.url(),
weights: await weightsFile.url()
}, onLoaded)
}
viewof modelFile = Inputs.file({ label: "Model File", accept: ".json", required: false })
viewof modelMetaFile = Inputs.file({ label: "Model Meta File", accept: ".json", required: false })
viewof weightsFile = Inputs.file({ label: "Weights File", accept: ".bin", required: false })
import { createML5, listenMousedown, listenMouseover, listenKeyup, createButton } from "@bberak/utils"
ml5 = createML5('0.4.2')
mutable state = ({ label: 'blue', mouse: { x: 0, y: 0 }, circles: [], modelTrained: false, loss: undefined })
function mergeState(other) {
mutable state = { ...state, ...other }
}
listenMousedown(canvas, onCanvasPressed)
listenMouseover(canvas, e => {
mergeState({ mouse: { x: e.offsetX, y: e.offsetY } });
})
listenKeyup(document, e => {
console.log(e)
switch (e.key) {
case 'r':
mergeState({ label: 'red' });
return;
case 'g':
mergeState({ label: 'green' });
return;
case 'b':
mergeState({ label: 'blue' });
return;
}
})
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.
