Neurons

by Eduard Kulikov

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<legend>
   <input id="generateNetwork" type="button" value="Generate network" />
  <input id="nextIteration" type="button" value="next iteration" />
  <input id="trainBtn" type="button" value="train (5000 iters)" />
  <input id="autotrain" type="checkbox" />
  <label for="autotrain">Autotrain (e > 0.1)</label>
</legend>
<output></output>
<canvas />

SCSS

* {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

html, body { 
  height: 100%;
  background: #eee;
}

output {
  position: absolute;
  bottom: 5px;
  right: 5px;
  padding: 5px;
  max-height: 80%;
  overflow: auto;
}

legend {
  position: absolute;
  height: 30px;
  width: 100%;
  display: block;
  
  & > * {
    padding: 5px;
    align-items: flex-start;
  }
}

JavaScript

// INIT
console.clear();
const LEARNING_RATE = 0.5;
const LEARNING_ITERATIONS = 5000;
const LEARNING_ERROR_TARGET = 0.01;
const MAX_DEPTH = 3;
const MAX_WIDE = 3;
var network;
const canvas = document.querySelector('canvas');
var visualizer = new NetworkVisualizer(network, canvas);
var xorDataProvider = new DatasetProvider([
  [[0, 1],[1]],
  [[1, 0],[1]],
  [[1, 1],[0]],
  [[0, 0],[0]],
]);
var results = {};

document.querySelector('#generateNetwork').onclick = () =>  generateNetwork(getLayers());

document.querySelector('#trainBtn').onclick = () => {
	network.train(xorDataProvider);
  renderIO(network);
};

document.querySelector('#generateNetwork').onclick();
setInterval(
  () => document.querySelector('input:checked') && (
    network.totalError > LEARNING_ERROR_TARGET && network.learnIter < 200000
    ? document.querySelector('#trainBtn').onclick()
    : (
    	MAX_DEPTH * MAX_WIDE > Object.keys(results).length 
      && document.querySelector('#generateNetwork').onclick()
    )
  ),
  100,
);

document.querySelector('#nextIteration').onclick = () => {
  network.learn(xorDataProvider.nextDataset());
  console.log('totalError', network.totalError);
  renderIO(network);
};

function getLayers() {
	if (network) {
  	results[network.learnIter + Math.random()] = network;
    console.log(results);
  }
	const currentIteration = Object.keys(results).length;
	const depth = Math.floor(1 + currentIteration / MAX_DEPTH);

  const inner =
  	new Array(depth).fill(null)
      .map((e, dpth) => 1 + (dpth + currentIteration) % MAX_WIDE)
      .filter(i => i);

	console.log({ depth, inner, currentIteration });
	return [2, ...inner, 1];
}

function generateNetwork (layers) {
	network = new Network(
    layers, 
    LEARNING_RATE, 
    LEARNING_ITERATIONS,
  );

  if (visualizer && visualizer.interval) {
  	clearInterval(visualizer.interval);
  }

  visualizer = new NetworkVisualizer(network, canvas);
	iter = 0;
}

/** CLASSES **/
function Neuron(LEARNING_RATE) {
	this.impulse...