Implement complete ECMWF wind particle visualization with Gradio interface

- Add real ECMWF 10m wind data fetching (U/V components)
- Implement windy-style particle animation using Leaflet-Velocity
- Create TimestampedGeoJson alternative visualization method
- Add RK4 integration for accurate particle advection
- Include bilinear interpolation for smooth wind field sampling
- Support multiple regions (global, North America, Europe)
- Add interactive Folium maps with multiple tile layers
- Configure Docker deployment for Hugging Face Spaces
- Include comprehensive documentation and setup instructions

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

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

Dockerfile

@@ -0,0 +1,35 @@
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies for GRIB processing
+RUN apt-get update && apt-get install -y \
+    libeccodes-dev \
+    libeccodes-tools \
+    wget \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements file
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY app.py .
+
+# Create temp directory for GRIB files
+RUN mkdir -p /tmp/ecmwf_data
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1
+ENV GRADIO_SERVER_NAME=0.0.0.0
+ENV GRADIO_SERVER_PORT=7860
+
+# Expose the port
+EXPOSE 7860
+
+# Run the application
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,104 @@
+# 🌪️ ECMWF Wind Particle Visualization
+
+A Gradio application that downloads real ECMWF 10m wind data and creates windy-style particle animations using Folium maps with Leaflet-Velocity plugin.
+
+## Features
+
+- 🌍 **Real ECMWF Data**: Downloads operational 10m wind forecasts (U/V components)
+- 🎨 **Windy-style Animation**: Canvas-based particle system using Leaflet-Velocity
+- ⏱️ **Time Controls**: TimestampedGeoJson animation with interactive time slider
+- 🗺️ **Interactive Maps**: Multiple tile layers and regional views
+- 🎯 **Particle Physics**: RK4 integration for accurate wind field advection
+
+## Quick Start
+
+### Local Development
+
+1. Install dependencies:
+```bash
+pip install -r requirements.txt
+```
+
+2. Run the application:
+```bash
+python app.py
+```
+
+3. Open your browser to `http://localhost:7860`
+
+### Docker Deployment
+
+1. Build the Docker image:
+```bash
+docker build -t ecmwf-wind-viz .
+```
+
+2. Run the container:
+```bash
+docker run -p 7860:7860 ecmwf-wind-viz
+```
+
+### Hugging Face Spaces
+
+This app is designed for deployment on Hugging Face Spaces:
+
+1. Create a new Space on Hugging Face
+2. Choose "Docker" as the SDK
+3. Upload the files: `app.py`, `requirements.txt`, `Dockerfile`, `README.md`
+4. The Space will automatically build and deploy
+
+## How It Works
+
+### Data Processing
+1. Downloads ECMWF 10m wind data (U/V components) in GRIB2 format
+2. Converts GRIB to grib2json-compatible velocity JSON format
+3. Implements bilinear interpolation for smooth wind field sampling
+
+### Particle Animation
+1. **Canvas Rendering**: Uses Leaflet-Velocity for real-time particle advection
+2. **TimestampedGeoJSON**: Pre-computed particle trajectories with time controls
+3. **RK4 Integration**: Accurate particle movement through wind field
+4. **Color Coding**: Particles colored by wind speed magnitude
+
+### Visualization Options
+- **Global**: Worldwide wind patterns
+- **North America**: Regional focus on North American winds  
+- **Europe**: European wind patterns
+- **Particle Count**: Adjustable from 200-2000 particles
+
+## Technical Details
+
+### Data Source
+- **ECMWF Open Data**: Free operational forecasts updated every 6 hours
+- **Parameters**: 10m U-wind and V-wind components
+- **Resolution**: 0.25° (~25km spacing)
+- **Format**: GRIB2 converted to velocity JSON
+
+### Algorithms
+- **Bilinear Interpolation**: Smooth wind field sampling between grid points
+- **RK4 Integration**: 4th-order Runge-Kutta for particle advection
+- **Coordinate Conversion**: Proper handling of geographic projections
+
+### Libraries
+- **Gradio**: Web interface framework
+- **Folium**: Python-Leaflet bridge for interactive maps
+- **Leaflet-Velocity**: Canvas-based particle rendering
+- **xarray/cfgrib**: GRIB data processing
+- **ecmwf-opendata**: ECMWF data access
+
+## Inspired By
+
+This implementation follows the same principles used by professional weather visualization platforms like:
+- [Windy.com](https://www.windy.com/) - Visual style and particle behavior
+- [earth.nullschool.net](https://earth.nullschool.net/) - Original particle flow visualization
+- [Ventusky](https://www.ventusky.com/) - Weather animation techniques
+
+## License
+
+This project is open source. ECMWF data is provided under CC BY 4.0 license.
+
+## Attribution
+
+Weather data provided by ECMWF under their Open Data initiative:
+- Data source: https://www.ecmwf.int/en/forecasts/datasets/open-data
+- Data license: https://creativecommons.org/licenses/by/4.0/

app.py

@@ -0,0 +1,946 @@
+#!/usr/bin/env python3
+"""
+ECMWF Wind Particle Visualization
+Windy-style particle animation using ECMWF 10m wind data
+
+Features:
+- Downloads real ECMWF 10m wind data (U and V components)
+- Creates windy-style particle animation using Leaflet-Velocity
+- TimestampedGeoJson animation as alternative visualization
+- Interactive Folium map with time controls
+"""
+
+import gradio as gr
+import numpy as np
+import pandas as pd
+import xarray as xr
+import requests
+import tempfile
+import os
+import json
+import math
+import random
+from datetime import datetime, timedelta, timezone
+import warnings
+import folium
+from folium.plugins import TimestampedGeoJson
+from branca.element import Element
+warnings.filterwarnings('ignore')
+
+try:
+    from ecmwf.opendata import Client as OpenDataClient
+    OPENDATA_AVAILABLE = True
+except ImportError:
+    OPENDATA_AVAILABLE = False
+
+
+class ECMWFWindDataFetcher:
+    """
+    Fetches ECMWF 10m wind data (U and V components) and converts to JSON format
+    compatible with Leaflet-Velocity for windy-style particle animation
+    """
+    
+    def __init__(self):
+        self.temp_dir = tempfile.mkdtemp()
+        self.client = None
+        if OPENDATA_AVAILABLE:
+            try:
+                self.client = OpenDataClient()
+            except:
+                self.client = None
+        
+        # AWS S3 direct access URLs
+        self.aws_base_url = "https://ecmwf-forecasts.s3.eu-central-1.amazonaws.com"
+        
+    def get_latest_forecast_info(self):
+        """Get the latest available forecast run information"""
+        try:
+            now = datetime.utcnow()
+            
+            # Find the most recent model run (data available 7-9 hours after run time)
+            for hours_back in range(4, 24, 6):
+                test_time = now - timedelta(hours=hours_back)
+                
+                # Round to nearest 6-hour cycle
+                run_hour = (test_time.hour // 6) * 6
+                run_time = test_time.replace(hour=run_hour, minute=0, second=0, microsecond=0)
+                
+                date_str = run_time.strftime("%Y%m%d")
+                time_str = f"{run_hour:02d}"
+                
+                # Test if this run is available
+                test_url = f"{self.aws_base_url}/{date_str}/{time_str}z/0p25/oper/"
+                try:
+                    response = requests.head(test_url, timeout=10)
+                    if response.status_code in [200, 403]:
+                        return date_str, time_str, run_time
+                except:
+                    continue
+            
+            # Fallback
+            return now.strftime("%Y%m%d"), "12", now
+            
+        except Exception:
+            now = datetime.utcnow()
+            return now.strftime("%Y%m%d"), "12", now
+    
+    def download_wind_component(self, parameter, step=0, max_retries=3):
+        """Download ECMWF wind component (10u or 10v)"""
+        
+        date_str, time_str, run_time = self.get_latest_forecast_info()
+        
+        # Method 1: Try ecmwf-opendata client
+        if OPENDATA_AVAILABLE and self.client:
+            try:
+                filename = os.path.join(self.temp_dir, f'ecmwf_{parameter}_{step}h_{datetime.now().strftime("%Y%m%d_%H%M%S")}.grib')
+                
+                self.client.retrieve(
+                    type="fc",
+                    param=parameter,
+                    step=step,
+                    target=filename
+                )
+                
+                if os.path.exists(filename) and os.path.getsize(filename) > 1000:
+                    return filename, f"✅ ECMWF {parameter} data downloaded successfully!"
+                    
+            except Exception as e:
+                print(f"Client method failed: {str(e)}")
+        
+        # Method 2: Direct AWS S3 access
+        try:
+            step_str = f"{step:03d}"
+            grib_filename = f"{date_str}{time_str}0000-{step_str}h-oper-fc.grib2"
+            url = f"{self.aws_base_url}/{date_str}/{time_str}z/0p25/oper/{grib_filename}"
+            
+            response = requests.get(url, timeout=120, stream=True)
+            if response.status_code == 200:
+                local_file = os.path.join(self.temp_dir, f'ecmwf_aws_{parameter}_{step}h.grib2')
+                
+                with open(local_file, 'wb') as f:
+                    for chunk in response.iter_content(chunk_size=8192):
+                        f.write(chunk)
+                
+                if os.path.getsize(local_file) > 1000:
+                    return local_file, f"✅ ECMWF {parameter} data downloaded via AWS S3!"
+                    
+        except Exception as e:
+            print(f"AWS method failed: {str(e)}")
+        
+        return None, f"❌ Unable to download ECMWF {parameter} data at +{step}h"
+
+    def download_wind_data(self, forecast_steps=[0, 6, 12, 24]):
+        """Download both U and V wind components for multiple forecast steps"""
+        wind_data = {}
+        
+        for step in forecast_steps:
+            try:
+                # Download U component (10u)
+                u_file, u_msg = self.download_wind_component("10u", step)
+                
+                # Download V component (10v)  
+                v_file, v_msg = self.download_wind_component("10v", step)
+                
+                if u_file and v_file:
+                    wind_data[step] = {
+                        'u_file': u_file,
+                        'v_file': v_file,
+                        'forecast_hour': step,
+                        'valid_time': datetime.utcnow() + timedelta(hours=step)
+                    }
+                    print(f"✅ Successfully downloaded wind data for +{step}h")
+                else:
+                    print(f"❌ Failed to download wind data for +{step}h")
+                    
+            except Exception as e:
+                print(f"Error downloading wind data for +{step}h: {str(e)}")
+                continue
+        
+        return wind_data
+
+    def grib_to_velocity_json(self, u_file, v_file):
+        """
+        Convert GRIB wind files to JSON format compatible with Leaflet-Velocity
+        Returns grib2json-style format: [{"header": {...}, "data": [...]}, {"header": {...}, "data": [...]}]
+        """
+        try:
+            # Open U component GRIB file
+            ds_u = xr.open_dataset(u_file, engine='cfgrib', backend_kwargs={'indexpath': ''})
+            
+            # Open V component GRIB file  
+            ds_v = xr.open_dataset(v_file, engine='cfgrib', backend_kwargs={'indexpath': ''})
+            
+            # Get variable names (first data variable in each file)
+            u_var = list(ds_u.data_vars.keys())[0]
+            v_var = list(ds_v.data_vars.keys())[0]
+            
+            # Extract data arrays
+            u_data = ds_u[u_var]
+            v_data = ds_v[v_var]
+            
+            # Handle coordinates
+            if 'latitude' in ds_u.coords:
+                lats = ds_u.latitude.values
+                lons = ds_u.longitude.values
+            elif 'lat' in ds_u.coords:
+                lats = ds_u.lat.values
+                lons = ds_u.lon.values
+            else:
+                raise ValueError("Could not find latitude/longitude coordinates")
+            
+            # Select first time step if multiple
+            if 'time' in u_data.dims and len(u_data.time) > 1:
+                u_values = u_data.isel(time=0).values
+                v_values = v_data.isel(time=0).values
+            elif 'valid_time' in u_data.dims:
+                u_values = u_data.isel(valid_time=0).values  
+                v_values = v_data.isel(valid_time=0).values
+            else:
+                u_values = u_data.values
+                v_values = v_data.values
+            
+            # Handle 3D data (select first level if needed)
+            if u_values.ndim > 2:
+                u_values = u_values[0]
+                v_values = v_values[0]
+            
+            # Ensure latitude is sorted north to south for grib2json convention
+            if lats[0] < lats[-1]:  # south to north, need to flip
+                lats = lats[::-1]
+                u_values = u_values[::-1, :]
+                v_values = v_values[::-1, :]
+            
+            # Create header following grib2json format
+            ny, nx = u_values.shape
+            lo1 = float(lons[0])
+            la1 = float(lats[0])  # northernmost lat
+            lo2 = float(lons[-1])
+            la2 = float(lats[-1])  # southernmost lat
+            dx = float(lons[1] - lons[0]) if len(lons) > 1 else 0.25
+            dy = abs(float(lats[1] - lats[0])) if len(lats) > 1 else 0.25
+            
+            # Common header
+            header_common = {
+                "discipline": 0,
+                "parameterCategory": 2,
+                "nx": nx,
+                "ny": ny,
+                "lo1": lo1,
+                "la1": la1,
+                "lo2": lo2,
+                "la2": la2,
+                "dx": dx,
+                "dy": dy,
+                "refTime": datetime.utcnow().strftime("%Y-%m-%d %H:%M:%S")
+            }
+            
+            # U component header
+            header_u = header_common.copy()
+            header_u.update({
+                "parameterNumber": 2,
+                "parameterName": "UGRD",
+                "parameterNumberName": "eastward_wind",
+                "description": "U-component of wind"
+            })
+            
+            # V component header
+            header_v = header_common.copy()
+            header_v.update({
+                "parameterNumber": 3,
+                "parameterName": "VGRD", 
+                "parameterNumberName": "northward_wind",
+                "description": "V-component of wind"
+            })
+            
+            # Flatten arrays (row-major order: west->east, north->south)
+            u_flat = u_values.flatten().tolist()
+            v_flat = v_values.flatten().tolist()
+            
+            # Replace NaN values with None
+            u_flat = [None if (isinstance(x, float) and math.isnan(x)) else float(x) for x in u_flat]
+            v_flat = [None if (isinstance(x, float) and math.isnan(x)) else float(x) for x in v_flat]
+            
+            # Create grib2json-style output
+            velocity_json = [
+                {
+                    "header": header_u,
+                    "data": u_flat
+                },
+                {
+                    "header": header_v,
+                    "data": v_flat
+                }
+            ]
+            
+            # Clean up
+            ds_u.close()
+            ds_v.close()
+            
+            return velocity_json, f"✅ Converted GRIB to velocity JSON: {nx}x{ny} grid points"
+            
+        except Exception as e:
+            return None, f"❌ Error converting GRIB to JSON: {str(e)}"
+
+
+class GribJsonField:
+    """
+    Bilinear-interpolated wind field for JSON exported by grib2json (UGRD/VGRD)
+    Based on the reference implementation for windy-style particle systems
+    """
+
+    def __init__(self, records):
+        # Identify U (eastward) and V (northward)
+        rec_u = None
+        rec_v = None
+        for rec in records:
+            h = rec.get("header", {})
+            name = h.get("parameterNumberName") or h.get("parameterName") or ""
+            # Accept typical identifiers
+            if "eastward" in name or name.upper().startswith("UGRD"):
+                rec_u = rec
+            elif "northward" in name or name.upper().startswith("VGRD"):
+                rec_v = rec
+
+        if rec_u is None or rec_v is None:
+            # Fallback by parameterNumber: 2 (UGRD), 3 (VGRD)
+            for rec in records:
+                h = rec.get("header", {})
+                if h.get("parameterCategory") == 2:
+                    if h.get("parameterNumber") == 2:
+                        rec_u = rec_u or rec
+                    if h.get("parameterNumber") == 3:
+                        rec_v = rec_v or rec
+
+        if rec_u is None or rec_v is None:
+            raise ValueError("Could not find U and V components in records")
+
+        Hu = rec_u["header"]
+        Hv = rec_v["header"]
+        # Sanity: grid must match
+        for k in ("lo1","la1","lo2","la2","nx","ny","dx","dy"):
+            if Hu.get(k) != Hv.get(k):
+                raise ValueError(f"U/V headers differ on {k}: {Hu.get(k)} vs {Hv.get(k)}")
+
+        self.h = Hu
+        self.nx = int(Hu["nx"])
+        self.ny = int(Hu["ny"])
+        self.lo1 = float(Hu["lo1"])
+        self.la1 = float(Hu["la1"])
+        self.lo2 = float(Hu["lo2"])
+        self.la2 = float(Hu["la2"])
+        self.dx = float(Hu["dx"])
+        self.dy = float(Hu["dy"])
+
+        # Data order: i=0..nx-1 west->east, j=0..ny-1 north->south if la1>la2
+        self.u = rec_u["data"]
+        self.v = rec_v["data"]
+        if len(self.u) != self.nx * self.ny or len(self.v) != self.nx * self.ny:
+            raise ValueError("Unexpected data length for U/V")
+
+        # Pre-compute whether latitude decreases with j
+        self.north_to_south = self.la1 > self.la2
+
+        # Normalize longitudes to [0, 360) to simplify wrap-around if grid is global
+        self.global_wrap = math.isclose((self.lo2 - self.lo1 + self.dx), 360.0, rel_tol=1e-3)
+
+    def _index(self, i, j):
+        # row-major: for each j-row, nx x-cells
+        return j * self.nx + i
+
+    def _grid_coords(self, lon, lat):
+        """
+        Map lon/lat to continuous grid indices (x, y) in [0, nx-1], [0, ny-1].
+        Handles increasing or decreasing latitude, and optional 0..360 wrap.
+        """
+        L = lon
+        if self.global_wrap:
+            # normalize lon into [lo1, lo2)
+            span = 360.0
+            while L < self.lo1:
+                L += span
+            while L >= self.lo2:
+                L -= span
+
+        x = (L - self.lo1) / self.dx
+        if self.north_to_south:
+            y = (self.la1 - lat) / self.dy
+        else:
+            y = (lat - self.la1) / self.dy
+        return x, y
+
+    def _bilinear(self, arr, x, y):
+        # Bilinear interpolation over arr shaped ny*nx
+        i0 = math.floor(x)
+        j0 = math.floor(y)
+        i1 = i0 + 1
+        j1 = j0 + 1
+
+        if i0 < 0 or j0 < 0 or i1 >= self.nx or j1 >= self.ny:
+            return None  # outside grid
+
+        tx = x - i0
+        ty = y - j0
+
+        def val(ii, jj):
+            return arr[self._index(ii, jj)]
+
+        a = val(i0, j0)
+        b = val(i1, j0)
+        c = val(i0, j1)
+        d = val(i1, j1)
+
+        if None in (a,b,c,d):
+            return None
+
+        # bilinear mix
+        ab = a + tx * (b - a)
+        cd = c + tx * (d - c)
+        return ab + ty * (cd - ab)
+
+    def vector(self, lon, lat):
+        """
+        Interpolated (u, v) at lon/lat in m/s. Returns None if out of grid.
+        """
+        x, y = self._grid_coords(lon, lat)
+        u = self._bilinear(self.u, x, y)
+        v = self._bilinear(self.v, x, y)
+        if u is None or v is None or math.isnan(u) or math.isnan(v):
+            return None
+        return (u, v)
+
+
+class WindParticleAnimator:
+    """
+    Creates windy-style particle animation using RK4 advection
+    """
+    
+    def __init__(self):
+        pass
+    
+    def meters_per_degree_lat(self):
+        # ~111.32 km per degree latitude
+        return 111320.0
+
+    def meters_per_degree_lon(self, lat_deg):
+        # ~111.32 km * cos(lat)
+        return 111320.0 * math.cos(math.radians(lat_deg))
+
+    def rk4_step(self, field, lon, lat, dt_s):
+        """
+        Advance (lon, lat) by dt_s seconds using RK4 on the vector field (u,v) m/s.
+        Convert m/s to degrees per second using local meters/degree.
+        """
+        def uv_to_dlonlat(lon_, lat_, u, v):
+            if u is None or v is None:
+                return (None, None)
+            dlon_dt = u / self.meters_per_degree_lon(lat_)
+            dlat_dt = v / self.meters_per_degree_lat()
+            return (dlon_dt, dlat_dt)
+
+        vec = field.vector
+        # k1
+        uv1 = vec(lon, lat);         k1 = uv_to_dlonlat(lon, lat, *(uv1 or (None,None)))
+        if None in k1: return (None, None)
+        # k2
+        lon2 = lon + 0.5 * dt_s * k1[0]; lat2 = lat + 0.5 * dt_s * k1[1]
+        uv2 = vec(lon2, lat2);       k2 = uv_to_dlonlat(lon2, lat2, *(uv2 or (None,None)))
+        if None in k2: return (None, None)
+        # k3
+        lon3 = lon + 0.5 * dt_s * k2[0]; lat3 = lat + 0.5 * dt_s * k2[1]
+        uv3 = vec(lon3, lat3);       k3 = uv_to_dlonlat(lon3, lat3, *(uv3 or (None,None)))
+        if None in k3: return (None, None)
+        # k4
+        lon4 = lon + dt_s * k3[0];   lat4 = lat + dt_s * k3[1]
+        uv4 = vec(lon4, lat4);       k4 = uv_to_dlonlat(lon4, lat4, *(uv4 or (None,None)))
+        if None in k4: return (None, None)
+
+        dlon = (dt_s / 6.0) * (k1[0] + 2*k2[0] + 2*k3[0] + k4[0])
+        dlat = (dt_s / 6.0) * (k1[1] + 2*k2[1] + 2*k3[1] + k4[1])
+        return (lon + dlon, lat + dlat)
+
+    def simulate_particles(self, field, bounds, n_particles=800, steps=60, dt_minutes=5,
+                          seed=None, respawn=True):
+        """
+        Create Timestamped GeoJSON 'features' by advecting particles.
+        Each feature is a MultiPoint with a matching 'times' array.
+        bounds = (minLat, minLon, maxLat, maxLon)
+        """
+        if seed is not None:
+            random.seed(seed)
+
+        minLat, minLon, maxLat, maxLon = bounds
+        dt_s = dt_minutes * 60
+        t0 = datetime.now(timezone.utc).replace(microsecond=0)
+        features = []
+
+        def rand_seed():
+            return (random.uniform(minLon, maxLon), random.uniform(minLat, maxLat))
+
+        for _ in range(n_particles):
+            coords = []
+            times = []
+            lon, lat = rand_seed()
+            for k in range(steps):
+                # record current position/time
+                coords.append([lon, lat])
+                times.append((t0 + timedelta(minutes=dt_minutes*k)).isoformat())
+                # advance
+                nxt = self.rk4_step(field, lon, lat, dt_s)
+                if nxt == (None, None):
+                    if respawn:
+                        lon, lat = rand_seed()
+                        continue
+                    else:
+                        break
+                lon, lat = nxt
+                # keep within rough geographic bounds; respawn if out
+                if not (minLon <= lon <= maxLon and minLat <= lat <= maxLat):
+                    if respawn:
+                        lon, lat = rand_seed()
+                    else:
+                        break
+
+            if len(coords) >= 2:
+                # Color particles by wind speed at first position for visual appeal
+                initial_uv = field.vector(coords[0][0], coords[0][1])
+                if initial_uv:
+                    wind_speed = math.sqrt(initial_uv[0]**2 + initial_uv[1]**2)
+                    # Color code: blue (low) -> green -> yellow -> red (high)
+                    if wind_speed < 5:
+                        color = "#0066cc"  # blue
+                    elif wind_speed < 10:
+                        color = "#00cc66"  # green  
+                    elif wind_speed < 15:
+                        color = "#cccc00"  # yellow
+                    else:
+                        color = "#cc0000"  # red
+                else:
+                    color = "#666666"  # gray for unknown
+                
+                features.append({
+                    "type": "Feature",
+                    "geometry": {"type": "MultiPoint", "coordinates": coords},
+                    "properties": {
+                        "times": times,
+                        "style": {
+                            "color": color, 
+                            "fillColor": color, 
+                            "fillOpacity": 0.7, 
+                            "weight": 2, 
+                            "radius": 2
+                        },
+                    }
+                })
+
+        return {
+            "type": "FeatureCollection",
+            "features": features
+        }
+
+
+class WindVisualizationApp:
+    """
+    Main application class that ties together ECMWF data fetching and wind visualization
+    """
+    
+    def __init__(self):
+        self.wind_fetcher = ECMWFWindDataFetcher()
+        self.particle_animator = WindParticleAnimator()
+        self.current_wind_data = {}
+        self.current_velocity_json = None
+        
+    def download_and_process_wind_data(self, forecast_steps=[0, 6, 12, 24]):
+        """Download ECMWF wind data and convert to velocity JSON"""
+        try:
+            # Download wind data for multiple forecast steps
+            status_msg = "🌪️ Downloading ECMWF 10m wind data...\n"
+            wind_data = self.wind_fetcher.download_wind_data(forecast_steps)
+            
+            if not wind_data:
+                return "❌ Failed to download any wind data", None, None
+            
+            status_msg += f"✅ Downloaded wind data for {len(wind_data)} forecast steps\n"
+            
+            # Convert first available time step to velocity JSON
+            first_step = min(wind_data.keys())
+            u_file = wind_data[first_step]['u_file']
+            v_file = wind_data[first_step]['v_file']
+            
+            status_msg += f"🔄 Converting GRIB to velocity JSON format...\n"
+            velocity_json, conv_msg = self.wind_fetcher.grib_to_velocity_json(u_file, v_file)
+            
+            if velocity_json:
+                self.current_velocity_json = velocity_json
+                self.current_wind_data = wind_data
+                status_msg += conv_msg + "\n"
+                status_msg += f"📊 Ready for particle animation visualization!"
+                return status_msg, velocity_json, wind_data
+            else:
+                return f"❌ Failed to convert wind data: {conv_msg}", None, None
+                
+        except Exception as e:
+            return f"❌ Error processing wind data: {str(e)}", None, None
+    
+    def create_wind_particle_map(self, velocity_json, region="global", particle_count=1000):
+        """Create Folium map with windy-style particle animation"""
+        try:
+            if not velocity_json:
+                return """
+                <div style="padding: 20px; background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px;">
+                    <h4>⚠️ No Wind Data Available</h4>
+                    <p>Please download wind data first using the button above.</p>
+                </div>
+                """
+            
+            # Determine map bounds based on region
+            if region == "global":
+                bounds = (-60.0, -180.0, 60.0, 180.0)
+                center = [20, 0]
+                zoom = 2
+            elif region == "north_america":
+                bounds = (25.0, -130.0, 55.0, -60.0)
+                center = [40, -95]
+                zoom = 3
+            elif region == "europe":
+                bounds = (35.0, -15.0, 65.0, 35.0)
+                center = [50, 10]
+                zoom = 4
+            else:  # default to global
+                bounds = (-60.0, -180.0, 60.0, 180.0)
+                center = [20, 0]
+                zoom = 2
+            
+            # Create map
+            m = folium.Map(
+                location=center,
+                tiles="CartoDB dark_matter",
+                zoom_start=zoom,
+                control_scale=True
+            )
+            
+            # Add CartoDB Positron as alternative tile layer
+            folium.TileLayer(
+                tiles="CartoDB positron",
+                name="Light Theme",
+                control=True
+            ).add_to(m)
+            
+            # Add OpenStreetMap as alternative
+            folium.TileLayer(
+                tiles="OpenStreetMap",
+                name="OpenStreetMap", 
+                control=True
+            ).add_to(m)
+            
+            # Create wind field from velocity JSON
+            field = GribJsonField(velocity_json)
+            
+            # Generate particle animation using TimestampedGeoJson
+            geojson_data = self.particle_animator.simulate_particles(
+                field,
+                bounds=bounds,
+                n_particles=particle_count,
+                steps=50,
+                dt_minutes=6,
+                seed=42,
+                respawn=True
+            )
+            
+            # Add TimestampedGeoJson layer for particle animation
+            ts = TimestampedGeoJson(
+                data=geojson_data,
+                period="PT6M",  # 6 minutes between frames
+                duration=None,
+                add_last_point=False,
+                loop=True,
+                loop_button=True,
+                auto_play=True,
+                transition_time=300,
+                time_slider_drag_update=True
+            )
+            ts.add_to(m)
+            
+            # Add Leaflet-Velocity plugin for canvas-based particle rendering
+            plugin_js = """
+            <script src="https://unpkg.com/leaflet-velocity/dist/leaflet-velocity.min.js"></script>
+            """
+            m.get_root().html.add_child(Element(plugin_js))
+            
+            # Save velocity JSON to a data URL for the Leaflet-Velocity layer
+            velocity_json_str = json.dumps(velocity_json)
+            
+            map_id = m.get_name()
+            js = f"""
+            <script>
+            (function() {{
+                var map = {map_id};
+                var velocityData = {velocity_json_str};
+                
+                // Add Leaflet-Velocity layer for windy-style canvas particles
+                var velocityLayer = L.velocityLayer({{
+                    data: velocityData,
+                    displayValues: true,
+                    displayOptions: {{
+                        velocityType: "Wind",
+                        position: "bottomright",
+                        emptyString: "No wind data",
+                        speedUnit: "m/s",
+                        angleConvention: "bearingCW",
+                        showCardinal: true
+                    }},
+                    velocityScale: 0.008,     // tune visual speed (px per m/s)
+                    opacity: 0.85,
+                    maxVelocity: 25,         // color scale domain upper bound (m/s)
+                    particleMultiplier: 0.006, // particle density
+                    lineWidth: 2,
+                    colorScale: ["#ffffff", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"]
+                }}).addTo(map);
+                
+                // Layer control
+                var overlayMaps = {{
+                    "Wind Particles (Canvas)": velocityLayer
+                }};
+                
+                // Add layer control if it doesn't exist
+                if (!map._layerControlAdded) {{
+                    L.control.layers(null, overlayMaps, {{position: 'topright'}}).addTo(map);
+                    map._layerControlAdded = true;
+                }}
+            }})();
+            </script>
+            """
+            m.get_root().html.add_child(Element(js))
+            
+            # Add layer control for base maps
+            folium.LayerControl().add_to(m)
+            
+            return m._repr_html_()
+            
+        except Exception as e:
+            return f"""
+            <div style="padding: 20px; background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 8px;">
+                <h4>❌ Error Creating Wind Visualization</h4>
+                <p>Error: {str(e)}</p>
+                <p>Please try downloading the wind data again or check the console for detailed error information.</p>
+            </div>
+            """
+    
+    def get_wind_info(self):
+        """Get information about current wind data"""
+        if not self.current_wind_data:
+            return "No wind data loaded. Please download wind data first."
+        
+        info = "🌪️ **Current ECMWF 10m Wind Data:**\n\n"
+        
+        for step, data in self.current_wind_data.items():
+            valid_time = data['valid_time'].strftime("%Y-%m-%d %H:%M UTC")
+            info += f"• **+{step}h forecast**: Valid {valid_time}\n"
+        
+        if self.current_velocity_json:
+            header = self.current_velocity_json[0]['header']
+            nx = header['nx']
+            ny = header['ny']
+            dx = header['dx']
+            dy = header['dy']
+            
+            info += f"\n**Grid Information:**\n"
+            info += f"• Resolution: {dx}° × {dy}° (~{dx*111:.0f}km spacing)\n"
+            info += f"• Grid size: {nx} × {ny} = {nx*ny:,} points\n"
+            info += f"• Coverage: {header['lo1']}° to {header['lo2']}°E, {header['la2']}° to {header['la1']}°N\n"
+            info += f"• Data source: ECMWF IFS Operational\n"
+            info += f"• Parameters: 10m U-wind (eastward) and V-wind (northward)\n"
+        
+        return info
+
+
+# Initialize the application
+app = WindVisualizationApp()
+
+
+def download_wind_data():
+    """Gradio function to download wind data"""
+    return app.download_and_process_wind_data([0, 6, 12, 24])
+
+
+def create_wind_map(region, particle_count):
+    """Gradio function to create wind particle map"""
+    if not app.current_velocity_json:
+        status, velocity_json, wind_data = app.download_and_process_wind_data([0])
+        if not velocity_json:
+            return status, ""
+    
+    map_html = app.create_wind_particle_map(app.current_velocity_json, region, particle_count)
+    wind_info = app.get_wind_info()
+    return map_html, wind_info
+
+
+def create_gradio_interface():
+    """Create the Gradio interface"""
+    
+    with gr.Blocks(title="ECMWF Wind Particle Visualization", theme=gr.themes.Soft()) as interface:
+        
+        gr.Markdown("""
+        # 🌪️ ECMWF Wind Particle Visualization
+        ## Windy-style particle animation using real ECMWF 10m wind data
+        
+        **Features:**
+        - 🌍 Real ECMWF operational forecast data (10m winds)
+        - 🎨 Windy-style particle animation using Leaflet-Velocity
+        - ⏱️ TimestampedGeoJson animation with time controls
+        - 🗺️ Interactive Folium maps with multiple tile layers
+        - 🎯 Regional and global visualization options
+        """)
+        
+        with gr.Tab("🌪️ Wind Particle Animation"):
+            
+            with gr.Row():
+                with gr.Column(scale=1):
+                    gr.Markdown("### ⚙️ Controls")
+                    
+                    download_btn = gr.Button(
+                        "📡 Download ECMWF Wind Data", 
+                        variant="primary", 
+                        size="lg"
+                    )
+                    
+                    region_choice = gr.Radio(
+                        choices=["global", "north_america", "europe"],
+                        value="global",
+                        label="🗺️ Region"
+                    )
+                    
+                    particle_count = gr.Slider(
+                        minimum=200,
+                        maximum=2000, 
+                        value=1000,
+                        step=100,
+                        label="🔵 Particle Count"
+                    )
+                    
+                    create_map_btn = gr.Button(
+                        "🎨 Create Wind Visualization",
+                        variant="secondary",
+                        size="lg"
+                    )
+                    
+                    gr.Markdown("### 📊 Data Information")
+                    wind_info = gr.Markdown("No wind data loaded yet.")
+                
+                with gr.Column(scale=2):
+                    download_status = gr.Textbox(
+                        label="📋 Download Status",
+                        lines=8,
+                        max_lines=12
+                    )
+            
+            with gr.Row():
+                wind_map = gr.HTML(
+                    label="🌪️ Wind Particle Animation",
+                    value="""
+                    <div style="padding: 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
+                                border-radius: 12px; text-align: center; color: white;">
+                        <h3>🌪️ Wind Particle Visualization</h3>
+                        <p>Download wind data and create visualization to see windy-style particle animation</p>
+                        <p style="font-size: 14px; opacity: 0.8;">
+                            • Canvas-based particle system (Leaflet-Velocity)<br>
+                            • Time-stamped GeoJSON animation<br>
+                            • Interactive time controls<br>
+                            • Multiple map themes
+                        </p>
+                    </div>
+                    """
+                )
+            
+            # Event handlers
+            download_btn.click(
+                download_wind_data,
+                outputs=[download_status, gr.JSON(visible=False), gr.JSON(visible=False)]
+            )
+            
+            create_map_btn.click(
+                create_wind_map,
+                inputs=[region_choice, particle_count],
+                outputs=[wind_map, wind_info]
+            )
+        
+        with gr.Tab("📖 About"):
+            gr.Markdown("""
+            # 🌍 About ECMWF Wind Particle Visualization
+            
+            ## 🎯 What This App Does
+            
+            This application creates **windy-style particle animations** using real ECMWF operational wind data. 
+            It demonstrates two complementary visualization approaches:
+            
+            ### 🎨 Visualization Methods
+            
+            1. **Canvas Particle System (Leaflet-Velocity)**
+               - Real-time particle advection on HTML5 canvas
+               - Thousands of particles animated by wind field
+               - Color-coded by wind speed
+               - Interactive controls and wind speed display
+            
+            2. **TimestampedGeoJSON Animation**
+               - Pre-computed particle trajectories
+               - Time slider controls
+               - Smooth animation transitions
+               - Compatible with Folium/Leaflet ecosystem
+            
+            ### 📊 Technical Implementation
+            
+            **Data Processing:**
+            - Downloads ECMWF 10m U/V wind components in GRIB2 format
+            - Converts to grib2json-compatible velocity JSON
+            - Implements bilinear interpolation for smooth field sampling
+            
+            **Particle Physics:**
+            - RK4 (Runge-Kutta 4th order) integration for accurate advection
+            - Proper coordinate system handling (geographic projections)
+            - Particle respawning and boundary management
+            
+            **Visualization:**
+            - Leaflet-Velocity plugin for canvas rendering
+            - Folium TimestampedGeoJson for time-based animation
+            - Multiple map tile layers and interactive controls
+            
+            ### 🌪️ Inspired by Windy.com
+            
+            This implementation follows the same principles used by professional weather visualization platforms:
+            - Vector field interpolation
+            - Massless particle advection  
+            - Canvas-based rendering for performance
+            - Color coding by wind magnitude
+            - Time-based animation controls
+            
+            ### 🛠️ Technologies Used
+            
+            - **ECMWF OpenData**: Real operational forecast data
+            - **Leaflet-Velocity**: Canvas particle rendering
+            - **Folium**: Python-Leaflet bridge
+            - **xarray/cfgrib**: GRIB data processing
+            - **Gradio**: Interactive web interface
+            
+            ### 📚 References
+            
+            - [earth.nullschool.net](https://earth.nullschool.net/) - Original particle visualization inspiration
+            - [Leaflet-Velocity](https://github.com/onaci/leaflet-velocity) - Canvas particle system
+            - [ECMWF Open Data](https://www.ecmwf.int/en/forecasts/datasets/open-data) - Data source
+            - [Windy.com](https://www.windy.com/) - Visual style reference
+            """)
+        
+        gr.Markdown("""
+        ---
+        **🌪️ ECMWF Wind Particle Visualization - Bringing Windy-style Animation to Your Browser**  
+        *Powered by ECMWF Open Data - Real operational forecasts updated every 6 hours*
+        """)
+    
+    return interface
+
+
+if __name__ == "__main__":
+    interface = create_gradio_interface()
+    interface.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False
+    )

requirements.txt

@@ -0,0 +1,13 @@
+gradio==4.44.0
+folium==0.17.0
+xarray==2024.7.0
+cfgrib==0.9.11.0
+ecmwf-opendata==0.3.6
+requests==2.32.3
+numpy==1.26.4
+pandas==2.2.2
+matplotlib==3.9.2
+plotly==5.22.0
+eccodes==1.7.0
+branca==0.7.2
+jinja2==3.1.4