Spaces:

LunaAmagi
/

chronostasis

Sleeping

File size: 23,657 Bytes

4203f46

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Chronostasis — India Flood Risk Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet"/>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{background:#080808;color:#E8DCBC;font-family:'Rajdhani',sans-serif;height:100vh;display:flex;flex-direction:column;overflow:hidden}
.fd{font-family:'Montserrat',sans-serif;font-weight:600}
.fm{font-family:'Share Tech Mono',monospace}
header{height:52px;background:rgba(8,8,8,.97);border-bottom:1px solid rgba(201,150,42,.2);display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0;z-index:1000}
.logo{display:flex;align-items:center;gap:12px}
.logo-icon{width:32px;height:32px;border:1px solid rgba(201,150,42,.35);display:flex;align-items:center;justify-content:center;background:rgba(201,150,42,.08);font-size:15px}
.logo-text .title{font-family:'Montserrat',sans-serif;font-weight:600;font-size:15px;letter-spacing:.04em;color:#E8B84B}
.logo-text .sub{font-family:'Share Tech Mono',monospace;font-size:7px;color:#4A3A18;letter-spacing:.2em}
.header-badges{display:flex;gap:8px;align-items:center}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:1px;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.1em;font-weight:700}
.badge-gold{background:rgba(201,150,42,.12);border:1px solid rgba(201,150,42,.3);color:#E8B84B}
.badge-live{background:rgba(40,120,40,.12);border:1px solid rgba(40,180,40,.22);color:#70D070}
.badge-warn{background:rgba(180,80,20,.12);border:1px solid rgba(200,100,20,.3);color:#E87A40}
.pulse{animation:pulse 2s ease-in-out infinite;display:inline-block;width:6px;height:6px;border-radius:50%;background:#70D070;margin-right:4px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.back-btn{font-family:'Share Tech Mono',monospace;font-size:9px;color:#6B5A30;letter-spacing:.1em;text-decoration:none;border:1px solid rgba(201,150,42,.15);padding:4px 10px;transition:all .15s}
.back-btn:hover{color:#E8B84B;border-color:rgba(201,150,42,.4)}
.main{flex:1;display:flex;overflow:hidden;position:relative}
#map{flex:1;background:#0a0a0a}
/* Override leaflet tiles bg */
.leaflet-container{background:#0a0a0a!important}
.sidebar{width:320px;background:#0d0d0d;border-left:1px solid rgba(201,150,42,.15);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
.sidebar-section{padding:14px;border-bottom:1px solid rgba(201,150,42,.1)}
.section-label{font-family:'Share Tech Mono',monospace;font-size:8px;color:#4A3A18;letter-spacing:.15em;margin-bottom:8px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.stat-card{background:rgba(201,150,42,.04);border:1px solid rgba(201,150,42,.1);padding:8px 10px}
.stat-label{font-family:'Share Tech Mono',monospace;font-size:7px;color:#3A2D10;letter-spacing:.12em;margin-bottom:2px}
.stat-value{font-family:'Share Tech Mono',monospace;font-size:13px;font-weight:700}
.risk-bar{height:3px;background:#111;margin-top:6px}
.risk-fill{height:100%;transition:width .6s}
.layer-toggle{display:flex;align-items:center;gap:8px;padding:5px 0;cursor:pointer}
.layer-dot{width:10px;height:10px;border-radius:0;flex-shrink:0}
.layer-label{font-family:'Share Tech Mono',monospace;font-size:9px;color:#8B7840}
.layer-toggle input{margin-left:auto;accent-color:#C9962A}
.btn{width:100%;padding:8px;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .2s;border-radius:0;margin-bottom:4px}
.btn-gold{background:rgba(201,150,42,.1);border:1px solid rgba(201,150,42,.4);color:#E8B84B}
.btn-gold:hover:not(:disabled){background:rgba(201,150,42,.2);box-shadow:0 0 12px rgba(201,150,42,.2)}
.btn-gold:disabled{opacity:.35;cursor:not-allowed}
.btn-green{background:rgba(40,180,40,.08);border:1px solid rgba(40,180,40,.3);color:#70D070}
.btn-green:hover:not(:disabled){background:rgba(40,180,40,.15)}
.term{background:#040404;border:1px solid rgba(201,150,42,.1);font-family:'Share Tech Mono',monospace;font-size:10px;line-height:1.8;padding:10px;overflow-y:auto;flex:1;min-height:100px}
.year-btn{padding:4px 10px;font-family:'Share Tech Mono',monospace;font-size:9px;cursor:pointer;transition:all .15s;border-radius:0}
select{background:#111;border:1px solid rgba(201,150,42,.25);color:#E8B84B;font-family:'Share Tech Mono',monospace;font-size:10px;padding:4px 8px;width:100%;margin-top:4px}
.legend{position:absolute;bottom:30px;left:10px;z-index:500;background:rgba(8,8,8,.9);border:1px solid rgba(201,150,42,.2);padding:10px 14px;min-width:180px}
.legend-title{font-family:'Share Tech Mono',monospace;font-size:9px;color:#6B5A30;letter-spacing:.12em;margin-bottom:8px}
.legend-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.legend-swatch{width:12px;height:12px;flex-shrink:0}
.legend-text{font-family:'Share Tech Mono',monospace;font-size:9px;color:#8B7840}
.search-box{display:flex;gap:6px;margin-bottom:8px}
.search-box input{flex:1;background:#111;border:1px solid rgba(201,150,42,.2);color:#E8B84B;font-family:'Share Tech Mono',monospace;font-size:10px;padding:6px 8px}
.search-box button{background:rgba(201,150,42,.1);border:1px solid rgba(201,150,42,.35);color:#E8B84B;font-family:'Share Tech Mono',monospace;font-size:9px;padding:6px 10px;cursor:pointer}
.loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(8,8,8,.7);display:flex;align-items:center;justify-content:center;z-index:2000;display:none}
.loading-text{font-family:'Share Tech Mono',monospace;font-size:14px;color:#E8B84B;letter-spacing:.2em;animation:pulse 1s ease-in-out infinite}
.coord-display{font-family:'Share Tech Mono',monospace;font-size:9px;color:#4A3A18;padding:4px 0}
.divg{height:1px;background:linear-gradient(90deg,transparent,rgba(201,150,42,.2),transparent);margin:8px 0}
</style>
</head>
<body>
<header>
  <div class="logo">
    <div class="logo-icon">🌊</div>
    <div class="logo-text">
      <div class="title">CHRONOSTASIS</div>
      <div class="sub">INDIA FLOOD RISK MAP — CLICK ANY LOCATION</div>
    </div>
  </div>
  <div class="header-badges">
    <span class="badge badge-live" id="gee-badge">
      <span class="pulse"></span>LOADING...
    </span>
    <span class="badge badge-gold" id="model-badge">4-AGENT</span>
    <a href="/" class="back-btn">← BACK TO APP</a>
  </div>
</header>

<div class="main">
  <div id="map"></div>

  <!-- Legend -->
  <div class="legend">
    <div class="legend-title">◈ FLOOD RISK LEGEND</div>
    <div class="legend-row"><div class="legend-swatch" style="background:#ff0000"></div><div class="legend-text">High Risk</div></div>
    <div class="legend-row"><div class="legend-swatch" style="background:#ff8800"></div><div class="legend-text">Moderate Risk</div></div>
    <div class="legend-row"><div class="legend-swatch" style="background:#00aa00"></div><div class="legend-text">Low Risk</div></div>
    <div class="legend-row"><div class="legend-swatch" style="background:#0044ff"></div><div class="legend-text">Flood Extent</div></div>
    <div class="legend-row"><div class="legend-swatch" style="background:#ff4444"></div><div class="legend-text">Chronic (3yr)</div></div>
    <div class="divg"></div>
    <div class="legend-text" id="coord-legend">Click anywhere on map</div>
  </div>

  <!-- Loading overlay -->
  <div class="loading-overlay" id="loading">
    <div class="loading-text">◈ QUERYING SATELLITE DATA...</div>
  </div>

  <!-- Sidebar -->
  <div class="sidebar">

    <!-- Query form -->
    <div class="sidebar-section">
      <div class="section-label">◈ QUERY ANY LOCATION</div>
      <div class="search-box">
        <input type="number" id="lat-input" placeholder="Lat (e.g. 26.2)" step="0.01" min="6" max="38"/>
        <input type="number" id="lon-input" placeholder="Lon (e.g. 91.7)" step="0.01" min="66" max="98"/>
        <button onclick="queryLatLon()">GO</button>
      </div>
      <div style="display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap">
        <span class="fm" style="font-size:8px;color:#4A3A18;padding-top:3px">PRESET:</span>
        <button class="year-btn" style="border:1px solid rgba(201,150,42,.2);background:transparent;color:#6B5A30" onclick="goTo(26.2,91.7,'Brahmaputra')">Brahmaputra</button>
        <button class="year-btn" style="border:1px solid rgba(201,150,42,.2);background:transparent;color:#6B5A30" onclick="goTo(25.6,85.1,'Ganga')">Ganga</button>
        <button class="year-btn" style="border:1px solid rgba(201,150,42,.2);background:transparent;color:#6B5A30" onclick="goTo(20.5,85.8,'Mahanadi')">Mahanadi</button>
        <button class="year-btn" style="border:1px solid rgba(201,150,42,.2);background:transparent;color:#6B5A30" onclick="goTo(22.7,77.4,'Narmada')">Narmada</button>
        <button class="year-btn" style="border:1px solid rgba(201,150,42,.2);background:transparent;color:#6B5A30" onclick="goTo(17.0,81.8,'Godavari')">Godavari</button>
      </div>
      <div>
        <span class="fm" style="font-size:8px;color:#4A3A18">YEAR</span>
        <select id="year-select">
          <option value="2022">2022 (Default)</option>
          <option value="2023">2023</option>
          <option value="2024">2024</option>
        </select>
      </div>
      <div style="margin-top:8px">
        <span class="fm" style="font-size:8px;color:#4A3A18">RADIUS (KM)</span>
        <input type="range" id="radius" min="30" max="200" value="80" style="width:100%;accent-color:#C9962A"/>
        <span class="fm" id="radius-label" style="font-size:9px;color:#6B5A30">80 km</span>
      </div>
    </div>

    <!-- Results -->
    <div class="sidebar-section">
      <div class="section-label">◈ SATELLITE RESULTS</div>
      <div class="stat-grid" id="stats-grid">
        <div class="stat-card"><div class="stat-label">PEAK YEAR</div><div class="stat-value" id="stat-peak" style="color:#C9962A">—</div></div>
        <div class="stat-card"><div class="stat-label">PEAK FLOOD KM²</div><div class="stat-value" id="stat-flood" style="color:#E87070">—</div></div>
        <div class="stat-card"><div class="stat-label">CHRONIC KM²</div><div class="stat-value" id="stat-chronic" style="color:#E8B84B">—</div></div>
        <div class="stat-card"><div class="stat-label">HIGH RISK KM²</div><div class="stat-value" id="stat-high" style="color:#E87070">—</div></div>
        <div class="stat-card"><div class="stat-label">2022 FLOOD</div><div class="stat-value" id="stat-2022" style="color:#D4C89A">—</div></div>
        <div class="stat-card"><div class="stat-label">2023 FLOOD</div><div class="stat-value" id="stat-2023" style="color:#D4C89A">—</div></div>
        <div class="stat-card"><div class="stat-label">2024 FLOOD</div><div class="stat-value" id="stat-2024" style="color:#D4C89A">—</div></div>
        <div class="stat-card"><div class="stat-label">RAINFALL MM</div><div class="stat-value" id="stat-rain" style="color:#70A0D0">—</div></div>
      </div>
      <div id="data-source" class="fm" style="font-size:8px;color:#4A3A18;margin-top:6px">Awaiting query...</div>
    </div>

    <!-- Layer toggles -->
    <div class="sidebar-section">
      <div class="section-label">◈ MAP LAYERS</div>
      <label class="layer-toggle"><div class="layer-dot" style="background:#ff4444"></div><div class="layer-label">Flood Risk Zones</div><input type="checkbox" id="layer-risk" checked onchange="toggleLayer('risk',this.checked)"/></label>
      <label class="layer-toggle"><div class="layer-dot" style="background:#0044ff"></div><div class="layer-label">Flood Extent (selected year)</div><input type="checkbox" id="layer-flood" onchange="toggleLayer('flood',this.checked)"/></label>
      <label class="layer-toggle"><div class="layer-dot" style="background:#ff0000"></div><div class="layer-label">Chronic Inundation (3yr)</div><input type="checkbox" id="layer-chronic" onchange="toggleLayer('chronic',this.checked)"/></label>
    </div>

    <!-- Actions -->
    <div class="sidebar-section">
      <div class="section-label">◈ ACTIONS</div>
      <button class="btn btn-green" id="run-agent-btn" onclick="runAgent()" disabled>▶ RUN 4-AGENT ANALYSIS</button>
      <button class="btn btn-gold" id="download-gee-btn" onclick="downloadGEE()" disabled>⬇ DOWNLOAD GEE SCRIPT</button>
    </div>

    <!-- Agent terminal -->
    <div class="sidebar-section" style="flex:1;display:flex;flex-direction:column;overflow:hidden">
      <div class="section-label">◈ AGENT OUTPUT</div>
      <div class="term" id="term">
        <span style="color:#3A2D10">> Click on India map to query any location...</span>
      </div>
    </div>
  </div>
</div>

<script>
const B = '';
let map, clickMarker, leafletLayers = {};
let currentLat = 22, currentLon = 80;
let currentStats = null;

// ── Init Leaflet map ──────────────────────────────────────────
map = L.map('map', {
  center:    [22, 80],
  zoom:      5,
  zoomControl: true,
}).addControl(L.control.zoom({position: 'bottomright'}));

// Dark base tile
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
  attribution: '© OpenStreetMap contributors © CARTO',
  subdomains:  'abcd',
  maxZoom:     19,
  opacity:     0.8,
}).addTo(map);

// India border overlay
const indiaBorder = L.geoJSON(null, {
  style: { color: 'rgba(201,150,42,0.4)', weight: 1.5, fillOpacity: 0 }
});
// We'll just show a rectangle approximating India for now
L.rectangle([[6, 66],[38, 98]], {
  color: 'rgba(201,150,42,0.2)', weight: 1,
  fill: false, dashArray: '4 4'
}).addTo(map);

// ── Map click handler ─────────────────────────────────────────
map.on('click', function(e) {
  const lat = parseFloat(e.latlng.lat.toFixed(4));
  const lon = parseFloat(e.latlng.lng.toFixed(4));
  if (lat < 6 || lat > 38 || lon < 66 || lon > 98) {
    logTerm('✗ Click within India (lat 6-38, lon 66-98)', '#E87070');
    return;
  }
  document.getElementById('lat-input').value = lat;
  document.getElementById('lon-input').value = lon;
  queryLocation(lat, lon);
});

// ── Radius slider ─────────────────────────────────────────────
document.getElementById('radius').addEventListener('input', function() {
  document.getElementById('radius-label').textContent = this.value + ' km';
});

// ── Log to terminal ───────────────────────────────────────────
function logTerm(msg, color = '#D4C89A') {
  const term = document.getElementById('term');
  const div  = document.createElement('div');
  div.style.color = color;
  div.textContent = msg;
  term.appendChild(div);
  term.scrollTop = term.scrollHeight;
}

function clearTerm() {
  document.getElementById('term').innerHTML = '';
}

// ── Place marker ──────────────────────────────────────────────
function placeMarker(lat, lon, label) {
  if (clickMarker) map.removeLayer(clickMarker);
  clickMarker = L.circleMarker([lat, lon], {
    radius: 8, color: '#E8B84B', fillColor: '#C9962A',
    fillOpacity: 0.8, weight: 2
  }).bindPopup(
    `<b style="color:#E8B84B">${label}</b><br>` +
    `<span style="font-size:10px">${lat}°N ${lon}°E</span>`
  ).addTo(map).openPopup();
}

// ── Add GEE tile layer ────────────────────────────────────────
function addTileLayer(name, tileUrl) {
  if (leafletLayers[name]) {
    map.removeLayer(leafletLayers[name]);
  }
  if (tileUrl) {
    leafletLayers[name] = L.tileLayer(tileUrl, {
      opacity:     0.65,
      attribution: 'Chronostasis / GEE',
    });
    const checkbox = document.getElementById('layer-' + name);
    if (checkbox && checkbox.checked) {
      leafletLayers[name].addTo(map);
    }
  }
}

function toggleLayer(name, show) {
  if (leafletLayers[name]) {
    if (show) leafletLayers[name].addTo(map);
    else map.removeLayer(leafletLayers[name]);
  }
}

// ── Query location ────────────────────────────────────────────
async function queryLocation(lat, lon) {
  currentLat = lat;
  currentLon = lon;
  const year   = parseInt(document.getElementById('year-select').value);
  const radius = parseInt(document.getElementById('radius').value);

  clearTerm();
  logTerm(`→ QUERY  lat=${lat}  lon=${lon}  year=${year}  radius=${radius}km`, '#C9962A');
  document.getElementById('loading').style.display = 'flex';
  document.getElementById('run-agent-btn').disabled = true;
  document.getElementById('download-gee-btn').disabled = true;
  document.getElementById('coord-legend').textContent = `${lat}°N ${lon}°E`;
  placeMarker(lat, lon, `${lat}°N, ${lon}°E`);
  map.setView([lat, lon], 7);

  try {
    const res = await fetch(`${B}/query/location`, {
      method:  'POST',
      headers: {'Content-Type': 'application/json'},
      body:    JSON.stringify({lat, lon, radius_km: radius, year})
    });
    const data = await res.json();

    if (!res.ok) {
      logTerm(`✗ ${data.detail || 'Query failed'}`, '#E87070');
      return;
    }

    currentStats = data;

    // Update stats
    const fa  = data.flood_areas_km2 || {};
    const rz  = data.risk_zones_km2  || {};
    const src = data.mock ? '⚠ Mock data (GEE not connected)' : '✓ Real Sentinel-1 SAR data';

    document.getElementById('stat-peak').textContent   = data.peak_year || '—';
    document.getElementById('stat-flood').textContent  = formatKm2(fa[data.peak_year]);
    document.getElementById('stat-chronic').textContent = formatKm2(data.chronic_km2);
    document.getElementById('stat-high').textContent   = formatKm2(rz.high);
    document.getElementById('stat-2022').textContent   = formatKm2(fa[2022] || fa['2022']);
    document.getElementById('stat-2023').textContent   = formatKm2(fa[2023] || fa['2023']);
    document.getElementById('stat-2024').textContent   = formatKm2(fa[2024] || fa['2024']);
    document.getElementById('stat-rain').textContent   = (data.peak_rainfall_mm || 0) + ' mm';
    document.getElementById('data-source').textContent = src;
    document.getElementById('data-source').style.color = data.mock ? '#E87A40' : '#70D070';

    // Add tile layers if available
    const tiles = data.tiles || {};
    if (tiles.risk)    addTileLayer('risk',    tiles.risk);
    if (tiles.flood)   addTileLayer('flood',   tiles.flood);
    if (tiles.chronic) addTileLayer('chronic', tiles.chronic);

    if (tiles.risk) {
      logTerm('✓ GEE flood risk tiles loaded', '#70D070');
    } else {
      logTerm('⚠ GEE tiles unavailable — configure GEE_SERVICE_ACCOUNT_JSON', '#E87A40');
    }

    logTerm(`✓ Peak year: ${data.peak_year} | Flood: ${formatKm2(fa[data.peak_year])}`, '#70D070');
    logTerm(`  Chronic: ${formatKm2(data.chronic_km2)} | High risk: ${formatKm2(rz.high)}`, '#8B7840');

    document.getElementById('run-agent-btn').disabled = false;
    document.getElementById('download-gee-btn').disabled = false;

  } catch (e) {
    logTerm(`✗ ${e.message}`, '#E87070');
  } finally {
    document.getElementById('loading').style.display = 'none';
  }
}

function queryLatLon() {
  const lat = parseFloat(document.getElementById('lat-input').value);
  const lon = parseFloat(document.getElementById('lon-input').value);
  if (isNaN(lat) || isNaN(lon)) { logTerm('✗ Enter valid lat/lon', '#E87070'); return; }
  queryLocation(lat, lon);
}

function goTo(lat, lon, name) {
  document.getElementById('lat-input').value = lat;
  document.getElementById('lon-input').value = lon;
  queryLocation(lat, lon);
}

function formatKm2(val) {
  if (val === undefined || val === null) return '—';
  return parseFloat(val).toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' km²';
}

// ── Run agent ────────────────────────────────────────────────
async function runAgent() {
  logTerm('→ Running 4-agent analysis...', '#C9962A');
  document.getElementById('run-agent-btn').disabled = true;
  try {
    // Find nearest region for agent
    const regionId = findNearestRegion(currentLat, currentLon);
    logTerm(`  Using region: ${regionId}`, '#6B5A30');

    const res  = await fetch(`${B}/agent/step`, {
      method:  'POST',
      headers: {'Content-Type': 'application/json'},
      body:    JSON.stringify({region_id: regionId, task_id: 'flood_risk_forecast'})
    });
    const data = await res.json();
    if (!res.ok) { logTerm(`✗ ${data.detail}`, '#E87070'); return; }

    logTerm(`✓ REWARD=${data.reward?.toFixed(3)} | MODEL=${data.model?.split('/').pop()}`, '#70D070');
    logTerm('', '#4A3A18');
    // Show agent output in chunks
    const msg = data.agent_message || '';
    const chunks = msg.match(/.{1,80}/g) || [];
    chunks.forEach(c => logTerm(c, '#8B7840'));
  } catch(e) {
    logTerm(`✗ ${e.message}`, '#E87070');
  } finally {
    document.getElementById('run-agent-btn').disabled = false;
  }
}

// ── Download GEE script ──────────────────────────────────────
function downloadGEE() {
  const year = document.getElementById('year-select').value;
  const regionId = findNearestRegion(currentLat, currentLon);
  window.open(`${B}/gee/code?region_id=${regionId}&year=${year}`, '_blank');
  logTerm(`⬇ Downloading GEE script: ${regionId} ${year}`, '#C9962A');
}

// ── Find nearest region ──────────────────────────────────────
const REGION_COORDS = {
  brahmaputra:{lat:26.2,lon:91.7}, ganga:{lat:25.6,lon:85.1},
  mahanadi:{lat:20.5,lon:85.8},    krishna:{lat:16.5,lon:80.6},
  godavari:{lat:17.0,lon:81.8},    narmada:{lat:22.7,lon:77.4},
  tapti:{lat:21.2,lon:74.8},       cauvery:{lat:11.5,lon:78.0},
  damodar:{lat:23.5,lon:87.3},     sabarmati:{lat:23.2,lon:72.9},
  mahi:{lat:22.5,lon:73.5},        baitarani:{lat:21.5,lon:86.0},
  subarnarekha:{lat:22.5,lon:86.5},indus:{lat:31.5,lon:75.8},
  luni:{lat:26.0,lon:72.5},
};

function findNearestRegion(lat, lon) {
  let best = 'brahmaputra', bestDist = Infinity;
  Object.entries(REGION_COORDS).forEach(([rid, c]) => {
    const d = Math.hypot(lat - c.lat, lon - c.lon);
    if (d < bestDist) { bestDist = d; best = rid; }
  });
  return best;
}

// ── Check GEE status ─────────────────────────────────────────
fetch(`${B}/health`).then(r=>r.json()).then(d => {
  const badge = document.getElementById('gee-badge');
  if (d.gee_available) {
    badge.textContent = '● GEE LIVE';
    badge.className = 'badge badge-live';
  } else {
    badge.textContent = '○ GEE MOCK';
    badge.className = 'badge badge-warn';
  }
  document.getElementById('model-badge').textContent =
    d.using_trained_model ? 'RL MODEL' : 'BASE MODEL';
}).catch(() => {});
</script>
</body>
</html>