Ultra clean build - no venv on disk

.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,13 @@
+# Python virtual environment
+io-app-backend/venv/
+io-app-backend/__pycache__/
+*.pyc
+
+# Node modules and build files
+io-app-front/node_modules/
+io-app-front/dist/
+io-app-front/build/
+
+# OS files
+.DS_Store
+Thumbs.db

Dockerfile

@@ -0,0 +1,45 @@
+# --- STAGE 1: Build Frontend (Vite/React) ---
+FROM node:18 AS build-step
+WORKDIR /app/frontend
+
+# Copy npm configuration files from the frontend directory
+COPY io-app-front/package*.json ./
+RUN npm install
+
+# Copy the rest of the frontend source code and build it
+COPY io-app-front/ ./
+RUN npm run build
+
+# --- STAGE 2: Backend Server (Python + Flask) ---
+FROM python:3.9-slim
+WORKDIR /app
+
+# Install system dependencies required for geospatial libraries (GDAL/Rasterio)
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    libgdal-dev \
+    python3-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements.txt and install Python libraries
+COPY io-app-backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Set the working directory for the backend
+WORKDIR /app/io-app-backend
+
+# Copy the built frontend (Vite's 'dist' folder) to Flask's static directory
+COPY --from=build-step /app/frontend/dist /app/io-app-backend/static
+
+# Copy all backend source code
+COPY io-app-backend/ .
+
+# Set environment variables for Flask and Hugging Face (default port 7860)
+ENV FLASK_APP=app.py
+ENV FLASK_RUN_HOST=0.0.0.0
+ENV FLASK_RUN_PORT=7860
+
+EXPOSE 7860
+
+# Launch the application
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,12 @@
+---
+title: TerraMind Spectral Gaze
+emoji: 😻
+colorFrom: green
+colorTo: red
+sdk: docker
+pinned: false
+license: apache-2.0
+short_description: Interactive web app for comparing TerraMind model versions
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

io-app-backend/app.py

@@ -0,0 +1,255 @@
+from flask import Flask, request, jsonify
+from flask_cors import CORS
+import terramindFunctions as tm
+from terramindFunctions import analyze
+from evaluate_system import run_evaluation_with_models
+import traceback
+
+app = Flask(__name__)
+# CORS(app, resources={
+#     r"/api/*": {
+#         "origins": ["http://localhost:5173", "http://127.0.0.1:5173"],
+#         "methods": ["POST", "GET", "OPTIONS"],
+#         "allow_headers": ["Content-Type", "Authorization"]
+#     }
+# })
+CORS(app)
+
+@app.route('/api/analyze', methods=['POST'])
+def analyze_endpoint():
+    try:
+        data = request.json
+        print(f"📡 Otrzymano żądanie: {data}")
+
+        location = data.get('location', {})
+        lat = location.get('lat')
+        lng = location.get('lng')
+
+        params = data.get('params', {})
+        buffer_km = params.get('bufferKm', 5)
+        max_cloud_cover = params.get('maxCloudCover', 20)
+        days_back = params.get('daysBack', 180)
+        model_name = params.get('model', 'terramind_v1_large_generate')
+
+        if lat is None or lng is None:
+            return jsonify({
+                'success': False,
+                'error': 'Brak współrzędnych (lat/lng)'
+            }), 400
+
+        print(f"🚀 Uruchamiam analizę dla: [{lat}, {lng}]")
+        print(f"⚙️ Parametry: Buffer={buffer_km}km, Chmury<{max_cloud_cover}%, Historia={days_back}dni")
+
+        result = analyze(
+            location_data=[lat, lng],
+            buffer_km=buffer_km,
+            max_cloud_cover=max_cloud_cover,
+            days_back=days_back,
+            model_name=model_name,
+            show_visualization=False,
+            save_files=False
+        )
+
+        if result is None:
+            return jsonify({
+                'success': False,
+                'error': 'Nie udało się pobrać danych satelitarnych.'
+            }), 404
+
+        # 🆕 Dodaj prefixy data:image/png;base64, dla frontendu
+        response = {
+            'success': True,
+            'lat': result.get('lat'),
+            'lon': result.get('lon'),
+            'title': result.get('title'),
+            'date': result.get('date'),
+            'scene_id': result.get('scene_id'),
+            'statistics': result.get('statistics'),
+
+            # OBRAZY GŁÓWNE (z prefixem)
+            'image': f"data:image/png;base64,{result.get('segmentation_base64')}",
+            'rgb': f"data:image/png;base64,{result.get('rgb_base64')}",
+            'raw_segmentation': f"data:image/png;base64,{result.get('raw_segmentation_base64')}",
+
+            # MASKI WSKAŹNIKÓW (z prefixami)
+            'masks': {
+                mask_name: f"data:image/png;base64,{mask_base64}"
+                for mask_name, mask_base64 in result.get('masks', {}).items()
+            }
+        }
+
+        print(f"✅ Wysyłam wynik do frontendu")
+        print(f"   📅 Data zdjęcia: {result.get('date')}")
+        print(f"   🖼️ Obrazów: 3 główne + {len(result.get('masks', {}))} masek")
+
+        return jsonify(response)
+
+    except Exception as e:
+        print(f"❌ Błąd podczas analizy: {str(e)}")
+        traceback.print_exc()
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        }), 500
+
+@app.route('/api/advanced-analyze', methods=['POST'])
+def advanced_analyze_endpoint():
+    """
+    Endpoint dla zaawansowanej analizy porównawczej z metrykami.
+    Uruchamia porównanie dwóch wybranych modeli i zwraca:
+    - Obrazy obu modeli (RGB, raw, final)
+    - Maski spektralne
+    - Metryki porównawcze
+    """
+    try:
+        data = request.json
+        print(f"📡 Otrzymano żądanie zaawansowanej analizy: {data}")
+
+        location = data.get('location', {})
+        lat = location.get('lat')
+        lng = location.get('lng')
+
+        params = data.get('params', {})
+        buffer_km = params.get('bufferKm', 5)
+        model_a = params.get('modelA', 'terramind_v1_small_generate')
+        model_b = params.get('modelB', 'terramind_v1_large_generate')
+
+        if lat is None or lng is None:
+            return jsonify({
+                'success': False,
+                'error': 'Brak współrzędnych (lat/lng)'
+            }), 400
+
+        print(f"🚀 Uruchamiam zaawansowaną analizę dla: [{lat}, {lng}]")
+        print(f"📊 Porównanie: {model_a} vs {model_b}")
+
+        # Uruchamia evaluate_system.run_evaluation_with_models()
+        eval_result = run_evaluation_with_models(lat, lng, buffer_km, model_a, model_b)
+
+        if 'error' in eval_result:
+            return jsonify({
+                'success': False,
+                'error': eval_result.get('error')
+            }), 404
+
+        # Konwertujemy mapy na obrazy (używając terramindFunctions)
+        print("🖼️ Konwertowanie map na obrazy...")
+        import base64
+        import io
+        from PIL import Image
+        import numpy as np
+        
+        # Mapy z corrections i bez corrections
+        model_a_map = eval_result['maps']['modelA']  # Z corrections
+        model_a_map_raw = eval_result['maps']['modelA_raw']  # Bez corrections
+        model_b_map = eval_result['maps']['modelB']  # Z corrections
+        model_b_map_raw = eval_result['maps']['modelB_raw']  # Bez corrections
+        raw_data = eval_result['raw_data']
+        input_tensor = eval_result['input_tensor']
+        
+        # Funkcja do konwersji numpy RGB array na base64
+        def rgb_to_base64(rgb_array):
+            """Konwertuje RGB array na PNG base64"""
+            img = Image.fromarray(rgb_array.astype(np.uint8))
+            buf = io.BytesIO()
+            img.save(buf, format='PNG')
+            buf.seek(0)
+            return base64.b64encode(buf.read()).decode('utf-8')
+        
+        # RGB z raw_data (używając create_rgb_image z terramindFunctions)
+        rgb_image = tm.create_rgb_image(input_tensor)
+        rgb_base64 = rgb_to_base64(rgb_image)
+        
+        # Mapy segmentacji - raw (bez corrections) i final (z corrections)
+        model_a_raw_segmentation = tm.create_segmentation_image(model_a_map_raw)
+        model_a_segmentation = tm.create_segmentation_image(model_a_map)
+        model_b_raw_segmentation = tm.create_segmentation_image(model_b_map_raw)
+        model_b_segmentation = tm.create_segmentation_image(model_b_map)
+        
+        model_a_raw_seg_base64 = rgb_to_base64(model_a_raw_segmentation)
+        model_a_seg_base64 = rgb_to_base64(model_a_segmentation)
+        model_b_raw_seg_base64 = rgb_to_base64(model_b_raw_segmentation)
+        model_b_seg_base64 = rgb_to_base64(model_b_segmentation)
+        
+        # Maski spektralne (z indices)
+        indices = eval_result['indices']
+        masks_dict = {}
+        
+        # Generuj maski jak w analyze()
+        index_masks = tm.generate_index_masks(indices)
+        
+        if isinstance(index_masks, dict):
+            for mask_name, mask_array in index_masks.items():
+                try:
+                    # Konwertuj maski binarne na 0-255
+                    mask_binary = mask_array.astype(np.uint8) * 255
+                    img_mask = Image.fromarray(mask_binary, mode='L')
+                    buf_mask = io.BytesIO()
+                    img_mask.save(buf_mask, format='PNG')
+                    buf_mask.seek(0)
+                    masks_dict[mask_name] = base64.b64encode(buf_mask.read()).decode('utf-8')
+                except Exception as e:
+                    print(f"⚠️ Błąd konwersji maski {mask_name}: {e}")
+        
+        # Formatujemy odpowiedź
+        response = {
+            'success': True,
+            'date': eval_result.get('date'),
+            
+            # OBRAZY
+            'modelA': {
+                'name': model_a.split('_')[2].upper(),
+                'rgb': f"data:image/png;base64,{rgb_base64}",
+                'raw_segmentation': f"data:image/png;base64,{model_a_raw_seg_base64}",
+                'image': f"data:image/png;base64,{model_a_seg_base64}",
+                'masks': {
+                    mask_name: f"data:image/png;base64,{mask_base64}"
+                    for mask_name, mask_base64 in masks_dict.items()
+                }
+            },
+            'modelB': {
+                'name': model_b.split('_')[2].upper(),
+                'rgb': f"data:image/png;base64,{rgb_base64}",
+                'raw_segmentation': f"data:image/png;base64,{model_b_raw_seg_base64}",
+                'image': f"data:image/png;base64,{model_b_seg_base64}",
+                'masks': {
+                    mask_name: f"data:image/png;base64,{mask_base64}"
+                    for mask_name, mask_base64 in masks_dict.items()
+                }
+            },
+            
+            # METRYKI
+            'metrics': eval_result.get('metrics', {})
+        }
+
+        print(f"✅ Wysyłam zaawansowaną analizę do frontendu")
+        print(f"   📅 Data zdjęcia: {eval_result.get('date')}")
+        print(f"   📊 Metryki: {list(eval_result.get('metrics', {}).keys())}")
+
+        return jsonify(response)
+
+    except Exception as e:
+        print(f"❌ Błąd podczas zaawansowanej analizy: {str(e)}")
+        traceback.print_exc()
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        }), 500
+
+@app.route('/api/health', methods=['GET'])
+def health_check():
+    return jsonify({'status': 'ok', 'message': 'Backend działa poprawnie'})
+
+
+
+if __name__ == '__main__':
+    print("\n" + "="*60)
+    print("🚀 Uruchamianie serwera Flask...")
+    print("="*60)
+    print("📍 Endpointy:")
+    print("   POST /api/analyze          - Analiza obrazu satelitarnego")
+    print("   POST /api/advanced-analyze - Zaawansowana analiza z metrykami")
+    print("   GET  /api/health           - Sprawdzenie stanu serwera")
+    print("="*60 + "\n")
+
+    app.run(debug=True, host='127.0.0.1', port=5000)

io-app-backend/evaluate_system.py

@@ -0,0 +1,269 @@
+import torch
+import terramindFunctions as tm
+from terratorch import FULL_MODEL_REGISTRY
+from metrics import calculate_precision,calculate_recall,calculate_accuracy, calculate_miou, calculate_final_score, calculate_fw_iou, calculate_dice_score
+
+# Konfiguracja
+DEVICE = tm.device
+
+def load_model(model_name):
+    """Ładuje wybrany model. Jeśli nie istnieje, fallback do Large."""
+    print(f"⏳ Ładowanie modelu: {model_name}...")
+    try:
+        model = FULL_MODEL_REGISTRY.build(
+            model_name,
+            modalities=["S2L2A"],
+            output_modalities=["LULC"],
+            pretrained=True,
+            standardize=True,
+        ).to(DEVICE)
+        model.eval()
+        return model
+    except Exception as e:
+        print(f"⚠️ Błąd ładowania modelu {model_name}: {e}")
+        print(f"   Fallback: próbuję terramind_v1_large_generate...")
+        try:
+            model = FULL_MODEL_REGISTRY.build(
+                "terramind_v1_large_generate",
+                modalities=["S2L2A"],
+                output_modalities=["LULC"],
+                pretrained=True,
+                standardize=True,
+            ).to(DEVICE)
+            model.eval()
+            return model
+        except Exception as e2:
+            print(f"❌ Błąd ładowania fallback modelu: {e2}")
+            return None
+
+def load_teacher_model():
+    """Ładuje model Large (Nauczyciela)."""
+    print(f"⏳ Ładowanie Nauczyciela...")
+    return load_model("terramind_v1_large_generate")
+
+def process_with_model(model, input_tensor, indices):
+    """
+    To jest ta "wspólna logika", o którą pytałeś.
+    Bierze DOWOLNY model (Student lub Teacher) i zwraca gotową mapę po korektach.
+    Używa funkcji z terramindFunctions.py.
+    """
+    # 1. Inferencja (To samo co w analyze)
+    raw_output = tm.run_inference(model, input_tensor)
+    
+    # 2. Dekodowanie (To samo co w analyze)
+    class_map = tm.decode_output(raw_output)
+    
+    # # 3. Korekty (To samo co w analyze)
+    # # Dzięki temu Teacher też dostanie poprawki wody/roślinności!
+    # final_map = tm.apply_hybrid_corrections(class_map, indices)
+    
+    # return final_map
+    return class_map
+
+def run_evaluation(lat, lon, buffer_km=5):
+    print(f"🔍 ROZPOCZYNAM EWALUACJĘ DLA: {lat}, {lon}")
+    
+    # 1. POBRANIE DANYCH (Raz dla obu modeli - oszczędność czasu!)
+    dl_result = tm.download_sentinel2(lat, lon, buffer_km, max_cloud_cover=10, days_back=180)
+    
+    if dl_result is None:
+        return {"error": "Nie udało się pobrać zdjęć satelitarnych"}
+
+    raw_data, date, scene_id = dl_result
+    
+    # 2. PRZYGOTOWANIE WSPÓLNYCH DANYCH
+    input_tensor = tm.prepare_input(raw_data)
+    # Obliczamy indeksy raz i używamy dla obu modeli (spójność)
+    indices = tm.calculate_spectral_indices(input_tensor) 
+    
+    # ==========================================
+    # STUDENT
+    # ==========================================
+    print("🤖 Przetwarzanie: Student...")
+    student_model = tm.get_model() 
+    # 👇 Używamy naszej funkcji pomocniczej
+    student_map = process_with_model(student_model, input_tensor, indices)
+
+    # ==========================================
+    # NAUCZYCIEL
+    # ==========================================
+    print("👨‍🏫 Przetwarzanie: Nauczyciel...")
+    teacher_model = load_teacher_model()
+    
+    if teacher_model is None:
+        return {"error": "Błąd modelu Nauczyciela"}
+
+    # 👇 Używamy tej samej funkcji pomocniczej (gwarancja identycznego procesu)
+    teacher_map = process_with_model(teacher_model, input_tensor, indices)
+
+    # Czyszczenie pamięci
+    del teacher_model
+    if torch.cuda.is_available():
+        torch.cuda.empty_cache()
+
+    # ==========================================
+    # OBLICZANIE METRYK (Wewnątrz run_evaluation)
+    # ==========================================
+    print("📊 Liczenie metryk...")
+    
+    # 1. Liczymy wszystko osobno
+    acc = calculate_accuracy(student_map, teacher_map)
+    miou, iou_details = calculate_miou(student_map, teacher_map)
+    fw_iou = calculate_fw_iou(student_map, teacher_map)
+    dice = calculate_dice_score(student_map, teacher_map)
+    
+    # Wywołujemy nowe funkcje
+    mean_precision, precision_details = calculate_precision(student_map, teacher_map)
+    mean_recall, recall_details = calculate_recall(student_map, teacher_map)
+
+    # 2. Łączymy szczegóły w jeden słownik dla Frontendu
+    # Frontend oczekuje struktury: { "Las": { iou: 90, precision: 85, recall: 95 }, ... }
+    combined_details = {}
+    
+    # Bierzemy klucze (nazwy klas) z IoU (bo ono jest zawsze liczone)
+    for class_name in iou_details.keys():
+        combined_details[class_name] = {
+            "iou": iou_details.get(class_name, 0.0),
+            "precision": precision_details.get(class_name, 0.0),
+            "recall": recall_details.get(class_name, 0.0)
+        }
+
+    # 3. Final Score (np. średnia z 4 głównych)
+    final_score = (acc + miou + fw_iou + dice) / 4.0
+    
+    return {
+        "status": "success",
+        "metrics": {
+            "accuracy": acc,
+            "miou": miou,
+            "fw_iou": fw_iou,
+            "dice": dice,
+            "mean_precision": mean_precision, 
+            "mean_recall": mean_recall,
+            "final_score": final_score,
+            "class_details": combined_details
+        },
+        "maps": {
+            "student": student_map,
+            "teacher": teacher_map
+        },
+        "raw_data": raw_data,
+        "indices": indices,
+        "date": date
+    }
+
+def run_evaluation_with_models(lat, lon, buffer_km=5, model_a_name=None, model_b_name=None):
+    """
+    Uruchamia porównanie dwóch wybranych modeli.
+    Parametry:
+    - lat, lon: współrzędne
+    - buffer_km: rozmiar buforu
+    - model_a_name: nazwa pierwszego modelu
+    - model_b_name: nazwa drugiego modelu
+    """
+    if model_a_name is None:
+        model_a_name = 'terramind_v1_small_generate'
+    if model_b_name is None:
+        model_b_name = 'terramind_v1_large_generate'
+    
+    print(f"🔍 PORÓWNANIE MODELI DLA: {lat}, {lon}")
+    print(f"   Model A: {model_a_name}")
+    print(f"   Model B: {model_b_name}")
+    
+    # 1. POBRANIE DANYCH (Raz dla obu modeli - oszczędność czasu!)
+    dl_result = tm.download_sentinel2(lat, lon, buffer_km, max_cloud_cover=10, days_back=180)
+    
+    if dl_result is None:
+        return {"error": "Nie udało się pobrać zdjęć satelitarnych"}
+
+    raw_data, date, scene_id = dl_result
+    
+    # 2. PRZYGOTOWANIE WSPÓLNYCH DANYCH
+    input_tensor = tm.prepare_input(raw_data)
+    # Obliczamy indeksy raz i używamy dla obu modeli (spójność)
+    indices = tm.calculate_spectral_indices(input_tensor) 
+    
+    # ==========================================
+    # MODEL A
+    # ==========================================
+    print(f"🤖 Przetwarzanie: {model_a_name}...")
+    model_a = load_model(model_a_name)
+    if model_a is None:
+        return {"error": f"Błąd ładowania modelu {model_a_name}"}
+    
+    raw_output_a = tm.run_inference(model_a, input_tensor)
+    map_a_raw = tm.decode_output(raw_output_a)
+    # Zastosuj korekty spektralne
+    map_a, _ = tm.apply_hybrid_corrections(map_a_raw, indices)
+    del model_a
+    
+    # ==========================================
+    # MODEL B
+    # ==========================================
+    print(f"🤖 Przetwarzanie: {model_b_name}...")
+    model_b = load_model(model_b_name)
+    if model_b is None:
+        return {"error": f"Błąd ładowania modelu {model_b_name}"}
+    
+    raw_output_b = tm.run_inference(model_b, input_tensor)
+    map_b_raw = tm.decode_output(raw_output_b)
+    # Zastosuj korekty spektralne
+    map_b, _ = tm.apply_hybrid_corrections(map_b_raw, indices)
+    del model_b
+    
+    # Czyszczenie pamięci
+    if torch.cuda.is_available():
+        torch.cuda.empty_cache()
+
+    # ==========================================
+    # OBLICZANIE METRYK (Porównanie map)
+    # ==========================================
+    print("📊 Liczenie metryk...")
+    
+    # 1. Liczymy wszystko osobno
+    acc = calculate_accuracy(map_a, map_b)
+    miou, iou_details = calculate_miou(map_a, map_b)
+    fw_iou = calculate_fw_iou(map_a, map_b)
+    dice = calculate_dice_score(map_a, map_b)
+    
+    # Wywołujemy nowe funkcje
+    mean_precision, precision_details = calculate_precision(map_a, map_b)
+    mean_recall, recall_details = calculate_recall(map_a, map_b)
+
+    # 2. Łączymy szczegóły w jeden słownik dla Frontendu
+    combined_details = {}
+    
+    # Bierzemy klucze (nazwy klas) z IoU (bo ono jest zawsze liczone)
+    for class_name in iou_details.keys():
+        combined_details[class_name] = {
+            "iou": iou_details.get(class_name, 0.0),
+            "precision": precision_details.get(class_name, 0.0),
+            "recall": recall_details.get(class_name, 0.0)
+        }
+
+    # 3. Final Score (np. średnia z 4 głównych)
+    # 3. Final Score (np. średnia z 4 głównych)
+    final_score = (acc + miou + fw_iou + dice) / 4.0
+    
+    return {
+        "status": "success",
+        "metrics": {
+            "accuracy": acc,
+            "miou": miou,
+            "fw_iou": fw_iou,
+            "dice": dice,
+            "mean_precision": mean_precision, 
+            "mean_recall": mean_recall,
+            "class_details": combined_details
+        },
+        "maps": {
+            "modelA": map_a,
+            "modelB": map_b,
+            "modelA_raw": map_a_raw,
+            "modelB_raw": map_b_raw
+        },
+        "raw_data": raw_data,
+        "input_tensor": input_tensor,
+        "indices": indices,
+        "date": date
+    }

