// Image to Grayscale

await xinitialize( {layers:[27,8,3], build:'cpu', learningrate:0.2} );


let div = document.createElement('div');
document.body.appendChild( div );
div.innerHTML = `
document.createOriginal training images (input/output)<br>

<img id="catOrig" src="https://webgpulab.xbdev.net/var/images/cat.png"></img>
<img id="catGray" src="https://webgpulab.xbdev.net/var/images/cat_grayscale.png"></img>

<br><br>
Test images (input/generated output from neural network)<br>
<img id="catTest" src="https://webgpulab.xbdev.net/var/images/cat_original.png"></img>
<canvas id="mycanvas" width="125" height="125" style="border:1px solid #ff0000;"> </canvas>

<!-- Display how many iterations -->
<br><br>
<div id="counter">Iteration:</div>
`;


console.log('Starting Filter Demo');

var canvas     = null;
var context    = null;
var size       = 125 * 125;
var iteration  = 0;
var px         = null;    

function getData(imageObj){
    canvas = canvas || document.getElementById('mycanvas');
    context = context || canvas.getContext('2d');
    context.drawImage(imageObj, 0, 0);
    var imageData = context.getImageData(0, 0, 125, 125);
    return imageData.data;
}

function getPixel(data,ox, oy){

    ox = Math.min(Math.max(ox, 0), 124);
    oy = Math.min(Math.max(oy, 0), 124);
    
    let red   = data[((125 * oy) + ox) * 4];
    let green = data[((125 * oy) + ox) * 4 + 1];
    let blue  = data[((125 * oy) + ox) * 4 + 2];

    return [red / 255, green / 255, blue / 255];
}

async function preview(){
    // console.log('func: preview');
    iteration++;
    
    var elem = document.getElementById('counter');
    elem.innerHTML = "Iteration: " + iteration;
    
    var imageData = context.getImageData(0, 0, 125, 125);
    for (var x = 0; x < 125; x++)
    {
        for(var y = 0; y < 125; y++)
        {
            var px = getPixel(imgTestData, x+0, y+0);
            px = px.concat(getPixel(imgTestData, x-1, y-1));
            px = px.concat(getPixel(imgTestData, x+0, y-1));
            px = px.concat(getPixel(imgTestData, x+1, y-1));
            px = px.concat(getPixel(imgTestData, x-1, y+0));
            px = px.concat(getPixel(imgTestData, x+1, y+0));
            px = px.concat(getPixel(imgTestData, x-1, y+1));
            px = px.concat(getPixel(imgTestData, x+0, y+1));
            px = px.concat(getPixel(imgTestData, x+1, y+1));
            var rgb = await xactivate(px);
            
            let index = x + y*125;
            imageData.data[index * 4] = (rgb[0] )* 255;
            imageData.data[index * 4 + 1] = (rgb[1] ) * 255;
            imageData.data[index * 4 + 2] = (rgb[2] ) * 255;
        }
    }
    context.putImageData(imageData,0,0);
    
    //requestAnimationFrame( iterate );
}

async function iterate(){
    for (var x = 0; x < 125; x++)
    {
        for(var y = 0; y < 125; y++)
        {
            px = getPixel(imgColData, x+0, y+0);
            px = px.concat(getPixel(imgColData, x-1, y-1));
            px = px.concat(getPixel(imgColData, x+0, y-1));
            px = px.concat(getPixel(imgColData, x+1, y-1));
            px = px.concat(getPixel(imgColData, x-1, y+0));
            px = px.concat(getPixel(imgColData, x+1, y+0));
            px = px.concat(getPixel(imgColData, x-1, y+1));
            px = px.concat(getPixel(imgColData, x+0, y+1));
            px = px.concat(getPixel(imgColData, x+1, y+1));
            await xactivate(px);
            await xpropagate( getPixel(imgGraData,x,y) );
        }
    }
    await preview();
}
    
setInterval( iterate, 1000 );

// **** deep neural network

var imgColData   = getData(document.getElementById('catOrig'));
var imgGraData   = getData(document.getElementById('catGray'));
var imgTestData  = getData(document.getElementById('catTest'));    


preview();