Update TerraVision application and documentation

Commit the modified Streamlit application and expanded project documentation.

README.md

@@ -1,70 +1,742 @@
+
+# 🌍 TerraVision
+
+### Sharper Earth. Brighter Decisions.
+
+**TerraVision** is a GIS-based satellite imagery analysis platform that uses **Sentinel-2 satellite data** and the official **ESA OpenSR LDSR-S2 + SEN2SR super-resolution pipeline** to generate model-based **2.5 m resolution imagery** from freely available Sentinel-2 data.
+
+The platform combines satellite image super-resolution, geospatial processing, spectral analysis, visualization, and GeoTIFF export into a single web-based workflow.
+
+---
+
+## 🚀 Overview
+
+Sentinel-2 provides freely available multispectral imagery, but its spatial resolution can be limiting for detailed geospatial analysis.
+
+TerraVision addresses this challenge by:
+
+1. Selecting a location using latitude/longitude or an interactive map.
+2. Selecting a date range for Sentinel-2 imagery.
+3. Retrieving Sentinel-2 L2A data.
+4. Applying the **ESA LDSR-S2 + SEN2SR** super-resolution pipeline.
+5. Generating a model-based **2.5 m resolution, 10-band output**.
+6. Producing multiple GIS analysis layers.
+7. Providing an original-vs-super-resolved comparison.
+8. Exporting georeferenced GeoTIFF files and a ZIP containing all outputs.
+
+> **Important:** The 2.5 m imagery generated by TerraVision is a model-based reconstruction. It is not native 2.5 m satellite observation.
+
+---
+
+# ✨ Key Features
+
+### 🛰️ Sentinel-2 Data
+- Sentinel-2 L2A imagery
+- 10 spectral bands
+- User-defined geographical location
+- User-defined date range
+
+### 🔬 AI-Based Super Resolution
+- ESA OpenSR **LDSR-S2 + SEN2SR**
+- 10 m input
+- Model-generated 2.5 m output
+- 4× spatial upscaling
+- 10-band super-resolved output
+
+### 🗺️ GIS Visualization
+TerraVision generates:
+
+- Super-Resolved RGB
+- Original Sentinel-2 RGB
+- False Color / Infrared
+- SWIR Composite
+- NDVI
+- NDWI
+- NDBI
+- NBR
+- LDSR-S2 Uncertainty
+
+### 📊 Image Comparison
+An interactive before/after comparison allows users to visually compare:
+
+**Original Sentinel-2 → Super-Resolved Output**
+
+### 💾 Geospatial Export
+Users can download:
+
+- Individual GeoTIFF layers
+- Complete ZIP package containing all generated layers
+
+All exported layers preserve their geospatial reference information.
+
+---
+
+# 🧠 Super-Resolution Pipeline
+
+TerraVision uses the official ESA OpenSR approach combining:
+
+```text
+Sentinel-2 L2A
+      │
+      ▼
+Data Retrieval
+      │
+      ▼
+10-band Sentinel-2 Input
+      │
+      ▼
+LDSR-S2 + SEN2SR
+      │
+      ▼
+2.5 m Super-Resolved Output
+      │
+      ├── B02
+      ├── B03
+      ├── B04
+      ├── B05
+      ├── B06
+      ├── B07
+      ├── B08
+      ├── B8A
+      ├── B11
+      └── B12
+      │
+      ▼
+GIS Analysis Layers
+````
+
+The pipeline combines the strengths of:
+
+### LDSR-S2
+
+Latent diffusion super-resolution for Sentinel-2 RGB-NIR information.
+
+### SEN2SR
+
+Super-resolution processing for the additional Sentinel-2 spectral bands.
+
+Together, they provide the 10-band super-resolved output used by TerraVision.
+
+---
+
+# 🛰️ Sentinel-2 Bands
+
+| Band | Description         | Resolution |
+| ---- | ------------------- | ---------- |
+| B02  | Blue                | 10 m       |
+| B03  | Green               | 10 m       |
+| B04  | Red                 | 10 m       |
+| B05  | Vegetation Red Edge | 20 m       |
+| B06  | Vegetation Red Edge | 20 m       |
+| B07  | Vegetation Red Edge | 20 m       |
+| B08  | NIR                 | 10 m       |
+| B8A  | Narrow NIR          | 20 m       |
+| B11  | SWIR 1              | 20 m       |
+| B12  | SWIR 2              | 20 m       |
+
+The super-resolution pipeline produces these bands at the model-generated 2.5 m output scale.
+
+---
+
+# 📊 Spectral Analysis
+
+TerraVision converts the super-resolved bands into several commonly used remote-sensing indices.
+
+## 🌱 NDVI
+
+**Normalized Difference Vegetation Index**
+
+```text
+NDVI = (B08 - B04) / (B08 + B04)
+```
+
+Used to analyze vegetation density and vegetation condition.
+
+---
+
+## 💧 NDWI
+
+TerraVision uses the Green-NIR formulation:
+
+```text
+NDWI = (B03 - B08) / (B03 + B08)
+```
+
+Used to highlight water-related features.
+
+---
+
+## 🏙️ NDBI
+
+**Normalized Difference Built-up Index**
+
+```text
+NDBI = (B11 - B08) / (B11 + B08)
+```
+
+Used for identifying built-up and urban areas.
+
+---
+
+## 🔥 NBR
+
+**Normalized Burn Ratio**
+
+```text
+NBR = (B08 - B12) / (B08 + B12)
+```
+
+Useful for analyzing burn-affected areas and vegetation disturbance.
+
 ---
-title: TerraVision
-emoji: 🌍
-colorFrom: green
-colorTo: blue
-sdk: gradio
-sdk_version: "5.33.0"
-app_file: app.py
-pinned: false
-license: mit
+
+# 🎨 Visualization Layers
+
+TerraVision provides several visualization products.
+
+### RGB Composite
+
+```text
+R = B04
+G = B03
+B = B02
+```
+
+Provides a natural-color representation.
+
+### False Color Composite
+
+```text
+R = B08
+G = B04
+B = B03
+```
+
+Useful for vegetation analysis.
+
+### SWIR Composite
+
+```text
+R = B12
+G = B11
+B = B04
+```
+
+Useful for analyzing moisture, soil, built-up areas and burned regions.
+
 ---
 
-# 🌍 TerraVision — Sentinel-2 Super Resolution & Analysis
+# 📈 Uncertainty Map
+
+TerraVision also exposes the uncertainty estimation available from the underlying **LDSR-S2 RGB-NIR component**.
+
+The uncertainty map highlights areas where the super-resolution model has greater variation across generated samples.
 
-**Sharper Earth. Brighter Decisions.**
+```text
+Dark  → Lower estimated uncertainty
+Bright → Higher estimated uncertainty
+```
 
-TerraVision performs 4× satellite super-resolution on Sentinel-2 L2A imagery
-using the ESA **LDSR-S2** latent diffusion model and **SEN2SR**, upscaling from
-10 m to 2.5 m spatial resolution across all 10 bands.
+### Important limitation
+
+This should **not** be interpreted as a calibrated confidence score for the complete 10-band output.
+
+The current implementation calculates uncertainty from the underlying **4-band LDSR-S2 RGB-NIR model**.
 
 ---
 
-## How to Use
+# 🗺️ TerraVision Workflow
 
-1. **Click on the map** to select any location on Earth, or type coordinates manually.
-2. Set a **date range** (a few days is enough; the pipeline picks the first available image).
-3. Click **🚀 Generate Super-Resolution**.
-4. Explore the analysis layers and download the georeferenced GeoTIFF ZIP.
+```text
+User
+ │
+ ├── Select Location
+ │       └── Latitude / Longitude
+ │
+ ├── Select Date Range
+ │
+ ▼
+Sentinel-2 L2A Data
+ │
+ ▼
+Preprocessing
+ │
+ ▼
+ESA LDSR-S2 + SEN2SR
+ │
+ ▼
+2.5 m Super-Resolved Imagery
+ │
+ ├── RGB
+ ├── False Color
+ ├── SWIR
+ ├── NDVI
+ ├── NDWI
+ ├── NDBI
+ ├── NBR
+ └── Uncertainty
+ │
+ ▼
+Interactive Visualization
+ │
+ ▼
+GeoTIFF / ZIP Export
+```
 
 ---
 
-## Output Layers
+# 🛠️ Technology Stack
+
+## Frontend / UI
 
-| Layer | Description |
-|---|---|
-| **RGB** | True-colour super-resolved composite |
-| **False Color / NIR** | NIR–Red–Green (vegetation highlighting) |
-| **SWIR Composite** | SWIR2–SWIR1–Red (geology & burn scars) |
-| **NDVI** | Normalised Difference Vegetation Index |
-| **NDWI** | Normalised Difference Water Index |
-| **NDBI** | Normalised Difference Built-up Index |
-| **NBR** | Normalised Burn Ratio |
-| **LDSR-S2 Uncertainty** | Pixel-wise model uncertainty from the diffusion ensemble |
+* Python
+* Gradio
+* Interactive visualization
+* Image comparison slider
+* GIS map integration
 
-All layers are exported as **georeferenced GeoTIFF** files (EPSG as acquired)
-and bundled into a single ZIP download.
+## Machine Learning
+
+* PyTorch
+* ESA OpenSR
+* LDSR-S2
+* SEN2SR
+
+## Geospatial Processing
+
+* Rasterio
+* Rioxarray
+* GeoPandas
+* PyProj
+* Xarray
+* Dask
+* Cubo
+
+## Satellite Data
+
+* Sentinel-2 L2A
+* STAC-based data access
+
+## Model / Data Management
+
+* MLSTAC
+* Hugging Face ecosystem
+
+## Deployment
+
+* Hugging Face Spaces
+* Gradio
+* ZeroGPU-compatible architecture
 
 ---
 
-## Models
+# 📦 Installation
+
+Clone the repository:
+
+```bash
+git clone https://github.com/prateeksharmacoder-sys/satellite-LDRS-SEN2SR.git
+cd TerraVision
+```
+
+Create a virtual environment:
+
+```bash
+python -m venv venv
+```
+
+Activate it.
 
-- **LDSR-S2** — ESA / tacofoundation latent diffusion SR for RGB+NIR bands  
-  Weights: [`tacofoundation/RS-SR-LTDF`](https://huggingface.co/tacofoundation/RS-SR-LTDF)
-- **SEN2SR** — Swin Transformer SR for 20 m Sentinel-2 bands guided by LDSR-S2 output
+### Windows
+
+```bash
+venv\Scripts\activate
+```
+
+### Linux / macOS
+
+```bash
+source venv/bin/activate
+```
+
+Install dependencies:
+
+```bash
+pip install -r requirements.txt
+```
 
 ---
 
-## Technical Details
+# ▶️ Running the Application
+
+Run:
+
+```bash
+python app.py
+```
 
-- Input: 10-band Sentinel-2 L2A at 128 × 128 pixels (10 m native resolution)
-- Output: 10-band SR product at 512 × 512 pixels (2.5 m effective resolution)
-- Uncertainty: 5-sample diffusion ensemble (`n_variations=5`, `sampling_steps=50`)
-- Data source: [cubo](https://github.com/ESDS-Leipzig/cubo) → Microsoft Planetary Computer STAC
+The Gradio interface will provide a local web address.
+
+For development, the application can also be launched with:
+
+```python
+demo.launch()
+```
 
 ---
 
-## Acknowledgements
+# 📁 Project Structure
+
+```text
+TerraVision/
+│
+├── app.py
+├── requirements.txt
+├── README.md
+│
+├── models/
+│   └── model configuration / model assets
+│
+├── utils/
+│   ├── preprocessing.py
+│   ├── visualization.py
+│   ├── geotiff.py
+│   └── analysis.py
+│
+├── outputs/
+│   └── generated products
+│
+└── assets/
+    └── UI images / project assets
+```
+
+> The exact structure may vary depending on the final deployment version.
+
+---
+
+# 🔬 Technical Implementation
+
+### 1. Data Retrieval
+
+TerraVision retrieves Sentinel-2 L2A imagery using a STAC-based workflow.
+
+The application requests:
+
+```text
+B02
+B03
+B04
+B05
+B06
+B07
+B08
+B8A
+B11
+B12
+```
+
+---
+
+### 2. Preprocessing
+
+Sentinel-2 reflectance values are converted into normalized floating-point values before inference.
+
+```python
+low_resolution = low_resolution / 10000
+```
+
+---
+
+### 3. Super Resolution
+
+The combined model is loaded and executed using SEN2SR:
+
+```python
+super_resolution = sen2sr.predict_large(
+    model=model,
+    X=low_resolution,
+    overlap=16
+)
+```
+
+The model converts:
+
+```text
+10 × 128 × 128
+```
+
+into approximately:
+
+```text
+10 × 512 × 512
+```
+
+---
+
+### 4. Spectral Products
+
+The generated bands are used to calculate spectral indices such as:
+
+```python
+NDVI = (B08 - B04) / (B08 + B04)
+NDWI = (B03 - B08) / (B03 + B08)
+NDBI = (B11 - B08) / (B11 + B08)
+NBR  = (B08 - B12) / (B08 + B12)
+```
+
+---
+
+### 5. Geospatial Export
+
+Generated products are exported as GeoTIFF files while preserving:
+
+* CRS
+* Spatial transform
+* Resolution
+* Geographic bounds
+
+The prototype output was verified at:
+
+```text
+Resolution: 2.5 m
+CRS: EPSG:32630
+Output size: 512 × 512
+```
+
+The exact CRS changes according to the selected geographic location.
+
+---
+
+# 📥 Output Files
+
+A typical output package contains:
+
+```text
+terravision_layers.zip
+│
+├── sr_rgb.tif
+├── false_color.tif
+├── swir.tif
+├── ndvi.tif
+├── ndwi.tif
+├── ndbi.tif
+├── nbr.tif
+└── uncertainty.tif
+```
+
+---
+
+# ⚡ Performance
+
+The current prototype has been successfully tested end-to-end with:
+
+```text
+Sentinel-2 input:       10 × 128 × 128
+Super-resolution:       10 × 512 × 512
+Output resolution:      2.5 m
+Analysis layers:        8
+GeoTIFF export:         Successful
+ZIP generation:         Successful
+```
+
+The super-resolution inference is the computationally expensive part of the pipeline.
+
+Uncertainty estimation requires additional inference and is therefore treated as an optional computational component for deployment optimization.
+
+---
+
+# ⚠️ Limitations
+
+TerraVision currently has several limitations.
+
+### 1. Model-Based Resolution
+
+The 2.5 m output is reconstructed by an AI model and is not equivalent to native 2.5 m satellite imagery.
+
+### 2. Reconstruction Errors
+
+Super-resolution models can introduce artifacts or reconstruct details that are not directly observed in the original imagery.
+
+### 3. Cloud and Atmospheric Effects
+
+Clouds, haze and poor-quality Sentinel-2 observations can affect the output.
+
+### 4. Scientific Validation
+
+The current prototype has been technically validated for:
+
+* successful model inference
+* correct output dimensions
+* spectral layer generation
+* GeoTIFF generation
+* geospatial referencing
+
+A comprehensive validation against independent high-resolution reference imagery using metrics such as **PSNR, SSIM and spectral consistency** remains future work.
+
+### 5. Uncertainty
+
+The current uncertainty output represents the LDSR-S2 RGB-NIR component rather than a calibrated uncertainty estimate for all 10 bands.
+
+### 6. Temporal Analysis
+
+Change detection such as **dNBR** requires pre-event and post-event imagery and is not part of the current single-image workflow.
+
+---
+
+# 🔮 Future Scope
+
+Potential future improvements include:
+
+* Multi-date satellite analysis
+* Automated change detection
+* dNDVI / dNBR analysis
+* Cloud masking
+* Larger-area processing
+* Batch processing
+* More advanced GIS layers
+* Scientific validation using higher-resolution reference imagery
+* Performance optimization
+* GPU acceleration
+* Caching of satellite data
+* Production-scale deployment
+* User accounts and project history
+* Export to additional GIS formats
+
+---
+
+# 🌐 Deployment
+
+TerraVision is designed to be deployed as a Gradio application.
+
+The planned deployment architecture is:
+
+```text
+User
+  │
+  ▼
+TerraVision Web Interface
+  │
+  ▼
+Gradio Application
+  │
+  ├── Satellite Data Retrieval
+  │
+  ├── GPU Inference
+  │
+  ├── Spectral Analysis
+  │
+  └── GeoTIFF Generation
+  │
+  ▼
+Results + Downloads
+```
+
+The application can be adapted for GPU-backed deployment using **Hugging Face Spaces ZeroGPU**.
+
+---
+
+# 🧪 Validation Status
+
+| Component                       | Status         |
+| ------------------------------- | -------------- |
+| Sentinel-2 data retrieval       | ✅ Tested       |
+| 10-band input generation        | ✅ Tested       |
+| LDSR-S2 + SEN2SR inference      | ✅ Tested       |
+| 2.5 m output generation         | ✅ Tested       |
+| RGB generation                  | ✅ Tested       |
+| False Color                     | ✅ Tested       |
+| SWIR                            | ✅ Tested       |
+| NDVI                            | ✅ Tested       |
+| NDWI                            | ✅ Tested       |
+| NDBI                            | ✅ Tested       |
+| NBR                             | ✅ Tested       |
+| LDSR-S2 uncertainty             | ✅ Tested       |
+| GeoTIFF export                  | ✅ Tested       |
+| Georeferencing                  | ✅ Verified     |
+| ZIP export                      | ✅ Tested       |
+| Interactive web UI              | ✅ Prototype    |
+| Scientific benchmark validation | 🔄 Future work |
+| Production-scale deployment     | 🔄 Planned     |
+
+---
+
+# 🎯 Use Cases
+
+TerraVision can support exploratory analysis in areas such as:
+
+* 🌱 Vegetation monitoring
+* 💧 Water-body analysis
+* 🏙️ Urban expansion studies
+* 🔥 Burn-area analysis
+* 🌾 Agricultural monitoring
+* 🛰️ Remote-sensing research
+* 🗺️ GIS analysis
+* 🌍 Environmental monitoring
+
+---
+
+# 📚 Acknowledgements
+
+TerraVision builds upon open-source satellite super-resolution research and software from the **European Space Agency (ESA) OpenSR project**, including LDSR-S2 and SEN2SR.
+
+The project also uses open geospatial and satellite-data technologies including:
+
+* Sentinel-2
+* Cubo
+* MLSTAC
+* PyTorch
+* Rasterio
+* Xarray
+* Gradio
+
+---
+
+# 📜 Disclaimer
+
+TerraVision is a research and demonstration project.
+
+The generated 2.5 m imagery should not automatically be treated as equivalent to native high-resolution satellite imagery. Results may contain model reconstruction artifacts and should be independently validated before being used for critical scientific, commercial, legal, or operational decisions.
+
+---
+
+# 👨‍💻 Project
+
+**TerraVision**
+
+> *Sharper Earth. Brighter Decisions.*
+
+Built as a geospatial AI project for exploring the potential of satellite-image super-resolution and GIS analysis.
+
+---
+
+## ⭐ If you find TerraVision interesting
+
+Consider giving the repository a ⭐ and exploring the implementation.
+
+````
+
+### Recommended GitHub repository files
+
+For your current project, I would keep the repository clean like this:
+
+```text
+TerraVision/
+│
+├── README.md              ← this file
+├── app.py                 ← main Gradio application
+├── requirements.txt
+├── .gitignore
+│
+├── utils/
+│   ├── satellite.py
+│   ├── analysis.py
+│   ├── visualization.py
+│   └── geotiff.py
+│
+└── assets/
+    └── screenshots/
+````
+
+**One important point:** don't upload the ~1.4 GB model file directly into GitHub. Your code can download/load the model from its Hugging Face model repository at runtime.
 
