Operation SAFER – AI-Powered Multi-Agent Urban Flash Flood Detection & Emergency Response System

Operation SAFER is a Smart City Emergency Operations Command Center designed for real-time urban flash flood detection, AI risk forecasting, autonomous multi-agent coordination, and emergency rescue fleet dispatch.

---

🌟 Key Features

1. Smart City Command Dashboard

• Live weather gauge & telemetry metrics (Rainfall rate, Water Stage Level, Temperature, Humidity, River Velocity, Pressure).
• Real-time Flood Risk Badge (LOW, MEDIUM, HIGH, EXTREME).
• High-level KPI metrics for rescue teams, shelters, and active broadcasts.
• Live stream of recent emergency events and sensor alerts.
• Recharts hydrographs for precipitation and river water stage level.

2. Live GIS Flood Map (Leaflet + OpenStreetMap)

• Interactive Leaflet map centered on urban sectors.
• Flooded sectors mapped with high-visibility red polylines and pulsing warning icons.
• High-elevation safe zones outlined in green.
• Emergency shelter locations with capacity utilization and amenities.
• Real-time rescue fleet markers (NDRF, Fire Brigade, Police, Ambulance).
• Interactive details drawer when clicking any zone or marker.

3. AI Flood Prediction Engine (Google Gemini API)

• Interactive sliders for meteorological parameters (Rainfall mm/hr, Water Level m, Humidity %, Temp °C, Velocity m/s).
• Direct server-side integration with Google Gemini 3.6 Flash.
• Generates structured hydrological flood risk level, confidence score (%), cause-and-effect reasoning, tactical recommendations, evacuation directives, and agent execution plans.
• Preset scenarios: Normal Day, Heavy Monsoon, Flash Flood Emergency.

4. Autonomous Multi-Agent Monitoring

Visual monitoring and animated pipeline simulation for 5 core AI agents:

1. Data Collection Agent: Ingests weather radar, satellite indices, and ultrasonic river sensors.
2. Flood Prediction Agent: Runs Gemini hydraulic and runoff AI models.
3. Mapping Agent: Renders dynamic GIS flood polygons and marks inundated roads.
4. Resource Allocation Agent: Matches stranded citizens with rescue boats and ambulances using Dijkstra shortest path.
5. Alert Agent: Formats and broadcasts multi-channel emergency messages.

5. Rescue Fleet & Resource Management

• Real-time tracking of NDRF units, Fire Engines, Police Patrols, and Ambulances.
• Dynamic crew size, equipment inventory (dinghies, pumps, cranes, trauma kits), location, and ETA.
• Interactive Assign Mission modal to dispatch resources to target sectors with real-time status updates.

6. Emergency Alerts & Public Broadcasts

• Active alert feeds (Flash Flood Alert, Evacuation Notice, Road Closure, Shelter Open).
• New Alert modal to compose public broadcasts distributed across Cell Broadcast, SMS, TV/Radio, and City Sirens.

7. Recharts Analytics & Data Export

• 24-hour rainfall vs river stage area charts.
• Calculated Flood Risk Index progression line chart.
• Emergency calls vs dispatched rescue units bar chart.
• Rescue team SLA response times.
• CSV report export for city disaster planning.

---

📂 Folder Structure

operation-safer/
├── server.ts                 # Express backend server & Gemini API endpoint
├── metadata.json             # Applet capabilities metadata
├── package.json              # Project dependencies & scripts
├── index.html                # HTML entry point with Leaflet CSS & Fonts
├── vite.config.ts            # Vite configuration
├── src/
│   ├── main.tsx              # React entry point
│   ├── App.tsx               # Main layout & router container
│   ├── index.css             # Tailwind CSS styles
│   ├── types.ts              # Global TypeScript interfaces
│   ├── data/
│   │   └── mockData.ts       # Hydrological, GIS, rescue & alert datasets
│   └── components/
│       ├── Header.tsx        # Command bar with clock, weather & siren test
│       ├── Sidebar.tsx       # Navigation sidebar
│       └── views/
│           ├── DashboardView.tsx        # Main Overview & charts
│           ├── LiveMapView.tsx          # Leaflet interactive GIS map
│           ├── AIPredictionView.tsx     # Gemini AI flood risk predictor
│           ├── MultiAgentView.tsx       # Multi-agent swarm monitoring
│           ├── RescueManagementView.tsx # Rescue fleet dispatch hub
│           ├── EmergencyAlertsView.tsx  # Public safety broadcast feed
│           └── AnalyticsView.tsx        # Recharts analytics dashboard

---

🚀 Installation & Local Running

1. Clone & Install Dependencies

   npm install

2. Environment Configuration Ensure your .env file includes your Gemini API Key (automatically injected in Google AI Studio):

   GEMINI_API_KEY="your_gemini_api_key_here"

3. Start Development Server

   npm run dev

   Open http://localhost:3000 in your browser.

4. Build for Production (Vercel / Cloud Run)

   npm run build
   npm run start

---

🛠️ Tech Stack

• Frontend: React 18+, TypeScript, Tailwind CSS
• Backend / API Proxy: Express.js, Node.js (tsx)
• AI Model: Google Gemini API (@google/genai SDK - gemini-3.6-flash)
• Mapping: Leaflet + OpenStreetMap
• Data Visualizations: Recharts
• Icons: Lucide React
• Animations: Motion