Upload 8 files

api/__init__.py

@@ -0,0 +1,7 @@
+"""
+API module for Flood Vulnerability Assessment
+"""
+from .models import SingleAssessment
+from .batch import process_single_row, process_single_row_multihazard
+
+__all__ = ['SingleAssessment', 'process_single_row', 'process_single_row_multihazard']

api/batch.py

@@ -0,0 +1,161 @@
+"""
+Batch processing functions for CSV file assessments
+"""
+from spatial_queries import get_terrain_metrics, distance_to_water
+from vulnerability import calculate_vulnerability_index, calculate_multi_hazard_vulnerability
+from height_predictor.inference import get_predictor
+from height_predictor.get_height_gba import GlobalBuildingAtlasHeight
+
+# Initialize GBA getter (singleton pattern)
+gba_getter = GlobalBuildingAtlasHeight()
+
+
+def process_single_row(row, use_predicted_height=False, use_gba_height=False):
+    """Process a single row from CSV - used for parallel processing."""
+    try:
+        lat = row['latitude']
+        lon = row['longitude']
+        height = row.get('height', 0.0)
+        basement = row.get('basement', 0.0)
+        
+        if use_gba_height:
+            try:
+                result = gba_getter.get_height_m(lat, lon, buffer_m=5.0)
+                if result.get('status') == 'success' and result.get('predicted_height') is not None:
+                    h = result['predicted_height']
+                    if h >= 0:  # Only use valid positive heights
+                        height = h
+            except Exception as e:
+                print(f"GBA height failed for {lat},{lon}: {e}")
+        elif use_predicted_height:
+            try:
+                predictor = get_predictor()
+                pred = predictor.predict_from_coordinates(lat, lon)
+                if pred['status'] == 'success' and pred['predicted_height'] is not None:
+                    height = pred['predicted_height']
+            except Exception as e:
+                print(f"Height prediction failed for {lat},{lon}: {e}")
+
+        terrain = get_terrain_metrics(lat, lon)
+        water_dist = distance_to_water(lat, lon)
+
+        result = calculate_vulnerability_index(
+            lat=lat,
+            lon=lon,
+            height=height,
+            basement=basement,
+            terrain_metrics=terrain,
+            water_distance=water_dist
+        )
+
+        # CSV output - essential columns
+        return {
+            'latitude': lat,
+            'longitude': lon,
+            'height': height,
+            'basement': basement,
+            'vulnerability_index': result['vulnerability_index'],
+            'ci_lower_95': result['confidence_interval']['lower_bound_95'],
+            'ci_upper_95': result['confidence_interval']['upper_bound_95'],
+            'vulnerability_level': result['risk_level'],
+            'confidence': result['uncertainty_analysis']['confidence'],
+            'confidence_interpretation': result['uncertainty_analysis']['interpretation'],
+            'elevation_m': result['elevation_m'],
+            'tpi_m': result['relative_elevation_m'],
+            'slope_degrees': result['slope_degrees'],
+            'distance_to_water_m': result['distance_to_water_m'],
+            'quality_flags': ','.join(result['uncertainty_analysis']['data_quality_flags']) if result['uncertainty_analysis']['data_quality_flags'] else ''
+        }
+
+    except Exception as e:
+        return {
+            'latitude': row.get('latitude'),
+            'longitude': row.get('longitude'),
+            'height': row.get('height', 0.0),
+            'basement': row.get('basement', 0.0),
+            'error': str(e),
+            'vulnerability_index': None,
+            'ci_lower_95': None,
+            'ci_upper_95': None,
+            'risk_level': None,
+            'confidence': None,
+            'confidence_interpretation': None,
+            'elevation_m': None,
+            'tpi_m': None,
+            'slope_degrees': None,
+            'distance_to_water_m': None,
+            'quality_flags': ''
+        }
+
+
+def process_single_row_multihazard(row, use_predicted_height=False, use_gba_height=False):
+    """Process a single row with multi-hazard assessment."""
+    try:
+        lat = row['latitude']
+        lon = row['longitude']
+        height = row.get('height', 0.0)
+        basement = row.get('basement', 0.0)
+
+        if use_gba_height:
+            try:
+                result = gba_getter.get_height_m(lat, lon, buffer_m=5.0)
+                if result.get('status') == 'success' and result.get('predicted_height') is not None:
+                    h = result['predicted_height']
+                    if h >= 0:  # Only use valid positive heights
+                        height = h
+            except Exception as e:
+                print(f"GBA height failed for {lat},{lon}: {e}")
+        elif use_predicted_height:
+            try:
+                predictor = get_predictor()
+                pred = predictor.predict_from_coordinates(lat, lon)
+                if pred['status'] == 'success' and pred['predicted_height'] is not None:
+                    height = pred['predicted_height']
+            except Exception as e:
+                print(f"Height prediction failed for {lat},{lon}: {e}")
+
+        terrain = get_terrain_metrics(lat, lon)
+        water_dist = distance_to_water(lat, lon)
+
+        result = calculate_multi_hazard_vulnerability(
+            lat=lat,
+            lon=lon,
+            height=height,
+            basement=basement,
+            terrain_metrics=terrain,
+            water_distance=water_dist
+        )
+
+        return {
+            'latitude': lat,
+            'longitude': lon,
+            'height': height,
+            'basement': basement,
+            'vulnerability_index': result['vulnerability_index'],
+            'ci_lower_95': result['confidence_interval']['lower_bound_95'],
+            'ci_upper_95': result['confidence_interval']['upper_bound_95'],
+            'vulnerability_level': result['risk_level'],
+            'confidence': result['uncertainty_analysis']['confidence'],
+            'confidence_interpretation': result['uncertainty_analysis']['interpretation'],
+            'elevation_m': result['elevation_m'],
+            'tpi_m': result['relative_elevation_m'],
+            'slope_degrees': result['slope_degrees'],
+            'distance_to_water_m': result['distance_to_water_m'],
+            'dominant_hazard': result['dominant_hazard'],
+            'fluvial_risk': result['hazard_breakdown']['fluvial_riverine'],
+            'coastal_risk': result['hazard_breakdown']['coastal_surge'],
+            'pluvial_risk': result['hazard_breakdown']['pluvial_drainage'],
+            'combined_risk': result['hazard_breakdown']['combined_index'],
+            'quality_flags': ','.join(result['uncertainty_analysis']['data_quality_flags'])
+                     if result['uncertainty_analysis']['data_quality_flags'] else ''
+        }
+
+    except Exception as e:
+        return {
+            'latitude': row.get('latitude'),
+            'longitude': row.get('longitude'),
+            'height': row.get('height', 0.0),
+            'basement': row.get('basement', 0.0),
+            'error': str(e),
+            'vulnerability_index': None
+        }

