//Coded by lobber148 and ODLNT alert("Thanks to user ODLNT for making the drag and drop interface possible!"); alert("Press the menu button to toggle the network editor. Press execute to execute the code for the neural network. Press the train button below the canvas to train the neural network. Spamming train will reset the neural network."); class Neural_Network { constructor(structure=[]) { this.structure = structure; this.weight_matrices = []; this.layers = []; this.gradient_data = []; this.gradient_sums = []; this.loss=0; this.interval_id; } setup(optimizer) { if (optimizer === "rprop") { this.optimizer = "rprop"; this.prev_weight_matrices = []; this.prev_gradient_signs = []; this.curr_gradient = []; this.alpha = []; } this.gradient_sums = this.zeroV(this.structure.length); for (let i = 0; i < this.structure.length; i++) { this.gradient_data[i] = this.zeroV(this.structure[this.structure.length-1-i].nodes); if (i) { this.weight_matrices[i] = this.randM(this.structure[i].nodes, this.structure[i-1].nodes+1); if (optimizer === "rprop") { this.prev_weight_matrices[i] = this.randM(this.structure[i].nodes, this.structure[i-1].nodes+1); this.prev_gradient_signs[i] = this.zeroM(this.structure[i].nodes, this.structure[i-1].nodes+1); this.curr_gradient[i] = this.zeroM(this.structure[i].nodes, this.structure[i-1].nodes+1); this.alpha[i] = this.zeroM(this.structure[i].nodes, this.structure[i-1].nodes+1); } } else { this.weight_matrices[i] = this.randM(this.structure[i].nodes, this.structure[i].input_size+1); if (optimizer === "rprop") { this.prev_weight_matrices[i] = this.randM(this.structure[i].nodes, this.structure[i].input_size+1); this.prev_gradient_signs[i] = this.zeroM(this.structure[i].nodes, this.structure[i].input_size+1); this.curr_gradient[i] = this.zeroM(this.structure[i].nodes, this.structure[i].input_size+1); this.alpha[i] = this.zeroM(this.structure[i].nodes, this.structure[i].input_size+1); } } this.layers[i] = Array(this.structure[i].nodes); if (i !== this.structure.length-1 && this.layers[i].length === this.structure[i].nodes) { this.layers[i][this.layers[i].length] = 1; } } } run(x, y, epochs, learning_rate, decay_rate) { this.setup(this.optimizer); this.learning_rate = learning_rate; this.decay_rate = decay_rate; let epoch = 0; this.interval_id = setInterval(() => { this.loss = 0; for (let i = 0; i < x.length; i++) { this.feedforward(x[i].concat([1])); this.backpropagate(x[i].concat([1]), y[i], epoch, x.length); this.loss += this.difference(this.layers[this.layers.length-1], y[i])/x.length/y[i].length; } if (this.optimizer === "rprop") { this.rprop_update(epoch); } if (epoch%20 === 0 || epoch >= epochs) { decision_boundary = []; for (let x = 0; x <= 345; x++) { for (let y = 0; y <= 345; y++) { if (Math.abs(model.feedforward([x/345, y/345, 1])-0.5) < 0.1) { decision_boundary.push([x, y]); } } } } epoch++; if (epoch >= epochs) { window.clearInterval(this.interval_id); } }, 1); } feedforward(x) { for (let nx = 0; nx < this.layers.length; nx++) { if (nx === this.layers.length-1 && this.structure[nx].activation === "softmax") { let arr = []; for (let i = 0; i < this.layers[nx].length; i++) { let sum = 0; for (let j = 0; j < (this.layers.length-1?this.layers[nx-1]:x).length; j++) { sum += (this.layers.length-1?this.layers[nx-1][j]:x[j])*this.weight_matrices[nx][i][j]; } arr.push(Math.exp(sum)); } for (let i = 0; i < this.layers[nx].length; i++) { this.layers[nx][i] = arr[i]/arr.reduce((a, b) => a+b, 0); } } else if (nx) { for (let i = 0; i < this.layers[nx].length-(nx !== this.layers.length-1); i++) { let sum = 0; for (let j = 0; j < this.layers[nx-1].length; j++) { sum += this.layers[nx-1][j]*this.weight_matrices[nx][i][j]; } this.layers[nx][i] = this.structure[nx].activation === "relu"?this.relu(sum):this.sigmoid(sum); } } else { for (let i = 0; i < this.layers[nx].length-(this.layers.length > 1 | 0); i++) { let sum = 0; for (let j = 0; j < x.length; j++) { sum += x[j]*this.weight_matrices[nx][i][j]; } this.layers[nx][i] = this.structure[nx].activation === "relu"?this.relu(sum):this.sigmoid(sum); } } } return this.layers[this.layers.length-1]; } backpropagate(x, y, epoch, N) { if (this.layers.length === 1) { for (let i = 0; i < this.layers[0].length; i++) { for (let j = 0; j < x.length; j++) { let curr_gradient = 1/(1+this.decay_rate)*1/x.length*((this.layers[0][i]-y[i])*(this.structure[0].activation === "relu"?this.relu_derivative_relu_inverse(this.layers[0][i]):this.sigmoid_derivative_sigmoid_inverse(this.layers[0][i]))*x[j]); if (this.optimizer === "rprop") { this.curr_gradient[0][i][j] += curr_gradient/N; } else { this.weight_matrices[0][i][j] -= this.learning_rate/curr_gradient; } } } } else { for (let nx = this.layers.length-1; nx >= 0; nx--) { if (nx === this.layers.length-1) { for (let i = 0; i < this.layers[nx].length; i++) { this.gradient_data[0][i] = 1/x.length*(this.layers[nx][i]-y[i])*(this.structure[nx].activation === "relu"?this.relu_derivative_relu_inverse(this.layers[nx][i]):this.sigmoid_derivative_sigmoid_inverse(this.layers[nx][i])); for (let j = 0; j < this.layers[nx-1].length; j++) { if (this.optimizer === "rprop") { this.curr_gradient[nx][i][j] += 1/(1+this.decay_rate)*this.gradient_data[0][i]*this.layers[nx-1][j]/N; } else { this.weight_matrices[nx][i][j] -= this.learning_rate/(1+this.decay_rate)*this.gradient_data[0][i]*this.layers[nx-1][j]; } } } } else if (nx) { for (let j = 0; j < this.layers[nx].length-1; j++) { for (let k = 0; k < this.layers[nx-1].length; k++) { this.gradient_sums[this.layers.length-2-nx] = 0; for (let i = 0; i < this.layers[nx+1].length-(nx !== this.layers.length-2); i++) { this.gradient_sums[this.layers.length-2-nx] += this.gradient_data[this.layers.length-2-nx][i]*this.weight_matrices[nx+1][i][j]; } this.gradient_data[this.layers.length-1-nx][j] = this.gradient_sums[this.layers.length-2-nx]*(this.structure[nx].activation === "relu"?this.relu_derivative_relu_inverse(this.layers[nx][j]):this.sigmoid_derivative_sigmoid_inverse(this.layers[nx][j])); if (this.optimizer === "rprop") { this.curr_gradient[nx][j][k] += 1/(1+this.decay_rate)*this.gradient_data[nx][j]*this.layers[nx-1][k]/N; } else { this.weight_matrices[nx][j][k] -= this.learning_rate/(1+this.decay_rate)*this.gradient_data[nx][j]*this.layers[nx-1][k]; } } } } else { for (let j = 0; j < this.layers[0].length-1; j++) { for (let k = 0; k < x.length; k++) { this.gradient_sums[this.layers.length-2] = 0; for (let i = 0; i < this.layers[1].length-(this.layers.length !== 2); i++) { this.gradient_sums[this.layers.length-2] += this.gradient_data[this.layers.length-2][i]*this.weight_matrices[1][i][j]; } this.gradient_data[this.layers.length-1][j] = this.gradient_sums[this.layers.length-2]*(this.structure[0].activation === "relu"?this.relu_derivative_relu_inverse(this.layers[0][j]):this.sigmoid_derivative_sigmoid_inverse(this.layers[0][j])); if (this.optimizer === "rprop") { this.curr_gradient[0][j][k] += 1/(1+this.decay_rate)*this.gradient_data[this.layers.length-1][j]*x[k]/N; } else { this.weight_matrices[0][j][k] -= this.learning_rate/(1+this.decay_rate)*this.gradient_data[this.layers.length-1][j]*x[k]; } } } } } } } rprop_update(epoch) { for (let nx = 0; nx < this.curr_gradient.length; nx++) { for (let i = 0; i < this.curr_gradient[nx].length; i++) { for (let j = 0; j < this.curr_gradient[nx][i].length; j++) { if (!epoch) { this.alpha[nx][i][j] = this.learning_rate; this.weight_matrices[nx][i][j] -= this.alpha[nx][i][j]*this.curr_gradient[nx][i][j]; } else { if (this.prev_gradient_signs[nx][i][j] === Math.sign(this.curr_gradient[nx][i][j])) { this.weight_matrices[nx][i][j] -= this.alpha[nx][i][j]*Math.sign(this.curr_gradient[nx][i][j]); if (this.curr_gradient[nx][i][j]) { this.alpha[nx][i][j] *= 1.1; } } else { this.alpha[nx][i][j] *= 0.1; } } this.prev_weight_matrices[nx][i][j] = this.weight_matrices[nx][i][j]; this.prev_gradient_signs[nx][i][j] = Math.sign(this.curr_gradient[nx][i][j]); } } } for (let nx = 0; nx < this.curr_gradient.length; nx++) { for (let i = 0; i < this.curr_gradient[nx].length; i++) { for (let j = 0; j < this.curr_gradient[nx][i].length; j++) { this.curr_gradient[nx][i][j] = 0; } } } } difference(a1, a2, abs=true) { let sum = 0; for (let i = 0; i < a1.length; i++) { if (abs) { sum += Math.abs(a1[i]-a2[i]); } else { sum += a1[i]-a2[i]; } } return sum; } randM(rows, columns) { let matrix = []; for (let i = 0; i < rows; i++) { let row = []; for (let j = 0; j < columns; j++) { row[j] = Math.random()*2-1; } matrix[i] = row; } return matrix; } zeroM(rows, columns) { let matrix = []; for (let i = 0; i < rows; i++) { let row = []; for (let j = 0; j < columns; j++) { row[j] = 0; } matrix[i] = row; } return matrix; } randV(length) { let vector = []; for (let i = 0; i < length; i++) { vector[i] = Math.random()*2-1; } return vector; } zeroV(length) { let vector = []; for (let i = 0; i < length; i++) { vector[i] = 0; } return vector; } relu(x) {return Math.max(0, x)} relu_derivative_relu_inverse(y) {return y !== 0} sigmoid(x) {return 1/(1+Math.exp(-x))} sigmoid_derivative_sigmoid_inverse(y) {return y-y**2} } let model = new Neural_Network([ {"nodes": 20, "input_size": 2, "activation": "relu"}, {"nodes": 10, "activation": "relu"}, {"nodes": 1, "activation": "sigmoid"} ]); model.setup(optimizer="rprop"); let learning_rate = 0.03; let decay_rate = 0; let dots = []; let mouse = { x: 0, y: 0 }; let selected = false; let container = document.querySelector('#canvascontainer'); let btn = document.querySelector('#div1'); let train_samples = []; let train_labels = []; let decision_boundary = []; window.onload = function() { window.scrollTo(0, 1000); let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); ctx.fillStyle = "red"; ctx.strokeStyle ='black'; ctx.lineWidth = 2; let Dot = function(x, y, s, b, e, color) { this.x = x; this.y = y; this.s = s; this.b = b; this.e = e; this.color = color; }; Dot.prototype = { draw: function() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.s, this.b, this.e); ctx.fill(); ctx.closePath(); }, stroke: function() { ctx.stroke(); } }; let isCursorInDot = function(path) { return mouse.x > path.x-15 && mouse.x < path.x+15 && mouse.y > path.y-15 && mouse.y < path.y+15; }; if (Math.random() >= 0.5) { for (let i = 0; i < 100; i++) { let x = Math.random()*345; let y = Math.random()*345; dots.push(new Dot(x, y, 10, 0, 2*Math.PI, (x-172.5)**2+(y-172.5)**2 > 10000?"blue":"red")); } } else { for (let i = 0; i < 100; i++) { let x = Math.random()*345; let y = Math.random()*345; dots.push(new Dot(x, y, 10, 0, 2*Math.PI, x < 172.5 && y < 172.5 || x > 172.5 && y > 172.5?"blue":"red")); } } setInterval(function() { ctx.clearRect(0, 0, canvas.width, canvas.height); dots.forEach(function(item) { item.draw(); isCursorInDot(item)?item.stroke():""; }); if (selected) { selected.x = mouse.x-selected.s/2; selected.y = mouse.y-selected.s/2; selected.stroke(); } for (point of decision_boundary) { ctx.fillStyle = "black"; ctx.fillRect(point[0], point[1], 1, 1); } }, 10); canvas.onmousemove = function(e) { mouse.x = e.offsetX; mouse.y = e.offsetY; }; canvas.onmousedown = function() { if (!selected) { dots.forEach(function(item) { if (isCursorInDot(item)) { selected = item; } }); } }; canvas.onmouseup = function() { selected = false; }; canvas.ontouchmove = function(e) { let xOffset = document.querySelector("canvas").offsetLeft; let yOffset =document.querySelector("canvas").offsetTop; mouse.x = e.touches[0].clientX-xOffset; mouse.y = e.touches[0].clientY-yOffset; e.preventDefault(); }; canvas.ontouchstart = function() { if (!selected) { dots.forEach(function(item) { if (isCursorInDot(item)) { selected=item; } }); } }; canvas.ontouchend = function() { selected = false; }; document.querySelector("#dotcreator").addEventListener('click', function(ev) { dots.push(new Dot(172, 15, 10, 0, 2*Math.PI, ev.target.matches("#bluedot")?"blue":"red")); }); document.querySelector("#train-btn").addEventListener('click', function() { train_samples = []; train_labels = []; for (dot of dots) { train_samples.push([dot.x/345, dot.y/345]); train_labels.push([dot.color === "red" | 0]); } model.run(train_samples, train_labels, 10000, learning_rate, decay_rate); }); document.getElementById("menu-container").addEventListener("click", function() { document.getElementById("editor").style.display = (document.getElementById("editor").style.display === "none"?"block":"none"); }); document.getElementById("run").addEventListener("click", function() { window.clearInterval(model.interval_id); eval(document.getElementsByTagName("textarea")[0].value); }); document.getElementById("clear").addEventListener("click", function() { window.clearInterval(model.interval_id); dots = []; }); }

Classifier