Initial commit: SatDetect satellite change detection web app

.dockerignore

@@ -0,0 +1,8 @@
+__pycache__
+*.pyc
+.git
+.gitignore
+data/satellite_app.db
+data/overlays/*
+*.md
+.env

.gitignore

@@ -0,0 +1,10 @@
+__pycache__/
+*.pyc
+*.pyo
+data/satellite_app.db
+data/overlays/*
+!data/overlays/.gitkeep
+.env
+*.egg-info/
+dist/
+build/

Dockerfile

@@ -0,0 +1,28 @@
+FROM python:3.11-slim
+
+# System dependencies for OpenCV and image processing
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libgl1 \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender1 \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Create data directories
+RUN mkdir -p data/overlays
+
+# Expose port
+EXPOSE 10000
+
+# Run with gunicorn + uvicorn workers for production
+CMD ["gunicorn", "app.main:app", "-k", "uvicorn.workers.UvicornWorker", "--bind", "0.0.0.0:10000", "--workers", "2", "--timeout", "120"]

README.md

@@ -0,0 +1,77 @@
+# Satellite Change Detection — Standalone Web App
+
+Standalone web application for satellite image change detection with **user accounts**, **database storage**, and a **clean, modern UI**.
+
+## Features
+
+- **Login / Register** — JWT-based auth, passwords hashed with bcrypt
+- **Database** — SQLite (or set `DATABASE_URL` for PostgreSQL); stores users and detection runs
+- **Change detection** — Same model as the original app: AI-based, image difference, feature-based, hybrid
+- **Object classification** — Changed regions labeled as Water, Vegetation/Tree, Building, Road, Bare Ground/Soil
+- **History** — List of past runs with overlay images and stats
+- **UI** — Single-page app with a dark, “control room” style and teal accents
+
+## Setup
+
+1. **Create a virtual environment (recommended)**
+
+   ```bash
+   cd change_detection_webapp
+   python -m venv venv
+   source venv/bin/activate   # Windows: venv\Scripts\activate
+   ```
+
+2. **Install dependencies**
+
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+3. **Run the app**
+
+   ```bash
+   uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
+   ```
+
+4. Open **http://localhost:8000** in your browser.
+
+## First run
+
+- The SQLite DB and `data/` (overlay images) are created automatically on first use.
+- Register a new account from the welcome screen, then sign in.
+- Upload **Before** and **After** images, choose a method, and click **Run detection**.
+- Results appear below; runs are saved in **History**.
+
+## Configuration
+
+- **Database**: set `DATABASE_URL` (e.g. `postgresql://user:pass@host/db`) to use another DB; otherwise SQLite under `data/satellite_app.db` is used.
+- **JWT**: set `SECRET_KEY` in `app/auth.py` (or via env) in production.
+
+## Project layout
+
+```
+change_detection_webapp/
+├── app/
+│   ├── main.py           # FastAPI app, routes
+│   ├── database.py       # SQLAlchemy, session
+│   ├── models.py         # User, DetectionRun
+│   ├── auth.py           # JWT, password hashing
+│   └── detection_engine.py  # Change detection (no Streamlit)
+├── static/
+│   ├── css/style.css     # Styles
+│   └── js/app.js         # Frontend logic
+├── templates/
+│   └── index.html        # Single-page UI
+├── data/                 # Created at runtime (DB + overlays)
+├── requirements.txt
+└── README.md
+```
+
+## API (for integration)
+
+- `POST /api/auth/register` — body: `{ "email", "password", "full_name" }`
+- `POST /api/auth/login` — body: `{ "email", "password" }` → returns `access_token`
+- `GET /api/me` — header: `Authorization: Bearer <token>`
+- `POST /api/detect` — form: `before`, `after` (files), `method`, `title`, etc. → returns stats, regions, overlay base64
+- `GET /api/history` — list of current user’s runs
+- `GET /api/overlay/<path>` — serve saved overlay image

app/__init__.py

@@ -0,0 +1 @@
+# Satellite Change Detection Web App

app/auth.py

@@ -0,0 +1,88 @@
+import os
+from datetime import datetime, timedelta
+from typing import Optional
+
+from jose import JWTError, jwt
+from passlib.context import CryptContext
+from fastapi import Depends, Request
+from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
+from sqlalchemy.orm import Session
+
+from .database import get_db
+from .models import User
+
+SECRET_KEY = os.environ.get("SECRET_KEY", "dev-fallback-key-change-in-production")
+ALGORITHM = "HS256"
+ACCESS_TOKEN_EXPIRE_MINUTES = 60 * 24 * 7  # 7 days
+COOKIE_NAME = "satellite_token"
+
+pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
+security = HTTPBearer(auto_error=False)
+
+
+def verify_password(plain_password: str, hashed_password: str) -> bool:
+    return pwd_context.verify(plain_password, hashed_password)
+
+
+def get_password_hash(password: str) -> str:
+    return pwd_context.hash(password)
+
+
+def create_access_token(data: dict, expires_delta: Optional[timedelta] = None) -> str:
+    to_encode = data.copy()
+    expire = datetime.utcnow() + (expires_delta or timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES))
+    to_encode.update({"exp": expire})
+    return jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
+
+
+def get_user_by_email(db: Session, email: str) -> Optional[User]:
+    return db.query(User).filter(User.email == email).first()
+
+
+def get_user_by_id(db: Session, user_id: int) -> Optional[User]:
+    return db.query(User).filter(User.id == user_id).first()
+
+
+def get_user_from_token(token: str, db: Session) -> Optional[User]:
+    """Resolve user from JWT token (used as fallback when header/cookie not sent)."""
+    if not token:
+        print("[AUTH] get_user_from_token: token is empty/None")
+        return None
+    try:
+        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
+        user_id_str = payload.get("sub")
+        print(f"[AUTH] decoded token OK, sub={user_id_str}")
+        if user_id_str is None:
+            return None
+        try:
+            user_id = int(user_id_str)
+        except (ValueError, TypeError):
+            return None
+    except JWTError as e:
+        print(f"[AUTH] JWT decode FAILED: {e}")
+        return None
+    user = get_user_by_id(db, user_id)
+    print(f"[AUTH] DB lookup: user={'found' if user else 'NOT FOUND'}")
+    return user
+
+
+def get_current_user(
+    request: Request,
+    credentials: Optional[HTTPAuthorizationCredentials] = Depends(security),
+    db: Session = Depends(get_db),
+) -> Optional[User]:
+    print(f"[AUTH] get_current_user called")
+    print(f"[AUTH]   credentials present: {credentials is not None}")
+    print(f"[AUTH]   cookie present: {request.cookies.get(COOKIE_NAME) is not None}")
+    print(f"[AUTH]   Authorization header: {request.headers.get('authorization', 'MISSING')[:50]}")
+    # 1) Try Bearer header
+    if credentials:
+        user = get_user_from_token(credentials.credentials, db)
+        if user:
+            return user
+    # 2) Try cookie (sent automatically by browser on same-origin requests)
+    token = request.cookies.get(COOKIE_NAME)
+    if token:
+        return get_user_from_token(token, db)
+    print("[AUTH] No valid auth found, returning None")
+    return None

app/database.py

@@ -0,0 +1,28 @@
+import os
+from pathlib import Path
+
+from sqlalchemy import create_engine
+from sqlalchemy.orm import sessionmaker, declarative_base
+
+BASE_DIR = Path(__file__).resolve().parent
+DB_PATH = BASE_DIR.parent / "data" / "satellite_app.db"
+DB_PATH.parent.mkdir(parents=True, exist_ok=True)
+
+DATABASE_URL = os.environ.get("DATABASE_URL", f"sqlite:///{DB_PATH}")
+
+# Render gives postgres:// but SQLAlchemy 2.x requires postgresql://
+if DATABASE_URL.startswith("postgres://"):
+    DATABASE_URL = DATABASE_URL.replace("postgres://", "postgresql://", 1)
+
+connect_args = {"check_same_thread": False} if DATABASE_URL.startswith("sqlite") else {}
+engine = create_engine(DATABASE_URL, connect_args=connect_args)
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+Base = declarative_base()
+
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()

app/detection_engine.py

@@ -0,0 +1,817 @@
+"""
+Satellite Change Detection Engine v2
+High-accuracy detection with multi-channel analysis, SSIM, texture features,
+adaptive thresholding, and improved object classification.
+"""
+import io
+import numpy as np
+import cv2
+from PIL import Image
+from sklearn.cluster import KMeans
+from sklearn.preprocessing import StandardScaler
+from collections import Counter
+
+
+# ---------------------------------------------------------------------------
+# 1. Pre-processing
+# ---------------------------------------------------------------------------
+
+def preprocess_image(image):
+    """Preprocess image: convert to RGB, limit size."""
+    img_array = np.array(image)
+    if img_array.ndim == 2:
+        img_array = cv2.cvtColor(img_array, cv2.COLOR_GRAY2RGB)
+    if img_array.shape[2] == 4:
+        img_array = cv2.cvtColor(img_array, cv2.COLOR_RGBA2RGB)
+    max_size = 2000
+    height, width = img_array.shape[:2]
+    if max(height, width) > max_size:
+        scale = max_size / max(height, width)
+        img_array = cv2.resize(img_array, (int(width * scale), int(height * scale)), interpolation=cv2.INTER_AREA)
+    return img_array
+
+
+# ---------------------------------------------------------------------------
+# 2. Improved image registration (alignment)
+# ---------------------------------------------------------------------------
+
+def register_images(img1, img2, max_features=2000):
+    """Align img2 to img1 using ORB + ratio-test + RANSAC homography."""
+    gray1 = cv2.cvtColor(img1, cv2.COLOR_RGB2GRAY)
+    gray2 = cv2.cvtColor(img2, cv2.COLOR_RGB2GRAY)
+
+    orb = cv2.ORB_create(nfeatures=max_features, scoreType=cv2.ORB_HARRIS_SCORE)
+    kp1, des1 = orb.detectAndCompute(gray1, None)
+    kp2, des2 = orb.detectAndCompute(gray2, None)
+
+    if des1 is None or des2 is None or len(des1) < 10 or len(des2) < 10:
+        return img1, img2, False
+
+    # Use kNN matching with Lowe's ratio test for better matches
+    bf = cv2.BFMatcher(cv2.NORM_HAMMING)
+    raw_matches = bf.knnMatch(des1, des2, k=2)
+
+    good_matches = []
+    for pair in raw_matches:
+        if len(pair) == 2:
+            m, n = pair
+            if m.distance < 0.75 * n.distance:
+                good_matches.append(m)
+
+    if len(good_matches) < 10:
+        return img1, img2, False
+
+    src_pts = np.float32([kp1[m.queryIdx].pt for m in good_matches]).reshape(-1, 1, 2)
+    dst_pts = np.float32([kp2[m.trainIdx].pt for m in good_matches]).reshape(-1, 1, 2)
+
+    homography, mask = cv2.findHomography(dst_pts, src_pts, cv2.RANSAC, 3.0)
+    if homography is None:
+        return img1, img2, False
+
+    # Only accept if enough inliers
+    inlier_ratio = np.sum(mask) / len(mask) if mask is not None else 0
+    if inlier_ratio < 0.3:
+        return img1, img2, False
+
+    h, w = img1.shape[:2]
+    img2_aligned = cv2.warpPerspective(img2, homography, (w, h), borderMode=cv2.BORDER_REFLECT)
+    return img1, img2_aligned, True
+
+
+# ---------------------------------------------------------------------------
+# 3. Improved radiometric normalization
+# ---------------------------------------------------------------------------
+
+def normalize_radiometry(img1, img2):
+    """Histogram-matching normalization in LAB space for all channels."""
+    lab1 = cv2.cvtColor(img1, cv2.COLOR_RGB2LAB).astype(np.float32)
+    lab2 = cv2.cvtColor(img2, cv2.COLOR_RGB2LAB).astype(np.float32)
+
+    result = lab2.copy()
+    for ch in range(3):
+        mean1, std1 = np.mean(lab1[:, :, ch]), np.std(lab1[:, :, ch])
+        mean2, std2 = np.mean(lab2[:, :, ch]), np.std(lab2[:, :, ch])
+        if std2 > 1e-6:
+            result[:, :, ch] = (lab2[:, :, ch] - mean2) * (std1 / std2) + mean1
+
+    # Also apply CLAHE on L channel for contrast equalization
+    result_uint8 = np.clip(result, 0, 255).astype(np.uint8)
+    clahe = cv2.createCLAHE(clipLimit=2.0, tileGridSize=(8, 8))
+    result_uint8[:, :, 0] = clahe.apply(result_uint8[:, :, 0])
+
+    img2_normalized = cv2.cvtColor(result_uint8, cv2.COLOR_LAB2RGB)
+    return img1, img2_normalized
+
+
+# ---------------------------------------------------------------------------
+# 4. SSIM-based structural change map
+# ---------------------------------------------------------------------------
+
+def compute_ssim_change_map(img1, img2, win_size=7):
+    """Compute per-pixel structural dissimilarity (1 - SSIM)."""
+    gray1 = cv2.cvtColor(img1, cv2.COLOR_RGB2GRAY).astype(np.float64)
+    gray2 = cv2.cvtColor(img2, cv2.COLOR_RGB2GRAY).astype(np.float64)
+
+    C1 = (0.01 * 255) ** 2
+    C2 = (0.03 * 255) ** 2
+
+    mu1 = cv2.GaussianBlur(gray1, (win_size, win_size), 1.5)
+    mu2 = cv2.GaussianBlur(gray2, (win_size, win_size), 1.5)
+
+    mu1_sq = mu1 * mu1
+    mu2_sq = mu2 * mu2
+    mu1_mu2 = mu1 * mu2
+
+    sigma1_sq = cv2.GaussianBlur(gray1 * gray1, (win_size, win_size), 1.5) - mu1_sq
+    sigma2_sq = cv2.GaussianBlur(gray2 * gray2, (win_size, win_size), 1.5) - mu2_sq
+    sigma12 = cv2.GaussianBlur(gray1 * gray2, (win_size, win_size), 1.5) - mu1_mu2
+
+    ssim_map = ((2 * mu1_mu2 + C1) * (2 * sigma12 + C2)) / \
+               ((mu1_sq + mu2_sq + C1) * (sigma1_sq + sigma2_sq + C2))
+
+    # Structural dissimilarity: 0 = identical, 1 = completely different
+    dssim = np.clip((1.0 - ssim_map) / 2.0, 0, 1)
+    return dssim
+
+
+# ---------------------------------------------------------------------------
+# 5. Texture feature extraction (LBP)
+# ---------------------------------------------------------------------------
+
+def compute_lbp(gray, radius=1, n_points=8):
+    """Compute simplified Local Binary Pattern texture descriptor."""
+    h, w = gray.shape
+    lbp = np.zeros_like(gray, dtype=np.float32)
+    for i in range(n_points):
+        angle = 2 * np.pi * i / n_points
+        dx = int(round(radius * np.cos(angle)))
+        dy = int(round(-radius * np.sin(angle)))
+        shifted = np.roll(np.roll(gray, dy, axis=0), dx, axis=1)
+        lbp += (shifted >= gray).astype(np.float32)
+    return lbp / n_points
+
+
+def compute_texture_change(img1, img2):
+    """Compute texture difference using LBP."""
+    gray1 = cv2.cvtColor(img1, cv2.COLOR_RGB2GRAY).astype(np.float32)
+    gray2 = cv2.cvtColor(img2, cv2.COLOR_RGB2GRAY).astype(np.float32)
+    lbp1 = compute_lbp(gray1)
+    lbp2 = compute_lbp(gray2)
+    texture_diff = np.abs(lbp1 - lbp2)
+    return texture_diff
+
+
+# ---------------------------------------------------------------------------
+# 6. Edge-aware change detection
+# ---------------------------------------------------------------------------
+
+def compute_edge_change(img1, img2):
+    """Compute edge-based change map using Canny edges."""
+    gray1 = cv2.cvtColor(img1, cv2.COLOR_RGB2GRAY)
+    gray2 = cv2.cvtColor(img2, cv2.COLOR_RGB2GRAY)
+
+    # Adaptive Canny thresholds based on median intensity
+    med1 = np.median(gray1)
+    edges1 = cv2.Canny(gray1, int(max(0, 0.67 * med1)), int(min(255, 1.33 * med1)))
+    med2 = np.median(gray2)
+    edges2 = cv2.Canny(gray2, int(max(0, 0.67 * med2)), int(min(255, 1.33 * med2)))
+
+    # Dilate edges slightly so nearby edges match
+    kernel = np.ones((3, 3), np.uint8)
+    edges1_d = cv2.dilate(edges1, kernel, iterations=1)
+    edges2_d = cv2.dilate(edges2, kernel, iterations=1)
+
+    # New edges = present in one image but not the other
+    edge_change = cv2.absdiff(edges1_d, edges2_d).astype(np.float32) / 255.0
+    return edge_change
+
+
+# ---------------------------------------------------------------------------
+# 7. Improved detection methods
+# ---------------------------------------------------------------------------
+
+def image_difference_method(img1, img2, threshold=0.25, blur_size=5):
+    """Improved image difference with multi-channel analysis and adaptive threshold."""
+    if img1.shape != img2.shape:
+        img2 = cv2.resize(img2, (img1.shape[1], img1.shape[0]))
+
+    # Multi-channel difference in LAB (perceptually uniform)
+    lab1 = cv2.cvtColor(img1, cv2.COLOR_RGB2LAB).astype(np.float32)
+    lab2 = cv2.cvtColor(img2, cv2.COLOR_RGB2LAB).astype(np.float32)
+
+    lab1_blur = cv2.GaussianBlur(lab1, (blur_size, blur_size), 0)
+    lab2_blur = cv2.GaussianBlur(lab2, (blur_size, blur_size), 0)
+
+    # Weighted Delta-E inspired difference
+    diff = lab1_blur - lab2_blur
+    delta_e = np.sqrt(
+        (diff[:, :, 0] / 100.0) ** 2 +
+        (diff[:, :, 1] / 128.0) ** 2 +
+        (diff[:, :, 2] / 128.0) ** 2
+    )
+    delta_e = delta_e / delta_e.max() if delta_e.max() > 0 else delta_e
+
+    # Adaptive threshold using Otsu on the change map
+    delta_uint8 = (delta_e * 255).astype(np.uint8)
+    _, change_mask = cv2.threshold(delta_uint8, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)
+
+    change_mask = _clean_mask(change_mask)
+    return change_mask
+
+
+def feature_based_method(img1, img2, num_clusters=4, sensitivity=0.5):
+    """Feature-based change detection using multi-space clustering."""
+    if img1.shape != img2.shape:
+        img2 = cv2.resize(img2, (img1.shape[1], img1.shape[0]))
+
+    # Combine LAB and HSV differences for richer features
+    lab1 = cv2.cvtColor(img1, cv2.COLOR_RGB2LAB).astype(np.float32)
+    lab2 = cv2.cvtColor(img2, cv2.COLOR_RGB2LAB).astype(np.float32)
+    hsv1 = cv2.cvtColor(img1, cv2.COLOR_RGB2HSV).astype(np.float32)
+    hsv2 = cv2.cvtColor(img2, cv2.COLOR_RGB2HSV).astype(np.float32)
+
+    diff_lab = np.abs(lab1 - lab2)
+    diff_hsv = np.abs(hsv1 - hsv2)
+
+    h, w, _ = diff_lab.shape
+    features = np.concatenate([diff_lab, diff_hsv[:, :, 1:]], axis=2)  # 5 channels
+    features_flat = features.reshape(-1, features.shape[2])
+
+    scaler = StandardScaler()
+    features_scaled = scaler.fit_transform(features_flat)
+
+    kmeans = KMeans(n_clusters=num_clusters, random_state=42, n_init=10)
+    labels = kmeans.fit_predict(features_scaled)
+
+    # Find the cluster with highest mean difference (= change)
+    cluster_means = [np.mean(np.linalg.norm(features_flat[labels == i], axis=1)) for i in range(num_clusters)]
+    change_cluster_idx = np.argmax(cluster_means)
+
+    change_mask = (labels == change_cluster_idx).astype(np.uint8) * 255
+    change_mask = change_mask.reshape(h, w)
+
+    change_mask = _clean_mask(change_mask, sensitivity)
+    return change_mask
+
+
+def ai_deep_learning_method(img1, img2):
+    """
+    Advanced multi-signal fusion:
+    - Multi-scale color difference (LAB)
+    - Structural dissimilarity (SSIM)
+    - Texture change (LBP)
+    - Edge change (Canny)
+    All fused with learned weights and adaptive thresholding.
+    """
+    if img1.shape != img2.shape:
+        img2 = cv2.resize(img2, (img1.shape[1], img1.shape[0]))
+
+    # ---- Channel 1: Multi-scale LAB color difference ----
+    lab1 = cv2.cvtColor(img1, cv2.COLOR_RGB2LAB).astype(np.float32)
+    lab2 = cv2.cvtColor(img2, cv2.COLOR_RGB2LAB).astype(np.float32)
+
+    scales = [1, 2, 4]
+    color_maps = []
+    for scale in scales:
+        if scale > 1:
+            s1 = cv2.resize(lab1, (lab1.shape[1] // scale, lab1.shape[0] // scale))
+            s2 = cv2.resize(lab2, (lab2.shape[1] // scale, lab2.shape[0] // scale))
+        else:
+            s1, s2 = lab1, lab2
+        diff = s1 - s2
+        # Delta-E (CIE76) normalized
+        delta_e = np.sqrt((diff[:, :, 0] / 100.0) ** 2 +
+                          (diff[:, :, 1] / 128.0) ** 2 +
+                          (diff[:, :, 2] / 128.0) ** 2)
+        if scale > 1:
+            delta_e = cv2.resize(delta_e, (lab1.shape[1], lab1.shape[0]))
+        color_maps.append(delta_e)
+
+    color_change = np.mean(color_maps, axis=0)
+    color_change = color_change / (color_change.max() + 1e-8)
+
+    # ---- Channel 2: SSIM structural dissimilarity ----
+    ssim_change = compute_ssim_change_map(img1, img2)
+    ssim_change = ssim_change / (ssim_change.max() + 1e-8)
+
+    # ---- Channel 3: Texture change (LBP) ----
+    texture_change = compute_texture_change(img1, img2)
+    texture_change = texture_change / (texture_change.max() + 1e-8)
+
+    # ---- Channel 4: Edge change ----
+    edge_change = compute_edge_change(img1, img2)
+
+    # ---- Adaptive fusion ----
+    # Weight channels by their discriminative power (entropy-based)
+    channels = [color_change, ssim_change, texture_change, edge_change]
+    weights = []
+    for ch in channels:
+        ch_uint8 = (ch * 255).astype(np.uint8)
+        hist = cv2.calcHist([ch_uint8], [0], None, [256], [0, 256]).flatten()
+        hist = hist / (hist.sum() + 1e-8)
+        entropy = -np.sum(hist[hist > 0] * np.log2(hist[hist > 0] + 1e-10))
+        weights.append(entropy)
+
+    # Normalize weights
+    total_w = sum(weights) + 1e-8
+    weights = [w / total_w for w in weights]
+
+    # Fuse
+    fused = np.zeros_like(color_change, dtype=np.float64)
+    for ch, w in zip(channels, weights):
+        fused += w * ch.astype(np.float64)
+
+    fused = fused / (fused.max() + 1e-8)
+    fused_uint8 = (fused * 255).astype(np.uint8)
+
+    # Adaptive threshold: Otsu + refinement
+    _, change_mask = cv2.threshold(fused_uint8, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)
+
+    # Post-process
+    change_mask = _clean_mask(change_mask)
+
+    # Edge-preserving smoothing on the mask
+    change_mask = cv2.bilateralFilter(change_mask, 9, 75, 75)
+    _, change_mask = cv2.threshold(change_mask, 127, 255, cv2.THRESH_BINARY)
+
+    return change_mask
+
+
+def hybrid_method(img1, img2):
+    """Hybrid: weighted fusion of all methods with confidence-based merging."""
+    if img1.shape != img2.shape:
+        img2 = cv2.resize(img2, (img1.shape[1], img1.shape[0]))
+
+    diff_mask = image_difference_method(img1, img2)
+    feature_mask = feature_based_method(img1, img2)
+    ai_mask = ai_deep_learning_method(img1, img2)
+
+    # Weighted combination: AI method gets most weight
+    combined = (
+        0.2 * diff_mask.astype(np.float32) +
+        0.3 * feature_mask.astype(np.float32) +
+        0.5 * ai_mask.astype(np.float32)
+    )
+
+    _, final_mask = cv2.threshold(combined.astype(np.uint8), 127, 255, cv2.THRESH_BINARY)
+    final_mask = _clean_mask(final_mask)
+    return final_mask
+
+
+# ---------------------------------------------------------------------------
+# 8. Robust post-processing
+# ---------------------------------------------------------------------------
+
+def _clean_mask(mask, sensitivity=0.5):
+    """Adaptive morphological cleaning: close gaps, remove noise, fill holes."""
+    # Close small gaps
+    close_size = max(3, int(7 * (1 - sensitivity)))
+    if close_size % 2 == 0:
+        close_size += 1
+    kernel_close = cv2.getStructuringElement(cv2.MORPH_ELLIPSE, (close_size, close_size))
+    mask = cv2.morphologyEx(mask, cv2.MORPH_CLOSE, kernel_close)
+
+    # Remove small noise
+    open_size = 3
+    kernel_open = cv2.getStructuringElement(cv2.MORPH_ELLIPSE, (open_size, open_size))
+    mask = cv2.morphologyEx(mask, cv2.MORPH_OPEN, kernel_open)
+
+    # Fill small holes inside detected regions
+    contours, _ = cv2.findContours(mask, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+    filled = np.zeros_like(mask)
+    cv2.drawContours(filled, contours, -1, 255, thickness=cv2.FILLED)
+
+    return filled
+
+
+# ---------------------------------------------------------------------------
+# 9. Improved visualization
+# ---------------------------------------------------------------------------
+
+def visualize_changes(img1, img2, change_mask, regions=None):
+    """Overlay change mask on 'after' image in RED."""
+    if img1.shape != img2.shape:
+        img2 = cv2.resize(img2, (img1.shape[1], img1.shape[0]))
+    if change_mask.shape[:2] != img2.shape[:2]:
+        change_mask = cv2.resize(change_mask, (img2.shape[1], img2.shape[0]))
+
+    overlay = img2.copy().astype(np.float32)
+    mask_bool = change_mask > 127
+    mask_float = mask_bool.astype(np.float32)
+
+    # Red overlay for all detected changes
+    red_layer = np.zeros_like(img2, dtype=np.float32)
+    red_layer[:, :, 0] = 255  # pure red
+    alpha = 0.50
+    for c in range(3):
+        overlay[:, :, c] = overlay[:, :, c] * (1 - mask_float * alpha) + red_layer[:, :, c] * mask_float * alpha
+
+    # Draw thin white outlines around each region for clarity
+    if regions:
+        contour_mask = np.zeros(change_mask.shape[:2], dtype=np.uint8)
+        for r in regions:
+            x, y, w, h = r["bbox"]
+            cv2.rectangle(contour_mask, (x, y), (x + w, y + h), 255, 1)
+        outline = contour_mask > 0
+        overlay[outline] = [255, 255, 255]
+
+    return np.clip(overlay, 0, 255).astype(np.uint8)
+
+
+# ---------------------------------------------------------------------------
+# 10. Improved object classification
+# ---------------------------------------------------------------------------
+
+def extract_advanced_features(region):
+    """Extract rich features for classification: color, texture, edge, shape."""
+    if region.size == 0 or region.shape[0] < 3 or region.shape[1] < 3:
+        return None
+
+    hsv = cv2.cvtColor(region, cv2.COLOR_RGB2HSV)
+    lab = cv2.cvtColor(region, cv2.COLOR_RGB2LAB)
+    gray = cv2.cvtColor(region, cv2.COLOR_RGB2GRAY).astype(np.float32)
+
+    # Color stats
+    mean_rgb = np.mean(region, axis=(0, 1))
+    std_rgb = np.std(region, axis=(0, 1))
+    mean_hsv = np.mean(hsv, axis=(0, 1))
+    mean_lab = np.mean(lab, axis=(0, 1))
+
+    total_rgb = np.sum(mean_rgb) + 1e-6
+    green_ratio = mean_rgb[1] / total_rgb
+    blue_ratio = mean_rgb[2] / total_rgb
+    red_ratio = mean_rgb[0] / total_rgb
+
+    # Vegetation indices
+    ndvi = (mean_rgb[1] - mean_rgb[0]) / (mean_rgb[1] + mean_rgb[0] + 1e-6)
+
+    # Texture
+    texture_std = float(np.std(gray))
+    lbp = compute_lbp(gray.astype(np.float32))
+    lbp_variance = float(np.var(lbp))
+
+    # Edges
+    grad_x = cv2.Sobel(gray, cv2.CV_64F, 1, 0, ksize=3)
+    grad_y = cv2.Sobel(gray, cv2.CV_64F, 0, 1, ksize=3)
+    edge_mag = np.sqrt(grad_x ** 2 + grad_y ** 2)
+    edge_density = float(np.mean(edge_mag))
+
+    # Edge orientation histogram (structural regularity)
+    angles = np.arctan2(grad_y, grad_x + 1e-8)
+    angle_hist, _ = np.histogram(angles, bins=8, range=(-np.pi, np.pi))
+    angle_hist = angle_hist / (angle_hist.sum() + 1e-8)
+    orientation_entropy = -np.sum(angle_hist[angle_hist > 0] * np.log2(angle_hist[angle_hist > 0] + 1e-10))
+
+    # GLCM-like contrast (simplified: variance of neighbors)
+    shifted_r = np.roll(gray, 1, axis=1)
+    shifted_d = np.roll(gray, 1, axis=0)
+    glcm_contrast = float(np.mean((gray - shifted_r) ** 2 + (gray - shifted_d) ** 2))
+
+    return {
+        "mean_rgb": mean_rgb, "std_rgb": std_rgb, "mean_hsv": mean_hsv, "mean_lab": mean_lab,
+        "ndvi": ndvi, "texture_std": texture_std, "lbp_variance": lbp_variance,
+        "edge_density": edge_density, "orientation_entropy": orientation_entropy,
+        "glcm_contrast": glcm_contrast,
+        "color_homogeneity": float(np.mean(std_rgb)),
+        "brightness": float(mean_lab[0]),
+        "green_ratio": green_ratio, "blue_ratio": blue_ratio, "red_ratio": red_ratio,
+        "saturation": float(mean_hsv[1]), "hue": float(mean_hsv[0]),
+    }
+
+
+def _is_transient_object(area, w, h, features):
+    """
+    Filter out transient objects (people, cars, animals, shadows, etc.)
+    that are NOT permanent ground/structural changes.
+    Returns True if the region is likely transient and should be excluded.
+    """
+    aspect_ratio = max(w, h) / max(min(w, h), 1)
+
+    # Very small regions are likely noise, people, or small vehicles
+    if area < 300:
+        return True
+
+    # Tall narrow regions (aspect > 4) are likely people or poles
+    if aspect_ratio > 5.0 and area < 2000:
+        return True
+
+    # Very high edge density + small area = likely a person or vehicle
+    if features["edge_density"] > 80 and area < 1500:
+        return True
+
+    # Extremely high texture variance in small area = likely transient clutter
+    if features["texture_std"] > 60 and area < 1000:
+        return True
+
+    return False
+
+
+# Ground-level change categories only
+GROUND_CHANGE_TYPES = [
+    "New Construction/Building",
+    "Demolition/Clearing",
+    "Vegetation Change",
+    "Water Body Change",
+    "Road/Pavement Change",
+    "Bare Land/Soil Change",
+]
+
+
+def classify_object_type(image_region, bbox):
+    """
+    Classify GROUND-LEVEL structural changes only.
+    Categories: construction, demolition, vegetation, water, road, bare land.
+    Transient objects (people, cars, animals) are filtered out.
+    """
+    x, y, w, h = bbox
+    pad = 5
+    y1 = max(0, y - pad)
+    y2 = min(image_region.shape[0], y + h + pad)
+    x1 = max(0, x - pad)
+    x2 = min(image_region.shape[1], x + w + pad)
+    region = image_region[y1:y2, x1:x2]
+
+    if region.size == 0 or region.shape[0] < 3 or region.shape[1] < 3:
+        return "Unclassified", 0.0
+
+    features = extract_advanced_features(region)
+    if features is None:
+        return "Unclassified", 0.0
+
+    area = w * h
+
+    # Filter out transient objects (people, cars, animals)
+    if _is_transient_object(area, w, h, features):
+        return None, 0.0  # signal to exclude this region
+
+    aspect_ratio = max(w, h) / max(min(w, h), 1)
+    compactness = (4 * np.pi * area) / ((2 * (w + h)) ** 2 + 1e-6)
+
+    scores = {}
+
+    # ---- Water Body Change ----
+    water = 0.0
+    if features["blue_ratio"] > 0.36:
+        water += 0.22
+    if features["texture_std"] < 28:
+        water += 0.18
+    if features["edge_density"] < 35:
+        water += 0.14
+    if 90 <= features["hue"] <= 135:
+        water += 0.18
+    if features["lbp_variance"] < 0.05:
+        water += 0.14
+    if features["glcm_contrast"] < 500:
+        water += 0.10
+    if area > 800:
+        water += 0.04
+    scores["Water Body Change"] = water
+
+    # ---- Vegetation Change (deforestation, new growth, crop change) ----
+    veg = 0.0
+    if features["ndvi"] > 0.05:
+        veg += 0.22
+    if features["ndvi"] > 0.15:
+        veg += 0.10
+    if features["green_ratio"] > 0.36:
+        veg += 0.18
+    if 35 <= features["hue"] <= 85:
+        veg += 0.15
+    if features["texture_std"] > 18:
+        veg += 0.08
+    if features["lbp_variance"] > 0.03:
+        veg += 0.08
+    if features["saturation"] > 40:
+        veg += 0.10
+    if features["orientation_entropy"] > 2.5:
+        veg += 0.05
+    if area > 500:
+        veg += 0.04
+    scores["Vegetation Change"] = veg
+
+    # ---- New Construction/Building ----
+    bld = 0.0
+    if features["orientation_entropy"] < 2.5:
+        bld += 0.18
+    if features["color_homogeneity"] < 28:
+        bld += 0.15
+    if 1.0 <= aspect_ratio <= 4.0:
+        bld += 0.12
+    if 0.3 <= compactness <= 0.9:
+        bld += 0.10
+    if features["edge_density"] > 30:
+        bld += 0.12
+    if features["glcm_contrast"] > 400:
+        bld += 0.10
+    if features["saturation"] < 90:
+        bld += 0.10
+    if 40 <= features["brightness"] <= 90:
+        bld += 0.08
+    if area > 1000:
+        bld += 0.05
+    scores["New Construction/Building"] = bld
+
+    # ---- Demolition/Clearing ----
+    demo = 0.0
+    if features["texture_std"] > 30:
+        demo += 0.18
+    if features["orientation_entropy"] > 2.8:
+        demo += 0.15
+    if features["color_homogeneity"] > 25:
+        demo += 0.15
+    if features["brightness"] > 60:
+        demo += 0.10
+    if features["ndvi"] < 0.05:
+        demo += 0.12
+    if features["saturation"] < 70:
+        demo += 0.10
+    if area > 800:
+        demo += 0.05
+    scores["Demolition/Clearing"] = demo
+
+    # ---- Road/Pavement Change ----
+    road = 0.0
+    if aspect_ratio > 2.5:
+        road += 0.22
+    if features["color_homogeneity"] < 22:
+        road += 0.18
+    if features["texture_std"] < 32:
+        road += 0.15
+    if features["saturation"] < 65:
+        road += 0.12
+    if features["orientation_entropy"] < 2.0:
+        road += 0.15
+    if 35 <= features["brightness"] <= 75:
+        road += 0.10
+    if compactness < 0.3:
+        road += 0.05
+    if area > 600:
+        road += 0.03
+    scores["Road/Pavement Change"] = road
+
+    # ---- Bare Land/Soil Change ----
+    soil = 0.0
+    if features["red_ratio"] > 0.34 and features["green_ratio"] < 0.36:
+        soil += 0.20
+    if 8 <= features["hue"] <= 38:
+        soil += 0.18
+    if features["ndvi"] < 0.05:
+        soil += 0.18
+    if features["texture_std"] < 35:
+        soil += 0.12
+    if features["lbp_variance"] < 0.04:
+        soil += 0.12
+    if 40 <= features["saturation"] <= 130:
+        soil += 0.10
+    if 45 <= features["brightness"] <= 82:
+        soil += 0.10
+    scores["Bare Land/Soil Change"] = soil
+
+    # Normalize scores
+    max_score = max(scores.values()) if scores else 0
+    if max_score > 0:
+        for k in scores:
+            scores[k] /= max_score
+
+    best = max(scores, key=scores.get)
+    conf = scores[best]
+
+    if conf < 0.30:
+        return "Unclassified", conf
+    return best, min(conf, 1.0)
+
+
+def classify_with_ensemble(image_region, bbox, num_sub=4):
+    """Ensemble: classify full region + sub-regions, vote with confidence weighting."""
+    x, y, w, h = bbox
+    sub_boxes = [(x, y, w, h)]  # full region
+
+    if w > 20 and h > 20:
+        hw, hh = w // 2, h // 2
+        sub_boxes += [
+            (x, y, hw, hh),
+            (x + hw, y, hw, hh),
+            (x, y + hh, hw, hh),
+            (x + hw, y + hh, hw, hh),
+            (x + w // 4, y + h // 4, hw, hh),
+        ]
+
+    classifications = []
+    confidences = []
+    for sb in sub_boxes:
+        obj_type, conf = classify_object_type(image_region, sb)
+        if obj_type is None:
+            return None, 0.0  # transient → exclude
+        if obj_type != "Unclassified":
+            classifications.append(obj_type)
+            confidences.append(conf)
+
+    if not classifications:
+        return classify_object_type(image_region, (x, y, w, h))
+
+    # Weighted voting
+    weighted = {}
+    counts = Counter(classifications)
+    for ot, c in zip(classifications, confidences):
+        weighted[ot] = weighted.get(ot, 0) + c
+
+    best_type = max(weighted, key=weighted.get)
+    avg_conf = weighted[best_type] / counts[best_type]
+
+    if counts[best_type] / len(classifications) >= 0.6:
+        avg_conf = min(1.0, avg_conf * 1.15)
+
+    return best_type, avg_conf
+
+
+# ---------------------------------------------------------------------------
+# 11. Region analysis
+# ---------------------------------------------------------------------------
+
+def analyze_change_regions(change_mask, image, min_area=200, use_ensemble=True):
+    """
+    Find connected change regions, classify as ground-level changes only.
+    Transient objects (people, cars, animals) are filtered out.
+    """
+    num_labels, labels, stats, centroids = cv2.connectedComponentsWithStats(change_mask, connectivity=8)
+    change_regions = []
+    region_id = 0
+
+    for i in range(1, num_labels):
+        area = stats[i, cv2.CC_STAT_AREA]
+        if area < min_area:
+            continue
+
+        x = stats[i, cv2.CC_STAT_LEFT]
+        y = stats[i, cv2.CC_STAT_TOP]
+        w = stats[i, cv2.CC_STAT_WIDTH]
+        h = stats[i, cv2.CC_STAT_HEIGHT]
+        cx, cy = centroids[i]
+
+        if use_ensemble and area > 500:
+            object_type, confidence = classify_with_ensemble(image, (x, y, w, h))
+        else:
+            object_type, confidence = classify_object_type(image, (x, y, w, h))
+
+        # None means transient / irrelevant → skip
+        if object_type is None:
+            continue
+
+        region_id += 1
+        change_regions.append({
+            "id": region_id,
+            "area": area,
+            "bbox": (x, y, w, h),
+            "center": (int(cx), int(cy)),
+            "object_type": object_type,
+            "confidence": confidence,
+        })
+
+    change_regions.sort(key=lambda r: r["area"], reverse=True)
+    return change_regions
+
+
+# ---------------------------------------------------------------------------
+# 12. Main pipeline
+# ---------------------------------------------------------------------------
+
+def run_detection(before_pil, after_pil, method="AI-Based Deep Learning",
+                  enable_registration=True, enable_normalization=True):
+    """Run full detection pipeline; returns change_mask, result_image, stats, regions."""
+    before_array = preprocess_image(before_pil)
+    after_array = preprocess_image(after_pil)
+
+    if enable_registration:
+        before_array, after_array, _ = register_images(before_array, after_array)
+    if enable_normalization:
+        before_array, after_array = normalize_radiometry(before_array, after_array)
+
+    if method == "AI-Based Deep Learning":
+        change_mask = ai_deep_learning_method(before_array, after_array)
+    elif method == "Image Difference":
+        change_mask = image_difference_method(before_array, after_array)
+    elif method == "Feature-Based":
+        change_mask = feature_based_method(before_array, after_array)
+    else:
+        change_mask = hybrid_method(before_array, after_array)
+
+    # Classify regions
+    change_regions = analyze_change_regions(change_mask, after_array, min_area=80)
+
+    # Color-coded visualization using region classifications
+    result_image = visualize_changes(before_array, after_array, change_mask, regions=change_regions)
+
+    total_pixels = int(change_mask.shape[0] * change_mask.shape[1])
+    changed_pixels = int(np.sum(change_mask > 127))
+    change_pct = (changed_pixels / total_pixels * 100.0) if total_pixels else 0.0
+
+    stats = {
+        "total_pixels": total_pixels,
+        "changed_pixels": changed_pixels,
+        "unchanged_pixels": total_pixels - changed_pixels,
+        "change_percentage": change_pct,
+        "image_width": change_mask.shape[1],
+        "image_height": change_mask.shape[0],
+    }
+
+    return change_mask, result_image, stats, change_regions

app/main.py

@@ -0,0 +1,288 @@
+import base64
+import io
+import json
+import os
+import uuid
+from pathlib import Path
+from typing import Optional
+
+import numpy as np
+from fastapi import FastAPI, Depends, File, Form, HTTPException, Request, UploadFile
+from fastapi.responses import FileResponse, HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from sqlalchemy.orm import Session
+from PIL import Image
+
+from .auth import (
+    COOKIE_NAME,
+    create_access_token,
+    get_password_hash,
+    get_user_by_email,
+    get_current_user,
+    get_user_from_token,
+    verify_password,
+)
+from .database import Base, engine, get_db
+from .models import User, DetectionRun
+from .detection_engine import run_detection
+
+Base.metadata.create_all(bind=engine)
+
+app = FastAPI(title="Satellite Change Detection", version="1.0.0")
+
+# Mount static files
+STATIC_DIR = Path(__file__).resolve().parent.parent / "static"
+TEMPLATES_DIR = Path(__file__).resolve().parent.parent / "templates"
+OVERLAYS_DIR = Path(__file__).resolve().parent.parent / "data" / "overlays"
+OVERLAYS_DIR.mkdir(parents=True, exist_ok=True)
+
+if STATIC_DIR.exists():
+    app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
+
+
+# --- Schemas ---
+class UserCreate(BaseModel):
+    email: str
+    password: str
+    full_name: str = ""
+
+
+class UserLogin(BaseModel):
+    email: str
+    password: str
+
+
+class UserResponse(BaseModel):
+    id: int
+    email: str
+    full_name: str
+
+
+# --- Auth routes ---
+def _auth_response(token: str, user: User):
+    """JSON response with auth cookie so browser sends token on every request (e.g. POST /api/detect)."""
+    payload = {"access_token": token, "token_type": "bearer", "user": {"id": user.id, "email": user.email, "full_name": user.full_name}}
+    response = JSONResponse(content=payload)
+    response.set_cookie(
+        key=COOKIE_NAME,
+        value=token,
+        max_age=60 * 60 * 24 * 7,  # 7 days
+        httponly=True,
+        samesite="lax",
+        path="/",
+    )
+    return response
+
+
+@app.post("/api/auth/register")
+def register(data: UserCreate, db: Session = Depends(get_db)):
+    if get_user_by_email(db, data.email):
+        raise HTTPException(status_code=400, detail="Email already registered")
+    user = User(
+        email=data.email,
+        hashed_password=get_password_hash(data.password),
+        full_name=data.full_name,
+    )
+    db.add(user)
+    db.commit()
+    db.refresh(user)
+    token = create_access_token(data={"sub": str(user.id)})
+    return _auth_response(token, user)
+
+
+@app.post("/api/auth/login")
+def login(data: UserLogin, db: Session = Depends(get_db)):
+    user = get_user_by_email(db, data.email)
+    if not user or not verify_password(data.password, user.hashed_password):
+        raise HTTPException(status_code=401, detail="Invalid email or password")
+    token = create_access_token(data={"sub": str(user.id)})
+    return _auth_response(token, user)
+
+
+@app.post("/api/auth/logout")
+def logout():
+    """Clear auth cookie so subsequent requests are unauthenticated."""
+    response = JSONResponse(content={"ok": True})
+    response.delete_cookie(COOKIE_NAME, path="/")
+    return response
+
+
+@app.get("/api/me")
+def me(user: Optional[User] = Depends(get_current_user)):
+    if not user:
+        raise HTTPException(status_code=401, detail="Not authenticated")
+    return {"id": user.id, "email": user.email, "full_name": user.full_name}
+
+
+@app.get("/api/debug-auth")
+def debug_auth(request: Request, user: Optional[User] = Depends(get_current_user)):
+    """Debug endpoint to see what auth info the server receives."""
+    auth_header = request.headers.get("authorization", "")
+    cookie_val = request.cookies.get(COOKIE_NAME, "")
+    return {
+        "has_auth_header": bool(auth_header),
+        "auth_header_preview": auth_header[:40] + "..." if len(auth_header) > 40 else auth_header,
+        "has_cookie": bool(cookie_val),
+        "cookie_preview": cookie_val[:20] + "..." if len(cookie_val) > 20 else cookie_val,
+        "authenticated": user is not None,
+        "user_id": user.id if user else None,
+        "user_email": user.email if user else None,
+    }
+
+
+# --- Detection route ---
+@app.post("/api/detect")
+async def detect(
+    request: Request,
+    before: UploadFile = File(...),
+    after: UploadFile = File(...),
+    method: str = Form("AI-Based Deep Learning"),
+    title: str = Form("Untitled run"),
+    enable_registration: bool = Form(True),
+    enable_normalization: bool = Form(True),
+    access_token: Optional[str] = Form(None),
+    db: Session = Depends(get_db),
+):
+    # Resolve user from token (header, cookie, or form - in case browser strips headers for multipart)
+    token = None
+    auth_header = request.headers.get("authorization") or request.headers.get("Authorization")
+    if auth_header and auth_header.lower().startswith("bearer "):
+        token = auth_header[7:].strip()
+    if not token:
+        token = request.cookies.get(COOKIE_NAME)
+    if not token:
+        token = access_token
+    user = get_user_from_token(token, db) if token else None
+    if not user:
+        raise HTTPException(status_code=401, detail="Login required")
+    try:
+        before_pil = Image.open(io.BytesIO(await before.read())).convert("RGB")
+        after_pil = Image.open(io.BytesIO(await after.read())).convert("RGB")
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=f"Invalid image: {e}")
+    change_mask, result_image, stats, change_regions = run_detection(
+        before_pil, after_pil, method=method, enable_registration=enable_registration, enable_normalization=enable_normalization
+    )
+    # Save overlay to disk and store path (optional)
+    overlay_filename = f"{user.id}_{uuid.uuid4().hex}.png"
+    overlay_path = OVERLAYS_DIR / overlay_filename
+    Image.fromarray(result_image).save(overlay_path)
+    relative_overlay = f"overlays/{overlay_filename}"
+    regions_serializable = [
+        {
+            "id": int(r["id"]),
+            "area": int(r["area"]),
+            "center": {"x": int(r["center"][0]), "y": int(r["center"][1])},
+            "bbox": {"x": int(r["bbox"][0]), "y": int(r["bbox"][1]), "w": int(r["bbox"][2]), "h": int(r["bbox"][3])},
+            "objectType": str(r["object_type"]),
+            "confidence": float(r["confidence"]),
+        }
+        for r in change_regions
+    ]
+    total_px = int(stats["total_pixels"])
+    changed_px = int(stats["changed_pixels"])
+    unchanged_px = int(stats["unchanged_pixels"])
+    change_pct = float(stats["change_percentage"])
+    run = DetectionRun(
+        user_id=user.id,
+        title=title,
+        method=method,
+        total_pixels=total_px,
+        changed_pixels=changed_px,
+        change_percentage=change_pct,
+        regions_count=len(change_regions),
+        overlay_path=relative_overlay,
+        regions_json=json.dumps(regions_serializable),
+    )
+    db.add(run)
+    db.commit()
+    db.refresh(run)
+    # Base64 overlay for immediate display
+    buf = io.BytesIO()
+    Image.fromarray(result_image).save(buf, format="PNG")
+    buf.seek(0)
+    overlay_b64 = base64.b64encode(buf.read()).decode("utf-8")
+    return {
+        "id": run.id,
+        "title": run.title,
+        "method": run.method,
+        "statistics": {
+            "totalPixels": total_px,
+            "changedPixels": changed_px,
+            "unchangedPixels": unchanged_px,
+            "changePercentage": change_pct,
+        },
+        "regions": regions_serializable,
+        "overlayBase64Png": overlay_b64,
+        "overlayUrl": f"/api/overlay/{relative_overlay}",
+        "createdAt": run.created_at.isoformat(),
+    }
+
+
+@app.get("/api/overlay/{path:path}")
+def serve_overlay(path: str):
+    # Restrict to overlays directory
+    full = (OVERLAYS_DIR.parent / path).resolve()
+    base = OVERLAYS_DIR.parent.resolve()
+    try:
+        full.relative_to(base)
+    except ValueError:
+        raise HTTPException(404)
+    if not full.exists() or not full.is_file():
+        raise HTTPException(404)
+    return FileResponse(full, media_type="image/png")
+
+
+# --- History ---
+@app.get("/api/history")
+def history(
+    user: Optional[User] = Depends(get_current_user),
+    db: Session = Depends(get_db),
+):
+    if not user:
+        raise HTTPException(status_code=401, detail="Login required")
+    runs = db.query(DetectionRun).filter(DetectionRun.user_id == user.id).order_by(DetectionRun.created_at.desc()).limit(100).all()
+    return [
+        {
+            "id": r.id,
+            "title": r.title,
+            "method": r.method,
+            "changePercentage": r.change_percentage,
+            "regionsCount": r.regions_count,
+            "overlayUrl": f"/api/overlay/{r.overlay_path}" if r.overlay_path else None,
+            "createdAt": r.created_at.isoformat(),
+        }
+        for r in runs
+    ]
+
+
+# --- Delete history run ---
+@app.delete("/api/history/{run_id}")
+def delete_run(
+    run_id: int,
+    user: Optional[User] = Depends(get_current_user),
+    db: Session = Depends(get_db),
+):
+    if not user:
+        raise HTTPException(status_code=401, detail="Login required")
+    run = db.query(DetectionRun).filter(DetectionRun.id == run_id, DetectionRun.user_id == user.id).first()
+    if not run:
+        raise HTTPException(status_code=404, detail="Run not found")
+    # Delete overlay file if it exists
+    if run.overlay_path:
+        overlay_file = OVERLAYS_DIR.parent / run.overlay_path
+        if overlay_file.exists():
+            overlay_file.unlink(missing_ok=True)
+    db.delete(run)
+    db.commit()
+    return {"ok": True, "deleted_id": run_id}
+
+
+# --- Serve SPA ---
+@app.get("/", response_class=HTMLResponse)
+def index():
+    index_file = TEMPLATES_DIR / "index.html"
+    if not index_file.exists():
+        return HTMLResponse("<h1>Satellite Change Detection</h1><p>Create <code>templates/index.html</code> and <code>static/</code>.</p>")
+    return FileResponse(index_file)

app/models.py

@@ -0,0 +1,35 @@
+from datetime import datetime
+from sqlalchemy import Column, Integer, String, DateTime, Text, ForeignKey, Float
+from sqlalchemy.orm import relationship
+
+from .database import Base
+
+
+class User(Base):
+    __tablename__ = "users"
+
+    id = Column(Integer, primary_key=True, index=True)
+    email = Column(String(255), unique=True, index=True, nullable=False)
+    hashed_password = Column(String(255), nullable=False)
+    full_name = Column(String(255), default="")
+    created_at = Column(DateTime, default=datetime.utcnow)
+
+    detections = relationship("DetectionRun", back_populates="user", order_by="desc(DetectionRun.created_at)")
+
+
+class DetectionRun(Base):
+    __tablename__ = "detection_runs"
+
+    id = Column(Integer, primary_key=True, index=True)
+    user_id = Column(Integer, ForeignKey("users.id"), nullable=False)
+    title = Column(String(255), default="Untitled run")
+    method = Column(String(64), nullable=False)
+    total_pixels = Column(Integer, nullable=False)
+    changed_pixels = Column(Integer, nullable=False)
+    change_percentage = Column(Float, nullable=False)
+    regions_count = Column(Integer, default=0)
+    overlay_path = Column(String(512), default="")  # optional: path to saved overlay image
+    regions_json = Column(Text, default="[]")  # JSON list of regions
+    created_at = Column(DateTime, default=datetime.utcnow)
+
+    user = relationship("User", back_populates="detections")

render.yaml

@@ -0,0 +1,22 @@
+# Render Blueprint — one-click deploy for SatDetect
+# https://render.com/docs/blueprint-spec
+
+databases:
+  - name: satdetect-db
+    plan: free
+    databaseName: satdetect
+    user: satdetect
+
+services:
+  - type: web
+    name: satdetect
+    runtime: docker
+    plan: free
+    dockerfilePath: ./Dockerfile
+    envVars:
+      - key: DATABASE_URL
+        fromDatabase:
+          name: satdetect-db
+          property: connectionString
+      - key: SECRET_KEY
+        generateValue: true

requirements.txt

@@ -0,0 +1,13 @@
+fastapi>=0.104.0
+uvicorn[standard]>=0.24.0
+gunicorn>=21.2.0
+python-multipart>=0.0.6
+sqlalchemy>=2.0.0
+psycopg2-binary>=2.9.9
+python-jose[cryptography]>=3.3.0
+passlib[bcrypt]>=1.7.4
+pillow>=10.0.0
+numpy>=1.24.0
+opencv-python-headless>=4.8.0
+scikit-learn>=1.3.0
+scipy>=1.11.0

run.bat

@@ -0,0 +1,8 @@
+@echo off
+cd /d "%~dp0"
+echo Starting Satellite Change Detection...
+echo.
+echo Open in your browser:  http://localhost:8000
+echo.
+start http://localhost:8000
+uvicorn app.main:app --host 127.0.0.1 --port 8000

run.ps1

@@ -0,0 +1,8 @@
+# Run from change_detection_webapp folder
+Set-Location $PSScriptRoot
+Write-Host "Starting Satellite Change Detection..." -ForegroundColor Cyan
+Write-Host ""
+Write-Host "Open in your browser:  http://localhost:8000" -ForegroundColor Green
+Write-Host ""
+Start-Process "http://localhost:8000"
+uvicorn app.main:app --host 127.0.0.1 --port 8000

static/css/style.css

@@ -0,0 +1,683 @@
+/* SatDetect — Modern dark design system */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+:root {
+  --bg-deep: #080b12;
+  --bg-surface: #0f1320;
+  --bg-elevated: #161c2e;
+  --bg-card: #121828;
+  --bg-hover: #1c2540;
+  --border: rgba(148, 163, 184, 0.10);
+  --border-hover: rgba(148, 163, 184, 0.22);
+  --border-focus: rgba(45, 212, 191, 0.5);
+  --text: #f1f5f9;
+  --text-muted: #94a3b8;
+  --text-dim: #64748b;
+  --accent: #2dd4bf;
+  --accent-dim: #14b8a6;
+  --accent-glow: rgba(45, 212, 191, 0.2);
+  --danger: #f87171;
+  --danger-dim: #ef4444;
+  --danger-glow: rgba(248, 113, 113, 0.15);
+  --success: #34d399;
+  --radius: 14px;
+  --radius-sm: 10px;
+  --radius-xs: 6px;
+  --shadow: 0 4px 32px rgba(0, 0, 0, 0.45);
+  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.3);
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+  --transition: 0.2s ease;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg-deep);
+  color: var(--text);
+  min-height: 100vh;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image:
+    radial-gradient(ellipse at 20% 0%, rgba(45, 212, 191, 0.06) 0%, transparent 50%),
+    radial-gradient(ellipse at 80% 100%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.app {
+  position: relative;
+  z-index: 1;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 1.5rem;
+  min-height: 100vh;
+}
+
+/* Views */
+.view { display: none; animation: fadeSlideIn 0.35s ease; }
+.view.active { display: block; }
+
+@keyframes fadeSlideIn {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ---- Auth pages ---- */
+.auth-container { max-width: 420px; margin: 3rem auto; }
+
+.auth-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
+  margin-bottom: 2rem;
+  font-size: 1.3rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  color: var(--text);
+}
+.auth-logo-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, var(--accent), #6366f1);
+  color: #fff;
+}
+
+.auth-container .card { padding: 2rem; }
+.auth-container h2 {
+  font-size: 1.3rem;
+  font-weight: 600;
+  margin-bottom: 0.35rem;
+}
+.auth-container .sub {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  margin-bottom: 1.75rem;
+}
+.auth-container .form-group:last-of-type { margin-bottom: 1.75rem; }
+.toggle-auth {
+  text-align: center;
+  margin-top: 1.5rem;
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+.toggle-auth a {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 500;
+}
+.toggle-auth a:hover { text-decoration: underline; }
+
+/* ---- Cards ---- */
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  box-shadow: var(--shadow);
+}
+.card + .card { margin-top: 1.25rem; }
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin-bottom: 1.25rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+.card-header h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+/* ---- Forms ---- */
+.form-group { margin-bottom: 1.25rem; }
+.form-group label {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  margin-bottom: 0.4rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+input[type="email"],
+input[type="password"],
+input[type="text"],
+select,
+textarea {
+  width: 100%;
+  padding: 0.7rem 0.9rem;
+  font-family: var(--font-sans);
+  font-size: 0.95rem;
+  color: var(--text);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  transition: border-color var(--transition), box-shadow var(--transition);
+}
+input:focus, select:focus, textarea:focus {
+  outline: none;
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px var(--accent-glow);
+}
+
+.checkbox-group label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  text-transform: none;
+  letter-spacing: 0;
+}
+.checkbox-group input[type="checkbox"] {
+  accent-color: var(--accent);
+  width: 16px;
+  height: 16px;
+}
+
+.dim { color: var(--text-dim); }
+
+/* ---- Buttons ---- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.65rem 1.3rem;
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--transition);
+  white-space: nowrap;
+}
+.btn:active { transform: scale(0.97); }
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--accent), #14b8a6);
+  color: var(--bg-deep);
+  font-weight: 600;
+}
+.btn-primary:hover { filter: brightness(1.1); box-shadow: 0 4px 20px var(--accent-glow); }
+
+.btn-secondary {
+  background: var(--bg-elevated);
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-hover); }
+
+.btn-ghost {
+  background: transparent;
+  color: var(--text-muted);
+  padding: 0.5rem 0.75rem;
+}
+.btn-ghost:hover { color: var(--text); background: rgba(255,255,255,0.04); }
+
+.btn-danger {
+  background: var(--danger);
+  color: #fff;
+  font-weight: 600;
+}
+.btn-danger:hover { background: var(--danger-dim); box-shadow: 0 4px 16px var(--danger-glow); }
+
+.btn-icon {
+  background: transparent;
+  color: var(--text-dim);
+  padding: 0.4rem;
+  border-radius: var(--radius-xs);
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  transition: all var(--transition);
+}
+.btn-icon:hover { color: var(--danger); background: var(--danger-glow); }
+
+.btn-block { width: 100%; }
+.btn-sm { font-size: 0.8rem; padding: 0.45rem 0.8rem; }
+.btn-lg { padding: 0.8rem 1.6rem; font-size: 0.95rem; }
+
+/* ---- Nav ---- */
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border);
+}
+.nav-brand {
+  font-weight: 700;
+  font-size: 1.05rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  letter-spacing: -0.02em;
+}
+.nav-user {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.user-badge {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  background: var(--bg-elevated);
+  padding: 0.3rem 0.7rem;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+}
+
+/* ---- Page header ---- */
+.page-header { margin-bottom: 1.75rem; }
+.page-header h1 {
+  font-size: 1.6rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+.page-header p {
+  color: var(--text-muted);
+  margin-top: 0.3rem;
+  font-size: 0.9rem;
+}
+
+/* ---- Upload zones ---- */
+.upload-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1.25rem;
+}
+@media (max-width: 640px) {
+  .upload-grid { grid-template-columns: 1fr; }
+}
+
+.upload-zone {
+  position: relative;
+  border: 2px dashed var(--border);
+  border-radius: var(--radius);
+  padding: 1.75rem 1.5rem;
+  text-align: center;
+  background: var(--bg-elevated);
+  transition: all var(--transition);
+  cursor: pointer;
+}
+.upload-zone:hover, .upload-zone.dragover {
+  border-color: var(--accent);
+  background: rgba(45, 212, 191, 0.04);
+  box-shadow: 0 0 0 4px var(--accent-glow);
+}
+.upload-zone input[type="file"] {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+.upload-icon {
+  color: var(--text-dim);
+  margin-bottom: 0.5rem;
+  transition: color var(--transition);
+}
+.upload-zone:hover .upload-icon { color: var(--accent); }
+.upload-zone label {
+  cursor: pointer;
+  display: block;
+  color: var(--text-muted);
+  font-size: 0.85rem;
+}
+.upload-zone .filename {
+  margin-top: 0.4rem;
+  font-size: 0.8rem;
+  color: var(--accent);
+  font-family: var(--font-mono);
+}
+.upload-preview {
+  margin-top: 0.75rem;
+  max-height: 100px;
+  max-width: 100%;
+  border-radius: var(--radius-xs);
+  object-fit: cover;
+  border: 1px solid var(--border);
+}
+
+.options-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: flex-end;
+}
+.options-row .form-group {
+  margin-bottom: 0;
+  min-width: 160px;
+  flex: 1;
+}
+
+.run-btn-wrap {
+  margin-top: 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+/* ---- Result stats ---- */
+.result-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+.stat-box {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 0.85rem 0.75rem;
+  text-align: center;
+  transition: border-color var(--transition);
+}
+.stat-box:hover { border-color: var(--border-hover); }
+.stat-box .value {
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: var(--accent);
+  font-family: var(--font-mono);
+}
+.stat-box .label {
+  font-size: 0.7rem;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-top: 0.2rem;
+}
+
+/* ---- Compare slider ---- */
+.compare-slider {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  margin-top: 0.75rem;
+  cursor: col-resize;
+  user-select: none;
+  -webkit-user-select: none;
+  background: var(--bg-elevated);
+  line-height: 0;
+}
+.compare-slider img {
+  display: block;
+  width: 100%;
+  height: auto;
+  pointer-events: none;
+}
+.compare-before {
+  position: relative;
+  width: 100%;
+}
+.compare-after {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  overflow: hidden;
+  clip-path: inset(0 0 0 50%);
+}
+.compare-after img {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  object-fit: cover;
+}
+.compare-handle {
+  position: absolute;
+  top: 0; bottom: 0;
+  left: 50%;
+  width: 3px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transform: translateX(-50%);
+  z-index: 10;
+  pointer-events: none;
+}
+.compare-handle-line {
+  flex: 1;
+  width: 2px;
+  background: var(--accent);
+  box-shadow: 0 0 10px var(--accent-glow);
+}
+.compare-handle-knob {
+  width: 36px; height: 36px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--bg-deep);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 16px rgba(0,0,0,0.5), 0 0 20px var(--accent-glow);
+  flex-shrink: 0;
+}
+.compare-label {
+  position: absolute;
+  top: 10px;
+  padding: 3px 10px;
+  border-radius: 20px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  pointer-events: none;
+  line-height: 1.4;
+}
+.compare-label-left {
+  left: 10px;
+  background: rgba(10, 14, 23, 0.8);
+  color: var(--text);
+  backdrop-filter: blur(6px);
+}
+.compare-label-right {
+  right: 10px;
+  background: rgba(248, 113, 113, 0.85);
+  color: #fff;
+  backdrop-filter: blur(6px);
+}
+
+/* ---- Regions table ---- */
+.regions-table-wrap { overflow-x: auto; margin-top: 1.25rem; }
+.regions-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+}
+.regions-table th, .regions-table td {
+  padding: 0.6rem 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+}
+.regions-table th {
+  color: var(--text-dim);
+  font-weight: 600;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: var(--bg-elevated);
+  position: sticky;
+  top: 0;
+}
+.regions-table td { color: var(--text-muted); }
+.regions-table tr:hover td { background: rgba(45, 212, 191, 0.03); }
+.regions-table td:nth-child(2) { color: var(--text); font-weight: 500; }
+
+/* ---- History ---- */
+.history-list { display: flex; flex-direction: column; gap: 0.5rem; }
+.history-empty {
+  text-align: center;
+  color: var(--text-dim);
+  padding: 2rem 1rem;
+  font-size: 0.9rem;
+}
+
+.history-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.85rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  transition: all var(--transition);
+}
+.history-item:hover { border-color: var(--border-hover); background: var(--bg-hover); }
+
+.history-info { flex: 1; min-width: 0; }
+.history-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.history-meta {
+  font-size: 0.78rem;
+  color: var(--text-dim);
+  margin-top: 0.15rem;
+}
+.history-meta .tag {
+  display: inline-block;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  padding: 0.1rem 0.45rem;
+  border-radius: var(--radius-xs);
+  font-size: 0.7rem;
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+  margin-right: 0.3rem;
+}
+
+.history-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-shrink: 0;
+}
+
+/* ---- Modal ---- */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.15s ease;
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.modal {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.75rem;
+  max-width: 400px;
+  width: 90%;
+  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
+}
+.modal h3 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+.modal p {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  margin-bottom: 1.5rem;
+  line-height: 1.5;
+}
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+/* ---- Alerts ---- */
+.alert {
+  padding: 0.7rem 1rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+}
+.alert-error {
+  background: var(--danger-glow);
+  border: 1px solid rgba(248, 113, 113, 0.3);
+  color: var(--danger);
+}
+.alert-success {
+  background: rgba(52, 211, 153, 0.12);
+  border: 1px solid rgba(52, 211, 153, 0.3);
+  color: var(--success);
+}
+
+/* ---- Loading ---- */
+.loading {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+.spinner {
+  width: 18px; height: 18px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ---- Footer ---- */
+.app-footer {
+  margin-top: 3rem;
+  padding: 1.25rem 0;
+  border-top: 1px solid var(--border);
+  text-align: center;
+}
+.app-footer p {
+  font-size: 0.78rem;
+  color: var(--text-dim);
+}
+
+/* ---- Utility ---- */
+.hidden { display: none !important; }
+.mt-1 { margin-top: 0.5rem; }
+.mt-2 { margin-top: 1.25rem; }
+.mb-2 { margin-bottom: 1rem; }

static/js/app.js

@@ -0,0 +1,358 @@
+const API_BASE = '';
+
+function getToken() { return localStorage.getItem('token'); }
+function setToken(token) {
+  if (token) localStorage.setItem('token', token);
+  else localStorage.removeItem('token');
+}
+
+function showView(id) {
+  document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+  const el = document.getElementById('view-' + id);
+  if (el) el.classList.add('active');
+}
+
+function showError(id, msg) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.textContent = msg;
+  el.classList.remove('hidden');
+}
+function hideError(id) {
+  const el = document.getElementById(id);
+  if (el) el.classList.add('hidden');
+}
+function showSuccess(id, msg) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.textContent = msg;
+  el.classList.remove('hidden');
+  setTimeout(() => el.classList.add('hidden'), 4000);
+}
+
+async function api(method, path, options = {}) {
+  const headers = { ...options.headers };
+  const token = getToken();
+  if (token) headers['Authorization'] = 'Bearer ' + token;
+  if (options.body && !(options.body instanceof FormData)) {
+    headers['Content-Type'] = 'application/json';
+  }
+  const res = await fetch(API_BASE + path, { method, headers, credentials: 'include', ...options });
+  const text = await res.text();
+  let data = null;
+  try { data = text ? JSON.parse(text) : null; } catch (_) {}
+  if (!res.ok) throw new Error(data?.detail || res.statusText || 'Request failed');
+  return data;
+}
+
+// ---- Auth ----
+document.getElementById('form-login')?.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  hideError('login-error');
+  const email = document.getElementById('login-email').value.trim();
+  const password = document.getElementById('login-password').value;
+  try {
+    const data = await api('POST', '/api/auth/login', { body: JSON.stringify({ email, password }) });
+    setToken(data.access_token);
+    document.getElementById('user-email').textContent = data.user.email;
+    showView('dashboard');
+    loadHistory();
+  } catch (err) { showError('login-error', err.message); }
+});
+
+document.getElementById('form-register')?.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  hideError('register-error');
+  const full_name = document.getElementById('register-name').value.trim();
+  const email = document.getElementById('register-email').value.trim();
+  const password = document.getElementById('register-password').value;
+  try {
+    const data = await api('POST', '/api/auth/register', { body: JSON.stringify({ email, password, full_name }) });
+    setToken(data.access_token);
+    document.getElementById('user-email').textContent = data.user.email;
+    showView('dashboard');
+    loadHistory();
+  } catch (err) { showError('register-error', err.message); }
+});
+
+document.querySelectorAll('[data-view]').forEach((a) => {
+  a.addEventListener('click', (e) => {
+    e.preventDefault();
+    showView(a.getAttribute('data-view'));
+    hideError('login-error');
+    hideError('register-error');
+  });
+});
+
+document.getElementById('btn-logout')?.addEventListener('click', async () => {
+  try { await fetch(API_BASE + '/api/auth/logout', { method: 'POST', credentials: 'include' }); } catch (_) {}
+  setToken(null);
+  showView('login');
+});
+
+async function init() {
+  const token = getToken();
+  if (!token) { showView('login'); return; }
+  try {
+    const user = await api('GET', '/api/me');
+    document.getElementById('user-email').textContent = user.email;
+    showView('dashboard');
+    loadHistory();
+  } catch (_) { setToken(null); showView('login'); }
+}
+
+// ---- Upload zones with preview ----
+function setupUploadZone(inputId, nameId, zoneId, previewId) {
+  const input = document.getElementById(inputId);
+  const nameEl = document.getElementById(nameId);
+  const zone = document.getElementById(zoneId);
+  const preview = document.getElementById(previewId);
+  if (!input || !nameEl || !zone) return;
+
+  function updatePreview() {
+    const file = input.files?.[0];
+    nameEl.textContent = file ? file.name : 'No file chosen';
+    if (file && preview) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        preview.src = reader.result;
+        preview.classList.remove('hidden');
+      };
+      reader.readAsDataURL(file);
+    } else if (preview) {
+      preview.classList.add('hidden');
+    }
+  }
+
+  input.addEventListener('change', updatePreview);
+  zone.addEventListener('click', () => input.click());
+  zone.addEventListener('dragover', (e) => { e.preventDefault(); zone.classList.add('dragover'); });
+  zone.addEventListener('dragleave', () => zone.classList.remove('dragover'));
+  zone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    zone.classList.remove('dragover');
+    const file = e.dataTransfer?.files?.[0];
+    if (file && file.type.startsWith('image/')) {
+      input.files = e.dataTransfer.files;
+      updatePreview();
+    }
+  });
+}
+
+setupUploadZone('file-before', 'name-before', 'zone-before', 'preview-before');
+setupUploadZone('file-after', 'name-after', 'zone-after', 'preview-after');
+
+// ---- Run detection ----
+document.getElementById('form-detect')?.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  hideError('dashboard-error');
+  const before = document.getElementById('file-before').files?.[0];
+  const after = document.getElementById('file-after').files?.[0];
+  if (!before || !after) {
+    showError('dashboard-error', 'Please select both before and after images.');
+    return;
+  }
+
+  const btn = document.getElementById('btn-run');
+  const loading = document.getElementById('run-loading');
+  btn.disabled = true;
+  loading.classList.remove('hidden');
+
+  const token = getToken();
+  const form = new FormData();
+  form.append('before', before);
+  form.append('after', after);
+  form.append('method', document.getElementById('detect-method').value);
+  form.append('title', document.getElementById('detect-title').value || 'Untitled run');
+  form.append('enable_registration', document.getElementById('detect-registration').checked);
+  form.append('enable_normalization', document.getElementById('detect-normalization').checked);
+  if (token) form.append('access_token', token);
+
+  try {
+    if (!token) {
+      showError('dashboard-error', 'Session expired. Please sign in again.');
+      setToken(null);
+      showView('login');
+      return;
+    }
+    const data = await api('POST', '/api/detect', { body: form });
+    showResult(data);
+    showSuccess('dashboard-success', 'Detection complete!');
+    loadHistory();
+  } catch (err) {
+    showError('dashboard-error', err.message);
+  } finally {
+    btn.disabled = false;
+    loading.classList.add('hidden');
+  }
+});
+
+// ---- Show result ----
+function readFileAsDataURL(file) {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.readAsDataURL(file);
+  });
+}
+
+function showResult(data) {
+  const card = document.getElementById('result-card');
+  const statsEl = document.getElementById('result-stats');
+  const tbody = document.getElementById('regions-tbody');
+
+  statsEl.innerHTML = `
+    <div class="stat-box"><div class="value">${data.statistics.changePercentage.toFixed(2)}%</div><div class="label">Changed</div></div>
+    <div class="stat-box"><div class="value">${data.statistics.changedPixels.toLocaleString()}</div><div class="label">Changed px</div></div>
+    <div class="stat-box"><div class="value">${data.statistics.totalPixels.toLocaleString()}</div><div class="label">Total px</div></div>
+    <div class="stat-box"><div class="value">${(data.regions || []).length}</div><div class="label">Regions</div></div>
+  `;
+
+  const beforeImg = document.getElementById('compare-before-img');
+  const afterImg = document.getElementById('compare-after-img');
+  const beforeFile = document.getElementById('file-before').files?.[0];
+  if (beforeFile) readFileAsDataURL(beforeFile).then((url) => { beforeImg.src = url; });
+
+  afterImg.src = data.overlayBase64Png
+    ? 'data:image/png;base64,' + data.overlayBase64Png
+    : (data.overlayUrl || '');
+
+  resetCompareSlider();
+
+  tbody.innerHTML = '';
+  (data.regions || []).slice(0, 50).forEach((r) => {
+    const tr = document.createElement('tr');
+    tr.innerHTML = `
+      <td>${r.id}</td>
+      <td>${r.objectType}</td>
+      <td>${(r.confidence * 100).toFixed(1)}%</td>
+      <td>${r.area.toLocaleString()}</td>
+      <td>(${r.center.x}, ${r.center.y})</td>
+    `;
+    tbody.appendChild(tr);
+  });
+
+  card.classList.remove('hidden');
+  card.scrollIntoView({ behavior: 'smooth' });
+}
+
+// ---- Compare slider ----
+function initCompareSlider() {
+  const slider = document.getElementById('compare-slider');
+  if (!slider) return;
+  let isDragging = false;
+
+  function updatePosition(clientX) {
+    const rect = slider.getBoundingClientRect();
+    let pct = Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100));
+    document.getElementById('compare-after-clip').style.clipPath = `inset(0 0 0 ${pct}%)`;
+    document.getElementById('compare-handle').style.left = pct + '%';
+  }
+
+  slider.addEventListener('mousedown', (e) => { e.preventDefault(); isDragging = true; updatePosition(e.clientX); });
+  document.addEventListener('mousemove', (e) => { if (isDragging) updatePosition(e.clientX); });
+  document.addEventListener('mouseup', () => { isDragging = false; });
+
+  slider.addEventListener('touchstart', (e) => { isDragging = true; updatePosition(e.touches[0].clientX); }, { passive: true });
+  document.addEventListener('touchmove', (e) => { if (isDragging) updatePosition(e.touches[0].clientX); }, { passive: true });
+  document.addEventListener('touchend', () => { isDragging = false; });
+}
+
+function resetCompareSlider() {
+  const ac = document.getElementById('compare-after-clip');
+  const h = document.getElementById('compare-handle');
+  if (ac) ac.style.clipPath = 'inset(0 0 0 50%)';
+  if (h) h.style.left = '50%';
+}
+
+initCompareSlider();
+
+// ---- History with delete ----
+async function loadHistory() {
+  const list = document.getElementById('history-list');
+  if (!list) return;
+  try {
+    const items = await api('GET', '/api/history');
+    if (!items || items.length === 0) {
+      list.innerHTML = '<div class="history-empty">No detection runs yet. Upload images above to get started.</div>';
+      return;
+    }
+    list.innerHTML = items.map((r) => `
+      <div class="history-item" data-id="${r.id}">
+        <div class="history-info">
+          <div class="history-title">${escapeHtml(r.title)}</div>
+          <div class="history-meta">
+            <span class="tag">${r.method}</span>
+            ${r.changePercentage.toFixed(2)}% changed &middot; ${r.regionsCount} regions &middot; ${formatDate(r.createdAt)}
+          </div>
+        </div>
+        <div class="history-actions">
+          ${r.overlayUrl ? `<a href="${r.overlayUrl}" target="_blank" class="btn btn-secondary btn-sm">View</a>` : ''}
+          <button class="btn-icon" title="Delete this run" onclick="confirmDelete(${r.id})">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
+          </button>
+        </div>
+      </div>
+    `).join('');
+  } catch (_) {
+    list.innerHTML = '<div class="history-empty">Could not load history.</div>';
+  }
+}
+
+function formatDate(iso) {
+  const d = new Date(iso);
+  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+    + ' ' + d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+}
+
+// ---- Delete modal ----
+let pendingDeleteId = null;
+
+function confirmDelete(id) {
+  pendingDeleteId = id;
+  document.getElementById('modal-delete').classList.remove('hidden');
+}
+
+document.getElementById('modal-cancel')?.addEventListener('click', () => {
+  document.getElementById('modal-delete').classList.add('hidden');
+  pendingDeleteId = null;
+});
+
+document.getElementById('modal-confirm')?.addEventListener('click', async () => {
+  if (!pendingDeleteId) return;
+  const id = pendingDeleteId;
+  document.getElementById('modal-delete').classList.add('hidden');
+  pendingDeleteId = null;
+  try {
+    await api('DELETE', `/api/history/${id}`);
+    // Animate removal
+    const item = document.querySelector(`.history-item[data-id="${id}"]`);
+    if (item) {
+      item.style.transition = 'all 0.3s ease';
+      item.style.opacity = '0';
+      item.style.transform = 'translateX(20px)';
+      setTimeout(() => { item.remove(); loadHistory(); }, 300);
+    } else {
+      loadHistory();
+    }
+    showSuccess('dashboard-success', 'Run deleted.');
+  } catch (err) {
+    showError('dashboard-error', err.message);
+  }
+});
+
+// Close modal on backdrop click
+document.getElementById('modal-delete')?.addEventListener('click', (e) => {
+  if (e.target === e.currentTarget) {
+    e.currentTarget.classList.add('hidden');
+    pendingDeleteId = null;
+  }
+});
+
+function escapeHtml(s) {
+  const div = document.createElement('div');
+  div.textContent = s;
+  return div.innerHTML;
+}
+
+init();

