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 the application. The docker-compose.yml is shown below.

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

up:
 docker-compose up
build:
 docker-compose build
down:
 docker-compose down
restart:
 make build
 make up

Backend Application

Dockerfile

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