io-app-backend/metrics.py

@@ -0,0 +1,249 @@
+import numpy as np
+# 👇 Importujemy słownik nazw z Twojego pliku, żeby metryki "rozumiały" klasy
+from terramindFunctions import ESA_CLASSES
+
+
+import numpy as np
+from terramindFunctions import ESA_CLASSES
+
+def calculate_precision(pred_map, target_map):
+    """
+    PRECYZJA (Precision): "Ile z tego co model wykrył, jest prawdą?"
+    Wzór: TP / (TP + FP)
+    Zwraca: (średnia_precyzja, słownik_detali)
+    """
+    classes_in_target = np.unique(target_map)
+    precision_list = []
+    details = {}
+
+    for cls in classes_in_target:
+        if cls == 0: continue
+            
+        p_mask = (pred_map == cls)
+        t_mask = (target_map == cls)
+        
+        true_positives = np.logical_and(p_mask, t_mask).sum()
+        false_positives = np.logical_and(p_mask, ~t_mask).sum() # Model: TAK, Prawda: NIE
+        
+        if (true_positives + false_positives) > 0:
+            precision = true_positives / (true_positives + false_positives)
+        else:
+            precision = 0.0 # Jeśli model nic nie wykrył dla tej klasy, precyzja 0 (lub 1, zależy od definicji, tu bezpiecznie 0)
+
+        precision_list.append(precision)
+        
+        class_name = ESA_CLASSES.get(cls, f"Klasa {cls}")
+        details[class_name] = precision * 100.0
+
+    mean_precision = np.mean(precision_list) * 100.0 if precision_list else 0.0
+    return mean_precision, details
+
+
+def calculate_recall(pred_map, target_map):
+    """
+    CZUŁOŚĆ (Recall): "Ile prawdziwych obiektów model znalazł?"
+    Wzór: TP / (TP + FN)
+    Zwraca: (średnia_czułość, słownik_detali)
+    """
+    classes_in_target = np.unique(target_map)
+    recall_list = []
+    details = {}
+
+    for cls in classes_in_target:
+        if cls == 0: continue
+
+        p_mask = (pred_map == cls)
+        t_mask = (target_map == cls)
+        
+        true_positives = np.logical_and(p_mask, t_mask).sum()
+        false_negatives = np.logical_and(~p_mask, t_mask).sum() # Model: NIE, Prawda: TAK
+
+        if (true_positives + false_negatives) > 0:
+            recall = true_positives / (true_positives + false_negatives)
+        else:
+            recall = 0.0 # To się nie powinno zdarzyć, bo iterujemy po klasach z targetu
+
+        recall_list.append(recall)
+
+        class_name = ESA_CLASSES.get(cls, f"Klasa {cls}")
+        details[class_name] = recall * 100.0
+
+    mean_recall = np.mean(recall_list) * 100.0 if recall_list else 0.0
+    return mean_recall, details
+
+def calculate_dice_score(pred_map, target_map):
+    """
+    Oblicza współczynnik Dice (F1-Score dla pikseli).
+    Jest to średnia z Dice dla każdej klasy.
+    Wynik Dice jest zazwyczaj wyższy niż IoU dla tych samych danych.
+    """
+    classes_in_target = np.unique(target_map)
+    dice_list = []
+    
+    for cls in classes_in_target:
+        # Pomiń klasę 0 (Brak danych)
+        if cls == 0:
+            continue
+            
+        # Maski binarne
+        p_mask = (pred_map == cls)
+        t_mask = (target_map == cls)
+        
+        intersection = np.logical_and(p_mask, t_mask).sum()
+        
+        # Liczba pikseli w predykcji i w targecie
+        area_pred = p_mask.sum()
+        area_target = t_mask.sum()
+        
+        # Zabezpieczenie przed dzieleniem przez zero
+        if area_pred + area_target == 0:
+            dice = 1.0 # Oba puste = idealne dopasowanie
+        else:
+            dice = (2.0 * intersection) / (area_pred + area_target)
+            
+        dice_list.append(dice)
+    
+    if len(dice_list) == 0:
+        return 0.0
+        
+    return np.mean(dice_list) * 100.0
+
+
+def calculate_accuracy(pred_map, target_map):
+    """
+    Oblicza Pixel Accuracy (procent zgodnych pikseli).
+    """
+    p = pred_map.flatten()
+    t = target_map.flatten()
+    
+    # Porównujemy tylko tam, gdzie we wzorcu nie ma "Braku danych" (klasa 0)
+    valid_mask = (t != 0)
+    
+    if np.sum(valid_mask) == 0:
+        return 0.0
+
+    correct_pixels = np.sum((p == t) & valid_mask)
+    total_pixels = np.sum(valid_mask)
+    
+    return (correct_pixels / total_pixels) * 100.0
+
+def calculate_miou(pred_map, target_map, verbose=False):
+    """
+    Oblicza mIoU i (opcjonalnie) wypisuje wynik dla każdej klasy z osobna.
+    """
+    # Znajdujemy wszystkie klasy obecne we wzorcu (Ground Truth)
+    classes_in_target = np.unique(target_map)
+    iou_list = []
+    class_report = {}
+
+    for cls in classes_in_target:
+        # Pomiń klasę 0 (Brak danych / No Data)
+        if cls == 0:
+            continue
+            
+        # Tworzymy maski binarne (gdzie jest dana klasa)
+        p_mask = (pred_map == cls)
+        t_mask = (target_map == cls)
+        
+        intersection = np.logical_and(p_mask, t_mask).sum()
+        union = np.logical_or(p_mask, t_mask).sum()
+        
+        if union > 0:
+            iou = intersection / union
+            iou_list.append(iou)
+            
+            # Pobieramy nazwę klasy z Twojego słownika
+            class_name = ESA_CLASSES.get(cls, f"Klasa {cls}")
+            class_report[class_name] = iou * 100.0
+
+    if len(iou_list) == 0:
+        return 0.0, {}
+        
+    miou = np.mean(iou_list) * 100.0
+    
+    # Jeśli verbose=True, wypiszemy szczegóły w konsoli
+    if verbose:
+        print("\n--- Szczegóły IoU dla klas ---")
+        for name, score in class_report.items():
+            print(f"{name:<20}: {score:.2f}%")
+            
+    return miou, class_report
+
+def calculate_final_score(accuracy, miou, fwiou):
+    """
+    Oblicza ostateczny wynik jako średnią z trzech metryk:
+    1. Pixel Accuracy
+    2. mIoU
+    3. fwIoU
+    """
+    return (accuracy + miou + fwiou) / 3.0
+
+def print_report(accuracy, miou, final_score=None, class_details=None, model_name="Model"):
+    """
+    Wyświetla ładny, czytelny raport w konsoli.
+    """
+    print("=" * 40)
+    print(f" 📊 RAPORT DLA: {model_name}")
+    print("=" * 40)
+    
+    if class_details:
+        print(f"{'KLASA':<25} | {'IoU':<10}")
+        print("-" * 40)
+        for name, score in class_details.items():
+            print(f"{name:<25} | {score:.2f}%")
+        print("-" * 40)
+
+    print(f"Pixel Accuracy (Ogólna):  {accuracy:.2f}%")
+    print(f"mIoU (Średnia z klas):    {miou:.2f}%")
+    
+    if final_score is not None:
+        print("-" * 40)
+        print(f"🏆 FINAL SCORE:           {final_score:.2f} / 100")
+    print("=" * 40 + "\n")
+
+
+
+
+# ... (reszta pliku bez zmian) ...
+
+def calculate_fw_iou(pred_map, target_map):
+    """
+    Oblicza Frequency Weighted IoU.
+    Wagi zależą od tego, jak często dana klasa występuje na obrazku (Target).
+    To daje "sprawiedliwszy" wynik wizualny (duży las ma większą wagę niż mała rzeczka).
+    """
+    classes_in_target = np.unique(target_map)
+    
+    fw_iou_sum = 0.0
+    total_valid_pixels = 0
+    
+    # 1. Liczymy sumę wszystkich ważnych pikseli (bez klasy 0 - brak danych)
+    for cls in classes_in_target:
+        if cls == 0: continue
+        total_valid_pixels += np.sum(target_map == cls)
+
+    if total_valid_pixels == 0:
+        return 0.0
+
+    # 2. Liczymy ważone IoU dla każdej klasy
+    for cls in classes_in_target:
+        if cls == 0: continue
+            
+        # IoU dla danej klasy
+        p_mask = (pred_map == cls)
+        t_mask = (target_map == cls)
+        
+        intersection = np.logical_and(p_mask, t_mask).sum()
+        union = np.logical_or(p_mask, t_mask).sum()
+        
+        iou = 0.0
+        if union > 0:
+            iou = intersection / union
+        
+        # Częstość występowania (Waga)
+        frequency = np.sum(t_mask) / total_valid_pixels
+        
+        # Dodajemy do sumy: Waga * IoU
+        fw_iou_sum += (frequency * iou)
+
+    return fw_iou_sum * 100.0

io-app-backend/plotting_utils.py

