Brain

by bejnar

HTML

<script src="https://cdn.rawgit.com/BrainJS/brain.js/master/browser.js"></script>
<a id="train">train</a>
<a id="run">run</a>
<br>

<svg id="human" width="300" height="300">
  <rect fill="#fff" width="100%" height="100%"></rect>
</svg>

<svg id="machine" width="300" height="300">
  <rect fill="#fff" width="100%" height="100%"></rect>
</svg>

CSS

path {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

svg {
  border: 1px solid teal;
}

#machine {
  border: 1px solid goldenrod;
}

JavaScript

// BRAIN JS

var points = []

const net = new brain.recurrent.LSTMTimeStep({
  inputSize: 2,
  hiddenLayers: [10],
  outputSize: 2
});

const trainButton = document.getElementById('train')
const runButton = document.getElementById('run')

trainButton.onclick = train;
runButton.onclick = run;

function train() {
	console.log('Points ', points)
  net.train(points);
}

function run() {
  const output = net.run([[1, 3], [2, 2]])
  console.log(output)
}


// D3 line drawing
// https://bl.ocks.org/mbostock/f705fc55e6f26df29354

var line = d3.line()
    .curve(d3.curveBasis);

var svg = d3.select("svg")
    .call(d3.drag()
        .container(function() { return this; })
        .subject(function() { var p = [d3.event.x, d3.event.y]; return [p, p]; })
        .on("start", dragstarted));

function dragstarted() {
  var d = d3.event.subject,
      active = svg.append("path").datum(d),
      x0 = d3.event.x,
      y0 = d3.event.y;

  d3.event.on("drag", function() {
    var x1 = d3.event.x,
        y1 = d3.event.y,
        dx = x1 - x0,
        dy = y1 - y0;

    if (dx * dx + dy * dy > 100) {
    	var xy = [x0 = x1, y0 = y1]
    	d.push(xy);
      points.push(xy)
    }
    else {
    	d[d.length - 1] = [x1, y1];
      points[points.length - 1] = [x1, y1];
    }
    console.log(points);
    active.attr("d", line);
  });
}