Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Flood Vulnerability Assessment</title> | |
| <link rel="stylesheet" href="/static/css/styles.css"> | |
| </head> | |
| <body> | |
| <div class="hero-background"></div> | |
| <div class="page-wrapper"> | |
| <header class="hero-header" style="position: relative; padding-top: 40px; text-align: center;"> | |
| <div style="display: inline-block; text-align: center; max-width: 90%; margin: 0 auto;"> | |
| <h1 style="margin: 0; font-size: 3rem; line-height: 1.2;"> | |
| Flood Vulnerability Assessment | |
| </h1> | |
| <p class="subtitle" style="margin: 0.2rem 0 0 0; font-size: 1rem; line-height: 1.2;"> | |
| Global building-level assessment | |
| </p> | |
| </div> | |
| </header> | |
| <div class="main-container"> | |
| <!-- Side Navigation --> | |
| <aside class="side-nav"> | |
| <div class="nav-card"> | |
| <h3>Assessment Tools</h3> | |
| <button class="nav-link active" onclick="switchTab('basic')">Basic Assessment</button> | |
| <button class="nav-link" onclick="switchTab('explained')">Detailed Explanation</button> | |
| <button class="nav-link" onclick="switchTab('multihazard')">Multi-Hazard Analysis</button> | |
| <button class="nav-link" onclick="switchTab('batch')">Batch Processing</button> | |
| </div> | |
| </aside> | |
| <!-- Content Area --> | |
| <main class="content-area"> | |
| <!-- Basic Assessment --> | |
| <div id="basic-card" class="assessment-card active"> | |
| <div class="card-header"> | |
| <h2>Basic Assessment</h2> | |
| <p>Quick vulnerability analysis for a single location</p> | |
| </div> | |
| <form onsubmit="assessLocation(event, '/assess', 'basic-results')"> | |
| <div class="form-grid"> | |
| <div class="input-card"> | |
| <label for="latitude">Latitude</label> | |
| <input type="text" id="latitude" name="latitude" inputmode="text" | |
| pattern="-?[0-9]*[.,]?[0-9]*" required placeholder="40.7128" list="lat-suggestions"> | |
| <p class="helper-text">Range: -90 to 90</p> | |
| </div> | |
| <div class="input-card"> | |
| <label for="longitude">Longitude</label> | |
| <input type="text" id="longitude" name="longitude" inputmode="text" | |
| pattern="-?[0-9]*[.,]?[0-9]*" autocomplete="off" required placeholder="-74.0060" | |
| list="lon-suggestions"> | |
| <p class="helper-text">Range: -180 to 180</p> | |
| </div> | |
| <div class="input-card"> | |
| <label for="height">Building Height</label> | |
| <div class="height-group"> | |
| <input type="number" id="height" step="any" value="0" placeholder="5.0"> | |
| <button type="button" class="gba-height-btn tooltip-btn" data-lat-id="latitude" | |
| data-lon-id="longitude" data-height-id="height" data-error-id="basic-error" | |
| data-tooltip="The height is from Global Buildings Atlas."> | |
| Get Height (GBA) | |
| </button> | |
| </div> | |
| <button type="button" class="predict-height-btn secondary-btn-style tooltip-btn" | |
| data-lat-id="latitude" data-lon-id="longitude" data-height-id="height" | |
| data-error-id="basic-error" | |
| data-tooltip="Uses the DL model to predict the building height, trained on Barcelona, Paris, Astana, and Vienna."> | |
| Predict Height | |
| </button> | |
| <p class="helper-text"> | |
| Meters above ground (0 = ground level) | |
| </p> | |
| </div> | |
| <div class="input-card"> | |
| <label for="basement">Basement Depth</label> | |
| <input type="text" id="basement" name="basement" value="0" max="0" inputmode="text" | |
| pattern="-?[0-9]*[.,]?[0-9]*" placeholder="-2.0"> | |
| <p class="helper-text">Meters below ground (negative values)</p> | |
| </div> | |
| </div> | |
| <div class="action-section"> | |
| <button type="submit" class="primary-button">Analyze Location</button> | |
| </div> | |
| </form> | |
| <div class="loading-state" id="basic-loading"> | |
| <div class="loading-spinner"></div> | |
| <p>Analyzing terrain and water proximity...</p> | |
| </div> | |
| <div class="error-message" id="basic-error"></div> | |
| <div class="results-section" id="basic-results"></div> | |
| </div> | |
| <!-- Explained Assessment --> | |
| <div id="explained-card" class="assessment-card"> | |
| <div class="card-header"> | |
| <h2>Detailed Explanation</h2> | |
| <p>Get comprehensive risk factor analysis with SHAP explanations</p> | |
| </div> | |
| <form onsubmit="assessLocation(event, '/explain', 'explained-results')"> | |
| <div class="form-grid"> | |
| <div class="input-card"> | |
| <label for="latitude2">Latitude</label> | |
| <input type="text" id="latitude2" name="latitude2" pattern="-?[0-9]*[.,]?[0-9]*" | |
| autocomplete="off" required placeholder="40.7128" list="lat-suggestions"> | |
| </div> | |
| <div class="input-card"> | |
| <label for="longitude2">Longitude</label> | |
| <input type="text" id="longitude2" name="longitude2" pattern="-?[0-9]*[.,]?[0-9]*" | |
| autocomplete="off" required placeholder="-74.0060" list="lon-suggestions"> | |
| </div> | |
| <div class="input-card"> | |
| <label for="height2">Building Height</label> | |
| <div class="height-group"> | |
| <input type="number" id="height2" step="any" value="0"> | |
| <button type="button" class="gba-height-btn tooltip-btn" data-lat-id="latitude2" | |
| data-lon-id="longitude2" data-height-id="height2" | |
| data-error-id="explained-error" | |
| data-tooltip="The height is from Global Buildings Atlas."> | |
| Get Height (GBA) | |
| </button> | |
| </div> | |
| <button type="button" class="predict-height-btn secondary-btn-style tooltip-btn" | |
| data-lat-id="latitude2" data-lon-id="longitude2" data-height-id="height2" | |
| data-error-id="explained-error" | |
| data-tooltip="Uses the DL model to predict the building height, trained on Barcelona, Paris, Astana, and Vienna."> | |
| Predict Height | |
| </button> | |
| <p class="helper-text">Meters above ground</p> | |
| </div> | |
| <div class="input-card"> | |
| <label for="basement2">Basement Depth</label> | |
| <input type="text" id="basement2" name="basement2" inputmode="text" | |
| pattern="-?[0-9]*[.,]?[0-9]*" step="0.1" value="0" max="0"> | |
| <p class="helper-text">Meters below ground (negative)</p> | |
| </div> | |
| </div> | |
| <div class="action-section"> | |
| <button type="submit" class="primary-button">Analyze with Explanation</button> | |
| </div> | |
| </form> | |
| <div class="loading-state" id="explained-loading"> | |
| <div class="loading-spinner"></div> | |
| <p>Analyzing and generating explanation...</p> | |
| </div> | |
| <div class="error-message" id="explained-error"></div> | |
| <div class="results-section" id="explained-results"></div> | |
| </div> | |
| <!-- Multi-Hazard Assessment --> | |
| <div id="multihazard-card" class="assessment-card"> | |
| <div class="card-header"> | |
| <h2>Multi-Hazard Analysis</h2> | |
| <p>Comprehensive assessment across fluvial, coastal, and pluvial hazards</p> | |
| </div> | |
| <form onsubmit="assessLocation(event, '/assess_multihazard', 'multihazard-results')"> | |
| <div class="form-grid"> | |
| <div class="input-card"> | |
| <label for="latitude3">Latitude</label> | |
| <input type="text" id="latitude3" name="latitude3" pattern="-?[0-9]*[.,]?[0-9]*" | |
| autocomplete="off" required placeholder="40.7128" list="lat-suggestions"> | |
| </div> | |
| <div class="input-card"> | |
| <label for="longitude3">Longitude</label> | |
| <input type="text" id="longitude3" name="longitude3" pattern="-?[0-9]*[.,]?[0-9]*" | |
| autocomplete="off" required placeholder="-74.0060" list="lon-suggestions"> | |
| </div> | |
| <div class="input-card"> | |
| <label for="height3">Building Height</label> | |
| <div class="height-group"> | |
| <input type="number" id="height3" step="any" value="0"> | |
| <button type="button" class="gba-height-btn tooltip-btn" data-lat-id="latitude3" | |
| data-lon-id="longitude3" data-height-id="height3" | |
| data-error-id="multihazard-error" | |
| data-tooltip="The height is from Global Buildings Atlas."> | |
| Get Height (GBA) | |
| </button> | |
| </div> | |
| <button type="button" class="predict-height-btn secondary-btn-style tooltip-btn" | |
| data-lat-id="latitude3" data-lon-id="longitude3" data-height-id="height3" | |
| data-error-id="multihazard-error" | |
| data-tooltip="Uses the DL model to predict the building height, trained on Barcelona, Paris, Astana, and Vienna."> | |
| Predict Height | |
| </button> | |
| <p class="helper-text">Meters above ground</p> | |
| </div> | |
| <div class="input-card"> | |
| <label for="basement3">Basement Depth</label> | |
| <input type="text" id="basement3" name="basement3" inputmode="text" | |
| pattern="-?[0-9]*[.,]?[0-9]*" step="0.1" value="0" max="0"> | |
| <p class="helper-text">Meters below ground (negative)</p> | |
| </div> | |
| </div> | |
| <div class="action-section"> | |
| <button type="submit" class="primary-button">Run Multi-Hazard Analysis</button> | |
| </div> | |
| </form> | |
| <div class="loading-state" id="multihazard-loading"> | |
| <div class="loading-spinner"></div> | |
| <p>Analyzing multiple flood hazards...</p> | |
| </div> | |
| <div class="error-message" id="multihazard-error"></div> | |
| <div class="results-section" id="multihazard-results"></div> | |
| </div> | |
| <!-- Batch Processing --> | |
| <div id="batch-card" class="assessment-card"> | |
| <div class="card-header"> | |
| <h2>Batch Processing</h2> | |
| <p>Upload a CSV file to assess multiple locations simultaneously</p> | |
| </div> | |
| <div class="form-grid"> | |
| <div class="input-card"> | |
| <label for="batchMode">Analysis Mode</label> | |
| <select id="batchMode"> | |
| <option value="standard">Basic Assessment Model</option> | |
| <option value="multihazard">Multi-Hazard Analysis</option> | |
| </select> | |
| <p class="helper-text">Choose the assessment type for batch processing</p> | |
| </div> | |
| <div class="input-card"> | |
| <label for="csvFile">CSV File</label> | |
| <input type="file" id="csvFile" accept=".csv"> | |
| <p class="helper-text">Required columns: latitude, longitude in decimal degrees (e.g. 29.17, | |
| -95.31). Optional: height(meters), basement (should be negative).</p> | |
| </div> | |
| </div> | |
| <div class="input-card" style="margin-top: 1.5rem;"> | |
| <label for="heightSource">Building Height Source</label> | |
| <select id="heightSource"> | |
| <option value="csv">Use height from CSV (default)</option> | |
| <option value="gba">Use height from Global Buildings Atlas (GBA)</option> | |
| <option value="predicted">Use DL-predicted building height</option> | |
| </select> | |
| <p class="helper-text"> | |
| Choose how to obtain building height for each row in the vulnerability assessment. | |
| </p> | |
| </div> | |
| <div class="action-section"> | |
| <button class="primary-button" onclick="uploadBatch()">Process Batch</button> | |
| </div> | |
| <div class="loading-state" id="batch-loading"> | |
| <div class="loading-spinner"></div> | |
| <p>Processing batch assessments...</p> | |
| </div> | |
| <div class="error-message" id="batch-error"></div> | |
| <div class="results-section" id="batch-results"></div> | |
| </div> | |
| </main> | |
| </div> | |
| <footer> | |
| © 2025 Flood Vulnerability Assessment | Powered by Google Earth Engine | |
| </footer> | |
| </div> | |
| <datalist id="lat-suggestions"></datalist> | |
| <datalist id="lon-suggestions"></datalist> | |
| <datalist id="height-suggestions"></datalist> | |
| <datalist id="basement-suggestions"></datalist> | |
| <script src="/static/js/app.js"></script> | |
| </body> | |
| </html> |