Build a Web-based Object Detection System using YOLO

Photo by Paul Skorupskas on Unsplash

Overview

You Only Look Once (YOLO) is a state-of-the-art, real-time object detection system. In my previous articles, I walked through with you on how to serve DCGAN, PCGAN, ResNext, and DeepLabV3 models on different platforms. In this article, let’s see how to serve YOLOv5 using FastAPI WebSocket as backend, and React as front-end.

Introduction

The Application

For the frontend application, I use React to control and capture images from the camera. The captured image is sent through WebSocket to the FastAPI backend, gets processed using the YOLOv5 model and then the predictions and processed image are sent back to the frontend.

In the below screenshot, YOLOv5 is able to predict accurately there is 1 person and 1 cell phone.

Predictions by YOLOv5

Predictions by YOLOv5

docker-compose.yml

I separated the application into frontend and backend and use Docker to containerize and run…