api/models.py

@@ -0,0 +1,34 @@
+"""
+Pydantic models for API request/response validation
+"""
+from pydantic import BaseModel, field_validator
+from typing import Optional
+
+
+class SingleAssessment(BaseModel):
+    """Model for single location vulnerability assessment request"""
+    latitude: float
+    longitude: float
+    height: Optional[float] = 0.0
+    basement: Optional[float] = 0.0
+
+    @field_validator('latitude')
+    @classmethod
+    def check_lat(cls, v: float) -> float:
+        if not -90 <= v <= 90:
+            raise ValueError('Latitude must be between -90 and 90')
+        return v
+
+    @field_validator('longitude')
+    @classmethod
+    def check_lon(cls, v: float) -> float:
+        if not -180 <= v <= 180:
+            raise ValueError('Longitude must be between -180 and 180')
+        return v
+
+    @field_validator('basement')
+    @classmethod
+    def check_basement(cls, v: float) -> float:
+        if v > 0:
+            raise ValueError('Basement height must be 0 or negative (e.g., -1, -2, -3)')
+        return v

static/css/styles.css

@@ -0,0 +1,1042 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html,
+body {
+    height: 100%;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+    background: #000;
+    color: #fff;
+    position: relative;
+    overflow-x: hidden;
+}
+
+/* Animated background */
+.hero-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
+    z-index: 0;
+}
+
+.hero-background::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background:
+        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
+        radial-gradient(circle at 80% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
+    animation: pulse 8s ease-in-out infinite;
+}
+
+@keyframes pulse {
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+}
+
+.page-wrapper {
+    position: relative;
+    z-index: 1;
+    min-height: 100vh;
+}
+
+/* Header with hero section */
+.hero-header {
+    position: relative;
+    padding: 4rem 2rem;
+    text-align: center;
+    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 100%);
+    border-bottom: 2px solid rgba(59, 130, 246, 0.3);
+}
+
+.hero-header h1 {
+    font-size: 3.5em;
+    font-weight: 800;
+    margin-bottom: 1rem;
+    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #60a5fa 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    background-size: 200% auto;
+    animation: shine 3s linear infinite;
+}
+
+@keyframes shine {
+    to {
+        background-position: 200% center;
+    }
+}
+
+.hero-header .subtitle {
+    font-size: 1.3em;
+    color: #94a3b8;
+    font-weight: 300;
+    max-width: 700px;
+    margin: 0 auto;
+}
+
+/* Side navigation */
+.main-container {
+    display: flex;
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem;
+    gap: 2rem;
+}
+
+.side-nav {
+    width: 280px;
+    flex-shrink: 0;
+    position: sticky;
+    top: 2rem;
+    height: fit-content;
+}
+
+.nav-card {
+    background: rgba(30, 41, 59, 0.8);
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    padding: 1.5rem;
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+}
+
+.nav-card h3 {
+    color: #e2e8f0;
+    font-size: 1.1em;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.nav-link {
+    display: block;
+    padding: 1rem 1.25rem;
+    margin-bottom: 0.5rem;
+    background: transparent;
+    border: none;
+    color: #94a3b8;
+    text-align: left;
+    cursor: pointer;
+    border-radius: 12px;
+    font-size: 0.95em;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+}
+
+.nav-link::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 3px;
+    background: linear-gradient(180deg, #3b82f6, #8b5cf6);
+    transform: scaleY(0);
+    transition: transform 0.3s ease;
+}
+
+.nav-link:hover {
+    background: rgba(59, 130, 246, 0.1);
+    color: #e2e8f0;
+    transform: translateX(5px);
+}
+
+.nav-link.active {
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
+    color: #fff;
+    font-weight: 600;
+}
+
+.nav-link.active::before {
+    transform: scaleY(1);
+}
+
+/* Content area */
+.content-area {
+    flex: 1;
+    min-width: 0;
+}
+
+.assessment-card {
+    display: none;
+    background: rgba(30, 41, 59, 0.8);
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    padding: 3rem;
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+    animation: slideIn 0.4s ease;
+}
+
+.assessment-card.active {
+    display: block;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.card-header {
+    margin-bottom: 2rem;
+}
+
+.card-header h2 {
+    font-size: 2em;
+    color: #e2e8f0;
+    margin-bottom: 0.5rem;
+}
+
+.card-header p {
+    color: #94a3b8;
+    font-size: 1.05em;
+}
+
+/* Form styling */
+.form-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.input-card {
+    background: rgba(15, 23, 42, 0.6);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    border-radius: 16px;
+    padding: 1.5rem;
+    transition: all 0.3s ease;
+}
+
+.input-card:hover {
+    border-color: rgba(59, 130, 246, 0.4);
+    background: rgba(15, 23, 42, 0.8);
+    transform: translateY(-2px);
+}
+
+.input-card label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+    color: #cbd5e1;
+    font-weight: 600;
+    font-size: 0.95em;
+}
+
+.input-card label::before {
+    content: '';
+    width: 4px;
+    height: 16px;
+    background: linear-gradient(180deg, #3b82f6, #8b5cf6);
+    border-radius: 2px;
+}
+
+.input-card input,
+.input-card select {
+    width: 100%;
+    padding: 0.875rem;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    border-radius: 10px;
+    color: #e2e8f0;
+    font-size: 1em;
+    transition: all 0.3s ease;
+}
+
+.input-card input:focus,
+.input-card select:focus {
+    outline: none;
+    border-color: #3b82f6;
+    background: rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.input-card .helper-text {
+    margin-top: 0.5rem;
+    font-size: 0.8em;
+    color: #64748b;
+    font-style: italic;
+}
+
+/* Height group with predict button */
+.height-group {
+    display: flex;
+    align-items: stretch;
+    gap: 0;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    border-radius: 10px;
+    overflow: visible;
+    transition: all 0.3s ease;
+}
+
+.height-group input {
+    border-radius: 10px 0 0 10px;
+}
+
+.height-group button:last-child {
+    border-radius: 0 10px 10px 0;
+}
+
+.input-card {
+    overflow: visible;
+}
+
+.height-group:focus-within {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.height-group input {
+    flex: 1;
+    padding: 0.875rem;
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    color: #e2e8f0;
+    font-size: 1em;
+    box-shadow: none !important;
+}
+
+.height-group input:focus {
+    outline: none;
+}
+
+.height-group button {
+    width: auto !important;
+    padding: 0.875rem 1.5rem !important;
+    background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
+    color: white;
+    border: none;
+    border-left: 1px solid rgba(148, 163, 184, 0.3);
+    cursor: pointer;
+    font-size: 0.9em;
+    font-weight: 600;
+    white-space: nowrap;
+    transition: opacity 0.2s ease;
+    border-radius: 0 10px 10px 0 !important;
+    transform: none !important;
+}
+
+.height-group button:hover {
+    opacity: 0.9;
+    transform: none !important;
+}
+
+.height-group button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.gba-height-btn {
+    margin-top: 0.4rem;
+    align-self: flex-start;
+
+    background: rgba(96, 165, 250, 0.08);
+    border: 1px solid rgba(96, 165, 250, 0.25);
+    border-radius: 8px;
+
+    padding: 0.25rem 0.6rem;
+    font-size: 0.7em;
+    font-weight: 500;
+
+    color: #93c5fd;
+    cursor: pointer;
+
+    transition: background 0.2s ease, border 0.2s ease, color 0.2s ease;
+}
+
+.secondary-btn-style {
+    margin-top: 0.4rem;
+    align-self: flex-start;
+
+    background: rgba(96, 165, 250, 0.08);
+    border: 1px solid rgba(96, 165, 250, 0.25);
+    border-radius: 8px;
+
+    padding: 0.25rem 0.6rem;
+    font-size: 0.7em;
+    font-weight: 500;
+
+    color: #93c5fd;
+    cursor: pointer;
+
+    transition: background 0.2s ease, border 0.2s ease, color 0.2s ease;
+}
+
+.gba-height-btn:hover,
+.secondary-btn-style:hover {
+    background: rgba(96, 165, 250, 0.18);
+    border-color: rgba(96, 165, 250, 0.5);
+    color: #bfdbfe;
+}
+
+
+.gba-height-btn:disabled,
+.secondary-btn-style:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+
+.height-group .gba-height-btn {
+    margin-top: 0;
+    align-self: auto;
+    border-radius: 0;
+    border-left: 1px solid rgba(148, 163, 184, 0.3);
+    height: auto;
+    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+    color: white;
+    border: none;
+    padding: 0.875rem 1.5rem;
+}
+
+.height-group .gba-height-btn:hover {
+    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+    opacity: 0.9;
+    color: white;
+    border-color: transparent;
+}
+
+/* Custom tooltip styling for buttons */
+.tooltip-btn {
+    position: relative;
+}
+
+.tooltip-btn::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: calc(100% + 10px);
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 10px 14px;
+    background: rgba(15, 23, 42, 0.95);
+    color: #e2e8f0;
+    font-size: 1em;
+    font-weight: 400;
+    border-radius: 8px;
+    border: 1px solid rgba(59, 130, 246, 0.3);
+    white-space: normal;
+    width: max-content;
+    max-width: 280px;
+    text-align: center;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease, visibility 0.2s ease;
+    z-index: 1000;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
+    pointer-events: none;
+    line-height: 1.4;
+}
+
+.tooltip-btn::before {
+    content: '';
+    position: absolute;
+    bottom: calc(100% + 2px);
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 8px;
+    border-style: solid;
+    border-color: rgba(15, 23, 42, 0.95) transparent transparent transparent;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease, visibility 0.2s ease;
+    z-index: 1001;
+}
+
+.tooltip-btn:hover::after,
+.tooltip-btn:hover::before {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Checkbox styling */
+.checkbox-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem;
+    background: rgba(15, 23, 42, 0.6);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.checkbox-row:hover {
+    background: rgba(15, 23, 42, 0.8);
+    border-color: rgba(59, 130, 246, 0.4);
+}
+
+.checkbox-row input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    accent-color: #3b82f6;
+}
+
+.checkbox-row label {
+    margin: 0 !important;
+    color: #cbd5e1;
+    font-weight: 500;
+    cursor: pointer;
+    flex: 1;
+}
+
+.checkbox-row label::before {
+    display: none;
+}
+
+/* Action buttons */
+.action-section {
+    margin-top: 2rem;
+    padding-top: 2rem;
+    border-top: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.primary-button {
+    position: relative;
+    width: 100%;
+    padding: 1.25rem 2rem;
+    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+    color: white;
+    border: none;
+    border-radius: 12px;
+    font-size: 1.1em;
+    font-weight: 700;
+    cursor: pointer;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.primary-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s;
+}
+
+.primary-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
+}
+
+.primary-button:hover::before {
+    left: 100%;
+}
+
+.primary-button:active {
+    transform: translateY(-1px);
+}
+
+.primary-button:disabled {
+    background: #334155;
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* Loading state */
+.loading-state {
+    display: none;
+    text-align: center;
+    padding: 3rem;
+}
+
+.loading-spinner {
+    width: 60px;
+    height: 60px;
+    margin: 0 auto 1rem;
+    border: 4px solid rgba(59, 130, 246, 0.2);
+    border-top-color: #3b82f6;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.loading-state p {
+    color: #94a3b8;
+    font-size: 1.1em;
+}
+
+/* Results section */
+.results-section {
+    display: none;
+    margin-top: 2rem;
+}
+
+.results-header {
+    text-align: center;
+    padding: 2rem;
+    margin-bottom: 2rem;
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
+    border-radius: 16px;
+    border: 1px solid rgba(59, 130, 246, 0.3);
+}
+
+.results-header h2 {
+    font-size: 2em;
+    margin-bottom: 1rem;
+    color: #e2e8f0;
+}
+
+.risk-badge {
+    display: inline-block;
+    padding: 0.75rem 2rem;
+    border-radius: 30px;
+    font-weight: 700;
+    font-size: 1.2em;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+}
+
+.risk-very-high {
+    background: linear-gradient(135deg, #dc2626, #b91c1c);
+    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
+}
+
+.risk-high {
+    background: linear-gradient(135deg, #ea580c, #c2410c);
+    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4);
+}
+
+.risk-moderate {
+    background: linear-gradient(135deg, #ca8a04, #a16207);
+    box-shadow: 0 4px 15px rgba(202, 138, 4, 0.4);
+}
+
+.risk-low {
+    background: linear-gradient(135deg, #16a34a, #15803d);
+    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.4);
+}
+
+.risk-very-low {
+    background: linear-gradient(135deg, #0891b2, #0e7490);
+    box-shadow: 0 4px 15px rgba(8, 145, 178, 0.4);
+}
+
+/* Stats grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.stat-card {
+    background: rgba(15, 23, 42, 0.6);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    border-radius: 16px;
+    padding: 1.5rem;
+    transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+    border-color: rgba(59, 130, 246, 0.5);
+    transform: translateY(-5px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.stat-label {
+    font-size: 0.9em;
+    color: #94a3b8;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 0.5rem;
+}
+
+.stat-value {
+    font-size: 2em;
+    font-weight: 700;
+    background: linear-gradient(135deg, #60a5fa, #a78bfa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* Detail sections */
+.detail-section {
+    background: rgba(15, 23, 42, 0.6);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    border-radius: 16px;
+    padding: 2rem;
+    margin-bottom: 1.5rem;
+}
+
+.detail-section h3 {
+    font-size: 1.5em;
+    color: #e2e8f0;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.metric-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 0;
+    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
+}
+
+.metric-row:last-child {
+    border-bottom: none;
+}
+
+.metric-label {
+    color: #94a3b8;
+    font-weight: 500;
+}
+
+.metric-value {
+    color: #e2e8f0;
+    font-weight: 700;
+    font-size: 1.1em;
+}
+
+/* Confidence visualization */
+.confidence-section {
+    background: rgba(15, 23, 42, 0.6);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    border-radius: 16px;
+    padding: 2rem;
+    margin-bottom: 1.5rem;
+}
+
+.confidence-bar-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin: 1.5rem 0;
+}
+
+.confidence-bar-wrapper span {
+    font-size: 0.85em;
+    color: #64748b;
+    font-weight: 600;
+}
+
+.confidence-bar {
+    flex: 1;
+    height: 40px;
+    background: rgba(0, 0, 0, 0.4);
+    border-radius: 20px;
+    overflow: hidden;
+    position: relative;
+    border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.confidence-fill {
+    height: 100%;
+    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+}
+
+.confidence-high {
+    background: linear-gradient(90deg, #16a34a, #22c55e);
+    box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
+}
+
+.confidence-moderate-fill {
+    background: linear-gradient(90deg, #ca8a04, #fbbf24);
+    box-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
+}
+
+.confidence-low-fill {
+    background: linear-gradient(90deg, #ea580c, #f97316);
+    box-shadow: 0 0 20px rgba(249, 115, 22, 0.4);
+}
+
+.confidence-text {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: 800;
+    color: white;
+    font-size: 1.1em;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+    z-index: 2;
+}
+
+/* Hazard breakdown */
+.hazard-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    margin: 1.5rem 0;
+}
+
+.hazard-card {
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
+    border: 1px solid rgba(59, 130, 246, 0.3);
+    border-radius: 16px;
+    padding: 2rem;
+    text-align: center;
+    transition: all 0.3s ease;
+}
+
+.hazard-card:hover {
+    transform: scale(1.05);
+    border-color: rgba(59, 130, 246, 0.5);
+    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
+}
+
+.hazard-type {
+    font-size: 0.9em;
+    color: #94a3b8;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 1rem;
+}
+
+.hazard-value {
+    font-size: 3em;
+    font-weight: 800;
+    background: linear-gradient(135deg, #60a5fa, #a78bfa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* Explanation section */
+.explanation-section {
+    background: rgba(15, 23, 42, 0.6);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    border-radius: 16px;
+    padding: 2rem;
+    margin-bottom: 1.5rem;
+}
+
+.factor-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin: 1rem 0;
+    padding: 1rem;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 12px;
+}
+
+.factor-name {
+    min-width: 200px;
+    color: #cbd5e1;
+    font-weight: 600;
+}
+
+.factor-bar {
+    flex: 1;
+    height: 28px;
+    background: rgba(59, 130, 246, 0.1);
+    border-radius: 14px;
+    overflow: hidden;
+    border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.factor-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
+}
+
+.factor-percentage {
+    min-width: 60px;
+    text-align: right;
+    color: #e2e8f0;
+    font-weight: 700;
+    font-size: 1.05em;
+}
+
+/* Quality warnings */
+.quality-warning {
+    background: linear-gradient(135deg, rgba(202, 138, 4, 0.2), rgba(161, 98, 7, 0.2));
+    border: 1px solid rgba(202, 138, 4, 0.4);
+    border-left: 4px solid #ca8a04;
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin: 1.5rem 0;
+}
+
+.quality-warning h4 {
+    color: #fbbf24;
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.quality-warning ul {
+    list-style: none;
+    padding: 0;
+}
+
+.quality-warning li {
+    padding: 0.5rem 0;
+    color: #fde047;
+    padding-left: 1.5rem;
+    position: relative;
+}
+
+.quality-warning li::before {
+    content: '⚠';
+    position: absolute;
+    left: 0;
+}
+
+/* Error state */
+.error-message {
+    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(185, 28, 28, 0.2));
+    border: 1px solid rgba(220, 38, 38, 0.4);
+    border-left: 4px solid #dc2626;
+    color: #fca5a5;
+    padding: 1.5rem;
+    border-radius: 12px;
+    margin: 1.5rem 0;
+    display: none;
+}
+
+/* Footer */
+footer {
+    margin-top: 4rem;
+    padding: 2rem;
+    text-align: center;
+    color: #64748b;
+    border-top: 1px solid rgba(59, 130, 246, 0.2);
+    background: rgba(15, 23, 42, 0.6);
+}
+
+/* File upload styling */
+input[type="file"] {
+    cursor: pointer;
+    padding: 1rem !important;
+}
+
+input[type="file"]::file-selector-button {
+    padding: 0.5rem 1rem;
+    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    margin-right: 1rem;
+    transition: all 0.3s;
+}
+
+input[type="file"]::file-selector-button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
+}
+
+/* Pulse animation for predicted height */
+@keyframes height-pulse {
+
+    0%,
+    100% {
+        background: rgba(0, 0, 0, 0.3);
+    }
+
+    50% {
+        background: rgba(59, 130, 246, 0.3);
+    }
+}
+
+.height-pulse {
+    animation: height-pulse 0.8s ease;
+}
+
+input[type="text"]::-webkit-calendar-picker-indicator,
+input[type="number"]::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+    cursor: pointer;
+}
+
+/* Responsive design */
+@media (max-width: 1024px) {
+    .main-container {
+        flex-direction: column;
+    }
+
+    .side-nav {
+        width: 100%;
+        position: static;
+    }
+
+    .nav-card {
+        display: flex;
+        overflow-x: auto;
+        padding: 1rem;
+    }
+
+    .nav-card h3 {
+        display: none;
+    }
+
+    .nav-link {
+        white-space: nowrap;
+        margin-right: 0.5rem;
+        margin-bottom: 0;
+    }
+}
+
+@media (max-width: 768px) {
+    .hero-header h1 {
+        font-size: 2em;
+    }
+
+    .form-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .assessment-card {
+        padding: 1.5rem;
+    }
+
+    .factor-name {
+        min-width: 120px;
+        font-size: 0.9em;
+    }
+}

static/js/app.js

@@ -0,0 +1,603 @@
+// CACHE MANAGEMENT
+
+const CACHE_KEY = 'flood_assessment_cache';
+const MAX_CACHE_SIZE = 5;
+
+// Get cached entries from localStorage
+function getCachedEntries() {
+    try {
+        const cached = localStorage.getItem(CACHE_KEY);
+        return cached ? JSON.parse(cached) : [];
+    } catch (e) {
+        console.error('Error reading cache:', e);
+        return [];
+    }
+}
+
+function saveToCacheFunction(latitude, longitude, height, basement) {
+    try {
+        let entries = getCachedEntries();
+
+        const newEntry = {
+            latitude: parseFloat(latitude).toFixed(6),
+            longitude: parseFloat(longitude).toFixed(6),
+            height: parseFloat(height).toFixed(2),
+            basement: parseFloat(basement).toFixed(2),
+            timestamp: Date.now()
+        };
+
+        // Check if entry already exists
+        const exists = entries.some(entry =>
+            entry.latitude === newEntry.latitude &&
+            entry.longitude === newEntry.longitude &&
+            entry.height === newEntry.height &&
+            entry.basement === newEntry.basement
+        );
+
+        if (!exists) {
+            entries.unshift(newEntry);
+
+            if (entries.length > MAX_CACHE_SIZE) {
+                entries = entries.slice(0, MAX_CACHE_SIZE);
+            }
+
+            localStorage.setItem(CACHE_KEY, JSON.stringify(entries));
+            updateDatalistSuggestions();
+        }
+    } catch (e) {
+        console.error('Error saving to cache:', e);
+    }
+}
+
+// Update datalist suggestions from cache
+function updateDatalistSuggestions() {
+    const entries = getCachedEntries();
+
+    updateDatalist('lat-suggestions', entries, 'latitude');
+    updateDatalist('lon-suggestions', entries, 'longitude');
+    updateDatalist('height-suggestions', entries, 'height');
+    updateDatalist('basement-suggestions', entries, 'basement');
+}
+
+// Update a specific datalist
+function updateDatalist(datalistId, entries, field) {
+    const datalist = document.getElementById(datalistId);
+    if (!datalist) return;
+
+    datalist.innerHTML = '';
+
+    entries.forEach((entry) => {
+        const option = document.createElement('option');
+        option.value = entry[field];
+
+        if (field === 'latitude') {
+            option.label = `${entry.latitude} | Lon: ${entry.longitude}, H: ${entry.height}m, B: ${entry.basement}m`;
+        } else if (field === 'longitude') {
+            option.label = `${entry.longitude} | Lat: ${entry.latitude}, H: ${entry.height}m, B: ${entry.basement}m`;
+        } else if (field === 'height') {
+            option.label = `${entry.height}m | At: ${entry.latitude}, ${entry.longitude}`;
+        } else if (field === 'basement') {
+            option.label = `${entry.basement}m | At: ${entry.latitude}, ${entry.longitude}`;
+        }
+
+        datalist.appendChild(option);
+    });
+}
+
+// Setup autofill functionality
+function setupAutoFill() {
+    const forms = [
+        { suffix: '', latId: 'latitude', lonId: 'longitude' },
+        { suffix: '2', latId: 'latitude2', lonId: 'longitude2' },
+        { suffix: '3', latId: 'latitude3', lonId: 'longitude3' }
+    ];
+
+    forms.forEach(({ suffix, latId, lonId }) => {
+        const latInput = document.getElementById(latId);
+        const lonInput = document.getElementById(lonId);
+
+        if (!latInput || !lonInput) return;
+
+        const tryAutoFill = () => {
+            const latValue = parseNumber(latInput.value);
+            const lonValue = parseNumber(lonInput.value);
+
+            if (isNaN(latValue) || isNaN(lonValue)) return;
+
+            const entries = getCachedEntries();
+            const normalizedLat = latValue.toFixed(6);
+            const normalizedLon = lonValue.toFixed(6);
+
+            // Find entry matching BOTH lat and lon
+            const match = entries.find(entry =>
+                entry.latitude === normalizedLat &&
+                entry.longitude === normalizedLon
+            );
+
+            if (match) {
+                const heightInput = document.getElementById('height' + suffix);
+                const basementInput = document.getElementById('basement' + suffix);
+
+                if (heightInput && basementInput) {
+                    heightInput.value = match.height;
+                    basementInput.value = match.basement;
+
+                    [latInput, lonInput, heightInput, basementInput].forEach(input => {
+                        input.classList.add('height-pulse');
+                        setTimeout(() => input.classList.remove('height-pulse'), 800);
+                    });
+                }
+            }
+        };
+
+        latInput.addEventListener('change', () => {
+            setTimeout(tryAutoFill, 100);
+        });
+
+        lonInput.addEventListener('change', () => {
+            setTimeout(tryAutoFill, 100);
+        });
+    });
+}
+
+// UTILITY FUNCTIONS
+
+// Parse numbers with comma or dot as decimal separator
+function parseNumber(value) {
+    if (typeof value === 'string') {
+        value = value.replace(',', '.');
+    }
+    return parseFloat(value);
+}
+
+// Format quality flag for display
+function formatFlag(flag) {
+    const flagMessages = {
+        'missing_elevation': 'Elevation data unavailable',
+        'missing_tpi': 'Topographic position data incomplete',
+        'missing_slope': 'Slope data incomplete',
+        'water_distance_unknown': 'Water proximity uncertain',
+        'far_from_water_search_limited': 'Far from major water bodies (search radius limited)',
+        'steep_terrain_dem_error_high': 'Steep terrain increases measurement uncertainty',
+        'coastal_surge_risk_not_modeled': 'Coastal surge dynamics not fully captured'
+    };
+    return flagMessages[flag] || flag.replace(/_/g, ' ');
+}
+
+// UI INTERACTIONS
+
+// Switch between assessment tabs
+function switchTab(tabName) {
+    document.querySelectorAll('.assessment-card').forEach(card => {
+        card.classList.remove('active');
+    });
+    document.querySelectorAll('.nav-link').forEach(link => {
+        link.classList.remove('active');
+    });
+
+    document.getElementById(tabName + '-card').classList.add('active');
+    event.target.classList.add('active');
+}
+
+// API COMMUNICATION
+
+// Predict building height from coordinates
+async function predictHeight(latId, lonId, heightId, errorId, button) {
+    const latInput = document.getElementById(latId);
+    const lonInput = document.getElementById(lonId);
+    const heightInput = document.getElementById(heightId);
+    const errorBox = document.getElementById(errorId);
+
+    if (!latInput || !lonInput || !heightInput || !errorBox) {
+        return;
+    }
+
+    errorBox.style.display = 'none';
+    errorBox.textContent = '';
+
+    const latitude = parseFloat(latInput.value);
+    const longitude = parseFloat(lonInput.value);
+
+    if (isNaN(latitude) || isNaN(longitude)) {
+        errorBox.textContent = 'Please enter latitude and longitude first.';
+        errorBox.style.display = 'block';
+        return;
+    }
+
+    const originalText = button.textContent;
+    button.disabled = true;
+    button.textContent = 'Predicting...';
+
+    try {
+        const response = await fetch('/predict_height', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                latitude,
+                longitude,
+                height: 0,
+                basement: 0
+            })
+        });
+
+        const data = await response.json();
+        if (!response.ok || data.status !== 'success' || data.predicted_height == null) {
+            const message = data.detail || data.error || 'Height prediction failed.';
+            throw new Error(message);
+        }
+
+        const h = Number(data.predicted_height);
+        heightInput.value = h.toFixed(2);
+        heightInput.classList.add('height-pulse');
+        setTimeout(() => {
+            heightInput.classList.remove('height-pulse');
+        }, 800);
+    } catch (err) {
+        errorBox.textContent = err.message || 'Height prediction failed.';
+        errorBox.style.display = 'block';
+    } finally {
+        button.disabled = false;
+        button.textContent = originalText;
+    }
+}
+
+// Get height from Global Building Atlas (GBA)
+async function getHeightFromGBA(latId, lonId, heightId, errorId, button) {
+    const lat = parseNumber(document.getElementById(latId).value);
+    const lon = parseNumber(document.getElementById(lonId).value);
+
+    const errorBox = document.getElementById(errorId);
+    if (errorBox) errorBox.textContent = '';
+
+    if (Number.isNaN(lat) || Number.isNaN(lon)) {
+        if (errorBox) errorBox.textContent = 'Please enter valid latitude and longitude.';
+        return;
+    }
+
+    const originalText = button.textContent;
+    button.disabled = true;
+    button.textContent = 'Fetching...';
+
+    try {
+        const resp = await fetch('/get_height_gba', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ latitude: lat, longitude: lon, height: 0, basement: 0 })
+        });
+
+        const data = await resp.json();
+        if (!resp.ok) {
+            const msg = data?.detail || 'Failed to get GBA height';
+            throw new Error(msg);
+        }
+
+        const h = data.predicted_height;
+        if (h === null || h === undefined) {
+            throw new Error('No height returned');
+        }
+
+        document.getElementById(heightId).value = Number(h).toFixed(2);
+    } catch (e) {
+        if (errorBox) {
+            errorBox.textContent = String(e.message || e);
+            errorBox.style.display = 'block';
+        }
+    } finally {
+        button.disabled = false;
+        button.textContent = originalText;
+    }
+}
+
+// Assess location vulnerability
+async function assessLocation(event, endpoint, resultsId) {
+    event.preventDefault();
+
+    const tabName = resultsId.split('-')[0];
+    const suffix = endpoint === '/assess' ? '' : (endpoint === '/explain' ? '2' : '3');
+    const latitude = parseFloat(document.getElementById('latitude' + suffix).value);
+    const longitude = parseFloat(document.getElementById('longitude' + suffix).value);
+    const height = parseFloat(document.getElementById('height' + suffix).value) || 0;
+    const basement = parseFloat(document.getElementById('basement' + suffix).value) || 0;
+
+    document.getElementById(tabName + '-loading').style.display = 'block';
+    document.getElementById(resultsId).style.display = 'none';
+    document.getElementById(tabName + '-error').style.display = 'none';
+
+    try {
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ latitude, longitude, height, basement })
+        });
+
+        const data = await response.json();
+
+        if (data.status === 'success') {
+            // Save to cache on successful assessment
+            saveToCacheFunction(latitude, longitude, height, basement);
+            displayResults(data, resultsId, endpoint);
+        } else {
+            throw new Error(data.detail || 'Assessment failed');
+        }
+    } catch (error) {
+        document.getElementById(tabName + '-error').textContent = error.message;
+        document.getElementById(tabName + '-error').style.display = 'block';
+    } finally {
+        document.getElementById(tabName + '-loading').style.display = 'none';
+    }
+}
+
+/**
+ * Upload and process batch CSV file
+ */
+async function uploadBatch() {
+    const fileInput = document.getElementById('csvFile');
+    const file = fileInput.files[0];
+
+    if (!file) {
+        alert('Please select a CSV file');
+        return;
+    }
+
+    document.getElementById('batch-loading').style.display = 'block';
+    document.getElementById('batch-results').style.display = 'none';
+    document.getElementById('batch-error').style.display = 'none';
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+        const mode = document.getElementById('batchMode').value;
+        const heightSource = document.getElementById('heightSource').value;
+        let endpoint = mode === 'multihazard' ? '/assess_batch_multihazard' : '/assess_batch';
+
+        if (heightSource === 'gba') {
+            const sep = endpoint.includes('?') ? '&' : '?';
+            endpoint = endpoint + sep + 'use_gba_height=true';
+        } else if (heightSource === 'predicted') {
+            const sep = endpoint.includes('?') ? '&' : '?';
+            endpoint = endpoint + sep + 'use_predicted_height=true';
+        }
+
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            body: formData
+        });
+
+        if (response.ok) {
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            const filename = mode === 'multihazard'
+                ? 'multihazard_results.csv'
+                : 'vulnerability_results.csv';
+            a.download = filename;
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url);
+
+            document.getElementById('batch-results').innerHTML = `
+                <div class="results-header">
+                    <h2>✓ Processing Complete</h2>
+                    <p style="color: #94a3b8; margin-top: 1rem;">Results downloaded as ${filename}</p>
+                </div>
+            `;
+            document.getElementById('batch-results').style.display = 'block';
+        } else {
+            throw new Error('Batch processing failed');
+        }
+    } catch (error) {
+        document.getElementById('batch-error').textContent = error.message;
+        document.getElementById('batch-error').style.display = 'block';
+    } finally {
+        document.getElementById('batch-loading').style.display = 'none';
+    }
+}
+
+// ========================================
+// RESULTS RENDERING
+// ========================================
+
+/**
+ * Display assessment results
+ */
+function displayResults(data, resultsId, endpoint) {
+    const resultsDiv = document.getElementById(resultsId);
+    const assessment = data.assessment;
+
+    let html = '<div class="results-header">';
+    html += '<h2>Assessment Complete</h2>';
+
+    const riskClass = 'risk-' + assessment.risk_level.replace(/_/g, '-');
+    html += `<div class="risk-badge ${riskClass}">${assessment.risk_level.replace(/_/g, ' ')}</div>`;
+    html += '</div>';
+
+    html += '<div class="stats-grid">';
+
+    if (assessment.confidence_interval) {
+        const ci = assessment.confidence_interval;
+        html += `
+            <div class="stat-card">
+                <div class="stat-label">Vulnerability Index</div>
+                <div class="stat-value">${ci.point_estimate}</div>
+                <p style="font-size: 0.85em; color: #64748b; margin-top: 0.5rem;">
+                    95% CI: ${ci.lower_bound_95}–${ci.upper_bound_95}
+                </p>
+            </div>
+        `;
+    } else {
+        html += `
+            <div class="stat-card">
+                <div class="stat-label">Vulnerability Index</div>
+                <div class="stat-value">${assessment.vulnerability_index}</div>
+            </div>
+        `;
+    }
+
+    html += `
+        <div class="stat-card">
+            <div class="stat-label">Elevation</div>
+            <div class="stat-value">${assessment.elevation_m}m</div>
+        </div>
+    `;
+
+    if (assessment.distance_to_water_m !== null) {
+        html += `
+            <div class="stat-card">
+                <div class="stat-label">Distance to Water</div>
+                <div class="stat-value">${assessment.distance_to_water_m}m</div>
+            </div>
+        `;
+    }
+
+    html += '</div>';
+
+    if (assessment.uncertainty_analysis) {
+        const ua = assessment.uncertainty_analysis;
+        const confidenceValue = parseFloat(ua.confidence) || 0;
+        const barWidth = Math.round(confidenceValue * 100);
+
+        let confidenceClass = 'confidence-low-fill';
+        if (confidenceValue >= 0.75) confidenceClass = 'confidence-high';
+        else if (confidenceValue >= 0.55) confidenceClass = 'confidence-moderate-fill';
+
+        html += `
+            <div class="confidence-section">
+                <h3>Assessment Confidence</h3>
+                <div class="confidence-bar-wrapper">
+                    <span>Low</span>
+                    <div class="confidence-bar">
+                        <div class="confidence-fill ${confidenceClass}" style="width: ${barWidth}%;"></div>
+                        <span class="confidence-text">${barWidth}%</span>
+                    </div>
+                    <span>High</span>
+                </div>
+                <p style="margin-top: 1rem; color: #94a3b8; font-style: italic;">
+                    ${ua.interpretation}
+                </p>
+            </div>
+        `;
+
+        if (ua.data_quality_flags && ua.data_quality_flags.length > 0) {
+            const criticalFlags = ua.data_quality_flags.filter(flag =>
+                flag === 'steep_terrain_dem_error_high' ||
+                flag === 'coastal_surge_risk_not_modeled'
+            );
+
+            if (criticalFlags.length > 0) {
+                html += '<div class="quality-warning"><h4>⚠ Data Quality Notes</h4><ul>';
+                criticalFlags.forEach(flag => {
+                    html += `<li>${formatFlag(flag)}</li>`;
+                });
+                html += '</ul></div>';
+            }
+        }
+    }
+
+    html += '<div class="detail-section"><h3>Terrain Analysis</h3>';
+    html += `
+        <div class="metric-row">
+            <span class="metric-label">Elevation</span>
+            <span class="metric-value">${assessment.elevation_m} m</span>
+        </div>
+        <div class="metric-row">
+            <span class="metric-label">Relative Elevation (TPI)</span>
+            <span class="metric-value">${assessment.relative_elevation_m !== null ? assessment.relative_elevation_m + ' m' : 'N/A'}</span>
+        </div>
+        <div class="metric-row">
+            <span class="metric-label">Slope</span>
+            <span class="metric-value">${assessment.slope_degrees !== null ? assessment.slope_degrees + '°' : 'N/A'}</span>
+        </div>
+        <div class="metric-row">
+            <span class="metric-label">Distance to Water</span>
+            <span class="metric-value">${assessment.distance_to_water_m !== null ? assessment.distance_to_water_m + ' m' : 'N/A'}</span>
+        </div>
+    `;
+    html += '</div>';
+
+    if (assessment.hazard_breakdown) {
+        const hb = assessment.hazard_breakdown;
+        html += '<div class="detail-section"><h3>Hazard Breakdown</h3>';
+        html += '<div class="hazard-grid">';
+        html += `
+            <div class="hazard-card">
+                <div class="hazard-type">Fluvial/Riverine</div>
+                <div class="hazard-value">${hb.fluvial_riverine}</div>
+            </div>
+            <div class="hazard-card">
+                <div class="hazard-type">Coastal Surge</div>
+                <div class="hazard-value">${hb.coastal_surge}</div>
+            </div>
+            <div class="hazard-card">
+                <div class="hazard-type">Pluvial/Drainage</div>
+                <div class="hazard-value">${hb.pluvial_drainage}</div>
+            </div>
+        `;
+        html += '</div>';
+        html += `<p style="margin-top: 1.5rem;"><strong>Dominant Hazard:</strong> ${assessment.dominant_hazard.replace(/_/g, ' ').toUpperCase()}</p>`;
+        html += '</div>';
+    }
+
+    if (data.explanation) {
+        const exp = data.explanation;
+        html += '<div class="explanation-section">';
+        html += '<h3>Risk Factor Analysis</h3>';
+        html += `<p style="margin-bottom: 1.5rem; color: #cbd5e1;"><strong>Top Risk Driver:</strong> ${exp.top_risk_driver}</p>`;
+
+        exp.explanations.forEach(factor => {
+            html += `
+                <div class="factor-item">
+                    <span class="factor-name">${factor.factor}</span>
+                    <div class="factor-bar">
+                        <div class="factor-fill" style="width: ${factor.contribution_pct}%"></div>
+                    </div>
+                    <span class="factor-percentage">${factor.contribution_pct}%</span>
+                </div>
+            `;
+        });
+
+        html += '</div>';
+    }
+
+    resultsDiv.innerHTML = html;
+    resultsDiv.style.display = 'block';
+}
+
+// ========================================
+// INITIALIZATION
+// ========================================
+
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize cache and autofill
+    updateDatalistSuggestions();
+    setupAutoFill();
+
+    // Setup predict height buttons
+    const buttons = document.querySelectorAll('.predict-height-btn');
+    if (buttons.length > 0) {
+        buttons.forEach(button => {
+            const latId = button.dataset.latId;
+            const lonId = button.dataset.lonId;
+            const heightId = button.dataset.heightId;
+            const errorId = button.dataset.errorId;
+
+            button.addEventListener('click', () => {
+                predictHeight(latId, lonId, heightId, errorId, button);
+            });
+        });
+    }
+
+    // Setup GBA height buttons
+    document.querySelectorAll('.gba-height-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            getHeightFromGBA(
+                btn.dataset.latId,
+                btn.dataset.lonId,
+                btn.dataset.heightId,
+                btn.dataset.errorId,
+                btn
+            );
+        });
+    });
+});