ml5js · joeyklee · Apr 17, 2020 · Mar 29, 2020 · Apr 5, 2020 · Apr 17, 2020
diff --git a/examples/NeuralNetwork/NeuralNetwork_Interactive_Regression/index.html b/examples/NeuralNetwork/NeuralNetwork_Interactive_Regression/index.html
@@ -0,0 +1,39 @@
+<head>
+  <meta charset="UTF-8">
+  <title>Interactive Regression Example - Neural Network</title>
+
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
+  <script src="http://localhost:8080/ml5.js" type="text/javascript"></script>
+
+  <style></style>
+</head>
+
+<body>
+  <h1>Interactive Regression Example - Neural Network</h1>
+  <h3>Instructions</h3>
+
+  <ol>
+    <li>Add data by clicking inside the canvas</li>
+    <li>Edit learning rate = amount that the weights are updated during training</li>
+    <li>Edit number of hidden units = number of hidden units in dense layer</li>
+    <li>Edit number of training epochs = number of iterations over entire dataset</li>
+    <li>Edit number of batch size = number of data points to work through before updating the internal model parameters</li>
+    <li>Click on the Train button</li>
+  </ol>
+
+  <form onsubmit="return false;">
+    <label for="neuralNetworkLearningRate">learning rate: </label>
+    <input type="number" name="neuralNetworkLearningRate" id="neuralNetworkLearningRate" value=0.25 step="0.01"><br>
+    <label for="neuralNetworkHiddenUnits">number of hidden units: </label>
+    <input type="number" name="neuralNetworkHiddenUnits" id="neuralNetworkHiddenUnits" value=20><br>
+    <label for="trainEpochs">number train epochs: </label>
+    <input type="number" name="trainEpochs" id="trainEpochs" value=100><br>
+    <label for="trainBatchSize">number batch size: </label>
+    <input type="number" name="trainBatchSize" id="trainBatchSize" value=64><br>
+    <button id="startTraining">Train</button>
+  </form>
+
+  <script src="sketch.js"></script>
+</body>
+
+</html>
diff --git a/examples/NeuralNetwork/NeuralNetwork_Interactive_Regression/sketch.js b/examples/NeuralNetwork/NeuralNetwork_Interactive_Regression/sketch.js
@@ -0,0 +1,91 @@
+let trainData = [];
+let neuralNetwork;
+
+// selectors for inputs and button
+const inputNeuralNetworkLearningRate = document.getElementById('neuralNetworkLearningRate');
+const inputNeuralNetworkHiddenUnits = document.getElementById('neuralNetworkHiddenUnits');
+const inputTrainEpochs = document.getElementById('trainEpochs');
+const inputTrainBatchSize = document.getElementById('trainBatchSize');
+const buttonStartTrain = document.getElementById('startTraining');
+
+const canvasSize = 800;
+
+// options for NeuralNetwork
+const options = {
+  inputs: 1,
+  outputs: 1,
+  debug: true,
+  task: 'regression',
+  learningRate: 0.25,
+  hiddenUnits: 20,
+}
+
+// training params
+const trainParams = {
+  validationSplit: 0,
+  epochs: 100,
+  batchSize: 64,
+}
+
+buttonStartTrain.addEventListener("click", () => {
+  // get input data
+  options.learningRate = parseFloat(inputNeuralNetworkLearningRate.value);
+  options.hiddenUnits = parseInt(inputNeuralNetworkHiddenUnits.value);
+  trainParams.epochs = parseInt(inputTrainEpochs.value);
+  trainParams.batchSize = parseInt(inputTrainBatchSize.value);
+
+  // and start the training
+  startTraining();
+});
+
+function setup() {
+  createCanvas(canvasSize, canvasSize);
+  background(220);
+}
+
+function mouseClicked() {
+  if (mouseY > 50) {
+    circle(mouseX, mouseY, 10);
+    trainData.push([mouseX, mouseY]);
+  }
+}
+
+function startTraining() {
+  // check if train data
+  if (trainData.length == 0) {
+    alert('Please add some training data by clicking inside the canvas');
+    return;
+  }
+
+  neuralNetwork = ml5.neuralNetwork(options);
+
+  // add training data
+  for (let i = 0; i < trainData.length; i++) {
+    neuralNetwork.addData([trainData[i][0]], [trainData[i][1]]);
+  }
+
+  neuralNetwork.normalizeData();
+  neuralNetwork.train(trainParams, doneTraining);
+}
+
+function doneTraining() {
+  // build x-bases to calculate corresponding y-values. We take every x-value possible of the canvas to make it look like a line
+  xMany = [];
+  for (x = 0; x <= canvasSize; x++) {
+    xMany.push([x]);
+  }
+
+  // predict corresponding y-values and show as circle
+  neuralNetwork.predictMultiple(xMany, (error, results) => {
+    if (error) {
+      console.log(error); 
+    } else {
+      console.log(results);
+      for (let i = 0; i < results.length; i++){
+        x = xMany[i][0];
+        y = results[i][0]['value'];
+        circle(x, y, 1);
+      }
+    }
+  });
+}