GeoSpark

Inspiration

The Altadena fire underscored wildfires’ dual threat to health and daily life: toxic air worsened respiratory diseases, healthcare access collapsed mid-crisis, and trauma upended mental health. This project addresses these gaps by merging real-time fire tracking, air quality alerts and hospital locators to protect physical health. AI-driven evacuation routes and a guidance chatbot aim to reduce panic and safeguard mental well-being. By integrating environmental and healthcare data, the platform empowers communities to navigate disasters without sacrificing their health or lifestyle stability.

What it does

1. Real-Time Fire Tracking & Risk Mapping

Google Maps Integration: Displays active wildfires with real-time updates from satellite and ground reports.
High-Risk Zone Highlighting: Utilizes weather data (temperature, humidity, wind speed) and historical fire patterns to indicate high-risk areas.

2. AI-Powered Fire Detection

User-Submitted Media Analysis: Allows users to upload videos/photos from their location, with AI (using image segmentation) to detect fire presence.
Suspicious Activity Detection: Flags potential fire hazards, such as unattended campfires, for early intervention.

3. Health-Focused Air Quality Monitoring

Real-Time Air Quality Tracking: Monitors pollutants like PM2.5 and carbon monoxide, issuing alerts when levels are hazardous.
Protective Measures: Suggests tailored recommendations (e.g., closing windows, using masks) for vulnerable groups like individuals with asthma and the elderly.

4. Smart Evacuation Routing

Dynamic Route Generation: Provides safest escape routes from Point A to B, avoiding active fire zones and traffic congestion.
Adaptive Path Adjustments: Routes update dynamically based on real-time wind direction and fire spread predictions.

5. Emergency Healthcare Access

Healthcare Facility Mapping: Displays nearby hospitals, clinics, and pharmacies directly on the fire map.
Priority Routes: Ensures navigation to functional medical facilities during emergencies.

6. Wildfire Preparedness Chatbot

FAQs and Preparedness Advice: Answers common questions like “How can I protect my home from embers?”

How we built it

1. Intuitive Front-End Design and Development

Prototyping and Design: We began by creating detailed prototypes for each page in Figma, focusing on a clean layout and an intuitive user experience that ensures users can easily access critical wildfire data and navigation tools.
Responsive Implementation: Once the designs were approved, we developed responsive, interactive pages using Next.js and Tailwind CSS, ensuring seamless performance across devices.
Tailwind Utility-First Approach: Tailwind's utility-first approach allowed us to quickly build and style components without the need for extensive custom CSS.
Next.js Server-Side Rendering: Leveraging Next.js’s server-side rendering and dynamic routing capabilities, we ensured fast page loads and smooth transitions between key features like fire detection maps, air quality monitors, and evacuation routes.
Reusable Components: We created modular, reusable components to maintain a clean, maintainable codebase and optimize development efficiency.

2. Real-Time Fire Tracking & Risk Mapping

YOLO-Based Fire/Smoke Detection
- Model Architecture: Utilized YOLOv8 (You Only Look Once) for real-time object detection, fine-tuned on a custom dataset annotated with fire and smoke classes.
- Inference Pipeline: Implemented a video processing pipeline using OpenCV (cv2.VideoCapture) to extract frames, perform inference with YOLO (model.predict), and apply bounding boxes with confidence thresholds (>0.5).
- Post-Processing: Filtered detections using non-maximum suppression (NMS) to eliminate overlapping boxes and applied class-specific annotations (red for fire, yellow for smoke).
Multimodal Risk Assessment with Image-Based AI Models
- Frame Extraction: Used OpenCV to extract keyframes from video input (cv2.VideoCapture and cv2.set for frame positioning).
- Image Encoding: Compressed frames to 64x64 JPEGs with 50% quality (cv2.resize and cv2.imencode) and encoded them as base64 strings for API transmission.
- Risk Classification: Designed a structured input combining geographic coordinates (latitude, longitude) and image context to classify fire risk into "High," "Moderate," or "Low" using an image classification model.
- API Integration: Integrated multimodal input (text + image) to generate fire risk classifications and recommendations.
Weather and Air Quality Integration
- API Calls: Integrated OpenWeatherMap API (requests.get) to fetch real-time weather data (temperature, humidity, wind speed/direction) using latitude and longitude.
- Data Parsing: Extracted relevant metrics (response.json()) and mapped them to the report format.
- AQI Placeholder: Included an AQI placeholder, with plans to integrate AirNow or OpenAQ APIs for real-time air quality data.
Report Generation
- Data Aggregation: Combined YOLO detection results, risk classification, and weather data into a structured JSON object.
- Dynamic Risk Logic: Implemented conditional logic to set fire: true if fire/smoke was detected and mapped the risk classification to the report.
- Output Formatting: Serialized the report to JSON (json.dumps) with proper indentation for readability.
Optimization and Deployment
- Video Encoding: Used FFmpeg (subprocess.run) to encode output videos with the H.264 codec for compatibility and fast streaming.
- Error Handling: Added exception handling for API failures, video processing errors, and invalid inputs.
- Scalability: Designed the system to process video frames asynchronously for improved performance.

Interactive Map with Wildfire Regions and Hospitals

The interactive map provides a visual representation of active wildfires and nearby hospitals. Users can:

View real-time wildfire locations.
Identify the nearest hospitals for emergency response.
Find shortest paths to evacuate while avoiding dangerous wildfire regions.
Click on map markers to get more details about each wildfire or hospital.

The map is implemented using a combination of Leaflet.js for visualization and GeoJSON data for spatial information. It fetches real-time fire incident data from our API and displays relevant emergency facilities to aid in quickly seeking emergency care.

Challenges we ran into

Maintaining Design Consistency: As the project expanded, keeping the design consistent across pages became tricky. We solved this by setting up global utility classes in Tailwind and creating design tokens for shared elements like colors, typography, and button styles.

Handling Nested Modals and Overlays: We encountered overlapping modals and dropdowns when users navigated certain interactive sections. To fix this, we structured modals using portals and added proper z-index management to prevent layout conflicts.

Image Optimization: Large background and content images were slowing down page performance. We used Next.js’s Image component to optimize images, lazy-load them, and automatically serve them in appropriate formats like WebP.