Build a Web-based Object Detection System using YOLO

5 min readFeb 16, 2021
Photo by Paul Skorupskas on Unsplash


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.


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


I separated the application into frontend and backend and use Docker to containerize and run the application. The docker-compose.yml is shown below.

There is a simple Makefile that I use to run the various docker commands.

docker-compose up
docker-compose build
docker-compose down
make build
make up

Backend Application


The Dockerfile starts the FastAPI backend APIs listening on port 8088.




Software engineer, Data Science and ML practitioner.