Inspiration
Traffic congestion in regional hubs like Monroe, LA, leads to wasted time, increased fuel consumption, and, most critically, delayed response times for emergency vehicles. Our inspiration came directly from the Bayou Code Challenge problem statement: outdated systems cannot react to real-time situations. We sought to build a smart, centralized nexus that leverages powerful AI to perform complex, life-saving route calculations instantly, prioritizing safety and speed over simple shortest distance.
What it does
Étouffée is an AI-driven Emergency Route Optimization Dashboard.
Dynamic Input: Users input any Origin and Destination address, mimicking a dispatcher receiving a call.
Scenario Simulation: The system dynamically generates four competing, realistic routes (e.g., Main Arterial, Back Streets) and assigns simulated real-time conditions (Accidents, Heavy Congestion, Estimated Time) to each path.
AI Analysis: It feeds this data to the Gemini 2.5 Flash API, which acts as an "Emergency Route Optimization AI" to choose the single fastest and safest path, ignoring congested or blocked routes even if they are shorter.
Visualization: The chosen optimal route is immediately reflected in the embedded Google Maps Directions display.
Interactive Control: The dashboard includes an interactive traffic light control panel, demonstrating how human operators or future autonomous systems could manually or automatically override intersection phases.
How we built it
We used a modern, full-stack approach centered on AI-driven decision-making:
Backend & API Logic: Python Flask was used to serve the application and orchestrate the core logic. This layer includes the dynamic simulate_traffic_scenario function and the crucial API endpoint that handles the AI request.
AI Core: Google Gemini 2.5 Flash was utilized for structured analysis. We employed strict System Instructions and JSON output configuration to ensure the model reliably processes the simulated route data (JSON input) and returns a clean, actionable decision (chosen_route_id and justification in JSON).
Frontend (UI/UX): Built with pure HTML, Tailwind CSS, and custom JavaScript. The design adheres to a sleek, high-fidelity, futuristic aesthetic (Apple-inspired), featuring vibrant gradients, smooth CSS morphing transitions, and an entirely custom cursor for an immersive, tactile experience.
Map Integration: The final output includes a function that dynamically generates a pre-configured Google Maps Directions URL, ensuring the map visualization immediately displays the path chosen by the AI.
Challenges we ran into
The primary challenges involved reliability and aesthetic complexity:
Structured AI Output: Ensuring the Gemini model consistently returned a valid JSON object with the exact required keys, despite varying input scenarios. We overcame this by making the system instructions extremely strict and leveraging the response_mime_type="application/json" configuration.
Frontend Interactivity: Implementing the desired custom cursor effects and dynamic hover offsets on interactive elements without relying on heavy external libraries. This required precise use of JavaScript mouse events and advanced CSS transitions.
URL Resolution in Sandbox: Initial environment-specific errors when the JavaScript tried to fetch data using relative paths (/get-route). This was fixed by adopting the robust URL resolution technique: new URL(path, window.location.href).
Accomplishments that we're proud of
AI Decision Value: Successfully implementing the Gemini AI not just for text, but for critical, data-driven decision-making—proving that an LLM can analyze complex, quantitative data structures (our simulated routes) to produce an optimized output.
High-Fidelity UI: Delivering a visually stunning, highly responsive UI/UX that elevates the project beyond a simple proof-of-concept into a believable, professional dashboard, complete with custom cursor physics and smooth, modern animations.
Full Integration: Creating a cohesive, fully functional prototype that seamlessly links user input to the AI engine, backend processing, and final map visualization in a single, fluid user experience.
What we learned
We gained significant insights into engineering reliability into generative AI solutions, specifically:
Prompt Engineering for Structure: The importance of aggressive system instructions and JSON schemas when using AI for analysis and decision-making where output precision is non-negotiable.
Frontend Performance: How to achieve high-quality, high-performance visual effects (like gradients and cursor tracking) primarily through efficient CSS and minimal, well-optimized JavaScript.
Python for Orchestration: The power of using Flask as a lightweight broker between a user interface and advanced cognitive services like the Gemini API.
What's next for Étouffée
Our next steps are focused on real-world impact and expanded functionality:
Temporal Simulation: Incorporating simulated time-of-day logic (e.g., peak rush hour traffic is worse near ULM at 5 PM) to make the simulation data richer.
Traffic Light Intervention: Enabling the AI to not just recommend a route, but to also dynamically adjust the intersection light phases in the simulation (using the built-in control panel logic) to prioritize the movement of the chosen emergency vehicle path.
User Feedback Loop: Adding a feature to let users provide feedback on whether the chosen AI route felt optimal, feeding a synthetic reinforcement loop back to the simulation model.
Log in or sign up for Devpost to join the conversation.