🔗 https://69f09895e9bcfc5d693b3ca3--tiny-shortbread-d734c4.netlify.app/

---

⚡ What is TranaAI?

TranaAI (from Sanskrit त्राण — Rescue · Deliverance · Protection) is an AI-powered disaster response command center built for Google Solution Challenge 2026. It gives emergency coordinators real-time situational awareness across 30 disaster zones in India — combining live weather data, seismic monitoring, and Google Gemini AI to deliver actionable intelligence when every second matters.

┌─────────────────────────────────────────────────────────────────────┐
│  🚨 Disaster Strikes  →  📡 TranaAI Activates  →  🤖 Gemini Thinks  │
│  🗺️ Map Updates       →  👥 Volunteers Deploy  →  ✅ Lives Saved     │
└─────────────────────────────────────────────────────────────────────┘

---

🎮 Live Demo — No Installation Needed

Open the link → Click "Launch Dashboard" → Full command center in your browser

Step	Action	Result
1	Open live demo link	🌐 Landing page loads
2	Click "Launch Dashboard"	🎬 Cinematic entry animation
3	Click "Run AI Allocation"	🗺️ Deployment lines appear on map
4	Paste your free Gemini key	🤖 AI analysis unlocks
5	Click 🎙️ mic → Say "Run AI"	⚡ Voice command executes

🔑 What works without an API key?

Feature	Without Key	With Gemini Key
🗺️ Command Center & Map	✅ Full Access	✅ Full Access
⚡ AI Allocation Engine	✅ Full Access	✅ Full Access
🔮 What-If Simulation	✅ Full Access	✅ Full Access
👥 Personnel Management	✅ Full Access	✅ Full Access
📝 Incident Reporting	✅ Full Access	✅ Full Access
🎙️ Voice Commands	✅ Full Access	✅ Full Access
🎬 Crisis Replay	✅ Full Access	✅ Full Access
🌦️ 72-Hour Weather Forecast	✅ Full Access	✅ Full Access
🧠 Gemini AI Analysis	❌ Locked	✅ Unlocked
📊 Prediction Briefings	❌ Locked	✅ Unlocked
💬 Ask Gemini Q&A	❌ Locked	✅ Unlocked

💡 Get a free Gemini API key at aistudio.google.com — takes 30 seconds. Keys stay in your browser only, never sent to any server.

---

✨ Key Features

🗺️ Interactive Command Center Google Maps with real-time disaster zone markers Color-coded severity across 30 Indian cities AI-computed deployment flow lines (volunteer → zone) Drone telemetry simulation overlay One-click AI Allocation Engine	🧠 Gemini AI Priority Engine Custom weighted priority formula Tunable weights — adjust algorithm in real time AI Thinking visualization with step-by-step feedback Typewriter-effect field report rendering "Ask Gemini" — free-form Q&A about any crisis
🔮 72-Hour Predictive Forecast Live data from Open-Meteo & USGS APIs Multi-hazard scoring: Flood · Cyclone · Heatwave · Earthquake Gemini-generated briefings with confidence scores Heatmap overlay on Google India Map Auto-refresh every 10 minutes	⚡ What-If Simulation Engine Severity Escalation slider (0–5 pts across zones) Volunteer Unavailability simulation (0–80% drop) Isolated or Global simulation modes Post-simulation impact analysis Real-time re-scoring on slider change
👥 Smart Personnel Management Volunteer directory with skill-based filtering NLP-based skill extraction from descriptions Smart Deployment Match — AI maps volunteers to zones Auto-detect GPS location Paginated, sorted volunteer table	🎙️ Voice Command Interface Web Speech API for hands-free operation Say "Run AI" → triggers AI allocation Say "Deploy rescue" → deploys rescue units Say "Increase severity" → escalates top zone Visual feedback: Listening → Processing → Done

---

🧮 Priority Scoring Algorithm

The core allocation engine uses a weighted composite score:

P(zone) = w₁ × (severity / 10) + w₂ × min(pop / 400K, 1) + w₃ × min((20 - res) / 20, 1) + w₄ × min(max(trend, 0) / 2, 1)

Weight	Default	Factor	Rationale
w₁	0.40	Base Severity	Ground truth conditions
w₂	0.20	Population	Human impact scale
w₃	0.20	Resource Gap	Supply deficit urgency
w₄	0.20	Severity Trend	Rate of deterioration

🎛️ All weights are user-tunable in real time via the Priority Engine panel

---

🔥 Multi-Hazard Risk Scoring

🌊 Flood Risk	🌀 Cyclone Risk	🌡️ Heatwave Risk	🌍 Earthquake Risk
40% weight	25% weight	20% weight	15% weight
Precipitation + probability	Wind speed + storm codes	Temperature > 42°C	USGS events within 200km

