<div></div>
<div></div>
div {
height: calc(50% - 4px);
overflow: hidden;
}
div + div {
margin-top: 8px;
}
canvas {
width: 100%;
}
html, body {
height: 100%;
box-sizing: border-box;
}
body {
margin: 0;
padding: 8px;
}
// https://gammacv.com
const imgURL = 'https://picsum.photos/500/400';
const width = 500;
const heigth = 400;
// load image from URL or base64 string and store a result in input tensor
gm.imageTensorFromURL(imgURL, 'uint8', [heigth, width, 4], true).then((input) => {
// use the image tensor as the input for the grayscale operation
// operations return a compiled operation instance
const operation = gm.grayscale(input);
// create the tensor for operation output
const output = gm.tensorFrom(operation);
// then we need to create Session which will run created
// graph using GPU power and read result to output tensor
const sess = new gm.Session();
// then you should init operation for current session
sess.init(operation);
// and finaly for visualize result we need create canvas
const canvas = gm.canvasCreate(width, heigth);
const inputCanvas = gm.canvasCreate(width, heigth);
document.body.children[0].appendChild(canvas);
document.body.children[1].appendChild(inputCanvas);
sess.runOp(operation, 0, output);
gm.canvasFromTensor(canvas, output);
gm.canvasFromTensor(inputCanvas, input);
});
View Compiled
This Pen doesn't use any external CSS resources.