<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://github.com/PeculiarVentures/GammaCV/releases/download/v0.3.6/index.min.js