Generic Neural Net Example (#164)

* added example

* added co2 net - WORK IN PROGRESS

* updated model and loaded data from model

* fix unNormalize

* refactored code

* added axes

* added axes

* added message about log transform

* added legend in html

* adds placeholder for titanic example

* adds data, constructor, and laodData

* adds normalize data function

* adds training function

* updates example

* adds neural network training

* Speculative Ideas about Titanic Example (#187)

* speculative ideas with example

* since it's classification is there a way to mirror other ml5 classification examples?

* refactor of titanic example

* Adds titanic example to match diy-nn-with-data (#188)

* adds experimental csv and specified string as output

* working with titanic

* update examples - TODO: feed in normalized vals for titanic inputs

* adds simple regression example placeholder

* adds simple regression example

* comments train with options

* moves batchSize and epoch options

* change to .classify()

* updates co2 training sketch with predict vals from 0 - 1

* update to classify

* updates basic -- broken

* changes inputs and fixes undef.

* changes data in basic

* whitespace adjustments

* some cleanup and ideas for titanic example

* speculative port of color classifier example

* rm shuffle()

* updates color classifier example

* change vals to arrays in .addData()

* work on neural network color classifier (#190)

* small adjustments for testing code with ml5js/ml5-library#574

* example cleanup todos

* updates color classifier example to reflect current generic nn

* Updating Titanic Example (#191)

* redoing titanic example with final cleaned data from @lydiajessup

* training is working but issue with predict and passing in strings

* working with manually encoding of inputs to predict()

* updates titanic sketch

* porting tf.js XOR example from coding train challenge (#192)

* porting tf.js XOR example from coding train challenge

* adding learning rate

* noting hiddenUnits variable

* updating color classifier see: ml5js/ml5-library#581

* refactor titanic example

* using label directly

* logs not loss

* trying values

* moving sketch.js

* update simple regression

* updates regression sketch

* update co2 example

* update to use results.outputs

* Refactors examples to match diy-nn-refactor branch (#195)

* neural noteplayer example

* example inspired by Eyeo 2019 Rebecca Fiebrink talk

* rename musical mouse example

* example tweaks and oscillator

* adds refactoring examples

* updates examples based in refactor

* updates xor"

* rm unused co2net

* updates examples for regression

* updates musical note example

* adds experimental normalizationOptions

* adds example of multi layered network

* changes activations

* adds simple classification example

* changes .normalize() to .normalizeData()

* updates all examples to handle array of .predict() or .classify() output

* Pass over DIY interactive data examples (#198)

* neural noteplayer example

* example inspired by Eyeo 2019 Rebecca Fiebrink talk

* rename musical mouse example

* example tweaks and oscillator

* musical face example

* different interface for face example

* mouse and pixels cleanup

* musical face adjust to new API

* code comments

* low res pixel comments and naming

* Clean-up of interactive neural network examples (#201)

* neural noteplayer example

* example inspired by Eyeo 2019 Rebecca Fiebrink talk

* rename musical mouse example

* example tweaks and oscillator

* musical face example

* different interface for face example

* mouse and pixels cleanup

* musical face adjust to new API

* code comments

* low res pixel comments and naming

* comments and cleanup for face example

* normalize automatically face

* DIY Neural Network mouseXY classification example (#199)

* neural noteplayer example

* example inspired by Eyeo 2019 Rebecca Fiebrink talk

* rename musical mouse example

* example tweaks and oscillator

* musical face example

* different interface for face example

* mouse and pixels cleanup

* musical face adjust to new API

* code comments

* attempting DIY classification example

* ?

* fixes outputs and changes function to .classify()

* posenet classification example

* rm console.log

* rm withExpressions in musical face

* [diy nn] Updates examples to use labels for inputs/outputs (#205)

* updates musical mouse and xy classifier with specific input/output labels

* update titles

* update text in co2net

* adds load data function (#206)

* adds xOR example with multiPredict (#207)

* [WIP] DIY NN - examples for loading model (#210)

* adds loadModel example

* updates example showcasing issues

* updated example to reflect current ml5-lib temp fix

* Updates model_load example (#212)

* adds loadModel example

* updates example showcasing issues

* updated example to reflect current ml5-lib temp fix

* updates loading model example

p5js/NeuralNetwork/NeuralNetwork_Simple-Classification/index.html

@@ -0,0 +1,19 @@
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>Neural Network</title>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
+  <script src="http://localhost:8080/ml5.js" type="text/javascript"></script>
+</head>
+
+<body>
+  <h1>Neural Network Simple Classification</h1>
+  <label for="avatar">Load Model:</label>
+  <input type="file" id="load" multiple />
+  <script src="sketch.js"></script>
+</body>
+
+</html>

p5js/NeuralNetwork/NeuralNetwork_Simple-Classification/sketch.js

@@ -0,0 +1,56 @@
+// Copyright (c) 2018 ml5
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+/* ===
+ml5 Example
+Image classification using MobileNet and p5.js
+This example uses a callback pattern to create the classifier
+=== */
+let nn;
+
+const options = {
+  inputs: 1,
+  outputs: 2,
+  task: 'classification',
+  debug: true
+}
+
+function setup(){
+  createCanvas(400, 400);
+  nn = ml5.neuralNetwork(options);
+
+
+  console.log(nn)
+  createTrainingData();
+  nn.normalizeData();
+
+  const trainingOptions={
+    batchSize: 24,
+    epochs: 32
+  }
+
+  nn.train(trainingOptions,finishedTraining); // if you want to change the training options
+  // nn.train(finishedTraining); // use the default training options
+}
+
+function finishedTraining(){
+
+  nn.classify([300], function(err, result){
+    console.log(result);
+  })
+
+}
+
+function createTrainingData(){
+    for(let i = 0; i < 400; i++){
+      if(i%2 === 0){
+        const x = random(0, width/2);
+        nn.addData( [x],  ['left'])
+      } else {
+        const x = random(width/2, width);
+        nn.addData( [x],  ['right'])
+      }
+    }
+}

p5js/NeuralNetwork/NeuralNetwork_Simple-Regression/index.html

@@ -0,0 +1,19 @@
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>Neural Network Simple Regression</title>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
+  <script src="http://localhost:8080/ml5.js" type="text/javascript"></script>
+</head>
+
+<body>
+  <h1>Neural Network Simple Regression</h1>
+  <label for="avatar">Load Model:</label>
+  <input type="file" id="load" multiple />
+  <script src="sketch.js"></script>
+</body>
+
+</html>

p5js/NeuralNetwork/NeuralNetwork_Simple-Regression/sketch.js

@@ -0,0 +1,66 @@
+// Copyright (c) 2018 ml5
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+/* ===
+ml5 Example
+Image classification using MobileNet and p5.js
+This example uses a callback pattern to create the classifier
+=== */
+let nn;
+
+const options = {
+  inputs: 1,
+  outputs: 1,
+  debug: true
+}
+
+function setup(){
+  createCanvas(400, 400);
+  nn = ml5.neuralNetwork(options);
+
+
+  console.log(nn)
+  createTrainingData();
+  nn.normalizeData();
+
+  const trainingOptions={
+    batchSize: 24,
+    epochs: 10
+  }
+
+  nn.train(trainingOptions,finishedTraining); // if you want to change the training options
+  // nn.train(finishedTraining); // use the default training options
+}
+
+async function finishedTraining(){
+
+  await Promise.all(
+    [...new Array(400).fill(null).map( async (item, idx) =>  {
+      let results = await nn.predict([idx]);
+      let prediction = results[0]
+      let x = idx
+      let y = prediction.value
+      fill(255, 0, 0);
+      rectMode(CENTER);
+      rect(x, y, 10, 10);
+    })]
+  )
+
+
+}
+
+function createTrainingData(){
+  for(let i = 0; i < width; i+=10){
+    const iters = floor(random(5, 20))
+    const spread = 50;
+    for(let j = 0; j < iters; j++){
+      let data = [i, height - i + floor(random(-spread, spread))]
+      fill(0, 0, 255);
+      ellipse(data[0], data[1], 10, 10)
+      nn.data.addData([data[0]], [data[1]])
+    }
+
+  }
+}

p5js/NeuralNetwork/NeuralNetwork_XOR/index.html

@@ -0,0 +1,21 @@
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>XOR - Neural Network</title>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
+  <script src="http://localhost:8080/ml5.js" type="text/javascript"></script>
+
+  <style>
+
+  </style>
+</head>
+
+<body>
+  <h1>XOR - Neural Network</h1>
+  <script src="sketch.js"></script>
+</body>
+
+</html>

p5js/NeuralNetwork/NeuralNetwork_XOR/sketch.js

@@ -0,0 +1,92 @@
+// Porting XOR with tf.js to ml5!
+// https://youtu.be/N3ZnNa01BPM
+
+let model;
+let resolution = 20;
+let cols;
+let rows;
+
+function setup() {
+  createCanvas(400, 400);
+  cols = width / resolution;
+  rows = height / resolution;
+
+  let index = 0;
+  for (let i = 0; i < cols; i++) {
+    for (let j = 0; j < rows; j++) {
+      let br = 255; //y_values[index] * 255
+      fill(br);
+      rect(i * resolution, j * resolution, resolution, resolution);
+      fill(255 - br);
+      textSize(8);
+      textAlign(CENTER, CENTER);
+      text(nf(0.5, 1, 2), i * resolution + resolution / 2, j * resolution + resolution / 2)
+      //text(nf(y_values[index], 1, 2), i * resolution + resolution / 2, j * resolution + resolution / 2)
+      index++;
+    }
+  }
+
+  let options = {
+    inputs: 2,
+    outputs: 1,
+    learningRate: 0.25,
+    debug:true
+    // hiddenUnits: 2
+  }
+  model = ml5.neuralNetwork(options);
+
+  //model = ml5.neuralNetwork(2, 1);
+  model.addData([0, 0], [0]);
+  model.addData([1, 0], [1]);
+  model.addData([0, 1], [1]);
+  model.addData([1, 1], [0]);
+
+  model.normalizeData();
+  model.train({ epochs: 50 }, whileTraining, finishedTraining);
+
+}
+
+
+function whileTraining(epoch, logs) {
+  console.log(`Epoch: ${epoch} - loss: ${logs.loss.toFixed(2)}`);
+}
+
+function finishedTraining() {
+  // console.log('done!');
+  // TODO: Support prediction on multiple rows of input data
+  let xs = [];
+  for (let i = 0; i < cols; i++) {
+    for (let j = 0; j < rows; j++) {
+      let x1 = i / cols;
+      let x2 = j / rows;
+      xs.push([x1, x2]);
+    }
+  }
+  model.predictMultiple(xs, gotResults);
+  // model.predict([1, 0], gotResults);
+}
+
+function gotResults(error, results) {
+  background(0);
+  if(error){
+    console.log(err)
+    return
+  }
+  // console.log(results);
+  let index = 0;
+  for (let i = 0; i < cols; i++) {
+    for (let j = 0; j < rows; j++) {
+      let br = results[index][0].value * 255; //y_values[index] * 255
+      fill(br);
+      rect(i * resolution, j * resolution, resolution, resolution);
+      fill(255 - br);
+      textSize(8);
+      textAlign(CENTER, CENTER);
+      text(nf(0.5, 1, 2), i * resolution + resolution / 2, j * resolution + resolution / 2)
+      text(nf(results[index][0].value, 1, 2), i * resolution + resolution / 2, j * resolution + resolution / 2)
+      index++;
+    }
+  }
+
+  // finishedTraining()
+}

p5js/NeuralNetwork/NeuralNetwork_basics/index.html

@@ -0,0 +1,19 @@
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>Neural Network</title>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
+  <script src="http://localhost:8080/ml5.js" type="text/javascript"></script>
+</head>
+
+<body>
+  <h1>Neural Network</h1>
+  <label for="avatar">Load Model:</label>
+  <input type="file" id="load" multiple />
+  <script src="sketch.js"></script>
+</body>
+
+</html>

p5js/NeuralNetwork/NeuralNetwork_basics/model/model.json

@@ -0,0 +1 @@
+{"modelTopology":{"class_name":"Sequential","config":[{"class_name":"Dense","config":{"units":2,"activation":"tanh","use_bias":true,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"bias_initializer":{"class_name":"Zeros","config":{}},"kernel_regularizer":null,"bias_regularizer":null,"activity_regularizer":null,"kernel_constraint":null,"bias_constraint":null,"name":"dense_Dense1","trainable":true,"batch_input_shape":[null,3],"dtype":"float32"}},{"class_name":"Dense","config":{"units":2,"activation":"tanh","use_bias":true,"kernel_initializer":{"class_name":"VarianceScaling","config":{"scale":1,"mode":"fan_avg","distribution":"normal","seed":null}},"bias_initializer":{"class_name":"Zeros","config":{}},"kernel_regularizer":null,"bias_regularizer":null,"activity_regularizer":null,"kernel_constraint":null,"bias_constraint":null,"name":"dense_Dense2","trainable":true}}],"keras_version":"tfjs-layers 1.1.2","backend":"tensor_flow.js"},"weightsManifest":[{"paths":["./model.weights.bin"],"weights":[{"name":"dense_Dense1/kernel","shape":[3,2],"dtype":"float32"},{"name":"dense_Dense1/bias","shape":[2],"dtype":"float32"},{"name":"dense_Dense2/kernel","shape":[2,2],"dtype":"float32"},{"name":"dense_Dense2/bias","shape":[2],"dtype":"float32"}]}]}

p5js/NeuralNetwork/NeuralNetwork_basics/model/model.weights.bin

@@ -0,0 +1 @@
+�lٽx����&?[�>^v��DR��g�=�a�=sa>yy?p�>�Ԗ?cf<
f>