Showing the object detection results in the browser
Now that we are able to send input images to the server, we have to show the result of the detection in the browser. In a similar way to what we showed in the Using a computer vision model with Hugging Face section, we’ll draw a green rectangle around the detected objects, along with their label. Thus, we have to find a way to take the rectangle coordinates sent by the server and draw them in the browser.
To do this, we’ll once again use a <canvas> element. This time, it’ll be visible to the user and we’ll draw the rectangles using it. The trick here is to use CSS so that this element overlays the video: this way, the rectangles will be shown right on top of the video and the corresponding objects. You can see the HTML code here:
index.html
<body> <div class="container"> <h1 class="my-3">Chapter 13 - Real time object...
