CODEWITHSUNDEEP
javascripthtmlcomputer-vision
Aayush Gupta
Aayush Gupta

Reputation: 446

How to print a message on browser using javascript and HTML

I am currently working on face detection on a browser. Below is the snippet for my java script code. it detect the bounding boxes when face is visible in the screen. I want to print a message on the canvas when the face is not detected by my model. In that case predictions.length will be equal to 0 here is my code ,how do I modify it for my functionality

async function draw(video,context, width, height)
{
    context.drawImage(video,0,0,width,height);
    const model = await blazeface.load();
    const returnTensors = false;
    const predictions = await model.estimateFaces(video, returnTensors);
    
    console.log(predictions);
    for (let i = 0; i < predictions.length; i++) {

    const start = predictions[i].topLeft;
    const end = predictions[i].bottomRight;
    var probability = predictions[i].probability;
    const size = [end[0] - start[0], end[1] - start[1]];
    // Render a rectangle over each detected face.
    context.beginPath();
    context.strokeStyle="green";
    context.lineWidth = "4";
    context.rect(start[0], start[1],size[0], size[1]);
    context.stroke();
    var prob = (probability[0]*100).toPrecision(5).toString();
    var text = prob+"%";
    context.fillStyle = "red";
    context.font = "13pt sans-serif";
    context.fillText(text,start[0]+5,start[1]+20);
    
    
    }
    setTimeout(draw,250,video,context,width,height);
}

here is the Git repo that I am implementing https://github.com/adarsh1021/facedetection Please don't be harsh, I'm using JS for the first time

Upvotes: 1

Views: 366

Answers (1)

cam
cam

Reputation: 3616

  1. Check the predictions length
  2. If no predictions, render an error message in the canvas
...
const predictions = await model.estimateFaces(video, returnTensors);

if (predictions.length < 1) {
  context.fillText('No face detected.', 150, 20);
  context.textAlign = "center"; 
}

console.log(predictions);
for (let i = 0; i < predictions.length; i++) {
...

Upvotes: 1

Related Questions