DisasterShield AI — Fire TV Edition

Smart living-room disaster awareness powered by Google Gemma AI & 3D WebGL Digital Twin simulation for real-time alerts, checklists, and safety guidance on Fire TV.

Comment

💡 Inspiration

During catastrophic natural disasters—such as flash floods, severe earthquakes, or structural fires—families instinctively gather around the living room television for urgent updates. However, conventional TV broadcasts suffer from critical shortcomings:

  • One-way & Passive: Broadcasts lack interactive localization; families cannot check their specific sector or relief depot.
  • Panic & Information Overload: Fast-scrolling tickers and repetitive news loops create panic rather than actionable clarity.
  • Single Point of Failure: Network congestion or cellular tower outages frequently disable mobile apps during emergencies.

We asked ourselves: What if the smart TV could become an active, localized, and intelligent household command center?

That inspired DisasterShield AI (Fire TV Edition)—a purpose-built emergency response platform designed specifically for the Amazon Fire TV 10-foot interface. It combines Google Gemma AI safety intelligence, real-time tactical mapping, and an interactive 3D WebGL Digital Twin simulation directly in the living room.

🚀 What It Does

DisasterShield AI transforms any Fire TV or smart television into an intuitive, remote-controlled disaster awareness hub:

  1. 10-Foot Living Room TV Interface: Engineered specifically for D-pad navigation, high-contrast readability, bold focus indicators, and virtual remote overlays.
  2. Interactive 3D Digital Twin Simulation: A WebGL-powered 3D twin of urban sectors visualizing topographic flood inundation, dynamic fire embers, seismic ground tremor physics, and storm rainfall.
  3. Google Gemma AI Safety Assistant: Grounded emergency intelligence powered by Google Gemma 4 architecture (gemma4:e2b), delivering verified evacuation guidance, SOS briefings, and safety checklists.
  4. Tactical GIS Map: Live geospatial incident visualization displaying verified alerts, medical relief depots, NDRF staging bases, and safe zones.
  5. Emergency Helplines & Checklists: One-click access to NDRF, SDRF, Ambulance, and Fire helplines with interactive offline safety checklists.
  6. 100% Transparent Offline Resilience: Automatic local fallbacks ensure zero downtime even if internet connectivity drops during an active crisis.

🛠️ How We Built It

DisasterShield AI is built as a unified full-stack television ecosystem:

1. Television Frontend & 10-Foot Design System

  • Built with clean HTML5, CSS3, and Vanilla JavaScript with zero heavy framework overhead, ensuring instantaneous rendering on low-power Fire TV sticks.
  • Custom TV spatial navigation engine (app.js) handling ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Enter, and Fire TV remote keycodes (KEYCODE_DPAD_*).

2. 3D WebGL Digital Twin Simulation Engine

  • Developed an embedded, hardware-accelerated Three.js simulation (simulation_embed.html) featuring:
    • Procedural Topographic Inundation: Wave ripple equations: $$\eta(x, y, t) = A_1 \sin(k_x x + \omega_1 t) + A_2 \cos(k_y y + \omega_2 t)$$
    • Seismic Wave Tremor Physics: Harmonic ground and building oscillation: $$u(t) = A_{\text{shake}} \cdot \sin(\omega_{\text{seismic}} \cdot t)$$
    • Dynamic Particle Fire & Storm Lightning: GPU-accelerated particle buffers simulating rising flame embers and stochastic lightning flashes.
    • Graceful WebGL Diagnostic Fallback: Real-time context detection ensures users never see a blank screen if hardware acceleration is unavailable.

3. AI Safety Brain (Google Gemma 4)

  • Integrated Google Gemma 4 with strict prompt boundaries, temperature tuning ($T = 0.2$), and deterministic heuristic fallbacks to ensure life-safety instructions never hallucinate.

4. Native Wrapper & Edge Deployment

  • Android Fire TV Wrapper: Native Android Studio project with WebView, hardware acceleration flags, and fullscreen immersive TV mode.
  • Static Edge Distribution: Deployed on Vercel with custom rewrite pipelines (vercel.json), plus Python Flask microservices on Render.