@@ -0,0 +1,429 @@
+
+import torch
+import numpy as np
+import textwrap
+import matplotlib.pyplot as plt
+from matplotlib.colors import hex2color, LinearSegmentedColormap
+
+# Plotting utils
+COLORBLIND_HEX = ["#000000", "#3171AD", "#469C76", '#83CA70', "#EAE159", "#C07CB8", "#C19368", "#6FB2E4", "#F1F1F1",
+                  "#C66526"]
+COLORBLIND_RGB = [hex2color(hex) for hex in COLORBLIND_HEX]
+lulc_cmap = LinearSegmentedColormap.from_list('lulc', COLORBLIND_RGB, N=10)
+
+
+def rgb_smooth_quantiles(array, tolerance=0.02, scaling=0.5, default=2000):
+    """
+    array: numpy array with dimensions [C, H, W]
+    returns 0-1 scaled array
+    """
+
+    # Get scaling thresholds for smoothing the brightness
+    limit_low, median, limit_high = np.quantile(array, q=[tolerance, 0.5, 1. - tolerance])
+    limit_high = limit_high.clip(default)  # Scale only pixels above default value
+    limit_low = limit_low.clip(0, 1000)  # Scale only pixels below 1000
+    limit_low = np.where(median > default / 2, limit_low, 0)  # Make image only darker if it is not dark already
+
+    # Smooth very dark and bright values using linear scaling
+    array = np.where(array >= limit_low, array, limit_low + (array - limit_low) * scaling)
+    array = np.where(array <= limit_high, array, limit_high + (array - limit_high) * scaling)
+
+    # Update scaling params using a 10th of the tolerance for max value
+    limit_low, limit_high = np.quantile(array, q=[tolerance/10, 1. - tolerance/10])
+    limit_high = limit_high.clip(default, 20000)  # Scale only pixels above default value
+    limit_low = limit_low.clip(0, 500)  # Scale only pixels below 500
+    limit_low = np.where(median > default / 2, limit_low, 0)  # Make image only darker if it is not dark already
+
+    # Scale data to 0-255
+    array = (array - limit_low) / (limit_high - limit_low)
+
+    return array
+
+
+def s2_to_rgb(data, smooth_quantiles=False):
+    if isinstance(data, torch.Tensor):
+        # to numpy
+        data = data.clone().cpu().numpy()
+    if len(data.shape) == 4:
+        # Remove batch dim
+        data = data[0]
+
+    # Select
+    if data.shape[0] > 13:
+        # assuming channel last
+        rgb = data[:, :, [3, 2, 1]]
+    else:
+        # assuming channel first
+        rgb = data[[3, 2, 1]].transpose((1, 2, 0))
+
+    if smooth_quantiles:
+        rgb = rgb_smooth_quantiles(rgb)
+    else:
+        rgb = rgb / 2000
+
+    # to uint8
+    rgb = (rgb * 255).round().clip(0, 255).astype(np.uint8)
+
+    return rgb
+
+
+def s1_to_rgb(data):
+    if isinstance(data, torch.Tensor):
+        # to numpy
+        data = data.clone().cpu().numpy()
+    if len(data.shape) == 4:
+        # Remove batch dim
+        data = data[0]
+
+    vv = data[0]
+    vh = data[1]
+    r = (vv + 30) / 40  # scale -30 to +10
+    g = (vh + 40) / 40  # scale -40 to +0
+    b = vv / vh.clip(-40, -1) / 1.5  # VV / VH
+
+    rgb = np.dstack([r, g, b])
+    rgb = (rgb * 255).round().clip(0, 255).astype(np.uint8)
+    return rgb
+
+
+def s1_to_power(data):
+    # Convert dB to power
+    data = 10 ** (data / 10)
+    return data * 10000
+
+
+def s1_power_to_rgb(data):
+    if isinstance(data, torch.Tensor):
+        # to numpy
+        data = data.clone().cpu().numpy()
+    if len(data.shape) == 4:
+        # Remove batch dim
+        data = data[0]
+
+    vv = data[0]
+    vh = data[1]
+    r = vv / 500
+    g = vh / 2200
+    b = vv / vh / 2
+
+    rgb = np.dstack([r, g, b])
+    rgb = (rgb * 255).round().clip(0, 255).astype(np.uint8)
+    return rgb
+
+
+def dem_to_rgb(data, cmap='BrBG_r', buffer=5):
+    if isinstance(data, torch.Tensor):
+        # to numpy
+        data = data.clone().cpu().numpy()
+    while len(data.shape) > 2:
+        # Remove batch dim etc.
+        data = data[0]
+
+    # Add 10m buffer to highlight flat areas
+    data_min, data_max = data.min(), data.max()
+    data_min -= buffer
+    data_max += buffer
+    data = (data - data_min) / (data_max - data_min + 1e-6)
+
+    rgb = plt.get_cmap(cmap)(data)[:, :, :3]
+    rgb = (rgb * 255).round().clip(0, 255).astype(np.uint8)
+    return rgb
+
+
+def ndvi_to_rgb(data, cmap='RdYlGn'):
+    if isinstance(data, torch.Tensor):
+        # to numpy
+        data = data.clone().cpu().numpy()
+    while len(data.shape) > 2:
+        # Remove batch dim etc.
+        data = data[0]
+
+    # Scale NDVI to 0-1
+    data = (data + 1) / 2
+
+    rgb = plt.get_cmap(cmap)(data)[:, :, :3]
+    rgb = (rgb * 255).round().clip(0, 255).astype(np.uint8)
+    return rgb
+
+
+def lulc_to_rgb(data, cmap=lulc_cmap, num_classes=10):
+    while len(data.shape) > 2:
+        if data.shape[0] == num_classes:
+            data = data.argmax(axis=0)  # First dim are class logits
+        else:
+            # Remove batch dim
+            data = data[0]
+
+    rgb = cmap(data)[:, :, :3]
+    rgb = (rgb * 255).round().clip(0, 255).astype(np.uint8)
+    return rgb
+
+
+def coords_to_text(data):
+    if isinstance(data, torch.Tensor):
+        data = data.clone().cpu().numpy()
+    if len(data.shape) > 1:
+        # Remove batch dim etc.
+        data = data[0]
+    if data.shape[0] > 2:
+        # Not coords
+        return str(data)
+    else:
+
+        return f'lon={data[0]:.2f}, lat={data[1]:.2f}'
+
+
+def plot_s2(data, ax=None, smooth_quantiles=False, *args, **kwargs):
+    rgb = s2_to_rgb(data, smooth_quantiles=smooth_quantiles)
+
+    if ax is None:
+        plt.imshow(rgb)
+        plt.axis('off')
+        plt.show()
+    else:
+        ax.imshow(rgb)
+        ax.axis('off')
+
+
+def plot_s1(data, ax=None, power=False, *args, **kwargs):
+    if power:
+        data = s1_to_power(data)
+        rgb = s1_power_to_rgb(data)
+    else:
+        rgb = s1_to_rgb(data)
+
+    if ax is None:
+        plt.imshow(rgb)
+        plt.axis('off')
+        plt.show()
+    else:
+        ax.imshow(rgb)
+        ax.axis('off')
+
+
+def plot_dem(data, ax=None, *args, **kwargs):
+    if isinstance(data, torch.Tensor):
+        # to numpy
+        data = data.clone().cpu().numpy()
+    while len(data.shape) > 2:
+        # Remove batch dim etc.
+        data = data[0]
+
+    # Add 10m buffer to highlight flat areas
+    data_min, data_max = data.min(), data.max()
+    data_min -= 5
+    data_max += 5
+    data = (data - data_min) / (data_max - data_min + 1e-6)
+
+    data = (data * 255).round().clip(0, 255).astype(np.uint8)
+
+    if ax is None:
+        plt.imshow(data, vmin=0, vmax=255, cmap='BrBG_r')
+        plt.axis('off')
+        plt.show()
+    else:
+        ax.imshow(data, vmin=0, vmax=255, cmap='BrBG_r')
+        ax.axis('off')
+
+
+def plot_lulc(data, ax=None, num_classes=10, *args, **kwargs):
+    if isinstance(data, torch.Tensor):
+        # to numpy
+        data = data.clone().cpu().numpy()
+    while len(data.shape) > 2:
+        if data.shape[0] == num_classes:
+            data = data.argmax(axis=0)  # First dim are class logits
+        else:
+            # Remove batch dim
+            data = data[0]
+
+    if ax is None:
+        plt.imshow(data, vmin=0, vmax=num_classes-1, cmap=lulc_cmap, interpolation='nearest')
+        plt.axis('off')
+        plt.show()
+    else:
+        ax.imshow(data, vmin=0, vmax=num_classes-1, cmap=lulc_cmap, interpolation='nearest')
+        ax.axis('off')
+
+
+def plot_ndvi(data, ax=None, *args, **kwargs):
+    if isinstance(data, torch.Tensor):
+        # to numpy
+        data = data.clone().cpu().numpy()
+    while len(data.shape) > 2:
+        # Remove batch dim etc.
+        data = data[0]
+
+    if ax is None:
+        plt.imshow(data, vmin=-1, vmax=+1, cmap='RdYlGn')
+        plt.axis('off')
+        plt.show()
+    else:
+        ax.imshow(data, vmin=-1, vmax=+1, cmap='RdYlGn')
+        ax.axis('off')
+
+
+def wrap_text(text, ax, font_size):
+    # Get the width of the axis in pixels
+    bbox = ax.get_window_extent()
+    width, height = bbox.width, bbox.height
+
+    # Calculate the number of characters per line
+    char_width = font_size * 0.6  # Approximate width of a character
+    max_chars_per_line = int(width / char_width * 0.75)
+    max_lines = int(height / font_size * 0.5)
+
+    # Wrap the text
+    wrapped_text = textwrap.wrap(text, width=max_chars_per_line)
+
+    if len(wrapped_text) > max_lines:
+        wrapped_text = wrapped_text[:max_lines]
+        wrapped_text[-1] += '...'
+
+    return '\n'.join(wrapped_text)
+
+
+def plot_text(data, ax=None, *args, **kwargs):
+    if isinstance(data, str):
+        text = data
+    elif isinstance(data, torch.Tensor) or isinstance(data, np.ndarray):
+        # assuming coordinates
+        text = coords_to_text(data)
+    else:
+        raise ValueError()
+
+    font_size = 14 if len(text) > 150 else 20
+
+    if ax is None:
+        fig, ax = plt.subplots()
+        wrapped_text = wrap_text(text, ax, font_size)
+        ax.text(0.5, 0.5, wrapped_text, fontsize=font_size, ha='center', va='center', wrap=True)
+        ax.set_xticks([])
+        ax.set_yticks([])
+        plt.show()
+    else:
+        wrapped_text = wrap_text(text, ax, font_size)
+        ax.text(0.5, 0.5, wrapped_text, fontsize=font_size, ha='center', va='center', wrap=True)
+        ax.set_xticks([])
+        ax.set_yticks([])
+
+
+def plot_modality(modality, data, ax=None, **kwargs):
+    if 's2' in modality.lower():
+        plot_s2(data, ax=ax, **kwargs)
+    elif 's1' in modality.lower():
+        plot_s1(data, ax=ax, **kwargs)
+    elif 'dem' in modality.lower():
+        plot_dem(data, ax=ax, **kwargs)
+    elif 'ndvi' in modality.lower():
+        plot_ndvi(data, ax=ax, **kwargs)
+    elif 'lulc' in modality.lower():
+        plot_lulc(data, ax=ax, **kwargs)
+    elif 'coords' in modality.lower() or 'caption' in modality.lower() or 'text' in modality.lower():
+        plot_text(data, ax=ax, **kwargs)
+
+
+
+# Metryki v0.2  (patrz terramind_generation.ipynb na komórke z "print(f"⏳ Ładowanie modelu: {model_name}...")")
+
+def calculate_lulc_score(pred_tensor, target_tensor, num_classes=10):
+    """
+    Porównanie map LULC:
+    - Pixel Accuracy
+    - mIoU
+    - Final Score (0–100)
+
+    Teacher (Large) = proxy ground truth
+    """
+
+    if isinstance(pred_tensor, torch.Tensor):
+        pred_tensor = pred_tensor.detach().cpu()
+    if isinstance(target_tensor, torch.Tensor):
+        target_tensor = target_tensor.detach().cpu()
+
+    if pred_tensor.ndim == 4:
+        pred_tensor = pred_tensor[0]
+    if target_tensor.ndim == 4:
+        target_tensor = target_tensor[0]
+
+    if pred_tensor.ndim == 3:
+        pred_mask = torch.argmax(pred_tensor, dim=0).numpy()
+    else:
+        pred_mask = pred_tensor.numpy()
+
+    if target_tensor.ndim == 3:
+        target_mask = torch.argmax(target_tensor, dim=0).numpy()
+    else:
+        target_mask = target_tensor.numpy()
+
+    accuracy = (pred_mask == target_mask).sum() / pred_mask.size * 100.0
+
+    iou_list = []
+    for c in range(num_classes):
+        pred_c = (pred_mask == c)
+        target_c = (target_mask == c)
+
+        union = np.logical_or(pred_c, target_c).sum()
+        intersection = np.logical_and(pred_c, target_c).sum()
+
+        if union > 0:
+            iou_list.append(intersection / union)
+
+    miou = np.mean(iou_list) * 100.0 if len(iou_list) > 0 else 0.0
+    final_score = 0.3 * accuracy + 0.7 * miou
+
+    return {
+        "pixel_accuracy": accuracy,
+        "miou": miou,
+        "final_score": final_score
+    }
+
+
+def prepare_masks_for_score(*masks):
+    """Prepare one or more label maps for `calculate_lulc_score`.
+
+    Args:
+        *masks: numpy arrays or torch tensors representing label maps (H,W) or (C,H,W) logits.
+
+    Returns:
+        (tensors, num_classes):
+            tensors: list of `torch.LongTensor` remapped to contiguous labels 0..N-1
+            num_classes: number of unique labels across all inputs
+
+    This helper will extract class indices if given logits, compute the union of labels,
+    remap them to 0..N-1 and return torch tensors suitable for `calculate_lulc_score`.
+    """
+    np_masks = []
+    for m in masks:
+        if isinstance(m, torch.Tensor):
+            m = m.detach().cpu()
+            if m.ndim == 4:
+                m = m[0]
+            if m.ndim == 3 and m.shape[0] > 1:
+                m = m.argmax(axis=0).numpy()
+            else:
+                m = m.numpy()
+        elif isinstance(m, np.ndarray):
+            while m.ndim > 2:
+                # remove batch dim
+                m = m[0]
+        else:
+            raise ValueError("Unsupported mask type")
+
+        np_masks.append(np.array(m, dtype=np.int64))
+
+    # union of labels across all masks
+    if len(np_masks) > 1:
+        union = np.unique(np.concatenate([m.ravel() for m in np_masks]))
+    else:
+        union = np.unique(np_masks[0])
+    label_to_idx = {int(l): i for i, l in enumerate(union)}
+
+    remapped_tensors = []
+    for arr in np_masks:
+        flat = arr.ravel()
+        rem = np.vectorize(lambda x: label_to_idx[int(x)])(flat)
+        remapped = rem.reshape(arr.shape).astype(np.int64)
+        remapped_tensors.append(torch.from_numpy(remapped))
+
+    return remapped_tensors, len(union)

io-app-backend/requirements.txt

@@ -0,0 +1,154 @@
+absl-py==2.3.1
+aenum==3.1.16
+affine==2.4.0
+aiohappyeyeballs==2.6.1
+aiohttp==3.13.3
+aiosignal==1.4.0
+albucore==0.0.24
+albumentations==2.0.8
+annotated-types==0.7.0
+antlr4-python3-runtime==4.9.3
+anyio==4.12.1
+attrs==25.4.0
+blinker==1.9.0
+cachetools==6.2.4
+certifi==2026.1.4
+charset-normalizer==3.4.4
+click==8.3.1
+cligj==0.7.2
+cloudpickle==3.1.2
+contourpy==1.3.3
+cycler==0.12.1
+dask==2025.12.0
+diffusers==0.36.0
+docstring_parser==0.17.0
+earthengine-api==1.7.4
+einops==0.8.1
+filelock==3.20.2
+Flask==3.1.2
+flask-cors==6.0.2
+fonttools==4.61.1
+frozenlist==1.8.0
+fsspec==2025.12.0
+geopandas==1.1.2
+gitdb==4.0.12
+GitPython==3.1.46
+google-api-core==2.28.1
+google-api-python-client==2.187.0
+google-auth==2.47.0
+google-auth-httplib2==0.3.0
+google-cloud-core==2.5.0
+google-cloud-storage==3.7.0
+google-crc32c==1.8.0
+google-resumable-media==2.8.0
+googleapis-common-protos==1.72.0
+grpcio==1.76.0
+h11==0.16.0
+h5py==3.15.1
+hf-xet==1.2.0
+httpcore==1.0.9
+httplib2==0.31.0
+httpx==0.28.1
+huggingface_hub==1.2.4
+hydra-core==1.3.2
+idna==3.11
+ImageIO==2.37.2
+importlib_metadata==8.7.1
+importlib_resources==6.5.2
+itsdangerous==2.2.0
+Jinja2==3.1.6
+joblib==1.5.3
+jsonargparse==4.45.0
+jsonschema==4.26.0
+jsonschema-specifications==2025.9.1
+kiwisolver==1.4.9
+kornia==0.8.2
+kornia_rs==0.1.10
+lazy_loader==0.4
+lightly==1.5.22
+lightly-utils==0.0.2
+lightning==2.6.0
+lightning-utilities==0.15.2
+locket==1.0.0
+Markdown==3.10
+MarkupSafe==3.0.3
+matplotlib==3.10.8
+mpmath==1.3.0
+multidict==6.7.0
+networkx==3.6.1
+numpy==2.2.6
+odc-geo==0.5.0
+odc-loader==0.6.0
+odc-stac==0.5.0
+omegaconf==2.3.0
+opencv-python-headless==4.12.0.88
+packaging==25.0
+pandas==2.3.3
+partd==1.4.2
+pillow==12.1.0
+planetary-computer==1.0.0
+platformdirs==4.5.1
+propcache==0.4.1
+proto-plus==1.27.0
+protobuf==6.33.2
+pyasn1==0.6.1
+pyasn1_modules==0.4.2
+pycocotools==2.0.11
+pydantic==2.12.5
+pydantic_core==2.41.5
+pyogrio==0.12.1
+pyparsing==3.3.1
+pyproj==3.7.2
+pystac==1.14.2
+pystac-client==0.9.0
+python-box==7.3.2
+python-dateutil==2.9.0.post0
+python-dotenv==1.2.1
+pytorch-lightning==2.6.0
+pytz==2025.2
+PyYAML==6.0.3
+rasterio==1.5.0
+referencing==0.37.0
+regex==2025.11.3
+requests==2.32.5
+rioxarray==0.20.0
+rpds-py==0.30.0
+rsa==4.9.1
+safetensors==0.7.0
+scikit-image==0.26.0
+scikit-learn==1.8.0
+scipy==1.16.3
+segmentation_models_pytorch==0.5.0
+sentry-sdk==2.49.0
+setuptools==80.9.0
+shapely==2.1.2
+shellingham==1.5.4
+simsimd==6.5.12
+six==1.17.0
+smmap==5.0.2
+stringzilla==4.6.0
+sympy==1.14.0
+tensorboard==2.20.0
+tensorboard-data-server==0.7.2
+terratorch==1.2.1
+threadpoolctl==3.6.0
+tifffile==2025.12.20
+timm==1.0.24
+toolz==1.1.0
+torch==2.9.1
+torchgeo==0.8.0
+torchmetrics==1.8.2
+torchvision==0.24.1
+tqdm==4.67.1
+typer-slim==0.21.1
+typeshed_client==2.8.2
+typing-inspection==0.4.2
+typing_extensions==4.15.0
+tzdata==2025.3
+uritemplate==4.2.0
+urllib3==2.6.3
+wandb==0.23.1
+Werkzeug==3.1.5
+xarray==2025.12.0
+yarl==1.22.0
+zipp==3.23.0

io-app-backend/terramindFunctions.py

