Commit 313d8738 authored by Petr Kubeš's avatar Petr Kubeš

ui

parent 41374489
This diff is collapsed.
......@@ -10,17 +10,49 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src="./dist/main.js"></script>
<title>Neural network visualized</title>
</head>
<body>
<div class="container mt-3">
<h1>Neural network visualized</h1>
<p class="lead">Visualization of the simplest possible neural network. :)</p>
<div id="controls"></div>
<canvas id="content" width="800" height="500" style="border: 5px solid #2E282A"></canvas>
<h1>Neural network visualized</h1>
<p class="lead">Visualization of the simplest possible neural network. :)</p>
<hr>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h5>Input values</h5>
<div id="input-controls"></div>
</div>
<div class="col-md-4">
<h5>Network size</h5>
<div id="network-size-control">
Number of layers: <input type="number" name="layers" min="1" max="10" value="3" onchange="numOflayersChange(this.value)">
<div id="layer-controls"></div>
</div>
</div>
<div class="col-md-4">
<h5>Train</h5>
Training rate: <input type="number" name="rate" min="0" max="10" value="1"><br>
Number of iterations: <input type="number" name="rate" min="0" max="1000000" value="5000"><br>
Current iteration: TODO<br>
</div>
</div>
<hr>
<div class="row mb-3">
<div class="col-md-auto">
<button type="button" class="btn btn-primary mr-2" onclick="train()">Train</button>
<button type="button" class="btn btn-secondary">Step</button>
</div>
<div class="col-md">
TODO cost graph
</div>
</div>
</div>
<canvas id="content" width="800" height="500" style="border: 5px solid #2E282A"></canvas>
</div>
</body>
</html>
</html>
\ No newline at end of file
......@@ -104,7 +104,7 @@ export class Visualizer {
this.ctx.fillStyle = `rgb(46,40,42, 1)`
const height = 16;
this.ctx.font = `bold ${height}px serif`;
const text = drawableNeuron.activation.toFixed(2);
const text = Number(drawableNeuron.activation).toFixed(2);
this.ctx.fillText(
text,
drawableNeuron.x - this.ctx.measureText(text).width / 2,
......
......@@ -7,6 +7,38 @@ import { NeuralCore } from './neuralNetwork/NeuralCore';
visualizer.draw(neuralCore.getNeurons(), neuralCore.getConnections());
}
(window as any).numOflayersChange = (val: number) => {
hiddenSizes = new Array(val-2);
hiddenSizes.fill(3);
initCore();
}
(window as any).numOfNeruonsInLayerChange = (idx: number, val) => {
if (idx == 0) {
inputSize = Number.parseInt(val);
} else if (idx == hiddenSizes.length + 1) {
outputSize = Number.parseInt(val);
} else {
hiddenSizes[idx-1] = Number.parseInt(val);
}
initCore();
}
(window as any).train = () => {
neuralCore.addTrainingSet([1,1], [0,0]);
neuralCore.addTrainingSet([1,0], [1,0]);
neuralCore.addTrainingSet([0,1], [1,0]);
neuralCore.addTrainingSet([0,0], [0,0]);
for (let i=0;i<10000;i++) {
neuralCore.train();
}
console.log(neuralCore.getCost())
neuralCore.evaluate(input);
visualizer.draw(neuralCore.getNeurons(), neuralCore.getConnections());
}
window.onload = () => {
main();
};
......@@ -15,29 +47,41 @@ let neuralCore: NeuralCore;
let visualizer: Visualizer;
let input: number[];
let inputSize = 2;
let hiddenSizes = [3];
let outputSize = 2;
let layerControls: HTMLCanvasElement;
let inputControls: HTMLCanvasElement;
const main = () => {
const content: HTMLCanvasElement = document.getElementById('content') as HTMLCanvasElement;
const controls: HTMLCanvasElement = document.getElementById('controls') as HTMLCanvasElement;
inputControls = document.getElementById('input-controls') as HTMLCanvasElement;
layerControls = document.getElementById('layer-controls') as HTMLCanvasElement;
visualizer = new Visualizer(content);
neuralCore = new NeuralCore(2, [3], 1);
initCore();
}
const initCore = () => {
neuralCore = new NeuralCore(inputSize, hiddenSizes, outputSize);
layerControls.innerHTML = '';
layerControls.innerHTML += `Input size: <input type="number" name="layers" min="1" max="10" value="${inputSize}" onchange="numOfNeruonsInLayerChange(0, this.value)"><br>`;
for (let i = 1; i < hiddenSizes.length+1; i++) {
layerControls.innerHTML += `Layer ${i} size: <input type="number" name="layers" min="1" max="10" value="${hiddenSizes[i-1]}" onchange="numOfNeruonsInLayerChange(${i}, this.value)"><br>`;
}
layerControls.innerHTML += `Output size: <input type="number" name="layers" min="1" max="10" value="${outputSize}" onchange="numOfNeruonsInLayerChange(${hiddenSizes.length + 1}, this.value)"><br>`;
// Set default values
input = new Array(neuralCore.getInputSize());
input.fill(1);
neuralCore.addTrainingSet([1, 1], [0]);
neuralCore.addTrainingSet([1, 0], [1]);
neuralCore.addTrainingSet([0, 1], [1]);
neuralCore.addTrainingSet([0, 0], [0]);
for (let i = 0; i < 10000; i++) {
neuralCore.train();
inputControls.innerHTML = '';
for (let i = 0; i < neuralCore.getInputSize(); i++) {
inputControls.innerHTML += `Neuron ${i}: <input style="position: relative; top: 5px;" type="range" min="0" max="1" value="1" step="0.05" id="slider${i}" oninput="slide(${i}, this.value);"><br>`;
}
neuralCore.evaluate(input);
visualizer.draw(neuralCore.getNeurons(), neuralCore.getConnections());
for (let i = 0; i < neuralCore.getInputSize(); i++) {
controls.innerHTML += `<input type="range" min="0" max="1" value="1" step="0.05" id="slider${i}" oninput="slide(${i}, this.value);"><br>`;
}
}
\ No newline at end of file
......@@ -22,6 +22,11 @@ export class NeuralCore {
this.hiddenLayerSizes = hiddenLayerSizes;
this.outputSize = outputSize;
this.layerCnt = hiddenLayerSizes.length + 2;
// Reset
this.neurons = [];
this.connections = [];
this.init();
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment