Dashboard
UPLink
ChatBot aka Advisor
Command center
Notifications

SAFESITE AI - Project Overview

Inspiration

Construction sites are among the most dangerous workplaces, with thousands of preventable accidents occurring annually due to safety violations that go unnoticed until it's too late. Traditional safety monitoring relies on manual inspections and periodic walkthroughs, which are inherently inconsistent and resource-intensive. We were inspired to create a solution that never sleeps, never blinks, and never misses a safety hazard.

SAFESITE AI was born from the vision of leveraging artificial intelligence to transform construction site safety from a reactive checklist into a proactive, real-time protection system. We wanted to give safety managers superhuman awareness across their entire site, allowing them to prevent accidents before they happen rather than investigating them after the fact.

What it does

SAFESITE AI is an intelligent construction safety monitoring platform that uses computer vision and AI to continuously analyze live camera feeds from construction sites, detecting safety violations in real-time and alerting supervisors instantly.

Core Features:

🎥 Live Multi-Camera Monitoring: Stream and analyze multiple camera feeds simultaneously (webcam, IP cameras via MJPEG/HLS)
🤖 AI-Powered Violation Detection: Leverages Google Gemini AI to identify safety hazards including:
- Missing personal protective equipment (PPE)
- Unsafe work practices
- Restricted area violations
- Equipment misuse
📊 Real-Time Dashboard: Comprehensive safety score analytics, trend visualization, and instant alerts
📈 Performance Trends: Historical data analysis showing safety score progression over time
🚨 Severity-Based Alerting: Violations categorized as LOW, MEDIUM, HIGH, or CRITICAL with appropriate escalation
📋 Violation History: Complete audit trail with timestamps, camera sources, and resolution tracking
📄 Automated Reporting: Generate detailed safety reports for compliance and analysis
⚙️ Device Management: Configure and monitor multiple camera nodes across different site locations

How we built it

Technology Stack:

Frontend:

React 19 with TypeScript for type-safe, component-based UI
Vite for lightning-fast development and optimized production builds
TailwindCSS (via CDN) for modern, responsive styling with emerald/teal design system
Recharts for beautiful data visualization and trend analysis
Lucide React for consistent, modern iconography

Backend & Services:

Supabase for authentication, real-time database, and data persistence
Google Gemini API for advanced multimodal AI analysis, including vision capabilities for real-time safety hazard detection
Custom Proxy Server (Node.js) to handle authenticated camera streams and CORS
PostgreSQL (via Supabase) for storing cameras, violations, sites, and analytics

Architecture:

[IP Cameras/Webcams] 
    ↓
[Proxy Server (auth handling)] 
    ↓
[React Frontend] ←→ [Supabase (DB + Auth)] 
    ↓
[Google Gemini API (Vision + Analysis)]
    ↓
[Real-time Violation Detection & Alerts]

Key Implementation Details:

Stream Processing Pipeline: Built a custom proxy server to handle RTSP-to-browser conversion and authentication for IP cameras
AI Integration: Integrated Google Gemini's multimodal capabilities to analyze video frames with natural language understanding, enabling context-aware safety violation detection
Database Schema: Designed normalized schema with tables for cameras, violations, sites, users, and daily analytics
Real-time Updates: Leveraged Supabase's real-time capabilities for instant violation notifications
Responsive Design: Implemented collapsible sidebar, mobile-friendly layouts, and smooth animations

Challenges we ran into

1. Browser RTSP Limitation 🎥

Problem: Browsers don't natively support RTSP streams from IP cameras. Solution: Built a Node.js proxy server to transcode streams to MJPEG/HLS formats and handle authentication credentials securely.

2. AI Model Integration 🤖

Problem: Processing live video streams required efficient frame extraction, encoding, and sending to the AI API while maintaining real-time performance. Solution: Implemented Google Gemini's vision API with optimized frame sampling and base64 encoding, leveraging Gemini's multimodal capabilities to analyze frames with natural language prompts for safety violation detection.

3. Database Schema Evolution 🗄️

