A real-time YOLOv8 dashboard, was done as a small senior project to dive more into React using Next.js and real-time communication protocols. Allows the use of YOLOv8 (and technically later models like YOLOv9) lightweight object detection models in real-time including real-time Segmentation, Pose-Estimation, Heatmaps, and other configurable settings in real-time during detection. Program was built to be as efficient as possible and as fast as possible, achieving inference and display speeds near what were benchmarked by the YOLOv8 creators, while showing off more features and a dynamic, responsive UI.
Since this was done as a project, there are also project documents available, such as requirements, test deliverables, and design documents about the entirety of the program.
Software Design Document (SDD)
Framerate of gif is locked at 7 FPS. Actual app performance is much faster (watch the Information panel on the demo for actual speeds up to 120 fps!)
Table of Contents
The program uses a Server-Client Architecture (Alothough closer to MVC). The backend (Python, Flask, Pytorch, Swagger-ui) and the frontend (React, Next.js, MUI) have their own folders which contain each project.
A breakdown of the important frontend code folders is below. Frontend UI is available at http://127.0.0.1:5001.
- frontend/src/components/input
- Holds all base input custom components used to create the UI; most components extend off the base.tsx component.
- frontend/src/components/output
- Holds all components used for output. Many of these are fully custom due to the real-time nature of the outputs and styling to make them fit the theme.
- frontend/src/components/panel
- Holds the panels that create the full UI on the frontend. This allows for easy responsive UI via flex-box grid.
- frontend/src/contexts
- Holds the context providers which orchestrate the overall dynamic logic of the program
A breakdown of the important backend code folders is below. Backend Swagger UI is available at http://127.0.0.1:5001.
- backend/apis
- Holds all of the API namespaces hosted by Flask and displayed on the Swagger UI
- backend/core
- Holds all core functionality logic such as prediction, as well as utilities and other streaming-related logic.
To get a local copy up and running follow these simple steps.
You will need to have some sort of python. You will also need nodejs and react.
(Optional)
- Setup a python environment (conda or pyenv) to keep your development space tidy.
- A GPU. This will make generation much, much, quicker
- Clone the repo
git clone [email protected]:baxtrax/Realtime-YOLOv8-Dashboard.git
- Install the required libraries
cd frontend && pip install -r requirements.txt && cd ../backend && npm install
- Open a console and run the backend/app.py python file to launch the backend.
cd backend && python app.py
- (Optional) Open the backend swagger UI and test keepalive. Swagger UI is hosted at http://127.0.0.1:5001
- Open a console and run the React project
cd frontend && npm run dev
- Open the frontend webpage. Its hosted at http://127.0.0.1:5001
- Select a Model source. Thats it!
- (Optional) Play around with all the settings, all can be changed in real-time with no delay, even swapping model sizes!
The website should try to match your system preferences for dark or light mode. If not, you can specify dark mode and light mode by clicking the sun icon above the Webcam panel.