Skip to content

Instantly share code, notes, and snippets.

@kmader kmader/README.md
Created Feb 13, 2018

Embed
What would you like to do?
RCNN / YOLO in JS

How to display output

How to display reasonable output from a RCNN in 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';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.