RCNN / YOLO in JS

README.md

How to display output

How to display reasonable output from a RCNN in JS

test.js

function loadImage() {
    resultElement.innerText = 'Loading image ...';
    input = document.getElementById('url');

    image.src = 'https://cors-anywhere.herokuapp.com/'+input.value;

    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
  }

  image.onload = async () => {
    resultElement.innerText = 'Predicting...';
    const pixels = dl.Array3D.fromPixels(image);

    var t0 = performance.now();
    const result = await mobileNet.predict(pixels);
    var t1 = performance.now();
    const inferenceTime = t1 - t0

    var t0 = performance.now();
    const boxes = await mobileNet.interpretNetout(result);
    var t1 = performance.now();
    const postProcessingTime = t1 - t0

    for (i = 0; i < boxes.length; i++) {
      box = boxes[i];

      const x = (box.x - box.w/2) * width;
      const y = (box.y - box.h/2) * height;
      const w = box.w * width;
      const h = box.h * height;

      // draw the rectangle bounding box;
      context.strokeStyle = box.getColor();
      context.lineWidth = 5;
      context.rect(x,y,w,h);
      context.stroke();   

      // draw the label and the probability
      const label = box.getLabel() + ' ' + box.getMaxProb().toFixed(2).toString();
      const font  = '24px serif';

      context.font = font;
      context.textBaseline = 'top';
      context.fillStyle = box.getColor();
      const textWidth = context.measureText(label).width;
      context.fillRect(x-2, y-24, textWidth, parseInt(font, 10));
      
      context.fillStyle = 'rgb(255,255,255)';
      context.fillText(label, x-2, y-24);   
    }

    resultElement.innerText = 'Complete!, Inference time: ' +  Math.round(inferenceTime) + 'ms' +
                              ', Post precessing time: ' + Math.round(postProcessingTime) + 'ms'; 
  }