just one letters example

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

Hide file tree

Showing 20 changed files with 40 additions and 146 deletions.
diff --git a/examples/examples.json b/examples/examples.json
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters/index.html b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters/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_Letters/sketch.js b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters/sketch.js
@@ -5,85 +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'
- })
+ 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' });
  }
-
- testA = loadImage(`images/A_test.png`)
-
+ 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];
- // get back the image array
- item.image.loadPixels()
- const imageArray = Array.from(item.image.pixels);
- const labels = item.label;
- nn.addData({pixelArray:imageArray}, {label: labels});
+ for (let i = 0; i < images.length; i += 1) {
+ nn.addData({ image: images[i].image }, { label: images[i].label });
  }
 
- // normalize the data
+ // 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");
-
- testA.loadPixels();
- const test = Array.from(testA.pixels);
- nn.classify([test], gotResults)
-
+ console.log('finished training');
+ // 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
+ return;
  }
- console.log(result);
-}
+ console.log(results);
+ const percent = 100 * results[0].confidence;
+ createP(`${results[0].label} ${nf(percent, 2, 1)}%`);
+}
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/A_01.png b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/A_01.png
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/A_02.png b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/A_02.png
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/A_03.png b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/A_03.png
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/A_04.png b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/A_04.png
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/A_05.png b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/A_05.png
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/A_06.png b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/A_06.png
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/A_07.png b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/A_07.png
diff --git a/...les/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/A_test.png b/...les/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/A_test.png
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/B_01.png b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/B_01.png
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/B_02.png b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/B_02.png
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/B_03.png b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/B_03.png
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/B_04.png b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/B_04.png
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/B_05.png b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/B_05.png
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/B_06.png b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/B_06.png
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/B_07.png b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/images/B_07.png
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/index.html b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/index.html
diff --git a/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/sketch.js b/examples/p5js/NeuralNetwork/NeuralNetwork_ImageClassifier_Letters2/sketch.js