// Learning smiley - deep neural network setup
// (48x48) pixel values (input)
// (15,15) hidden layers 
// (2) sad or happy

await xinitialize( {layers:[2304,15,15,2], build:'cpu', learningrate:0.1} );

let div = document.createElement('div');
document.body.appendChild( div );
div.innerHTML = `
<br><br>
<canvas id="mycanvas" width="48" height="48" style="border:1px solid #ff0000;"> </canvas>
<br><br>
<div id="counter">Iteration:</div>
<br>
<div id="result">Result/Output:</div>
`;

var canvas     = null;
var context    = null;
var iteration  = 0;    
var data       = []
var imgs       = []
    
// hard coded 20 test images loaded in (pixel data)
for (let v=0; v<20; ++v)
{
    // 10 happy and 10 sad faces
    let suf = "h0" + v;
    if (v>=10) suf = 's0' + (v-10);
    
    let imgFileName = "https://webgpulab.xbdev.net/var/images/smileys/" + suf + ".jpg";
    
    imgs[v] = new Image();
    imgs[v].src = imgFileName;
    imgs[v].onload = function() {
          canvas    = canvas || document.getElementById('mycanvas');
        context       = context || canvas.getContext('2d');
        canvas.width  = this.width;
        canvas.height = this.height;
        
        context.drawImage(this, 0, 0);
        
        console.log("Dimensions: " + this.width + 'x' + this.height);
        
        let imgData = context.getImageData(0, 0, 48, 48).data;
        
        // convert rgba to an array of scalar values 
        graydata = []
        for (let kk=0; kk<imgData.length; kk+=4)
        {
            // scale our imaeg data 0.0 to 1.0
            graydata.push( imgData[kk] / 255.0 );
        }
        

        if ( v < 10 )
            data.push( { number:v, datain:graydata, dataout:[1,0] } );
        else
            data.push( { number:v, datain:graydata, dataout:[0,1] } );
            
        console.log( data[ data.length-1 ].dataout )
        
        if ( v >= 18 )
        {
            console.log('All images loaded');
        }
    }    
}// end loop(..)


async function preview(){
    // check if data/images is still loading
    if ( data.length < 20 )
    {
        requestAnimationFrame(preview);
        return;
    }
    
    const testImage = 14;
    
    //console.log( data.length );

    iteration++;
    
    var elem = document.getElementById('counter');
    elem.innerHTML = "Iteration: " + iteration;
    
    // e.g., which test image you're using, h02.jpg as the test image
    var result = await xactivate( data[ testImage ].datain ); 
    var resElm = document.getElementById('result');

    var face = "happy";
    if ( result[1] > result[0] ) face = "sad";
    
    resElm.innerHTML = "Result (" + face + ") '[happy:[1,0], sad[0,1]]}: '" + result;
    
    canvas    = canvas || document.getElementById('mycanvas');
    context   = context || canvas.getContext('2d');
        
    var imageData = context.getImageData(0, 0, 48, 48);
    for (let kk=0; kk<48*48; kk=kk+1)
    {
        imageData.data[kk*4 + 0] = data[ testImage ].datain[kk] * 255.0;
        imageData.data[kk*4 + 1] = data[ testImage ].datain[kk] * 255.0;
        imageData.data[kk*4 + 2] = data[ testImage ].datain[kk] * 255.0;
        //imageData.data[kk*4 + 3] = 255; 
    }
    context.putImageData(imageData,0,0, 0, 0, 48,48);
    
    requestAnimationFrame(iterate);
}

/*
 Keep training the neural network to improve its accuracy
 */
async function iterate(){
        
    for (var i=0; i<20; ++i)
    {
        var dynamicRate =  .01/(1+.0005*iteration);
        await xactivate( data[i].datain ); 
        await xpropagate( data[i].dataout, dynamicRate );
    }

    await preview();
}

preview();