Show current values and 24h delta below each forecast metric

app.py

@@ -6,12 +6,14 @@ Usage:
 """
 
 import logging
+import math
 from datetime import timedelta
 
 import gradio as gr
 
 from hrrr_fetch import fetch_hrrr_input
 from model_utils import run_forecast, load_model, AVAILABLE_MODELS
+from var_mapping import JUMBO_ROW, JUMBO_COL
 from visualization import (
     get_static_maps,
     plot_temperature,
@@ -185,6 +187,21 @@ button.primary {
     padding: 10px 28px !important;
 }
 button.primary:hover { background: #0A74E0 !important; }
+
+/* ── Current / delta annotations ── */
+.metric-current {
+    font-size: 11px; font-weight: 500;
+    color: var(--muted);
+    margin-top: 6px;
+    line-height: 1.4;
+}
+.delta-up { color: #FF3B30; font-weight: 600; }
+.delta-down { color: #0A84FF; font-weight: 600; }
+.delta-neutral { color: #86868B; font-weight: 600; }
+.hero-current-note {
+    font-size: 13px; color: var(--muted);
+    margin-top: 2px; margin-bottom: 0;
+}
 """
 
 # ── Helpers ────────────────────────────────────────────────────────────
@@ -199,6 +216,41 @@ def _resolve_model(display: str) -> str:
     return model_keys[model_choices.index(display)]
 
 
+def _extract_current(input_array) -> dict:
+    """Extract current observed values at Jumbo from the input array."""
+    tmp_k = float(input_array[JUMBO_ROW, JUMBO_COL, 0])
+    rh = float(input_array[JUMBO_ROW, JUMBO_COL, 1])
+    u = float(input_array[JUMBO_ROW, JUMBO_COL, 2])
+    v = float(input_array[JUMBO_ROW, JUMBO_COL, 3])
+    gust = float(input_array[JUMBO_ROW, JUMBO_COL, 4])
+    apcp = float(input_array[JUMBO_ROW, JUMBO_COL, 6])
+    tmp_c = tmp_k - 273.15
+    return {
+        "temperature_c": tmp_c,
+        "temperature_f": tmp_c * 9 / 5 + 32,
+        "humidity_pct": max(0.0, min(100.0, rh)),
+        "wind_speed_ms": math.sqrt(u**2 + v**2),
+        "gust_ms": max(gust, 0.0),
+        "precipitation_mm": max(apcp, 0.0),
+    }
+
+
+def _delta_html(now_val: float, fcst_val: float, fmt: str = ".1f", unit: str = "") -> str:
+    """Render 'Now X · +/-delta' with colored arrow."""
+    diff = fcst_val - now_val
+    if abs(diff) < 0.05:
+        arrow, cls = "", "delta-neutral"
+    elif diff > 0:
+        arrow, cls = " ↑", "delta-up"
+    else:
+        arrow, cls = " ↓", "delta-down"
+    sign = "+" if diff >= 0 else ""
+    return (
+        f'Now {now_val:{fmt}}{unit} · '
+        f'<span class="{cls}">{sign}{diff:{fmt}}{unit}{arrow}</span>'
+    )
+
+
 def _hero_placeholder() -> str:
     return (
         '<div class="hero-card">'
@@ -208,7 +260,30 @@ def _hero_placeholder() -> str:
     )
 
 
-def _hero_html(r: dict, cycle_str: str, forecast_str: str, model_label: str) -> str:
+def _hero_html(r: dict, cur: dict, cycle_str: str, forecast_str: str, model_label: str) -> str:
+    # delta strings for each metric
+    d_temp = _delta_html(cur["temperature_f"], r["temperature_f"], ".0f", "°F")
+    d_hum = _delta_html(cur["humidity_pct"], r["humidity_pct"], ".0f", "%")
+    d_wind = _delta_html(cur["wind_speed_ms"], r["wind_speed_ms"], ".1f", "")
+    d_gust = _delta_html(cur["gust_ms"], r["gust_ms"], ".1f", "")
+    d_prec = _delta_html(cur["precipitation_mm"], r["precipitation_mm"], ".2f", "")
+
+    # main temperature delta
+    temp_diff = r["temperature_c"] - cur["temperature_c"]
+    sign = "+" if temp_diff >= 0 else ""
+    if abs(temp_diff) < 0.05:
+        tcls = "delta-neutral"
+    elif temp_diff > 0:
+        tcls = "delta-up"
+    else:
+        tcls = "delta-down"
+    temp_note = (
+        f'<p class="hero-current-note">'
+        f'Now {cur["temperature_c"]:.1f}°C · '
+        f'<span class="{tcls}">{sign}{temp_diff:.1f}°C in 24h</span>'
+        f'</p>'
+    )
+
     return (
         '<div class="hero-card">'
         #  temperature + status
@@ -217,18 +292,24 @@ def _hero_html(r: dict, cycle_str: str, forecast_str: str, model_label: str) ->
         f'<span class="hero-temp-unit">°C</span></div>'
         f'<div class="hero-status">{r["rain_status"]}</div>'
         "</div>"
+        + temp_note +
         #  metric tiles
         '<div class="hero-metrics">'
         f'<div class="metric-tile"><div class="metric-value">{r["temperature_f"]:.0f}°F</div>'
-        '<div class="metric-label">Temperature</div></div>'
+        f'<div class="metric-label">Temperature</div>'
+        f'<div class="metric-current">{d_temp}</div></div>'
         f'<div class="metric-tile"><div class="metric-value">{r["humidity_pct"]:.0f}%</div>'
-        '<div class="metric-label">Humidity</div></div>'
+        f'<div class="metric-label">Humidity</div>'
+        f'<div class="metric-current">{d_hum}</div></div>'
         f'<div class="metric-tile"><div class="metric-value">{r["wind_speed_ms"]:.1f}</div>'
-        f'<div class="metric-label">Wind m/s {r["wind_dir_str"]}</div></div>'
+        f'<div class="metric-label">Wind m/s {r["wind_dir_str"]}</div>'
+        f'<div class="metric-current">{d_wind}</div></div>'
         f'<div class="metric-tile"><div class="metric-value">{r["gust_ms"]:.1f}</div>'
-        '<div class="metric-label">Gust m/s</div></div>'
+        f'<div class="metric-label">Gust m/s</div>'
+        f'<div class="metric-current">{d_gust}</div></div>'
         f'<div class="metric-tile"><div class="metric-value">{r["precipitation_mm"]:.2f}</div>'
-        '<div class="metric-label">Precip mm</div></div>'
+        f'<div class="metric-label">Precip mm</div>'
+        f'<div class="metric-current">{d_prec}</div></div>'
         "</div>"
         #  meta line
         '<div class="hero-meta">'
@@ -267,8 +348,9 @@ def do_forecast(model_display: str, progress=gr.Progress()):
     except Exception as e:
         raise gr.Error(f"Inference failed: {e}")
 
+    cur = _extract_current(input_array)
     model_label = model_display.split("(")[0].strip()
-    hero = _hero_html(r, cycle_str, forecast_str, model_label)
+    hero = _hero_html(r, cur, cycle_str, forecast_str, model_label)
     temp_fig = plot_temperature(input_array, r, cycle_str, forecast_str)
     precip_fig = plot_precipitation(input_array, r, cycle_str, forecast_str)
     wind_fig = plot_wind_speed(input_array, r, cycle_str, forecast_str)