Uses the Haversine formula for geographic distance calculations between cities and seismic events.

---

🏗️ System Architecture

╔══════════════════════════════════════════════════════════════════╗
║                        🛡️  TranaAI                               ║
╠══════════════════════════════════════════════════════════════════╣
║                                                                  ║
║   ┌─────────────┐  ┌──────────────────┐  ┌───────────────────┐  ║
║   │  🏠 Landing  │  │ 🗺️ Command Center │  │ 🔮 Prediction     │  ║
║   │    Page     │  │   (Main HQ)      │  │  Engine (72-hr)   │  ║
║   └─────────────┘  └────────┬─────────┘  └─────────┬─────────┘  ║
║                             │                       │            ║
║   ┌─────────────┐  ┌────────┴─────────┐  ┌─────────┴─────────┐  ║
║   │ 🧠 AI       │  │ ⚡ What-If        │  │ 👥 Personnel      │  ║
║   │  Priority   │  │   Simulation     │  │   Management      │  ║
║   └──────┬──────┘  └──────────────────┘  └───────────────────┘  ║
║          │                                                        ║
╠══════════╧════════════════════════════════════════════════════════╣
║                      ⚙️  Zustand Store                           ║
║   zones[] · personnel[] · weights{} · predictions[]             ║
║   aiAllocations[] · mapPolylines[] · stateHistory[]             ║
╠══════════════════════════════════════════════════════════════════╣
║                    🌐 External Services                          ║
║   🤖 Google Gemini 2.0 Flash  ·  🌤️ Open-Meteo API              ║
║   🌍 USGS Earthquake API      ·  🗺️ Google Maps JS API           ║
║   🎙️ Web Speech API                                              ║
╚══════════════════════════════════════════════════════════════════╝

---

🛠️ Tech Stack

Layer	Technology	Purpose
Framework		UI rendering & fast HMR
State		Global state management
Maps		Interactive disaster zone map
Charts		Priority queue visualization
AI		Strategic analysis & briefings
Weather		72-hour forecast data
Seismic		Real-time earthquake monitoring
Voice		Voice command interface
Hosting		Production deployment
Language		Mixed (services in TS, components in JSX)

---

🔵 Google Technologies Used

 ┌──────────────────────────────────────────────────────────────┐
 │                   🔵 Google Ecosystem                        │
 │                                                              │
 │  🤖 Gemini 2.0 Flash   →  Core AI: triage, Q&A, forecasts   │
 │  🗺️ Maps JavaScript API →  Interactive disaster map          │
 │  🔤 Google Fonts        →  Rajdhani military typography      │
 │  🎙️ Web Speech API      →  Voice command interface           │
 └──────────────────────────────────────────────────────────────┘

---

📡 Data Sources

Source	Data	Frequency
🌤️ Open-Meteo API	72-hour forecasts (precip, wind, temp)	Every 10 min
🌍 USGS Earthquake API	M2.5+ quakes, India bounding box, past 7 days	Every 10 min
📍 Internal Zone Data	30 Indian cities — severity, population, resources	Real-time sim
🤖 Google Gemini	AI-generated threat analysis & prediction reasoning	On-demand

---

🚀 Getting Started

Prerequisites

Node.js ≥ 18  ·  pnpm (recommended)  ·  Gemini API Key  ·  Google Maps API Key

Installation

# 1. Clone the repository
git clone https://github.com/UTKARSHH20/trana-ai.git
cd trana-ai

# 2. Install dependencies
pnpm install

# 3. Configure environment (optional — keys can also be entered in-app)
echo "VITE_GEMINI_API_KEY=your_gemini_key_here" > .env
echo "VITE_GOOGLE_MAPS_KEY=your_maps_key_here" >> .env

# 4. Start development server
pnpm dev
# → http://localhost:5173/

📦 Environment Variables Reference

Variable	Required	Description
VITE_GEMINI_API_KEY	Optional	Google Gemini API key (can enter in-app)
VITE_GOOGLE_MAPS_KEY	Optional	Google Maps JavaScript API key

Note: Both keys can be entered directly in the UI. They're stored only in browser memory — never sent to any backend.

---

📁 Project Structure

🗂️ Click to expand full project tree