@@ -0,0 +1,648 @@
+import os
+import torch
+import numpy as np
+import matplotlib.pyplot as plt
+import matplotlib.patches as mpatches
+from datetime import datetime, timedelta
+import torchvision.transforms as T
+import terratorch
+import base64
+from io import BytesIO
+from PIL import Image
+import gc
+
+# =========================================
+# ⚙️ KONFIGURACJA DOMYŚLNA
+# =========================================
+
+DEFAULT_BUFFER_KM = 5
+DEFAULT_MAX_CLOUD_COVER = 10
+DEFAULT_DAYS_BACK = 180
+
+TARGET_SIZE = 224
+TIMESTEPS = 50
+BRIGHTNESS_BOOST = 2.5
+NORMALIZATION_MODE = "offset"
+
+# Progi indeksów spektralnych
+NDWI_THRESHOLD = 0.1
+MNDWI_THRESHOLD = 0.1
+NDVI_THRESHOLD = 0.3
+NDBI_THRESHOLD = 0.0
+BSI_THRESHOLD = 0.1
+
+USE_WATER_CORRECTION = True
+USE_VEGETATION_CORRECTION = True
+USE_BUILDING_CORRECTION = True
+USE_BARE_SOIL_CORRECTION = True
+USE_SNOW_CORRECTION = False
+
+SAVE_RESULTS = True
+OUTPUT_FOLDER = "./wyniki"
+
+# =========================================
+# KLASY ESA WORLDCOVER
+# =========================================
+
+ESA_CLASSES = {
+    0: "Brak danych",
+    10: "Drzewa / Las",
+    20: "Zarośla",
+    30: "Trawa / Łąki",
+    40: "Uprawy rolne",
+    50: "Zabudowa",
+    60: "Goły grunt",
+    70: "Śnieg i lód",
+    80: "Woda",
+    90: "Tereny podmokłe",
+    95: "Namorzyny",
+    100: "Mchy i porosty"
+}
+
+ESA_COLORS = {
+    0: [0, 0, 0],
+    10: [0, 100, 0],
+    20: [255, 187, 34],
+    30: [255, 255, 76],
+    40: [240, 150, 255],
+    50: [250, 0, 0],
+    60: [180, 180, 180],
+    70: [240, 240, 240],
+    80: [0, 100, 200],
+    90: [0, 150, 160],
+    95: [0, 207, 117],
+    100: [250, 230, 160]
+}
+
+INDEX_TO_ESA = {
+    0: 0, 1: 10, 2: 20, 3: 30, 4: 40, 5: 50,
+    6: 60, 7: 70, 8: 80, 9: 90, 10: 95, 11: 100
+}
+
+device = 'cuda' if torch.cuda.is_available() else 'cpu'
+print(f"🖥️ Urządzenie: {device}")
+
+# =========================================
+# 🚀 GLOBALNY CACHE MODELU
+# =========================================
+
+_CURRENT_MODEL = None
+_CURRENT_MODEL_NAME = None
+
+def get_model(model_name):
+    """Ładuje model tylko raz i cache'uje go."""
+    global _CURRENT_MODEL, _CURRENT_MODEL_NAME
+    if _CURRENT_MODEL is not None and _CURRENT_MODEL_NAME == model_name:
+        return _CURRENT_MODEL
+    if _CURRENT_MODEL is not None:
+        del _CURRENT_MODEL
+        torch.cuda.empty_cache()
+        gc.collect()
+        print("🧹 Wyczyszczono pamięć po poprzednim modelu.")
+    from terratorch import FULL_MODEL_REGISTRY
+    print("⏳ Ładowanie modelu (tylko pierwszy raz)...")
+    try:
+        model = FULL_MODEL_REGISTRY.build(
+            model_name,  # Używamy nazwy przekazanej z parametru
+            modalities=["S2L2A"],
+            output_modalities=["LULC"],
+            pretrained=True,
+            standardize=True,
+        ).to(device)
+
+        model.eval()
+
+        # Aktualizujemy globalny cache
+        _CURRENT_MODEL = model
+        _CURRENT_MODEL_NAME = model_name
+
+        print(f"✅ Model {model_name} gotowy do pracy.")
+        return _CURRENT_MODEL
+
+    except Exception as e:
+        print(f"❌ Błąd podczas ładowania modelu {model_name}: {e}")
+        # Jeśli się nie uda, spróbujmy załadować domyślny lub rzucić błąd
+        raise e
+
+# =========================================
+# FUNKCJE POMOCNICZE
+# =========================================
+
+def get_coordinates_from_name(place_name):
+    try:
+        from geopy.geocoders import Nominatim
+        geolocator = Nominatim(user_agent="terramind_fast")
+        location = geolocator.geocode(place_name)
+        if location:
+            print(f"📍 {location.address}")
+            return location.latitude, location.longitude
+        return None
+    except:
+        return None
+
+
+def download_sentinel2(lat, lon, buffer_km, max_cloud_cover, days_back):
+    import planetary_computer
+    import pystac_client
+    import odc.stac
+    import math
+    import numpy as np
+    from datetime import datetime, timedelta
+    from pyproj import Transformer
+
+    print(f"🛰️ Pobieranie danych dla: {lat:.4f}, {lon:.4f} (Promień: {buffer_km}km)")
+
+    # 1. Obliczamy współczynnik skali Mercatora dla danej szerokości geograficznej
+    # To koryguje zniekształcenia mapy (w Polsce 1 metr rzeczywisty ≈ 1.6 metra w EPSG:3857)
+    scale_factor = 1.0 / math.cos(math.radians(lat))
+
+    # 2. Przygotowujemy transformatory
+    to_3857 = Transformer.from_crs("EPSG:4326", "EPSG:3857", always_xy=True)
+    to_4326 = Transformer.from_crs("EPSG:3857", "EPSG:4326", always_xy=True)
+
+    # 3. Obliczamy środek w metrach Mercatora
+    center_x, center_y = to_3857.transform(lon, lat)
+
+    # 4. Obliczamy zasięg w metrach Mercatora z uwzględnieniem skali
+    # half_side = (buffer_km * 1000) / 2  <-- Jeśli buffer_km to długość boku
+    # half_side = (buffer_km * 1000)      <-- Jeśli buffer_km to promień (dystans od środka)
+    # Przyjmujemy buffer_km jako promień (zgodnie z Twoją logiką "radius"):
+    half_side_mercator = (buffer_km * 1000) * scale_factor
+
+    min_x, min_y = center_x - half_side_mercator, center_y - half_side_mercator
+    max_x, max_y = center_x + half_side_mercator, center_y + half_side_mercator
+
+    # 5. Konwersja z powrotem na stopnie dla STAC (wymagane przez API)
+    west, south = to_4326.transform(min_x, min_y)
+    east, north = to_4326.transform(max_x, max_y)
+    bbox_geo = [west, south, east, north]
+
+    # --- Wyszukiwanie danych ---
+    end_date = datetime.now()
+    start_date = end_date - timedelta(days=days_back)
+    date_range = f"{start_date.strftime('%Y-%m-%d')}/{end_date.strftime('%Y-%m-%d')}"
+
+    catalog = pystac_client.Client.open(
+        "https://planetarycomputer.microsoft.com/api/stac/v1",
+        modifier=planetary_computer.sign_inplace
+    )
+
+    search = catalog.search(
+        collections=["sentinel-2-l2a"],
+        bbox=bbox_geo,
+        datetime=date_range,
+        query={"eo:cloud_cover": {"lt": max_cloud_cover}}
+    )
+
+    items = list(search.items())
+    if not items:
+        print("❌ Brak danych spełniających kryteria")
+        return None
+
+    best_item = sorted(items, key=lambda x: x.properties.get('eo:cloud_cover', 100))[0]
+
+    # 6. Ładowanie danych
+    # bbox_geo (stopnie) definiuje obszar, crs="EPSG:3857" wymusza format map internetowych
+    data = odc.stac.load(
+        [best_item],
+        bands=["B01", "B02", "B03", "B04", "B05", "B06",
+               "B07", "B08", "B8A", "B09", "B11", "B12"],
+        bbox=bbox_geo,
+        crs="EPSG:3857",
+        resolution=10
+    )
+
+    # Mapowanie zmiennych na tablicę numpy
+    stacked = np.stack([data[b].values[0] for b in data.data_vars], axis=0)
+
+    print(f"✅ Pobrano obraz o rozmiarze: {stacked.shape}")
+    return stacked, best_item.datetime.strftime('%Y-%m-%d'), best_item.id
+
+# def download_sentinel2(lat, lon, buffer_km, max_cloud_cover, days_back):
+#     """Pobiera dane satelitarne uwzględniając parametry przekazane z backendu."""
+#     import planetary_computer
+#     import pystac_client
+#     import odc.stac
+#
+#     print(f"🛰️ Pobieranie danych dla: {lat:.4f}, {lon:.4f} (Buffer: {buffer_km}km, Chmury: <{max_cloud_cover}%)")
+#
+#     delta = buffer_km * 0.01
+#     bbox = [lon - delta, lat - delta, lon + delta, lat + delta]
+#
+#     end_date = datetime.now()
+#     start_date = end_date - timedelta(days=days_back)
+#     date_range = f"{start_date.strftime('%Y-%m-%d')}/{end_date.strftime('%Y-%m-%d')}"
+#
+#     catalog = pystac_client.Client.open(
+#         "https://planetarycomputer.microsoft.com/api/stac/v1",
+#         modifier=planetary_computer.sign_inplace
+#     )
+#
+#     search = catalog.search(
+#         collections=["sentinel-2-l2a"],
+#         bbox=bbox,
+#         datetime=date_range,
+#         query={"eo:cloud_cover": {"lt": max_cloud_cover}}
+#     )
+#
+#     items = list(search.items())
+#     if not items:
+#         print("❌ Brak danych spełniających kryteria")
+#         return None
+#
+#     items_sorted = sorted(items, key=lambda x: x.properties.get('eo:cloud_cover', 100))
+#     best_item = items_sorted[0]
+#     date = best_item.datetime.strftime('%Y-%m-%d')
+#     cloud = best_item.properties.get('eo:cloud_cover', 0)
+#
+#     print(f"📅 Znaleziono zdjęcie: {date} (chmury: {cloud:.1f}%)")
+#     print(f"   📌 ID sceny: {best_item.id}")
+#     print(f"   📦 BBOX żądany: {bbox}")
+#
+#     bands = ["B01", "B02", "B03", "B04", "B05", "B06",
+#              "B07", "B08", "B8A", "B09", "B11", "B12"]
+#
+#     data = odc.stac.load([best_item], bands=bands, bbox=bbox, resolution=10)
+#     stacked = np.stack([data[b].values[0] for b in bands], axis=0)
+#
+#     print(f"   📐 Rozmiar danych: {stacked.shape}")
+#     return stacked, date, best_item.id
+
+def prepare_input(data_12ch):
+    tensor = torch.from_numpy(data_12ch.astype(np.float32))
+    tensor = torch.nan_to_num(tensor, nan=0.0)
+
+    if NORMALIZATION_MODE == "offset":
+        tensor = tensor - 1000.0
+
+    tensor = torch.clamp(tensor, min=0)
+
+    h, w = tensor.shape[1], tensor.shape[2]
+    min_dim = min(h, w)
+
+    transform = T.Compose([
+        T.CenterCrop(min_dim),
+        T.Resize((TARGET_SIZE, TARGET_SIZE), antialias=True)
+    ])
+
+    return transform(tensor).unsqueeze(0)
+
+def run_inference(model, input_tensor):
+    print(f"🔄 Uruchamianie modelu AI...")
+    with torch.no_grad():
+        output = model(
+            {"S2L2A": input_tensor.to(device)},
+            verbose=False,
+            timesteps=TIMESTEPS
+        )
+    return output["LULC"].detach()
+
+def decode_output(lulc_tensor):
+    if lulc_tensor.ndim == 4 and lulc_tensor.shape[1] > 1:
+        class_indices = lulc_tensor.argmax(dim=1)[0].cpu().numpy()
+        if class_indices.max() <= 11:
+            class_map = np.vectorize(lambda x: INDEX_TO_ESA.get(x, 0))(class_indices)
+        else:
+            class_map = class_indices
+    else:
+        class_map = lulc_tensor[0, 0].cpu().numpy().astype(int)
+    return class_map
+
+def calculate_spectral_indices(input_tensor):
+    blue = input_tensor[0, 1].cpu().numpy() / 10000.0
+    green = input_tensor[0, 2].cpu().numpy() / 10000.0
+    red = input_tensor[0, 3].cpu().numpy() / 10000.0
+    nir = input_tensor[0, 7].cpu().numpy() / 10000.0
+    swir1 = input_tensor[0, 10].cpu().numpy() / 10000.0
+    swir2 = input_tensor[0, 11].cpu().numpy() / 10000.0
+
+    eps = 1e-8
+    indices = {}
+    indices['ndwi'] = (green - nir) / (green + nir + eps)
+    indices['mndwi'] = (green - swir1) / (green + swir1 + eps)
+    indices['awei'] = 4 * (green - swir1) - (0.25 * nir + 2.75 * swir2)
+    indices['ndvi'] = (nir - red) / (nir + red + eps)
+    indices['evi'] = 2.5 * (nir - red) / (nir + 6 * red - 7.5 * blue + 1 + eps)
+    indices['ndbi'] = (swir1 - nir) / (swir1 + nir + eps)
+    indices['bsi'] = ((swir1 + red) - (nir + blue)) / ((swir1 + red) + (nir + blue) + eps)
+
+    return indices
+
+# 🆕 Funkcja generująca maski dla każdego wskaźnika
+def generate_index_masks(indices):
+    """
+    Tworzy binarne maski dla każdego wskaźnika spektralnego.
+    Zwraca dict z maskami jako numpy arrays (True/False).
+    """
+    masks = {}
+    
+    # Maska wody (NDWI)
+    masks['water_ndwi'] = indices['ndwi'] > NDWI_THRESHOLD
+    
+    # Maska wody (MNDWI)
+    masks['water_mndwi'] = indices['mndwi'] > MNDWI_THRESHOLD
+    
+    # Maska wody (AWEI)
+    masks['water_awei'] = indices['awei'] > 0
+    
+    # Maska roślinności (NDVI)
+    masks['vegetation_ndvi'] = indices['ndvi'] > NDVI_THRESHOLD
+    
+    # Maska roślinności (EVI)
+    masks['vegetation_evi'] = indices['evi'] > 0.3
+    
+    # Maska zabudowy (NDBI)
+    masks['buildings_ndbi'] = (indices['ndbi'] > NDBI_THRESHOLD) & (indices['ndvi'] < 0.2)
+    
+    # Maska gołego gruntu (BSI)
+    masks['baresoil_bsi'] = (indices['bsi'] > BSI_THRESHOLD) & (indices['ndvi'] < 0.1)
+    
+    return masks
+
+def apply_hybrid_corrections(class_map, indices):
+    """Zwraca mapę z korektami ORAZ mapy pośrednie."""
+    hybrid_map = class_map.copy()
+    correction_layers = {}
+
+    if USE_WATER_CORRECTION:
+        water_mask = ((indices['ndwi'] > NDWI_THRESHOLD) | (indices['mndwi'] > MNDWI_THRESHOLD) | (indices['awei'] > 0))
+        already_water = (class_map == 80) | (class_map == 90)
+        correction_layers['water'] = water_mask & ~already_water
+        hybrid_map[correction_layers['water']] = 80
+
+    if USE_VEGETATION_CORRECTION:
+        strong_vegetation = (indices['ndvi'] > 0.5) & (indices['evi'] > 0.3)
+        not_water = (hybrid_map != 80) & (hybrid_map != 90)
+        correction_layers['vegetation'] = strong_vegetation & not_water & (hybrid_map != 10)
+        hybrid_map[correction_layers['vegetation']] = 10
+
+    if USE_BUILDING_CORRECTION:
+        building_mask = ((indices['ndbi'] > NDBI_THRESHOLD) & (indices['ndvi'] < 0.2) & (indices['ndwi'] < 0))
+        can_be_building = (hybrid_map != 80) & (hybrid_map != 10)
+        correction_layers['buildings'] = building_mask & can_be_building & (hybrid_map != 50)
+        hybrid_map[correction_layers['buildings']] = 50
+
+    if USE_BARE_SOIL_CORRECTION:
+        bare_mask = ((indices['bsi'] > BSI_THRESHOLD) & (indices['ndvi'] < 0.1) & (indices['ndwi'] < 0) & (indices['ndbi'] < 0.1))
+        can_be_bare = (hybrid_map != 80) & (hybrid_map != 10) & (hybrid_map != 50)
+        correction_layers['baresoil'] = bare_mask & can_be_bare & (hybrid_map != 60)
+        hybrid_map[correction_layers['baresoil']] = 60
+
+    return hybrid_map, correction_layers
+
+# =========================================
+# 🆕 FUNKCJE WIZUALIZACJI MASEK
+# =========================================
+
+def create_rgb_image(input_tensor, brightness=BRIGHTNESS_BOOST):
+    """Tworzy obraz RGB z tensora wejściowego."""
+    red = input_tensor[0, 3].cpu().numpy()
+    green = input_tensor[0, 2].cpu().numpy()
+    blue = input_tensor[0, 1].cpu().numpy()
+
+    rgb = np.stack([red, green, blue], axis=-1)
+
+    if NORMALIZATION_MODE == "offset":
+        rgb = rgb + 1000.0
+
+    rgb = rgb / 10000.0 * brightness
+    rgb = np.clip(rgb, 0, 1)
+    rgb_uint8 = (rgb * 255).astype(np.uint8)
+
+    return rgb_uint8
+
+def create_segmentation_image(class_map):
+    """Tworzy kolorową mapę segmentacji."""
+    h, w = class_map.shape
+    rgb = np.zeros((h, w, 3), dtype=np.uint8)
+
+    for class_id, color in ESA_COLORS.items():
+        mask = class_map == class_id
+        rgb[mask] = color
+
+    return rgb
+
+# def create_segmentation_image(class_map, alpha=180):
+#     """
+#     Tworzy kolorową mapę segmentacji z kanałem alfa.
+#     alpha: 0 (całkowicie przezroczysty) do 255 (nieprzezroczysty)
+#     """
+#     h, w = class_map.shape
+#     # Tworzymy tablicę RGBA (4 kanały)
+#     rgba = np.zeros((h, w, 4), dtype=np.uint8)
+#
+#     for class_id, color in ESA_COLORS.items():
+#         mask = class_map == class_id
+#         rgba[mask, :3] = color  # Kopiujemy R, G, B
+#         rgba[mask, 3] = alpha  # Ustawiamy przezroczystość dla tej klasy
+#
+#     return rgba
+
+def create_mask_visualization(mask, color=[255, 0, 0]):
+    """
+    Tworzy wizualizację maski binarnej.
+
+    Args:
+        mask: numpy array bool (True/False)
+        color: kolor dla True pikseli [R, G, B]
+
+    Returns:
+        numpy array RGB (transparentne tło, kolorowa maska)
+    """
+    h, w = mask.shape
+    rgb = np.ones((h, w, 3), dtype=np.uint8) * 255  # Białe tło
+
+    rgb[mask] = color  # Zamaluj maskę kolorem
+    rgb[~mask] = [240, 240, 240]  # Szare tło dla lepszej widoczności
+
+    return rgb
+
+# def create_mask_visualization(mask, color=[255, 0, 0], alpha=180):
+#     """
+#     Tworzy wizualizację maski binarnej na przezroczystym tle.
+#     """
+#     h, w = mask.shape
+#     # 4 kanały: R, G, B, A
+#     rgba = np.zeros((h, w, 4), dtype=np.uint8)
+#
+#     # Piksele należące do maski otrzymują kolor i wybraną przezroczystość
+#     rgba[mask, :3] = color
+#     rgba[mask, 3] = alpha
+#
+#     # Piksele poza maską (~mask) mają już 0 w kanale alfa dzięki np.zeros,
+#     # więc są całkowicie przezroczyste.
+#
+#     return rgba
+
+def calculate_class_percentages(class_map):
+    """Oblicza procentowy udział każdej klasy."""
+    total_pixels = class_map.size
+    percentages = {}
+    
+    for class_id, class_name in ESA_CLASSES.items():
+        count = np.sum(class_map == class_id)
+        if count > 0:
+            percentages[class_id] = {
+                'name': class_name,
+                'count': int(count),
+                'percentage': round(count / total_pixels * 100, 2)
+            }
+    
+    return percentages
+
+def image_to_base64(image_array):
+    """Konwertuje numpy array do base64 string (dla frontendu)."""
+    img = Image.fromarray(image_array)
+    buffer = BytesIO()
+    img.save(buffer, format='PNG')
+    return base64.b64encode(buffer.getvalue()).decode('utf-8')
+
+# =========================================
+# GŁÓWNA FUNKCJA ANALITYCZNA
+# =========================================
+
+def analyze(location_data, buffer_km=DEFAULT_BUFFER_KM, max_cloud_cover=DEFAULT_MAX_CLOUD_COVER,
+            days_back=DEFAULT_DAYS_BACK, show_visualization=False, save_files=False, model_name="terramind_v1_large_generate"):
+    """
+    Główna funkcja wywoływana przez Flask.
+    
+    Returns:
+        dict z wszystkimi obrazami (RGB, surowy model, maski wskaźników, finał)
+    """
+    
+    lat, lon = None, None
+    title = "Unknown"
+
+    # 1. Rozpoznanie typu danych
+    if isinstance(location_data, list) or isinstance(location_data, tuple):
+        lat, lon = location_data
+        title = f"{lat:.4f}N, {lon:.4f}E"
+    elif isinstance(location_data, str):
+        coords = get_coordinates_from_name(location_data)
+        if not coords:
+            print("❌ Nie znaleziono współrzędnych dla podanej nazwy.")
+            return None
+        lat, lon = coords
+        title = location_data
+    else:
+        print("❌ Nieprawidłowy format lokalizacji")
+        return None
+
+    print(f"\n{'='*60}")
+    print(f"🌍 ROZPOCZĘCIE ANALIZY: {title}")
+    print(f"{'='*60}")
+    print(f"📍 Współrzędne: {lat:.6f}, {lon:.6f}")
+    print(f"📏 Promień: {buffer_km} km")
+    print(f"☁️ Max zachmurzenie: {max_cloud_cover}%")
+    print(f"📅 Dni wstecz: {days_back}")
+    print(f"{'='*60}\n")
+
+    # 2. Pobranie danych
+    result = download_sentinel2(lat, lon, buffer_km, max_cloud_cover, days_back)
+    if result is None:
+        return None
+    data, date, scene_id = result
+
+    # 3. Przetwarzanie i AI
+    input_tensor = prepare_input(data)
+    print(f"🔢 Rozmiar tensora wejściowego: {input_tensor.shape}")
+    
+    model = get_model(model_name)
+    lulc_output = run_inference(model, input_tensor)
+
+    # 4. Dekodowanie (SUROWY model - bez korekcji)
+    class_map_raw = decode_output(lulc_output)
+    
+    # 5. Oblicz wskaźniki spektralne
+    indices = calculate_spectral_indices(input_tensor)
+    
+    # 6. Generuj maski dla wskaźników
+    index_masks = generate_index_masks(indices)
+    
+    # 7. Zastosuj korekty (finalna mapa)
+    class_map_final, correction_layers = apply_hybrid_corrections(class_map_raw, indices)
+
+    # =========================================
+    # 🎨 GENEROWANIE WSZYSTKICH OBRAZÓW
+    # =========================================
+    
+    print("🎨 Generowanie wizualizacji...")
+    
+    # 1. RGB (satelitarny)
+    rgb_image = create_rgb_image(input_tensor)
+    
+    # 2. Surowy TerraMind (bez korekcji)
+    raw_segmentation = create_segmentation_image(class_map_raw)
+    
+    # 3. Finalna segmentacja (z korektami)
+    final_segmentation = create_segmentation_image(class_map_final)
+    
+    # 4. Maski wskaźników
+    mask_images = {}
+    mask_colors = {
+        'water_ndwi': [0, 150, 255],      # Niebieski
+        'water_mndwi': [0, 100, 200],     # Ciemny niebieski
+        'water_awei': [100, 200, 255],    # Jasny niebieski
+        'vegetation_ndvi': [0, 150, 0],   # Zielony
+        'vegetation_evi': [50, 200, 50],  # Jasny zielony
+        'buildings_ndbi': [255, 0, 0],    # Czerwony
+        'baresoil_bsi': [180, 140, 100],  # Brązowy
+    }
+    
+    for mask_name, mask in index_masks.items():
+        color = mask_colors.get(mask_name, [128, 128, 128])
+        mask_images[mask_name] = create_mask_visualization(mask, color)
+    
+    # 5. Statystyki
+    statistics = calculate_class_percentages(class_map_final)
+    
+    # =========================================
+    # 📦 PRZYGOTOWANIE WYNIKU
+    # =========================================
+    
+    frontend_result = {
+        'success': True,
+        'lat': lat,
+        'lon': lon,
+        'title': title,
+        'date': date,
+        'scene_id': scene_id,
+        'statistics': statistics,
+        
+        # OBRAZY GŁÓWNE
+        'rgb_base64': image_to_base64(rgb_image),
+        'raw_segmentation_base64': image_to_base64(raw_segmentation),
+        'segmentation_base64': image_to_base64(final_segmentation),
+        
+        # MASKI WSKAŹNIKÓW
+        'masks': {
+            mask_name: image_to_base64(mask_img)
+            for mask_name, mask_img in mask_images.items()
+        },
+        
+        # Dla kompatybilności z frontendem
+        'class_map': class_map_final.tolist()
+    }
+    
+    print("✅ Analiza zakończona sukcesem!")
+    
+    return frontend_result
+
+if __name__ == "__main__":
+    print("\n" + "="*70)
+    print("🧪 TRYB TESTOWY - terramindFunctions.py")
+    print("="*70)
+    
+    result = analyze([50.0540, 19.9352], buffer_km=3, max_cloud_cover=10, days_back=60)
+    
+    if result:
+        print("\n" + "="*70)
+        print("📦 WYGENEROWANE OBRAZY:")
+        print("="*70)
+        print(f"  ✅ RGB: {len(result['rgb_base64'])} chars")
+        print(f"  ✅ Surowy TerraMind: {len(result['raw_segmentation_base64'])} chars")
+        print(f"  ✅ Finalna segmentacja: {len(result['segmentation_base64'])} chars")
+        print(f"  ✅ Maski wskaźników: {len(result['masks'])} sztuk")
+        for mask_name in result['masks'].keys():
+            print(f"      - {mask_name}")
+        print("="*70)

