// https://gammacv.com
const imgURL = 'https://source.unsplash.com/random/500x400?random=' + Math.random();
const width = 500;
const height = 400;

// load image from URL or base64 string and store a result in input tensor
gm.imageTensorFromURL(imgURL, 'uint8', [height, width, 4], true).then((input) => {
  // the input is already a valid operation that can be chained
  // notice the use of 'let'. We are going to reuse the pipeline variable
  let pipeline = input

  // operations always return a valid input for another operation.
  // if you are a functional programmer, you could easily compose these.
  pipeline = gm.grayscale(pipeline);
  pipeline = gm.gaussianBlur(pipeline, 3, 3);
  pipeline = gm.sobelOperator(pipeline);
  pipeline = gm.cannyEdges(pipeline, 0.25, 0.75);

  // allocate output tensor
  const output = gm.tensorFrom(pipeline);
  const sess = new gm.Session();

  sess.init(pipeline);

  // run your operation
  sess.runOp(pipeline, 0, output);

  // display your output
  const canvasOriginal = gm.canvasCreate(width, height);
  const canvasProcessed = gm.canvasCreate(width, height);

  document.body.children[0].appendChild(canvasProcessed);
  document.body.children[1].appendChild(canvasOriginal);
  gm.canvasFromTensor(canvasOriginal, input);
  gm.canvasFromTensor(canvasProcessed, output);
});