Build a Web based Object Detection System using YOLO

Photo by Paul Skorupskas on Unsplash

Overview

Introduction

The Application

Predictions by YOLOv5
Predictions by YOLOv5

docker-compose.yml

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

Backend Application

Dockerfile

Dockerfile — Backend
#!/usr/bin/env bash
set -e
if [ "$DEBUG" = true ] ; then
echo 'Debugging - ON'
uvicorn main:app --host 0.0.0.0 --port 8088 --reload
else
echo 'Debugging - OFF'
uvicorn main:app --host 0.0.0.0 --port 8088
fi

FastAPI

main.py
yolov5.py
DEBUG=true
CHOKIDAR_USEPOLLING=true
YOLO_MODEL=yolov5s
#YOLO_MODEL=yolov5m
#YOLO_MODEL=yolov5l
#YOLO_MODEL=yolov5x
FastAPI Testing

Frontend

Dockerfile

Dockerfile — Frontend

React

Viewer.js

Self Signed Certificate Warning

Security Warning

Configuration

const config = {
WS_SERVER: "ws://localhost:8088/yolo_ws",
// WS_SERVER: "wss://localhost:8088/yolo_ws", // secure
};
export default {
...config,
};

Running the Application

Application Startup Screen

Debugging

Production Deployment

Summary

References

Programmer and occasional blogger.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store