Welcome to the Real-Time Safety Monitoring System, a comprehensive web-based application designed to enhance workplace safety through real-time monitoring of PPE (Personal Protective Equipment) compliance using AI-powered computer vision.
This system helps automate and improve safety in high-risk environments such as construction sites, warehouses, and factories, detecting if workers are missing critical safety gear (helmet, vest, glasses) via live camera streams and real-time alerts.
π Add your GIFs below by replacing the image paths.
| Name | Role | Responsibilities |
|---|---|---|
| Aliboev Abbos | Team Leader, AI & Frontend | Project coordination, frontend logic and Development, YOLO |
| κΉνμ | AI & Backend | YOLO model training, backend integration |
| μ μ€λ―Ό | Backend & DB | FastAPI APIs, database design & logic |
Safety is a top priority in industrial environments. Manual monitoring of PPE is inefficient and prone to errors. We wanted to build a system that:
- πΉ Monitors workers via live camera feeds
- π€ Uses AI to detect missing PPE instantly
- π₯οΈ Visualizes incidents, trends, and reports in a responsive web dashboard
- π Supports multiple languages and is easy to use
- π User Login: Secure, role-based login system
- πΊ Real-Time Camera Feed: Monitor up to 6 live cameras
- π¨ AI-Powered Detection: YOLOv8 detects helmet, vest, and glasses violations
- π Summary Dashboard: Weekly trend charts, safety score, alert heatmaps
- π Timeline View: Camera-wise alert history
- π Report Page: Alert logs, worker data, manual reporting
- βοΈ Settings Page: Theme toggle (Dark/Light), language switch
- π Dark & Light Modes: User-selectable interface theme
- π Multi-Language Support: English πΊπΈ and Korean π°π· with
react-i18next - π€ CSV Download: Export alerts for safety audits
-
π€ Model: YOLOv8n
-
πΌοΈ Dataset:
- Phase 1: 1,176 images
- Phase 2: 2,551 images (focused on head detection)
-
βοΈ Inference Process:
[Camera Feed] β [YOLO AI (Subprocess)] β [Annotated Frame + Label] β [FastAPI Backend] β [Frontend UI]
Frontend (React.js) <-> FastAPI Backend <-> YOLOv8 AI Detection | | | React Router SQLAlchemy ORM Camera Stream + Alert Engine | | LocalStorage, Axios MySQL Database
| Page | Description |
|---|---|
| Welcome Page | Project intro and smooth entry animation |
| Login Page | Secure form-based authentication |
| Dashboard | 6-camera grid view, real-time overlay alerts |
| Camera Detail | Individual camera feed, filterable alerts |
| Summary | Safety scores, trend graphs (Recharts) |
| Timeline | Chronological alerts per camera |
| Report | Searchable worker alert logs and manual report entry |
| Settings | Theme, language, and future preferences |
| Info | System explanation and contact/support section |
| Layer | Stack & Tools |
|---|---|
| π¨ UI/UX | Figma, Minimalist Blue-White design |
| π± Frontend | React.js, SCSS, Bootstrap, Recharts, Axios, i18next |
| π§ AI | YOLOv8n, Python Multiprocessing |
| π§ Backend | FastAPI (Python), RESTful API |
| ποΈ Database | MySQL, SQLAlchemy ORM |
useStateβ UI reactivity for alerts and togglesuseEffectβ Poll backend every 10s for new alertsuseMemoβ Sort/aggregate alerts efficientlyuseParamsβ Route-based camera ID handlinguseOutletContextβ Share layout state between nested pages
- π Add fire/fall/smoke detection modules
- π Alert notification via email/SMS
- βοΈ Cloud deployment (AWS/GCP)
- π Advanced admin dashboard
- π² Mobile app version
π GitHub: Web_Software_Project
Built with β€ by Team MEERKAT for Chungbuk National Universityβs Web Software course.
For feedback or contributions, feel free to fork or reach out!