-Built on top of [OpenSR](https://github.com/ESA-PhiLab/OpenSR) and
-[SEN2SR](https://github.com/ESA-PhiLab/SEN2SR) by ESA Phi-Lab / ESDS Leipzig.
+If you want, I can also create the **actual `README.md` file for you as a downloadable file**, ready to put directly into your GitHub repository.

app.py

@@ -120,148 +120,264 @@ def save_tensor_as_geotiff(tensor, attrs, out_path, super_resolved=False, sr_fac
 DEFAULT_LAT = 39.39785676571274
 DEFAULT_LON = -0.3798517619438821
 
-# --------------------------------------------------------
-# Leaflet CDN — injected into <head> via gr.Blocks(head=).
-# This is the correct Gradio 5 pattern for loading external
-# JS/CSS libraries: gr.HTML strips <script> tags, but
-# gr.Blocks(head=) injects them into the real page <head>.
-# --------------------------------------------------------
-LEAFLET_HEAD = """
-<link rel="stylesheet"
-      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-"""
+# LEAFLET_HEAD removed — Gradio 5 gr.HTML does not support 'head'.
+# Leaflet CSS/JS are inlined into MAP_HTML_VALUE below.
+
+
+# ============================================================
+# MAP JAVASCRIPT
+# ============================================================
+
+MAP_JS = """
+// ============================================================
+// TERRAVISION LEAFLET MAP
+// ============================================================
+
+const mapDiv = document.getElementById("terrativision-map");
+
+if (!mapDiv) {
+
+    console.error("❌ TerraVision map container not found.");
+
+} else if (mapDiv._terraVisionMapInitialized) {
+
+    console.log("ℹ️ TerraVision map already initialized.");
+
+} else {
+
+    mapDiv._terraVisionMapInitialized = true;
+
+    const defaultLat = __DEFAULT_LAT__;
+    const defaultLon = __DEFAULT_LON__;
+
+    // --------------------------------------------------------
+    // CREATE MAP
+    // --------------------------------------------------------
+
+    const map = L.map(mapDiv).setView(
+        [defaultLat, defaultLon],
+        10
+    );
+
+    // --------------------------------------------------------
+    // STREET MAP
+    // --------------------------------------------------------
+
+    const osmLayer = L.tileLayer(
+        "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+        {
+            maxZoom: 19,
+            attribution: "&copy; OpenStreetMap contributors"
+        }
+    ).addTo(map);
+
+    // --------------------------------------------------------
+    // SATELLITE MAP
+    // --------------------------------------------------------
+
+    const satelliteLayer = L.tileLayer(
+        "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+        {
+            maxZoom: 19,
+            attribution: "Tiles &copy; Esri"
+        }
+    );
+
+    // --------------------------------------------------------
+    // LAYER CONTROL
+    // --------------------------------------------------------
+
+    L.control.layers(
+        {
+            "Street Map": osmLayer,
+            "Satellite": satelliteLayer
+        }
+    ).addTo(map);
+
+    // --------------------------------------------------------
+    // MARKER
+    // --------------------------------------------------------
+
+    let marker = L.marker(
+        [defaultLat, defaultLon]
+    ).addTo(map);
+
+    // --------------------------------------------------------
+    // LOCATION DISPLAY
+    // --------------------------------------------------------
 
-# --------------------------------------------------------
-# Map container — just the div.
-# Leaflet and the init script are handled separately.
-# --------------------------------------------------------
-MAP_HTML_VALUE = '<div id="terrativision-map"></div>'
-
-# --------------------------------------------------------
-# Map init JavaScript — passed to gr.Blocks(js=).
-# Must be a function string. Uses retry loop because
-# Gradio renders the DOM asynchronously.
-# --------------------------------------------------------
-MAP_JS = f"""
-() => {{
-    function tryInitTerraVisionMap() {{
-
-        // Wait for Leaflet library to load
-        if (typeof L === "undefined") {{
-            setTimeout(tryInitTerraVisionMap, 300);
-            return;
-        }}
-
-        const mapDiv = document.getElementById("terrativision-map");
-
-        // Wait for the map container div to appear in the DOM
-        if (!mapDiv) {{
-            setTimeout(tryInitTerraVisionMap, 300);
-            return;
-        }}
-
-        // Prevent double-initialisation
-        if (mapDiv._terraVisionMapInitialized) return;
-        mapDiv._terraVisionMapInitialized = true;
-
-        const defaultLat = {DEFAULT_LAT};
-        const defaultLon = {DEFAULT_LON};
-
-        // ------------------------------------------------
-        // CREATE MAP
-        // ------------------------------------------------
-        const map = L.map(mapDiv).setView([defaultLat, defaultLon], 10);
-
-        // ------------------------------------------------
-        // STREET MAP
-        // ------------------------------------------------
-        const osmLayer = L.tileLayer(
-            "https://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png",
-            {{ maxZoom: 19, attribution: "&copy; OpenStreetMap contributors" }}
-        ).addTo(map);
-
-        // ------------------------------------------------
-        // SATELLITE MAP
-        // ------------------------------------------------
-        const satelliteLayer = L.tileLayer(
-            "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{{z}}/{{y}}/{{x}}",
-            {{ maxZoom: 19, attribution: "Tiles &copy; Esri" }}
+    const locationDisplay =
+        document.querySelector("#map-location-display");
+
+    function updateLocationDisplay(lat, lon) {
+
+        if (locationDisplay) {
+
+            locationDisplay.innerHTML =
+                "📍 <b>Selected:</b> " +
+                lat.toFixed(8) +
+                ", " +
+                lon.toFixed(8);
+        }
+    }
+
+    updateLocationDisplay(
+        defaultLat,
+        defaultLon
+    );
+
+    marker.bindPopup(
+        "<b>Selected Location</b><br>" +
+        defaultLat.toFixed(8) +
+        ", " +
+        defaultLon.toFixed(8)
+    );
+
+    // --------------------------------------------------------
+    // MAP CLICK
+    // --------------------------------------------------------
+
+    map.on("click", function(e) {
+
+        const lat = e.latlng.lat;
+        const lon = e.latlng.lng;
+
+        console.log(
+            "📍 TerraVision selected:",
+            lat,
+            lon
         );
 
-        // ------------------------------------------------
-        // LAYER CONTROL
-        // ------------------------------------------------
-        L.control.layers(
-            {{ "Street Map": osmLayer, "Satellite": satelliteLayer }}
-        ).addTo(map);
-
-        // ------------------------------------------------
-        // MARKER
-        // ------------------------------------------------
-        let marker = L.marker([defaultLat, defaultLon]).addTo(map);
-
-        // ------------------------------------------------
-        // LOCATION DISPLAY
-        // ------------------------------------------------
-        const locationDisplay = document.querySelector("#map-location-display");
-
-        function updateLocationDisplay(lat, lon) {{
-            if (locationDisplay) {{
-                locationDisplay.innerHTML =
-                    "📍 <b>Selected:</b> " + lat.toFixed(8) + ", " + lon.toFixed(8);
-            }}
-        }}
-
-        updateLocationDisplay(defaultLat, defaultLon);
+        // Move marker
+        marker.setLatLng([lat, lon]);
+
+        // Update popup
         marker.bindPopup(
             "<b>Selected Location</b><br>" +
-            defaultLat.toFixed(8) + ", " + defaultLon.toFixed(8)
+            lat.toFixed(8) +
+            ", " +
+            lon.toFixed(8)
+        ).openPopup();
+
+        // Update visible selected text
+        updateLocationDisplay(lat, lon);
+
+// --------------------------------------------------------
+// UPDATE GRADIO LATITUDE / LONGITUDE
+// --------------------------------------------------------
+
+function updateGradioNumber(elemId, value) {
+
+    const container = document.getElementById(elemId);
+
+    if (!container) {
+        console.error(
+            "❌ Gradio component not found:",
+            elemId
         );
+        return;
+    }
+
+    const input = container.querySelector("input");
+
+    if (!input) {
+        console.error(
+            "❌ Input element not found:",
+            elemId
+        );
+        return;
+    }
+
+    // Use the native HTML value setter.
+    // This is important because Gradio uses a controlled input.
+    const nativeSetter =
+        Object.getOwnPropertyDescriptor(
+            HTMLInputElement.prototype,
+            "value"
+        ).set;
+
+    nativeSetter.call(
+        input,
+        String(value)
+    );
+
+    // Tell Gradio that the user changed the input
+    input.dispatchEvent(
+        new Event("input", {
+            bubbles: true
+        })
+    );
+
+    input.dispatchEvent(
+        new Event("change", {
+            bubbles: true
+        })
+    );
+
+    console.log(
+        "✅ Updated Gradio:",
+        elemId,
+        value
+    );
+}
+
+updateGradioNumber(
+    "latitude_input",
+    lat
+);
+
+updateGradioNumber(
+    "longitude_input",
+    lon
+);
+
+    });
+
+    // --------------------------------------------------------
+    // FIX MAP SIZE
+    // --------------------------------------------------------
 
-        // ------------------------------------------------
-        // MAP CLICK
-        // ------------------------------------------------
-        map.on("click", function(e) {{
-            const lat = e.latlng.lat;
-            const lon = e.latlng.lng;
-
-            marker.setLatLng([lat, lon]);
-            marker.bindPopup(
-                "<b>Selected Location</b><br>" + lat.toFixed(8) + ", " + lon.toFixed(8)
-            ).openPopup();
-
-            updateLocationDisplay(lat, lon);
-
-            // Update Gradio Number inputs
-            function updateGradioNumber(elemId, value) {{
-                const container = document.getElementById(elemId);
-                if (!container) return;
-                const input = container.querySelector("input");
-                if (!input) return;
-                const nativeSetter = Object.getOwnPropertyDescriptor(
-                    HTMLInputElement.prototype, "value"
-                ).set;
-                nativeSetter.call(input, String(value));
-                input.dispatchEvent(new Event("input",  {{ bubbles: true }}));
-                input.dispatchEvent(new Event("change", {{ bubbles: true }}));
-            }}
-
-            updateGradioNumber("latitude_input",  lat);
-            updateGradioNumber("longitude_input", lon);
-        }});
-
-        // Fix map tile rendering after Gradio layout settles
-        setTimeout(function() {{ map.invalidateSize(); }}, 500);
-
-        console.log("✅ TerraVision Leaflet map initialized successfully.");
-    }}
-
-    // Delay first attempt to let Gradio finish rendering
-    setTimeout(tryInitTerraVisionMap, 800);
-}}
+    setTimeout(function() {
+
+        map.invalidateSize();
+
+    }, 500);
+
+    // Store map reference
+    element._terraVisionMap = map;
+
+    console.log(
+        "✅ TerraVision Leaflet map initialized successfully."
+    );
+}
 """
 
+# Insert Python values without using an f-string
+MAP_JS = MAP_JS.replace(
+    "__DEFAULT_LAT__",
+    str(DEFAULT_LAT)
+).replace(
+    "__DEFAULT_LON__",
+    str(DEFAULT_LON)
+)
+
+# ============================================================
+# COMPLETE MAP HTML
+# Gradio 5 gr.HTML has no 'head' or 'js_on_load' parameters.
+# Inline Leaflet CSS, Leaflet JS, the map div, and the init
+# script all inside the value string.
+# ============================================================
+MAP_HTML_VALUE = f"""
+<link rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<div id="terrativision-map"
+     style="width:100%;height:400px;border-radius:14px;
+            overflow:hidden;border:1px solid rgba(128,128,128,0.35);"></div>
+<script>
+{MAP_JS}
+</script>
+"""
 
 
 # ============================================================
@@ -384,74 +500,6 @@ def clean_uncertainty(image):
     return (image * 255.0).round().astype(np.uint8)
 
 
-# ============================================================
-# INDEX COLORIZATION
-# Converts a [-1, 1] spectral index to an RGB thematic map
-# using a linear interpolation between three anchor colours.
-# Uses only numpy (no matplotlib dependency needed).
-# ============================================================
-
-def _lerp_color(t, c0, c1):
-    """Linearly interpolate between two RGB tuples, t in [0, 1]."""
-    t = np.clip(t, 0.0, 1.0)[..., np.newaxis]  # (..., 1)
-    return c0 * (1.0 - t) + c1 * t             # (..., 3)
-
-
-def colorize_index(index_arr, scheme):
-    """
-    Convert a 2-D spectral index array (values in [-1, 1]) to a
-    uint8 RGB image using a three-stop colour ramp.
-
-    scheme : one of 'ndvi' | 'ndwi' | 'ndbi'
-
-    Colour stops (low / mid / high) in float RGB [0, 1]:
-      ndvi  : red  (1,0,0) -> yellow (1,1,0) -> green  (0,0.5,0)
-      ndwi  : brown(0.6,0.4,0.2) -> white (1,1,1) -> blue (0,0.3,1)
-      ndbi  : green(0,0.5,0) -> yellow (1,1,0) -> red   (1,0,0)
-    """
-    arr = np.asarray(index_arr, dtype=np.float32)
-    arr = np.nan_to_num(arr, nan=0.0, posinf=1.0, neginf=-1.0)
-    arr = np.clip(arr, -1.0, 1.0)
-
-    # Map [-1, 1] -> [0, 1]
-    t = (arr + 1.0) / 2.0   # 0 = low, 0.5 = mid, 1 = high
-
-    COLOR_STOPS = {
-        # (low_rgb, mid_rgb, high_rgb)
-        "ndvi": (
-            np.array([1.00, 0.00, 0.00]),   # red
-            np.array([1.00, 1.00, 0.00]),   # yellow
-            np.array([0.00, 0.50, 0.00]),   # green
-        ),
-        "ndwi": (
-            np.array([0.60, 0.40, 0.20]),   # brown
-            np.array([1.00, 1.00, 1.00]),   # white
-            np.array([0.00, 0.30, 1.00]),   # blue
-        ),
-        "ndbi": (
-            np.array([0.00, 0.50, 0.00]),   # green
-            np.array([1.00, 1.00, 0.00]),   # yellow
-            np.array([1.00, 0.00, 0.00]),   # red
-        ),
-    }
-
-    low_c, mid_c, high_c = COLOR_STOPS[scheme]
-
-    # Two-segment ramp: [0, 0.5] -> low..mid, [0.5, 1] -> mid..high
-    t_lo = np.clip(t / 0.5, 0.0, 1.0)         # normalised within lower half
-    t_hi = np.clip((t - 0.5) / 0.5, 0.0, 1.0) # normalised within upper half
-
-    rgb_lo = _lerp_color(t_lo, low_c, mid_c)   # (..., 3)
-    rgb_hi = _lerp_color(t_hi, mid_c, high_c)  # (..., 3)
-
-    # Blend: use lower half for t < 0.5, upper half otherwise
-    mask = (t >= 0.5)[..., np.newaxis]
-    rgb = np.where(mask, rgb_hi, rgb_lo)
-
-    rgb = np.clip(rgb, 0.0, 1.0)
-    return (rgb * 255.0).round().astype(np.uint8)
-
-
 # ============================================================
 # MAIN PROCESSING PIPELINE
 # Called from inside @spaces.GPU so all GPU ops run there.
@@ -606,6 +654,8 @@ def generate_satellite_products(
 
     ndbi = (B11 - B08) / (B11 + B08 + eps)
 
+    nbr  = (B08 - B12) / (B08 + B12 + eps)
+
     # --------------------------------------------------
     # 6. Uncertainty  [GPU]
     # --------------------------------------------------
@@ -690,6 +740,11 @@ def generate_satellite_products(
         "false_color.tif"
     )
 
+    paths["SWIR"] = save_layer(
+        swir,
+        "swir.tif"
+    )
+
     paths["NDVI"] = save_layer(
         ndvi,
         "ndvi.tif"
@@ -705,12 +760,16 @@ def generate_satellite_products(
         "ndbi.tif"
     )
 
+    paths["NBR"] = save_layer(
+        nbr,
+        "nbr.tif"
+    )
+
     paths["Uncertainty"] = save_layer(
         uncertainty_np,
         "uncertainty.tif"
     )
 
-
     # --------------------------------------------------
     # ZIP all GeoTIFFs
     # --------------------------------------------------
@@ -741,9 +800,11 @@ def generate_satellite_products(
         "rgb": rgb,
         "original_rgb": original_rgb,
         "false_color": false_color,
+        "swir": swir,
         "ndvi": ndvi,
         "ndwi": ndwi,
         "ndbi": ndbi,
+        "nbr": nbr,
         "uncertainty": uncertainty_np,
         "files": paths,
         "zip": zip_path
@@ -795,11 +856,15 @@ def run_app(latitude, longitude, start_date, end_date):
     # -------------------------------------------------
     false_color_img = clean_rgb(results["false_color"])
 
-    # Colored thematic maps for UI display.
-    # GeoTIFFs use the original numerical arrays (saved in pipeline).
-    ndvi_colored = colorize_index(results["ndvi"], "ndvi")
-    ndwi_colored = colorize_index(results["ndwi"], "ndwi")
-    ndbi_colored = colorize_index(results["ndbi"], "ndbi")
+    swir_img = clean_rgb(results["swir"])
+
+    ndvi_img = clean_index(results["ndvi"])
+
+    ndwi_img = clean_index(results["ndwi"])
+
+    ndbi_img = clean_index(results["ndbi"])
+
+    nbr_img = clean_index(results["nbr"])
 
     uncertainty_img = clean_uncertainty(
         results["uncertainty"]
@@ -811,21 +876,16 @@ def run_app(latitude, longitude, start_date, end_date):
     zip_file_path = results["zip"]
 
     # -------------------------------------------------
-    # RETURN EXACTLY 7 OUTPUTS (matches UI components)
-    # 1. comparison slider
-    # 2. false color / NIR
-    # 3. NDVI colored
-    # 4. NDWI colored
-    # 5. NDBI colored
-    # 6. uncertainty
-    # 7. ZIP download
+    # RETURN EXACTLY 9 OUTPUTS
     # -------------------------------------------------
     return (
         comparison_images,
         false_color_img,
-        ndvi_colored,
-        ndwi_colored,
-        ndbi_colored,
+        swir_img,
+        ndvi_img,
+        ndwi_img,
+        ndbi_img,
+        nbr_img,
         uncertainty_img,
         zip_file_path
     )
@@ -837,9 +897,7 @@ def run_app(latitude, longitude, start_date, end_date):
 
 with gr.Blocks(
     title="TerraVision — Sentinel-2 Super Resolution",
-    css=custom_css,
-    head=LEAFLET_HEAD,  # Injects Leaflet CSS/JS into the page <head>
-    js=MAP_JS           # Runs map init after Gradio finishes rendering
+    css=custom_css
 ) as demo:
 
     # ========================================================
@@ -1022,7 +1080,7 @@ with gr.Blocks(
 
 
             # ------------------------------------------------
-            # FALSE COLOR
+            # FALSE COLOR + SWIR
             # ------------------------------------------------
 
             with gr.Row():
@@ -1033,65 +1091,50 @@ with gr.Blocks(
                     height=320
                 )
 
+                swir_output = gr.Image(
+                    label="SWIR Composite",
+                    type="numpy",
+                    height=320
+                )
+
 
             # ------------------------------------------------
-            # NDVI / NDWI / NDBI  (colored thematic maps)
+            # NDVI / NDWI / NDBI
             # ------------------------------------------------
 
             with gr.Row():
 
-                with gr.Column():
-                    ndvi_output = gr.Image(
-                        label="NDVI",
-                        type="numpy",
-                        height=300
-                    )
-                    gr.HTML(
-                        '<div style="display:flex;justify-content:space-between;'
-                        'font-size:11px;padding:2px 4px;">'  
-                        '<span style="color:#e00;">&#9632; Low vegetation</span>'
-                        '<span style="color:#cc0;">&#9632; Medium</span>'
-                        '<span style="color:#080;">&#9632; High vegetation</span>'
-                        '</div>'
-                    )
-
-                with gr.Column():
-                    ndwi_output = gr.Image(
-                        label="NDWI",
-                        type="numpy",
-                        height=300
-                    )
-                    gr.HTML(
-                        '<div style="display:flex;justify-content:space-between;'
-                        'font-size:11px;padding:2px 4px;">'  
-                        '<span style="color:#8B4513;">&#9632; Low water</span>'
-                        '<span style="color:#aaa;">&#9632; Medium</span>'
-                        '<span style="color:#04c;">&#9632; High water</span>'
-                        '</div>'
-                    )
-
-                with gr.Column():
-                    ndbi_output = gr.Image(
-                        label="NDBI",
-                        type="numpy",
-                        height=300
-                    )
-                    gr.HTML(
-                        '<div style="display:flex;justify-content:space-between;'
-                        'font-size:11px;padding:2px 4px;">'  
-                        '<span style="color:#080;">&#9632; Low built-up</span>'
-                        '<span style="color:#cc0;">&#9632; Medium</span>'
-                        '<span style="color:#e00;">&#9632; High built-up</span>'
-                        '</div>'
-                    )
+                ndvi_output = gr.Image(
+                    label="NDVI",
+                    type="numpy",
+                    height=300
+                )
+
+                ndwi_output = gr.Image(
+                    label="NDWI",
+                    type="numpy",
+                    height=300
+                )
+
+                ndbi_output = gr.Image(
+                    label="NDBI",
+                    type="numpy",
+                    height=300
+                )
 
 
             # ------------------------------------------------
-            # UNCERTAINTY
+            # NBR + UNCERTAINTY
             # ------------------------------------------------
 
             with gr.Row():
 
+                nbr_output = gr.Image(
+                    label="NBR",
+                    type="numpy",
+                    height=320
+                )
+
                 uncertainty_output = gr.Image(
                     label="LDSR-S2 Uncertainty",
                     type="numpy",
@@ -1128,9 +1171,11 @@ with gr.Blocks(
         outputs=[
             comparison_output,
             false_color_output,
+            swir_output,
             ndvi_output,
             ndwi_output,
             ndbi_output,
+            nbr_output,
             uncertainty_output,
             zip_output
         ]