Problem: Initial schema lacked columns for new features like stream_type, stream_url, and location_description. Solution: Created migration SQL scripts and implemented graceful error handling for schema mismatches with user-friendly error messages.

4. Real-time Performance ⚡

Problem: Analyzing multiple high-resolution video streams simultaneously caused performance bottlenecks. Solution: Implemented frame sampling (analyze every Nth frame), reduced resolution for AI processing, and optimized render cycles.

5. Color Scheme Consistency 🎨

Problem: During the rebrand from SAFEGUARD to SAFESITE, ensuring all 30+ color references were updated across 8 components. Solution: Systematic grep search for all indigo references and batch replacement with emerald, verified through build tests.

Accomplishments that we're proud of

✨ Seamless AI Integration: Successfully integrated Google Gemini's multimodal AI with a production-ready React application for intelligent video analysis

🏗️ Real-World Applicability: Built a system that addresses an actual industry problem affecting millions of construction workers

🎨 Polished UX Design: Created a beautiful, intuitive interface with modern glassmorphism, smooth animations, and premium aesthetics using emerald/teal theming

📊 Comprehensive Analytics: Implemented full-featured dashboard with trend analysis, severity categorization, and exportable reports

🔐 Enterprise-Grade Security: Integrated Supabase authentication with role-based access control and secure credential handling

⚡ Performance Optimization: Achieved smooth real-time monitoring with multiple simultaneous camera streams

🔄 Complete Rebrand: Successfully transformed the entire visual identity from SAFEGUARD AI to SAFESITE AI in under 30 minutes with zero build errors

What we learned

Technical Learnings:

Multimodal AI: Leveraging Gemini's vision capabilities to analyze video frames with natural language prompts, enabling flexible and context-aware safety detection
Stream Processing: Deep dive into video codecs, transcoding, and browser compatibility for real-time streaming
Real-time Architecture: Implementing efficient event-driven systems with Supabase real-time subscriptions and AI API integration
Type Safety Benefits: TypeScript caught numerous potential runtime errors during development, especially with camera configuration types
API Optimization: Balancing AI inference costs with performance through intelligent frame sampling and caching strategies

Design Learnings:

Color Psychology: How emerald/green conveys safety and growth better than indigo/purple for an industrial monitoring platform
Information Hierarchy: Balancing data density with readability in safety-critical dashboards
Accessibility: Ensuring sufficient contrast ratios and clear visual indicators for quick decision-making

Domain Knowledge:

Construction Safety Standards: Understanding PPE requirements, restricted zones, and OSHA compliance needs
Severity Classification: Developing a robust system to categorize violations from LOW to CRITICAL based on risk assessment

What's next for SAFESITE AI

Short-term Roadmap (Q1-Q2 2026):

🎯 Enhanced AI Models

Train custom models specifically for construction safety scenarios
Implement PPE detection (hard hats, safety vests, gloves, safety glasses)
Add zone intrusion detection for restricted areas
Equipment operation safety monitoring

📱 Mobile Application

Native iOS/Android apps for on-site supervisors
Push notifications for critical violations
Quick violation acknowledgment and resolution tracking

🔔 Advanced Alerting

SMS/Email notifications for critical violations
Escalation workflows for unresolved issues
Integration with existing safety management systems

Medium-term Goals (Q3-Q4 2026):

🤝 Multi-Site Management

Support for construction companies managing 10+ sites simultaneously
Cross-site analytics and benchmarking
Centralized reporting for corporate safety offices

📊 Predictive Analytics

Machine learning models to predict high-risk times/locations
Safety score forecasting based on historical trends
Proactive recommendations for safety improvements

🎓 Training Integration

Automatic generation of training materials from violation patterns
Video clips of violations for safety briefings
Certification tracking for workers

Long-term Vision (2027+):

🌐 Industry Platform

Marketplace for specialized AI models (crane safety, scaffolding, electrical work)
API for third-party integrations
Community-contributed safety detection algorithms

🏭 Expansion Beyond Construction