cnn example cleanup

ml5js · Nov 4, 2020 · 4655616 · 4655616
1 parent 2c954af
commit 4655616
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 54 deletions.
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/index.html b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/index.html
@@ -1,17 +1,15 @@
 <html>
-
-<head>
- <meta charset="UTF-8">
- <title>Neural Network</title>
-
- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
- <script src="http:https://localhost:8080/ml5.js" type="text/javascript"></script>
-</head>
-
-<body>
- <h1>Neural Network</h1>
- <script src="sketch.js"></script>
-</body>
-
-</html>
+ <head>
+ <meta charset="UTF-8" />
+ <title>Neural Network</title>
+
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
+ <script src="http:https://localhost:8080/ml5.js" type="text/javascript"></script>
+ </head>
+
+ <body>
+ <h1>Convolutional Neural Network</h1>
+ <script src="sketch.js"></script>
+ </body>
+</html>
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/sketch.js b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/sketch.js
@@ -5,84 +5,64 @@
 
 /* ===
 ml5 Example
-Image classification using MobileNet and p5.js
+Image classification using Convolutional Neural Network
 This example uses a callback pattern to create the classifier
 === */
+
 let nn;
 const IMAGE_WIDTH = 64;
 const IMAGE_HEIGHT = 64;
 const IMAGE_CHANNELS = 4;
 
-let images;
+const images = [];
 let testA;
 
 function preload() {
- images = [];
  for (let i = 1; i < 7; i += 1) {
  const a = loadImage(`images/A_0${i}.png`);
  const b = loadImage(`images/B_0${i}.png`);
- images.push({
- image: a,
- label: 'a'
- });
- images.push({
- image: b,
- label: 'b'
- });
+ images.push({ image: a, label: 'A' });
+ images.push({ image: b, label: 'B' });
  }
-
  testA = loadImage(`images/A_test.png`);
 }
 
 function setup() {
+ createCanvas(128, 128);
+ image(testA, 0, 0, width, height);
+
  const options = {
+ inputs: [IMAGE_WIDTH, IMAGE_HEIGHT, IMAGE_CHANNELS],
  task: 'imageClassification',
  debug: true,
- inputs: [IMAGE_WIDTH, IMAGE_HEIGHT, IMAGE_CHANNELS]
  };
 
  // construct the neural network
  nn = ml5.neuralNetwork(options);
 
  // add data
  for (let i = 0; i < images.length; i += 1) {
- const item = images[i];
- const labels = item.label;
- nn.addData({
- pixelArray: item.image
- }, {
- label: labels
- });
+ nn.addData({ image: images[i].image }, { label: images[i].label });
  }
 
  // normalize data
  nn.normalizeData();
 
- // train
- const TRAINING_OPTIONS = {
- batchSize: 2,
- epochs: 10
- };
- nn.train(TRAINING_OPTIONS, finishedTraining);
+ nn.train({ epochs: 20 }, finishedTraining);
 }
 
 function finishedTraining() {
  console.log('finished training');
- // method 1: you can pass in an object with a matching key and the HTMLImageElement
- nn.classify({
- pixelArray: testA
- },
- gotResults
- );
-
- // method 2: you can pass in an array holding the HTMLImageElement
- nn.classify([testA], gotResults);
+ // method 1: you can pass in an object with a matching key and the p5 image
+ nn.classify({ image: testA }, gotResults);
 }
 
-function gotResults(err, result) {
+function gotResults(err, results) {
  if (err) {
  console.log(err);
  return;
  }
- console.log(result);
-}
+ console.log(results);
+ const percent = 100 * results[0].confidence;
+ createP(`${results[0].label} ${nf(percent, 2, 1)}%`);
+}