Happy or Sad Smiley Face

// 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();

Complete Code

Resources and Links