Visual part updated

README.md

@@ -0,0 +1,8 @@
+# Nuero-JS
+Another one implementation of neural network algorithm with backpropagation learning. 
+
+## Demo
+Check demo on GitHub page: https://s-litvin.github.io/neuro-js/
+
+![alt text](https://raw.githubusercontent.com/s-litvin/neuro-js/master/preview.png)
+

main.js

@@ -4,21 +4,23 @@ ctx = cnvs.getContext('2d');
 cnvs.width  = 800;
 cnvs.height = 700;
 
-
 // --(i1)--(n1)
 //       \/    \__(o1)
 //       /\    /
-// --(i2)--(n2)
+// --(i1)--(n1)
+//       \/    \__(o2)
+//       /\    /
+// --(i3)--(n3)
 
-let perceptron = new Perceptron(1);
+let perceptron = new Perceptron(0.98, 0.001);
 
 // Creating neurones
-perceptron.addNeuron(new Cell(), 'i1', 1);
-perceptron.addNeuron(new Cell(), 'i2', 1);
-perceptron.addNeuron(new Cell(), 'i3', 1);
+perceptron.addNeuron(new Cell(true), 'i1', 1);
+perceptron.addNeuron(new Cell(true), 'i2', 1);
+perceptron.addNeuron(new Cell(true), 'i3', 1);
 perceptron.addNeuron(new Cell(), 'n1', 2, 0.04);
 perceptron.addNeuron(new Cell(), 'n2', 2, 0.03);
-perceptron.addNeuron(new Cell(), 'n3', 2, 0.03);
+perceptron.addNeuron(new Cell(), 'n3', 2, 0.13);
 perceptron.addNeuron(new Cell(), 'o1', 3);
 perceptron.addNeuron(new Cell(), 'o2', 3);
 
@@ -46,9 +48,9 @@ let inputNeuron3  = perceptron.getNeuron('i3');
 let outputNeuron1 = perceptron.getNeuron('o1');
 let outputNeuron2 = perceptron.getNeuron('o2');
 
-inputNeuron1.cell.setInput(0.5);
-inputNeuron2.cell.setInput(0.33);
-inputNeuron3.cell.setInput(0.33);
+inputNeuron1.cell.setInput(0.51);
+inputNeuron2.cell.setInput(0.12);
+inputNeuron3.cell.setInput(0.45);
 outputNeuron1.cell.setTargetOutput(0.9);
 outputNeuron2.cell.setTargetOutput(0.1);
 
@@ -66,9 +68,7 @@ function calcNet(perceptron) {
     // Learning
     perceptron.backPropagation();
 
-    if (Math.pow(perceptron.getNetError(), 2) >= 0.00001) {
-        setInterval(function () { if (Math.pow(perceptron.getNetError(), 2) > 0.00001) {calcNet(perceptron);}}, 400);
-    }
+    setInterval(function () { calcNet(perceptron);}, 100);
 }
 
 calcNet(perceptron);
@@ -84,6 +84,9 @@ function drawNet(perceptron) {
 
     ctx.fillStyle = "white";
     ctx.fillText('Epoch: ' + perceptron.getEpoch(), 20, 15);
+    ctx.fillText('Learning rate: ' + perceptron.getLearningRate(), 120, 15);
+    ctx.fillText('Net error: ' + perceptron.getNetError().toFixed(7), 260, 15);
+    ctx.fillText('Err threshold: ' + perceptron.getErrorTrashold(), 420, 15);
 
     let neuronPositions = {};
 
@@ -119,22 +122,29 @@ function drawNet(perceptron) {
                 }
             }
 
-            ctx.fillStyle = "#ccc";
+            ctx.fillStyle = "#ddd";
             ctx.fillRect(posX, posY, neuronSize, neuronSize);
 
-            ctx.fillStyle = "#555555";
+            ctx.fillStyle = "#555";
             ctx.fillText(neuron.id, neuronSize / 5 + posX, neuronSize / 1.6  + posY);
 
             if (rightLinksCount === 0) {
-                ctx.fillStyle = "#333333";
+                ctx.fillStyle = "#333";
                 ctx.fillText('out: ' + neuron.cell.getOutput().toFixed(3), neuronSize * 1.3 + posX, neuronSize / 2.3 + posY);
                 ctx.fillStyle = "grey";
                 ctx.fillText('target: ' + neuron.cell.getTargetOutput().toFixed(3), neuronSize * 1.3 + posX, neuronSize / 1 + posY);
             }
 
             if (leftLinksCount === 0) {
-                ctx.fillStyle = "#333333";
-                ctx.fillText('in: ' + neuron.cell.input.toFixed(3), neuronSize * -0.4 + posX, posY - neuronSize / 5);
+                ctx.fillStyle = "#333";
+                ctx.fillText('in: ' + neuron.cell.input.toFixed(2), neuronSize * -0.4 + posX, posY - neuronSize / 5);
+            }
+
+            if (neuron.bias !== 0) {
+                ctx.fillStyle = "#c3c";
+                ctx.font = "11px Arial";
+                ctx.fillText('b: ' + neuron.bias.toFixed(2), neuronSize * -0.1 + posX, posY - neuronSize / 5);
+                ctx.font = "14px Arial";
             }
         }
 

neuron.js

@@ -1,11 +1,12 @@
 class Cell
 {
-	constructor() {
+	constructor(isInput = false) {
 		this.setInput(0);
 		this.setOutput(0);
 		this.setTargetOutput(null);
 		this.error = 0;
 		this.derivative = 0;
+		this.isInput = isInput;
 	}
 
 	setInput(input) {
@@ -47,7 +48,12 @@ class Cell
 	}
 
 	calcOutput(inputSum) {
-		this.setOutput(1 / (1 + Math.pow(2.718, -1 * inputSum)));
+		if (this.isInput) {
+			this.setOutput(inputSum);
+		} else {
+			this.setOutput(1 / (1 + Math.pow(2.718, -1 * inputSum)));
+		}
+
 		this.derivative = this.getOutput() * (1 - this.getOutput());
 
 		return this.getOutput();

perceptron.js

@@ -1,13 +1,22 @@
 class Perceptron
 {
-	constructor(learningRate = 0.01) {
+	constructor(learningRate = 0.1, errorTrashhold = 0.0001) {
 		this.cells = [];
 		this.layers = [];
 		this.totalError = 0;
 		this.learningRate = learningRate;
+		this.errorTrashold = errorTrashhold;
 		this.resetEpoch();
 	}
 
+	getLearningRate() {
+		return this.learningRate;
+	}
+
+	getErrorTrashold() {
+		return this.errorTrashold;
+	}
+
 	getEpoch() {
 		return this.epoch;
 	}
@@ -165,6 +174,11 @@ class Perceptron
 	}
 
 	backPropagation() {
+
+		if (this.getEpoch() > 1 && this.getErrorTrashold() > Math.abs(this.getNetError())) {
+			return;
+		}
+
 		this.calcErrors();
 		this.updateWeights();
 	}