CrisisGrid - Devpost Submission Info

Inspiration

During large-scale disasters—such as floods, landslides, or metro accidents—emergency communication systems are flooded with unstructured text. Spoken radio traffic, rushed SMS messages, and social media posts pile up rapidly.

Dispatchers are forced to read through this chaotic information, manually extract coordinates, assess threat levels, and determine which response unit to dispatch. This process is time-consuming and error-prone, causing delays when every second counts.

We built CrisisGrid to turn that chaos into clarity. Our goal was to create an intelligent, unified command center that uses high-speed AI to parse unstructured distress inputs into structured, mapped dispatches in under a second.

What it does

CrisisGrid is an AI-powered tactical dispatch and emergency triage single-page application. It automates the intake pipeline from intercept to resolution:

  • AI Triage Engine: Takes raw text or spoken radio inputs (via Web Speech API dictation) and leverages LLaMA 3.1 to extract clean, structured incident tickets in under a second.
  • Live Tactical Grid: Connects with Supabase to sync incoming tickets in real time across all dispatch consoles, complete with audio alarms for critical Level 1 emergencies.
  • Interactive Kanban Board: Allows operators to manage the lifecycle of active incidents (Pending → En Route → On Scene → Resolved) and tracks live 5-minute SLAs (Δt ≤ 300s) to prevent incident neglect.
  • Tactical Mapping: Automatically plots coordinate bounds on a Leaflet map with dark-mode canvas overlays.
  • Commander's SitRep: Instantly compiles a typewriter-animated tactical briefing summarizing active incidents and suggesting asset routing actions with one click.
  • System Telemetry: Visualizes historical trends, incident severity, and status pipelines using Chart.js.

How we built it

We built CrisisGrid as a modern, high-performance web application designed for fast deployment:

  • Frontend: Built with React 18 and bundled with Vite 5 for lightning-fast hot-module reloading and optimized production compilation.
  • Design & UI: Styled with Tailwind CSS using dark-theme glassmorphism overlays, custom typography (Outfit & JetBrains Mono), smooth marquee tickers, and responsive layouts.
  • Database & Sync: Integrated Supabase to manage our PostgreSQL database and subscribed our React state directly to WebSocket channels to sync multiple operator screens simultaneously.
  • AI Inference: Powered by the Groq LPU (Language Processing Unit) running llama-3.1-8b-instant to achieve sub-second inference speeds (< 300ms) for triage extraction and SitRep synthesis.
  • Visual Elements: Integrated Leaflet.js and OpenStreetMap for spatial plotting, and Chart.js for dashboard visualizations.

Challenges we ran into

  • Enforcing Strict JSON Output: Ensuring the AI model always returned clean, parsable JSON without conversational filler (e.g., "Here is your ticket:") was tough when given extremely garbled distress inputs. We solved this by pairing custom system prompts with the Groq API's strict JSON schema mode.
  • Map and Chart Lifecycle Management: Initializing Leaflet maps and Chart.js instances inside React's virtual DOM often led to canvas duplication and memory leaks. We resolved this by managing instances through explicit useRef hooks and clean-up functions in React's component teardown phase.
  • Windows Drive-Letter Casing: During local development on Windows, Vite's asset security server blocked relative config fetches due to casing mismatch discrepancies in absolute drive paths (e.g., d:\ vs D:\). We resolved this by tuning our Vite middleware configurations.

Accomplishments that we're proud of

  • Achieving average latency of t_inference < 300ms for AI triage parsing, making the application fast enough for active emergency dispatch.
  • Creating a fully-functional voice dictation system that runs entirely in the browser using the Web Speech API.
  • Maintaining visual parity with our original design system, resulting in a dark-theme dashboard that looks professional in a command center and adapts to mobile screens.

What we learned

  • How to handle real-time PostgreSQL replication and channel subscriptions inside React's component state.
  • Managing asynchronous token loading and fallback setups to load secure configuration keys on hosting platforms like Vercel.
  • Optimizing Leaflet map markers to dynamically fit screen boundaries when pins are created or resolved.

What's next for CrisisGrid

  • Offline Mode: Implementing local speech synthesis and client-side database caching (via IndexedDB) so dispatchers can run triage in complete grid blackouts.
  • Multi-Agent Dispatch Coordination: Building autonomous agents that automatically schedule and coordinate resource allocation to maximize vehicle routing efficiency.
  • Computer Vision Triage: Upgrading the engine to accept drone imagery and photos sent directly from distress zones, allowing the AI to analyze visual damage (like fire or structural collapse) to determine severity levels automatically.

Built With

Share this project:

Updates