SynapticJS Neural Network Demo with MNIST Dataset

This SynapticJS demo tutorial is based on the github workshop https://github.com/cazala/synaptic-workshop

STEPS

1) Create Stackblitz project (Vanilla JavaScript)

2) Edit package.json

{ "name": "synaptic-workshop", "version": "1.0.0", "description": "Synaptic workshop for Meetup 2017", "main": "index.js", "keywords": [ "synaptic", "workshop" ], "author": "Juan Cazala", "license": "MIT", "dependencies": { "mnist": "^1.0.5", "synaptic": "^1.0.8" } }

3) Edit index.html

<script src="./node_modules/synaptic/dist/synaptic.js"></script> <script src="./node_modules/mnist/dist/mnist.js"></script> <script src="./index.js"></script> <style> .yei { color: green; } .nope { color: red; } </style> <canvas id="digit" width="24" height="24"></canvas> <div id="guess"></div>

4) Edit index.js

var synaptic = require('synaptic') var mnist = require('mnist') var Architect = synaptic.Architect var Trainer = synaptic.Trainer var Network = synaptic.Network var Layer = synaptic.Layer var Neuron = synaptic.Neuron var net = new Architect.Perceptron(24 * 24, 20, 10) var trainer = new Trainer(net) var set = mnist.set(1000).training; trainer.trainAsync(set, { rate: 0.1, iterations: 10, log: true }) .then(test) function test() { var number = Math.random() * 10 | 0 var input = mnist[number].get() var output = net.activate(input) var max = output.reduce((max, activation) => Math.max(max, activation), 0) var guess = output.indexOf(max) var context = document.getElementById('digit').getContext('2d') mnist.draw(input, context) node = document.getElementById('guess') node.classList = [guess == number ? 'yei' : 'nope'] node.innerHTML = guess; setTimeout(test, 500) }

WAIT FOR THE SCRIPT TO PROCESS NEURAL NETWORK FOR A WHILE BEFORE IT DISPLAYS THE IMAGE AND GUESS NUMBER (after the console output 10 iterations).
Machine Learning Demo Using JavaScript