io-app-front/.env

@@ -0,0 +1 @@
+VITE_MAPBOX_ACCESS_TOKEN = pk.eyJ1IjoiamFucGllY2hvdGEiLCJhIjoiY21rd2o3eGhkMDBoaDNlcXltdXRrcHl0MyJ9.C93gECPA4gRjY2-IJJrGOA

io-app-front/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

io-app-front/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

io-app-front/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

io-app-front/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>io-app-front</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

io-app-front/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "io-app-front",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@mantine/core": "^8.3.13",
+    "@mantine/hooks": "^8.3.13",
+    "@tabler/icons-react": "^3.36.1",
+    "axios": "^1.13.2",
+    "dotenv": "^17.2.3",
+    "leaflet": "^1.9.4",
+    "mapbox-gl": "^3.18.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-leaflet": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

io-app-front/src/App.css

@@ -0,0 +1 @@
+

io-app-front/src/App.jsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import Sidebar from './components/Sidebar'
+import MapView from './components/MapView'
+import { MantineProvider } from '@mantine/core'
+import '@mantine/core/styles.css'
+
+function App() {
+  const [selectedLocation, setSelectedLocation] = useState(null);
+  const [analysisResult, setAnalysisResult] = useState(null);
+  const [layersConfig, setLayersConfig] = useState({
+    firstLayer: 'rgb',      // Domyślnie satelita
+    secondLayer: 'image',   // Domyślnie klasyfikacja LULC
+    opacity: 0.5
+  });
+
+  const handleAnalysisComplete = (data) => {
+    console.log("✅ App: Odebrano wyniki z Sidebaru", data);
+    setAnalysisResult(data);
+    setSelectedLocation(null);
+  };
+
+  const handleMapClick = (coords) => {
+    setSelectedLocation(coords);
+    setAnalysisResult(null);
+    console.log('lng: ', coords.lng);
+    console.log('lat: ', coords.lat);
+  }
+
+  const handleLocationSelect = (locationData) => {
+    console.log('🔍 Wybrano z wyszukiwarki:', locationData);
+    setSelectedLocation(locationData);
+    setAnalysisResult(null);
+  };
+
+  return (
+    <MantineProvider forceColorScheme='dark'>
+      <Sidebar
+        selectedLocation={selectedLocation}
+        onAnalysisComplete={handleAnalysisComplete}
+        onLocationSelect={handleLocationSelect}
+        layersConfig={layersConfig}
+        onLayersChange={setLayersConfig}
+        analysisResult={analysisResult}
+      />
+      <MapView
+        onMapClick={handleMapClick}
+        analysisResult={analysisResult}
+        selectedLocation={selectedLocation}
+        layersConfig={layersConfig}
+      />
+    </MantineProvider>
+  )
+}
+
+export default App

io-app-front/src/components/CompareModal.jsx

