Add side-by-side NEXRAD vs HRRR comparison with hue differentiation

- Fetch HRRR composite reflectivity images from multiple URL patterns
- Apply green-blue hue shift to HRRR data for visual differentiation
- Display NEXRAD (red/purple) and HRRR (cyan/green) simultaneously
- Add separate opacity controls for each layer (0.0-1.0)
- Support CONUS, Alaska, and Hawaii domains
- Include comparison tips and alignment checking guide
- Show data availability status for each layer
- Add numpy for image processing and color transformation

Users can now overlay both datasets with transparency to visually
validate HRRR F000 analysis alignment with real-time NEXRAD radar.
Mixed color areas indicate overlapping precipitation features.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app.py

@@ -6,6 +6,7 @@ from datetime import datetime, timedelta
 from io import BytesIO
 from PIL import Image
 import base64
+import numpy as np
 
 # Domain bounds for different regions
 DOMAIN_BOUNDS = {
@@ -15,56 +16,156 @@ DOMAIN_BOUNDS = {
     'full': [[18.0, -180.0], [72.0, -66.0]]
 }
 
+# HRRR image bounds (approximate for composite reflectivity images)
+HRRR_IMAGE_BOUNDS = {
+    'conus': [[20.0, -130.0], [52.0, -60.0]],
+    'alaska': [[48.0, -180.0], [75.0, -125.0]],
+    'hawaii': [[17.0, -162.0], [24.0, -153.0]]
+}
+
 def get_available_runs():
-    """
-    Generate list of recent model run times
-    HRRR runs every hour
-    """
+    """Generate list of recent model run times"""
     runs = []
     now = datetime.utcnow()
     current_hour = now.replace(minute=0, second=0, microsecond=0)
 
-    for i in range(24):  # Last 24 hours
+    for i in range(48):  # Last 48 hours
         run_time = current_hour - timedelta(hours=i)
         runs.append(run_time.strftime("%Y-%m-%d %H:00 UTC"))
 
     return runs
 
-def create_radar_legend():
-    """Create HTML legend for radar reflectivity"""
+def try_fetch_hrrr_image(run_time_str, forecast_hour, domain='conus'):
+    """
+    Try to fetch HRRR composite reflectivity image from various NOAA sources
+
+    Returns:
+        PIL Image object if found, None otherwise
+    """
+    dt = datetime.strptime(run_time_str, "%Y-%m-%d %H:%M UTC")
+    run_str = dt.strftime("%Y%m%d%H")
+
+    # Map domain to HRRR naming
+    domain_map = {
+        'conus': 'conus',
+        'alaska': 'alaska',
+        'hawaii': 'hawaii',
+        'full': 'conus'  # Start with conus for full view
+    }
+
+    hrrr_domain = domain_map.get(domain, 'conus')
+
+    # Try multiple URL patterns for HRRR composite reflectivity
+    url_patterns = [
+        # Pattern 1: Standard for_web structure
+        f"https://rapidrefresh.noaa.gov/hrrr/HRRR/for_web/hrrr_ncep_jet/{run_str}/{hrrr_domain}/refc_sfc_f{forecast_hour:02d}.png",
+        # Pattern 2: Alternative structure
+        f"https://rapidrefresh.noaa.gov/hrrr/HRRR/for_web/hrrr_{hrrr_domain}/{run_str}/refc_sfc_f{forecast_hour:02d}.png",
+        # Pattern 3: Simplified path
+        f"https://rapidrefresh.noaa.gov/hrrr/for_web/{run_str}/{hrrr_domain}/refc_sfc_f{forecast_hour:02d}.png",
+        # Pattern 4: Direct HRRR graphics
+        f"https://rapidrefresh.noaa.gov/hrrr/HRRR/displayMapLocalDiskDateDomainZipTZModel.cgi?keys=hrrr_ncep_jet:&runtime={run_str}&plot_type=refc&fcst={forecast_hour:02d}",
+    ]
+
+    for url in url_patterns:
+        try:
+            response = requests.get(url, timeout=10)
+            if response.status_code == 200 and len(response.content) > 1000:  # Valid image
+                img = Image.open(BytesIO(response.content))
+                return img, url
+        except:
+            continue
+
+    return None, None
+
+def apply_hue_shift(image, hue_shift=0.3):
+    """
+    Apply hue shift to image to differentiate from NEXRAD
+
+    Args:
+        image: PIL Image
+        hue_shift: Hue shift amount (0-1), 0.3 = greenish-blue tint
+
+    Returns:
+        PIL Image with hue shifted
+    """
+    # Convert to RGBA if not already
+    if image.mode != 'RGBA':
+        image = image.convert('RGBA')
+
+    # Convert to numpy array
+    img_array = np.array(image)
+
+    # Separate RGB and alpha channels
+    rgb = img_array[:, :, :3].astype(float)
+    alpha = img_array[:, :, 3]
+
+    # Convert RGB to HSV
+    rgb_normalized = rgb / 255.0
+
+    # Simple hue shift by rotating RGB values
+    # This gives a greenish-blue tint to HRRR data
+    r, g, b = rgb_normalized[:,:,0], rgb_normalized[:,:,1], rgb_normalized[:,:,2]
+
+    # Apply color tint - shift toward cyan/green for HRRR
+    r_new = r * 0.6 + g * 0.2 + b * 0.2  # Reduce red
+    g_new = r * 0.1 + g * 0.8 + b * 0.1  # Enhance green
+    b_new = r * 0.1 + g * 0.3 + b * 0.6  # Moderate blue
+
+    # Stack and convert back
+    rgb_shifted = np.stack([r_new, g_new, b_new], axis=2)
+    rgb_shifted = np.clip(rgb_shifted * 255, 0, 255).astype(np.uint8)
+
+    # Recombine with alpha
+    img_shifted = np.dstack([rgb_shifted, alpha])
+
+    return Image.fromarray(img_shifted, 'RGBA')
+
+def image_to_data_url(image):
+    """Convert PIL Image to data URL for folium"""
+    buffered = BytesIO()
+    image.save(buffered, format="PNG")
+    img_str = base64.b64encode(buffered.getvalue()).decode()
+    return f"data:image/png;base64,{img_str}"
+
+def create_legends():
+    """Create HTML legends for both radar types"""
     legend_html = '''
     <div style="position: fixed; top: 80px; right: 20px; z-index: 1000;
                 background-color: white; padding: 10px; border-radius: 5px;
                 border: 2px solid #333; font-family: Arial; font-size: 11px;
-                max-width: 180px;">
+                max-width: 200px;">
         <b style="font-size: 12px;">Reflectivity (dBZ)</b><br>
-        <div style="display: flex; flex-direction: column; margin-top: 5px; gap: 2px;">
-            <div><span style="background: #9854c6; width: 18px; height: 10px; display: inline-block; margin-right: 4px;"></span>Extreme (60+)</div>
-            <div><span style="background: #f800fd; width: 18px; height: 10px; display: inline-block; margin-right: 4px;"></span>Severe (50-60)</div>
-            <div><span style="background: #bc0000; width: 18px; height: 10px; display: inline-block; margin-right: 4px;"></span>Heavy (40-50)</div>
-            <div><span style="background: #fd0000; width: 18px; height: 10px; display: inline-block; margin-right: 4px;"></span>Moderate (30-40)</div>
-            <div><span style="background: #fd9500; width: 18px; height: 10px; display: inline-block; margin-right: 4px;"></span>Light (25-30)</div>
-            <div><span style="background: #fdf802; width: 18px; height: 10px; display: inline-block; margin-right: 4px;"></span>Very Light (20-25)</div>
-            <div><span style="background: #02fd02; width: 18px; height: 10px; display: inline-block; margin-right: 4px;"></span>Weak (10-20)</div>
-            <div><span style="background: #019ff4; width: 18px; height: 10px; display: inline-block; margin-right: 4px;"></span>Trace (&lt;10)</div>
+        <div style="margin-top: 8px;">
+            <div style="display: flex; gap: 8px; margin-bottom: 6px;">
+                <div style="flex: 1;">
+                    <b style="font-size: 10px; color: #d9534f;">NEXRAD</b><br>
+                    <div style="margin-top: 3px; font-size: 9px;">Real-time<br>(Standard colors)</div>
+                </div>
+                <div style="flex: 1;">
+                    <b style="font-size: 10px; color: #5cb85c;">HRRR</b><br>
+                    <div style="margin-top: 3px; font-size: 9px;">Forecast<br>(Green-blue tint)</div>
+                </div>
+            </div>
+        </div>
+        <div style="display: flex; flex-direction: column; margin-top: 8px; gap: 2px; border-top: 1px solid #ccc; padding-top: 6px;">
+            <div style="font-size: 10px;"><span style="background: #9854c6; width: 16px; height: 8px; display: inline-block; margin-right: 4px;"></span>60+ (Extreme)</div>
+            <div style="font-size: 10px;"><span style="background: #f800fd; width: 16px; height: 8px; display: inline-block; margin-right: 4px;"></span>50-60 (Severe)</div>
+            <div style="font-size: 10px;"><span style="background: #bc0000; width: 16px; height: 8px; display: inline-block; margin-right: 4px;"></span>40-50 (Heavy)</div>
+            <div style="font-size: 10px;"><span style="background: #fd0000; width: 16px; height: 8px; display: inline-block; margin-right: 4px;"></span>30-40 (Moderate)</div>
+            <div style="font-size: 10px;"><span style="background: #fd9500; width: 16px; height: 8px; display: inline-block; margin-right: 4px;"></span>25-30 (Light)</div>
+            <div style="font-size: 10px;"><span style="background: #fdf802; width: 16px; height: 8px; display: inline-block; margin-right: 4px;"></span>20-25</div>
+            <div style="font-size: 10px;"><span style="background: #02fd02; width: 16px; height: 8px; display: inline-block; margin-right: 4px;"></span>10-20 (Weak)</div>
+            <div style="font-size: 10px;"><span style="background: #019ff4; width: 16px; height: 8px; display: inline-block; margin-right: 4px;"></span>&lt;10 (Trace)</div>
         </div>
     </div>
     '''
     return legend_html
 
-def generate_map(run_time_str, forecast_hour, domain_selection, show_nexrad, show_hrrr_info):
+def generate_map(run_time_str, forecast_hour, domain_selection,
+                 show_nexrad, nexrad_opacity, show_hrrr, hrrr_opacity):
     """
-    Generate Folium map with multi-domain radar coverage
-
-    Args:
-        run_time_str: Model run time string
-        forecast_hour: Forecast hour (0-18)
-        domain_selection: Which domain to display
-        show_nexrad: Whether to show NEXRAD real-time radar
-        show_hrrr_info: Whether to show HRRR forecast information
-
-    Returns:
-        folium.Map object
+    Generate Folium map with both NEXRAD and HRRR overlays for comparison
     """
     # Set map center and zoom based on domain
     domain_configs = {
@@ -80,85 +181,95 @@ def generate_map(run_time_str, forecast_hour, domain_selection, show_nexrad, sho
     m = folium.Map(
         location=config['location'],
         zoom_start=config['zoom'],
-        tiles='OpenStreetMap'
+        tiles='CartoDB positron'
     )
 
     # Add alternative tile layers
-    folium.TileLayer('CartoDB positron', name='Light Map').add_to(m)
+    folium.TileLayer('OpenStreetMap', name='Street Map').add_to(m)
     folium.TileLayer('CartoDB dark_matter', name='Dark Map').add_to(m)
 
     try:
-        # Parse run time
         dt = datetime.strptime(run_time_str, "%Y-%m-%d %H:%M UTC")
         valid_time = dt + timedelta(hours=int(forecast_hour))
 
+        data_status = []
+
+        # Add HRRR forecast overlay if requested
+        if show_hrrr:
+            hrrr_img, hrrr_url = try_fetch_hrrr_image(run_time_str, int(forecast_hour), domain_selection)
+
+            if hrrr_img:
+                # Apply hue shift to HRRR data (greenish-blue tint)
+                hrrr_shifted = apply_hue_shift(hrrr_img)
+                hrrr_data_url = image_to_data_url(hrrr_shifted)
+
+                # Get bounds for this domain
+                bounds = HRRR_IMAGE_BOUNDS.get(domain_selection, HRRR_IMAGE_BOUNDS['conus'])
+
+                folium.raster_layers.ImageOverlay(
+                    image=hrrr_data_url,
+                    bounds=bounds,
+                    opacity=hrrr_opacity,
+                    name='HRRR Forecast (Green-Blue Tint)',
+                    overlay=True,
+                    control=True
+                ).add_to(m)
+
+                data_status.append(f"✓ HRRR F{int(forecast_hour):03d} loaded")
+            else:
+                data_status.append(f"✗ HRRR F{int(forecast_hour):03d} not available")
+
         # Add NEXRAD real-time radar if requested
         if show_nexrad:
-            # NOAA MRMS (Multi-Radar Multi-Sensor) - Covers CONUS, Alaska, Hawaii, Puerto Rico
             wms_url = 'https://mapservices.weather.noaa.gov/eventdriven/services/radar/radar_base_reflectivity/MapServer/WMSServer'
 
             folium.raster_layers.WmsTileLayer(
                 url=wms_url,
                 layers='0',
-                name='NEXRAD Real-Time Radar',
+                name='NEXRAD Real-Time (Standard Colors)',
                 format='image/png',
                 transparent=True,
-                opacity=0.65,
+                opacity=nexrad_opacity,
                 attr='NOAA',
                 overlay=True,
                 control=True
             ).add_to(m)
 
-        # Add HRRR forecast information overlay if requested
-        if show_hrrr_info:
-            # Create info box about HRRR forecast
-            hrrr_info_html = f"""
-            <div style='position: fixed; bottom: 20px; left: 20px; z-index: 1000;
-                        background-color: rgba(255, 255, 255, 0.95); padding: 12px;
-                        border-radius: 5px; border: 2px solid #0066cc; font-family: Arial;
-                        max-width: 320px; box-shadow: 0 2px 5px rgba(0,0,0,0.3);'>
-                <b style='color: #0066cc; font-size: 14px;'>HRRR Forecast Information</b><br>
-                <div style='margin-top: 8px; font-size: 11px;'>
-                    <b>Model Run:</b> {dt.strftime("%Y-%m-%d %H:00 UTC")}<br>
-                    <b>Forecast Hour:</b> F{int(forecast_hour):03d}<br>
-                    <b>Valid Time:</b> {valid_time.strftime("%Y-%m-%d %H:00 UTC")}<br>
-                    <b>Domain:</b> {domain_selection.upper()}<br>
-                </div>
-                <div style='margin-top: 8px; padding: 6px; background: #e8f4f8; border-radius: 3px; font-size: 10px;'>
-                    <b>About HRRR:</b> High-Resolution Rapid Refresh model provides
-                    3km forecasts every hour out to 18-48 hours for CONUS, Alaska, and Hawaii.
-                </div>
-                <div style='margin-top: 6px; font-size: 9px; color: #666;'>
-                    <i>Currently showing NEXRAD real-time composite reflectivity.
-                    HRRR forecast data available via GRIB2 from NOAA NOMADS.</i>
-                </div>
+            data_status.append("✓ NEXRAD Real-Time loaded")
+
+        # Add comparison info box
+        comparison_html = f"""
+        <div style='position: fixed; bottom: 20px; left: 20px; z-index: 1000;
+                    background-color: rgba(255, 255, 255, 0.95); padding: 12px;
+                    border-radius: 5px; border: 2px solid #0066cc; font-family: Arial;
+                    max-width: 340px; box-shadow: 0 2px 5px rgba(0,0,0,0.3);'>
+            <b style='color: #0066cc; font-size: 14px;'>📊 Data Comparison View</b><br>
+            <div style='margin-top: 8px; font-size: 11px;'>
+                <b>Model Run:</b> {dt.strftime("%Y-%m-%d %H:00 UTC")}<br>
+                <b>Forecast Hour:</b> F{int(forecast_hour):03d}<br>
+                <b>Valid Time:</b> {valid_time.strftime("%Y-%m-%d %H:00 UTC")}<br>
+                <b>Domain:</b> {domain_selection.upper()}<br>
             </div>
-            """
-            m.get_root().html.add_child(folium.Element(hrrr_info_html))
-
-        # Add legend
-        m.get_root().html.add_child(folium.Element(create_radar_legend()))
-
-        # Add coverage info
-        coverage_html = f"""
-        <div style='position: fixed; top: 20px; left: 20px; z-index: 999;
-                    background-color: rgba(255, 255, 255, 0.95); padding: 10px;
-                    border-radius: 5px; border: 1px solid #333; font-family: Arial;
-                    font-size: 12px; max-width: 280px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);'>
-            <b style='color: #d9534f;'>🌩️ Multi-Domain Radar Coverage</b><br>
-            <div style='margin-top: 6px; font-size: 11px;'>
-                <b>Current View:</b> {domain_selection.upper()}<br>
-                <b>Data Source:</b> {'NEXRAD Real-Time' if show_nexrad else 'None'}<br>
-                <div style='margin-top: 6px; padding: 4px; background: #fff3cd; border-left: 3px solid #ffc107; font-size: 10px;'>
-                    <b>Note:</b> NEXRAD provides real-time observations
-                    across CONUS, Alaska, Hawaii, and Puerto Rico.
-                </div>
+            <div style='margin-top: 8px; padding: 6px; background: #e8f4f8; border-radius: 3px; font-size: 10px;'>
+                <b>Data Status:</b><br>
+                {'<br>'.join(data_status) if data_status else 'No data layers selected'}
+            </div>
+            <div style='margin-top: 6px; padding: 6px; background: #fff3cd; border-radius: 3px; font-size: 9px;'>
+                <b>💡 Comparison Tips:</b><br>
+                • <span style="color: #d9534f;">Red/Purple</span> = NEXRAD standard colors<br>
+                • <span style="color: #5cb85c;">Green/Cyan</span> = HRRR with color shift<br>
+                • Overlapping areas appear <b>mixed</b><br>
+                • Perfect alignment = good model performance<br>
+                • Use opacity sliders to adjust visibility
             </div>
         </div>
         """
-        m.get_root().html.add_child(folium.Element(coverage_html))
+        m.get_root().html.add_child(folium.Element(comparison_html))
+
+        # Add legend
+        m.get_root().html.add_child(folium.Element(create_legends()))
 
-        # Add domain boundary markers
+        # Add domain boundary
         if domain_selection in DOMAIN_BOUNDS:
             bounds = DOMAIN_BOUNDS[domain_selection]
             folium.Rectangle(
@@ -170,14 +281,12 @@ def generate_map(run_time_str, forecast_hour, domain_selection, show_nexrad, sho
             ).add_to(m)
 
     except Exception as e:
-        # Add error message
         error_html = f"""
         <div style='position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
                     z-index: 1001; background-color: #ffcccc; padding: 20px;
                     border-radius: 10px; border: 2px solid #ff0000; font-family: Arial;'>
             <h3 style='margin-top: 0;'>Error Loading Data</h3>
             <p>Error: {str(e)}</p>
-            <p>Please try different settings.</p>
         </div>
         """
         m.get_root().html.add_child(folium.Element(error_html))
@@ -185,10 +294,8 @@ def generate_map(run_time_str, forecast_hour, domain_selection, show_nexrad, sho
     # Add layer control
     folium.LayerControl(position='topright', collapsed=False).add_to(m)
 
-    # Add fullscreen option
+    # Add fullscreen and measure controls
     plugins.Fullscreen(position='topleft').add_to(m)
-
-    # Add measure control
     plugins.MeasureControl(position='bottomright', primary_length_unit='miles').add_to(m)
 
     return m
@@ -196,14 +303,14 @@ def generate_map(run_time_str, forecast_hour, domain_selection, show_nexrad, sho
 def create_interface():
     """Create Gradio interface"""
 
-    with gr.Blocks(title="HRRR Multi-Domain Radar Viewer", theme=gr.themes.Soft()) as demo:
+    with gr.Blocks(title="HRRR vs NEXRAD Radar Comparison", theme=gr.themes.Soft()) as demo:
         gr.Markdown("""
-        # 🌩️ HRRR Multi-Domain Radar Viewer
+        # 🌩️ HRRR vs NEXRAD Radar Comparison Viewer
 
-        View NOAA High-Resolution Rapid Refresh (HRRR) forecast and NEXRAD radar data across
-        CONUS, Alaska, and Hawaii on an interactive map.
+        Compare NOAA HRRR forecast composite reflectivity with real-time NEXRAD radar data.
+        **Both layers shown simultaneously with different colors for visual alignment checking.**
 
-        **Data Source:** NOAA NEXRAD Real-Time Radar Network / HRRR Model
+        **Data Sources:** NOAA NEXRAD Real-Time Radar (standard colors) + HRRR Model Forecast (green-blue tint)
         """)
 
         with gr.Row():
@@ -212,7 +319,7 @@ def create_interface():
                     choices=get_available_runs(),
                     value=get_available_runs()[0],
                     label="🕐 Model Run Time (UTC)",
-                    info="HRRR model initialization time"
+                    info="HRRR initialization time"
                 )
 
             with gr.Column(scale=1):
@@ -222,119 +329,137 @@ def create_interface():
                     step=1,
                     value=0,
                     label="⏱️ Forecast Hour",
-                    info="F000 = Analysis, F001-F018 = Forecast"
+                    info="F000 = Analysis (best for comparison)"
                 )
 
             with gr.Column(scale=1):
                 domain = gr.Radio(
-                    choices=['full', 'conus', 'alaska', 'hawaii'],
+                    choices=['conus', 'alaska', 'hawaii'],
                     value='conus',
                     label="🗺️ Domain",
-                    info="Select geographic region"
+                    info="Geographic region"
                 )
 
+        gr.Markdown("### 🎨 Layer Controls - Adjust to Compare Alignment")
+
         with gr.Row():
-            show_nexrad = gr.Checkbox(
-                value=True,
-                label="Show NEXRAD Real-Time Radar",
-                info="Display current NEXRAD composite reflectivity"
-            )
+            with gr.Column(scale=1):
+                show_nexrad = gr.Checkbox(
+                    value=True,
+                    label="📡 Show NEXRAD Real-Time",
+                    info="Standard red/purple colors"
+                )
+                nexrad_opacity = gr.Slider(
+                    minimum=0.0,
+                    maximum=1.0,
+                    value=0.6,
+                    step=0.1,
+                    label="NEXRAD Opacity",
+                    info="Lower to see HRRR underneath"
+                )
 
-            show_hrrr_info = gr.Checkbox(
-                value=True,
-                label="Show HRRR Forecast Info",
-                info="Display HRRR forecast time information"
-            )
+            with gr.Column(scale=1):
+                show_hrrr = gr.Checkbox(
+                    value=True,
+                    label="🛰️ Show HRRR Forecast",
+                    info="Green/cyan color tint"
+                )
+                hrrr_opacity = gr.Slider(
+                    minimum=0.0,
+                    maximum=1.0,
+                    value=0.5,
+                    step=0.1,
+                    label="HRRR Opacity",
+                    info="Adjust for blending"
+                )
 
-        load_btn = gr.Button("🔄 Load Radar Data", variant="primary", size="lg")
+        load_btn = gr.Button("🔄 Load Comparison View", variant="primary", size="lg")
 
         with gr.Row():
-            map_output = gr.HTML(label="Interactive Radar Map")
+            map_output = gr.HTML(label="Comparison Map")
 
-        def load_map(run_time, forecast_hour, domain, show_nexrad, show_hrrr_info):
-            m = generate_map(run_time, int(forecast_hour), domain, show_nexrad, show_hrrr_info)
+        def load_map(run_time, forecast_hour, domain, show_nexrad, nexrad_opacity, show_hrrr, hrrr_opacity):
+            m = generate_map(run_time, int(forecast_hour), domain,
+                           show_nexrad, nexrad_opacity, show_hrrr, hrrr_opacity)
             return m._repr_html_()
 
         load_btn.click(
             fn=load_map,
-            inputs=[run_time, forecast_hour, domain, show_nexrad, show_hrrr_info],
+            inputs=[run_time, forecast_hour, domain, show_nexrad, nexrad_opacity, show_hrrr, hrrr_opacity],
             outputs=map_output
         )
 
         # Auto-load on startup
         demo.load(
             fn=load_map,
-            inputs=[run_time, forecast_hour, domain, show_nexrad, show_hrrr_info],
+            inputs=[run_time, forecast_hour, domain, show_nexrad, nexrad_opacity, show_hrrr, hrrr_opacity],
             outputs=map_output
         )
 
         gr.Markdown("""
         ---
-        ## 📊 About HRRR (High-Resolution Rapid Refresh)
-
-        The **High-Resolution Rapid Refresh (HRRR)** is NOAA's high-resolution, short-range weather model that provides
-        3km grid spacing forecasts updated every hour.
+        ## 📊 How to Use This Comparison Tool
 
-        ### Model Coverage
+        ### Visual Alignment Check
 
-        - **CONUS HRRR**: Continental United States at 3km resolution
-        - **Alaska HRRR**: Alaska domain at 3km resolution
-        - **Hawaii HRRR**: Hawaiian Islands at 3km resolution
+        1. **Set Forecast Hour to 0** (F000 = HRRR analysis)
+        2. **Enable both NEXRAD and HRRR** layers
+        3. **Adjust opacity sliders** to see both layers clearly
+        4. **Look for alignment:**
+           - **Perfect overlap** = HRRR correctly assimilated radar data
+           - **Offset/misalignment** = potential data issues or timing differences
+           - **Different intensities** = model vs. observation differences
 
-        ### Composite Reflectivity
+        ### Color Coding
 
-        Composite reflectivity shows the maximum radar reflectivity in a vertical column:
-        - **60+ dBZ**: Extreme precipitation (large hail likely)
-        - **50-60 dBZ**: Severe thunderstorms (hail possible)
-        - **40-50 dBZ**: Heavy precipitation
-        - **30-40 dBZ**: Moderate to heavy rain
-        - **20-30 dBZ**: Light to moderate rain
-        - **10-20 dBZ**: Light rain
-        - **<10 dBZ**: Very light precipitation
+        - **🔴 NEXRAD (Standard Colors):** Red, purple, yellow = Real-time radar observations
+        - **🟢 HRRR (Green-Blue Tint):** Cyan, green = Model forecast with color shift
+        - **Mixed Areas:** Where both overlap, you'll see blended colors
 
-        ### Data Information
+        ### Recommended Settings for Comparison
 
-        - **Model:** HRRR (High-Resolution Rapid Refresh)
-        - **Grid Spacing:** 3 km
-        - **Update Frequency:** Hourly
-        - **Forecast Length:** 18-48 hours depending on cycle
-        - **Domains:** CONUS, Alaska, Hawaii
-        - **Real-Time Radar:** NEXRAD (Next Generation Radar) network
+        | Purpose | NEXRAD Opacity | HRRR Opacity | Notes |
+        |---------|---------------|--------------|-------|
+        | Check alignment | 0.6 | 0.5 | Balanced visibility |
+        | Focus on NEXRAD | 0.8 | 0.3 | HRRR as reference |
+        | Focus on HRRR | 0.3 | 0.7 | NEXRAD as reference |
+        | See differences | 0.5 | 0.5 | Equal blending |
 
-        ### 🔍 Comparing HRRR F000 with NEXRAD
+        ### Understanding Forecast Hours
 
-        - **F000 (Analysis)**: HRRR analysis at model initialization - uses radar data assimilation
-        - **NEXRAD Real-Time**: Direct radar observations updated every ~5 minutes
-        - **Comparison**: F000 should closely match NEXRAD since it assimilates radar data
+        - **F000**: HRRR analysis - should match NEXRAD closely (uses radar data assimilation)
+        - **F001-F003**: Very short-term forecast - minor divergence expected
+        - **F006-F012**: Short-term forecast - moderate divergence
+        - **F012-F018**: Medium-range forecast - larger divergence from real-time
 
-        ### ⚠️ Important Notes
+        ### Model Coverage
 
-        1. **Current Display**: Shows NEXRAD real-time radar composite reflectivity
-        2. **HRRR Data**: Available as GRIB2 files from NOAA NOMADS server
-        3. **Processing**: GRIB2 processing requires specialized tools (wgrib2, pygrib, xarray)
-        4. **Use Case**: Compare forecast hours (F001-F018) with F000/NEXRAD for model validation
+        - **CONUS HRRR**: Continental US at 3km resolution, updated hourly
+        - **Alaska HRRR**: Alaska domain at 3km resolution
+        - **Hawaii HRRR**: Hawaiian Islands at 3km resolution
 
-        ### 🔗 Data Access
+        ### Data Availability
 
-        **HRRR GRIB2 Data:**
-        - AWS S3: `s3://noaa-hrrr-bdp-pds/hrrr.YYYYMMDD/domain/`
-        - NOMADS: `https://nomads.ncep.noaa.gov/pub/data/nccf/com/hrrr/prod/`
+        **HRRR Data:**
+        - Images may not always be available from rapidrefresh.noaa.gov
+        - Try recent run times (last 6-12 hours) for best availability
+        - GRIB2 data always available from NOMADS/AWS S3
 
-        **NEXRAD Real-Time:**
-        - NOAA MapServices WMS (displayed in this app)
-        - MRMS Data: `https://mrms.ncep.noaa.gov/data/`
+        **NEXRAD Data:**
+        - Real-time WMS service, always current
+        - Updates every ~5 minutes
+        - Covers CONUS, Alaska, Hawaii, Puerto Rico
 
-        ### 📚 References
+        ### 🔗 References
 
-        - [HRRR Information (NOAA)](https://rapidrefresh.noaa.gov/hrrr/)
-        - [HRRR on AWS Open Data](https://registry.opendata.aws/noaa-hrrr/)
-        - [NOAA NOMADS Server](https://nomads.ncep.noaa.gov/)
-        - [NEXRAD Radar Network](https://www.ncei.noaa.gov/products/radar/next-generation-weather-radar)
+        - [HRRR Information](https://rapidrefresh.noaa.gov/hrrr/)
+        - [NEXRAD Documentation](https://www.ncei.noaa.gov/products/radar/next-generation-weather-radar)
+        - [HRRR on AWS](https://registry.opendata.aws/noaa-hrrr/)
 
         ---
 
         <p style='text-align: center; color: #666; font-size: 11px;'>
-        Data provided by NOAA | For research and educational purposes only | Not for operational use
+        Data: NOAA | For research/educational purposes only | Not for operational use
         </p>
         """)
 

requirements.txt

@@ -3,3 +3,4 @@ folium==0.18.0
 requests==2.32.3
 Pillow==10.4.0
 beautifulsoup4==4.12.3
+numpy==1.26.4