Changing colors to rainbow colors

.gitattributes

@@ -0,0 +1,12 @@
+* text=auto
+*.js text
+*.html text
+*.css text
+*.txt text
+*.json text
+*.md text
+*.yml text
+
+#MNIST data
+*idx3-ubyte binary
+*idx1-ubyte binary

.gitignore

@@ -1,2 +1,4 @@
 .DS_Store
 node_modules
+*\# # Emacs cruft
+*~ # Emacs cruft

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 The Coding Train
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,12 +1,35 @@
-# Toy-Neural-Network-JS
+# Toy-Neural-Network-JS [![Build Status](https://circleci.com/gh/CodingTrain/Toy-Neural-Network-JS.png?&style=shield&circle-token=:circle-token)](https://circleci.com/gh/CodingTrain/Toy-Neural-Network-JS)
 
 Neural Network JavaScript library for Coding Train tutorials
 
-## Getting Started
+## Examples / Demos
+Here are some demos running directly in the browser:
+* [XOR problem](https://codingtrain.github.io/Toy-Neural-Network-JS/examples/xor/)
+* [Handwritten digit recognition](https://codingtrain.github.io/Toy-Neural-Network-JS/examples/mnist/)
+
+## To-Do List
+
+* [x] Redo gradient descent video about
+* [x] Delta weight formulas, connect to "mathematics of gradient" video
+* [x] Implement gradient descent in library / with code
+* [x] XOR coding challenge [live example](https://codingtrain.github.io/Toy-Neural-Network-JS/examples/xor/)
+* [ ] MNIST coding challenge [live example](https://codingtrain.github.io/Toy-Neural-Network-JS/examples/mnist/)
+    * redo this challenge
+    * cover softmax activation, cross-entropy
+    * graph cost function?
+    * only use testing data
+* [ ] Support for saving / restoring network (see [#50](https://github.com/CodingTrain/Toy-Neural-Network-JS/pull/50))
+* [ ] Support for different activation functions (see [#45](https://github.com/CodingTrain/Toy-Neural-Network-JS/pull/45), [#62](https://github.com/CodingTrain/Toy-Neural-Network-JS/pull/62))
+* [ ] Support for multiple hidden layers (see [#61](https://github.com/CodingTrain/Toy-Neural-Network-JS/pull/61))
+* [ ] Support for neuro-evolution
+    * [ ] play flappy bird (many players at once). 
+    * [ ] play pong (many game simulations at once)
+    * [ ] steering sensors (a la Jabril's forrest project!)
+* [ ] Combine with ml5 / deeplearnjs
 
-If you're looking for the original source code to match the videos [visit this repo] (https://github.com/CodingTrain/Rainbow-Code/tree/master/Courses/natureofcode/10.18-toy_neural_network)
+## Getting Started
 
-TODO
+If you're looking for the original source code to match the videos [visit this repo](https://github.com/CodingTrain/Rainbow-Code/tree/master/Courses/natureofcode/10.18-toy_neural_network)
 
 ### Prerequisites
 
@@ -53,3 +76,7 @@ We use [SemVer](http://semver.org/) for versioning. For the versions available,
 * **shiffman** - *Initial work* - [shiffman](https://github.com/shiffman)
 
 See also the list of [contributors](https://github.com/CodingTrain/Toy-Neural-Network-JS/contributors) who participated in this project.
+
+## License
+
+This project is licensed under the terms of the MIT license, see LICENSE.

examples/doodle_classification/README.md

@@ -0,0 +1 @@
+https://codingtrain.github.io/Toy-Neural-Network-JS/examples/doodle_classification/

examples/doodle_classification/dataprep.js

@@ -0,0 +1,15 @@
+function prepareData(category, data, label) {
+  category.training = [];
+  category.testing = [];
+  for (let i = 0; i < totalData; i++) {
+    let offset = i * len;
+    let threshold = floor(0.8 * totalData);
+    if (i < threshold) {
+      category.training[i] = data.bytes.subarray(offset, offset + len);
+      category.training[i].label = label;
+    } else {
+      category.testing[i - threshold] = data.bytes.subarray(offset, offset + len);
+      category.testing[i - threshold].label = label;
+    }
+  }
+}

examples/doodle_classification/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<title>doodle classifier</title>
+
+  <script src="libraries/p5.min.js"></script>
+  <script src="libraries/p5.dom.min.js"></script>
+	<script src="loadbinary.js"></script>
+	<script src="traintest.js"></script>
+	<script src="dataprep.js"></script>
+	<script src="sketch.js"></script>
+	<script src="../../lib/nn.js"></script>
+	<script src="../../lib/matrix.js"></script>
+	<style>
+	body {
+		background-color: #AAA;
+	}
+	button {
+		font-size: 24pt;
+		margin: 10px;
+	}
+	</style>
+</head>
+<body>
+	<button id="train">train</button>
+	<button id="test">test</button>
+	<button id="guess">guess</button>
+	<button id="clear">clear</button>
+</body>
+</html>

examples/doodle_classification/loadbinary.js

@@ -0,0 +1,21 @@
+p5.prototype.registerPreloadMethod('loadBytes');
+
+p5.prototype.loadBytes = function(file, callback) {
+  var self = this;
+  var data = {};
+  var oReq = new XMLHttpRequest();
+  oReq.open("GET", file, true);
+  oReq.responseType = "arraybuffer";
+  oReq.onload = function(oEvent) {
+    var arrayBuffer = oReq.response;
+    if (arrayBuffer) {
+      data.bytes = new Uint8Array(arrayBuffer);
+      if (callback) {
+        callback(data);
+      }
+      self._decrementPreload();
+    }
+  }
+  oReq.send(null);
+  return data;
+}

examples/doodle_classification/sketch.js

@@ -0,0 +1,107 @@
+const len = 784;
+const totalData = 1000;
+
+const CAT = 0;
+const RAINBOW = 1;
+const TRAIN = 2;
+
+let catsData;
+let trainsData;
+let rainbowsData;
+
+let cats = {};
+let trains = {};
+let rainbows = {};
+
+let nn;
+
+function preload() {
+  catsData = loadBytes('data/cats1000.bin');
+  trainsData = loadBytes('data/trains1000.bin');
+  rainbowsData = loadBytes('data/rainbows1000.bin');
+}
+
+
+function setup() {
+  createCanvas(280, 280);
+  background(255);
+
+  // Preparing the data
+  prepareData(cats, catsData, CAT);
+  prepareData(rainbows, rainbowsData, RAINBOW);
+  prepareData(trains, trainsData, TRAIN);
+
+  // Making the neural network
+  nn = new NeuralNetwork(784, 64, 3);
+
+  // Randomizing the data
+  let training = [];
+  training = training.concat(cats.training);
+  training = training.concat(rainbows.training);
+  training = training.concat(trains.training);
+
+  let testing = [];
+  testing = testing.concat(cats.testing);
+  testing = testing.concat(rainbows.testing);
+  testing = testing.concat(trains.testing);
+
+  let trainButton = select('#train');
+  let epochCounter = 0;
+  trainButton.mousePressed(function() {
+    trainEpoch(training);
+    epochCounter++;
+    console.log("Epoch: " + epochCounter);
+  });
+
+  let testButton = select('#test');
+  testButton.mousePressed(function() {
+    let percent = testAll(testing);
+    console.log("Percent: " + nf(percent, 2, 2) + "%");
+  });
+
+  let guessButton = select('#guess');
+  guessButton.mousePressed(function() {
+    let inputs = [];
+    let img = get();
+    img.resize(28, 28);
+    img.loadPixels();
+    for (let i = 0; i < len; i++) {
+      let bright = img.pixels[i * 4];
+      inputs[i] = (255 - bright) / 255.0;
+    }
+
+    let guess = nn.predict(inputs);
+    // console.log(guess);
+    let m = max(guess);
+    let classification = guess.indexOf(m);
+    if (classification === CAT) {
+      console.log("cat");
+    } else if (classification === RAINBOW) {
+      console.log("rainbow");
+    } else if (classification === TRAIN) {
+      console.log("train");
+    }
+
+    //image(img, 0, 0);
+  });
+
+  let clearButton = select('#clear');
+  clearButton.mousePressed(function() {
+    background(255);
+  });
+  // for (let i = 1; i < 6; i++) {
+  //   trainEpoch(training);
+  //   console.log("Epoch: " + i);
+  //   let percent = testAll(testing);
+  //   console.log("% Correct: " + percent);
+  // }
+}
+
+
+function draw() {
+  strokeWeight(8);
+  stroke(0);
+  if (mouseIsPressed) {
+    line(pmouseX, pmouseY, mouseX, mouseY);
+  }
+}

examples/doodle_classification/traintest.js

@@ -0,0 +1,41 @@
+function trainEpoch(training) {
+  shuffle(training, true);
+  //console.log(training);
+  // Train for one epoch
+  for (let i = 0; i < training.length; i++) {
+    let data = training[i];
+    let inputs = Array.from(data).map(x => x / 255);
+    let label = training[i].label;
+    let targets = [0, 0, 0];
+    targets[label] = 1;
+    // console.log(inputs);
+    // console.log(targets);
+    nn.train(inputs, targets);
+  }
+}
+
+function testAll(testing) {
+
+  let correct = 0;
+  // Train for one epoch
+  for (let i = 0; i < testing.length; i++) {
+    // for (let i = 0; i < 1; i++) {
+    let data = testing[i];
+    let inputs = Array.from(data).map(x => x / 255);
+    let label = testing[i].label;
+    let guess = nn.predict(inputs);
+
+    let m = max(guess);
+    let classification = guess.indexOf(m);
+    // console.log(guess);
+    // console.log(classification);
+    // console.log(label);
+
+    if (classification === label) {
+      correct++;
+    }
+  }
+  let percent = 100 * correct / testing.length;
+  return percent;
+
+}

examples/mnist/file.txt

@@ -0,0 +1,3 @@
+on
+tw
+th

examples/mnist/index.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<title>mnist</title>
+
+  <script src="libraries/p5.min.js"></script>
+  <script src="libraries/p5.dom.min.js"></script>
+	<script src="mnist.js"></script>
+	<script src="sketch.js"></script>
+	<script src="../../lib/nn.js"></script>
+	<script src="../../lib/matrix.js"></script>
+
+	<style>
+
+		body {
+			font-size:30pt;
+		}
+		.correct {
+			color: #00CC00
+		}
+		.wrong {
+			color: #CC0000
+		}
+
+
+	</style>
+
+
+
+
+</head>
+<body>
+
+	<div id="container"></div>
+
+	<p id="info">
+
+		<!-- Label: <span id="label"></span><br/>
+		Guess: <span id="guess"></span><br/> -->
+		<br/>
+		Testing: <span id="percent"></span><br/>
+		<br/>
+		User Guess: <span id="user_guess"></span>
+	</p>
+
+</body>
+</html>