[ { "path": "LICENSE", "content": "The MIT License\n\nCopyright (c) 2014 Andrej Karpathy\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n\n" }, { "path": "Readme.md", "content": "\n# ConvNetJS\n\nConvNetJS is a Javascript implementation of Neural networks, together with nice browser-based demos. It currently supports:\n\n- Common **Neural Network modules** (fully connected layers, non-linearities)\n- Classification (SVM/Softmax) and Regression (L2) **cost functions**\n- Ability to specify and train **Convolutional Networks** that process images\n- An experimental **Reinforcement Learning** module, based on Deep Q Learning\n\nFor much more information, see the main page at [convnetjs.com](http://convnetjs.com)\n\n**Note**: I am not actively maintaining ConvNetJS anymore because I simply don't have time. I think the npm repo might not work at this point.\n\n## Online Demos\n- [Convolutional Neural Network on MNIST digits](http://cs.stanford.edu/~karpathy/convnetjs/demo/mnist.html)\n- [Convolutional Neural Network on CIFAR-10](http://cs.stanford.edu/~karpathy/convnetjs/demo/cifar10.html)\n- [Toy 2D data](http://cs.stanford.edu/~karpathy/convnetjs/demo/classify2d.html)\n- [Toy 1D regression](http://cs.stanford.edu/~karpathy/convnetjs/demo/regression.html)\n- [Training an Autoencoder on MNIST digits](http://cs.stanford.edu/~karpathy/convnetjs/demo/autoencoder.html)\n- [Deep Q Learning Reinforcement Learning demo](http://cs.stanford.edu/people/karpathy/convnetjs/demo/rldemo.html)\n- [Image Regression (\"Painting\")](http://cs.stanford.edu/~karpathy/convnetjs/demo/image_regression.html)\n- [Comparison of SGD/Adagrad/Adadelta on MNIST](http://cs.stanford.edu/people/karpathy/convnetjs/demo/trainers.html)\n\n## Example Code\n\nHere's a minimum example of defining a **2-layer neural network** and training\nit on a single data point:\n\n```javascript\n// species a 2-layer neural network with one hidden layer of 20 neurons\nvar layer_defs = [];\n// input layer declares size of input. here: 2-D data\n// ConvNetJS works on 3-Dimensional volumes (sx, sy, depth), but if you're not dealing with images\n// then the first two dimensions (sx, sy) will always be kept at size 1\nlayer_defs.push({type:'input', out_sx:1, out_sy:1, out_depth:2});\n// declare 20 neurons, followed by ReLU (rectified linear unit non-linearity)\nlayer_defs.push({type:'fc', num_neurons:20, activation:'relu'}); \n// declare the linear classifier on top of the previous hidden layer\nlayer_defs.push({type:'softmax', num_classes:10});\n\nvar net = new convnetjs.Net();\nnet.makeLayers(layer_defs);\n\n// forward a random data point through the network\nvar x = new convnetjs.Vol([0.3, -0.5]);\nvar prob = net.forward(x); \n\n// prob is a Vol. Vols have a field .w that stores the raw data, and .dw that stores gradients\nconsole.log('probability that x is class 0: ' + prob.w[0]); // prints 0.50101\n\nvar trainer = new convnetjs.SGDTrainer(net, {learning_rate:0.01, l2_decay:0.001});\ntrainer.train(x, 0); // train the network, specifying that x is class zero\n\nvar prob2 = net.forward(x);\nconsole.log('probability that x is class 0: ' + prob2.w[0]);\n// now prints 0.50374, slightly higher than previous 0.50101: the networks\n// weights have been adjusted by the Trainer to give a higher probability to\n// the class we trained the network with (zero)\n```\n\nand here is a small **Convolutional Neural Network** if you wish to predict on images:\n\n```javascript\nvar layer_defs = [];\nlayer_defs.push({type:'input', out_sx:32, out_sy:32, out_depth:3}); // declare size of input\n// output Vol is of size 32x32x3 here\nlayer_defs.push({type:'conv', sx:5, filters:16, stride:1, pad:2, activation:'relu'});\n// the layer will perform convolution with 16 kernels, each of size 5x5.\n// the input will be padded with 2 pixels on all sides to make the output Vol of the same size\n// output Vol will thus be 32x32x16 at this point\nlayer_defs.push({type:'pool', sx:2, stride:2});\n// output Vol is of size 16x16x16 here\nlayer_defs.push({type:'conv', sx:5, filters:20, stride:1, pad:2, activation:'relu'});\n// output Vol is of size 16x16x20 here\nlayer_defs.push({type:'pool', sx:2, stride:2});\n// output Vol is of size 8x8x20 here\nlayer_defs.push({type:'conv', sx:5, filters:20, stride:1, pad:2, activation:'relu'});\n// output Vol is of size 8x8x20 here\nlayer_defs.push({type:'pool', sx:2, stride:2});\n// output Vol is of size 4x4x20 here\nlayer_defs.push({type:'softmax', num_classes:10});\n// output Vol is of size 1x1x10 here\n\nnet = new convnetjs.Net();\nnet.makeLayers(layer_defs);\n\n// helpful utility for converting images into Vols is included\nvar x = convnetjs.img_to_vol(document.getElementById('some_image'))\nvar output_probabilities_vol = net.forward(x)\n```\n\n## Getting Started\nA [Getting Started](http://cs.stanford.edu/people/karpathy/convnetjs/started.html) tutorial is available on main page.\n\nThe full [Documentation](http://cs.stanford.edu/people/karpathy/convnetjs/docs.html) can also be found there.\n\nSee the **releases** page for this project to get the minified, compiled library, and a direct link to is also available below for convenience (but please host your own copy)\n\n- [convnet.js](http://cs.stanford.edu/people/karpathy/convnetjs/build/convnet.js)\n- [convnet-min.js](http://cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js)\n\n## Compiling the library from src/ to build/\nIf you would like to add features to the library, you will have to change the code in `src/` and then compile the library into the `build/` directory. The compilation script simply concatenates files in `src/` and then minifies the result.\n\nThe compilation is done using an ant task: it compiles `build/convnet.js` by concatenating the source files in `src/` and then minifies the result into `build/convnet-min.js`. Make sure you have **ant** installed (on Ubuntu you can simply *sudo apt-get install* it), then cd into `compile/` directory and run:\n\n $ ant -lib yuicompressor-2.4.8.jar -f build.xml\n\nThe output files will be in `build/`\n## Use in Node\nThe library is also available on *node.js*:\n\n1. Install it: `$ npm install convnetjs`\n2. Use it: `var convnetjs = require(\"convnetjs\");`\n\n## License\nMIT\n" }, { "path": "bower.json", "content": "{\n \"name\": \"convnetjs\",\n \"version\": \"0.0.0\",\n \"authors\": [\n \"Andrej Karpathy \"\n ],\n \"description\": \"Deep Learning in Javascript. Train Convolutional Neural Networks (or ordinary ones) in your browser.\",\n \"main\": \"build/convnet.js\",\n \"moduleType\": [\n \"amd\",\n \"es6\",\n \"globals\",\n \"node\",\n \"yui\"\n ],\n \"keywords\": [\n \"machine\",\n \"learning\",\n \"AI\",\n \"convnet\"\n ],\n \"license\": \"MIT\",\n \"homepage\": \"http://cs.stanford.edu/people/karpathy/convnetjs/\",\n \"ignore\": [\n \"**/.*\",\n \"node_modules\",\n \"bower_components\",\n \"test\",\n \"tests\"\n ]\n}\n" }, { "path": "build/deepqlearn.js", "content": "var deepqlearn = deepqlearn || { REVISION: 'ALPHA' };\r\n\r\n(function(global) {\r\n \"use strict\";\r\n \r\n // An agent is in state0 and does action0\r\n // environment then assigns reward0 and provides new state, state1\r\n // Experience nodes store all this information, which is used in the\r\n // Q-learning update step\r\n var Experience = function(state0, action0, reward0, state1) {\r\n this.state0 = state0;\r\n this.action0 = action0;\r\n this.reward0 = reward0;\r\n this.state1 = state1;\r\n }\r\n\r\n // A Brain object does all the magic.\r\n // over time it receives some inputs and some rewards\r\n // and its job is to set the outputs to maximize the expected reward\r\n var Brain = function(num_states, num_actions, opt) {\r\n var opt = opt || {};\r\n // in number of time steps, of temporal memory\r\n // the ACTUAL input to the net will be (x,a) temporal_window times, and followed by current x\r\n // so to have no information from previous time step going into value function, set to 0.\r\n this.temporal_window = typeof opt.temporal_window !== 'undefined' ? opt.temporal_window : 1; \r\n // size of experience replay memory\r\n this.experience_size = typeof opt.experience_size !== 'undefined' ? opt.experience_size : 30000;\r\n // number of examples in experience replay memory before we begin learning\r\n this.start_learn_threshold = typeof opt.start_learn_threshold !== 'undefined'? opt.start_learn_threshold : Math.floor(Math.min(this.experience_size*0.1, 1000)); \r\n // gamma is a crucial parameter that controls how much plan-ahead the agent does. In [0,1]\r\n this.gamma = typeof opt.gamma !== 'undefined' ? opt.gamma : 0.8;\r\n \r\n // number of steps we will learn for\r\n this.learning_steps_total = typeof opt.learning_steps_total !== 'undefined' ? opt.learning_steps_total : 100000;\r\n // how many steps of the above to perform only random actions (in the beginning)?\r\n this.learning_steps_burnin = typeof opt.learning_steps_burnin !== 'undefined' ? opt.learning_steps_burnin : 3000;\r\n // what epsilon value do we bottom out on? 0.0 => purely deterministic policy at end\r\n this.epsilon_min = typeof opt.epsilon_min !== 'undefined' ? opt.epsilon_min : 0.05;\r\n // what epsilon to use at test time? (i.e. when learning is disabled)\r\n this.epsilon_test_time = typeof opt.epsilon_test_time !== 'undefined' ? opt.epsilon_test_time : 0.01;\r\n \r\n // advanced feature. Sometimes a random action should be biased towards some values\r\n // for example in flappy bird, we may want to choose to not flap more often\r\n if(typeof opt.random_action_distribution !== 'undefined') {\r\n // this better sum to 1 by the way, and be of length this.num_actions\r\n this.random_action_distribution = opt.random_action_distribution;\r\n if(this.random_action_distribution.length !== num_actions) {\r\n console.log('TROUBLE. random_action_distribution should be same length as num_actions.');\r\n }\r\n var a = this.random_action_distribution;\r\n var s = 0.0; for(var k=0;k0.0001) { console.log('TROUBLE. random_action_distribution should sum to 1!'); }\r\n } else {\r\n this.random_action_distribution = [];\r\n }\r\n \r\n // states that go into neural net to predict optimal action look as\r\n // x0,a0,x1,a1,x2,a2,...xt\r\n // this variable controls the size of that temporal window. Actions are\r\n // encoded as 1-of-k hot vectors\r\n this.net_inputs = num_states * this.temporal_window + num_actions * this.temporal_window + num_states;\r\n this.num_states = num_states;\r\n this.num_actions = num_actions;\r\n this.window_size = Math.max(this.temporal_window, 2); // must be at least 2, but if we want more context even more\r\n this.state_window = new Array(this.window_size);\r\n this.action_window = new Array(this.window_size);\r\n this.reward_window = new Array(this.window_size);\r\n this.net_window = new Array(this.window_size);\r\n \r\n // create [state -> value of all possible actions] modeling net for the value function\r\n var layer_defs = [];\r\n if(typeof opt.layer_defs !== 'undefined') {\r\n // this is an advanced usage feature, because size of the input to the network, and number of\r\n // actions must check out. This is not very pretty Object Oriented programming but I can't see\r\n // a way out of it :(\r\n layer_defs = opt.layer_defs;\r\n if(layer_defs.length < 2) { console.log('TROUBLE! must have at least 2 layers'); }\r\n if(layer_defs[0].type !== 'input') { console.log('TROUBLE! first layer must be input layer!'); }\r\n if(layer_defs[layer_defs.length-1].type !== 'regression') { console.log('TROUBLE! last layer must be input regression!'); }\r\n if(layer_defs[0].out_depth * layer_defs[0].out_sx * layer_defs[0].out_sy !== this.net_inputs) {\r\n console.log('TROUBLE! Number of inputs must be num_states * temporal_window + num_actions * temporal_window + num_states!');\r\n }\r\n if(layer_defs[layer_defs.length-1].num_neurons !== this.num_actions) {\r\n console.log('TROUBLE! Number of regression neurons should be num_actions!');\r\n }\r\n } else {\r\n // create a very simple neural net by default\r\n layer_defs.push({type:'input', out_sx:1, out_sy:1, out_depth:this.net_inputs});\r\n if(typeof opt.hidden_layer_sizes !== 'undefined') {\r\n // allow user to specify this via the option, for convenience\r\n var hl = opt.hidden_layer_sizes;\r\n for(var k=0;k maxval) { maxk = k; maxval = action_values.w[k]; }\r\n }\r\n return {action:maxk, value:maxval};\r\n },\r\n getNetInput: function(xt) {\r\n // return s = (x,a,x,a,x,a,xt) state vector. \r\n // It's a concatenation of last window_size (x,a) pairs and current state x\r\n var w = [];\r\n w = w.concat(xt); // start with current state\r\n // and now go backwards and append states and actions from history temporal_window times\r\n var n = this.window_size; \r\n for(var k=0;k this.temporal_window) {\r\n // we have enough to actually do something reasonable\r\n var net_input = this.getNetInput(input_array);\r\n if(this.learning) {\r\n // compute epsilon for the epsilon-greedy policy\r\n this.epsilon = Math.min(1.0, Math.max(this.epsilon_min, 1.0-(this.age - this.learning_steps_burnin)/(this.learning_steps_total - this.learning_steps_burnin))); \r\n } else {\r\n this.epsilon = this.epsilon_test_time; // use test-time value\r\n }\r\n var rf = convnetjs.randf(0,1);\r\n if(rf < this.epsilon) {\r\n // choose a random action with epsilon probability\r\n action = this.random_action();\r\n } else {\r\n // otherwise use our policy to make decision\r\n var maxact = this.policy(net_input);\r\n action = maxact.action;\r\n }\r\n } else {\r\n // pathological case that happens first few iterations \r\n // before we accumulate window_size inputs\r\n var net_input = [];\r\n action = this.random_action();\r\n }\r\n \r\n // remember the state and action we took for backward pass\r\n this.net_window.shift();\r\n this.net_window.push(net_input);\r\n this.state_window.shift(); \r\n this.state_window.push(input_array);\r\n this.action_window.shift(); \r\n this.action_window.push(action);\r\n \r\n return action;\r\n },\r\n backward: function(reward) {\r\n this.latest_reward = reward;\r\n this.average_reward_window.add(reward);\r\n this.reward_window.shift();\r\n this.reward_window.push(reward);\r\n \r\n if(!this.learning) { return; } \r\n \r\n // various book-keeping\r\n this.age += 1;\r\n \r\n // it is time t+1 and we have to store (s_t, a_t, r_t, s_{t+1}) as new experience\r\n // (given that an appropriate number of state measurements already exist, of course)\r\n if(this.forward_passes > this.temporal_window + 1) {\r\n var e = new Experience();\r\n var n = this.window_size;\r\n e.state0 = this.net_window[n-2];\r\n e.action0 = this.action_window[n-2];\r\n e.reward0 = this.reward_window[n-2];\r\n e.state1 = this.net_window[n-1];\r\n if(this.experience.length < this.experience_size) {\r\n this.experience.push(e);\r\n } else {\r\n // replace. finite memory!\r\n var ri = convnetjs.randi(0, this.experience_size);\r\n this.experience[ri] = e;\r\n }\r\n }\r\n \r\n // learn based on experience, once we have some samples to go on\r\n // this is where the magic happens...\r\n if(this.experience.length > this.start_learn_threshold) {\r\n var avcost = 0.0;\r\n for(var k=0;k < this.tdtrainer.batch_size;k++) {\r\n var re = convnetjs.randi(0, this.experience.length);\r\n var e = this.experience[re];\r\n var x = new convnetjs.Vol(1, 1, this.net_inputs);\r\n x.w = e.state0;\r\n var maxact = this.policy(e.state1);\r\n var r = e.reward0 + this.gamma * maxact.value;\r\n var ystruct = {dim: e.action0, val: r};\r\n var loss = this.tdtrainer.train(x, ystruct);\r\n avcost += loss.loss;\r\n }\r\n avcost = avcost/this.tdtrainer.batch_size;\r\n this.average_loss_window.add(avcost);\r\n }\r\n },\r\n visSelf: function(elt) {\r\n elt.innerHTML = ''; // erase elt first\r\n \r\n // elt is a DOM element that this function fills with brain-related information\r\n var brainvis = document.createElement('div');\r\n \r\n // basic information\r\n var desc = document.createElement('div');\r\n var t = '';\r\n t += 'experience replay size: ' + this.experience.length + '
';\r\n t += 'exploration epsilon: ' + this.epsilon + '
';\r\n t += 'age: ' + this.age + '
';\r\n t += 'average Q-learning loss: ' + this.average_loss_window.get_average() + '
';\r\n t += 'smooth-ish reward: ' + this.average_reward_window.get_average() + '
';\r\n desc.innerHTML = t;\r\n brainvis.appendChild(desc);\r\n \r\n elt.appendChild(brainvis);\r\n }\r\n }\r\n \r\n global.Brain = Brain;\r\n})(deepqlearn);\r\n\r\n(function(lib) {\r\n \"use strict\";\r\n if (typeof module === \"undefined\" || typeof module.exports === \"undefined\") {\r\n window.deepqlearn = lib; // in ordinary browser attach library to window\r\n } else {\r\n module.exports = lib; // in nodejs\r\n }\r\n})(deepqlearn);\r\n" }, { "path": "build/util.js", "content": "\n// contains various utility functions \nvar cnnutil = (function(exports){\n\n // a window stores _size_ number of values\n // and returns averages. Useful for keeping running\n // track of validation or training accuracy during SGD\n var Window = function(size, minsize) {\n this.v = [];\n this.size = typeof(size)==='undefined' ? 100 : size;\n this.minsize = typeof(minsize)==='undefined' ? 20 : minsize;\n this.sum = 0;\n }\n Window.prototype = {\n add: function(x) {\n this.v.push(x);\n this.sum += x;\n if(this.v.length>this.size) {\n var xold = this.v.shift();\n this.sum -= xold;\n }\n },\n get_average: function() {\n if(this.v.length < this.minsize) return -1;\n else return this.sum/this.v.length;\n },\n reset: function(x) {\n this.v = [];\n this.sum = 0;\n }\n }\n\n // returns min, max and indeces of an array\n var maxmin = function(w) {\n if(w.length === 0) { return {}; } // ... ;s\n\n var maxv = w[0];\n var minv = w[0];\n var maxi = 0;\n var mini = 0;\n for(var i=1;i maxv) { maxv = w[i]; maxi = i; } \n if(w[i] < minv) { minv = w[i]; mini = i; } \n }\n return {maxi: maxi, maxv: maxv, mini: mini, minv: minv, dv:maxv-minv};\n }\n\n // returns string representation of float\n // but truncated to length of d digits\n var f2t = function(x, d) {\n if(typeof(d)==='undefined') { var d = 5; }\n var dd = 1.0 * Math.pow(10, d);\n return '' + Math.floor(x*dd)/dd;\n }\n\n exports = exports || {};\n exports.Window = Window;\n exports.maxmin = maxmin;\n exports.f2t = f2t;\n return exports;\n\n})(typeof module != 'undefined' && module.exports); // add exports to module.exports if in node.js\n\n\n" }, { "path": "build/vis.js", "content": "\n// contains various utility functions \nvar cnnvis = (function(exports){\n\n // can be used to graph loss, or accuract over time\n var Graph = function(options) {\n var options = options || {};\n this.step_horizon = options.step_horizon || 1000;\n \n this.pts = [];\n \n this.maxy = -9999;\n this.miny = 9999;\n }\n\n Graph.prototype = {\n // canv is the canvas we wish to update with this new datapoint\n add: function(step, y) {\n var time = new Date().getTime(); // in ms\n if(y>this.maxy*0.99) this.maxy = y*1.05;\n if(y this.step_horizon) this.step_horizon *= 2;\n },\n // elt is a canvas we wish to draw into\n drawSelf: function(canv) {\n \n var pad = 25;\n var H = canv.height;\n var W = canv.width;\n var ctx = canv.getContext('2d');\n\n ctx.clearRect(0, 0, W, H);\n ctx.font=\"10px Georgia\";\n\n var f2t = function(x) {\n var dd = 1.0 * Math.pow(10, 2);\n return '' + Math.floor(x*dd)/dd;\n }\n\n // draw guidelines and values\n ctx.strokeStyle = \"#999\";\n ctx.beginPath();\n var ng = 10;\n for(var i=0;i<=ng;i++) {\n var xpos = i/ng*(W-2*pad)+pad;\n ctx.moveTo(xpos, pad);\n ctx.lineTo(xpos, H-pad);\n ctx.fillText(f2t(i/ng*this.step_horizon/1000)+'k',xpos,H-pad+14);\n }\n for(var i=0;i<=ng;i++) {\n var ypos = i/ng*(H-2*pad)+pad;\n ctx.moveTo(pad, ypos);\n ctx.lineTo(W-pad, ypos);\n ctx.fillText(f2t((ng-i)/ng*(this.maxy-this.miny) + this.miny), 0, ypos);\n }\n ctx.stroke();\n\n var N = this.pts.length;\n if(N<2) return;\n\n // draw the actual curve\n var t = function(x, y, s) {\n var tx = x / s.step_horizon * (W-pad*2) + pad;\n var ty = H - ((y-s.miny) / (s.maxy-s.miny) * (H-pad*2) + pad);\n return {tx:tx, ty:ty}\n }\n\n ctx.strokeStyle = \"red\";\n ctx.beginPath()\n for(var i=0;ithis.maxy*0.99) this.maxy = y*1.05;\n if(y this.step_horizon) this.step_horizon *= 2;\n },\n // elt is a canvas we wish to draw into\n drawSelf: function(canv) {\n \n var pad = 25;\n var H = canv.height;\n var W = canv.width;\n var ctx = canv.getContext('2d');\n\n ctx.clearRect(0, 0, W, H);\n ctx.font=\"10px Georgia\";\n\n var f2t = function(x) {\n var dd = 1.0 * Math.pow(10, 2);\n return '' + Math.floor(x*dd)/dd;\n }\n\n // draw guidelines and values\n ctx.strokeStyle = \"#999\";\n ctx.beginPath();\n var ng = 10;\n for(var i=0;i<=ng;i++) {\n var xpos = i/ng*(W-2*pad)+pad;\n ctx.moveTo(xpos, pad);\n ctx.lineTo(xpos, H-pad);\n ctx.fillText(f2t(i/ng*this.step_horizon/1000)+'k',xpos,H-pad+14);\n }\n for(var i=0;i<=ng;i++) {\n var ypos = i/ng*(H-2*pad)+pad;\n ctx.moveTo(pad, ypos);\n ctx.lineTo(W-pad, ypos);\n ctx.fillText(f2t((ng-i)/ng*(this.maxy-this.miny) + this.miny), 0, ypos);\n }\n ctx.stroke();\n\n var N = this.pts.length;\n if(N<2) return;\n\n // draw legend\n for(var k=0;k\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n" }, { "path": "demo/autoencoder.html", "content": "\n\n\n \n \n ConvNetJS MNIST demo\n \n \n \n\n\n\n\n\n\n\n\n\n\n\n\n
\n

ConvNetJS Denoising Autoencoder demo

\n

Description

\n

\n All the other demos are examples of Supervised Learning, so in this demo I wanted to show an example of Unsupervised Learning. We are going to train an autoencoder on MNIST digits.\n

\n

\n An autoencoder is a regression task where the network is asked to predict its input (in other words, model the identity function). Sounds simple enough, except the network has a tight bottleneck of a few neurons in the middle (in the default example only two!), forcing it to create effective representations that compress the input into a low-dimensional code that can be used by the decoder to reproduce the original input.\n

\n

Report questions/bugs/suggestions to @karpathy.\n

\n

Training Stats

\n
\n
\n Current image: \n
\n\n
\n Learning rate: \n \n
\n
\n\n
\n
\n \n
\n
\n \n
\n Loss:
\n \n \n
\n \n
\n\n
\n
\n
\n \n
\n\n
\n
\n \n
\n
\n
\n\n
\n
\n\n
\n

Network Visualization

\n
\n
\n\n
\n\n\n\n\n\n" }, { "path": "demo/automatic.html", "content": "\r\n\r\n \r\n \r\n \r\n ConvNetJS Automatic\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n

ConvNetJS Automatic Prediction Demo

\r\n

Introduction

\r\n

\r\n This demo illustrates the usage of ConvNetJS' MagicNet class, which performs fully automatic prediction given your arbitrary data. Internally, the MagicNet tries out many different types of networks, performs cross-validations of network hyper-parameters across folds of your data, and creates a final classifier by model averaging the best architectures. The API for MagicNet looks as follows:\r\n

\r\n\r\n
\r\nvar opts = {}; // options struct\r\nopts.train_ratio = 0.7;\r\nopts.num_folds = 10; // number of folds to eval per candidate\r\nopts.num_candidates = 10; // number of candidates to eval in parallel\r\nopts.num_epochs = 50; // epochs to make through data per fold\r\n// below, train_data is a list of input Vols and train_labels is a \r\n// list of integer correct labels (in 0...K).\r\nvar magicNet = new convnetjs.MagicNet(train_data, train_labels, opts);\r\nmagicNet.onFinishBatch(finishedBatch); // example of setting callback for events\r\n\r\n// start training magicNet. Every step() call all candidates train on one example\r\nsetInterval(function(){ magicNet.step() }, 0);\r\n\r\n// once at least one batch of candidates is evaluated on all folds we can do prediction!\r\nfunction finishedBatch() {\r\n  // prediction example. xout is Vol of scores\r\n  // there is also predict_soft(), which returns the full score volume for all labels\r\n  var predicted_label = magicNet.predict(some_test_vol);\r\n}\r\n
\r\n\r\n

Your data

\r\n

\r\n Currently made input data assumptions:\r\n

\r\n
    \r\n
  • Provide data as CSV (comma-separated) values. Leave out any header rows.
    • \r\n
  • Every row is a data point.
    • \r\n
  • No missing values.
    • \r\n
  • Last column is the class (only classification is currently supported).
    • \r\n
\r\n

\r\n The text area is pre-filled with a Car Quality Evaluation dataset to show you example input, but there are a few buttons that load some example datasets (more details on these: Iris data, Car Eval data, Yeast Data). A nice place to find more datasets are UCI Repository or mldata.org.\r\n

\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n\r\n \r\n\r\n \r\n (and send % of imported data randomly into Test Set below)\r\n\r\n
\r\n
\r\n \r\n

Cross-Validation

\r\n \r\n
\r\n \r\n Index of column to classify as target. (e.g. 0 = first column, -1 = last column)\r\n
\r\n\r\n
\r\n \r\n Percent of data to use for training (rest will be validation)\r\n
\r\n\r\n
\r\n Number of data folds to evaluate per candidate\r\n
\r\n\r\n
\r\n Number of candidates in a batch, to evaluate in parallel\r\n
\r\n\r\n
\r\n Number of epochs to make over each fold\r\n
\r\n\r\n
\r\n Number of Neurons in each layer: Min Max \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n\r\n

Below: graph of the validation accuracy for current batch of candidate models as a function of the number of training points they have seen during training. Good networks will rise up as high as possible and stay there. The best performer is printed in detail below the graph. The graph is less wiggly if there is more data.

\r\n
\r\n
\r\n\r\n \r\n
\r\n
\r\n \r\n

Evaluate on Test Set

\r\n

\r\n Paste a test set in box below to evaluate the final test accuracy, which is based on a model-averaged ensemble of the best discovered network from the training data above. The CSV pasted below should be in the same format as the one used for training data above. The text field is pre-filled with the training data.\r\n

\r\n \r\n
\r\n Number of best models to average in the ensemble network\r\n
\r\n\r\n \r\n \r\n
\r\n
\r\n
\r\n\r\n

Export Best Network

\r\n

\r\n \r\n\r\n Above you can export a trained MagicNet in JSON format. The exported MagicNet is simply a thin wrapper around a list of the best networks that were discovered during cross-validation and it can be loaded and used again as follows:\r\n
\r\nvar magicNet = new convnetjs.MagicNet();\r\nmagicNet.fromJSON(json);\r\nmagicNet.predict(some_vol); // ready to use!\r\n
\r\n \r\n







\r\n \r\n
\r\n \r\n\r\n" }, { "path": "demo/cifar10.html", "content": "\n\n\n \n \n ConvNetJS CIFAR-10 demo\n \n \n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n

ConvNetJS CIFAR-10 demo

\n

Description

\n

\n This demo trains a Convolutional Neural Network on the CIFAR-10 dataset in your browser, with nothing but Javascript. The state of the art on this dataset is about 90% accuracy and human performance is at about 94% (not perfect as the dataset can be a bit ambiguous). I used this python script to parse the original files (python version) into batches of images that can be easily loaded into page DOM with img tags.\n

\n

This dataset is more difficult and it takes longer to train a network. Data augmentation includes random flipping and random image shifts by up to 2px horizontally and verically.

\n

\n By default, in this demo we're using Adadelta which is one of per-parameter adaptive step size methods, so we don't have to worry about changing learning rates or momentum over time. However, I still included the text fields for changing these if you'd like to play around with SGD+Momentum trainer.\n

\n

Report questions/bugs/suggestions to @karpathy.

\n

Training Stats

\n
\n
\n \n
\n\n
\n Learning rate: \n \n
\n\n Momentum: \n \n
\n\n Batch size: \n \n
\n\n Weight decay: \n \n
\n\n
\n
\n \n
\n\n
\n
\n
\n
\n Loss:
\n \n \n
\n \n
\n
\n
\n
\n Test an image from your computer:\n
\n \n
\n \n\n \n
\n
\n
\n
\n\n

Instantiate a Network and Trainer

\n
\n
\n \n
\n\n
\n

Network Visualization

\n
\n
\n \n
\n

Example predictions on Test set

\n
\n
\n
\n\n
\n\n\n\n\n\n" }, { "path": "demo/classify2d.html", "content": "\n\nConvNetJS demo: Classify toy 2D data\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n

ConvnetJS demo: toy 2d classification with 2-layer neural network

\n\n

The simulation below shows a toy binary problem with a few data points of class 0 (red) and 1 (green). The network is set up as:

\n\n\n
\n\n\n

Feel free to change this, the text area above gets eval()'d when you hit the button and the network gets reloaded. Every 10th of a second, all points are fed to the network multiple times through the trainer class to train the network. The resulting predictions of the network are then \"painted\" under the data points to show you the generalization.

\n\n

On the right we visualize the transformed representation of all grid points in the original space and the data, for a given layer and only for 2 neurons at a time. The number in the bracket shows the total number of neurons at that level of representation. If the number is more than 2, you will only see the two visualized but you can cycle through all of them with the cycle button.

\n\n
\n
\nBrowser not supported for Canvas. Get a real browser.\n\n\n
\n
\n

\nControls:
\nCLICK: Add red data point
\nSHIFT+CLICK: Add green data point
\nCTRL+CLICK: Remove closest data point
\n

\n
\n\n
\n Browser not supported for Canvas. Get a real browser.\n
\n
\n\n
\n\n
\n\n

Go back to ConvNetJS

\n\n
\n\n\n\n" }, { "path": "demo/css/automatic.css", "content": "#wrap {\n width:800px;\n margin-left: auto;\n margin-right: auto;\n}\nh2 {\n text-align: center;\n font-size: 34px;\n font-weight: 300;\n margin-bottom: 50px;\n}\nh1 {\n font-size: 26px;\n font-weight: 400;\n border-bottom: 1px #999 solid;\n}\n#datamsg{\n background-color: white;\n margin-top: 2px;\n padding: 10px;\n}\n#prepromsg{\n margin-top: 10px;\n padding: 10px;\n}\n.msg{\n padding: 2px;\n}\nbody {\n font-family: 'Lato', sans-serif;\n color: #333;\n font-size: 20px;\n font-weight: 300;\n}\ninput[type=text] {\n border: 1px solid #999;\n padding: 3px;\n font-size: 18px;\n color: #333;\n}\n.clouds-flat-button {\n position: relative;\n vertical-align: top;\n width: 100%;\n height: 80px;\n padding: 0;\n color:#454545;\n text-align: center;\n font-size: 16px;\n background: #ecf0f1;\n border: 0;\n border-bottom: 2px solid #dadedf;\n cursor: pointer;\n -webkit-box-shadow: inset 0 -2px #dadedf;\n box-shadow: inset 0 -2px #dadedf;\n}\n.clouds-flat-button:active {\n top: 1px;\n outline: none;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n#bestmodel {\n font-size: 16px;\n background-color: #FAFAFA;\n padding: 10px;\n}\n#bestmodeloverall {\n font-size: 16px;\n background-color: #FAFAFA;\n padding: 10px;\n margin-top: 10px;\n}\n.syntaxhighlighter {\n font-size: 14px !important;\n overflow-y: hidden !important; \n}\n.sopts {\n box-shadow: 0px 0px 2px 0px #555;\n margin-bottom: 5px;\n padding: 10px;\n}" }, { "path": "demo/css/style.css", "content": ".layer {\n border: 1px solid #999;\n margin-bottom: 5px;\n text-align: left;\n padding: 10px;\n}\n.layer_act {\n width: 500px;\n float: right;\n}\n.ltconv {\n background-color: #FDD;\n}\n.ltrelu {\n background-color: #FDF;\n}\n.ltpool {\n background-color: #DDF;\n}\n.ltsoftmax {\n background-color: #FFD;\n}\n.ltfc {\n background-color: #DFF;\n}\n.ltlrn {\n background-color: #DFD; \n}\n.ltdropout {\n background-color: #AAA; \n}\n.ltitle {\n color: #333;\n font-size: 18px;\n}\n.actmap {\n margin: 1px;\n}\n#trainstats {\n text-align: left;\n}\n.clear {\n clear: both;\n}\n#wrap {\n width: 800px;\n margin-left: auto;\n margin-right: auto;\n}\nh1 {\n font-size: 16px;\n color: #333;\n background-color: #DDD;\n border-bottom: 1px #999 solid;\n text-align: center;\n}\nh2 {\n text-align: center;\n}\n.secpart {\n width: 400px;\n float: left;\n}\n#lossgraph {\n /*border: 1px solid #F0F;*/\n width: 100%;\n}\n.testdiv canvas {\n float: left;\n width: 64px;\n}\n.testdiv {\n background-color: rgba(255,255,255,0.65);\n height: auto;\n width: auto;\n display: inline-block;\n font-size: 12px;\n box-shadow: 0px 0px 2px 2px #EEE;\n margin: 5px;\n padding: 5px;\n color: black;\n}\n.probsdiv {\n float: left;\n width: 100px;\n margin-left: 1px;\n}\n.pp {\n margin: 1px;\n padding: 1px;\n}\n#testset_acc {\n /* margin-bottom: 200px; */\n}\n#testset_vis {\n margin-bottom: 200px;\n}\nbody {\n font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\n /* color: #333; */\n /* padding: 20px; */\n}" }, { "path": "demo/image_regression.html", "content": "\n\nConvNetJS demo: Image Painting\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n

ConvnetJS demo: Image \"Painting\"

\n\n

This demo that treats the pixels of an image as a learning problem: it takes the (x,y) position on a grid and learns to predict the color at that point using regression to (r,g,b). It's a bit like compression, since the image information is encoded in the weights of the network, but almost certainly not of practical kind :)

\n

\n Note that the entire ConvNetJS definition is shown in textbox below and it gets eval()'d to create the network, so feel free to fiddle with the parameters and hit \"reload\". I found that, empirically and interestingly, deeper networks tend to work much better on this task given a fixed parameter budget.\n

\n\n

Report questions/bugs/suggestions to @karpathy.

\n\n\n

\n\n\n
\nChoose your own image: \n\n
\n\n
\n\n
\n
\n Original Image
\n \n
\n
\n Neural Network output
\n \n
\n\n
\n
\n\n
\n
\n
\n\n
Learning rate:
\n
\n
The learning rate should probably be decreased over time (slide left) to let the network better overfit the training data. It's nice to not have to worry about overfitting.
\n\n

\n
\n You can upload your own image above (click Choose File), or you can click on any of the images below to load them.\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n

\n

Go back to ConvNetJS

\n\n
\n\n\n\n\n" }, { "path": "demo/js/autoencoder.js", "content": "// globals\nvar layer_defs, net, trainer;\nvar t = \"\\\nlayer_defs = [];\\n\\\nlayer_defs.push({type:'input', out_sx:28, out_sy:28, out_depth:1});\\n\\\nlayer_defs.push({type:'fc', num_neurons:50, activation:'tanh'});\\n\\\nlayer_defs.push({type:'fc', num_neurons:50, activation:'tanh'});\\n\\\nlayer_defs.push({type:'fc', num_neurons:2});\\n\\\nlayer_defs.push({type:'fc', num_neurons:50, activation:'tanh'});\\n\\\nlayer_defs.push({type:'fc', num_neurons:50, activation:'tanh'});\\n\\\nlayer_defs.push({type:'regression', num_neurons:28*28});\\n\\\n\\n\\\nnet = new convnetjs.Net();\\n\\\nnet.makeLayers(layer_defs);\\n\\\n\\n\\\ntrainer = new convnetjs.SGDTrainer(net, {learning_rate:1, method:'adadelta', batch_size:50, l2_decay:0.001, l1_decay:0.001});\\n\\\n\";\n\n// ------------------------\n// BEGIN MNIST SPECIFIC STUFF\n// ------------------------\nvar sample_training_instance = function() {\n\n // find an unloaded batch\n var bi = Math.floor(Math.random()*loaded_train_batches.length);\n var b = loaded_train_batches[bi];\n var k = Math.floor(Math.random()*3000); // sample within the batch\n var n = b*3000+k;\n\n // load more batches over time\n if(step_num%5000===0 && step_num>0) {\n for(var i=0;i3) {\n // actual weights\n filters_div.appendChild(document.createTextNode('Weights:'));\n filters_div.appendChild(document.createElement('br'));\n for(var j=0;j= selected_layer.out_depth) d1 = 0; // and wrap\n if(d0 >= selected_layer.out_depth) d0 = 0; // and wrap\n $(\"#cyclestatus\").html('drawing neurons ' + d0 + ' and ' + d1 + ' of layer #' + lix + ' (' + net.layers[lix].layer_type + ')');\n}\nfunction updateLix(newlix) {\n $(\"#button\"+lix).css('background-color', ''); // erase highlight\n lix = newlix;\n d0 = 0;\n d1 = 1; // reset these\n $(\"#button\"+lix).css('background-color', '#FFA');\n\n $(\"#cyclestatus\").html('drawing neurons ' + d0 + ' and ' + d1 + ' of layer with index ' + lix + ' (' + net.layers[lix].layer_type + ')');\n}\n\n\nvar lossGraph = new cnnvis.Graph();\nvar xLossWindow = new cnnutil.Window(100);\nvar w2LossWindow = new cnnutil.Window(100);\nvar w1LossWindow = new cnnutil.Window(100);\nvar step_num = 0;\nvar colors = [\"red\", \"blue\", \"green\", \"orange\", \"magenta\", \"cyan\", \"purple\", \"silver\", \"olive\", \"lime\", \"yellow\"];\nvar step = function(sample) {\n\n // train on it with network\n var stats = trainer.train(sample.x, sample.x.w);\n\n // keep track of stats such as the average training error and loss \n xLossWindow.add(stats.cost_loss);\n w1LossWindow.add(stats.l1_decay_loss);\n w2LossWindow.add(stats.l2_decay_loss);\n\n // visualize training status\n var train_elt = document.getElementById(\"trainstats\");\n train_elt.innerHTML = '';\n var t = 'Forward time per example: ' + stats.fwd_time + 'ms';\n train_elt.appendChild(document.createTextNode(t));\n train_elt.appendChild(document.createElement('br'));\n var t = 'Backprop time per example: ' + stats.bwd_time + 'ms';\n train_elt.appendChild(document.createTextNode(t));\n train_elt.appendChild(document.createElement('br'));\n var t = 'Regression loss: ' + f2t(xLossWindow.get_average());\n train_elt.appendChild(document.createTextNode(t));\n train_elt.appendChild(document.createElement('br'));\n var t = 'L2 Weight decay loss: ' + f2t(w2LossWindow.get_average());\n train_elt.appendChild(document.createTextNode(t));\n train_elt.appendChild(document.createElement('br'));\n var t = 'L1 Weight decay loss: ' + f2t(w1LossWindow.get_average());\n train_elt.appendChild(document.createTextNode(t));\n train_elt.appendChild(document.createElement('br'));\n var t = 'Examples seen: ' + step_num;\n train_elt.appendChild(document.createTextNode(t));\n train_elt.appendChild(document.createElement('br'));\n\n // visualize activations\n if(step_num % 100 === 0) {\n var vis_elt = document.getElementById(\"visnet\");\n visualize_activations(net, vis_elt);\n }\n\n // visualize embedding\n if(step_num % 100 === 0) {\n\n var embcanvas = document.getElementById('embedding');\n var ctx = embcanvas.getContext(\"2d\");\n var EW = embcanvas.width;\n var EH = embcanvas.height;\n\n // propagate a few training examples through the network and grab codes\n var xcodes = [];\n var ycodes = [];\n var ns = embed_samples.length; // number of samples\n for(var k=0;k= 0 && xw1 >= 0 && xw2 >= 0) { // if they are -1 it means not enough data was accumulated yet for estimates\n lossGraph.add(step_num, xa + xw1 + xw2);\n lossGraph.drawSelf(document.getElementById(\"lossgraph\"));\n }\n }\n\n step_num++;\n}\n\n// user settings \nvar change_lr = function() {\n trainer.learning_rate = parseFloat(document.getElementById(\"lr_input\").value);\n update_net_param_display();\n}\nvar update_net_param_display = function() {\n document.getElementById('lr_input').value = trainer.learning_rate;\n}\nvar toggle_pause = function() {\n paused = !paused;\n var btn = document.getElementById('buttontp');\n if(paused) { btn.value = 'resume' }\n else { btn.value = 'pause'; }\n}\nvar dump_json = function() {\n document.getElementById(\"dumpjson\").value = JSON.stringify(net.toJSON());\n}\nvar clear_graph = function() {\n lossGraph = new cnnvis.Graph(); // reinit graph too \n}\nvar reset_all = function() {\n update_net_param_display();\n\n // reinit windows that keep track of val/train accuracies\n lossGraph = new cnnvis.Graph(); // reinit graph too\n step_num = 0;\n\n // enter buttons for layers\n var t = '';\n for(var i=1;i\";\n }\n $(\"#layer_ixes\").html(t);\n $(\"#button\"+lix).css('background-color', '#FFA');\n $(\"#cyclestatus\").html('drawing neurons ' + d0 + ' and ' + d1 + ' of layer with index ' + lix + ' (' + net.layers[lix].layer_type + ')');\n\n}\nvar load_from_json = function() {\n var jsonString = document.getElementById(\"dumpjson\").value;\n var json = JSON.parse(jsonString);\n net = new convnetjs.Net();\n net.fromJSON(json);\n reset_all();\n}\nvar change_net = function() {\n eval($(\"#newnet\").val());\n reset_all();\n}\n" }, { "path": "demo/js/automatic.js", "content": " \n // utility functions\n Array.prototype.contains = function(v) {\n for(var i = 0; i < this.length; i++) {\n if(this[i] === v) return true;\n }\n return false;\n };\n Array.prototype.unique = function() {\n var arr = [];\n for(var i = 0; i < this.length; i++) {\n if(!arr.contains(this[i])) {\n arr.push(this[i]);\n }\n }\n return arr; \n }\n \n function FAIL(outdivid, msg) {\n $(outdivid).prepend(\"
\"+msg+\"
\")\n }\n function SUCC(outdivid, msg) {\n $(outdivid).prepend(\"
\"+msg+\"
\")\n }\n\n // looks at a column i of data and guesses what's in it\n // returns results of analysis: is column numeric? How many unique entries and what are they?\n function guessColumn(data, c) {\n var numeric = true;\n var vs = [];\n for(var i=0,n=data.length;i 20 && i>3 && i < D-3) {\n if(i==4) {\n SUCC(outdivid, \"...\"); // suppress output for too many columns\n }\n } else {\n SUCC(outdivid, \"column \" + i + \" looks \" + (res.numeric ? \"numeric\" : \"NOT numeric\") + \" and has \" + res.num + \" unique elements\");\n }\n }\n\n return {arr: arr, colstats: colstats};\n }\n \n // process input mess into vols and labels\n function makeDataset(arr, colstats) {\n\n var labelix = parseInt($(\"#labelix\").val());\n if(labelix < 0) labelix = D + labelix; // -1 should turn to D-1\n\n var data = [];\n var labels = [];\n for(var i=0;i 0) {\n t += 'Results based on ' + c.acc.length + ' folds:';\n t += 'best model in current batch (validation accuracy ' + mm.maxv + '):
';\n t += 'Net layer definitions:
';\n t += JSON.stringify(cm.layer_defs);\n t += '
Trainer definition:
';\n t += JSON.stringify(cm.trainer_def);\n t += '
';\n }\n $('#bestmodel').html(t);\n\n // also print out the best model so far\n var t = '';\n if(magicNet.evaluated_candidates.length > 0) {\n var cm = magicNet.evaluated_candidates[0];\n t += 'validation accuracy of best model so far, overall: ' + cm.accv / cm.acc.length + '
';\n t += 'Net layer definitions:
';\n t += JSON.stringify(cm.layer_defs);\n t += '
Trainer definition:
';\n t += JSON.stringify(cm.trainer_def);\n t += '
';\n }\n $('#bestmodeloverall').html(t);\n }\n }\n \n // TODO: MOVE TO CONVNETJS UTILS\n var randperm = function(n) {\n var i = n,\n j = 0,\n temp;\n var array = [];\n for(var q=0;q\";\n }\n $(\"#layer_ixes\").html(t);\n $(\"#button\"+lix).css('background-color', '#FFA');\n $(\"#cyclestatus\").html('drawing neurons ' + d0 + ' and ' + d1 + ' of layer with index ' + lix + ' (' + net.layers[lix].layer_type + ')');\n}\nfunction updateLix(newlix) {\n $(\"#button\"+lix).css('background-color', ''); // erase highlight\n lix = newlix;\n d0 = 0;\n d1 = 1; // reset these\n $(\"#button\"+lix).css('background-color', '#FFA');\n\n $(\"#cyclestatus\").html('drawing neurons ' + d0 + ' and ' + d1 + ' of layer with index ' + lix + ' (' + net.layers[lix].layer_type + ')');\n}\n \n\nfunction myinit() { }\n\nfunction random_data(){\n data = [];\n labels = [];\n for(var k=0;k<40;k++) {\n data.push([convnetjs.randf(-3,3), convnetjs.randf(-3,3)]); labels.push(convnetjs.randf(0,1) > 0.5 ? 1 : 0);\n }\n N = labels.length;\n}\n\nfunction original_data(){\n \n data = [];\n labels = [];\n data.push([-0.4326 , 1.1909 ]); labels.push(1);\n data.push([3.0, 4.0]); labels.push(1);\n data.push([0.1253 , -0.0376 ]); labels.push(1);\n data.push([0.2877 , 0.3273 ]); labels.push(1);\n data.push([-1.1465 , 0.1746 ]); labels.push(1);\n data.push([1.8133 , 1.0139 ]); labels.push(0);\n data.push([2.7258 , 1.0668 ]); labels.push(0);\n data.push([1.4117 , 0.5593 ]); labels.push(0);\n data.push([4.1832 , 0.3044 ]); labels.push(0);\n data.push([1.8636 , 0.1677 ]); labels.push(0);\n data.push([0.5 , 3.2 ]); labels.push(1);\n data.push([0.8 , 3.2 ]); labels.push(1);\n data.push([1.0 , -2.2 ]); labels.push(1);\n N = labels.length;\n}\n\nfunction circle_data() {\n data = [];\n labels = [];\n for(var i=0;i<50;i++) {\n var r = convnetjs.randf(0.0, 2.0);\n var t = convnetjs.randf(0.0, 2*Math.PI);\n data.push([r*Math.sin(t), r*Math.cos(t)]);\n labels.push(1);\n }\n for(var i=0;i<50;i++) {\n var r = convnetjs.randf(3.0, 5.0);\n //var t = convnetjs.randf(0.0, 2*Math.PI);\n var t = 2*Math.PI*i/50.0\n data.push([r*Math.sin(t), r*Math.cos(t)]);\n labels.push(0);\n }\n N = data.length;\n}\n\nfunction spiral_data() {\n data = [];\n labels = [];\n var n = 100;\n for(var i=0;i= selected_layer.out_depth) d1 = 0; // and wrap\n if(d0 >= selected_layer.out_depth) d0 = 0; // and wrap\n $(\"#cyclestatus\").html('drawing neurons ' + d0 + ' and ' + d1 + ' of layer #' + lix + ' (' + net.layers[lix].layer_type + ')');\n}\n\nvar lix = 4; // layer id to track first 2 neurons of\nvar d0 = 0; // first dimension to show visualized\nvar d1 = 1; // second dimension to show visualized\nfunction draw(){\n \n ctx.clearRect(0,0,WIDTH,HEIGHT);\n \n var netx = new convnetjs.Vol(1,1,2);\n // draw decisions in the grid\n var density= 5.0;\n var gridstep = 2;\n var gridx = [];\n var gridy = [];\n var gridl = []; \n for(var x=0.0, cx=0; x<=WIDTH; x+= density, cx++) {\n for(var y=0.0, cy=0; y<=HEIGHT; y+= density, cy++) {\n //var dec= svm.marginOne([(x-WIDTH/2)/ss, (y-HEIGHT/2)/ss]);\n netx.w[0] = (x-WIDTH/2)/ss;\n netx.w[1] = (y-HEIGHT/2)/ss;\n var a = net.forward(netx, false);\n \n if(a.w[0] > a.w[1]) ctx.fillStyle = 'rgb(250, 150, 150)';\n else ctx.fillStyle = 'rgb(150, 250, 150)';\n\n //ctx.fillStyle = 'rgb(150,' + Math.floor(a.w[0]*105)+150 + ',150)';\n //ctx.fillStyle = 'rgb(' + Math.floor(a.w[0]*255) + ',' + Math.floor(a.w[1]*255) + ', 0)';\n ctx.fillRect(x-density/2-1, y-density/2-1, density+2, density+2);\n\n if(cx%gridstep === 0 && cy%gridstep===0) {\n // record the transformation information\n var xt = net.layers[lix].out_act.w[d0]; // in screen coords\n var yt = net.layers[lix].out_act.w[d1]; // in screen coords\n gridx.push(xt);\n gridy.push(yt);\n gridl.push(a.w[0] > a.w[1]); // remember final label as well\n }\n }\n }\n\n // draw axes\n ctx.beginPath();\n ctx.strokeStyle = 'rgb(50,50,50)';\n ctx.lineWidth = 1;\n ctx.moveTo(0, HEIGHT/2);\n ctx.lineTo(WIDTH, HEIGHT/2);\n ctx.moveTo(WIDTH/2, 0);\n ctx.lineTo(WIDTH/2, HEIGHT);\n ctx.stroke();\n\n // draw representation transformation axes for two neurons at some layer\n var mmx = cnnutil.maxmin(gridx);\n var mmy = cnnutil.maxmin(gridy);\n visctx.clearRect(0,0,visWIDTH,visHEIGHT);\n visctx.strokeStyle = 'rgb(0, 0, 0)';\n var n = Math.floor(Math.sqrt(gridx.length)); // size of grid. Should be fine?\n var ng = gridx.length;\n var c = 0; // counter\n visctx.beginPath() \n for(var x=0;x= 0 && ix2 >= 0 && ix1 < ng && ix2 < ng && y= 0 && ix2 >= 0 && ix1 < ng && ix2 < ng && x =0) {\n console.log('splicing ' + mink);\n data.splice(mink, 1);\n labels.splice(mink, 1);\n N -= 1;\n }\n\n } else {\n // add datapoint at location of click\n data.push([xt, yt]);\n labels.push(shiftPressed ? 1 : 0);\n N += 1;\n }\n\n}\n\nfunction keyDown(key){\n}\n\nfunction keyUp(key) {\n}\n\n$(function() {\n // note, globals\n viscanvas = document.getElementById('viscanvas');\n visctx = viscanvas.getContext('2d');\n visWIDTH = viscanvas.width;\n visHEIGHT = viscanvas.height;\n\n circle_data();\n $(\"#layerdef\").val(t);\n reload();\n NPGinit(20);\n\n});" }, { "path": "demo/js/image-helpers.js", "content": "\nvar loadFile = function(event) {\nvar reader = new FileReader();\nreader.onload = function(){\n var preview = document.getElementById('preview_img');\n preview.src = centerCrop(reader.result);\n preview.src = resize(preview.src);\n};\nreader.readAsDataURL(event.target.files[0]);\n};\n\nfunction centerCrop(src){\n var image = new Image();\n image.src = src;\n\n var max_width = Math.min(image.width, image.height);\n var max_height = Math.min(image.width, image.height);\n\n var canvas = document.createElement('canvas');\n var ctx = canvas.getContext(\"2d\");\n\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n canvas.width = max_width;\n canvas.height = max_height;\n ctx.drawImage(image, (max_width - image.width)/2, (max_height - image.height)/2, image.width, image.height);\n return canvas.toDataURL(\"image/png\");\n}\n\nfunction resize(src){\n var image = new Image();\n image.src = src;\n\n var canvas = document.createElement('canvas');\n canvas.width = image.width;\n canvas.height = image.height;\n var ctx = canvas.getContext(\"2d\");\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.drawImage(image, 0, 0, image.width, image.height);\n\n var dst = document.createElement('canvas');\n dst.width = image_dimension;\n dst.height = image_dimension;\n\n window.pica.WW = false;\n window.pica.resizeCanvas(canvas, dst, {\n quality: 2,\n unsharpAmount: 500,\n unsharpThreshold: 100,\n transferable: false\n }, function (err) { });\n window.pica.WW = true;\n return dst.toDataURL(\"image/png\");\n}\n \n" }, { "path": "demo/js/image_regression.js", "content": "\nvar data, labels;\nvar layer_defs, net, trainer;\n\n// create neural net\nvar t = \"layer_defs = [];\\n\\\nlayer_defs.push({type:'input', out_sx:1, out_sy:1, out_depth:2}); // 2 inputs: x, y \\n\\\nlayer_defs.push({type:'fc', num_neurons:20, activation:'relu'});\\n\\\nlayer_defs.push({type:'fc', num_neurons:20, activation:'relu'});\\n\\\nlayer_defs.push({type:'fc', num_neurons:20, activation:'relu'});\\n\\\nlayer_defs.push({type:'fc', num_neurons:20, activation:'relu'});\\n\\\nlayer_defs.push({type:'fc', num_neurons:20, activation:'relu'});\\n\\\nlayer_defs.push({type:'fc', num_neurons:20, activation:'relu'});\\n\\\nlayer_defs.push({type:'fc', num_neurons:20, activation:'relu'});\\n\\\nlayer_defs.push({type:'regression', num_neurons:3}); // 3 outputs: r,g,b \\n\\\n\\n\\\nnet = new convnetjs.Net();\\n\\\nnet.makeLayers(layer_defs);\\n\\\n\\n\\\ntrainer = new convnetjs.SGDTrainer(net, {learning_rate:0.01, momentum:0.9, batch_size:5, l2_decay:0.0});\\n\\\n\";\n\nvar batches_per_iteration = 100;\nvar mod_skip_draw = 100;\nvar smooth_loss = -1;\n\nfunction update(){\n // forward prop the data\n var W = nn_canvas.width;\n var H = nn_canvas.height;\n\n var p = oridata.data;\n\n var v = new convnetjs.Vol(1,1,2);\n var loss = 0;\n var lossi = 0;\n var N = batches_per_iteration;\n for(var iters=0;iters0) {\n for(var i=0;i 0 ? dwq : 0.0; }\n draw_activations_COLOR(activations_div, dd, scale);\n for(var q=0;q3) {\n // actual weights\n filters_div.appendChild(document.createTextNode('Weights:'));\n filters_div.appendChild(document.createElement('br'));\n for(var j=0;j' + classes_txt[preds[k].k] + ''\n }\n probsdiv.innerHTML = t;\n probsdiv.className = 'probsdiv';\n div.appendChild(probsdiv);\n\n // add it into DOM\n $(div).prependTo($(\"#testset_vis\")).hide().fadeIn('slow').slideDown('slow');\n if($(\".probsdiv\").length>200) {\n $(\"#testset_vis > .probsdiv\").last().remove(); // pop to keep upper bound of shown items\n }\n }\n testAccWindow.add(num_correct/num_total);\n $(\"#testset_acc\").text('test accuracy based on last 200 test images: ' + testAccWindow.get_average()); \n}\nvar testImage = function(img) {\n var x = convnetjs.img_to_vol(img);\n var out_p = net.forward(x);\n\n\n var vis_elt = document.getElementById(\"visnet\");\n visualize_activations(net, vis_elt);\n\n var preds =[]\n for(var k=0;k' + classes_txt[preds[k].k] + ''\n }\n \n probsdiv.innerHTML = t;\n probsdiv.className = 'probsdiv';\n div.appendChild(probsdiv);\n\n // add it into DOM\n $(div).prependTo($(\"#testset_vis\")).hide().fadeIn('slow').slideDown('slow');\n if($(\".probsdiv\").length>200) {\n $(\"#testset_vis > .probsdiv\").last().remove(); // pop to keep upper bound of shown items\n }\n}\n\nvar lossGraph = new cnnvis.Graph();\nvar xLossWindow = new cnnutil.Window(100);\nvar wLossWindow = new cnnutil.Window(100);\nvar trainAccWindow = new cnnutil.Window(100);\nvar valAccWindow = new cnnutil.Window(100);\nvar testAccWindow = new cnnutil.Window(50, 1);\nvar step_num = 0;\nvar step = function(sample) {\n\n var x = sample.x;\n var y = sample.label;\n\n if(sample.isval) {\n // use x to build our estimate of validation error\n net.forward(x);\n var yhat = net.getPrediction();\n var val_acc = yhat === y ? 1.0 : 0.0;\n valAccWindow.add(val_acc);\n return; // get out\n }\n\n // train on it with network\n var stats = trainer.train(x, y);\n var lossx = stats.cost_loss;\n var lossw = stats.l2_decay_loss;\n\n // keep track of stats such as the average training error and loss\n var yhat = net.getPrediction();\n var train_acc = yhat === y ? 1.0 : 0.0;\n xLossWindow.add(lossx);\n wLossWindow.add(lossw);\n trainAccWindow.add(train_acc);\n\n // visualize training status\n var train_elt = document.getElementById(\"trainstats\");\n train_elt.innerHTML = '';\n var t = 'Forward time per example: ' + stats.fwd_time + 'ms';\n train_elt.appendChild(document.createTextNode(t));\n train_elt.appendChild(document.createElement('br'));\n var t = 'Backprop time per example: ' + stats.bwd_time + 'ms';\n train_elt.appendChild(document.createTextNode(t));\n train_elt.appendChild(document.createElement('br'));\n var t = 'Classification loss: ' + f2t(xLossWindow.get_average());\n train_elt.appendChild(document.createTextNode(t));\n train_elt.appendChild(document.createElement('br'));\n var t = 'L2 Weight decay loss: ' + f2t(wLossWindow.get_average());\n train_elt.appendChild(document.createTextNode(t));\n train_elt.appendChild(document.createElement('br'));\n var t = 'Training accuracy: ' + f2t(trainAccWindow.get_average());\n train_elt.appendChild(document.createTextNode(t));\n train_elt.appendChild(document.createElement('br'));\n var t = 'Validation accuracy: ' + f2t(valAccWindow.get_average());\n train_elt.appendChild(document.createTextNode(t));\n train_elt.appendChild(document.createElement('br'));\n var t = 'Examples seen: ' + step_num;\n train_elt.appendChild(document.createTextNode(t));\n train_elt.appendChild(document.createElement('br'));\n\n // visualize activations\n if(step_num % 100 === 0) {\n var vis_elt = document.getElementById(\"visnet\");\n visualize_activations(net, vis_elt);\n }\n\n // log progress to graph, (full loss)\n if(step_num % 200 === 0) {\n var xa = xLossWindow.get_average();\n var xw = wLossWindow.get_average();\n if(xa >= 0 && xw >= 0) { // if they are -1 it means not enough data was accumulated yet for estimates\n lossGraph.add(step_num, xa + xw);\n lossGraph.drawSelf(document.getElementById(\"lossgraph\"));\n }\n }\n\n // run prediction on test set\n if((step_num % 100 === 0 && step_num > 0) || step_num===100) {\n test_predict();\n }\n step_num++;\n}\n\n// user settings \nvar change_lr = function() {\n trainer.learning_rate = parseFloat(document.getElementById(\"lr_input\").value);\n update_net_param_display();\n}\nvar change_momentum = function() {\n trainer.momentum = parseFloat(document.getElementById(\"momentum_input\").value);\n update_net_param_display();\n}\nvar change_batch_size = function() {\n trainer.batch_size = parseFloat(document.getElementById(\"batch_size_input\").value);\n update_net_param_display();\n}\nvar change_decay = function() {\n trainer.l2_decay = parseFloat(document.getElementById(\"decay_input\").value);\n update_net_param_display();\n}\nvar update_net_param_display = function() {\n document.getElementById('lr_input').value = trainer.learning_rate;\n document.getElementById('momentum_input').value = trainer.momentum;\n document.getElementById('batch_size_input').value = trainer.batch_size;\n document.getElementById('decay_input').value = trainer.l2_decay;\n}\nvar toggle_pause = function() {\n paused = !paused;\n var btn = document.getElementById('buttontp');\n if(paused) { btn.value = 'resume' }\n else { btn.value = 'pause'; }\n}\nvar dump_json = function() {\n document.getElementById(\"dumpjson\").value = JSON.stringify(this.net.toJSON());\n}\nvar clear_graph = function() {\n lossGraph = new cnnvis.Graph(); // reinit graph too \n}\nvar reset_all = function() {\n // reinit trainer\n trainer = new convnetjs.SGDTrainer(net, {learning_rate:trainer.learning_rate, momentum:trainer.momentum, batch_size:trainer.batch_size, l2_decay:trainer.l2_decay});\n update_net_param_display();\n\n // reinit windows that keep track of val/train accuracies\n xLossWindow.reset();\n wLossWindow.reset();\n trainAccWindow.reset();\n valAccWindow.reset();\n testAccWindow.reset();\n lossGraph = new cnnvis.Graph(); // reinit graph too\n step_num = 0;\n}\nvar load_from_json = function() {\n var jsonString = document.getElementById(\"dumpjson\").value;\n var json = JSON.parse(jsonString);\n net = new convnetjs.Net();\n net.fromJSON(json);\n reset_all();\n}\n\nvar load_pretrained = function() {\n $.getJSON(dataset_name + \"_snapshot.json\", function(json){\n net = new convnetjs.Net();\n net.fromJSON(json);\n trainer.learning_rate = 0.0001;\n trainer.momentum = 0.9;\n trainer.batch_size = 2;\n trainer.l2_decay = 0.00001;\n reset_all();\n });\n}\n\nvar change_net = function() {\n eval($(\"#newnet\").val());\n reset_all();\n}\n" }, { "path": "demo/js/npgmain.js", "content": "//Simple game engine\n//Author: Andrej Karpathy\n//License: BSD\n//This function does all the boring canvas stuff. To use it, just create functions:\n//update() gets called every frame\n//draw() gets called every frame\n//myinit() gets called once in beginning\n//mouseClick(x, y) gets called on mouse click\n//keyUp(keycode) gets called when key is released\n//keyDown(keycode) gets called when key is pushed\n\nvar canvas;\nvar ctx;\nvar WIDTH;\nvar HEIGHT; \nvar FPS;\n\nfunction drawBubble(x, y, w, h, radius)\n{\n var r = x + w;\n var b = y + h;\n ctx.beginPath();\n ctx.strokeStyle=\"black\";\n ctx.lineWidth=\"2\";\n ctx.moveTo(x+radius, y);\n ctx.lineTo(x+radius/2, y-10);\n ctx.lineTo(x+radius * 2, y);\n ctx.lineTo(r-radius, y);\n ctx.quadraticCurveTo(r, y, r, y+radius);\n ctx.lineTo(r, y+h-radius);\n ctx.quadraticCurveTo(r, b, r-radius, b);\n ctx.lineTo(x+radius, b);\n ctx.quadraticCurveTo(x, b, x, b-radius);\n ctx.lineTo(x, y+radius);\n ctx.quadraticCurveTo(x, y, x+radius, y);\n ctx.stroke();\n}\n\nfunction drawRect(x, y, w, h){\n ctx.beginPath();\n ctx.rect(x,y,w,h);\n ctx.closePath();\n ctx.fill();\n ctx.stroke();\n}\n\nfunction drawCircle(x, y, r){\n ctx.beginPath();\n ctx.arc(x, y, r, 0, Math.PI*2, true); \n ctx.closePath();\n ctx.stroke();\n ctx.fill();\n}\n\n//uniform distribution integer\nfunction randi(s, e) {\n return Math.floor(Math.random()*(e-s) + s);\n}\n\n//uniform distribution\nfunction randf(s, e) {\n return Math.random()*(e-s) + s;\n}\n\n//normal distribution random number\nfunction randn(mean, variance) {\n var V1, V2, S;\n do {\n var U1 = Math.random();\n var U2 = Math.random();\n V1 = 2 * U1 - 1;\n V2 = 2 * U2 - 1;\n S = V1 * V1 + V2 * V2;\n } while (S > 1);\n X = Math.sqrt(-2 * Math.log(S) / S) * V1;\n X = mean + Math.sqrt(variance) * X;\n return X;\n}\n\nfunction eventClick(e) {\n \n //get position of cursor relative to top left of canvas\n var x;\n var y;\n if (e.pageX || e.pageY) { \n x = e.pageX;\n y = e.pageY;\n } else { \n x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; \n y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; \n } \n x -= canvas.offsetLeft;\n y -= canvas.offsetTop;\n \n //call user-defined callback\n mouseClick(x, y, e.shiftKey, e.ctrlKey);\n}\n\n//event codes can be found here:\n//http://www.aspdotnetfaq.com/Faq/What-is-the-list-of-KeyCodes-for-JavaScript-KeyDown-KeyPress-and-KeyUp-events.aspx\nfunction eventKeyUp(e) {\n var keycode = ('which' in e) ? e.which : e.keyCode;\n keyUp(keycode);\n}\n\nfunction eventKeyDown(e) {\n var keycode = ('which' in e) ? e.which : e.keyCode;\n keyDown(keycode);\n}\n\nfunction NPGinit(FPS){\n //takes frames per secont to run at\n \n canvas = document.getElementById('NPGcanvas');\n ctx = canvas.getContext('2d');\n WIDTH = canvas.width;\n HEIGHT = canvas.height;\n canvas.addEventListener('click', eventClick, false);\n \n //canvas element cannot get focus by default. Requires to either set \n //tabindex to 1 so that it's focusable, or we need to attach listeners\n //to the document. Here we do the latter\n document.addEventListener('keyup', eventKeyUp, true);\n document.addEventListener('keydown', eventKeyDown, true);\n \n setInterval(NPGtick, 1000/FPS);\n \n myinit();\n}\n\nfunction NPGtick() {\n update();\n draw();\n}\n" }, { "path": "demo/js/pica.js", "content": "/* pica 1.0.7 nodeca/pica */!function(e){if(\"object\"==typeof exports&&\"undefined\"!=typeof module)module.exports=e();else if(\"function\"==typeof define&&define.amd)define([],e);else{var f;\"undefined\"!=typeof window?f=window:\"undefined\"!=typeof global?f=global:\"undefined\"!=typeof self&&(f=self),f.pica=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o= bkHalf && y >= bkHalf && x + bkHalf < srcW && y + bkHalf < srcH) {\n for (by = 0; by < 3; by++) {\n for (bx = 0; bx < 3; bx++) {\n sx = x + bx - bkHalf;\n sy = y + by - bkHalf;\n\n br += gs[sx + sy * srcW] * blurKernel[bPtr++];\n }\n }\n return (br - (br % _bkWsum)) / _bkWsum;\n }\n\n for (by = 0; by < 3; by++) {\n for (bx = 0; bx < 3; bx++) {\n sx = x + bx - bkHalf;\n sy = y + by - bkHalf;\n\n if (sx >= 0 && sx < srcW && sy >= 0 && sy < srcH) {\n w = blurKernel[bPtr];\n wsum += w;\n br += gs[sx + sy * srcW] * w;\n }\n bPtr++;\n }\n }\n return ((br - (br % wsum)) / wsum)|0;\n}\n\nfunction blur(src, srcW, srcH/*, radius*/) {\n var x, y,\n output = new Uint16Array(src.length);\n\n for (x = 0; x < srcW; x++) {\n for (y = 0; y < srcH; y++) {\n output[y * srcW + x] = blurPoint(src, x, y, srcW, srcH);\n }\n }\n\n return output;\n}\n\nmodule.exports = blur;\n\n},{}],2:[function(require,module,exports){\n// High speed resize with tuneable speed/quality ratio\n\n'use strict';\n\n\nvar unsharp = require('./unsharp');\n\n\n// Precision of fixed FP values\nvar FIXED_FRAC_BITS = 14;\nvar FIXED_FRAC_VAL = 1 << FIXED_FRAC_BITS;\n\n\n//\n// Presets for quality 0..3. Filter functions + window size\n//\nvar FILTER_INFO = [\n { // Nearest neibor (Box)\n win: 0.5,\n filter: function (x) {\n return (x >= -0.5 && x < 0.5) ? 1.0 : 0.0;\n }\n },\n { // Hamming\n win: 1.0,\n filter: function (x) {\n if (x <= -1.0 || x >= 1.0) { return 0.0; }\n if (x > -1.19209290E-07 && x < 1.19209290E-07) { return 1.0; }\n var xpi = x * Math.PI;\n return ((Math.sin(xpi) / xpi) * (0.54 + 0.46 * Math.cos(xpi / 1.0)));\n }\n },\n { // Lanczos, win = 2\n win: 2.0,\n filter: function (x) {\n if (x <= -2.0 || x >= 2.0) { return 0.0; }\n if (x > -1.19209290E-07 && x < 1.19209290E-07) { return 1.0; }\n var xpi = x * Math.PI;\n return (Math.sin(xpi) / xpi) * Math.sin(xpi / 2.0) / (xpi / 2.0);\n }\n },\n { // Lanczos, win = 3\n win: 3.0,\n filter: function (x) {\n if (x <= -3.0 || x >= 3.0) { return 0.0; }\n if (x > -1.19209290E-07 && x < 1.19209290E-07) { return 1.0; }\n var xpi = x * Math.PI;\n return (Math.sin(xpi) / xpi) * Math.sin(xpi / 3.0) / (xpi / 3.0);\n }\n }\n];\n\nfunction clampTo8(i) { return i < 0 ? 0 : (i > 255 ? 255 : i); }\n\nfunction toFixedPoint(num) { return Math.floor(num * FIXED_FRAC_VAL); }\n\n\n// Calculate convolution filters for each destination point,\n// and pack data to Int16Array:\n//\n// [ shift, length, data..., shift2, length2, data..., ... ]\n//\n// - shift - offset in src image\n// - length - filter length (in src points)\n// - data - filter values sequence\n//\nfunction createFilters(quality, srcSize, destSize) {\n\n var filterFunction = FILTER_INFO[quality].filter;\n\n var scale = destSize / srcSize;\n var scaleInverted = 1.0 / scale;\n var scaleClamped = Math.min(1.0, scale); // For upscale\n\n // Filter window (averaging interval), scaled to src image\n var srcWindow = FILTER_INFO[quality].win / scaleClamped;\n\n var destPixel, srcPixel, srcFirst, srcLast, filterElementSize,\n floatFilter, fxpFilter, total, fixedTotal, pxl, idx, floatVal, fixedVal;\n var leftNotEmpty, rightNotEmpty, filterShift, filterSize;\n\n var maxFilterElementSize = Math.floor((srcWindow + 1) * 2 );\n var packedFilter = new Int16Array((maxFilterElementSize + 2) * destSize);\n var packedFilterPtr = 0;\n\n // For each destination pixel calculate source range and built filter values\n for (destPixel = 0; destPixel < destSize; destPixel++) {\n\n // Scaling should be done relative to central pixel point\n srcPixel = (destPixel + 0.5) * scaleInverted;\n\n srcFirst = Math.max(0, Math.floor(srcPixel - srcWindow));\n srcLast = Math.min(srcSize - 1, Math.ceil(srcPixel + srcWindow));\n\n filterElementSize = srcLast - srcFirst + 1;\n floatFilter = new Float32Array(filterElementSize);\n fxpFilter = new Int16Array(filterElementSize);\n\n total = 0.0;\n\n // Fill filter values for calculated range\n for (pxl = srcFirst, idx = 0; pxl <= srcLast; pxl++, idx++) {\n floatVal = filterFunction(((pxl + 0.5) - srcPixel) * scaleClamped);\n total += floatVal;\n floatFilter[idx] = floatVal;\n }\n\n // Normalize filter, convert to fixed point and accumulate conversion error\n fixedTotal = 0;\n\n for (idx = 0; idx < floatFilter.length; idx++) {\n fixedVal = toFixedPoint(floatFilter[idx] / total);\n fixedTotal += fixedVal;\n fxpFilter[idx] = fixedVal;\n }\n\n // Compensate normalization error, to minimize brightness drift\n fxpFilter[destSize >> 1] += toFixedPoint(1.0) - fixedTotal;\n\n //\n // Now pack filter to useable form\n //\n // 1. Trim heading and tailing zero values, and compensate shitf/length\n // 2. Put all to single array in this format:\n //\n // [ pos shift, data length, value1, value2, value3, ... ]\n //\n\n leftNotEmpty = 0;\n while (leftNotEmpty < fxpFilter.length && fxpFilter[leftNotEmpty] === 0) {\n leftNotEmpty++;\n }\n\n if (leftNotEmpty < fxpFilter.length) {\n rightNotEmpty = fxpFilter.length - 1;\n while (rightNotEmpty > 0 && fxpFilter[rightNotEmpty] === 0) {\n rightNotEmpty--;\n }\n\n filterShift = srcFirst + leftNotEmpty;\n filterSize = rightNotEmpty - leftNotEmpty + 1;\n\n packedFilter[packedFilterPtr++] = filterShift; // shift\n packedFilter[packedFilterPtr++] = filterSize; // size\n\n packedFilter.set(fxpFilter.subarray(leftNotEmpty, rightNotEmpty + 1), packedFilterPtr);\n packedFilterPtr += filterSize;\n } else {\n // zero data, write header only\n packedFilter[packedFilterPtr++] = 0; // shift\n packedFilter[packedFilterPtr++] = 0; // size\n }\n }\n return packedFilter;\n}\n\n// Convolve image in horizontal directions and transpose output. In theory,\n// transpose allow:\n//\n// - use the same convolver for both passes (this fails due different\n// types of input array and temporary buffer)\n// - making vertical pass by horisonltal lines inprove CPU cache use.\n//\n// But in real life this doesn't work :)\n//\nfunction convolveHorizontally(src, dest, srcW, srcH, destW, filters) {\n\n var r, g, b, a;\n var filterPtr, filterShift, filterSize;\n var srcPtr, srcY, destX, filterVal;\n var srcOffset = 0, destOffset = 0;\n\n // For each row\n for (srcY = 0; srcY < srcH; srcY++) {\n filterPtr = 0;\n\n // Apply precomputed filters to each destination row point\n for (destX = 0; destX < destW; destX++) {\n // Get the filter that determines the current output pixel.\n filterShift = filters[filterPtr++];\n filterSize = filters[filterPtr++];\n\n srcPtr = (srcOffset + (filterShift * 4))|0;\n\n r = g = b = a = 0;\n\n // Apply the filter to the row to get the destination pixel r, g, b, a\n for (; filterSize > 0; filterSize--) {\n filterVal = filters[filterPtr++];\n\n // Use reverse order to workaround deopts in old v8 (node v.10)\n // Big thanks to @mraleph (Vyacheslav Egorov) for the tip.\n a = (a + filterVal * src[srcPtr + 3])|0;\n b = (b + filterVal * src[srcPtr + 2])|0;\n g = (g + filterVal * src[srcPtr + 1])|0;\n r = (r + filterVal * src[srcPtr])|0;\n srcPtr = (srcPtr + 4)|0;\n }\n\n // Bring this value back in range. All of the filter scaling factors\n // are in fixed point with FIXED_FRAC_BITS bits of fractional part.\n dest[destOffset + 3] = clampTo8(a >> 14/*FIXED_FRAC_BITS*/);\n dest[destOffset + 2] = clampTo8(b >> 14/*FIXED_FRAC_BITS*/);\n dest[destOffset + 1] = clampTo8(g >> 14/*FIXED_FRAC_BITS*/);\n dest[destOffset] = clampTo8(r >> 14/*FIXED_FRAC_BITS*/);\n destOffset = (destOffset + srcH * 4)|0;\n }\n\n destOffset = ((srcY + 1) * 4)|0;\n srcOffset = ((srcY + 1) * srcW * 4)|0;\n }\n}\n\n// Technically, convolvers are the same. But input array and temporary\n// buffer can be of different type (especially, in old browsers). So,\n// keep code in separate functions to avoid deoptimizations & speed loss.\n\nfunction convolveVertically(src, dest, srcW, srcH, destW, filters) {\n\n var r, g, b, a;\n var filterPtr, filterShift, filterSize;\n var srcPtr, srcY, destX, filterVal;\n var srcOffset = 0, destOffset = 0;\n\n // For each row\n for (srcY = 0; srcY < srcH; srcY++) {\n filterPtr = 0;\n\n // Apply precomputed filters to each destination row point\n for (destX = 0; destX < destW; destX++) {\n // Get the filter that determines the current output pixel.\n filterShift = filters[filterPtr++];\n filterSize = filters[filterPtr++];\n\n srcPtr = (srcOffset + (filterShift * 4))|0;\n\n r = g = b = a = 0;\n\n // Apply the filter to the row to get the destination pixel r, g, b, a\n for (; filterSize > 0; filterSize--) {\n filterVal = filters[filterPtr++];\n\n // Use reverse order to workaround deopts in old v8 (node v.10)\n // Big thanks to @mraleph (Vyacheslav Egorov) for the tip.\n a = (a + filterVal * src[srcPtr + 3])|0;\n b = (b + filterVal * src[srcPtr + 2])|0;\n g = (g + filterVal * src[srcPtr + 1])|0;\n r = (r + filterVal * src[srcPtr])|0;\n srcPtr = (srcPtr + 4)|0;\n }\n\n // Bring this value back in range. All of the filter scaling factors\n // are in fixed point with FIXED_FRAC_BITS bits of fractional part.\n dest[destOffset + 3] = clampTo8(a >> 14/*FIXED_FRAC_BITS*/);\n dest[destOffset + 2] = clampTo8(b >> 14/*FIXED_FRAC_BITS*/);\n dest[destOffset + 1] = clampTo8(g >> 14/*FIXED_FRAC_BITS*/);\n dest[destOffset] = clampTo8(r >> 14/*FIXED_FRAC_BITS*/);\n destOffset = (destOffset + srcH * 4)|0;\n }\n\n destOffset = ((srcY + 1) * 4)|0;\n srcOffset = ((srcY + 1) * srcW * 4)|0;\n }\n}\n\n\nfunction resetAlpha(dst, width, height) {\n var ptr = 3, len = (width * height * 4)|0;\n while (ptr < len) { dst[ptr] = 0xFF; ptr = (ptr + 4)|0; }\n}\n\n\nfunction resize(options) {\n var src = options.src;\n var srcW = options.width;\n var srcH = options.height;\n var destW = options.toWidth;\n var destH = options.toHeight;\n var dest = options.dest || new Uint8Array(destW * destH * 4);\n var quality = options.quality === undefined ? 3 : options.quality;\n var alpha = options.alpha || false;\n var unsharpAmount = options.unsharpAmount === undefined ? 0 : (options.unsharpAmount|0);\n var unsharpThreshold = options.unsharpThreshold === undefined ? 0 : (options.unsharpThreshold|0);\n\n if (srcW < 1 || srcH < 1 || destW < 1 || destH < 1) { return []; }\n\n var filtersX = createFilters(quality, srcW, destW),\n filtersY = createFilters(quality, srcH, destH);\n\n var tmp = new Uint8Array(destW * srcH * 4);\n\n // To use single function we need src & tmp of the same type.\n // But src can be CanvasPixelArray, and tmp - Uint8Array. So, keep\n // vertical and horizontal passes separately to avoid deoptimization.\n\n convolveHorizontally(src, tmp, srcW, srcH, destW, filtersX);\n convolveVertically(tmp, dest, srcH, destW, destH, filtersY);\n\n // That's faster than doing checks in convolver.\n // !!! Note, canvas data is not premultipled. We don't need other\n // alpha corrections.\n\n if (!alpha) {\n resetAlpha(dest, destW, destH);\n }\n\n if (unsharpAmount) {\n unsharp(dest, destW, destH, unsharpAmount, 1.0, unsharpThreshold);\n }\n\n return dest;\n}\n\n\nmodule.exports = resize;\n\n},{\"./unsharp\":3}],3:[function(require,module,exports){\n// Unsharp mask filter\n//\n// http://stackoverflow.com/a/23322820/1031804\n// USM(O) = O + (2 * (Amount / 100) * (O - GB))\n// GB - gaussial blur.\n//\n// brightness = 0.299*R + 0.587*G + 0.114*B\n// http://stackoverflow.com/a/596243/1031804\n//\n// To simplify math, normalize brighness mutipliers to 2^16:\n//\n// brightness = (19595*R + 38470*G + 7471*B) / 65536\n\n'use strict';\n\n\nvar blur = require('./blur');\n\n\nfunction clampTo8(i) { return i < 0 ? 0 : (i > 255 ? 255 : i); }\n\n// Convert image to greyscale, 16bits FP result (8.8)\n//\nfunction greyscale(src, srcW, srcH) {\n var size = srcW * srcH;\n var result = new Uint16Array(size); // We don't use sign, but that helps to JIT\n var i, srcPtr;\n\n for (i = 0, srcPtr = 0; i < size; i++) {\n result[i] = (src[srcPtr + 2] * 7471 // blue\n + src[srcPtr + 1] * 38470 // green\n + src[srcPtr] * 19595) >>> 8; // red\n srcPtr = (srcPtr + 4)|0;\n }\n\n return result;\n}\n\n\n// Apply unsharp mask to src\n//\n// NOTE: radius is ignored to simplify gaussian blur calculation\n// on practice we need radius 0.3..2.0. Use 1.0 now.\n//\nfunction unsharp(src, srcW, srcH, amount, radius, threshold) {\n var x, y, c, diff = 0, corr, srcPtr;\n\n // Normalized delta multiplier. Expect that:\n var AMOUNT_NORM = Math.floor(amount * 256 / 50);\n\n // Convert to grayscale:\n //\n // - prevent color drift\n // - speedup blur calc\n //\n var gs = greyscale(src, srcW, srcH);\n var blured = blur(gs, srcW, srcH, 1);\n var fpThreshold = threshold << 8;\n var gsPtr = 0;\n\n for (y = 0; y < srcH; y++) {\n for (x = 0; x < srcW; x++) {\n\n // calculate brightness blur, difference & update source buffer\n\n diff = gs[gsPtr] - blured[gsPtr];\n\n // Update source image if thresold exceeded\n if (Math.abs(diff) > fpThreshold) {\n // Calculate correction multiplier\n corr = 65536 + ((diff * AMOUNT_NORM) >> 8);\n srcPtr = gsPtr * 4;\n\n c = src[srcPtr];\n src[srcPtr++] = clampTo8((c * corr) >> 16);\n c = src[srcPtr];\n src[srcPtr++] = clampTo8((c * corr) >> 16);\n c = src[srcPtr];\n src[srcPtr] = clampTo8((c * corr) >> 16);\n }\n\n gsPtr++;\n\n } // end row\n } // end column\n}\n\n\nmodule.exports = unsharp;\n\n},{\"./blur\":1}],4:[function(require,module,exports){\n// Proxy to simplify split between webworker/plain calls\n'use strict';\n\nvar resize = require('./pure/resize');\n\nmodule.exports = function (options, callback) {\n var output = resize(options);\n\n callback(null, output);\n};\n\n},{\"./pure/resize\":2}],5:[function(require,module,exports){\n// Web Worker wrapper for image resize function\n\n'use strict';\n\nmodule.exports = function(self) {\n var resize = require('./resize');\n\n self.onmessage = function (ev) {\n resize(ev.data, function(err, output) {\n if (err) {\n self.postMessage({ err: err });\n return;\n }\n\n self.postMessage({ output: output }, [ output.buffer ]);\n });\n };\n};\n\n},{\"./resize\":4}],6:[function(require,module,exports){\nvar bundleFn = arguments[3];\nvar sources = arguments[4];\nvar cache = arguments[5];\n\nvar stringify = JSON.stringify;\n\nmodule.exports = function (fn) {\n var keys = [];\n var wkey;\n var cacheKeys = Object.keys(cache);\n \n for (var i = 0, l = cacheKeys.length; i < l; i++) {\n var key = cacheKeys[i];\n if (cache[key].exports === fn) {\n wkey = key;\n break;\n }\n }\n \n if (!wkey) {\n wkey = Math.floor(Math.pow(16, 8) * Math.random()).toString(16);\n var wcache = {};\n for (var i = 0, l = cacheKeys.length; i < l; i++) {\n var key = cacheKeys[i];\n wcache[key] = key;\n }\n sources[wkey] = [\n Function(['require','module','exports'], '(' + fn + ')(self)'),\n wcache\n ];\n }\n var skey = Math.floor(Math.pow(16, 8) * Math.random()).toString(16);\n \n var scache = {}; scache[wkey] = wkey;\n sources[skey] = [\n Function(['require'],'require(' + stringify(wkey) + ')(self)'),\n scache\n ];\n \n var src = '(' + bundleFn + ')({'\n + Object.keys(sources).map(function (key) {\n return stringify(key) + ':['\n + sources[key][0]\n + ',' + stringify(sources[key][1]) + ']'\n ;\n }).join(',')\n + '},{},[' + stringify(skey) + '])'\n ;\n return new Worker(window.URL.createObjectURL(\n new Blob([src], { type: 'text/javascript' })\n ));\n};\n\n},{}]},{},[])(\"./\")\n});" }, { "path": "demo/js/regression.js", "content": "\nvar N, data, labels;\nvar ss = 30.0; // scale for drawing\n\nvar layer_defs, net, trainer;\n\n// create neural net\nvar t = \"layer_defs = [];\\n\\\nlayer_defs.push({type:'input', out_sx:1, out_sy:1, out_depth:1});\\n\\\nlayer_defs.push({type:'fc', num_neurons:20, activation:'relu'});\\n\\\nlayer_defs.push({type:'fc', num_neurons:20, activation:'sigmoid'});\\n\\\nlayer_defs.push({type:'regression', num_neurons:1});\\n\\\n\\n\\\nnet = new convnetjs.Net();\\n\\\nnet.makeLayers(layer_defs);\\n\\\n\\n\\\ntrainer = new convnetjs.SGDTrainer(net, {learning_rate:0.01, momentum:0.0, batch_size:1, l2_decay:0.001});\\n\\\n\";\n\nvar lix=2; // layer id of layer we'd like to draw outputs of\nfunction reload() {\n eval($(\"#layerdef\").val());\n\n // refresh buttons\n var t = '';\n for(var i=1;i\";\n }\n $(\"#layer_ixes\").html(t);\n $(\"#button\"+lix).css('background-color', '#FFA');\n}\nfunction updateLix(newlix) {\n $(\"#button\"+lix).css('background-color', ''); // erase highlight\n lix = newlix;\n $(\"#button\"+lix).css('background-color', '#FFA');\n}\n \nfunction regen_data() {\n N = parseInt($(\"#num_data\").val());\n data = [];\n labels = [];\n for(var i=0;i0.0&&ua<1.0&&ub>0.0&&ub<1.0) {\n var up = new Vec(p1.x+ua*(p2.x-p1.x), p1.y+ua*(p2.y-p1.y));\n return {ua:ua, ub:ub, up:up}; // up is intersection point\n }\n return false;\n }\n \n var line_point_intersect = function(p1,p2,p0,rad) {\n var v = new Vec(p2.y-p1.y,-(p2.x-p1.x)); // perpendicular vector\n var d = Math.abs((p2.x-p1.x)*(p1.y-p0.y)-(p1.x-p0.x)*(p2.y-p1.y));\n d = d / v.length();\n if(d > rad) { return false; }\n \n v.normalize();\n v.scale(d);\n var up = p0.add(v);\n if(Math.abs(p2.x-p1.x)>Math.abs(p2.y-p1.y)) {\n var ua = (up.x - p1.x) / (p2.x - p1.x);\n } else {\n var ua = (up.y - p1.y) / (p2.y - p1.y);\n }\n if(ua>0.0&&ua<1.0) {\n return {ua:ua, up:up};\n }\n return false;\n }\n \n // Wall is made up of two points\n var Wall = function(p1, p2) {\n this.p1 = p1;\n this.p2 = p2;\n }\n \n // World object contains many agents and walls and food and stuff\n var util_add_box = function(lst, x, y, w, h) {\n lst.push(new Wall(new Vec(x,y), new Vec(x+w,y)));\n lst.push(new Wall(new Vec(x+w,y), new Vec(x+w,y+h)));\n lst.push(new Wall(new Vec(x+w,y+h), new Vec(x,y+h)));\n lst.push(new Wall(new Vec(x,y+h), new Vec(x,y)));\n }\n \n // item is circle thing on the floor that agent can interact with (see or eat, etc)\n var Item = function(x, y, type) {\n this.p = new Vec(x, y); // position\n this.type = type;\n this.rad = 10; // default radius\n this.age = 0;\n this.cleanup_ = false;\n }\n \n var World = function() {\n this.agents = [];\n this.W = canvas.width;\n this.H = canvas.height;\n \n this.clock = 0;\n \n // set up walls in the world\n this.walls = []; \n var pad = 10;\n util_add_box(this.walls, pad, pad, this.W-pad*2, this.H-pad*2);\n util_add_box(this.walls, 100, 100, 200, 300); // inner walls\n this.walls.pop();\n util_add_box(this.walls, 400, 100, 200, 300);\n this.walls.pop();\n \n // set up food and poison\n this.items = []\n for(var k=0;k<30;k++) {\n var x = convnetjs.randf(20, this.W-20);\n var y = convnetjs.randf(20, this.H-20);\n var t = convnetjs.randi(1, 3); // food or poison (1 and 2)\n var it = new Item(x, y, t);\n this.items.push(it);\n }\n }\n \n World.prototype = { \n // helper function to get closest colliding walls/items\n stuff_collide_: function(p1, p2, check_walls, check_items) {\n var minres = false;\n \n // collide with walls\n if(check_walls) {\n for(var i=0,n=this.walls.length;ieyep\n var eyep = new Vec(a.p.x + e.max_range * Math.sin(a.angle + e.angle),\n a.p.y + e.max_range * Math.cos(a.angle + e.angle));\n var res = this.stuff_collide_(a.p, eyep, true, true);\n if(res) {\n // eye collided with wall\n e.sensed_proximity = res.up.dist_from(a.p);\n e.sensed_type = res.type;\n } else {\n e.sensed_proximity = e.max_range;\n e.sensed_type = -1;\n }\n }\n }\n \n // let the agents behave in the world based on their input\n for(var i=0,n=this.agents.length;i2*Math.PI)a.angle-=2*Math.PI;\n \n // agent is trying to move from p to op. Check walls\n var res = this.stuff_collide_(a.op, a.p, true, false);\n if(res) {\n // wall collision! reset position\n a.p = a.op;\n }\n \n // handle boundary conditions\n if(a.p.x<0)a.p.x=0;\n if(a.p.x>this.W)a.p.x=this.W;\n if(a.p.y<0)a.p.y=0;\n if(a.p.y>this.H)a.p.y=this.H;\n }\n \n // tick all items\n var update_items = false;\n for(var i=0,n=this.items.length;i 5000 && this.clock % 100 === 0 && convnetjs.randf(0,1)<0.1) {\n it.cleanup_ = true; // replace this one, has been around too long\n update_items = true;\n }\n }\n if(update_items) {\n var nt = [];\n for(var i=0,n=this.items.length;i 0.75) forward_reward = 0.1 * proximity_reward;\n \n // agents like to eat good things\n var digestion_reward = this.digestion_signal;\n this.digestion_signal = 0.0;\n \n var reward = proximity_reward + forward_reward + digestion_reward;\n \n // pass to brain for learning\n this.brain.backward(reward);\n }\n }\n \n function draw_net() {\n if(simspeed <=1) {\n // we will always draw at these speeds\n } else {\n if(w.clock % 50 !== 0) return; // do this sparingly\n }\n \n var canvas = document.getElementById(\"net_canvas\");\n var ctx = canvas.getContext(\"2d\");\n var W = canvas.width;\n var H = canvas.height;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n var L = w.agents[0].brain.value_net.layers;\n var dx = (W - 50)/L.length;\n var x = 10;\n var y = 40;\n ctx.font=\"12px Verdana\";\n ctx.fillStyle = \"rgb(0,0,0)\";\n ctx.fillText(\"Value Function Approximating Neural Network:\", 10, 14);\n for(var k=0;k= 0) ctx.fillStyle = \"rgb(0,0,\" + v + \")\";\n if(v < 0) ctx.fillStyle = \"rgb(\" + (-v) + \",0,0)\";\n ctx.fillRect(x,y,10,10);\n y += 12;\n if(y>H-25) { y = 40; x += 12};\n }\n x += 50;\n y = 40;\n }\n }\n \n var reward_graph = new cnnvis.Graph();\n function draw_stats() {\n var canvas = document.getElementById(\"vis_canvas\");\n var ctx = canvas.getContext(\"2d\");\n var W = canvas.width;\n var H = canvas.height;\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n var a = w.agents[0];\n var b = a.brain;\n var netin = b.last_input_array;\n ctx.strokeStyle = \"rgb(0,0,0)\";\n //ctx.font=\"12px Verdana\";\n //ctx.fillText(\"Current state:\",10,10);\n ctx.lineWidth = 10;\n ctx.beginPath();\n for(var k=0,n=netin.length;k255)r=255;if(r<0)r=0;\n ctx.fillStyle = \"rgb(\" + r + \", 150, 150)\";\n ctx.strokeStyle = \"rgb(0,0,0)\";\n for(var i=0,n=agents.length;i0) {\n for(var i=0;i\n\n\n \n \n ConvNetJS MNIST demo\n \n \n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n

ConvNetJS MNIST demo

\n

Description

\n

\n This demo trains a Convolutional Neural Network on the MNIST digits dataset in your browser, with nothing but Javascript. The dataset is fairly easy and one should expect to get somewhere around 99% accuracy within few minutes. I used this python script to parse the original files into batches of images that can be easily loaded into page DOM with img tags.\n

\n

\n This network takes a 28x28 MNIST image and crops a random 24x24 window before training on it (this technique is called data augmentation and improves generalization). Similarly to do prediction, 4 random crops are sampled and the probabilities across all crops are averaged to produce final predictions. The network runs at about 5ms for both forward and backward pass on my reasonably decent Ubuntu+Chrome machine.\n

\n

\n By default, in this demo we're using Adadelta which is one of per-parameter adaptive step size methods, so we don't have to worry about changing learning rates or momentum over time. However, I still included the text fields for changing these if you'd like to play around with SGD+Momentum trainer.\n

\n

Report questions/bugs/suggestions to @karpathy.

\n

Training Stats

\n
\n
\n \n
\n\n
\n Learning rate: \n \n
\n\n Momentum: \n \n
\n\n Batch size: \n \n
\n\n Weight decay: \n \n
\n\n
\n
\n \n
\n
\n
\n Loss:
\n \n \n
\n \n
\n
\n
\n
\n Test an image from your computer:\n
\n \n
\n \n\n \n
\n
\n
\n
\n\n

Instantiate a Network and Trainer

\n
\n
\n \n
\n\n
\n

Network Visualization

\n
\n
\n \n
\n

Example predictions on Test set

\n
\n\t
\n
\n\n
\n\n\n\n\n\n" }, { "path": "demo/regression.html", "content": "\n\nConvNetJS demo: Classify toy 2D data\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n

ConvnetJS demo: toy 1d regression

\n\n

The simulation below is a 1-dimensional regression where a neural network is trained to regress to y coordinates for every given point x through an L2 loss. That is, the minimized cost function computes the squared difference between the predicted y-coordinate and the \"correct\" y coordinate. Every 10th of a second, all points are fed to the network multiple times through the trainer class to train the network.

\n\n

The simulation below will eval() whatever you have in the text area and reload. Feel free to explore and use ConvNetJS to instantiate your own network!

\n\n

Report questions/bugs/suggestions to @karpathy.

\n\n\n

\n\n\n
\nNumber of points to generate: \n\n
\n\n
\n

Add data points by clicking!

\n
\n\nAlso draw outputs of a layer (click layer button below) in red.\n
\n\nBrowser not supported for Canvas. Get a real browser.\n\n

Go back to ConvNetJS

\n\n
\n\n\n\n\n" }, { "path": "demo/rldemo.html", "content": "\r\n\r\n \r\n \r\n \r\n ConvNetJS Deep Q Learning Reinforcement Learning with Neural Network demo\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n
\r\n

ConvNetJS Deep Q Learning Demo

\r\n

Description

\r\n

\r\n This demo follows the description of the Deep Q Learning algorithm described in \r\n Playing Atari with Deep Reinforcement Learning, \r\n a paper from NIPS 2013 Deep Learning Workshop from DeepMind. The paper is a nice demo of a fairly\r\n standard (model-free) Reinforcement Learning algorithm (Q Learning) learning to play Atari games.\r\n

\r\n

\r\n In this demo, instead of Atari games, we'll start out with something more simple: \r\n a 2D agent that has 9 eyes pointing in different angles ahead and every eye senses 3 values\r\n along its direction (up to a certain maximum visibility distance): distance to a wall, distance to \r\n a green thing, or distance to a red thing. The agent navigates by using one of 5 actions that turn \r\n it different angles. The red things are apples and the agent gets reward for eating them. The green\r\n things are poison and the agent gets negative reward for eating them. The training takes a few tens\r\n of minutes with current parameter settings.\r\n

\r\n

\r\n Over time, the agent learns to avoid states that lead to states with low rewards, and picks actions\r\n that lead to better states instead.\r\n

\r\n

Q-Learner full specification and options

\r\n

\r\n The textfield below gets eval()'d to produce the Q-learner for this demo. This allows you to fiddle with \r\n various parameters and settings and also shows how you can use the API for your own purposes. \r\n All of these settings are optional but are listed to give an idea of possibilities.\r\n Feel free to change things around and hit reload! Documentation for all\r\n options is the paper linked to above, and there are also \r\n comments for every option in the source code javascript file.\r\n

\r\n \r\n \r\n \r\n

Q-Learner API

\r\n

It's very simple to use deeqlearn.Brain: Initialize your network:

\r\n 
\r\n   var brain = new deepqlearn.Brain(num_inputs, num_actions);\r\n
\r\n

And to train it proceed in loops as follows:

\r\n 
\r\n   var action = brain.forward(array_with_num_inputs_numbers);\r\n   // action is a number in [0, num_actions) telling index of the action the agent chooses\r\n   // here, apply the action on environment and observe some reward. Finally, communicate it:\r\n   brain.backward(reward); // <-- learning magic happens here\r\n
\r\n

That's it! Let the agent learn over time (it will take opt.learning_steps_total), and it\r\n will only get better and better at accumulating reward as it learns. Note that the agent will still take\r\n random actions with probability opt.epsilon_min even once it's fully trained. \r\n To completely disable this randomness, or change it, you can disable the learning and set epsilon_test_time to 0:

\r\n 
\r\n   brain.epsilon_test_time = 0.0; // don't make any random choices, ever\r\n   brain.learning = false;\r\n   var action = brain.forward(array_with_num_inputs_numbers); // get optimal action from learned policy\r\n
\r\n \r\n

State Visualizations

\r\n \r\n
Left: Current input state (quite a useless thing to look at). Right: Average reward over time (this should go up as agent becomes better on average at collecting rewards)
\r\n \r\n
\r\n
\r\n\r\n
\r\n (Takes ~10 minutes to train with current settings. If you're impatient, scroll down and load an example pre-trained network from pre-filled JSON)\r\n
\r\n \r\n
\r\n \r\n

Controls

\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n

I/O

\r\n

\r\n You can save and load a network from JSON here. Note that the textfield is prefilled with a\r\n pretrained network that works reasonable well, if you're impatient to let yours train enough.\r\n Just hit the load button!\r\n

\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n\r\n" }, { "path": "demo/speedtest.html", "content": "\n\n\n \n \n Simple speed test\n \n \n\n\n\n\n\n\n \n \n
\n\n\n\n\n\n" }, { "path": "demo/trainers.html", "content": "\n\n\n \n \n ConvNetJS Trainer Comparison on MNIST\n \n \n \n\n\n\n\n\n\n\n\n\n\n
\n

ConvNetJS Trainer demo on MNIST

\n

Description

\n

\n This demo lets you evaluate multiple trainers against each other on MNIST. By default I've set up a little benchmark that puts SGD/SGD with momentum/Adam/Adagrad/Adadelta/Nesterov against each other. For reference math and explanations on these refer to Matthew Zeiler's Adadelta paper (Windowgrad is Idea #1 in the paper). In my own experience, Adagrad/Adadelta are \"safer\" because they don't depend so strongly on setting of learning rates (with Adadelta being slightly better), but well-tuned SGD+Momentum almost always converges faster and at better final values.\n

\n

Report questions/bugs/suggestions to @karpathy.

\n\n \n

\n \n\n

Loss vs. Number of examples seen

\n \n\n

Testing Accuracy vs. Number of examples seen

\n \n\n

Training Accuracy vs. Number of examples seen

\n \n\n
\n\n\n\n\n\n" }, { "path": "src/convnet_export.js", "content": "(function(lib) {\n \"use strict\";\n if (typeof module === \"undefined\" || typeof module.exports === \"undefined\") {\n window.convnetjs = lib; // in ordinary browser attach library to window\n } else {\n module.exports = lib; // in nodejs\n }\n})(convnetjs);\n" }, { "path": "src/convnet_init.js", "content": "var convnetjs = convnetjs || { REVISION: 'ALPHA' };\n" }, { "path": "src/convnet_layers_dotproducts.js", "content": "(function(global) {\n \"use strict\";\n var Vol = global.Vol; // convenience\n\n // This file contains all layers that do dot products with input,\n // but usually in a different connectivity pattern and weight sharing\n // schemes: \n // - FullyConn is fully connected dot products \n // - ConvLayer does convolutions (so weight sharing spatially)\n // putting them together in one file because they are very similar\n var ConvLayer = function(opt) {\n var opt = opt || {};\n\n // required\n this.out_depth = opt.filters;\n this.sx = opt.sx; // filter size. Should be odd if possible, it's cleaner.\n this.in_depth = opt.in_depth;\n this.in_sx = opt.in_sx;\n this.in_sy = opt.in_sy;\n \n // optional\n this.sy = typeof opt.sy !== 'undefined' ? opt.sy : this.sx;\n this.stride = typeof opt.stride !== 'undefined' ? opt.stride : 1; // stride at which we apply filters to input volume\n this.pad = typeof opt.pad !== 'undefined' ? opt.pad : 0; // amount of 0 padding to add around borders of input volume\n this.l1_decay_mul = typeof opt.l1_decay_mul !== 'undefined' ? opt.l1_decay_mul : 0.0;\n this.l2_decay_mul = typeof opt.l2_decay_mul !== 'undefined' ? opt.l2_decay_mul : 1.0;\n\n // computed\n // note we are doing floor, so if the strided convolution of the filter doesnt fit into the input\n // volume exactly, the output volume will be trimmed and not contain the (incomplete) computed\n // final application.\n this.out_sx = Math.floor((this.in_sx + this.pad * 2 - this.sx) / this.stride + 1);\n this.out_sy = Math.floor((this.in_sy + this.pad * 2 - this.sy) / this.stride + 1);\n this.layer_type = 'conv';\n\n // initializations\n var bias = typeof opt.bias_pref !== 'undefined' ? opt.bias_pref : 0.0;\n this.filters = [];\n for(var i=0;i=0 && oy=0 && ox=0 && oy=0 && ox amax) amax = as[i];\n }\n\n // compute exponentials (carefully to not blow up)\n var es = global.zeros(this.out_depth);\n var esum = 0.0;\n for(var i=0;i 0) {\n // violating dimension, apply loss\n x.dw[i] += 1;\n x.dw[y] -= 1;\n loss += ydiff;\n }\n }\n\n return loss;\n },\n getParamsAndGrads: function() { \n return [];\n },\n toJSON: function() {\n var json = {};\n json.out_depth = this.out_depth;\n json.out_sx = this.out_sx;\n json.out_sy = this.out_sy;\n json.layer_type = this.layer_type;\n json.num_inputs = this.num_inputs;\n return json;\n },\n fromJSON: function(json) {\n this.out_depth = json.out_depth;\n this.out_sx = json.out_sx;\n this.out_sy = json.out_sy;\n this.layer_type = json.layer_type;\n this.num_inputs = json.num_inputs;\n }\n }\n \n global.RegressionLayer = RegressionLayer;\n global.SoftmaxLayer = SoftmaxLayer;\n global.SVMLayer = SVMLayer;\n\n})(convnetjs);\n\n" }, { "path": "src/convnet_layers_nonlinearities.js", "content": "(function(global) {\n \"use strict\";\n var Vol = global.Vol; // convenience\n \n // Implements ReLU nonlinearity elementwise\n // x -> max(0, x)\n // the output is in [0, inf)\n var ReluLayer = function(opt) {\n var opt = opt || {};\n\n // computed\n this.out_sx = opt.in_sx;\n this.out_sy = opt.in_sy;\n this.out_depth = opt.in_depth;\n this.layer_type = 'relu';\n }\n ReluLayer.prototype = {\n forward: function(V, is_training) {\n this.in_act = V;\n var V2 = V.clone();\n var N = V.w.length;\n var V2w = V2.w;\n for(var i=0;i 1/(1+e^(-x))\n // so the output is between 0 and 1.\n var SigmoidLayer = function(opt) {\n var opt = opt || {};\n\n // computed\n this.out_sx = opt.in_sx;\n this.out_sy = opt.in_sy;\n this.out_depth = opt.in_depth;\n this.layer_type = 'sigmoid';\n }\n SigmoidLayer.prototype = {\n forward: function(V, is_training) {\n this.in_act = V;\n var V2 = V.cloneAndZero();\n var N = V.w.length;\n var V2w = V2.w;\n var Vw = V.w;\n for(var i=0;i max(x)\n // where x is a vector of size group_size. Ideally of course,\n // the input size should be exactly divisible by group_size\n var MaxoutLayer = function(opt) {\n var opt = opt || {};\n\n // required\n this.group_size = typeof opt.group_size !== 'undefined' ? opt.group_size : 2;\n\n // computed\n this.out_sx = opt.in_sx;\n this.out_sy = opt.in_sy;\n this.out_depth = Math.floor(opt.in_depth / this.group_size);\n this.layer_type = 'maxout';\n\n this.switches = global.zeros(this.out_sx*this.out_sy*this.out_depth); // useful for backprop\n }\n MaxoutLayer.prototype = {\n forward: function(V, is_training) {\n this.in_act = V;\n var N = this.out_depth; \n var V2 = new Vol(this.out_sx, this.out_sy, this.out_depth, 0.0);\n\n // optimization branch. If we're operating on 1D arrays we dont have\n // to worry about keeping track of x,y,d coordinates inside\n // input volumes. In convnets we do :(\n if(this.out_sx === 1 && this.out_sy === 1) {\n for(var i=0;i a) {\n a = a2;\n ai = j;\n }\n }\n V2.w[i] = a;\n this.switches[i] = ix + ai;\n }\n } else {\n var n=0; // counter for switches\n for(var x=0;x a) {\n a = a2;\n ai = j;\n }\n }\n V2.set(x,y,i,a);\n this.switches[n] = ix + ai;\n n++;\n }\n }\n }\n\n }\n this.out_act = V2;\n return this.out_act;\n },\n backward: function() {\n var V = this.in_act; // we need to set dw of this\n var V2 = this.out_act;\n var N = this.out_depth;\n V.dw = global.zeros(V.w.length); // zero out gradient wrt data\n\n // pass the gradient through the appropriate switch\n if(this.out_sx === 1 && this.out_sy === 1) {\n for(var i=0;i tanh(x) \n // so the output is between -1 and 1.\n var TanhLayer = function(opt) {\n var opt = opt || {};\n\n // computed\n this.out_sx = opt.in_sx;\n this.out_sy = opt.in_sy;\n this.out_depth = opt.in_depth;\n this.layer_type = 'tanh';\n }\n TanhLayer.prototype = {\n forward: function(V, is_training) {\n this.in_act = V;\n var V2 = V.cloneAndZero();\n var N = V.w.length;\n for(var i=0;i=0 && oy=0 && ox a) { a = v; winx=ox; winy=oy;}\n }\n }\n }\n this.switchx[n] = winx;\n this.switchy[n] = winy;\n n++;\n A.set(ax, ay, d, a);\n }\n }\n }\n this.out_act = A;\n return this.out_act;\n },\n backward: function() { \n // pooling layers have no parameters, so simply compute \n // gradient wrt data here\n var V = this.in_act;\n V.dw = global.zeros(V.w.length); // zero out gradient wrt data\n var A = this.out_act; // computed in forward pass \n\n var n = 0;\n for(var d=0;d num_epochs * num_training_data\n this.foldix = 0; // index of active fold\n\n // callbacks\n this.finish_fold_callback = null;\n this.finish_batch_callback = null;\n\n // initializations\n if(this.data.length > 0) {\n this.sampleFolds();\n this.sampleCandidates();\n }\n };\n\n MagicNet.prototype = {\n\n // sets this.folds to a sampling of this.num_folds folds\n sampleFolds: function() {\n var N = this.data.length;\n var num_train = Math.floor(this.train_ratio * N);\n this.folds = []; // flush folds, if any\n for(var i=0;i