function loadCss(t) {
var n = document.getElementsByTagName("head")[0],
e = document.createElement("link");
e.rel = "stylesheet", e.type = "text/css", e.href = t, e.media = "all", n.appendChild(e)
}
const PIXELS = 28;
let canvas, ctx, nn, mnist, flag = !1, prevX = 0, currX = 0, prevY = 0, currY = 0, dot_flag = !1, scaleC = 6, x = "black", y = 2;
function init() {
canvas = document.getElementById("can"), ctx = canvas.getContext("2d"), w = canvas.width, h = canvas.height, canvas.addEventListener("mousemove", function(t) {
findxy("move", t)
}, !1), canvas.addEventListener("mousedown", function(t) {
findxy("down", t)
}, !1), canvas.addEventListener("mouseup", function(t) {
findxy("up", t)
}, !1), canvas.addEventListener("mouseout", function(t) {
findxy("out", t)
}, !1)
}
function draw() {
ctx.beginPath(), ctx.moveTo(prevX / scaleC, prevY / scaleC), ctx.lineTo(currX / scaleC, currY / scaleC), ctx.strokeStyle = x, ctx.lineWidth = y, ctx.stroke(), ctx.closePath()
}
function erase() {
ctx.clearRect(0, 0, w, h)
}
function findxy(t, n) {
"down" = t && (prevX = currX, prevY = currY, currX = n.clientX - canvas.offsetLeft, currY = n.clientY - canvas.offsetTop, flag = !0, (dot_flag = !0) && (ctx.beginPath(), ctx.fillStyle = x, ctx.fillRect(currX, currY, 2, 2), ctx.closePath(), dot_flag = !1)), "up" != t && "out" != t || (flag = !1), "move" == t && flag && (prevX = currX, prevY = currY, currX = n.clientX - canvas.offsetLeft, currY = n.clientY - canvas.offsetTop, draw())
}
class ANN {
constructor(t = [2, 2, 2], n = [sigmoid, sigmoid], e = .2, i = !1) {
this.structure = t, this.activation = n, this.lr = e, this.bias = i, this.x = this.generateLayers(), this.w = this.generateWeights(), this.activation.splice(0, 0, null), this.trainingExampleFed = 0, this.testingExampleFed = 0, this.rightPrediction = 0
}
generateLayers() {
let t = [];
for (let n in this.structure) t.push(new Matrix(this.structure[n], 1));
return t
}
generateWeights() {
let t = this.structure.length - 1, n = new Array(t - 1);
n[0] = null;
for (let e = 0; e < t; e++) {
let t = this.x[e].rows, i = this.x[e + 1].rows;
n[e + 1] = new Matrix(i, t), n[e + 1].randomize()
}
return n
}
net(t) {
return Matrix.multiply(this.w[t], this.x[t - 1])
}
act(t) {
return this.net(t).map(this.activation[t].func)
}
onlyPropagate(t) {
t = this.transformInput(t), this.x[0] = t;
for (let t = 1; t < this.x.length; t++) this.x[t] = this.act(t)
}
propagate(t) {
this.x[0] = t;
for (let t = 1; t < this.x.length; t++) this.x[t] = this.act(t)
}
calculateError(t) {
let n = 0;
for (let e in t.data)
for (let i in t.data[e]) n += Math.pow(t.data[e][i] - this.x[this.x.length - 1].data[e][i], 2) / 2;
return n
}
backpropagate(t) {
let n = [], e = Matrix.subtract(t, this.x[this.x.length - 1]), i = Matrix.map(this.x[this.x.length - 1], this.activation[this.x.length - 1].dfunc);
i.multiply(e), i.multiply(this.lr);
let s = Matrix.multiply(i, Matrix.transpose(this.x[this.x.length - 2]));
this.w[this.x.length - 1].add(s), n[this.x.length - 1] = e;
for (let t = this.x.length - 2; t > 0; t--) {
let e = Matrix.multiply(Matrix.transpose(this.w[t + 1]), n[t + 1]), i = Matrix.map(this.x[t], this.activation[t].dfunc);
i.multiply(e), i.multiply(this.lr);
let s = Matrix.multiply(i, Matrix.transpose(this.x[t - 1]));
this.w[t].add(s), n[t] = e
}
}
backpropagateCodingTrain(t) {
let n = [], e = Matrix.subtract(t, this.x[this.x.length - 1]), i = Matrix.map(this.x[this.x.length - 1], this.activation[this.x.length - 1].dfunc);
i.multiply(e), i.multiply(this.lr);
let s = Matrix.multiply(i, Matrix.transpose(this.x[this.x.length - 2]));
this.w[this.x.length - 1].add(s), n[this.x.length - 1] = e;
for (let t = this.x.length - 2; t > 0; t--) {
let e = Matrix.multiply(Matrix.transpose(this.w[t + 1]), n[t + 1]), i = Matrix.map(this.x[t], this.activation[t].dfunc);
i.multiply(e), i.multiply(this.lr);
let s = Matrix.multiply(i, Matrix.transpose(this.x[t - 1]));
this.w[t].add(s), n[t] = e
}
}
train(t, n) {
t = this.transformInput(t), n = this.transformtarget(n), this.propagate(t), this.backpropagate(n);
let e = outNumeric(n), i = this.getPrediction();
this.trainingExampleFed += 1, e == i && (this.rightPrediction += 1), console.log("error: ", this.calculateError(n).toFixed(4), " target: ", e, " prediction: ", i, " examples fed: ", this.trainingExampleFed, e == i ? "GOT IT" : " ")
}
test(t, n) {
t = this.transformInput(t), n = this.transformtarget(n), this.propagate(t);
let e = outNumeric(n), i = this.getPrediction();
this.testingExampleFed += 1, e == i && (this.rightPrediction += 1), console.log("error: ", this.calculateError(n).toFixed(4), " target: ", e, " prediction: ", i, " precision: ", this.rightPrediction, "/", this.testingExampleFed, e == i ? "GOT IT" : " ")
}
getPrediction() {
return outNumeric(this.x[this.x.length - 1])
}
transformInput(t) {
return t = Array.from(t)).map(t = > t / 255), t = Matrix.fromArray(t)
}
transformtarget(t) {
return t = outOneHot(this.structure[this.structure.length - 1], t), t = Matrix.fromArray(t)
}
generateHtml() {
return '\n <div id="ANNGenerator"><h4>Generalized ANN</h4>\n <p class="ANNSubtitle"><i>customize it</i></p>\n <div id="LRChanger">Learning Rate = \n <span onclick="nn.showLRChanger()" class="jsLink">' + this.lr + "</span>\n </div>\n <br>\n " + this.generateInputSection() + "\n " + this.generateHiddenSections() + "\n " + this.generateOutputSection() + "\n </div>\n "
}
showLRChanger() {
$("#LRChanger").html('\n Learning rate = \n <input type="number" id="ANNLR" value="' + this.lr + '" />\n <button onclick="nn.changeLR()">Save</button>\n ')
}
changeLR() {
this.lr = Number($("#ANNLR").val()), $("#ANNDiv").html(this.generateHtml())
}
generateInputSection() {
return '\n <div class="ANNSection">\n <div class="ANNTitleContainer">\n <span class="ANNTitle"><b>Input layer</b></span>\n <span class="ANNFunction"></span>\n </div>\n <div class="ANNCenter"># of Neurons: <b>' + this.structure[0] + '</b></div>\n <div class="ANNNeurons"><b><i>I</i></b><sub>0</sub> ... <b><i>I</i></b><sub>' + (this.structure[0] - 1) + "</sub></div>\n </div>\n "
}
generateHiddenSection(t) {
return '\n <div class="ANNSectionAdd" onclick="nn.createNewLayer(' + t + ')">\n <b>+</b>\n </div>\n <div class="ANNSection" id="hiddenLayer' + t + '">\n <div class="ANNTitleContainer">\n <span class="ANNTitle"><b>Hidden ' + t + ' layer</b></span>\n <span class="ANNFunction">f = ' + this.activation[t].name + '</span>\n </div>\n <div class="ANNCenter"># of Neurons: <b>' + this.structure[t] + '</b></div>\n <div class="ANNNeurons">\n <span class="ANNNeuronNames">\n <b><i>H' + t + "</i></b><sub>0</sub> ... \n <b><i>H" + t + "</i></b><sub>" + (this.structure[t] - 1) + '</sub>\n </span>\n <span class="ANNSettings">\n <span class="jsLink" onclick="$(\'#hiddenLayer' + t + "').html(nn.generateHiddenSectionSettings(" + t + '))">change settings</span>\n <span>\n </div>\n </div>\n '
}
generateHiddenSectionSettings(t) {
return '\n <div class="ANNSection" id="hiddenLayer' + t + '">\n <div class="ANNTitleContainer">\n <span class="ANNTitle"><b>Hidden ' + t + ' layer</b></span>\n <span class="ANNFunction">' + this.activationFunctionSelection("hidFunction" + t) + '</span>\n </div>\n <div class="ANNCenter"># of Neurons: \n <input type="number" id="hidNumber' + t + '" value="' + this.structure[t] + '">\n </div>\n <div class="ANNNeurons">\n <span class="ANNNeuronNames">\n <b><i>H' + t + "</i></b><sub>0</sub> ... \n <b><i>H" + t + "</i></b><sub>" + (this.structure[t] - 1) + '</sub>\n </span>\n <span class="ANNSettings">\n <span class="jsLink" onclick="nn.updateHiddenSettings(' + t + ", $('#hidNumber" + t + "').val(), $('#hidFunction" + t + "').val())\">save settings</span>\n <span>\n </div>\n </div>\n "
}
updateHiddenSettings(t, n, e) {
this.structure[t] = Number(n), this.activation[t] = allFunctions[Number(e)], this.x = this.generateLayers(), this.w = this.generateWeights(), this.writeHtmlOnPage()
}
generateOutputSectionSettings() {
return '\n <div class="ANNTitleContainer">\n <span class="ANNTitle"><b>Output layer</b></span>\n <span class="ANNFunction">' + this.activationFunctionSelection("outFunction") + ' </span>\n </div>\n <div class="ANNCenter"># of Neurons: \n <input type="number" id="outNumber" value="' + this.structure[this.structure.length - 1] + '">\n </div>\n <div class="ANNNeurons">\n <span class="ANNNeuronNames">\n <b><i>O</i></b><sub>0</sub> ... \n <b><i>O</i></b><sub>' + (this.structure[this.structure.length - 1] - 1) + '</sub>\n </span>\n <span class="ANNSettings">\n <span class="jsLink" onclick="nn.updateOutputSettings($(\'#outNumber\').val(), $(\'#outFunction\').val())">save settings</span>\n <span>\n </div>\n '
}
generateHiddenSections() {
let t = "";
for (let n = 1; n < this.structure.length - 1; n++) t += this.generateHiddenSection(n);
return t
}
generateOutputSection() {
return '\n <div class="ANNSectionAdd" onclick="nn.createNewLayer(' + (this.structure.length - 1) + ')">\n <b>+</b>\n </div>\n <div class="ANNSection" id="outputLayer">\n <div class="ANNTitleContainer">\n <span class="ANNTitle"><b>Output layer</b></span>\n <span class="ANNFunction">f = ' + this.activation[this.structure.length - 1].name + ' </span>\n </div>\n <div class="ANNCenter"># of Neurons: <b>' + this.structure[this.structure.length - 1] + '</b></div>\n <div class="ANNNeurons">\n <span class="ANNNeuronNames">\n <b><i>O</i></b><sub>0</sub> ... \n <b><i>O</i></b><sub>' + (this.structure[this.structure.length - 1] - 1) + '</sub>\n </span>\n <span class="ANNSettings">\n <span class="jsLink" onclick="$(\'#outputLayer\').html(nn.generateOutputSectionSettings())">change settings</span>\n <span>\n </div>\n </div>\n '
}
generateOutputSectionSettings() {
return '\n <div class="ANNTitleContainer">\n <span class="ANNTitle"><b>Output layer</b></span>\n <span class="ANNFunction">' + this.activationFunctionSelection("outFunction") + ' </span>\n </div>\n <div class="ANNCenter"># of Neurons: \n <input type="number" id="outNumber" value="' + this.structure[this.structure.length - 1] + '">\n </div>\n <div class="ANNNeurons">\n <span class="ANNNeuronNames">\n <b><i>O</i></b><sub>0</sub> ... \n <b><i>O</i></b><sub>' + (this.structure[this.structure.length - 1] - 1) + '</sub>\n </span>\n <span class="ANNSettings">\n <span class="jsLink" onclick="nn.updateOutputSettings($(\'#outNumber\').val(), $(\'#outFunction\').val())">save settings</span>\n <span>\n </div>\n '
}
updateOutputSettings(t, n) {
this.structure[this.structure.length - 1] = Number(t), this.activation[this.activation.length - 1] = allFunctions[Number(n)], this.x = this.generateLayers(), this.w = this.generateWeights(), this.writeHtmlOnPage()
}
activationFunctionSelection(t) {
let n = "";
for (let t in allFunctions) n += '<option value="' + t + '">' + allFunctions[t].name + "</option>";
return '\n <label for="' + t + '">f = </label>\n <select id="' + t + '">\n ' + n + "\n </select> \n "
}
createNewLayer(t) {
this.structure.splice(t, 0, 2), this.activation.splice(t, 0, allFunctions[0]), this.x = this.generateLayers(), this.w = this.generateWeights(), this.writeHtmlOnPage()
}
writeHtmlOnPage() {
$("#ANNDiv").html(this.generateHtml())
}
}
loadCss("https://ancientbrain.com/uploads/stefano/general_ann_style.css"), loadCss("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@1,700&family=Nunito:wght@300&display=swap");
let n_unseen = 300;
function getUnseenScore() {
let t = [];
for (let n = 0; n < mnist.test_images.length; n++) t.push(n);
let n = [];
for (let e = 0; e < n_unseen; e++) {
let e = Math.floor(Math.random() * t.length);
n.push(t.splice(e, 1)[0])
}
let e = 0;
for (let t = 0; t < n_unseen; t++) nn.onlyPropagate(mnist.test_images[n[t]]), nn.getPrediction() == mnist.test_labels[n[t]] && (e += 1);
$("#scoreDiv").html($("#scoreDiv").html() + "<br>Score on unseen data: " + (e / n_unseen * 100).toFixed(2) + "%")
}
function loadData() {
loadMNIST(function(t) {
mnist = t, console.log("All data loaded into mnist object:"), console.log(mnist), AB.removeLoading()
})
}
$.getScript("/uploads/codingtrain/matrix.js", function() {
$.getScript("/uploads/stefano/utils.js", function() {
$.getScript("/uploads/stefano/generalANN.js", function() {
$.getScript("/uploads/codingtrain/mnist.js", function() {
console.log("All JS loaded"), loadData(), (nn = new ANN([784, 64, 10])).writeHtmlOnPage()
})
})
})
});
let epoch_size = 20, tests_number = 100, trains_number = 6 * tests_number, epoch = 0;
const max_epochs = 6e4 / epoch_size;
let super_epoch = 15, scoreArray = [];
function executeEpochTraining() {
let t = epoch * epoch_size;
if (epoch < max_epochs) {
for (let n = t; n < t + epoch_size; n++) nn.train(mnist.train_images[n], mnist.train_labels[n]);
epoch += 1, scoreArray.push({
epoch: epoch,
value: (nn.rightPrediction / nn.trainingExampleFed * 100).toFixed(2)
})
} else console.log("Training completed")
}
function executeSuperEpoch() {
if (epoch < max_epochs)
for (let t = 0; t < super_epoch; t++) executeEpochTraining();
createGraph(), getUnseenScore()
}
function createGraph() {
$("#my_dataviz").html(""), data = scoreArray;
let t = 10, n = 30, e = 40, i = 40, s = 500 - i - n, a = 300 - t - e, r = d3.select("#my_dataviz").append("svg").attr("width", s + i + n).attr("height", a + t + e).append("g").attr("transform", "translate(" + i + "," + t + ")"), l = d3.scaleLinear().domain([0, 100]).range([a, 0]);
r.append("g").call(d3.axisLeft(l));
let o = d3.scaleLinear().domain([1, max_epochs]).range([0, s]);
r.append("g").attr("transform", "translate(0," + a + ")").call(d3.axisBottom(o)), r.append("path").datum(data).attr("fill", "none").attr("stroke", "steelblue").attr("stroke-width", 2).attr("d", d3.line().x(function(t) {
return o(t.epoch * epoch_size)
}).y(function(t) {
return l(t.value)
})), r.append("text").attr("transform", "rotate(-90)").attr("y", 0 - i).attr("x", 0 - a / 2).attr("dy", ".8em").style("text-anchor", "middle").text("Score"), r.append("text").attr("transform", "translate(" + s / 2 + " ," + (a + t + 25) + ")").attr("dx", ".8em").style("text-anchor", "middle").text("Epoch"), void 0 != nn && $("#scoreDiv").html("Current score: " + (nn.rightPrediction / nn.trainingExampleFed * 100).toFixed(2) + "%<br>Example fed: " + nn.trainingExampleFed)
}
function resetANN() {
location.reload()
}
function executeTraining() {
for (let t = 0; t < trains_number; t++) nn.train(mnist.train_images[t], mnist.train_labels[t])
}
function executeTesting() {
for (let t = 0; t < tests_number; t++) nn.test(mnist.test_images[t], mnist.test_labels[t])
}
function predictInput() {
let t = ctx.getImageData(0, 0, w, h), n = [];
for (let e = 0; e < t.data.length; e++)(e + 1) % 4 == 0 && n.push(t.data[e]);
let e = new Uint8Array(n);
nn.onlyPropagate(e), $("#predictionDiv").html("Prediction: " + nn.getPrediction())
}
$.getScript("https://d3js.org/d3.v4.js", function() {
console.log("D3JS loaded"), createGraph()
}), document.write('\n\n<html>\n <body onload="init()">\n <div style="position:relative; display:inline-block">\n <div id="ANNDiv" style="position:relative; display:inline-block"></div>\n <div style="display:block">\n <button onclick="executeSuperEpoch()" style="display:inline-block; width:150px; margin-top:15px">Feed ' + epoch_size * super_epoch + ' examples</button>\n <button onclick="resetANN()" style="display:inline-block; width:90px; margin-top:15px">Reset ANN</button>\n </div>\n </div>\n <div style="display:inline-block">\n <div id="my_dataviz" style="display:inline-block"></div>\n <div id="scoreDiv" style="display:block; margin-top:20px">Current score: 0%</div>\n </div>\n Draw\n <canvas id="can" width="28" height="28" style="margin:20px;position:relative;border:2px solid;width:' + 28 * scaleC + "px; height:" + 28 * scaleC + 'px;display:inline-block"></canvas>\n <div style="display:inline-block">\n <button id="clr" onclick="erase()" style="position:relative; display:block">Clear</button>\n <button id="clr" onclick="predictInput()" style="position:relative; display:block">Predict</button>\n <div id="predictionDiv"></div>\n </div>\n </body>\n </html>\n\n');