@@ -0,0 +1,251 @@
+import { Modal, Select, Button, Group, Stack, Text, Center, Loader } from '@mantine/core';
+import { useState } from 'react';
+import classes from './CompareModal.module.css';
+
+const MASK_INFO = {
+  water_ndwi: { name: "NDWI - Water", description: "Open water bodies", color: "#1971c2", formula: "(G - NIR)/(G + NIR)" },
+  water_mndwi: { name: "MNDWI - Urban Water", description: "Water in urban areas", color: "#1864ab", formula: "(G - SWIR)/(G + SWIR)" },
+  water_awei: { name: "AWEI - Automated", description: "Shadow suppression", color: "#0b7285", formula: "4(G-SWIR)-(0.25NIR+2.75SWIR2)" },
+  vegetation_ndvi: { name: "NDVI - Vegetation", description: "Plant health", color: "#2f9e44", formula: "(NIR - R)/(NIR + R)" },
+  vegetation_evi: { name: "EVI - Enhanced Veg", description: "Dense canopy", color: "#5c940d", formula: "2.5(NIR-R)/(NIR+6R-7.5B+1)" },
+  buildings_ndbi: { name: "NDBI - Built-up", description: "Urban structures", color: "#c92a2a", formula: "(SWIR - NIR)/(SWIR + NIR)" },
+  baresoil_bsi: { name: "BSI - Bare Soil", description: "Soil detection", color: "#d9480f", formula: "((SWIR+R)-(NIR+B))/((SWIR+R)+(NIR+B))" }
+};
+
+export default function CompareModal({ opened, onClose, onRunCompare, isLoading, results }) {
+  const [modelA, setModelA] = useState('terramind_v1_small_generate');
+  const [modelB, setModelB] = useState('terramind_v1_large_generate');
+
+  const modelOptions = [
+    { value: 'terramind_v1_tiny_generate', label: 'Terramind v1 Tiny' },
+    { value: 'terramind_v1_small_generate', label: 'Terramind v1 Small' },
+    { value: 'terramind_v1_large_generate', label: 'Terramind v1 Large' },
+  ];
+
+  const getModelLabel = (model) => {
+    const parts = model.split('_');
+    return parts[2] ? parts[2].toUpperCase() + " Model" : model;
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="ADVANCED ANALYSIS"
+      size="100%"
+      centered
+      classNames={{ content: classes.modalContent, header: classes.modalHeader, body: classes.modalBody }}
+      overlayProps={{ backgroundOpacity: 0.85, blur: 12 }}
+    >
+      <Stack gap="xl" h="100%">
+
+        {/* --- STAN: WYBÓR MODELI --- */}
+        {!results && (
+          <Center h={500}>
+            <Stack align="center" gap="xl" w="100%" maw={600}>
+              <Text size="lg" fw={500} c="dimmed" lts={1}>SELECT MODELS TO COMPARE</Text>
+              <Group grow w="100%">
+                <Select label="Model A" data={modelOptions} value={modelA} onChange={setModelA} disabled={isLoading} />
+                <Select label="Model B" data={modelOptions} value={modelB} onChange={setModelB} disabled={isLoading} />
+              </Group>
+              <Button fullWidth size="lg" color="blue" onClick={() => onRunCompare(modelA, modelB)} loading={isLoading}>
+                START ANALYSIS
+              </Button>
+            </Stack>
+          </Center>
+        )}
+
+        {/* --- STAN: WYNIKI (2 KOLUMNY) --- */}
+        {results && !isLoading && (
+          <div className={classes.dualLayout}>
+
+            {/* LEWA KOLUMNA */}
+            <div className={classes.modelColumn}>
+              <div className={classes.columnHeader}>{getModelLabel(modelA)}</div>
+
+              <div className={classes.imagesGrid}>
+                {/* 1. RGB */}
+                <ImageCard
+                  src={results.modelA.rgb}
+                  title="Satellite RGB"
+                  subtitle="Sentinel-2 Source"
+                  borderColor="#1971c2"
+                />
+                {/* 2. Raw */}
+                <ImageCard
+                  src={results.modelA.raw_segmentation}
+                  title="Raw Output"
+                  subtitle="Raw Model"
+                  borderColor="#f08c00"
+                />
+                {/* 3. Final */}
+                <ImageCard
+                  src={results.modelA.image}
+                  title="Final Segmentation"
+                  subtitle="Model Prediction"
+                  borderColor="#2f9e44"
+                />
+              </div>
+            </div>
+
+            {/* PRAWA KOLUMNA */}
+            <div className={classes.modelColumn}>
+              <div className={classes.columnHeader}>{getModelLabel(modelB)}</div>
+
+              <div className={classes.imagesGrid}>
+                {/* 1. RGB */}
+                <ImageCard
+                  src={results.modelB.rgb}
+                  title="Satellite RGB"
+                  subtitle="Sentinel-2 Source"
+                  borderColor="#1971c2"
+                />
+                {/* 2. Raw */}
+                <ImageCard
+                  src={results.modelB.raw_segmentation}
+                  title="Raw Output"
+                  subtitle="Reference Model"
+                  borderColor="#f08c00"
+                />
+                {/* 3. Final */}
+                <ImageCard
+                  src={results.modelB.image}
+                  title="Final Segmentation"
+                  subtitle="Reference Output"
+                  borderColor="#2f9e44"
+                />
+              </div>
+            </div>
+
+            {/* MASKI (NA DOLE) */}
+            <div className={classes.masksSection}>
+              <div className={classes.masksHeader}>Spectral Indices Masks</div>
+              <div className={classes.masksGrid}>
+                {Object.entries(results.modelA.masks).map(([key, src]) => {
+                  const info = MASK_INFO[key] || { name: key, color: '#444', formula: 'N/A' };
+                  return (
+                    <div key={key} className={classes.maskCard} style={{ borderColor: info.color }}>
+                      <div className={classes.maskTitleBar} style={{ backgroundColor: info.color }}>
+                        {info.name}
+                      </div>
+                      <img src={src} className={classes.maskImg} alt={info.name} />
+                      <div className={classes.maskInfo}>
+                        <div className={classes.maskDesc}>{info.description}</div>
+                        <div className={classes.maskFormula}>{info.formula}</div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* METRYKI */}
+            {results.metrics && (
+              <div className={classes.metricsSection}>
+                <div className={classes.metricsHeader}>📊 Analysis Metrics</div>
+                
+                {/* Główne metryki */}
+                <div className={classes.mainMetricsGrid}>
+                  <MetricCard 
+                    label="Pixel Accuracy" 
+                    value={results.metrics.accuracy?.toFixed(2)} 
+                    unit="%" 
+                    color="#1971c2"
+                  />
+                  <MetricCard 
+                    label="mIoU" 
+                    value={results.metrics.miou?.toFixed(2)} 
+                    unit="%" 
+                    color="#2f9e44"
+                  />
+                  <MetricCard 
+                    label="Frequency Weighted IoU" 
+                    value={results.metrics.fw_iou?.toFixed(2)} 
+                    unit="%" 
+                    color="#f08c00"
+                  />
+                  <MetricCard 
+                    label="Dice Score" 
+                    value={results.metrics.dice?.toFixed(2)} 
+                    unit="%" 
+                    color="#c92a2a"
+                  />
+                  <MetricCard 
+                    label="Mean Precision" 
+                    value={results.metrics.mean_precision?.toFixed(2)} 
+                    unit="%" 
+                    color="#7950f2"
+                  />
+                  <MetricCard 
+                    label="Mean Recall" 
+                    value={results.metrics.mean_recall?.toFixed(2)} 
+                    unit="%" 
+                    color="#15aabf"
+                  />
+                </div>
+
+                {/* Metryki dla każdej klasy */}
+                {results.metrics.class_details && Object.keys(results.metrics.class_details).length > 0 && (
+                  <div className={classes.classDetailsSection}>
+                    <div className={classes.classDetailsHeader}>Per-Class Metrics</div>
+                    <div className={classes.classDetailsGrid}>
+                      {Object.entries(results.metrics.class_details).map(([className, metrics]) => (
+                        <div key={className} className={classes.classMetricCard}>
+                          <div className={classes.classMetricName}>{className}</div>
+                          <div className={classes.classMetricValues}>
+                            <div className={classes.classMetricRow}>
+                              <span>IoU:</span>
+                              <span className={classes.metricValue}>{metrics.iou?.toFixed(2)}%</span>
+                            </div>
+                            <div className={classes.classMetricRow}>
+                              <span>Precision:</span>
+                              <span className={classes.metricValue}>{metrics.precision?.toFixed(2)}%</span>
+                            </div>
+                            <div className={classes.classMetricRow}>
+                              <span>Recall:</span>
+                              <span className={classes.metricValue}>{metrics.recall?.toFixed(2)}%</span>
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+
+          </div>
+        )}
+      </Stack>
+    </Modal>
+  );
+}
+
+// KOMPONENT KARTY (Czysty, z Twoimi stylami ramki)
+function ImageCard({ src, title, subtitle, borderColor }) {
+  return (
+    <div className={classes.imageCard}>
+      <div className={classes.cardTitle} style={{ color: borderColor }}>{title}</div>
+      <div className={classes.cardFrame} style={{ borderColor: borderColor }}>
+        <img src={src} className={classes.cardImg} alt={title} />
+      </div>
+      <div className={classes.cardSubtitle}>{subtitle}</div>
+    </div>
+  );
+}
+
+// KOMPONENT KARTY METRYK
+function MetricCard({ label, value, unit, color, highlight = false }) {
+  return (
+    <div className={classes.metricCard} style={{ 
+      borderColor: color,
+      backgroundColor: highlight ? 'rgba(27, 137, 23, 0.1)' : 'rgba(0, 0, 0, 0.2)'
+    }}>
+      <div className={classes.metricLabel}>{label}</div>
+      <div className={classes.metricValueContainer} style={{ color: color }}>
+        <span className={classes.metricValueText}>{value}</span>
+        <span className={classes.metricUnit}>{unit}</span>
+      </div>
+    </div>
+  );
+}

io-app-front/src/components/CompareModal.module.css

@@ -0,0 +1,288 @@
+/* --- GŁÓWNY MODAL --- */
+.modalContent {
+    /* Ciemne, szklane tło */
+    background-color: rgba(15, 15, 18, 0.95) !important;
+    backdrop-filter: blur(40px) saturate(180%) !important;
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border-radius: 16px !important;
+    color: white !important;
+    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8) !important;
+}
+
+.modalHeader { background: transparent !important; padding: 24px 32px !important; }
+.modalBody { background: transparent !important; padding: 0 32px 32px 32px !important; }
+.modalTitle { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.5px; color: white; }
+
+/* --- UKŁAD DWUKOLUMNOWY (GRID) --- */
+.dualLayout {
+    display: grid;
+    grid-template-columns: 1fr 1fr; /* Dwie równe kolumny */
+    gap: 32px; /* Odstęp między Modelem A i B */
+    align-items: start;
+}
+
+/* Pojedyncza sekcja modelu (lewa lub prawa) */
+.modelColumn {
+    background-color: rgba(255, 255, 255, 0.03); /* Bardzo subtelne tło kolumny */
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 12px;
+    padding: 24px;
+    height: 100%;
+}
+
+.columnHeader {
+    text-align: center;
+    font-size: 1.1rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 24px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* --- GRID OBRAZÓW (Dokładnie jak w Twoim przykładzie) --- */
+.imagesGrid {
+    display: grid;
+    /* To wymusza minimalną szerokość 280px. */
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+}
+
+/* --- KARTA OBRAZU --- */
+.imageCard {
+    text-align: center;
+    background: rgba(0, 0, 0, 0.2);
+    padding: 12px;
+    border-radius: 10px;
+    transition: transform 0.2s ease;
+}
+
+.imageCard:hover {
+    background: rgba(255, 255, 255, 0.03);
+}
+
+.cardTitle {
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 10px;
+}
+
+/* Ramka obrazka */
+.cardFrame {
+    width: 100%;
+    aspect-ratio: 1 / 1; /* Idealny kwadrat */
+    background-color: #000;
+    border-radius: 8px;
+    border-width: 2px;
+    border-style: solid; /* Kolor z propsa */
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
+}
+
+.cardImg {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+}
+
+.cardSubtitle {
+    margin-top: 8px;
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+/* --- SEKCJA MASEK (Dół) --- */
+.masksSection {
+    grid-column: 1 / -1; /* Rozciągnij na obie kolumny */
+    background-color: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 12px;
+    padding: 24px;
+    margin-top: 10px;
+}
+
+.masksHeader {
+    text-align: center;
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: 20px;
+    text-transform: uppercase;
+}
+
+/* Grid masek (Twoje 250px) */
+.masksGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 16px;
+}
+
+.maskCard {
+    border: 1px solid; /* Kolor z propsa */
+    border-radius: 8px;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.3);
+    display: flex;
+    flex-direction: column;
+}
+
+.maskTitleBar {
+    padding: 8px 12px;
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: white; /* Tło z propsa */
+}
+
+.maskImg {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: contain;
+    background: #000;
+}
+
+.maskInfo {
+    padding: 10px;
+}
+
+.maskDesc {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 6px;
+}
+
+.maskFormula {
+    font-family: monospace;
+    font-size: 0.7rem;
+    color: #4dabf7;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 4px;
+    border-radius: 4px;
+    display: inline-block;
+}
+
+/* --- SEKCJA METRYK --- */
+.metricsSection {
+    grid-column: 1 / -1; /* Rozciągnij na obie kolumny */
+    background-color: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 12px;
+    padding: 24px;
+    margin-top: 20px;
+}
+
+.metricsHeader {
+    text-align: center;
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: 20px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* Grid głównych metryk */
+.mainMetricsGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 12px;
+    margin-bottom: 24px;
+}
+
+.metricCard {
+    border: 1px solid;
+    border-radius: 8px;
+    padding: 16px;
+    background: rgba(0, 0, 0, 0.2);
+    text-align: center;
+    transition: all 0.2s ease;
+}
+
+.metricCard:hover {
+    background: rgba(255, 255, 255, 0.05);
+    transform: translateY(-2px);
+}
+
+.metricLabel {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    margin-bottom: 8px;
+    font-weight: 500;
+}
+
+.metricValueContainer {
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+    gap: 4px;
+}
+
+.metricValueText {
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+
+.metricUnit {
+    font-size: 0.8rem;
+    font-weight: 500;
+}
+
+/* --- SEKCJA METRYK PER-CLASS --- */
+.classDetailsSection {
+    margin-top: 24px;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    padding-top: 20px;
+}
+
+.classDetailsHeader {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.7);
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    margin-bottom: 16px;
+}
+
+.classDetailsGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 12px;
+}
+
+.classMetricCard {
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 8px;
+    padding: 12px;
+}
+
+.classMetricName {
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: 8px;
+    text-transform: uppercase;
+}
+
+.classMetricValues {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.classMetricRow {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.metricValue {
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 600;
+}

io-app-front/src/components/Legend.jsx

@@ -0,0 +1,100 @@
+import { Paper, Text, Stack, Group } from '@mantine/core';
+
+// 1. Color mapping and Translation helper
+const CLASS_METADATA = {
+  'Drzewa / Las': { label: 'Trees / Forest', color: 'rgb(0, 100, 0)' },
+  'Zarośla': { label: 'Shrubland', color: 'rgb(255, 187, 34)' },
+  'Trawa / Łąki': { label: 'Grassland', color: 'rgb(255, 255, 76)' },
+  'Uprawy rolne': { label: 'Crops', color: 'rgb(240, 150, 255)' },
+  'Zabudowa': { label: 'Built area', color: 'rgb(250, 0, 0)' },
+  'Goły grunt': { label: 'Bare Ground', color: 'rgb(180, 180, 180)' },
+  'Śnieg i lód': { label: 'Snow & Ice', color: 'rgb(240, 240, 240)' },
+  'Woda': { label: 'Water', color: 'rgb(0, 100, 200)' },
+  'Tereny podmokłe': { label: 'Flooded vegetation', color: 'rgb(0, 150, 160)' },
+  'Namorzyny': { label: 'Mangroves', color: 'rgb(0, 207, 117)' },
+  'Mchy i porosty': { label: 'Moss & Lichen', color: 'rgb(250, 230, 160)' },
+  'Brak danych': { label: 'No Data', color: 'rgb(100, 100, 100)' }
+};
+
+function getMetadata(className) {
+  return CLASS_METADATA[className] || { label: className, color: '#666' };
+}
+
+// 2. Row Component
+function LegendItem({ label, percentage, color }) {
+  return (
+    <Group justify="space-between" align="center" wrap="nowrap" style={{ width: '100%' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <span style={{
+          width: 14,
+          height: 14,
+          background: color,
+          borderRadius: '3px',
+          border: '1px solid rgba(255,255,255,0.3)',
+          flexShrink: 0
+        }} />
+        <Text size="xs" c="gray.3" style={{ lineHeight: 1 }}>{label}</Text>
+      </div>
+
+      <Text size="xs" fw={700} c="white">
+        {percentage.toFixed(1)}%
+      </Text>
+    </Group>
+  );
+}
+
+// 3. Main Component
+export default function Legend({ analysisResult }) {
+  if (!analysisResult || !analysisResult.statistics) return null;
+
+  const stats = Object.values(analysisResult.statistics)
+    .filter(item => item.percentage > 0)
+    .sort((a, b) => b.percentage - a.percentage);
+
+  if (stats.length === 0) return null;
+
+  return (
+    <div style={styles.container}>
+      <Paper style={styles.glassPanel}>
+
+        <Text size="xs" fw={700} c="dimmed" tt="uppercase" mb="sm" style={{ letterSpacing: '1px' }}>
+          Legend
+        </Text>
+
+        <Stack gap={8}>
+          {stats.map((item) => {
+            const metadata = getMetadata(item.name);
+            return (
+              <LegendItem
+                key={item.name}
+                label={metadata.label}
+                percentage={item.percentage}
+                color={metadata.color}
+              />
+            );
+          })}
+        </Stack>
+
+      </Paper>
+    </div>
+  );
+}
+
+const styles = {
+  container: {
+    position: 'absolute',
+    top: '20px',
+    right: '20px',
+    zIndex: 20,
+    width: '240px',
+  },
+  glassPanel: {
+    backgroundColor: 'rgba(10, 10, 12, 0.8)',
+    backdropFilter: 'blur(40px)',
+    WebkitBackdropFilter: 'blur(40px)',
+    border: '1px solid rgba(255, 255, 255, 0.08)',
+    borderRadius: '16px',
+    boxShadow: '0 12px 48px rgba(0, 0, 0, 0.6)',
+    padding: '16px 20px',
+  }
+};

io-app-front/src/components/MapView.jsx

@@ -0,0 +1,743 @@
+// import { useEffect, useRef, useState } from 'react'
+// import maplibregl from 'maplibre-gl'
+// import mapboxgl from 'mapbox-gl'
+// import 'maplibre-gl/dist/maplibre-gl.css'
+// import 'mapbox-gl/dist/mapbox-gl.css'
+// import classes from './MapView.module.css'
+// import { Slider, Paper, Text, Group, Stack } from '@mantine/core';
+//
+// const SATELLITE_STYLE = {
+//   version: 8,
+//   sources: {
+//     'satellite-tiles': {
+//       type: 'raster',
+//       tiles: [
+//         'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
+//       ],
+//       tileSize: 256,
+//       attribution: 'Esri, Maxar, Earthstar Geographics'
+//     }
+//   },
+//   layers: [
+//     {
+//       id: 'satellite-layer',
+//       type: 'raster',
+//       source: 'satellite-tiles',
+//     }
+//   ]
+// };
+//
+// const SATELLITE_STYLE_MAPBOX = 'mapbox://styles/mapbox/satellite-streets-v12';
+//
+// function MapView({ onMapClick, analysisResult }) {
+//   const mapRef = useRef(null);
+//   const mapContainerRef = useRef(null);
+//   const markerRef = useRef(null);
+//   const [opacity, setOpacity] = useState(0.8);
+//
+//   useEffect(() => {
+//     mapRef.current = new maplibregl.Map({
+//       container: mapContainerRef.current,
+//       style: SATELLITE_STYLE,
+//       center: [20.0, 50.0],
+//       zoom: 4,
+//       maxZoom: 16
+//     });
+//
+//     mapRef.current.on('click', (e) => {
+//       const coords = e.lngLat;
+//
+//       onMapClick(coords);
+//
+//       if (markerRef.current) {
+//         markerRef.current.remove();
+//       }
+//
+//       markerRef.current = new maplibregl.Marker({
+//         color: 'red',
+//       }).setLngLat(coords).addTo(mapRef.current);
+//     });
+//
+//     return () => {
+//       if (markerRef.current) {
+//         markerRef.current.remove();
+//       }
+//
+//       mapRef.current.remove();
+//     }
+//   }, []);
+//
+//   useEffect(() => {
+//     if (!mapRef.current || !analysisResult) return;
+//
+//     const { rgb, image, lat, lon } = analysisResult; // 'image' to obraz LULC
+//     const radiusKm = analysisResult.radius_km || 5;
+//
+//     if (!rgb || !image) return;
+//
+//     // Wspólne koordynaty dla obu obrazów
+//     const coordinates = calculateBounds(lat, lon, radiusKm);
+//
+//     // Funkcja pomocnicza do czyszczenia i dodawania warstwy obrazu
+//     const updateImageLayer = (id, url, initialOpacity) => {
+//       const sourceId = `source-${id}`;
+//       const layerId = `layer-${id}`;
+//
+//       if (mapRef.current.getSource(sourceId)) {
+//         if (mapRef.current.getLayer(layerId)) mapRef.current.removeLayer(layerId);
+//         mapRef.current.removeSource(sourceId);
+//       }
+//
+//       mapRef.current.addSource(sourceId, {
+//         type: 'image',
+//         url: url,
+//         coordinates: coordinates
+//       });
+//
+//       mapRef.current.addLayer({
+//         id: layerId,
+//         type: 'raster',
+//         source: sourceId,
+//         paint: {
+//           'raster-opacity': initialOpacity,
+//           'raster-fade-duration': 0
+//         }
+//       });
+//     };
+//
+//     // A. Dodajemy RGB na spód (100% widoczności)
+//     updateImageLayer('rgb', rgb, 1);
+//
+//     // B. Dodajemy LULC na wierzch (używamy stanu opacity)
+//     updateImageLayer('lulc', image, opacity);
+//
+//     // C. Centrowanie mapy
+//     mapRef.current.flyTo({
+//       center: [lon, lat],
+//       zoom: 13,
+//       essential: true
+//     });
+//
+//   }, [analysisResult]);
+//
+//   useEffect(() => {
+//     if (!mapRef.current || !mapRef.current.getLayer('layer-lulc')) return;
+//
+//     mapRef.current.setPaintProperty('layer-lulc', 'raster-opacity', opacity);
+//   }, [opacity]);
+//
+//   return (
+//     <>
+//       <div className={ classes.mapContainer } ref={ mapContainerRef } />
+//       {analysisResult && (
+//         <div style={styles.bottomPanel}>
+//           <div style={styles.sliderContainer}>
+//             <span style={styles.label}>Satelita</span>
+//
+//             <input
+//               type="range"
+//               min="0"
+//               max="1"
+//               step="0.01"
+//               value={opacity}
+//               onChange={(e) => setOpacity(parseFloat(e.target.value))}
+//               style={styles.slider}
+//             />
+//
+//             <span style={styles.label}>Analiza ({Math.round(opacity * 100)}%)</span>
+//           </div>
+//         </div>
+//       )}
+//     </>
+//
+//   )
+// }
+//
+// function calculateBounds(centerLat, centerLng, radiusKm) {
+//   const R = 6378137; // Promień Ziemi (Sphere Mercator)
+//
+//   // 1. Obliczamy ten sam Scale Factor co w Pythonie
+//   const scaleFactor = 1.0 / Math.cos(centerLat * Math.PI / 180);
+//
+//   // 2. Przeliczamy promień na metry Mercatora
+//   const mercatorExtent = (radiusKm * 1000) * scaleFactor;
+//
+//   // 3. Konwersja środka na metry X/Y
+//   const x = centerLng * (Math.PI / 180) * R;
+//   const latRad = centerLat * (Math.PI / 180);
+//   const y = Math.log(Math.tan((Math.PI / 4) + (latRad / 2))) * R;
+//
+//   // 4. Wyznaczamy rogi w metrach Mercatora
+//   const minX = x - mercatorExtent;
+//   const maxX = x + mercatorExtent;
+//   const minY = y - mercatorExtent;
+//   const maxY = y + mercatorExtent;
+//
+//   // 5. Powrót na stopnie
+//   const toLng = (mercX) => (mercX / R) * (180 / Math.PI);
+//   const toLat = (mercY) => {
+//     const rad = (2 * Math.atan(Math.exp(mercY / R))) - (Math.PI / 2);
+//     return rad * (180 / Math.PI);
+//   };
+//
+//   return [
+//     [toLng(minX), toLat(maxY)], // NW
+//     [toLng(maxX), toLat(maxY)], // NE
+//     [toLng(maxX), toLat(minY)], // SE
+//     [toLng(minX), toLat(minY)]  // SW
+//   ];
+// }
+//
+// // --- STYLE DLA SUWAKA ---
+// const styles = {
+//   bottomPanel: {
+//     position: 'absolute',
+//     bottom: '30px',
+//     left: '50%',
+//     transform: 'translateX(-50%)',
+//     width: '320px',
+//     backgroundColor: 'rgba(255, 255, 255, 0.9)',
+//     padding: '15px 20px',
+//     borderRadius: '12px',
+//     zIndex: 10,
+//     backdropFilter: 'blur(5px)',
+//     boxShadow: '0 4px 20px rgba(0,0,0,0.2)',
+//     border: '1px solid rgba(255,255,255,0.5)'
+//   },
+//   sliderContainer: {
+//     display: 'flex',
+//     alignItems: 'center',
+//     justifyContent: 'space-between',
+//     gap: '10px'
+//   },
+//   slider: {
+//     flexGrow: 1,
+//     cursor: 'pointer',
+//     accentColor: '#007AFF'
+//   },
+//   label: {
+//     fontWeight: '600',
+//     fontSize: '13px',
+//     color: '#333',
+//     minWidth: '50px',
+//     textAlign: 'center'
+//   }
+// };
+//
+// export default MapView
+//
+
+// import { useEffect, useRef, useState } from 'react';
+// import maplibregl from 'maplibre-gl';
+// import mapboxgl from 'mapbox-gl'
+// import 'maplibre-gl/dist/maplibre-gl.css';
+// import classes from './MapView.module.css';
+// import 'mapbox-gl/dist/mapbox-gl.css'
+// import { Slider, Paper, Text, Group, Stack } from '@mantine/core';
+// import Legend from './Legend'
+//
+// const SATELLITE_STYLE = {
+//   version: 8,
+//   sources: {
+//     'satellite-tiles': {
+//       type: 'raster',
+//       tiles: [
+//         'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
+//       ],
+//       tileSize: 256,
+//       attribution: 'Esri, Maxar, Earthstar Geographics'
+//     }
+//   },
+//   layers: [
+//     {
+//       id: 'satellite-layer',
+//       type: 'raster',
+//       source: 'satellite-tiles',
+//     }
+//   ]
+// };
+//
+// const ACCESS_TOKEN = mapboxgl.accessToken = 'pk.eyJ1IjoiamFucGllY2hvdGEiLCJhIjoiY21rZzUyeW50MDJmdzNjc2MyYWUwZmcwMyJ9.G3jH0_FyGPoxtUxe0ZcfJA';
+//
+// const SATELLITE_STYLE_MAPBOX = 'mapbox://styles/mapbox/satellite-streets-v12';
+//
+// function MapView({ onMapClick, analysisResult, selectedLocation }) {
+//   const mapRef = useRef(null);
+//   const mapContainerRef = useRef(null);
+//   const markerRef = useRef(null);
+//
+//   const [opacity, setOpacity] = useState(0.5);
+//
+//   const handleFocusAnalysis = () => {
+//     if (mapRef.current && analysisResult) {
+//       mapRef.current.flyTo({
+//         center: [analysisResult.lon, analysisResult.lat],
+//         zoom: 12,
+//         duration: 2000,
+//         essential: true
+//       });
+//     }
+//   };
+//
+//   useEffect(() => {
+//     if (mapRef.current) return;
+//
+//     mapRef.current = new mapboxgl.Map({
+//       container: mapContainerRef.current,
+//       style: SATELLITE_STYLE_MAPBOX,
+//       center: [20.0, 50.0],
+//       zoom: 4,
+//       projection: 'globe'
+//     });
+//
+//     mapRef.current.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
+//
+//     mapRef.current.on('style.load', () => {
+//       // Pobieramy wszystkie warstwy obecne w stylu
+//       const layers = mapRef.current.getStyle().layers;
+//
+//       layers.forEach((layer) => {
+//         // Sprawdzamy, czy nazwa warstwy sugeruje, że to droga/ulica
+//         const isRoad = layer.id.includes('road') ||
+//           layer.id.includes('bridge') ||
+//           layer.id.includes('tunnel') ||
+//           layer.id.includes('highway');
+//
+//         if (isRoad) {
+//           mapRef.current.setLayoutProperty(layer.id, 'visibility', 'none');
+//         }
+//       });
+//     });
+//
+//     mapRef.current.on('click', (e) => {
+//       const coords = e.lngLat;
+//       onMapClick(coords);
+//     });
+//   }, []);
+//
+//   useEffect(() => {
+//     if (!mapRef.current) return;
+//
+//     // Sytuacja A: Brak lokalizacji (np. wyczyszczono stan) -> usuń pinezkę
+//     if (!selectedLocation) {
+//       if (markerRef.current) {
+//         markerRef.current.remove();
+//         markerRef.current = null;
+//       }
+//       return;
+//     }
+//
+//     // --- LOGIKA RUCHU KAMERY (zawsze lecimy do punktu) ---
+//     mapRef.current.flyTo({
+//       center: [selectedLocation.lng, selectedLocation.lat],
+//       zoom: 13,
+//       essential: true
+//     });
+//
+//     // --- LOGIKA PINEZKI (MARKERA) ---
+//     // Jeśli lokalizacja pochodzi z wyszukiwarki (ma flagę isSearch), NIE stawiamy pinezki.
+//     // Pinezkę stawiamy tylko przy kliknięciu myszką (wtedy isSearch jest undefined/false).
+//
+//     if (selectedLocation.isSearch) {
+//       // Jeśli była jakaś stara pinezka, usuwamy ją, żeby nie myliła
+//       if (markerRef.current) {
+//         markerRef.current.remove();
+//         markerRef.current = null;
+//       }
+//     } else {
+//       // To jest kliknięcie ręczne -> stawiamy/przesuwamy pinezkę
+//       if (markerRef.current) {
+//         markerRef.current.setLngLat([selectedLocation.lng, selectedLocation.lat]);
+//       } else {
+//         markerRef.current = new mapboxgl.Marker({ color: 'red' })
+//           .setLngLat([selectedLocation.lng, selectedLocation.lat])
+//           .addTo(mapRef.current);
+//       }
+//     }
+//
+//   }, [selectedLocation]);
+//
+//   useEffect(() => {
+//     if (!mapRef.current || !analysisResult) return;
+//
+//     const { rgb, image, lat, lon } = analysisResult;
+//     const radiusKm = analysisResult.radius_km || 5;
+//
+//     if (!rgb || !image) return;
+//
+//     if (markerRef.current) {
+//       markerRef.current.remove();
+//       markerRef.current = null;
+//     }
+//
+//     const coordinates = calculateBounds(lat, lon, radiusKm);
+//
+//     const updateImageLayer = (id, url, initialOpacity) => {
+//       const sourceId = `source-${id}`;
+//       const layerId = `layer-${id}`;
+//
+//       if (mapRef.current.getSource(sourceId)) {
+//         if (mapRef.current.getLayer(layerId)) mapRef.current.removeLayer(layerId);
+//         mapRef.current.removeSource(sourceId);
+//       }
+//
+//       mapRef.current.addSource(sourceId, {
+//         type: 'image',
+//         url: url,
+//         coordinates: coordinates
+//       });
+//
+//       mapRef.current.addLayer({
+//         id: layerId,
+//         type: 'raster',
+//         source: sourceId,
+//         paint: {
+//           'raster-opacity': initialOpacity,
+//           'raster-fade-duration': 0,
+//         }
+//       });
+//     };
+//
+//     updateImageLayer('rgb', rgb, 1);
+//     updateImageLayer('lulc', image, opacity);
+//
+//     mapRef.current.flyTo({
+//       center: [lon, lat],
+//       zoom: 11,
+//       essential: true
+//     });
+//
+//   }, [analysisResult]);
+//
+//   useEffect(() => {
+//     if (!mapRef.current || !mapRef.current.getLayer('layer-lulc')) return;
+//     mapRef.current.setPaintProperty('layer-lulc', 'raster-opacity', opacity);
+//   }, [opacity]);
+//
+//   return (
+//     <>
+//       <div className={classes.mapContainer} ref={mapContainerRef} />
+//
+//       {/* --- LEGENDA (PRAWY GÓRNY RÓG) --- */}
+//       {/* Wyświetlamy tylko, gdy mamy wyniki analizy */}
+//       {analysisResult && (
+//         <Legend analysisResult={analysisResult} />
+//       )}
+//
+//       {/* --- PANEL SUWAKA (DÓŁ) --- */}
+//       {analysisResult && (
+//         <div style={styles.floatingContainer}>
+//           <Paper style={styles.glassPanel}>
+//             <Stack gap={6}>
+//               {/* ... (Twój kod slidera bez zmian) ... */}
+//               <Group justify="space-between" align="center">
+//                 <Text size="xs" fw={700} c="dimmed" tt="uppercase" style={{ letterSpacing: '1px' }}>
+//                   Przezroczystość
+//                 </Text>
+//                 <Text size="md" c="blue.4" fw={700}>
+//                   {Math.round(opacity * 100)}%
+//                 </Text>
+//               </Group>
+//
+//               <Slider
+//                 // ... propsy slidera ...
+//                 value={opacity * 100}
+//                 onChange={(val) => setOpacity(val / 100)}
+//                 min={0}
+//                 max={100}
+//                 label={null}
+//                 color="blue"
+//                 size="xl"
+//                 thumbSize={24}
+//                 style={{ width: '100%' }}
+//                 styles={{ track: { backgroundColor: 'rgba(255,255,255,0.1)' } }}
+//               />
+//
+//               <Group justify="space-between">
+//                 <Text size="10px" c="dimmed">Satelita</Text>
+//                 <Text size="10px" c="dimmed">Analiza</Text>
+//               </Group>
+//
+//             </Stack>
+//           </Paper>
+//         </div>
+//       )}
+//     </>
+//   );
+// }
+//
+// function calculateBounds(centerLat, centerLng, radiusKm) {
+//   const R = 6378137;
+//   const scaleFactor = 1.0 / Math.cos(centerLat * Math.PI / 180);
+//   const mercatorExtent = (radiusKm * 1000) * scaleFactor;
+//   const x = centerLng * (Math.PI / 180) * R;
+//   const latRad = centerLat * (Math.PI / 180);
+//   const y = Math.log(Math.tan((Math.PI / 4) + (latRad / 2))) * R;
+//
+//   const minX = x - mercatorExtent;
+//   const maxX = x + mercatorExtent;
+//   const minY = y - mercatorExtent;
+//   const maxY = y + mercatorExtent;
+//
+//   const toLng = (mercX) => (mercX / R) * (180 / Math.PI);
+//   const toLat = (mercY) => {
+//     const rad = (2 * Math.atan(Math.exp(mercY / R))) - (Math.PI / 2);
+//     return rad * (180 / Math.PI);
+//   };
+//
+//   return [
+//     [toLng(minX), toLat(maxY)],
+//     [toLng(maxX), toLat(maxY)],
+//     [toLng(maxX), toLat(minY)],
+//     [toLng(minX), toLat(minY)]
+//   ];
+// }
+//
+// const styles = {
+//   floatingContainer: {
+//     position: 'absolute',
+//     bottom: '40px',
+//     left: '50%',
+//     transform: 'translateX(-50%)',
+//     width: '600px',
+//     zIndex: 20,
+//   },
+//   glassPanel: {
+//     backgroundColor: 'rgba(10, 10, 12, 0.8)',
+//     backdropFilter: 'blur(40px)',
+//     WebkitBackdropFilter: 'blur(40px)',
+//     border: '1px solid rgba(255, 255, 255, 0.08)',
+//     borderRadius: '16px',
+//     boxShadow: '0 12px 48px rgba(0, 0, 0, 0.6)',
+//     padding: '16px 24px',
+//   }
+// };
+//
+// export default MapView;
+
+import { useEffect, useRef, useState } from 'react';
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import classes from './MapView.module.css';
+import { Slider, Paper, Text, Group, Stack } from '@mantine/core';
+import Legend from './Legend';
+
+const SATELLITE_STYLE_MAPBOX = 'mapbox://styles/mapbox/satellite-streets-v12';
+
+const getImageByPath = (result, path) => {
+  if (!result || !path) return null;
+  if (path.startsWith('masks.')) {
+    const maskKey = path.split('.')[1];
+    return result.masks ? result.masks[maskKey] : null;
+  }
+  return result[path];
+};
+
+function MapView({ onMapClick, analysisResult, selectedLocation, layersConfig }) {
+  const mapRef = useRef(null);
+  const mapContainerRef = useRef(null);
+  const markerRef = useRef(null);
+  const [localOpacity, setLocalOpacity] = useState(0.8);
+
+  // 1. INICJALIZACJA MAPY
+  useEffect(() => {
+    if (mapRef.current) return;
+
+    // Ustaw token dostępu Mapbox
+    mapboxgl.accessToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN;
+
+    mapRef.current = new mapboxgl.Map({
+      container: mapContainerRef.current,
+      style: SATELLITE_STYLE_MAPBOX,
+      center: [20.0, 50.0],
+      zoom: 4,
+      projection: 'globe'
+    });
+
+    mapRef.current.addControl(new mapboxgl.NavigationControl(), 'bottom-right');
+
+    // Usunięto pętlę ukrywającą drogi, aby zachować kontekst na wierzchu
+
+    mapRef.current.on('click', (e) => {
+      onMapClick(e.lngLat);
+    });
+  }, []);
+
+  // 2. OBSŁUGA PINEZKI I RUCHU KAMERY
+  useEffect(() => {
+    if (!mapRef.current) return;
+    if (!selectedLocation) {
+      if (markerRef.current) {
+        markerRef.current.remove();
+        markerRef.current = null;
+      }
+      return;
+    }
+
+    mapRef.current.flyTo({
+      center: [selectedLocation.lng, selectedLocation.lat],
+      zoom: 13,
+      essential: true
+    });
+
+    if (selectedLocation.isSearch) {
+      if (markerRef.current) {
+        markerRef.current.remove();
+        markerRef.current = null;
+      }
+    } else {
+      if (markerRef.current) {
+        markerRef.current.setLngLat([selectedLocation.lng, selectedLocation.lat]);
+      } else {
+        markerRef.current = new mapboxgl.Marker({ color: 'red' })
+          .setLngLat([selectedLocation.lng, selectedLocation.lat])
+          .addTo(mapRef.current);
+      }
+    }
+  }, [selectedLocation]);
+
+  // 3. OBSŁUGA DWÓCH WARSTW ANALIZY
+  useEffect(() => {
+    if (!mapRef.current || !analysisResult || !layersConfig) return;
+
+    const radiusKm = analysisResult.radius_km || 5;
+    const coordinates = calculateBounds(analysisResult.lat, analysisResult.lon, radiusKm);
+
+    const updateLayer = (id, layerKey, currentOpacity) => {
+      const sourceId = `source-${id}`;
+      const layerId = `layer-${id}`;
+      const imageData = getImageByPath(analysisResult, layersConfig[layerKey]);
+
+      if (mapRef.current.getSource(sourceId)) {
+        if (mapRef.current.getLayer(layerId)) mapRef.current.removeLayer(layerId);
+        mapRef.current.removeSource(sourceId);
+      }
+
+      if (imageData) {
+        mapRef.current.addSource(sourceId, {
+          type: 'image',
+          url: imageData,
+          coordinates: coordinates
+        });
+
+        // --- DYNAMIZACJA WARSTW (NAZWY NA WIERZCHU) ---
+        // Szukamy ID pierwszej warstwy z napisami (typ 'symbol')
+        const layers = mapRef.current.getStyle().layers;
+        let firstLabelId;
+        for (const layer of layers) {
+          if (layer.type === 'symbol') {
+            firstLabelId = layer.id;
+            break;
+          }
+        }
+
+        mapRef.current.addLayer({
+          id: layerId,
+          type: 'raster',
+          source: sourceId,
+          paint: {
+            'raster-opacity': currentOpacity,
+            'raster-fade-duration': 800,
+          }
+        }, firstLabelId); // Wstawienie POD etykiety
+      }
+    };
+
+    updateLayer('first', 'firstLayer', 1);
+    updateLayer('second', 'secondLayer', localOpacity);
+
+  }, [analysisResult, layersConfig.firstLayer, layersConfig.secondLayer]);
+
+  // 4. AKTUALIZACJA PRZEZROCZYSTOŚCI
+  useEffect(() => {
+    if (mapRef.current?.getLayer('layer-second')) {
+      mapRef.current.setPaintProperty('layer-second', 'raster-opacity', localOpacity);
+    }
+  }, [localOpacity]);
+
+  return (
+    <>
+      <div className={classes.mapContainer} ref={mapContainerRef} />
+      {analysisResult && <Legend analysisResult={analysisResult} />}
+      {analysisResult && (
+        <div style={styles.floatingContainer}>
+          <Paper style={styles.glassPanel}>
+            <Stack gap={6}>
+              <Group justify="space-between" align="center">
+                <Text size="xs" fw={700} c="dimmed" tt="uppercase" style={{ letterSpacing: '1px' }}>
+                  Overlay Opacity
+                </Text>
+                <Text size="md" c="blue.4" fw={700}>
+                  {Math.round(localOpacity * 100)}%
+                </Text>
+              </Group>
+
+              <Slider
+                value={localOpacity * 100}
+                onChange={(val) => setLocalOpacity(val / 100)}
+                min={0}
+                max={100}
+                label={null}
+                color="blue"
+                size="xl"
+                thumbSize={24}
+                style={{ width: '100%' }}
+                styles={{ track: { backgroundColor: 'rgba(255,255,255,0.1)' } }}
+              />
+
+              <Group justify="space-between">
+                <Text size="10px" c="dimmed">RGB Context</Text>
+                <Text size="10px" c="dimmed">Classification Layer</Text>
+              </Group>
+            </Stack>
+          </Paper>
+        </div>
+      )}
+    </>
+  );
+}
+
+// Funkcja calculateBounds i style pozostają bez zmian
+function calculateBounds(centerLat, centerLng, radiusKm) {
+  const R = 6378137;
+  const scaleFactor = 1.0 / Math.cos(centerLat * Math.PI / 180);
+  const mercatorExtent = (radiusKm * 1000) * scaleFactor;
+  const x = centerLng * (Math.PI / 180) * R;
+  const latRad = centerLat * (Math.PI / 180);
+  const y = Math.log(Math.tan((Math.PI / 4) + (latRad / 2))) * R;
+
+  const minX = x - mercatorExtent;
+  const maxX = x + mercatorExtent;
+  const minY = y - mercatorExtent;
+  const maxY = y + mercatorExtent;
+
+  const toLng = (mercX) => (mercX / R) * (180 / Math.PI);
+  const toLat = (mercY) => (2 * Math.atan(Math.exp(mercY / R)) - Math.PI / 2) * (180 / Math.PI);
+
+  return [
+    [toLng(minX), toLat(maxY)], [toLng(maxX), toLat(maxY)],
+    [toLng(maxX), toLat(minY)], [toLng(minX), toLat(minY)]
+  ];
+}
+
+const styles = {
+  floatingContainer: {
+    position: 'absolute',
+    bottom: '40px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    width: '600px',
+    zIndex: 20,
+  },
+  glassPanel: {
+    backgroundColor: 'rgba(10, 10, 12, 0.8)',
+    backdropFilter: 'blur(40px)',
+    WebkitBackdropFilter: 'blur(40px)',
+    border: '1px solid rgba(255, 255, 255, 0.08)',
+    borderRadius: '16px',
+    boxShadow: '0 12px 48px rgba(0, 0, 0, 0.6)',
+    padding: '16px 24px',
+  }
+};
+
+export default MapView;

io-app-front/src/components/MapView.module.css

@@ -0,0 +1,8 @@
+.mapContainer {
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+}
+
+
+

io-app-front/src/components/SearchBar.jsx

@@ -0,0 +1,204 @@
+// import { useState, useEffect } from 'react'
+// import { useDebouncedValue } from '@mantine/hooks'
+// import axios from 'axios'
+// import { Autocomplete } from '@mantine/core'
+// import classes from './SearchBar.module.css'
+//
+// function SearchBar({ onLocationSelect }) {
+//   const [inputValue, setInputValue] = useState('');
+//   const [suggestions, setSuggestions] = useState([]);
+//
+//   const [debouncedValue] = useDebouncedValue(inputValue, 400);
+//
+//   useEffect(() => {
+//     if (!debouncedValue || debouncedValue.length < 3) {
+//       setSuggestions([]);
+//       return;
+//     }
+//
+//     const fetchSuggestions = async () => {
+//       try {
+//         const response = await axios.get('https://photon.komoot.io/api/', {
+//           params: {
+//             q: debouncedValue,
+//             limit: 5,
+//             lang: 'pl'
+//           }
+//         });
+//
+//         const features = response.data.features;
+//
+//         const formattedData = features.map((f) => {
+//           const { name, street, city, country } = f.properties;
+//           const label = [name, street, city, country].filter(Boolean).join(', ');
+//
+//           return {
+//             value: label,
+//             label: label,
+//             coords: f.geometry.coordinates,
+//           }
+//         });
+//
+//         setSuggestions(formattedData);
+//       } catch (error) {
+//         console.error(error);
+//       }
+//     }
+//
+//     fetchSuggestions().catch(console.error);
+//   }, [debouncedValue]);
+//
+//   const handleOptionSubmit = (val) => {
+//     const selected = suggestions.find((opt) => opt.value === val);
+//     if (selected) {
+//       onLocationSelect({
+//         lng: selected.coords[0],
+//         lat: selected.coords[1],
+//         address: selected.value
+//       });
+//     }
+//   };
+//
+//   return (
+//     <Autocomplete
+//       placeholder="Search location"
+//       value={ inputValue }
+//       onChange={setInputValue}
+//       data={suggestions}
+//       onOptionSubmit={handleOptionSubmit}
+//     />
+//   )
+// }
+//
+// export default SearchBar
+
+import { useState, useEffect } from 'react';
+import { Autocomplete, Loader } from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
+import { IconSearch } from '@tabler/icons-react'; // Odkomentuj jeśli masz ikony
+
+function SearchBar({ onLocationSelect }) {
+  const [value, setValue] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState([]);
+
+  // Opóźnienie 400ms
+  const [debounced] = useDebouncedValue(value, 400);
+
+  useEffect(() => {
+    // 1. Strażnik
+    if (!debounced || debounced.trim().length < 3) {
+      setData([]);
+      setLoading(false);
+      return;
+    }
+
+    const controller = new AbortController();
+
+    const fetchLocations = async () => {
+      setLoading(true);
+      console.log(`📡 Szukam w Open-Meteo: "${debounced}"...`);
+
+      try {
+        // ZMIANA API NA OPEN-METEO
+        const query = encodeURIComponent(debounced);
+        const url = `https://geocoding-api.open-meteo.com/v1/search?name=${query}&count=5&language=en&format=json`;
+
+        const response = await fetch(url, { signal: controller.signal });
+
+        if (!response.ok) {
+          throw new Error(`HTTP Error! status: ${response.status}`);
+        }
+
+        const jsonData = await response.json();
+
+        const results = jsonData.results || [];
+
+// Używamy Map, aby zachować tylko unikalne nazwy (value)
+        const uniqueMap = new Map();
+
+        results.forEach((item) => {
+          const label = [item.name, item.admin1, item.country]
+            .filter(Boolean)
+            .join(', ');
+
+          // Jeśli etykieta już istnieje, Map jej nie nadpisze (lub nadpisze nowszą)
+          // Kluczem jest label, wartością jest obiekt opcji
+          if (!uniqueMap.has(label)) {
+            uniqueMap.set(label, {
+              value: label,
+              lat: item.latitude,
+              lng: item.longitude,
+              rawName: item.name
+            });
+          }
+        });
+
+        const formattedData = Array.from(uniqueMap.values());
+
+        setData(formattedData);
+
+      } catch (error) {
+        if (error.name !== 'AbortError') {
+          console.error("❌ Błąd wyszukiwania:", error);
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchLocations();
+
+    return () => {
+      controller.abort();
+    };
+  }, [debounced]);
+
+  const handleSelect = (val) => {
+    const selected = data.find((item) => item.value === val);
+    if (selected && onLocationSelect) {
+      console.log("✅ Wybrano:", selected);
+
+      // ZMIANA TUTAJ: Przekazujemy obiekt z flagą isSearch: true
+      onLocationSelect({
+        ...selected,
+        isSearch: true // <--- To jest kluczowa flaga
+      });
+
+      setValue(selected.value);
+    }
+  };
+
+  return (
+    <Autocomplete
+      value={value}
+      onChange={setValue}
+      onOptionSubmit={handleSelect}
+      data={data}
+      placeholder="Search city..."
+      rightSection={loading ? <Loader size="xs" /> : null}
+      leftSection={<IconSearch size={16} />}
+
+      comboboxProps={{ zIndex: 10000, withinPortal: true }}
+
+      styles={{
+        input: {
+          backgroundColor: '#25262b',
+          color: '#fff',
+          borderColor: '#373A40',
+        },
+        dropdown: {
+          backgroundColor: '#25262b',
+          borderColor: '#373A40',
+          color: '#fff'
+        },
+        option: {
+          color: '#C1C2C5',
+          '&:hover': { backgroundColor: '#2C2E33' }
+        }
+      }}
+    />
+  );
+}
+
+export default SearchBar;

io-app-front/src/components/SearchFilters.jsx

@@ -0,0 +1,219 @@
+// import React, { useState } from 'react';
+//
+// export default function SearchFilters({
+//                                         cloudCover,     // Traktujemy to jako wartość początkową (Initial Value)
+//                                         setCloudCover,  // Funkcja wywoływana przy zmianie (Callback)
+//                                         radius,         // Wartość początkowa
+//                                         setRadius       // Callback
+//                                       }) {
+//
+//   // 1. Tworzymy LOKALNY stan, inicjowany wartościami od rodzica
+//   const [localCloud, setLocalCloud] = useState(cloudCover);
+//   const [localRadius, setLocalRadius] = useState(radius);
+//
+//   // 2. Handlery obsługujące zmianę
+//   const handleCloudChange = (e) => {
+//     const val = parseInt(e.target.value);
+//     setLocalCloud(val); // Aktualizujemy wygląd suwaka i liczbę natychmiast
+//     setCloudCover(val); // Wysyłamy informację do rodzica (Sidebar/App)
+//   };
+//
+//   const handleRadiusChange = (e) => {
+//     const val = parseInt(e.target.value);
+//     setLocalRadius(val);
+//     setRadius(val);
+//   };
+//
+//   return (
+//     <div style={styles.panel}>
+//
+//       {/* --- SEKCJA 1: MAX ZACHMURZENIE --- */}
+//       <div style={styles.section}>
+//         <div style={styles.header}>
+//           <span>☁️ Max Zachmurzenie</span>
+//           {/* Wyświetlamy LOKALNĄ wartość */}
+//           <span style={styles.value}>{localCloud}%</span>
+//         </div>
+//         <input
+//           type="range"
+//           min="0"
+//           max="100"
+//           step="1"
+//           // Suwak jest kontrolowany przez ten komponent (lokalnie), a nie przez rodzica
+//           value={localCloud}
+//           onChange={handleCloudChange}
+//           style={styles.slider}
+//           className="custom-range-slider"
+//         />
+//       </div>
+//
+//       <div style={styles.divider} />
+//
+//       {/* --- SEKCJA 2: ODLEGŁOŚĆ / PROMIEŃ --- */}
+//       <div style={styles.section}>
+//         <div style={styles.header}>
+//           <span>📏 Odległość analizy</span>
+//           <span style={styles.value}>{localRadius} km</span>
+//         </div>
+//         <input
+//           type="range"
+//           min="1"
+//           max="20"
+//           step="1"
+//           value={localRadius}
+//           onChange={handleRadiusChange}
+//           style={styles.slider}
+//           className="custom-range-slider"
+//         />
+//       </div>
+//
+//     </div>
+//   );
+// }
+//
+// const styles = {
+//   panel: {
+//     position: 'absolute',
+//     top: '80px',
+//     left: '20px',
+//     width: '300px',
+//     backgroundColor: 'rgba(255, 255, 255, 0.9)',
+//     backdropFilter: 'blur(10px)',
+//     borderRadius: '12px',
+//     padding: '15px',
+//     boxShadow: '0 4px 15px rgba(0,0,0,0.1)',
+//     zIndex: 40,
+//     display: 'flex',
+//     flexDirection: 'column',
+//     gap: '10px'
+//   },
+//   section: {
+//     display: 'flex',
+//     flexDirection: 'column',
+//     gap: '5px'
+//   },
+//   header: {
+//     display: 'flex',
+//     justifyContent: 'space-between',
+//     fontSize: '13px',
+//     fontWeight: '600',
+//     color: '#444',
+//     marginBottom: '4px'
+//   },
+//   value: {
+//     color: '#007AFF',
+//     fontWeight: 'bold'
+//   },
+//   slider: {
+//     width: '100%',
+//     cursor: 'pointer'
+//   },
+//   divider: {
+//     height: '1px',
+//     backgroundColor: '#eee',
+//     margin: '5px 0'
+//   }
+// };
+
+import React from 'react';
+import { Slider, Select, NumberInput, Text, Stack } from '@mantine/core';
+
+export default function SearchFilters({ values, onChange }) {
+
+  // Funkcja pomocnicza do szybszej aktualizacji stanu
+  const handleChange = (key, val) => {
+    onChange(key, val);
+  };
+
+  return (
+      <Stack gap="md">
+
+        {/* 1. SUWAK: Max Zachmurzenie */}
+        <div>
+          <div style={styles.header}>
+            <Text size="sm" fw={600} c="dimmed">Max Cloud Cover</Text>
+            <Text size="sm" fw={700} c="blue">{values.cloudCover}%</Text>
+          </div>
+          <Slider
+            value={values.cloudCover}
+            onChange={(val) => handleChange('cloudCover', val)}
+            min={0}
+            max={100}
+            step={1}
+            label={null} // Wyłączamy dymek, bo wartość jest w nagłówku
+            size="sm"
+          />
+        </div>
+
+        {/* 2. SUWAK: Promień analizy */}
+        <div>
+          <div style={styles.header}>
+            <Text size="sm" fw={600} c="dimmed">Analysis Radius</Text>
+            <Text size="sm" fw={700} c="blue">{values.radius} km</Text>
+          </div>
+          <Slider
+            value={values.radius}
+            onChange={(val) => handleChange('radius', val)}
+            min={1}
+            max={10}
+            step={1}
+            label={null}
+            size="sm"
+          />
+        </div>
+
+        {/* 3. INPUT: Zakres dni */}
+        <NumberInput
+          label="Time Range (days back)"
+          placeholder="Np. 30"
+          value={values.daysRange}
+          onChange={(val) => handleChange('daysRange', val)}
+          min={1}
+          max={365}
+          size="sm"
+          // Stylizacja etykiety, żeby pasowała do reszty
+          styles={{ label: { fontSize: '13px', fontWeight: 600, color: '#868e96' } }}
+        />
+
+        {/* 4. DROPDOWN: Wybór modelu */}
+        <Select
+          label="Model Version"
+          placeholder="Select model version"
+          data={[
+            { value: 'terramind_v1_large_generate', label: 'Terramind v1 Large' },
+            { value: 'terramind_v1_medium_generate', label: 'Terramind v1 Medium' },
+            { value: 'terramind_v1_small_generate', label: 'Terramind v1 Small' },
+            { value: 'terramind_v1_tiny_generate', label: 'Terramind v1 Tiny' },
+          ]}
+          value={values.model}
+          onChange={(val) => handleChange('model', val)}
+          size="sm"
+          styles={{ label: { fontSize: '13px', fontWeight: 600, color: '#868e96' } }}
+        />
+
+      </Stack>
+  );
+}
+
+// Style CSS-in-JS (zaktualizowane pod Mantine)
+const styles = {
+  panel: {
+    position: 'absolute',
+    top: '20px',    // Przesunąłem wyżej, żeby nie zasłaniało mapy
+    right: '20px',  // Zmieniłem na prawą stronę (standard dla paneli opcji), ale możesz dać left
+    width: '320px',
+    backgroundColor: 'rgba(30, 31, 48, 0.95)', // Ciemne tło (skoro masz ciemny motyw)
+    backdropFilter: 'blur(12px)',
+    borderRadius: '12px',
+    padding: '20px',
+    boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
+    border: '1px solid rgba(255,255,255,0.1)', // Subtelna ramka
+    zIndex: 1000,
+  },
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginBottom: '8px',
+    alignItems: 'center'
+  }
+};

io-app-front/src/components/Sidebar.jsx

@@ -0,0 +1,220 @@
+import { useState } from 'react';
+import axios from 'axios';
+import SearchFilters from './SearchFilters';
+import SearchBar from './SearchBar';
+import CompareModal from './CompareModal';
+import classes from './Sidebar.module.css';
+import { Divider, Title, Text, Stack, Select, Button, Group } from '@mantine/core';
+import { IconArrowsLeftRight, IconPlayerPlay, IconMapPin } from '@tabler/icons-react';
+
+function Sidebar({
+                   selectedLocation,
+                   onAnalysisComplete,
+                   onLocationSelect,
+                   layersConfig,
+                   onLayersChange,
+                   analysisResult
+                 }) {
+  // Stan filtrów i wybranego modelu
+  const [filters, setFilters] = useState({
+    cloudCover: 20,
+    radius: 5,
+    daysRange: 60,
+    model: 'terramind_v1_large_generate'
+  });
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [compareOpened, setCompareOpened] = useState(false);
+  const [comparisonData, setComparisonData] = useState(null);
+
+  const layerOptions = [
+    { group: 'Main Images', items: [
+        { label: 'Satellite (RGB)', value: 'rgb' },
+        { label: 'Classification (LULC)', value: 'image' },
+        { label: 'Raw Segmentation', value: 'raw_segmentation' }
+      ]},
+    { group: 'Spectral Indices (Masks)', items: [
+        { label: 'Vegetation (NDVI)', value: 'masks.vegetation_ndvi' },
+        { label: 'Water (NDWI)', value: 'masks.water_ndwi' },
+        { label: 'Buildings (NDBI)', value: 'masks.buildings_ndbi' },
+        { label: 'Bare Soil (BSI)', value: 'masks.baresoil_bsi' }
+      ]}
+  ];
+
+  const handleLayerChange = (layerKey, value) => {
+    onLayersChange(prev => ({ ...prev, [layerKey]: value }));
+  };
+
+  const handleFilterChange = (key, value) => {
+    setFilters(prev => ({ ...prev, [key]: value }));
+  };
+
+  // --- ANALIZA POJEDYNCZA (Wynik na mapę) ---
+  const handleAnalyze = async () => {
+    if (!selectedLocation || selectedLocation.isSearch) return;
+    setIsLoading(true);
+
+    const payload = {
+      location: { lat: selectedLocation.lat, lng: selectedLocation.lng },
+      params: {
+        bufferKm: filters.radius,
+        maxCloudCover: filters.cloudCover,
+        daysBack: filters.daysRange,
+        model: filters.model
+      }
+    };
+
+    try {
+      const response = await axios.post('http://127.0.0.1:5000/api/analyze', payload);
+      if (response.data.success && onAnalysisComplete) {
+        onAnalysisComplete(response.data);
+      } else {
+        alert("Błąd serwera: " + (response.data.error || "Nieznany błąd"));
+      }
+    } catch (error) {
+      console.error("❌ Błąd połączenia:", error);
+      alert("Błąd połączenia z backendem Flask.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // --- ANALIZA PORÓWNAWCZA (Wyniki do modala) ---
+  const handleRunCompare = async (modelA, modelB) => {
+    if (!selectedLocation || selectedLocation.isSearch) return;
+    setIsLoading(true);
+    setComparisonData(null);
+
+    const baseParams = {
+      bufferKm: filters.radius,
+      maxCloudCover: filters.cloudCover,
+      daysBack: filters.daysRange,
+    };
+
+    try {
+      // JEDNO żądanie do /api/advanced-analyze z oboma modelami
+      const response = await axios.post('http://127.0.0.1:5000/api/advanced-analyze', {
+        location: { lat: selectedLocation.lat, lng: selectedLocation.lng },
+        params: { ...baseParams, modelA: modelA, modelB: modelB }
+      });
+
+      if (response.data.success) {
+        setComparisonData({
+          modelA: response.data.modelA,
+          modelB: response.data.modelB,
+          metrics: response.data.metrics
+        });
+      }
+    } catch (error) {
+      console.error("❌ Błąd porównania:", error);
+      alert("Wystąpił błąd podczas analizy porównawczej.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const isLocationReady = selectedLocation && !selectedLocation.isSearch;
+
+  return (
+    <div className={classes.sidebar}>
+      <div className={classes.scrollArea}>
+        <Title order={3} c="white" mb="md">Analysis Panel</Title>
+
+        {/* WYSZUKIWARKA */}
+        <div style={{ marginBottom: '20px' }}>
+          <SearchBar onLocationSelect={onLocationSelect} />
+        </div>
+
+        {/* STATUS LOKALIZACJI */}
+        <div className={classes.locationBadge}>
+          {isLocationReady ? (
+            <Stack gap={2}>
+              <Text size="xs" c="dimmed" fw={700} tt="uppercase">Analysis Target:</Text>
+              <Group gap="xs">
+                <IconMapPin size={14} color="#228be6" />
+                <Text size="sm" c="blue.4" fw={500}>
+                  {selectedLocation.lat.toFixed(5)}, {selectedLocation.lng.toFixed(5)}
+                </Text>
+              </Group>
+            </Stack>
+          ) : (
+            /* Naprawione fs="italic" */
+            <Text size="sm" c="dimmed" fs="italic">
+              {selectedLocation?.isSearch
+                ? "Now click on the map to place a pin."
+                : "Search for a city or click on the map."}
+            </Text>
+          )}
+        </div>
+
+        <Divider my="lg" color="gray.8" />
+
+        {/* FILTRY I WYBÓR MODELU */}
+        <SearchFilters values={filters} onChange={handleFilterChange} />
+
+        {/* PRZYCISKI AKCJI */}
+        <Stack gap="sm" mt="30px">
+          <Button
+            leftSection={<IconPlayerPlay size={18} />}
+            onClick={handleAnalyze}
+            disabled={!isLocationReady || isLoading}
+            loading={isLoading && !comparisonData}
+            size="md"
+            fullWidth
+          >
+            Run Analysis
+          </Button>
+
+          <Button
+            variant="outline"
+            leftSection={<IconArrowsLeftRight size={18} />}
+            onClick={() => setCompareOpened(true)}
+            disabled={!isLocationReady || isLoading}
+            size="md"
+            fullWidth
+          >
+            Advanced Analysis
+          </Button>
+        </Stack>
+
+        {/* WARSTWY MAPY (widoczne po otrzymaniu wyniku głównego) */}
+        {analysisResult && (
+          <div className={classes.layersBox}>
+            <Divider my="lg" color="gray.8" label="Map Display" labelPosition="center" />
+            <Stack gap="md">
+              <Select
+                label="Base Layer"
+                data={layerOptions}
+                value={layersConfig.firstLayer}
+                onChange={(val) => handleLayerChange('firstLayer', val)}
+                classNames={{ input: classes.selectInput, dropdown: classes.selectDropdown }}
+              />
+
+              <Select
+                label="Overlay Layer"
+                data={layerOptions}
+                value={layersConfig.secondLayer}
+                onChange={(val) => handleLayerChange('secondLayer', val)}
+                classNames={{ input: classes.selectInput, dropdown: classes.selectDropdown }}
+              />
+            </Stack>
+          </div>
+        )}
+      </div>
+
+      {/* MODAL WYNIKÓW PORÓWNAWCZYCH */}
+      <CompareModal
+        opened={compareOpened}
+        onClose={() => {
+          setCompareOpened(false);
+          setComparisonData(null);
+        }}
+        onRunCompare={handleRunCompare}
+        isLoading={isLoading}
+        results={comparisonData}
+      />
+    </div>
+  );
+}
+
+export default Sidebar;

io-app-front/src/components/Sidebar.module.css

@@ -0,0 +1,55 @@
+.sidebar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 500px;
+    z-index: 10;
+
+    background-color: rgba(10, 10, 12, 0.8);
+    backdrop-filter: blur(40px);
+    -webkit-backdrop-filter: blur(40px);
+
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 0 10px 10px 0;
+    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
+}
+
+.scrollArea {
+    padding: 20px;
+    flex: 1;
+    overflow-y: auto;
+}
+
+.locationBadge {
+    padding: 12px;
+    background-color: #25262b;
+    border-radius: 8px;
+    border: 1px solid #373a40;
+    margin-bottom: 20px;
+}
+
+.layersBox {
+    margin-top: 10px;
+    padding-bottom: 20px;
+}
+
+.selectInput {
+    background-color: #25262b !important;
+    color: #fff !important;
+    border-color: #373a40 !important;
+}
+
+.selectDropdown {
+    background-color: #25262b !important;
+    border-color: #373a40 !important;
+}
+
+/* Styl dla paska przewijania */
+.scrollArea::-webkit-scrollbar {
+    width: 6px;
+}
+.scrollArea::-webkit-scrollbar-thumb {
+    background-color: #373a40;
+    border-radius: 3px;
+}

io-app-front/src/index.css

@@ -0,0 +1,7 @@
+#root {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}

io-app-front/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

io-app-front/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})