simple interface for color classifier

shiffman · shiffman · commit a9c47de1bdf9 · 2023-07-23T10:30:40.000-04:00
diff --git a/examples/NeuralNetwork/index.html b/examples/NeuralNetwork/index.html
@@ -4,10 +4,11 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>ml5.js Neural Network Color Classifier</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
     <script src="../../dist/ml5.js"></script>
   </head>
   <body>
-    <script src="script.js"></script>
+    <script src="sketch.js"></script>
   </body>
 </html>
diff --git a/examples/NeuralNetwork/script.js b/examples/NeuralNetwork/script.js
diff --git a/examples/NeuralNetwork/sketch.js b/examples/NeuralNetwork/sketch.js
@@ -0,0 +1,84 @@
+// Step 1: load data or create some data
+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 classifer;
+let r = 255;
+let g = 0;
+let b = 0;
+let rSlider, gSlider, bSlider;
+let label = "training";
+
+function setup() {
+  createCanvas(640, 240);
+  rSlider = createSlider(0, 255, 255).position(10, 20);
+  gSlider = createSlider(0, 255, 0).position(10, 40);
+  bSlider = createSlider(0, 255, 0).position(10, 60);
+
+  // Step 2: set your neural network options
+  let options = {
+    task: "classification",
+    debug: true,
+  };
+
+  // Step 3: initialize your neural network
+  classifier = ml5.neuralNetwork(options);
+
+  // Step 4: add data to the neural network
+  for (let i = 0; i < data.length; i++) {
+    let item = data[i];
+    let inputs = [item.r, item.g, item.b];
+    let outputs = [item.color];
+    classifier.addData(inputs, outputs);
+  }
+
+  // Step 5: normalize your data;
+  classifier.normalizeData();
+
+  // Step 6: train your neural network
+  const trainingOptions = {
+    epochs: 32,
+    batchSize: 12,
+  };
+  classifier.train(trainingOptions, finishedTraining);
+}
+// Step 7: use the trained model
+function finishedTraining() {
+  classify();
+}
+
+// Step 8: make a classification
+function classify() {
+  const input = [r, g, b];
+  classifier.classify(input, handleResults);
+}
+
+function draw() {
+  r = rSlider.value();
+  g = gSlider.value();
+  b = bSlider.value();
+  background(r, g, b);
+  textAlign(CENTER, CENTER);
+  textSize(64);
+  text(label, width / 2, height / 2);
+}
+
+// Step 9: define a function to handle the results of your classification
+function handleResults(error, results) {
+  if (error) {
+    console.error(error);
+    return;
+  }
+  label = results[0].label;
+  // console.log(results); // {label: 'red', confidence: 0.8};
+  classify();
+}
