function updateCanvas()

in depth-estimation-video/main.js [77:130]

• 40 lines of code
• 7 McCabe index (conditional complexity)

function updateCanvas() {
  const { width, height } = canvas;

  if (!isProcessing) {
    isProcessing = true;
    (async function () {
      // Read the current frame from the video
      context.drawImage(video, 0, 0, width, height);
      const currentFrame = context.getImageData(0, 0, width, height);
      const image = new RawImage(currentFrame.data, width, height, 4);

      // Pre-process image
      const inputs = await processor(image);

      // Predict depth map
      const { predicted_depth } = await model(inputs);
      const data = predicted_depth.data;
      const [bs, oh, ow] = predicted_depth.dims;

      // Normalize the depth map
      let min = Infinity;
      let max = -Infinity;
      outputCanvas.width = ow;
      outputCanvas.height = oh;
      for (let i = 0; i < data.length; ++i) {
        const v = data[i];
        if (v < min) min = v;
        if (v > max) max = v;
      }
      const range = max - min;

      const imageData = new Uint8ClampedArray(4 * data.length);
      for (let i = 0; i < data.length; ++i) {
        const offset = 4 * i;
        imageData[offset] = 255; // Set base color to red

        // Set alpha to normalized depth value
        imageData[offset + 3] = 255 * (1 - (data[i] - min) / range);
      }
      const outPixelData = new ImageData(imageData, ow, oh);
      outputContext.putImageData(outPixelData, 0, 0);

      if (previousTime !== undefined) {
        const fps = 1000 / (performance.now() - previousTime);
        status.textContent = `FPS: ${fps.toFixed(2)}`;
      }
      previousTime = performance.now();

      isProcessing = false;
    })();
  }

  window.requestAnimationFrame(updateCanvas);
}