A geospatial AI/ML-based web platform backed by Physics-Informed Decision Making (PIML) to identify urban heat stress hotspots, quantify driving environmental factors (NDVI, Albedo, Urban Morphology), and run scenario-based spatial optimization for urban cooling interventions.
- Interactive 12x12 Microclimate GIS Grid: High-resolution spatial mapping of Landsat 8/ECOSTRESS Land Surface Temperature (LST), Sentinel-2 NDVI (Vegetation Index), Surface Roof Albedo, Building Height Canyon Density, and UTCI (Universal Thermal Climate Index).
- Hotspot Cluster Detection: Automatic severity tiering (
Extreme,High,Moderate) prioritizing vulnerable urban populations.
-
Surface Heat Energy Balance Model: Enforces thermodynamic conservation laws (
$Q_{net} = R_n - G - H - LE$ ) ensuring scenario predictions respect physical limits of evapotranspiration and solar absorption. - XAI Driver Quantification (SHAP Values): Quantifies the precise percentage contribution of low vegetation cover, dark roof albedo, building canyon trapping, and stagnant wind for any selected neighborhood.
-
Interventions Supported:
- 🌳 Urban Tree Canopy Expansion (
$\Delta\text{NDVI}$ , shading, evapotranspiration) - 🏠 Cool Roof Coatings (
$\alpha$ reflectivity increase from 0.15 to 0.70+) - 🌿 Extensive Green Roofs (combined living sedum + albedo)
- 🌊 Urban Blue Infrastructure / Water Retention Ponds
- 🌳 Urban Tree Canopy Expansion (
-
Live Thermal Simulation: Drag coverage sliders (
$10% - 100%$ ) and run instant physics-informed thermal recalculations showing predicted$\Delta T_{LST}$ ,$\Delta T_{air}$ , and UTCI heat stress relief.
-
Pareto / Heuristic Placement Solver: Optimizes spatial intervention placement across urban grids under capital budget constraints ($100k -
$2.5M) to maximize population thermal relief ($ °C /$100k$ ).
- Dual-Map Split Screen: Side-by-side comparison of baseline observed LST vs mitigated scenario maps.
- Urban Climate Dashboards: Histograms of temperature distribution, NDVI vs LST scatter correlation plots, and UTCI population risk exposure curves.
- Frontend Framework: React 18 + Vite
- Styling & Aesthetics: Tailwind CSS v4 + Custom Cyberpunk Glassmorphism Design System
- Iconography: Lucide React
- Data Visualization: Recharts
- Special Effects: Canvas Confetti
- Node.js (v18 or higher)
- npm or yarn
# 1. Clone the repository
git clone <YOUR_GITHUB_REPO_URL>
cd "Urban Heat Mitigation AI"
# 2. Install dependencies
npm install
# 3. Start local development server
npm run devOpen http://localhost:5173 in your browser.
# Generate production bundle
npm run build.
├── src/
│ ├── components/
│ │ ├── Navbar.jsx # Header tab router & preset switcher
│ │ ├── MapViewer.jsx # GIS spatial grid map & satellite HUD
│ │ ├── HotspotPanel.jsx # Hotspot cluster listing & severity filters
│ │ ├── DriverAttribution.jsx # XAI SHAP heat driver attribution
│ │ ├── ScenarioSimulator.jsx # Cooling intervention simulator
│ │ ├── SpatialOptimizer.jsx # AI spatial optimization solver
│ │ ├── ComparisonView.jsx # Split screen thermal compare
│ │ └── AnalyticsDashboard.jsx # Climate stats & scatter plots
│ ├── services/
│ │ ├── geospatialData.js # Synthetic & remote sensing datasets
│ │ ├── pimlModel.js # Physics-Informed ML heat engine
│ │ └── optimizerService.js # Multi-objective placement solver
│ ├── App.jsx # Main dashboard router & state dispatcher
│ ├── index.css # Glassmorphism & custom styling
│ └── main.jsx # React entrypoint
├── index.html # Application HTML document
├── package.json # Project dependencies & scripts
├── vite.config.js # Vite & Tailwind CSS configuration
└── README.md # Documentation