templates/index.html

@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Satellite Change Detection</title>
+  <link rel="stylesheet" href="/static/css/style.css" />
+</head>
+<body>
+  <div class="app">
+    <!-- Login view -->
+    <section id="view-login" class="view">
+      <div class="auth-container">
+        <div class="auth-logo">
+          <div class="auth-logo-icon">
+            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
+          </div>
+          <span>SatDetect</span>
+        </div>
+        <div class="card">
+          <h2>Welcome back</h2>
+          <p class="sub">Sign in to your account to continue.</p>
+          <div id="login-error" class="alert alert-error hidden"></div>
+          <form id="form-login">
+            <div class="form-group">
+              <label for="login-email">Email</label>
+              <input type="email" id="login-email" required placeholder="you@example.com" />
+            </div>
+            <div class="form-group">
+              <label for="login-password">Password</label>
+              <input type="password" id="login-password" required placeholder="Enter your password" />
+            </div>
+            <button type="submit" class="btn btn-primary btn-block">Sign in</button>
+          </form>
+          <p class="toggle-auth">Don't have an account? <a href="#" data-view="register">Create one</a></p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Register view -->
+    <section id="view-register" class="view">
+      <div class="auth-container">
+        <div class="auth-logo">
+          <div class="auth-logo-icon">
+            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
+          </div>
+          <span>SatDetect</span>
+        </div>
+        <div class="card">
+          <h2>Create account</h2>
+          <p class="sub">Register to save and manage your detection runs.</p>
+          <div id="register-error" class="alert alert-error hidden"></div>
+          <form id="form-register">
+            <div class="form-group">
+              <label for="register-name">Full name</label>
+              <input type="text" id="register-name" placeholder="Your name" />
+            </div>
+            <div class="form-group">
+              <label for="register-email">Email</label>
+              <input type="email" id="register-email" required placeholder="you@example.com" />
+            </div>
+            <div class="form-group">
+              <label for="register-password">Password</label>
+              <input type="password" id="register-password" required placeholder="Min. 6 characters" minlength="6" />
+            </div>
+            <button type="submit" class="btn btn-primary btn-block">Create account</button>
+          </form>
+          <p class="toggle-auth">Already have an account? <a href="#" data-view="login">Sign in</a></p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Dashboard view -->
+    <section id="view-dashboard" class="view">
+      <nav class="nav">
+        <div class="nav-brand">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
+          <span>SatDetect</span>
+        </div>
+        <div class="nav-user">
+          <span class="user-badge" id="user-email"></span>
+          <button type="button" class="btn btn-ghost btn-sm" id="btn-logout">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+            Log out
+          </button>
+        </div>
+      </nav>
+
+      <header class="page-header">
+        <h1>Change Detection</h1>
+        <p>Upload two satellite images (before &amp; after) to detect and classify ground-level changes.</p>
+      </header>
+
+      <div id="dashboard-error" class="alert alert-error hidden"></div>
+      <div id="dashboard-success" class="alert alert-success hidden"></div>
+
+      <!-- New run card -->
+      <div class="card">
+        <div class="card-header">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+          <h3>New Detection Run</h3>
+        </div>
+        <form id="form-detect">
+          <div class="upload-grid">
+            <div class="upload-zone" id="zone-before">
+              <input type="file" id="file-before" accept="image/png,image/jpeg,image/jpg" />
+              <div class="upload-icon">
+                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+              </div>
+              <label for="file-before">Before image <span class="dim">(older)</span></label>
+              <div class="filename" id="name-before">No file chosen</div>
+              <img class="upload-preview hidden" id="preview-before" alt="" />
+            </div>
+            <div class="upload-zone" id="zone-after">
+              <input type="file" id="file-after" accept="image/png,image/jpeg,image/jpg" />
+              <div class="upload-icon">
+                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+              </div>
+              <label for="file-after">After image <span class="dim">(current)</span></label>
+              <div class="filename" id="name-after">No file chosen</div>
+              <img class="upload-preview hidden" id="preview-after" alt="" />
+            </div>
+          </div>
+          <div class="options-row">
+            <div class="form-group">
+              <label for="detect-title">Title</label>
+              <input type="text" id="detect-title" value="Untitled run" placeholder="Run title" />
+            </div>
+            <div class="form-group">
+              <label for="detect-method">Method</label>
+              <select id="detect-method">
+                <option value="AI-Based Deep Learning">AI-Based Deep Learning</option>
+                <option value="Image Difference">Image Difference</option>
+                <option value="Feature-Based">Feature-Based</option>
+                <option value="Hybrid Approach">Hybrid Approach</option>
+              </select>
+            </div>
+            <div class="form-group checkbox-group">
+              <label><input type="checkbox" id="detect-registration" checked /> Image Registration</label>
+            </div>
+            <div class="form-group checkbox-group">
+              <label><input type="checkbox" id="detect-normalization" checked /> Radiometric Normalization</label>
+            </div>
+          </div>
+          <div class="run-btn-wrap">
+            <button type="submit" class="btn btn-primary btn-lg" id="btn-run">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+              Run Detection
+            </button>
+            <span class="loading hidden" id="run-loading"><span class="spinner"></span> Analyzing images...</span>
+          </div>
+        </form>
+      </div>
+
+      <!-- Result card (shown after a run) -->
+      <div class="card hidden" id="result-card">
+        <div class="card-header">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+          <h3>Detection Result</h3>
+        </div>
+        <div class="result-stats" id="result-stats"></div>
+
+        <!-- Before / After comparison slider -->
+        <div class="compare-slider" id="compare-slider">
+          <div class="compare-before">
+            <img id="compare-before-img" alt="Before" draggable="false" />
+            <span class="compare-label compare-label-left">Before</span>
+          </div>
+          <div class="compare-after" id="compare-after-clip">
+            <img id="compare-after-img" alt="Changes detected" draggable="false" />
+            <span class="compare-label compare-label-right">Changes</span>
+          </div>
+          <div class="compare-handle" id="compare-handle">
+            <div class="compare-handle-line"></div>
+            <div class="compare-handle-knob">
+              <svg width="20" height="20" viewBox="0 0 20 20"><path d="M6 10l4-5v10z" fill="currentColor"/><path d="M14 10l-4-5v10z" fill="currentColor"/></svg>
+            </div>
+            <div class="compare-handle-line"></div>
+          </div>
+        </div>
+
+        <div class="regions-table-wrap">
+          <table class="regions-table" id="regions-table">
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>Ground Change Type</th>
+                <th>Confidence</th>
+                <th>Area (px)</th>
+                <th>Center</th>
+              </tr>
+            </thead>
+            <tbody id="regions-tbody"></tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- History -->
+      <div class="card mt-2">
+        <div class="card-header">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+          <h3>History</h3>
+        </div>
+        <div id="history-list" class="history-list"></div>
+      </div>
+
+      <footer class="app-footer">
+        <p>SatDetect &mdash; Satellite Change Detection &middot; Powered by multi-signal fusion analysis</p>
+      </footer>
+    </section>
+  </div>
+
+  <!-- Delete confirm modal -->
+  <div class="modal-backdrop hidden" id="modal-delete">
+    <div class="modal">
+      <h3>Delete detection run?</h3>
+      <p>This will permanently remove this run and its overlay image. This cannot be undone.</p>
+      <div class="modal-actions">
+        <button class="btn btn-secondary" id="modal-cancel">Cancel</button>
+        <button class="btn btn-danger" id="modal-confirm">Delete</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="/static/js/app.js?v=5"></script>
+</body>
+</html>