Spaces:
Running
Running
| """ | |
| app.py — PV Detector HuggingFace Space | |
| GPS → IGN imagery → clf+seg → pypvroof → stats + overlay image | |
| """ | |
| import base64 | |
| import json | |
| import math | |
| import os | |
| import time | |
| import tempfile | |
| import importlib.util | |
| from concurrent.futures import ThreadPoolExecutor | |
| import cv2 | |
| import folium | |
| import gradio as gr | |
| import requests | |
| import torch | |
| import numpy as np | |
| from PIL import Image | |
| from io import BytesIO | |
| import geojson as gj | |
| from area import area as geojson_area | |
| from shapely.geometry import shape, mapping, Polygon | |
| from shapely.ops import unary_union | |
| from huggingface_hub import hf_hub_download | |
| # ── Constants ───────────────────────────────────────────────────────────────── | |
| GSD = 0.2 | |
| CLF_PX = 299 # native patch size: fetched at 299 px / 0.2 m/px (59.8 m) | |
| SEG_PX = 400 # segmentation input size (patch upscaled, georef unchanged) | |
| CLF_THR = 0.15 | |
| # ── Models (loaded once) ─────────────────────────────────────────────────────── | |
| _clf = None | |
| _seg = None | |
| def load_models(): | |
| global _clf, _seg | |
| if _clf is None: | |
| path = hf_hub_download("gabrielkasmi/bdappv-models", "model.py") | |
| spec = importlib.util.spec_from_file_location("bdappv_model", path) | |
| mod = importlib.util.module_from_spec(spec) | |
| spec.loader.exec_module(mod) | |
| _clf = mod.load_classification_model("ign", device="cpu") | |
| _seg = mod.load_segmentation_model("ign", device="cpu") | |
| return _clf, _seg | |
| # ── Pipeline ────────────────────────────────────────────────────────────────── | |
| def compute_bbox(lat, lon, coverage_m): | |
| d_lat = coverage_m / 111_320 | |
| d_lon = coverage_m / (111_320 * math.cos(math.radians(lat))) | |
| return lat - d_lat/2, lat + d_lat/2, lon - d_lon/2, lon + d_lon/2 | |
| def fetch_ign(south, north, west, east, px): | |
| url = ( | |
| "https://data.geopf.fr/wms-r" | |
| "?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap" | |
| "&FORMAT=image/png&LAYERS=ORTHOIMAGERY.ORTHOPHOTOS" | |
| "&CRS=EPSG:4326&STYLES=" | |
| f"&BBOX={south},{west},{north},{east}&WIDTH={px}&HEIGHT={px}" | |
| ) | |
| r = requests.get(url, timeout=30) | |
| r.raise_for_status() | |
| return Image.open(BytesIO(r.content)).convert("RGB") | |
| def preprocess(img, size): | |
| t = torch.tensor(np.array(img.resize((size, size), Image.BILINEAR))).permute(2, 0, 1).float() / 255.0 | |
| mean = torch.tensor([0.485, 0.456, 0.406]).view(3, 1, 1) | |
| std = torch.tensor([0.229, 0.224, 0.225]).view(3, 1, 1) | |
| return ((t - mean) / std).unsqueeze(0) | |
| def run_clf_batch(clf, imgs): | |
| """Batch-classify patches → list of probabilities.""" | |
| t = torch.cat([preprocess(im, CLF_PX) for im in imgs]) | |
| with torch.no_grad(): | |
| logits = clf(t) | |
| if hasattr(logits, "logits"): logits = logits.logits | |
| return torch.sigmoid(logits).flatten().tolist() | |
| def run_seg_batch(seg, imgs): | |
| """Batch-segment patches → list of binary masks (uint8, 0/255).""" | |
| t = torch.cat([preprocess(im, SEG_PX) for im in imgs]) | |
| with torch.no_grad(): | |
| out = seg(t)["out"] | |
| return [(torch.sigmoid(out[i, 0]) > 0.5).numpy().astype(np.uint8) * 255 | |
| for i in range(len(imgs))] | |
| def mask_to_features(mask, south, north, west, east): | |
| H, W = mask.shape | |
| contours, _ = cv2.findContours(mask, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE) | |
| features = [] | |
| for c in contours: | |
| if cv2.contourArea(c) < 10: continue | |
| coords = [] | |
| for pt in c: | |
| px, py = pt[0] | |
| coords.append([west + (px / W) * (east - west), | |
| north - (py / H) * (north - south)]) | |
| coords.append(coords[0]) | |
| features.append(gj.Feature(geometry=gj.Polygon([coords]), properties={})) | |
| return features | |
| MERGE_EPS = 3e-6 # ~0.3 m in degrees — bridges the ≤1 px gap at patch borders | |
| def merge_features(features): | |
| """Union polygons split across patch borders into single installations.""" | |
| if not features: | |
| return features | |
| geoms = [shape(f["geometry"]).buffer(MERGE_EPS) for f in features] | |
| merged = unary_union(geoms).buffer(-MERGE_EPS) | |
| if merged.is_empty: | |
| return [] | |
| polys = list(merged.geoms) if merged.geom_type == "MultiPolygon" else [merged] | |
| return [gj.Feature(geometry=mapping(p), properties={}) for p in polys] | |
| # Vendored from pypvroof (constant tilt / bounding-box azimuth / constant | |
| # regression). pypvroof itself pulls GDAL & rasterio at import time, which | |
| # breaks fresh installs — the methods used here never touch them. | |
| TILT_DEG = 20.0 # constant-tilt | |
| KWP_PER_M2 = 1 / 6.5 # pypvroof default-coefficient (kWp per m²) | |
| def _azimuth_bounding_box(feature): | |
| """Orientation of the long side of the minimum rotated rectangle. | |
| pypvroof convention: 0 = south-facing, ±90 = east/west, ±180 = north.""" | |
| poly = Polygon(feature["geometry"]["coordinates"][0]) | |
| x, y = poly.minimum_rotated_rectangle.exterior.coords.xy | |
| ulx, uly = x[1], y[1] | |
| llx, lly = x[2], y[2] | |
| lrx, lry = x[3], y[3] | |
| side_long = math.hypot(lrx - llx, lry - lly) | |
| side_short = math.hypot(ulx - llx, uly - lly) | |
| angle_short = 90 - math.degrees(math.atan2(lry - lly, lrx - llx)) | |
| angle_long = -90 + math.degrees(math.atan2(uly - lly, ulx - llx)) | |
| phi = angle_long if side_long >= side_short else angle_short | |
| return (-phi + 180) if phi > 0 else (abs(phi) - 180) | |
| def extract_chars(features): | |
| results = [] | |
| for f in features: | |
| try: | |
| coords = f["geometry"]["coordinates"][0] | |
| lon, lat = (float(v) for v in np.mean(coords, axis=0)) | |
| surface = geojson_area(f["geometry"]) / math.cos(math.radians(TILT_DEG)) | |
| results.append({"lon": lon, "lat": lat, "tilt": TILT_DEG, | |
| "azimuth": float(_azimuth_bounding_box(f)), | |
| "capacity": surface * KWP_PER_M2, "surface": surface}) | |
| except Exception: | |
| results.append({}) | |
| return results | |
| # ── Detection entry point ───────────────────────────────────────────────────── | |
| BATCH = 16 | |
| FETCH_WORKERS = 6 | |
| def detect(lat_str, lon_str, coverage, progress=gr.Progress()): | |
| try: | |
| lat, lon = float(lat_str), float(lon_str) | |
| except (ValueError, TypeError): | |
| return (error_stats("No zone selected — click the map or search a location."), | |
| gr.update(visible=False), "", gr.update()) | |
| # Pave the zone with n×n patches of CLF_PX*GSD meters (59.8 m) so each | |
| # WMS request is natively at model resolution. Covered area ≥ coverage. | |
| patch_m = CLF_PX * GSD | |
| n = max(1, math.ceil(coverage / patch_m)) | |
| south, north, west, east = compute_bbox(lat, lon, n * patch_m) | |
| d_lat = (north - south) / n | |
| d_lon = (east - west) / n | |
| boxes = [(north - (r + 1) * d_lat, north - r * d_lat, | |
| west + c * d_lon, west + (c + 1) * d_lon) | |
| for r in range(n) for c in range(n)] | |
| clf, seg = load_models() | |
| features = [] | |
| try: | |
| for i in range(0, len(boxes), BATCH): | |
| progress(i / len(boxes), desc=f"Patches {i}/{len(boxes)}") | |
| chunk = boxes[i:i + BATCH] | |
| with ThreadPoolExecutor(max_workers=FETCH_WORKERS) as ex: | |
| imgs = list(ex.map(lambda b: fetch_ign(*b, CLF_PX), chunk)) | |
| probs = run_clf_batch(clf, imgs) | |
| positives = [(im, b) for im, b, p in zip(imgs, chunk, probs) if p > CLF_THR] | |
| del imgs # flush negatives immediately | |
| if positives: | |
| masks = run_seg_batch(seg, [im for im, _ in positives]) | |
| for mask, (_, b) in zip(masks, positives): | |
| features += mask_to_features(mask, *b) | |
| except Exception as e: | |
| return error_stats(f"Detection failed: {e}"), gr.update(visible=False), "", gr.update() | |
| progress(1.0, desc="Extracting characteristics") | |
| features = merge_features(features) | |
| chars = extract_chars(features) | |
| for feat, c in zip(features, chars): | |
| feat["properties"].update(c) | |
| fc = gj.FeatureCollection(features) | |
| geojson_path = os.path.join(tempfile.gettempdir(), "detections.geojson") | |
| fc_str = json.dumps(fc, indent=2) | |
| with open(geojson_path, "w") as f: | |
| f.write(fc_str) | |
| return (build_stats_html(chars), gr.update(value=geojson_path, visible=True), | |
| fc_str, gr.update(visible=True)) | |
| # ── Geocoding (IGN Géoplateforme) ───────────────────────────────────────────── | |
| def geocode(q): | |
| q = (q or "").strip() | |
| if not q: | |
| return gr.update(), gr.update(), gr.update() | |
| try: | |
| r = requests.get("https://data.geopf.fr/geocodage/search", | |
| params={"q": q, "limit": 1}, timeout=10) | |
| r.raise_for_status() | |
| feats = r.json().get("features", []) | |
| if not feats: | |
| gr.Warning(f"No result for '{q}'.") | |
| return gr.update(), gr.update(), gr.update() | |
| lon, lat = feats[0]["geometry"]["coordinates"] | |
| center = json.dumps({"lat": lat, "lon": lon, "ts": time.time()}) | |
| return f"{lat:.6f}", f"{lon:.6f}", center | |
| except Exception as e: | |
| gr.Warning(f"Search failed: {e}") | |
| return gr.update(), gr.update(), gr.update() | |
| # ── Map ─────────────────────────────────────────────────────────────────────── | |
| def make_map_html(): | |
| """Return iframe HTML with folium map encoded as data URL (no file I/O, no srcdoc encoding issues).""" | |
| m = folium.Map(location=[46.5, 2.3], zoom_start=6, tiles=None, max_zoom=19) | |
| # IGN ortho — Géoplateforme WMTS (wxs.ign.fr est décommissionné). | |
| # NB: string normale, PAS un f-string ({z}/{y}/{x} sont remplacés par Leaflet), | |
| # et attr est obligatoire sinon folium lève ValueError. | |
| folium.TileLayer( | |
| tiles=("https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0" | |
| "&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&TILEMATRIXSET=PM" | |
| "&FORMAT=image/jpeg&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"), | |
| attr="© IGN / Géoplateforme", | |
| name="IGN Ortho", | |
| max_zoom=19, | |
| max_native_zoom=19, | |
| ).add_to(m) | |
| folium.TileLayer("OpenStreetMap", name="OSM", show=False).add_to(m) | |
| folium.LayerControl(position="bottomright").add_to(m) | |
| click_js = """ | |
| (function attach() { | |
| var _map = window["__MAP__"]; | |
| if (!_map) { setTimeout(attach, 50); return; } | |
| _map.zoomControl.setPosition('bottomright'); | |
| var _rect = null, _cov = 500, _lat = null, _lon = null, _mode = 'select'; | |
| function drawRect() { | |
| if (_lat === null) return; | |
| if (_rect) { _map.removeLayer(_rect); } | |
| var dLat = _cov/111320, dLon = _cov/(111320*Math.cos(_lat*Math.PI/180)); | |
| _rect = L.rectangle( | |
| [[_lat-dLat/2,_lon-dLon/2],[_lat+dLat/2,_lon+dLon/2]], | |
| {color:'#3b82f6',weight:2,fillColor:'#3b82f6',fillOpacity:0.08,dashArray:'6,4'} | |
| ).addTo(_map); | |
| } | |
| _map.on('click', function(e) { | |
| if (_mode !== 'select') { return; } | |
| _lat = e.latlng.lat; _lon = e.latlng.lng; | |
| var msg = {type:'pvClick', lat:_lat, lon:_lon}; | |
| var w = window; | |
| do { w = w.parent; w.postMessage(msg, '*'); } while (w !== w.parent); | |
| drawRect(); | |
| }); | |
| var _detLayer = null; | |
| window.addEventListener('message', function(e) { | |
| if (!e.data) return; | |
| if (e.data.type === 'pvCoverage') { | |
| _cov = Number(e.data.coverage) || _cov; | |
| drawRect(); | |
| } | |
| if (e.data.type === 'pvCenter') { | |
| if (e.data.cov) { _cov = Number(e.data.cov); } | |
| _map.setView([e.data.lat, e.data.lon], 16); | |
| if (_mode === 'select') { _lat = e.data.lat; _lon = e.data.lon; drawRect(); } | |
| } | |
| if (e.data.type === 'pvReset') { | |
| if (_detLayer) { _map.removeLayer(_detLayer); _detLayer = null; } | |
| _mode = 'select'; | |
| } | |
| if (e.data.type === 'pvGeojson') { | |
| console.log('[pv-map] geojson received'); | |
| _mode = 'view'; | |
| if (_rect) { _map.removeLayer(_rect); _rect = null; _lat = null; } | |
| if (_detLayer) { _map.removeLayer(_detLayer); } | |
| _detLayer = L.geoJSON(e.data.fc, { | |
| style: {color:'#dc2626', weight:2, fillColor:'#dc2626', fillOpacity:0.35}, | |
| onEachFeature: function(f, layer) { | |
| var p = f.properties || {}; | |
| if (p.surface) layer.bindPopup( | |
| 'Surface: ' + p.surface.toFixed(0) + ' m²<br>' + | |
| 'Capacity: ' + p.capacity.toFixed(1) + ' kWp<br>' + | |
| 'Azimuth: ' + Math.round(p.azimuth) + '°'); | |
| } | |
| }).addTo(_map); | |
| var b = _detLayer.getBounds(); | |
| if (b.isValid()) { _map.fitBounds(b, {maxZoom: 18}); } | |
| } | |
| }); | |
| })(); | |
| """.replace("__MAP__", m.get_name()) | |
| m.get_root().script.add_child(folium.Element(click_js)) | |
| raw_html = m._repr_html_() | |
| page = ('<!DOCTYPE html><html><head><meta charset="utf-8"></head>' | |
| '<body style="margin:0;">' + raw_html + '</body></html>') | |
| b64 = base64.b64encode(page.encode("utf-8")).decode("ascii") | |
| return ( | |
| f'<iframe src="data:text/html;charset=utf-8;base64,{b64}" ' | |
| f'style="width:100%;height:800px;border:none;' | |
| f'border-radius:12px;overflow:hidden;display:block;">' | |
| f'</iframe>' | |
| ) | |
| # ── Stats ───────────────────────────────────────────────────────────────────── | |
| def error_stats(msg): | |
| return f'<div style="padding:24px;text-align:center;color:#dc2626;">⚠️ {msg}</div>' | |
| def compass_svg(azimuths): | |
| labels = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'] | |
| bins = [0] * 8 | |
| for az in azimuths: | |
| bins[int(((az % 360) + 22.5) / 45) % 8] += 1 | |
| max_b = max(bins) or 1 | |
| bars = "" | |
| for i, (lbl, cnt) in enumerate(zip(labels, bins)): | |
| h = int((cnt / max_b) * 36) | |
| bars += (f'<g transform="translate({i*38},0)">' | |
| f'<rect x="5" y="{40-h}" width="28" height="{h}" fill="#3b82f6" rx="3" opacity="0.8"/>' | |
| f'<text x="19" y="52" text-anchor="middle" font-size="9" fill="#6b7280">{lbl}</text>' | |
| + (f'<text x="19" y="{36-h}" text-anchor="middle" font-size="9" fill="#374151">{cnt}</text>' if cnt else '') | |
| + '</g>') | |
| return f'<svg width="304" height="58" style="overflow:visible">{bars}</svg>' | |
| def build_stats_html(chars): | |
| if not chars: | |
| return """<div style="padding:24px;text-align:center;color:#6b7280;font-size:14px;"> | |
| <div style="font-size:40px;margin-bottom:8px;">🔍</div> | |
| No PV installation detected in this zone.</div>""" | |
| n = len(chars) | |
| total_surface = sum(c.get("surface", 0) for c in chars) | |
| total_capacity = sum(c.get("capacity", 0) for c in chars) # already kWp | |
| azimuths = [c["azimuth"] for c in chars if c.get("azimuth") is not None] | |
| return f""" | |
| <div style="font-family:-apple-system,sans-serif;padding:16px;"> | |
| <h3 style="margin:0 0 14px;font-size:16px;font-weight:700;color:#111827;">📊 Results</h3> | |
| <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:18px;"> | |
| <div style="background:#f0fdf4;border-radius:10px;padding:12px;text-align:center;"> | |
| <div style="font-size:28px;font-weight:700;color:#16a34a;">{n}</div> | |
| <div style="font-size:11px;color:#6b7280;margin-top:2px;">installations</div> | |
| </div> | |
| <div style="background:#eff6ff;border-radius:10px;padding:12px;text-align:center;"> | |
| <div style="font-size:28px;font-weight:700;color:#2563eb;">{total_surface:.0f}</div> | |
| <div style="font-size:11px;color:#6b7280;margin-top:2px;">m² total</div> | |
| </div> | |
| <div style="background:#fefce8;border-radius:10px;padding:12px;text-align:center;"> | |
| <div style="font-size:28px;font-weight:700;color:#ca8a04;">{total_capacity:.1f}</div> | |
| <div style="font-size:11px;color:#6b7280;margin-top:2px;">kWp est.</div> | |
| </div> | |
| </div> | |
| <div style="margin-bottom:14px;"> | |
| <div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:6px;">Azimuth distribution</div> | |
| {compass_svg(azimuths)} | |
| </div> | |
| <div style="font-size:11px;color:#9ca3af;border-top:1px solid #f3f4f6;padding-top:10px;"> | |
| Capacity estimated with constant regression (pypvroof, no DEM). | |
| Large-scale → <a href="https://github.com/gabrielkasmi/deeppvmapper" | |
| target="_blank" style="color:#6b7280;">DeepPVMapper</a>. | |
| </div> | |
| </div>""" | |
| # ── Head script — postMessage listener (runs in <head>, not innerHTML) ───────── | |
| HEAD_SCRIPT = """ | |
| <script> | |
| // Selected point lives in a page-level global; it is injected into the | |
| // backend call at Detect time (js= on the click event). DOM-input hacks | |
| // don't survive Gradio 6 SSR hydration on Spaces. | |
| window._pvLat = null; | |
| window._pvLon = null; | |
| window.addEventListener('message', function(e) { | |
| if (!e.data || e.data.type !== 'pvClick') return; | |
| window._pvLat = Number(e.data.lat).toFixed(6); | |
| window._pvLon = Number(e.data.lon).toFixed(6); | |
| }); | |
| // Skip the intro modal when arriving from a "New detection" reload (?lat=...) | |
| (function hideIntro() { | |
| if (!new URLSearchParams(window.location.search).has('lat')) { return; } | |
| var el = document.getElementById('intro-modal'); | |
| if (!el) { setTimeout(hideIntro, 200); return; } | |
| el.style.display = 'none'; | |
| })(); | |
| </script> | |
| """ | |
| # ── Gradio layout ───────────────────────────────────────────────────────────── | |
| INITIAL_STATS = """ | |
| <div style="padding:18px 8px;text-align:center;color:#6b7280;font-size:13px;"> | |
| <div style="font-size:34px;margin-bottom:8px;">🖱️</div> | |
| <b style="color:#111827;">Click the map</b> to select a zone,<br>then press <b style="color:#111827;">Detect</b>. | |
| </div>""" | |
| CSS = """ | |
| .gradio-container { max-width: 100% !important; padding: 8px !important; } | |
| footer { display: none !important; } | |
| #map-wrap { position: relative; } | |
| /* the intro modal is position:fixed — collapse its host block so it takes no flow space */ | |
| #intro-host { position: absolute; height: 0 !important; min-height: 0 !important; | |
| padding: 0 !important; margin: 0 !important; overflow: visible; border: none !important; } | |
| #header-card, #stats-card, #control-card, #search-card { | |
| position: absolute; z-index: 1000; | |
| border-radius: 14px; | |
| padding: 14px !important; | |
| box-shadow: 0 8px 28px rgba(0,0,0,0.35); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| } | |
| #header-card { | |
| top: 20px; left: 50%; transform: translateX(-50%); width: 380px; | |
| background: rgba(17, 24, 39, 0.85) !important; | |
| border: 1px solid rgba(255,255,255,0.10) !important; | |
| } | |
| #search-card { | |
| top: 20px; left: 20px; width: 300px; | |
| background: rgba(17, 24, 39, 0.85) !important; | |
| border: 1px solid rgba(255,255,255,0.10) !important; | |
| } | |
| #search-card .block { background: transparent !important; } | |
| #stats-card { | |
| top: 20px; right: 20px; width: 320px; | |
| background: rgba(255, 255, 255, 0.95) !important; | |
| border: 1px solid rgba(0,0,0,0.06) !important; | |
| } | |
| #control-card { | |
| bottom: 64px; left: 20px; width: 320px; | |
| padding: 10px !important; | |
| gap: 6px !important; row-gap: 6px !important; | |
| background: rgba(17, 24, 39, 0.85) !important; | |
| border: 1px solid rgba(255,255,255,0.10) !important; | |
| } | |
| #control-card .block { padding: 4px 8px !important; } | |
| #control-card .form { gap: 4px !important; } | |
| #control-card label > span { font-size: 12px !important; } | |
| #control-card input[type="number"], #control-card input[type="text"] { | |
| padding-top: 4px !important; padding-bottom: 4px !important; | |
| } | |
| #control-card button { padding: 8px !important; } | |
| #header-card .html-container, #stats-card .html-container { padding: 0; } | |
| #stats-card .block, #control-card .block, #header-card .block { background: transparent !important; } | |
| /* stats card is light — force dark text even in dark mode */ | |
| #stats-card * { color: #111827; } | |
| /* progress overlays & toasts — dark glass, match the cards */ | |
| .wrap.default { | |
| background: rgba(17, 24, 39, 0.88) !important; | |
| border-radius: 14px; | |
| } | |
| .wrap.default *, .wrap.default .progress-text, .wrap.default .meta-text { | |
| color: #e5e7eb !important; | |
| } | |
| .toast-wrap { | |
| top: 50% !important; bottom: auto !important; | |
| right: 16px !important; | |
| transform: translateY(-50%); | |
| } | |
| .toast-body { | |
| background: rgba(17, 24, 39, 0.92) !important; | |
| border: 1px solid rgba(255, 255, 255, 0.10) !important; | |
| } | |
| .toast-body * { color: #e5e7eb !important; } | |
| """ | |
| THEME = gr.themes.Default(primary_hue="blue", neutral_hue="slate") | |
| INTRO_HTML = """ | |
| <div id="intro-modal" style="position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:5000; | |
| display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);"> | |
| <div style="background:rgba(17,24,39,0.97);border:1px solid rgba(255,255,255,0.12); | |
| border-radius:18px;padding:32px 36px;max-width:480px;margin:16px; | |
| font-family:-apple-system,sans-serif;color:#e5e7eb;box-shadow:0 16px 48px rgba(0,0,0,0.5);"> | |
| <h2 style="margin:0 0 6px;font-size:22px;font-weight:800;color:#fff;">🗺️ DeepPVMapper</h2> | |
| <p style="margin:0 0 18px;font-size:13px;color:#9ca3af;"> | |
| Map rooftop solar installations anywhere in France, from aerial imagery.</p> | |
| <div style="font-size:13.5px;line-height:1.55;"> | |
| <p style="margin:0 0 10px;"><b style="color:#fff;">1.</b> Search a city or click the map | |
| to select a zone (up to 1 km²).</p> | |
| <p style="margin:0 0 10px;"><b style="color:#fff;">2.</b> Press <b style="color:#fff;">Detect</b> — | |
| deep learning models detect and segment PV panels on IGN orthophotos | |
| (CPU inference, ~1 min for 1 km²).</p> | |
| <p style="margin:0 0 10px;"><b style="color:#fff;">3.</b> Click the detected polygons to see | |
| surface, capacity and azimuth — and download everything as GeoJSON.</p> | |
| </div> | |
| <p style="margin:14px 0 18px;font-size:11.5px;color:#6b7280;"> | |
| Characteristics estimated with pypvroof (no DEM). To map a large area, | |
| we recommend running | |
| <a href="https://github.com/gabrielkasmi/deeppvmapper" target="_blank" | |
| style="color:#93c5fd;">DeepPVMapper</a> directly from the GitHub repository. | |
| Best viewed on a desktop browser.</p> | |
| <button onclick="document.getElementById('intro-modal').style.display='none'" | |
| style="width:100%;padding:11px;border:none;border-radius:10px;background:#2563eb; | |
| color:#fff;font-size:14px;font-weight:600;cursor:pointer;"> | |
| Start exploring</button> | |
| </div> | |
| </div> | |
| """ | |
| with gr.Blocks(css=CSS, theme=THEME, title="DeepPVMapper — demo", head=HEAD_SCRIPT) as demo: | |
| gr.HTML(INTRO_HTML, elem_id="intro-host") | |
| with gr.Column(elem_id="map-wrap"): | |
| map_display = gr.HTML(value=make_map_html()) | |
| with gr.Column(elem_id="header-card"): | |
| gr.HTML(""" | |
| <div style="font-family:-apple-system,sans-serif;"> | |
| <h1 style="font-size:22px;font-weight:800;margin:0 0 2px;color:#fff;"> | |
| 🗺️ DeepPVMapper</h1> | |
| <p style="color:#9ca3af;margin:0 0 10px;font-size:12.5px;line-height:1.45;"> | |
| Interactive demo — rooftop PV detection & characterization | |
| on IGN aerial imagery (France). | |
| </p> | |
| <div style="display:flex;gap:6px;flex-wrap:wrap;"> | |
| <a href="https://github.com/gabrielkasmi/deeppvmapper" target="_blank" | |
| style="font-size:11px;background:rgba(255,255,255,.12);padding:4px 10px;border-radius:6px;text-decoration:none;color:#e5e7eb;">⭐ GitHub</a> | |
| <a href="https://pastel.hal.science/tel-04909303" target="_blank" | |
| style="font-size:11px;background:rgba(255,255,255,.12);padding:4px 10px;border-radius:6px;text-decoration:none;color:#e5e7eb;">📄 Paper</a> | |
| <a href="https://huggingface.co/datasets/gabrielkasmi/bdappv" target="_blank" | |
| style="font-size:11px;background:rgba(255,255,255,.12);padding:4px 10px;border-radius:6px;text-decoration:none;color:#e5e7eb;">📦 Dataset</a> | |
| <a href="https://huggingface.co/gabrielkasmi/bdappv-models" target="_blank" | |
| style="font-size:11px;background:rgba(255,255,255,.12);padding:4px 10px;border-radius:6px;text-decoration:none;color:#e5e7eb;">🤖 Models</a> | |
| </div> | |
| </div>""") | |
| with gr.Column(elem_id="stats-card"): | |
| stats_display = gr.HTML(value=INITIAL_STATS) | |
| download_file = gr.File(label="⬇️ Detections (GeoJSON)", visible=False) | |
| new_btn = gr.Button("🔄 New detection", visible=False, size="sm") | |
| with gr.Column(elem_id="search-card"): | |
| search_input = gr.Textbox(show_label=False, placeholder="🔎 Search location") | |
| with gr.Column(elem_id="control-card"): | |
| # hidden — filled by map clicks / search, nobody types coordinates | |
| lat_input = gr.Textbox(visible=False, elem_id="lat-input") | |
| lon_input = gr.Textbox(visible=False, elem_id="lon-input") | |
| coverage = gr.Slider(100, 1000, value=500, step=50, label="Coverage (m)") | |
| detect_btn = gr.Button("🔍 Detect PV installations", variant="primary") | |
| geojson_state = gr.Textbox(visible=False) | |
| center_state = gr.Textbox(visible=False) | |
| # Broadcast the detection GeoJSON into the nested map iframe. | |
| # Hooked on .change() of the hidden textbox: fires when the backend | |
| # pushes the value (js on a chained .then(fn=None) is unreliable). | |
| SHOW_GEOJSON_JS = """ | |
| (g) => { | |
| if (!g) { return; } | |
| var data; | |
| try { data = JSON.parse(g); } catch (e) { console.log('[pv] bad geojson', e); return; } | |
| console.log('[pv] broadcasting geojson,', (data.features || []).length, 'features'); | |
| function bcast(w) { | |
| try { w.postMessage({type:'pvGeojson', fc: data}, '*'); } catch (e) {} | |
| try { for (var i = 0; i < w.frames.length; i++) bcast(w.frames[i]); } catch (e) {} | |
| } | |
| bcast(window); | |
| } | |
| """ | |
| geojson_state.change(fn=None, inputs=[geojson_state], outputs=None, js=SHOW_GEOJSON_JS) | |
| # Search → fill lat/lon, pan the map and preview the zone. | |
| CENTER_JS = """ | |
| (g) => { | |
| if (!g) { return; } | |
| var c; | |
| try { c = JSON.parse(g); } catch (e) { return; } | |
| window._pvLat = String(c.lat); | |
| window._pvLon = String(c.lon); | |
| function bcast(w) { | |
| try { w.postMessage({type:'pvCenter', lat: c.lat, lon: c.lon, cov: c.cov || null}, '*'); } catch (e) {} | |
| try { for (var i = 0; i < w.frames.length; i++) bcast(w.frames[i]); } catch (e) {} | |
| } | |
| // retry a few times: on page load the map iframe may not be ready yet | |
| var tries = 0; | |
| (function send() { bcast(window); if (++tries < 5) { setTimeout(send, 700); } })(); | |
| } | |
| """ | |
| center_state.change(fn=None, inputs=[center_state], outputs=None, js=CENTER_JS) | |
| search_input.submit( | |
| fn=geocode, | |
| inputs=[search_input], | |
| outputs=[lat_input, lon_input, center_state], | |
| ) | |
| # js runs client-side first; its return value replaces the inputs sent to | |
| # the backend — this is how the map click (stored in window._pvLat/_pvLon) | |
| # reaches detect() without DOM-input hacks. | |
| DETECT_JS = """ | |
| (lat, lon, cov) => [window._pvLat || lat, window._pvLon || lon, cov] | |
| """ | |
| detect_btn.click( | |
| fn=detect, | |
| inputs=[lat_input, lon_input, coverage], | |
| outputs=[stats_display, download_file, geojson_state, new_btn], | |
| js=DETECT_JS, | |
| ) | |
| # "New detection": full page reload, persisting the location in the URL. | |
| RELOAD_JS = """ | |
| (lat, lon, cov) => { | |
| var u = new URL(window.location.href); | |
| var la = window._pvLat || lat, lo = window._pvLon || lon; | |
| if (la && lo) { | |
| u.searchParams.set('lat', la); | |
| u.searchParams.set('lon', lo); | |
| u.searchParams.set('cov', cov); | |
| } | |
| window.location.href = u.toString(); | |
| } | |
| """ | |
| new_btn.click(fn=None, inputs=[lat_input, lon_input, coverage], outputs=None, js=RELOAD_JS) | |
| # On load: restore location from URL query params (set by the reload above). | |
| def init_from_url(request: gr.Request): | |
| q = dict(request.query_params) if request else {} | |
| lat, lon, cov = q.get("lat"), q.get("lon"), q.get("cov") | |
| if lat and lon: | |
| try: | |
| center = json.dumps({"lat": float(lat), "lon": float(lon), | |
| "cov": float(cov) if cov else None, "ts": time.time()}) | |
| return lat, lon, (float(cov) if cov else gr.update()), center | |
| except ValueError: | |
| pass | |
| return gr.update(), gr.update(), gr.update(), gr.update() | |
| demo.load(fn=init_from_url, inputs=None, | |
| outputs=[lat_input, lon_input, coverage, center_state]) | |
| # Push slider value into the (nested, cross-origin) map iframe. | |
| # `frames`, `length` and `postMessage` are on the cross-origin allowlist, | |
| # so a recursive broadcast reaches the srcdoc frame two levels down. | |
| BCAST_JS = """ | |
| (cov) => { | |
| function bcast(w) { | |
| try { w.postMessage({type:'pvCoverage', coverage: cov}, '*'); } catch (e) {} | |
| try { | |
| for (var i = 0; i < w.frames.length; i++) bcast(w.frames[i]); | |
| } catch (e) {} | |
| } | |
| bcast(window); | |
| } | |
| """ | |
| coverage.input(fn=None, inputs=[coverage], outputs=None, js=BCAST_JS) | |
| if __name__ == "__main__": | |
| load_models() | |
| demo.launch() | |