Getting started with building ML-powered web applications.

Reference sheet & Additional Resources

Head to editor.p5js.org to get started.

<script src="https://unpkg.com/ml5@1/dist/ml5.js"></script>

let data = [
  { r: 255, g: 0, b: 0, color: "red-ish" },
  { r: 254, g: 0, b: 0, color: "red-ish" },
  { r: 253, g: 0, b: 0, color: "red-ish" },
  { r: 0, g: 255, b: 0, color: "green-ish" },
  { r: 0, g: 254, b: 0, color: "green-ish" },
  { r: 0, g: 253, b: 0, color: "green-ish" },
  { r: 0, g: 0, b: 255, color: "blue-ish" },
  { r: 0, g: 0, b: 254, color: "blue-ish" },
  { r: 0, g: 0, b: 253, color: "blue-ish" },
];

let classifier;

let data = [
  { r: 255, g: 0, b: 0, color: "red-ish" },
  { r: 254, g: 0, b: 0, color: "red-ish" },
  { r: 253, g: 0, b: 0, color: "red-ish" },
  { r: 0, g: 255, b: 0, color: "green-ish" },
  { r: 0, g: 254, b: 0, color: "green-ish" },
  { r: 0, g: 253, b: 0, color: "green-ish" },
  { r: 0, g: 0, b: 255, color: "blue-ish" },
  { r: 0, g: 0, b: 254, color: "blue-ish" },
  { r: 0, g: 0, b: 253, color: "blue-ish" },
];

function setup() {
  createCanvas(400, 400);
  ml5.setBackend("webgl");
  let options = {
    task: "classification",
    debug: true
  }
  classifier = ml5.neuralNetwork(options);
  
  for(let i = 0; i < data.length; i++){
    let item = data[i];
    let inputs = [item.r, item.g, item.b];
    let output = [item.color];
    classifier.addData(inputs, outputs)
  }
}

function draw() {
  background(220);
}

This workshop was based on ml5.js's documentation.

https://docs.google.com/presentation/d/13Avu85G72dxnQ4XYkYu-7DEAo4s_VTEMAZ8-jEnIpz4/edit?usp=sharing