new ml5.setBackend

shiffman · shiffman · commit d7cdb963afd1 · 2023-08-20T21:20:42.000-04:00
diff --git a/examples/NeuralNetwork-color-classifier/sketch.js b/examples/NeuralNetwork-color-classifier/sketch.js
@@ -20,6 +20,11 @@ let label = "training";
 
 function setup() {
   createCanvas(640, 240);
+
+  // For this example to work across all browsers
+  // "webgl" or "cpu" needs to be set as the backend
+  ml5.setBackend("webgl");
+
   rSlider = createSlider(0, 255, 255).position(10, 20);
   gSlider = createSlider(0, 255, 0).position(10, 40);
   bSlider = createSlider(0, 255, 0).position(10, 60);
diff --git a/examples/NeuralNetwork-mouse-gesture/index.html b/examples/NeuralNetwork-mouse-gesture/index.html
@@ -4,7 +4,7 @@
     <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>ml5.js Neural Network Color Classifier</title>
+    <title>ml5.js Neural Network Gesture 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>
diff --git a/examples/NeuralNetwork-mouse-gesture/sketch.js b/examples/NeuralNetwork-mouse-gesture/sketch.js
@@ -17,6 +17,10 @@ let start, end;
 
 function setup() {
   createCanvas(640, 240);
+  // For this example to work across all browsers
+  // "webgl" or "cpu" needs to be set as the backend
+  ml5.setBackend("webgl");
+
   // Step 2: set your neural network options
   let options = {
     task: "classification",
diff --git a/examples/NeuroEvolution-flappy-bird/sketch.js b/examples/NeuroEvolution-flappy-bird/sketch.js
@@ -3,7 +3,9 @@ let pipes = [];
 
 function setup() {
   createCanvas(640, 240);
-  ml5.tf.setBackend("cpu");
+  // cpu is higher performance for tiny neural networks like in this example
+  ml5.setBackend("cpu");
+
   for (let i = 0; i < 200; i++) {
     birds[i] = new Bird();
   }
diff --git a/examples/NeuroEvolution-sensors/index.html b/examples/NeuroEvolution-sensors/index.html
@@ -4,14 +4,14 @@
     <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>ml5.js NeuroEvolution Steering</title>
+    <title>ml5.js NeuroEvolution Sensors</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="sensor.js"></script>
     <script src="food.js"></script>
-    <script src="vehicle.js"></script>
+    <script src="sensor.js"></script>
+    <script src="creature.js"></script>
     <script src="sketch.js"></script>
   </body>
 </html>
diff --git a/examples/NeuroEvolution-sensors/sketch.js b/examples/NeuroEvolution-sensors/sketch.js
@@ -1,17 +1,26 @@
 let bloops = [];
 let timeSlider;
+let restartButton;
 let food = [];
 
 function setup() {
   createCanvas(640, 240);
-  ml5.tf.setBackend("cpu");
+  // cpu is higher performance for tiny neural networks like in this example
+  ml5.setBackend("cpu");
+  restart();
+  restartButton = createButton("restart").mousePressed(restart);
+  timeSlider = createSlider(1, 20, 1);
+}
+
+function restart() {
+  bloops = [];
   for (let i = 0; i < 20; i++) {
     bloops[i] = new Creature(random(width), random(height));
   }
+  food = [];
   for (let i = 0; i < 8; i++) {
     food[i] = new Food();
   }
-  timeSlider = createSlider(1, 20, 1);
 }
 
 function draw() {
diff --git a/src/NeuralNetwork/index.js b/src/NeuralNetwork/index.js
@@ -113,7 +113,6 @@ class DiyNeuralNetwork {
    * @param {*} callback
    */
   init(callback) {
-    tf.setBackend("cpu");
     // check if the a static model should be built based on the inputs and output properties
     if (this.options.neuroEvolution === true) {
       this.createLayersNoTraining();
