Update templates/index.html

templates/index.html

@@ -304,10 +304,22 @@
             background: rgba(0, 0, 0, 0.3);
             border: 1px solid rgba(148, 163, 184, 0.2);
             border-radius: 10px;
-            overflow: hidden;
+            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);
@@ -340,7 +352,7 @@
             font-weight: 600;
             white-space: nowrap;
             transition: opacity 0.2s ease;
-            border-radius: 0 !important;
+            border-radius: 0 10px 10px 0 !important;
             transform: none !important;
         }
 
@@ -372,18 +384,110 @@
             transition: background 0.2s ease, border 0.2s ease, color 0.2s ease;
         }
 
-        .gba-height-btn:hover {
+        .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 {
+        .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;
@@ -1003,13 +1107,17 @@
                                 <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="predict-height-btn" data-lat-id="latitude"
-                                        data-lon-id="longitude" data-height-id="height"
-                                        data-error-id="basic-error">Predict</button>
+                                    <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="gba-height-btn" data-lat-id="latitude"
-                                    data-lon-id="longitude" data-height-id="height" data-error-id="basic-error">
-                                    Get height from Global Building Atlas
+                                <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)
@@ -1063,10 +1171,19 @@
                                 <label for="height2">Building Height</label>
                                 <div class="height-group">
                                     <input type="number" id="height2" step="any" value="0">
-                                    <button type="button" class="predict-height-btn" data-lat-id="latitude2"
+                                    <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">Predict</button>
+                                        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>
 
@@ -1117,10 +1234,19 @@
                                 <label for="height3">Building Height</label>
                                 <div class="height-group">
                                     <input type="number" id="height3" step="any" value="0">
-                                    <button type="button" class="predict-height-btn" data-lat-id="latitude3"
+                                    <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">Predict</button>
+                                        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>
 
@@ -1171,13 +1297,15 @@
                         </div>
                     </div>
 
-                    <div class="form-group" style="margin-top: 1.5rem;">
-                        <div class="checkbox-row">
-                            <input type="checkbox" id="usePredictedHeight">
-                            <label for="usePredictedHeight">Use satellite-predicted building height</label>
-                        </div>
-                        <p class="helper-text" style="margin-top: 0.75rem; color: #64748b;">
-                            For each row, estimate height from coordinates and use it in the vulnerability assessment.
+                    <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>
 
@@ -1538,7 +1666,10 @@
 
                 document.getElementById(heightId).value = Number(h).toFixed(2);
             } catch (e) {
-                if (errorBox) errorBox.textContent = String(e.message || e);
+                if (errorBox) {
+                    errorBox.textContent = String(e.message || e);
+                    errorBox.style.display = 'block';
+                }
             } finally {
                 button.disabled = false;
                 button.textContent = originalText;
@@ -1575,10 +1706,13 @@
 
             try {
                 const mode = document.getElementById('batchMode').value;
-                const usePredicted = document.getElementById('usePredictedHeight').checked;
+                const heightSource = document.getElementById('heightSource').value;
                 let endpoint = mode === 'multihazard' ? '/assess_batch_multihazard' : '/assess_batch';
 
-                if (usePredicted) {
+                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';
                 }