made a inference model and added the inference script, requirements.txt, and the flask app to the repository. The inference script is a jupyter notebook that contains the code for loading the model and making predictions on new images. The flask app is a simple web application that allows users to upload images and get predictions from the model. The requirements.txt file contains the necessary dependencies for running the flask app.

app.py

@@ -0,0 +1,173 @@
+import torch
+import torch.nn as nn
+import segmentation_models_pytorch as smp
+from torchvision import transforms
+from PIL import Image
+import numpy as np
+import base64
+import io
+import cv2
+from flask import Flask, request, jsonify, send_from_directory
+import os
+
+app = Flask(__name__, static_folder="static")
+
+# ── Model — exact same as training ────────────────────────────
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+
+model = smp.Unet(
+    encoder_name="efficientnet-b3",
+    encoder_weights=None,  # no pretrained needed at inference
+    in_channels=3,
+    classes=1,
+    activation=None,  # raw logits, same as training
+)
+
+MODEL_PATH = "best_model.pth"
+if os.path.exists(MODEL_PATH):
+    model.load_state_dict(torch.load(MODEL_PATH, map_location=device, weight_only=True))
+    print(f"✅ Model loaded — device: {device}")
+else:
+    print("⚠️  best_model.pth not found — running in demo mode")
+
+model.to(device)
+model.eval()
+
+# ── Preprocessing — matches val_transform from training ───────
+mean = np.array([0.485, 0.456, 0.406])
+std = np.array([0.229, 0.224, 0.225])
+
+
+def preprocess(pil_img, patch_size=256):
+    """Resize to nearest multiple of patch_size, normalize, tensorize."""
+    img = np.array(pil_img.convert("RGB"))
+    h, w = img.shape[:2]
+
+    # Pad to multiple of patch_size
+    new_h = ((h + patch_size - 1) // patch_size) * patch_size
+    new_w = ((w + patch_size - 1) // patch_size) * patch_size
+    padded = np.zeros((new_h, new_w, 3), dtype=np.float32)
+    padded[:h, :w] = img
+
+    # Normalize
+    padded = padded / 255.0
+    padded = (padded - mean) / std
+
+    tensor = torch.tensor(padded).permute(2, 0, 1).float().unsqueeze(0)
+    return tensor, (h, w)
+
+
+def run_inference(pil_img, patch_size=256):
+    """Run patch-based inference matching training patch extraction."""
+    img = np.array(pil_img.convert("RGB"))
+    h, w = img.shape[:2]
+
+    # Pad to multiple of patch_size
+    new_h = ((h + patch_size - 1) // patch_size) * patch_size
+    new_w = ((w + patch_size - 1) // patch_size) * patch_size
+    padded = np.zeros((new_h, new_w, 3), dtype=np.uint8)
+    padded[:h, :w] = img
+
+    full_mask = np.zeros((new_h, new_w), dtype=np.float32)
+
+    for i in range(0, new_h, patch_size):
+        for j in range(0, new_w, patch_size):
+            patch = (
+                padded[i : i + patch_size, j : j + patch_size].astype(np.float32)
+                / 255.0
+            )
+            patch = (patch - mean) / std
+            tensor = (
+                torch.tensor(patch).permute(2, 0, 1).float().unsqueeze(0).to(device)
+            )
+
+            with torch.no_grad():
+                out = model(tensor)
+                prob = torch.sigmoid(out).squeeze().cpu().numpy()
+
+            full_mask[i : i + patch_size, j : j + patch_size] = prob
+
+    return full_mask[:h, :w], img
+
+
+# ── Zoning + illegal detection (from your notebook) ───────────
+def create_zoning_mask(shape):
+    h, w = shape
+    zoning = np.zeros((h, w), dtype=np.uint8)
+    zoning[:, w // 2 :] = 1
+    return zoning
+
+
+def detect_illegal_buildings(binary_mask, zoning_mask):
+    num_labels, labels = cv2.connectedComponents(binary_mask.astype(np.uint8))
+    illegal, legal = [], []
+    for label in range(1, num_labels):
+        building_pixels = labels == label
+        if (building_pixels & (zoning_mask == 1)).any():
+            illegal.append(label)
+        else:
+            legal.append(label)
+    return illegal, legal, labels
+
+
+def to_base64(arr_or_img):
+    if isinstance(arr_or_img, np.ndarray):
+        img = Image.fromarray(arr_or_img.astype(np.uint8))
+    else:
+        img = arr_or_img
+    buf = io.BytesIO()
+    img.save(buf, format="PNG")
+    return base64.b64encode(buf.getvalue()).decode()
+
+
+# ── Routes ────────────────────────────────────────────────────
+@app.route("/")
+def index():
+    return send_from_directory("static", "index.html")
+
+
+@app.route("/predict", methods=["POST"])
+def predict():
+    if "image" not in request.files:
+        return jsonify({"error": "No image provided"}), 400
+
+    file = request.files["image"]
+    pil_img = Image.open(file.stream).convert("RGB")
+
+    # Run patch-based segmentation
+    prob_mask, orig_rgb = run_inference(pil_img, patch_size=256)
+    binary_mask = (prob_mask > 0.5).astype(np.uint8)
+
+    # Zoning-based illegal detection
+    zoning_mask = create_zoning_mask(binary_mask.shape)
+    illegal, legal, labels = detect_illegal_buildings(binary_mask, zoning_mask)
+
+    # Build overlay: illegal=red, legal=green
+    overlay = orig_rgb.copy()
+    for lbl in illegal:
+        overlay[labels == lbl] = [255, 0, 0]
+    for lbl in legal:
+        overlay[labels == lbl] = [0, 200, 100]
+
+    total = len(illegal) + len(legal)
+    illegal_pct = round(float(binary_mask.mean() * 100), 2)
+    verdict = "ILLEGAL CONSTRUCTION DETECTED" if illegal else "NO VIOLATION DETECTED"
+
+    return jsonify(
+        {
+            "verdict": verdict,
+            "illegal_count": len(illegal),
+            "legal_count": len(legal),
+            "total_count": total,
+            "illegal_percent": illegal_pct,
+            "device": str(device),
+            "original": to_base64(orig_rgb),
+            "mask": to_base64((prob_mask * 255).astype(np.uint8)),
+            "overlay": to_base64(overlay),
+        }
+    )
+
+
+if __name__ == "__main__":
+    print(f"Running on: {device}")
+    app.run(debug=True, port=5000)

best_model.pth

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c65c14958276bafc09cb99befaaffcbc7ace552bf1b7dfdc7204c499f4056d22
+size 53223435

inference script.ipynb

@@ -0,0 +1,227 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "5d4984fd",
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Note: you may need to restart the kernel to use updated packages.\n"
+     ]
+    },
+    {
+     "name": "stderr",
+     "output_type": "stream",
+     "text": [
+      "ERROR: pip's dependency resolver does not currently take into account all the packages that are installed. This behaviour is the source of the following dependency conflicts.\n",
+      "gradio 5.43.1 requires fastapi<1.0,>=0.115.2, but you have fastapi 0.115.0 which is incompatible.\n",
+      "gradio 5.43.1 requires pydantic<2.12,>=2.0, but you have pydantic 2.12.5 which is incompatible.\n",
+      "gradio 5.43.1 requires starlette<1.0,>=0.40.0; sys_platform != \"emscripten\", but you have starlette 0.38.6 which is incompatible.\n"
+     ]
+    }
+   ],
+   "source": [
+    "%pip install -q torch torchvision pillow opencv-python segmentation-models-pytorch albumentations"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "id": "8e934e27",
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "OSError",
+     "evalue": "[WinError 126] The specified module could not be found. Error loading \"c:\\Users\\abhay\\anaconda3\\Lib\\site-packages\\torch\\lib\\fbgemm.dll\" or one of its dependencies.",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
+      "\u001b[1;31mOSError\u001b[0m                                   Traceback (most recent call last)",
+      "Cell \u001b[1;32mIn[2], line 1\u001b[0m\n\u001b[1;32m----> 1\u001b[0m \u001b[38;5;28;01mimport\u001b[39;00m \u001b[38;5;21;01mtorch\u001b[39;00m\n\u001b[0;32m      2\u001b[0m \u001b[38;5;28;01mimport\u001b[39;00m \u001b[38;5;21;01mtorchvision\u001b[39;00m\u001b[38;5;21;01m.\u001b[39;00m\u001b[38;5;21;01mtransforms\u001b[39;00m \u001b[38;5;28;01mas\u001b[39;00m \u001b[38;5;21;01mtransforms\u001b[39;00m\n\u001b[0;32m      3\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01mPIL\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m Image\n",
+      "File \u001b[1;32mc:\\Users\\abhay\\anaconda3\\Lib\\site-packages\\torch\\__init__.py:148\u001b[0m\n\u001b[0;32m    146\u001b[0m                 err \u001b[38;5;241m=\u001b[39m ctypes\u001b[38;5;241m.\u001b[39mWinError(ctypes\u001b[38;5;241m.\u001b[39mget_last_error())\n\u001b[0;32m    147\u001b[0m                 err\u001b[38;5;241m.\u001b[39mstrerror \u001b[38;5;241m+\u001b[39m\u001b[38;5;241m=\u001b[39m \u001b[38;5;124mf\u001b[39m\u001b[38;5;124m'\u001b[39m\u001b[38;5;124m Error loading \u001b[39m\u001b[38;5;124m\"\u001b[39m\u001b[38;5;132;01m{\u001b[39;00mdll\u001b[38;5;132;01m}\u001b[39;00m\u001b[38;5;124m\"\u001b[39m\u001b[38;5;124m or one of its dependencies.\u001b[39m\u001b[38;5;124m'\u001b[39m\n\u001b[1;32m--> 148\u001b[0m                 \u001b[38;5;28;01mraise\u001b[39;00m err\n\u001b[0;32m    150\u001b[0m     kernel32\u001b[38;5;241m.\u001b[39mSetErrorMode(prev_error_mode)\n\u001b[0;32m    153\u001b[0m \u001b[38;5;28;01mdef\u001b[39;00m \u001b[38;5;21m_preload_cuda_deps\u001b[39m(lib_folder, lib_name):\n",
+      "\u001b[1;31mOSError\u001b[0m: [WinError 126] The specified module could not be found. Error loading \"c:\\Users\\abhay\\anaconda3\\Lib\\site-packages\\torch\\lib\\fbgemm.dll\" or one of its dependencies."
+     ]
+    }
+   ],
+   "source": [
+    "import torch\n",
+    "import torchvision.transforms as transforms\n",
+    "from PIL import Image\n",
+    "import cv2\n",
+    "import numpy as np\n",
+    "import matplotlib.pyplot as plt\n",
+    "import segmentation_models_pytorch as smp\n",
+    "import albumentations as A\n",
+    "from albumentations.pytorch import ToTensorV2\n",
+    "\n",
+    "device = torch.device(\"cuda\" if torch.cuda.is_available() else \"cpu\")\n",
+    "print(\"Using device:\", device)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "f37c3d10",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# ── Load trained model ──────────────────────────────────────────────────────\n",
+    "MODEL_PATH = \"best_model.pth\"   # path to saved weights\n",
+    "\n",
+    "model = smp.Unet(\n",
+    "    encoder_name=\"efficientnet-b3\",\n",
+    "    encoder_weights=None,          # weights loaded from checkpoint\n",
+    "    in_channels=3,\n",
+    "    classes=1,\n",
+    "    activation=None\n",
+    ")\n",
+    "model.load_state_dict(torch.load(MODEL_PATH, map_location=device))\n",
+    "model.to(device)\n",
+    "model.eval()\n",
+    "print(\"Model loaded successfully.\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "c63c88a3",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# ── Preprocess & run inference ───────────��───────────────────────────────────\n",
+    "IMAGE_PATH = r\"test images\\test 1.png\"   # test image\n",
+    "PATCH_SIZE  = 256\n",
+    "\n",
+    "transform = A.Compose([\n",
+    "    A.Normalize(mean=(0.485, 0.456, 0.406),\n",
+    "                std=(0.229, 0.224, 0.225)),\n",
+    "    ToTensorV2()\n",
+    "])\n",
+    "\n",
+    "# Load image\n",
+    "img_bgr = cv2.imread(IMAGE_PATH)\n",
+    "assert img_bgr is not None, f\"Could not read image: {IMAGE_PATH}\"\n",
+    "img_rgb = cv2.cvtColor(img_bgr, cv2.COLOR_BGR2RGB)\n",
+    "\n",
+    "h, w = img_rgb.shape[:2]\n",
+    "\n",
+    "# Pad so dimensions are divisible by PATCH_SIZE\n",
+    "pad_h = (PATCH_SIZE - h % PATCH_SIZE) % PATCH_SIZE\n",
+    "pad_w = (PATCH_SIZE - w % PATCH_SIZE) % PATCH_SIZE\n",
+    "img_padded = np.pad(img_rgb, ((0, pad_h), (0, pad_w), (0, 0)), mode='reflect')\n",
+    "H, W = img_padded.shape[:2]\n",
+    "\n",
+    "# Stitch patch predictions into a full mask\n",
+    "full_mask = np.zeros((H, W), dtype=np.float32)\n",
+    "\n",
+    "with torch.no_grad():\n",
+    "    for i in range(0, H, PATCH_SIZE):\n",
+    "        for j in range(0, W, PATCH_SIZE):\n",
+    "            patch = img_padded[i:i+PATCH_SIZE, j:j+PATCH_SIZE]\n",
+    "            tensor = transform(image=patch)[\"image\"].unsqueeze(0).to(device)\n",
+    "            pred   = torch.sigmoid(model(tensor)).squeeze().cpu().numpy()\n",
+    "            full_mask[i:i+PATCH_SIZE, j:j+PATCH_SIZE] = pred\n",
+    "\n",
+    "# Crop back to original size\n",
+    "pred_mask = (full_mask[:h, :w] > 0.5).astype(np.uint8)\n",
+    "print(f\"Inference done. Image size: {h}×{w} | Buildings detected: {pred_mask.sum()>0}\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "ffbae7d8",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# ── Zoning mask & illegal building detection ─────────────────────────────────\n",
+    "# Default zoning: right half is restricted. Modify as needed.\n",
+    "def create_zoning_mask(shape):\n",
+    "    \"\"\"Returns a binary mask (1 = restricted zone).\"\"\"\n",
+    "    zm = np.zeros(shape, dtype=np.uint8)\n",
+    "    zm[:, shape[1] // 2:] = 1\n",
+    "    return zm\n",
+    "\n",
+    "def detect_illegal_buildings(building_mask, zoning_mask):\n",
+    "    num_labels, labels = cv2.connectedComponents(building_mask)\n",
+    "    illegal, legal = [], []\n",
+    "    for lbl in range(1, num_labels):\n",
+    "        pixels = (labels == lbl)\n",
+    "        if (pixels & (zoning_mask == 1)).any():\n",
+    "            illegal.append(lbl)\n",
+    "        else:\n",
+    "            legal.append(lbl)\n",
+    "    return illegal, legal, labels\n",
+    "\n",
+    "def overlay_illegal(image_rgb, labels, illegal_buildings):\n",
+    "    out = image_rgb.copy()\n",
+    "    for lbl in illegal_buildings:\n",
+    "        out[labels == lbl] = [255, 0, 0]   # red highlight\n",
+    "    return out\n",
+    "\n",
+    "zoning_mask = create_zoning_mask(pred_mask.shape)\n",
+    "illegal, legal, labels = detect_illegal_buildings(pred_mask, zoning_mask)\n",
+    "overlay = overlay_illegal(img_rgb, labels, illegal)\n",
+    "\n",
+    "print(f\"Total buildings : {len(illegal) + len(legal)}\")\n",
+    "print(f\"Illegal buildings: {len(illegal)}\")\n",
+    "print(f\"Legal  buildings : {len(legal)}\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "6692053a",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# ── Visualize results ────────────────────────────────────────────────────────\n",
+    "fig, axes = plt.subplots(1, 4, figsize=(20, 5))\n",
+    "\n",
+    "axes[0].imshow(img_rgb)\n",
+    "axes[0].set_title(\"Input Image\")\n",
+    "axes[0].axis(\"off\")\n",
+    "\n",
+    "axes[1].imshow(pred_mask, cmap=\"gray\")\n",
+    "axes[1].set_title(\"Building Mask\")\n",
+    "axes[1].axis(\"off\")\n",
+    "\n",
+    "axes[2].imshow(zoning_mask, cmap=\"gray\")\n",
+    "axes[2].set_title(\"Zoning Mask\\n(white = restricted)\")\n",
+    "axes[2].axis(\"off\")\n",
+    "\n",
+    "axes[3].imshow(overlay)\n",
+    "axes[3].set_title(f\"Illegal Buildings (red)\\nIllegal: {len(illegal)} | Legal: {len(legal)}\")\n",
+    "axes[3].axis(\"off\")\n",
+    "\n",
+    "plt.tight_layout()\n",
+    "plt.show()"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": ".venv",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

requirements.txt

@@ -0,0 +1,8 @@
+flask
+torch
+torchvision
+segmentation-models-pytorch
+albumentations
+opencv-python
+pillow
+numpy

static/index.html

@@ -0,0 +1,272 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>ConstructScan — Illegal Construction Detector</title>
+<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"/>
+<style>
+  :root {
+    --bg: #0a0a0a;
+    --surface: #111111;
+    --surface2: #1a1a1a;
+    --border: #2a2a2a;
+    --accent: #ff3c00;
+    --text: #f0ede8;
+    --muted: #666;
+    --safe: #00e676;
+    --danger: #ff3c00;
+  }
+  * { margin:0; padding:0; box-sizing:border-box; }
+  body { background:var(--bg); color:var(--text); font-family:'DM Sans',sans-serif; min-height:100vh; }
+  body::before {
+    content:''; position:fixed; inset:0; pointer-events:none; z-index:999;
+    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
+  }
+  header {
+    border-bottom:1px solid var(--border); padding:1.2rem 2.5rem;
+    display:flex; align-items:center; justify-content:space-between;
+    position:sticky; top:0; background:rgba(10,10,10,0.96); backdrop-filter:blur(12px); z-index:100;
+  }
+  .logo { font-family:'Bebas Neue',sans-serif; font-size:1.7rem; letter-spacing:.1em; }
+  .logo span { color:var(--accent); }
+  .badge {
+    font-family:'DM Mono',monospace; font-size:.65rem; letter-spacing:.15em;
+    text-transform:uppercase; padding:.3rem .7rem; border:1px solid var(--border); color:var(--muted);
+  }
+  main { max-width:1100px; margin:0 auto; padding:3.5rem 2rem; }
+  .hero { margin-bottom:3rem; }
+  .hero h1 {
+    font-family:'Bebas Neue',sans-serif; font-size:clamp(2.8rem,7vw,6rem);
+    line-height:.92; letter-spacing:.02em; margin-bottom:1.2rem;
+  }
+  .hero h1 em { font-style:normal; color:var(--accent); display:block; }
+  .hero p { font-size:.95rem; color:var(--muted); max-width:460px; line-height:1.7; font-weight:300; }
+
+  .upload-zone {
+    border:1px dashed var(--border); padding:2.5rem 2rem; text-align:center;
+    cursor:pointer; background:var(--surface); position:relative; transition:all .2s;
+    margin-bottom:1rem;
+  }
+  .upload-zone:hover, .upload-zone.drag-over { border-color:var(--accent); background:#1a0906; }
+  .upload-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
+  .upload-zone svg { width:40px; height:40px; margin:0 auto .8rem; opacity:.35; display:block; }
+  .upload-zone h3 {
+    font-family:'DM Mono',monospace; font-size:.8rem; letter-spacing:.1em;
+    text-transform:uppercase; color:var(--muted); margin-bottom:.4rem;
+  }
+  .upload-zone p { font-size:.75rem; color:#444; }
+
+  #preview-wrap { display:none; margin-bottom:1rem; position:relative; }
+  #preview-img { width:100%; max-height:280px; object-fit:cover; display:block; }
+  .preview-tag {
+    position:absolute; top:.8rem; left:.8rem; font-family:'DM Mono',monospace;
+    font-size:.6rem; letter-spacing:.15em; text-transform:uppercase;
+    background:rgba(0,0,0,.85); padding:.25rem .55rem; color:var(--muted);
+  }
+
+  .btn {
+    width:100%; padding:1.1rem; background:var(--accent); color:#fff; border:none;
+    font-family:'Bebas Neue',sans-serif; font-size:1.3rem; letter-spacing:.15em;
+    cursor:pointer; transition:background .2s; display:flex; align-items:center; justify-content:center; gap:.7rem;
+  }
+  .btn:hover { background:#e03500; }
+  .btn:disabled { background:#333; color:#555; cursor:not-allowed; }
+  .spinner {
+    width:18px; height:18px; border:2px solid rgba(255,255,255,.25); border-top-color:#fff;
+    border-radius:50%; animation:spin .7s linear infinite; display:none;
+  }
+  @keyframes spin { to { transform:rotate(360deg); } }
+
+  #error { display:none; margin-top:.8rem; padding:.9rem 1.2rem; background:#1a0500; border-left:3px solid var(--danger); font-family:'DM Mono',monospace; font-size:.75rem; color:var(--danger); }
+
+  #results { display:none; margin-top:2.5rem; animation:fadeUp .45s ease forwards; }
+  @keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
+
+  .verdict-bar {
+    padding:1.8rem 2rem; margin-bottom:1px; display:flex;
+    align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
+  }
+  .verdict-bar.danger { background:#1a0400; border-left:4px solid var(--danger); }
+  .verdict-bar.safe   { background:#001508; border-left:4px solid var(--safe); }
+  .verdict-label { font-family:'Bebas Neue',sans-serif; font-size:clamp(1.4rem,3.5vw,2.5rem); letter-spacing:.04em; }
+  .verdict-bar.danger .verdict-label { color:var(--danger); }
+  .verdict-bar.safe   .verdict-label { color:var(--safe); }
+  .verdict-meta { display:flex; gap:2rem; }
+  .vmeta-item { text-align:right; }
+  .vmeta-item .num { font-family:'Bebas Neue',sans-serif; font-size:2.2rem; line-height:1; }
+  .vmeta-item .key { font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
+
+  .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); margin-bottom:1px; }
+  .img-panel { background:var(--surface); overflow:hidden; }
+  .panel-label {
+    padding:.6rem 1rem; font-family:'DM Mono',monospace; font-size:.6rem;
+    letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
+    border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.4rem;
+  }
+  .dot { width:5px; height:5px; border-radius:50%; background:var(--accent); }
+  .dot.g { background:var(--safe); }
+  .img-panel img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
+
+  .stats4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); }
+  .stat { background:var(--surface2); padding:1.3rem 1.5rem; }
+  .stat .v { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; color:var(--text); line-height:1; margin-bottom:.25rem; }
+  .stat .k { font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
+
+  @media(max-width:700px) {
+    header { padding:1rem; }
+    main { padding:2rem 1rem; }
+    .grid3, .stats4 { grid-template-columns:1fr; }
+    .verdict-meta { gap:1rem; }
+  }
+</style>
+</head>
+<body>
+
+<header>
+  <div class="logo">Construct<span>Scan</span></div>
+  <div class="badge">EfficientNet-B3 · U-Net · SMP</div>
+</header>
+
+<main>
+  <div class="hero">
+    <h1>Detect <em>Illegal</em> Construction</h1>
+    <p>Upload a satellite or aerial image. The model segments buildings, then flags those in restricted zones as illegal.</p>
+  </div>
+
+  <div class="upload-zone" id="upload-zone">
+    <input type="file" id="file-input" accept="image/*"/>
+    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5">
+      <rect x="4" y="4" width="40" height="40" rx="2"/>
+      <path d="M24 32V16M16 24l8-8 8 8"/>
+    </svg>
+    <h3>Drop image here or click to upload</h3>
+    <p>Satellite / aerial imagery — JPG, PNG, TIFF</p>
+  </div>
+
+  <div id="preview-wrap">
+    <img id="preview-img" src="" alt="Preview"/>
+    <span class="preview-tag">Input</span>
+  </div>
+
+  <button class="btn" id="analyze-btn" disabled>
+    <div class="spinner" id="spinner"></div>
+    <span id="btn-text">ANALYZE IMAGE</span>
+  </button>
+
+  <div id="error"></div>
+
+  <div id="results">
+    <div class="verdict-bar" id="verdict-bar">
+      <div class="verdict-label" id="verdict-label"></div>
+      <div class="verdict-meta">
+        <div class="vmeta-item">
+          <div class="num" id="vm-illegal">0</div>
+          <div class="key">Illegal Buildings</div>
+        </div>
+        <div class="vmeta-item">
+          <div class="num" id="vm-total">0</div>
+          <div class="key">Total Buildings</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid3">
+      <div class="img-panel">
+        <div class="panel-label"><span class="dot g"></span> Original</div>
+        <img id="out-orig" src="" alt="Original"/>
+      </div>
+      <div class="img-panel">
+        <div class="panel-label"><span class="dot"></span> Segmentation Mask</div>
+        <img id="out-mask" src="" alt="Mask"/>
+      </div>
+      <div class="img-panel">
+        <div class="panel-label"><span class="dot"></span> Illegal Overlay</div>
+        <img id="out-overlay" src="" alt="Overlay"/>
+      </div>
+    </div>
+
+    <div class="stats4">
+      <div class="stat"><div class="v" id="s-illegal">—</div><div class="k">Illegal Buildings</div></div>
+      <div class="stat"><div class="v" id="s-legal">—</div><div class="k">Legal Buildings</div></div>
+      <div class="stat"><div class="v" id="s-pct">—</div><div class="k">Area Flagged %</div></div>
+      <div class="stat"><div class="v" id="s-device">—</div><div class="k">Inference Device</div></div>
+    </div>
+  </div>
+</main>
+
+<script>
+  const fileInput = document.getElementById('file-input');
+  const uploadZone = document.getElementById('upload-zone');
+  const previewWrap = document.getElementById('preview-wrap');
+  const previewImg = document.getElementById('preview-img');
+  const analyzeBtn = document.getElementById('analyze-btn');
+  const spinner = document.getElementById('spinner');
+  const btnText = document.getElementById('btn-text');
+  const errorDiv = document.getElementById('error');
+  const results = document.getElementById('results');
+  let selectedFile = null;
+
+  uploadZone.addEventListener('dragover', e => { e.preventDefault(); uploadZone.classList.add('drag-over'); });
+  uploadZone.addEventListener('dragleave', () => uploadZone.classList.remove('drag-over'));
+  uploadZone.addEventListener('drop', e => {
+    e.preventDefault(); uploadZone.classList.remove('drag-over');
+    if (e.dataTransfer.files[0]) handleFile(e.dataTransfer.files[0]);
+  });
+  fileInput.addEventListener('change', () => { if (fileInput.files[0]) handleFile(fileInput.files[0]); });
+
+  function handleFile(file) {
+    selectedFile = file;
+    const r = new FileReader();
+    r.onload = e => { previewImg.src = e.target.result; previewWrap.style.display = 'block'; };
+    r.readAsDataURL(file);
+    analyzeBtn.disabled = false;
+    results.style.display = 'none';
+    errorDiv.style.display = 'none';
+  }
+
+  analyzeBtn.addEventListener('click', async () => {
+    if (!selectedFile) return;
+    analyzeBtn.disabled = true;
+    spinner.style.display = 'block';
+    btnText.textContent = 'ANALYZING...';
+    errorDiv.style.display = 'none';
+    results.style.display = 'none';
+
+    const fd = new FormData();
+    fd.append('image', selectedFile);
+
+    try {
+      const res = await fetch('/predict', { method:'POST', body:fd });
+      const d = await res.json();
+      if (d.error) throw new Error(d.error);
+
+      const isIllegal = d.illegal_count > 0;
+      const bar = document.getElementById('verdict-bar');
+      bar.className = 'verdict-bar ' + (isIllegal ? 'danger' : 'safe');
+      document.getElementById('verdict-label').textContent = d.verdict;
+      document.getElementById('vm-illegal').textContent = d.illegal_count;
+      document.getElementById('vm-total').textContent = d.total_count;
+
+      document.getElementById('out-orig').src    = 'data:image/png;base64,' + d.original;
+      document.getElementById('out-mask').src    = 'data:image/png;base64,' + d.mask;
+      document.getElementById('out-overlay').src = 'data:image/png;base64,' + d.overlay;
+
+      document.getElementById('s-illegal').textContent = d.illegal_count;
+      document.getElementById('s-legal').textContent   = d.legal_count;
+      document.getElementById('s-pct').textContent     = d.illegal_percent + '%';
+      document.getElementById('s-device').textContent  = d.device.toUpperCase();
+
+      results.style.display = 'block';
+    } catch(err) {
+      errorDiv.textContent = '⚠ ' + (err.message || 'Server error. Is Flask running?');
+      errorDiv.style.display = 'block';
+    } finally {
+      analyzeBtn.disabled = false;
+      spinner.style.display = 'none';
+      btnText.textContent = 'ANALYZE AGAIN';
+    }
+  });
+</script>
+</body>
+</html>