🧗 Challenges We Faced

  1. Living Room TV D-Pad Navigation: Designing for a TV remote without a touch screen or mouse requires strict focus management. We built an active spatial memory matrix so navigation seamlessly flows across 8 screens and modal controls.
  2. 3D WebGL Graphics on Television Browsers: Initial deployments encountered $0 \times 0$ canvas dimensions when switching between hidden CSS tabs (display: none), causing WebGL aspect ratio distortion. We solved this by implementing asynchronous dimension sync via postMessage({ action: 'resize' }) and bundling local Three.js assets to prevent CDN blocking.
  3. Zero-Hallucination Emergency Guardrails: In disaster management, AI hallucinations can be fatal. We implemented a strict rule-based heuristic fallback engine and prompt guardrails ensuring Gemma AI strictly advises on verified safety protocols.

🏆 Accomplishments That We're Proud Of

  • 25/25 Passing Unit Tests: Comprehensive automated test coverage (pytest) validating API health checks, sector switches, Gemma AI fallback logic, and 3D simulation structure.
  • Fluid 60 FPS 3D Digital Twin: Running full procedural terrain, river physics, and structural buildings smoothly inside a smart TV browser.

  • Truly Zero-Crash Architecture: The application operates with 100% fidelity offline, on static edge hosting (Vercel), and in production cloud environment

    📚 What We Learned

  • Principles of 10-foot user experience (10ft UI) and accessibility guidelines for television screens.

  • Advanced Three.js memory management, canvas lifecycle handling, and WebGL context restoration.

  • Designing mission-critical AI applications with fallback guarantees for high-stress disaster scenarios.

🔮 What's Next for DisasterShield AI

  • CAP (Common Alerting Protocol) Ingestion: Integrating official government meteorological feeds (IMD, NDMA, NOAA) via automated webhooks.
  • Alexa Voice Remote Integration: Enabling hands-free voice commands ("Alexa, ask DisasterShield for nearest shelter") during power outages.
  • Neighborhood TV Mesh Network: Utilizing Wi-Fi Direct and local mesh relays to sync emergency status between neighboring smart TVs when cellular towers fail.

Built With

Share this project:

Updates

posted an update —

Milestone: 3D WebGL Digital Twin & Zero-Crash Fire TV Edge Deployment Live!

We are excited to share a major milestone in the evolution of DisasterShield AI (Fire TV Edition)! What started as an ambitious idea to turn the living-room television into a household disaster command center is now fully deployed, tested, and running live. What's New in This Release:

  1. Hardware-Accelerated 3D Digital Twin Engine**:

    • Integrated procedural Three.js WebGL physics simulating real-time flood water inundation, structural fire embers, seismic harmonic vibrations, and severe storm rain.
    • Added asynchronous dimension sync so the 3D canvas seamlessly adapts when switching TV tabs.
    • Bundled zero-dependency local Three.js assets with robust on-screen WebGL diagnostics.

  2. 10-Foot Living Room Spatial Navigation**:

    • Complete remote-control D-pad navigation (Arrow Keys, Enter/OK, Back) with high-contrast :focus-visible states tailored for living room viewing.
    • Virtual on-screen Fire TV remote overlay for easy desktop and mobile judge evaluations.

  3. Grounded Google Gemma 4 AI Assistant**:

    • Zero-hallucination safety guardrails ($T = 0.2$) delivering instant, structured evacuation advice, NDRF depot directions, and emergency supply checklists.

  4. 25/25 Passing Automated Unit Tests**:

    • 100% green test suite across API health, sector switches, Gemma fallback heuristics, and 3D simulation integrity.

Code Snippet: Procedural Wave Ripple Physics Here is a peek at the procedural wave elevation equation running on the Three.js riverbed mesh:

// Sinusoidal Water Ripple Physics
const pos = riverWaterMesh.geometry.attributes.position;
for (let i = 0; i < pos.count; i++) {
  const u = pos.getX(i);
  const v = pos.getY(i);
  pos.setZ(i, Math.sin(u * 0.08 + time * 1.8) * 0.35 + Math.cos(v * 0.08 + time * 1.5) * 0.25);
}
riverWaterMesh.geometry.attributes.position.needsUpdate = true;

Log in or sign up for Devpost to join the conversation.

Submission history