 | Image to Grayscale (Neural Network) |  |
Show the neural network two images - one color and the other grayscale. Looks at groups of pixels and learns show to convert any other image pixel in the same way.
| Complete Code | |
// 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();
| Things to Try | |
• Try other grayscale images (use different filter patterns - washed out grayscale)
• Instead of grayscale, create an edge detection filter (original filter and an image that has been put through an edge detection filter, like Sobel filter)
• Train for other filters that focus on different information (removing only the red or emphasising more blue)
• Try bluring or sharpening (sharpen or blur image for the training)
| Resources and Links | |
• WebGPU Lab Demo [LINK]
|
