// Cloned by Fahad Mattoo on 3 Dec 2020 from World "NN Project - Submission Entry" by Brendan 
// Please leave this clone trail here.
 
const PIXELS=28,PIXELSSQUARED=PIXELS*PIXELS,NOTRAIN=6e4,NOTEST=1e4,noinput=PIXELSSQUARED,nohidden=128,nooutput=10;var learningRate=.1;const LEARNING_MULTIPLIER=.01,DEFAULT_LEARNING_RATE=.1;var dynamicLearning=!0;let do_training=!0,show_training=!0;var showBrain=!0,brainDead=!1;const TRAINPERSTEP=60,TESTPERSTEP=10;var PerStepFactor=.2;const ZOOMFACTOR=7,ZOOMPIXELS=7*PIXELS,canvaswidth=PIXELS+ZOOMPIXELS+50,canvasheight=3*ZOOMPIXELS+50,DOODLE_THICK=15,DOODLE_BLUR=6,DOODLE_POSTERIZE=2,DOODLE_COLOUR="#aaaaaa";var mnist;let nn,doodle,demo,trainrun=1,train_index=0,testrun=1,test_index=0,total_tests=0,total_correct=0,doodle_exists=!1,demo_exists=!1,mousedrag=!1;var train_inputs,test_inputs,demo_inputs,doodle_inputs,thehtml;function randomWeight(){return AB.randomFloatAtoB(-.1,.1)}$("#runheaderbox").css({"max-height":"95vh"});var currPredictLayer=3;const PREDICT_LAYERS=6;thehtml="<hr> <b>doodle:</b><br> <button onclick='wipeDoodle();' class='normbutton' >clear doodle</button><button onclick='currPredictLayer=(currPredictLayer==0)?PREDICT_LAYERS:currPredictLayer-1; nn.setPredictionLayer(currPredictLayer);' class='normbutton' ><</button><button onclick='showBrain = !showBrain;' class='normbutton' >show brain</button><button onclick='currPredictLayer=(currPredictLayer>=PREDICT_LAYERS)?0:currPredictLayer+1; nn.setPredictionLayer(currPredictLayer);' class='normbutton' >></button> <br>",AB.msg(thehtml,1),thehtml="<hr><b>training:</b><br>   <button onclick='show_training = !show_training;' class='normbutton' >show</button> <button onclick='PerStepFactor = PerStepFactor * 2;' class='normbutton' >-</button> <button onclick='PerStepFactor = PerStepFactor /2;' class='normbutton' >+</button> <button onclick='dynamicLearning = !dynamicLearning;' class='normbutton' >dyn</button> <button onclick='do_training = !do_training;' class='normbutton' >training</button> <br>",AB.msg(thehtml,3),thehtml="<b><br>tests:</b> ",AB.msg(thehtml,5),thehtml="<hr><b>demo:</b><br><button onclick='makeDemo();' class='normbutton' >demo</button> <br> ",AB.msg(thehtml,7);const greenspan="<span style='font-weight:bold; color:darkgreen'> ",braindead="<h1><span style='font-weight:bold; color:red'>BRAIN DEAD</span><h1>";function setup(){createCanvas(canvaswidth,canvasheight),(doodle=createGraphics(ZOOMPIXELS,ZOOMPIXELS)).pixelDensity(4),AB.loadingScreen(),$.getScript("/uploads/brendanb/matrix.js",function(){$.getScript("/uploads/brendanb/nn.js",function(){$.getScript("/uploads/brendanb/mnist.js",function(){console.log("All JS loaded"),(nn=new NeuralNetwork(noinput,nohidden,nooutput)).setLearningRate(learningRate),loadData()})})})}function loadData(){loadMNIST(function(t){mnist=t,console.log("All data loaded into mnist object:"),console.log(mnist),AB.removeLoading()})}function getImage(t){let e=createImage(PIXELS,PIXELS);e.loadPixels();for(let n=0;n<PIXELSSQUARED;n++){let r=t[n],a=4*n;e.pixels[a+0]=r,e.pixels[a+1]=r,e.pixels[a+2]=r,e.pixels[a+3]=255}return e.updatePixels(),e}function getInputs(t){let e=[];for(let n=0;n<PIXELSSQUARED;n++){let r=t[n];e[n]=r/255}return e}function getImageFromInputs(t){var e=Math.sqrt(t.length).toFixed();let n=createImage(e,e);function r(t,e,n,r){let a=4*(e+n*t.width);t.pixels[a]=r,t.pixels[a+1]=r,t.pixels[a+2]=r,t.pixels[a+3]=255}n.loadPixels();let a,o,i=0;for(o=0;o<n.height;o++)for(a=0;a<n.width;a++)r(n,a,o,t[i++]);return n.updatePixels(),n}var accuracy,targets_count=[0,0,0,0,0,0,0,0,0,0];function trainit(t){let e=mnist.train_images[train_index],n=mnist.train_labels[train_index];if(t&&show_training){var r=getImage(e);image(r,0,ZOOMPIXELS+25,ZOOMPIXELS,ZOOMPIXELS),image(r,ZOOMPIXELS+25,ZOOMPIXELS+50,PIXELS,PIXELS)}let a=getInputs(e),o=[0,0,0,0,0,0,0,0,0,0];o[n]=1,targets_count[n]+=1;dynamicLearning?(learningRate=accuracy>=.9?1:accuracy>=.75?5:accuracy>=.5?8:10,learningRate*=LEARNING_MULTIPLIER,nn.setLearningRate(learningRate)):(learningRate=DEFAULT_LEARNING_RATE,nn.setLearningRate(learningRate)),train_inputs=a,nn.train(a,o),thehtml="train: "+trainrun+" / "+train_index+"<br>learning rate: "+learningRate;targets_count.reduce((t,e)=>t+e,0);AB.msg(thehtml,4),++train_index==NOTRAIN&&(train_index=0,console.log("finished trainrun: "+trainrun),trainrun++)}function testit(){let t=mnist.test_images[test_index],e=mnist.test_labels[test_index],n=getInputs(t);test_inputs=n;let r=findMax(nn.predict(n));total_tests++,r==e&&total_correct++;let a=100*(accuracy=total_correct/total_tests);thehtml="<table><tr><th>run</th><th>correct</th><th>tests</th><th>accuracy</th><tr><td>"+testrun+"</td><td>"+total_correct+"</td><td>"+total_tests+"</td><td>"+greenspan+a.toFixed(2)+"%</span></td></tr>",AB.msg(thehtml,6),++test_index==NOTEST&&(console.log("finished testrun: "+testrun+" score: "+a.toFixed(2)),testrun++,test_index=0,total_tests=0,total_correct=0)}function find12(t){let e=0,n=0,r=0,a=0;for(let o=0;o<t.length;o++)t[o]>r?(e=o,r=t[o]):t[o]>a&&(n=o,a=t[o]);return[e,n]}function findMax(t){let e=0,n=0;for(let r=0;r<t.length;r++)t[r]>n&&(e=r,n=t[r]);return e}function draw(){if(void 0!==mnist){if(background("black"),stroke(127),fill(0,0,0),rect(0,0,ZOOMPIXELS,ZOOMPIXELS,5),rect(0,1*ZOOMPIXELS+24,ZOOMPIXELS+2,ZOOMPIXELS+2,5),rect(0,2*ZOOMPIXELS+48,ZOOMPIXELS+2,ZOOMPIXELS+2,5),do_training){for(let t=0;t<TRAINPERSTEP*PerStepFactor;t++)trainit(0===t);for(let t=0;t<TESTPERSTEP*PerStepFactor;t++)testit()}if(demo_exists&&(drawDemo(),guessDemo()),doodle_exists&&(drawDoodle(),guessDoodle()),mouseIsPressed){var t=ZOOMPIXELS+20;mouseX<t&&mouseY<t&&pmouseX<t&&pmouseY<t&&(mousedrag=!0,doodle_exists=!0,doodle.stroke(DOODLE_COLOUR),doodle.strokeWeight(DOODLE_THICK),doodle.line(mouseX,mouseY,pmouseX,pmouseY))}else if(mousedrag){mousedrag=!1,doodle.filter(POSTERIZE,DOODLE_POSTERIZE),doodle.filter(BLUR,DOODLE_BLUR);let t=doodle.get();t.loadPixels(),t.resize(PIXELS,PIXELS),t.resize(ZOOMPIXELS,ZOOMPIXELS),t.updatePixels()}if(showBrain){var e=nn.getPredictionArray();if(Array.isArray(e))drawArray(e.scaleBetween(0,255))}isNaN(nn.weights_ho.data[0][0])&&(AB.msg(braindead,6),noLoop())}}var predictMax=0,predictMin=0;Array.prototype.scaleBetween=function(t,e){return predictMax=Math.max.apply(Math,this),predictMin=Math.min.apply(Math,this),this.map(n=>(e-t)*(n-predictMin)/(predictMax-predictMin)+t)};var resizeDoodle=!1;function makeDemo(){demo_exists=!0;var t=AB.randomIntAtoB(0,NOTEST-1);demo=mnist.test_images[t];var e=mnist.test_labels[t];thehtml="test["+t+"] = "+e+"<br>",AB.msg(thehtml,8)}function drawDemo(){var t=getImage(demo);image(t,0,canvasheight-ZOOMPIXELS,ZOOMPIXELS,ZOOMPIXELS),image(t,ZOOMPIXELS+50,canvasheight-ZOOMPIXELS,PIXELS,PIXELS)}function drawArray(t){var e=getImageFromInputs(t);image(e,40,canvasheight-ZOOMPIXELS+5,.6*ZOOMPIXELS,.6*ZOOMPIXELS)}function guessDemo(){let t=getInputs(demo);demo_inputs=t;let e=findMax(nn.predict(t));thehtml="predict: "+greenspan+e+"</span>",AB.msg(thehtml,9)}function drawDoodle(){let t=doodle.get();image(t,0,0,ZOOMPIXELS,ZOOMPIXELS),image(t,ZOOMPIXELS+50,0,PIXELS,PIXELS)}function guessDoodle(){let t=doodle.get();t.resize(PIXELS,PIXELS),t.loadPixels();let e=[];for(let n=0;n<PIXELSSQUARED;n++)e[n]=t.pixels[4*n]/260;doodle_inputs=e;let n=nn.predict(e),r=find12(n);switch(showMatrix=!1,thehtml="predict 1: "+greenspan+r[0]+"</span><br>predict 2: "+greenspan+r[1]+"</span><br>",currPredictLayer){case 0:thehtml+=" nn: inputs";break;case 1:thehtml+=" nn: weights_ih";break;case 2:thehtml+=" nn: bias_h";break;case 3:thehtml+=" nn: hidden";break;case 4:thehtml+=" nn: weights_ho";break;case 5:thehtml+=" nn: bias_o";break;case 6:thehtml+=" nn: output"}var a=predictMax<1?2:0;thehtml=thehtml+"["+predictMin.toFixed(a)+" : "+predictMax.toFixed(a)+"]",AB.msg(thehtml,2),fill(128,128,128);for(var o=0;o<n.length;o++){let t=5*(10*n[o].toFixed(1)+.2);rect(18*o+10,3*ZOOMPIXELS+48-t,10,t)}}var showMatrix=!1;function wipeDoodle(){doodle_exists=!1,doodle.background("black")}function showInputs(t){var e="";for(let n=0;n<t.length;n++){n%PIXELS==0&&(e+="\n"),e=e+" "+t[n].toFixed(2)}console.log(e)}function pixelate(t,e){t.pixels;for(var n=ZOOMPIXELS,r=ZOOMPIXELS,a=0;a<r;a+=e)for(var o=0;o<n;o+=e)for(var i=4*(o+a*n),s=t[i],l=t[i+1],c=t[i+2],d=1;d<e;d++)t[i+4*d+0]=s,t[i+4*d+1]=l,t[i+4*d+2]=c}