# bharathkumark843-pixel/forest_fire_detection architecture

> Architecture diagram of the GitHub repository bharathkumark843-pixel/forest_fire_detection, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/bharathkumark843-pixel/forest_fire_detection
- Repository: https://github.com/bharathkumark843-pixel/forest_fire_detection

## Overview

This is a forest-fire detection and monitoring dashboard. Operators submit images or run simulated camera scans; the React client sends frames to Flask, which classifies them and returns fire status, confidence, and explainability data. Results feed dashboard history, statistics, alerts, and camera status. The README also documents live NASA hotspot mapping and model evaluation. Backend behavior is concentrated in one file; unsampled implementation details are represented only where documented, and uncertain internal wiring is omitted.

Main entry points: [`backend/app.py`](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/backend/app.py) (Flask API), [`frontend/src/App.jsx`](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/App.jsx) (Dashboard state), [`frontend/src/components/MapView.jsx`](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/components/MapView.jsx) (Camera and hotspot map), [`frontend/src/components/LiveMonitor.jsx`](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/components/LiveMonitor.jsx) (Live monitor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Monitoring dashboard"]
  node_app["Dashboard state<br/>[App.jsx]"]
  node_upload["Image upload<br/>[UploadPanel.jsx]"]
  node_live["Live monitor<br/>[LiveMonitor.jsx]"]
  node_result["Risk results<br/>[ResultCard.jsx]"]
  node_history["History and stats<br/>[HistoryPanel.jsx]"]
  node_alerts["Alert display<br/>[AlertBanner.jsx]"]
  node_alertconfig["Alert settings<br/>[AlertLog.jsx]"]
  node_map["Camera and hotspot map<br/>[MapView.jsx]"]
  node_locations["Camera locations<br/>[cameraLocations.js]"]
end

subgraph group_service["Detection service"]
  node_api["Flask API<br/>[app.py]"]
  node_inference["Classification and Grad-CAM<br/>[app.py]"]
  node_log[("Detection log<br/>[app.py]")]
  node_alertmail["Critical-risk email<br/>[app.py]"]
end

subgraph group_model["Model lifecycle"]
  node_modelasset["Trained model<br/>[fire_model.h5]"]
  node_training["Model training and evaluation<br/>[train_model.py]"]
  node_metrics["Evaluation metrics<br/>[eval_metrics.json]"]
end

subgraph group_integrations["External data"]
  node_firms["NASA FIRMS"]
  node_smtp["Gmail SMTP"]
  node_tile["Map tiles"]
end

node_operator(("Operator"))

node_operator -->|"uses dashboard"| node_app
node_app -->|"offers upload"| node_upload
node_app -->|"starts monitoring"| node_live
node_upload -->|"posts image"| node_api
node_live -->|"posts frames"| node_api
node_api -->|"runs prediction"| node_inference
node_inference -->|"loads model"| node_modelasset
node_api -->|"records detections"| node_log
node_api -->|"sends critical alerts"| node_alertmail
node_alertmail -.->|"sends email"| node_smtp
node_api -.->|"fetches hotspots"| node_firms
node_app -->|"loads history and stats"| node_api
node_map -->|"requests hotspots"| node_api
node_map -->|"reads coordinates"| node_locations
node_map -.->|"loads basemap"| node_tile
node_api -->|"serves history and stats"| node_log
node_training -->|"writes trained model"| node_modelasset
node_training -->|"writes evaluation"| node_metrics
node_app -->|"shows prediction"| node_result
node_app -->|"updates and displays"| node_history
node_app -->|"displays alerts"| node_alerts
node_alertconfig -->|"configures alert email"| node_api
node_live -->|"resolves camera"| node_locations
node_api -->|"generates Grad-CAM"| node_inference

click node_app "https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/App.jsx"
click node_upload "https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/components/UploadPanel.jsx"
click node_live "https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/components/LiveMonitor.jsx"
click node_result "https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/components/ResultCard.jsx"
click node_history "https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/components/HistoryPanel.jsx"
click node_alerts "https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/components/AlertBanner.jsx"
click node_alertconfig "https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/components/AlertLog.jsx"
click node_map "https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/components/MapView.jsx"
click node_locations "https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/cameraLocations.js"
click node_api "https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/backend/app.py"
click node_inference "https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/backend/app.py"
click node_log "https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/backend/app.py"
click node_alertmail "https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/backend/app.py"
click node_modelasset "https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/ml-model/fire_model.h5"
click node_training "https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/ml-model/train_model.py"
click node_metrics "https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/ml-model/eval_metrics.json"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_upload,node_live,node_result,node_history,node_alerts,node_alertconfig,node_map,node_locations toneBlue
class node_api,node_inference,node_log,node_alertmail toneAmber
class node_modelasset,node_training,node_metrics toneMint
class node_firms,node_smtp,node_tile toneRose
class node_operator toneIndigo
```

## Components

### Monitoring dashboard

- [Dashboard state](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Image upload](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/components/UploadPanel.jsx): `frontend/src/components/UploadPanel.jsx`
- [Live monitor](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/components/LiveMonitor.jsx): `frontend/src/components/LiveMonitor.jsx`
- [Risk results](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/components/ResultCard.jsx): `frontend/src/components/ResultCard.jsx`
- [History and stats](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/components/HistoryPanel.jsx): `frontend/src/components/HistoryPanel.jsx`
- [Alert display](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/components/AlertBanner.jsx): `frontend/src/components/AlertBanner.jsx`
- [Alert settings](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/components/AlertLog.jsx): `frontend/src/components/AlertLog.jsx`
- [Camera and hotspot map](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/components/MapView.jsx): `frontend/src/components/MapView.jsx`
- [Camera locations](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/frontend/src/cameraLocations.js): `frontend/src/cameraLocations.js`

### Detection service

- [Flask API](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/backend/app.py): `backend/app.py`
- [Classification and Grad-CAM](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/backend/app.py): `backend/app.py`
- [Detection log](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/backend/app.py): `backend/app.py`
- [Critical-risk email](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/backend/app.py): `backend/app.py`

### Model lifecycle

- [Trained model](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/ml-model/fire_model.h5): `ml-model/fire_model.h5`
- [Model training and evaluation](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/ml-model/train_model.py): `ml-model/train_model.py`
- [Evaluation metrics](https://github.com/bharathkumark843-pixel/forest_fire_detection/blob/main/ml-model/eval_metrics.json): `ml-model/eval_metrics.json`

### External data

- **NASA FIRMS**
- **Gmail SMTP**
- **Map tiles**

### Other components

- **Operator**

## Connections

- Operator → Dashboard state: uses dashboard
- Dashboard state → Image upload: offers upload
- Dashboard state → Live monitor: starts monitoring
- Image upload → Flask API: posts image
- Live monitor → Flask API: posts frames
- Flask API → Classification and Grad-CAM: runs prediction
- Classification and Grad-CAM → Trained model: loads model
- Flask API → Detection log: records detections
- Flask API → Critical-risk email: sends critical alerts
- Critical-risk email → Gmail SMTP: sends email
- Flask API → NASA FIRMS: fetches hotspots
- Dashboard state → Flask API: loads history and stats
- Camera and hotspot map → Flask API: requests hotspots
- Camera and hotspot map → Camera locations: reads coordinates
- Camera and hotspot map → Map tiles: loads basemap
- Flask API → Detection log: serves history and stats
- Model training and evaluation → Trained model: writes trained model
- Model training and evaluation → Evaluation metrics: writes evaluation
- Dashboard state → Risk results: shows prediction
- Dashboard state → History and stats: updates and displays
- Dashboard state → Alert display: displays alerts
- Alert settings → Flask API: configures alert email
- Live monitor → Camera locations: resolves camera
- Flask API → Classification and Grad-CAM: generates Grad-CAM