trana-ai/
├── 📄 index.html                   # Entry HTML with SEO meta tags
├── 📦 package.json                 # Dependencies & scripts
├── ⚙️  tsconfig.json                # TypeScript configuration
└── src/
    ├── 🚀 main.jsx                 # React DOM mount point
    ├── 🌐 App.jsx                  # Root router & layout orchestrator
    ├── 🎨 index.css                # Global styles, animations, dark theme
    │
    ├── pages/
    │   ├── 🏠 Landing.jsx          # Cinematic landing with count-up animations
    │   ├── 🗺️  CommandCenter.jsx    # Main 3-column operations dashboard
    │   ├── 🔮 PredictPage.jsx      # 72-hour AI prediction module
    │   ├── 🧠 AIPriority.jsx       # Priority engine + Gemini analysis
    │   ├── ⚡ Simulate.jsx          # What-if simulation engine
    │   ├── 👥 Personnel.jsx        # Volunteer directory & smart matching
    │   └── 📝 ReportIncident.jsx   # New incident reporting form
    │
    ├── components/
    │   ├── 🗺️  GoogleIndiaMap.jsx   # Google Maps with zone markers & polylines
    │   ├── 🇮🇳 IndiaMap.jsx         # SVG fallback map of India
    │   ├── 📌 Sidebar.jsx          # Navigation sidebar
    │   ├── 📢 AlertTicker.jsx      # Scrolling crisis alert banner
    │   ├── 🎙️  VoiceCommand.jsx     # Speech recognition interface
    │   ├── 📊 ZoneDetailCard.jsx   # Zone detail panel with metrics
    │   └── 🔥 WowFeatures.jsx      # Crisis mode, impact panel, AI thinking
    │
    ├── store/
    │   └── 🗃️  index.js             # Zustand store
    │
    ├── services/
    │   ├── 🌦️  predictionService.ts  # Open-Meteo + USGS data fetching
    │   └── 🤖 geminiPrediction.ts  # Gemini prediction briefing generation
    │
    ├── utils/
    │   ├── 💬 gemini.js            # Gemini API client & prompt builder
    │   ├── ⚖️  riskScorer.ts        # Multi-hazard risk calculation engine
    │   └── 🔧 helpers.js           # Utility functions
    │
    └── data/
        ├── 📍 zones.js             # 30 disaster zones across India + GeoJSON
        └── 👤 personnel.js         # Volunteer data generator

---

🧪 Recommended Demo Flow (For Judges)

Step 1  →  Landing          Click "Launch Dashboard" for cinematic entry
Step 2  →  Command Center   Click "Run AI Allocation" → deployment lines on map
Step 3  →  Command Center   Click a zone → drone telemetry overlay activates
Step 4  →  Command Center   Click "Replay Crisis" → state history playback
Step 5  →  AI Priority      Enter Gemini key → Run Analysis → watch thinking + typewriter
Step 6  →  AI Priority      "Ask Gemini": "Which zone needs medical teams urgently?"
Step 7  →  Prediction       View 72-hr forecast → click a city for risk breakdown
Step 8  →  Simulation       Set severity +3, volunteer drop 40% → run → see impact
Step 9  →  Personnel        Register volunteer: "doctor with boat" → Smart Deploy Match
Step 10 →  Report Incident  Submit new zone → watch it appear live on the map
Step 11 →  Voice            Click mic → say "Run AI" → watch allocation execute

---

☁️ Deploy to Netlify

🚀 Click for deployment options

Option 1 — One-Click Deploy

Option 2 — Manual CLI

pnpm build
npm install -g netlify-cli
netlify login
netlify deploy --prod --dir=dist

Option 3 — Git-Connected (Recommended)

Setting	Value
Build command	pnpm build
Publish directory	dist
Node version	18+
VITE_GEMINI_API_KEY	Your Gemini API key
VITE_GOOGLE_MAPS_KEY	Your Google Maps key

---

👥 Team ROOKIES

UTKARSHH20	utkarshxdsc	Rishal2324	Samar-Saifi
Frontend & UI/UX	AI/ML & Gemini Integration	Backend & Data Pipeline	Maps & Visualization

---

🗺️ Roadmap

• 🔄 Backend persistence (Firebase/Supabase)
• 🤝 Real-time multi-user collaboration (WebSocket)
• 📱 Mobile-responsive PWA with offline-first mode
• 🎙️ Multi-Language Voice Assistant (Hindi, Tamil, Telugu, Bengali)
• 🏥 Hospital & Blood Bank live integration
• 🛰️ IMD (India Meteorological Department) API integration
• 🚁 Drone & IoT sensor data ingestion
• 📊 Post-disaster recovery tracker module
• 🏅 Gamified volunteer engagement system
• 🔗 NDMA official API integration

---

📄 License

This project is built for Google Solution Challenge 2026 and is available under the MIT License.

Powered by Google Gemini · Google Maps · Open-Meteo · USGS

त्राण — Rescue. Deliver. Protect.