init commit

.cdsapirc

@@ -0,0 +1,2 @@
+url: https://ads.atmosphere.copernicus.eu/api
+key: 4492fecf-e164-45ed-9d8e-fc86ca282600

.dockerignore

@@ -0,0 +1,55 @@
+# Git
+.git
+.gitignore
+
+# Python
+__pycache__
+*.pyc
+*.pyo
+*.pyd
+.Python
+env
+pip-log.txt
+pip-delete-this-directory.txt
+.tox
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.log
+.idea
+.mypy_cache
+.pytest_cache
+.hypothesis
+
+# OS
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Project specific
+downloads/*
+!downloads/.gitkeep
+plots/*
+!plots/.gitkeep
+uploads/*
+!uploads/.gitkeep
+
+# Documentation
+*.md
+!app_readme.md
+
+# Development
+.vscode
+.env
+.cdsapirc
+
+# Temporary files
+*.tmp
+*.temp

.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+__pycache__/
+
+# Any file in these folders should be ignored.
+static/
+plots/
+uploads/
+downloads/
+shapefiles/
+
+

Dockerfile

@@ -0,0 +1,52 @@
+# Use Python 3.11 slim image for better compatibility with scientific packages
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies required for the scientific packages
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    libproj-dev \
+    proj-data \
+    proj-bin \
+    libgeos-dev \
+    libgdal-dev \
+    gdal-bin \
+    libspatialindex-dev \
+    libffi-dev \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set environment variables for GDAL
+ENV CPLUS_INCLUDE_PATH=/usr/include/gdal
+ENV C_INCLUDE_PATH=/usr/include/gdal
+ENV GDAL_DATA=/usr/share/gdal
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the application code
+COPY . .
+
+# Create necessary directories
+RUN mkdir -p uploads downloads/extracted plots shapefiles static templates
+
+# Set environment variables for Flask
+ENV FLASK_APP=app.py
+ENV FLASK_ENV=production
+ENV PYTHONUNBUFFERED=1
+
+# Expose the port that Hugging Face Spaces expects
+EXPOSE 7860
+
+# Create a non-root user for security
+RUN useradd -m -u 1000 user && chown -R user:user /app
+USER user
+
+# Command to run the application
+# Note: Hugging Face Spaces expects the app to run on port 7860
+CMD ["python", "-c", "import sys; sys.path.append('.'); from app import app; app.run(host='0.0.0.0', port=7860, debug=False)"]

README copy.md

@@ -0,0 +1,5 @@
+### CAMS - Air Pollution Dashboard
+
+A web-based visualization tool for CAMS (Copernicus Atmosphere Monitoring Service) air pollution data over India. Upload NetCDF files or download data by date, select pollutants (PM2.5, NO₂, O₃, etc.), choose pressure levels for atmospheric variables, and generate interactive maps with customizable color themes.
+
+> You will need the `.cdsapirc` file set up for downloading data from CDS(Client Data Store). Also make sure to make a seperate viirtual environment for this project and download all the dependencies from `requirements.txt` file.  

README_HF.md

@@ -0,0 +1,27 @@
+# CAMS Air Pollution Dashboard
+
+A comprehensive web application for visualizing atmospheric composition data from the Copernicus Atmosphere Monitoring Service (CAMS).
+
+## Features
+
+- 🌍 Interactive air pollution maps for India
+- 📊 Multiple pollutant visualization (PM2.5, PM10, NO2, O3, CO, etc.)
+- 🎨 Various color themes for data visualization
+- 📁 Support for NetCDF file uploads
+- 🌐 Direct CAMS data download integration
+- 📈 Statistical analysis and hover information
+
+## Usage
+
+1. Upload your own NetCDF files or download CAMS data for specific dates
+2. Select variables, pressure levels, and time points
+3. Generate static or interactive pollution maps
+4. Explore air quality data with detailed statistics
+
+## Data Source
+
+This application uses data from the Copernicus Atmosphere Monitoring Service (CAMS), which provides global atmospheric composition forecasts and analyses.
+
+## License
+
+This project is open source and available under the MIT License.

app.py

@@ -0,0 +1,565 @@
+# Flask web application for CAMS air pollution visualization
+
+import os
+import json
+import traceback
+from pathlib import Path
+
+from datetime import datetime, timedelta
+from werkzeug.utils import secure_filename
+from flask import Flask, render_template, request, redirect, url_for, flash, jsonify, send_file
+
+# Import our custom modules
+from data_processor import NetCDFProcessor, analyze_netcdf_file
+from plot_generator import IndiaMapPlotter
+from interactive_plot_generator import InteractiveIndiaMapPlotter
+from cams_downloader import CAMSDownloader
+from constants import ALLOWED_EXTENSIONS, MAX_FILE_SIZE, COLOR_THEMES
+
+app = Flask(__name__)
+app.secret_key = 'your-secret-key-change-this-in-production'  # Change this!
+app.config['DEBUG'] = False  # Explicitly disable debug mode
+
+# Add JSON filter for templates
+import json
+app.jinja_env.filters['tojson'] = json.dumps
+
+# Configure upload settings
+app.config['MAX_CONTENT_LENGTH'] = MAX_FILE_SIZE
+app.config['UPLOAD_FOLDER'] = 'uploads'
+
+# Initialize our services
+downloader = CAMSDownloader()
+plotter = IndiaMapPlotter()
+interactive_plotter = InteractiveIndiaMapPlotter()
+
+# Ensure directories exist
+for directory in ['uploads', 'downloads', 'plots', 'templates', 'static']:
+    Path(directory).mkdir(exist_ok=True)
+
+
+def allowed_file(filename):
+    """Check if file extension is allowed"""
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+
+def str_to_bool(value):
+    """Convert string representation to boolean"""
+    if isinstance(value, bool):
+        return value
+    if isinstance(value, str):
+        return value.lower() in ('true', '1', 'yes', 'on')
+    return bool(value)
+
+
+@app.route('/')
+def index():
+    """Main page - file upload or date selection"""
+    downloaded_files = downloader.list_downloaded_files()
+    # List files in uploads and downloads/extracted
+    upload_files = sorted(
+        [f for f in Path(app.config['UPLOAD_FOLDER']).glob('*') if f.is_file()],
+        key=lambda x: x.stat().st_mtime, reverse=True
+    )
+    extracted_files = sorted(
+        [f for f in Path('downloads/extracted').glob('*') if f.is_file()],
+        key=lambda x: x.stat().st_mtime, reverse=True
+    )
+    # Prepare for template: list of dicts with name and type
+    recent_files = [
+        {'name': f.name, 'type': 'upload'} for f in upload_files
+    ] + [
+        {'name': f.name, 'type': 'download'} for f in extracted_files
+    ]
+    current_date = datetime.now().strftime('%Y-%m-%d')
+    return render_template(
+        'index.html',
+        downloaded_files=downloaded_files,
+        cds_ready=downloader.is_client_ready(),
+        current_date=current_date,
+        recent_files=recent_files
+    )
+
+
+@app.route('/upload', methods=['POST'])
+def upload_file():
+    """Handle file upload"""
+    if 'file' not in request.files:
+        flash('No file selected', 'error')
+        return redirect(request.url)
+    
+    file = request.files['file']
+    if file.filename == '':
+        flash('No file selected', 'error')
+        return redirect(request.url)
+    
+    if file and allowed_file(file.filename):
+        try:
+            filename = secure_filename(file.filename)
+            timestamp = datetime.now().strftime('%Y%m%d_%H%M%S')
+            filename = f"{timestamp}_{filename}"
+            filepath = Path(app.config['UPLOAD_FOLDER']) / filename
+            
+            file.save(str(filepath))
+            flash(f'File uploaded successfully: {filename}', 'success')
+            
+            return redirect(url_for('analyze_file', filename=filename))
+            
+        except Exception as e:
+            flash(f'Error uploading file: {str(e)}', 'error')
+            return redirect(url_for('index'))
+    else:
+        flash('Invalid file type. Please upload .nc or .zip files.', 'error')
+        return redirect(url_for('index'))
+
+
+@app.route('/download_date', methods=['POST'])
+def download_date():
+    """Handle date-based download"""
+    date_str = request.form.get('date')
+    
+    if not date_str:
+        flash('Please select a date', 'error')
+        return redirect(url_for('index'))
+    
+    # --- Backend Validation Logic ---
+    try:
+        selected_date = datetime.strptime(date_str, '%Y-%m-%d')
+        start_date = datetime(2015, 1, 1)
+        end_date = datetime.now()
+        
+        if not (start_date <= selected_date <= end_date):
+            flash(f'Invalid date. Please select a date between {start_date.strftime("%Y-%m-%d")} and today.', 'error')
+            return redirect(url_for('index'))
+            
+    except ValueError:
+        flash('Invalid date format. Please use YYYY-MM-DD.', 'error')
+        return redirect(url_for('index'))
+    
+    # --- End of Validation Logic ---
+    
+    if not downloader.is_client_ready():
+        flash('CDS API not configured. Please check your .cdsapirc file.', 'error')
+        return redirect(url_for('index'))
+    
+    try:
+        # Download CAMS data
+        zip_path = downloader.download_cams_data(date_str)
+        
+        # Extract the files
+        extracted_files = downloader.extract_cams_files(zip_path)
+        
+        flash(f'CAMS data downloaded successfully for {date_str}', 'success')
+        
+        # Analyze the extracted files
+        if 'surface' in extracted_files:
+            filename = Path(extracted_files['surface']).name
+            return redirect(url_for('analyze_file', filename=filename, is_download='true'))
+        elif 'atmospheric' in extracted_files:
+            filename = Path(extracted_files['atmospheric']).name
+            return redirect(url_for('analyze_file', filename=filename, is_download='true'))
+        else:
+            # Use the first available file
+            first_file = list(extracted_files.values())[0]
+            filename = Path(first_file).name
+            return redirect(url_for('analyze_file', filename=filename, is_download='true'))
+            
+    except Exception as e:
+        flash(f'Error downloading CAMS data: {str(e)}', 'error')
+        return redirect(url_for('index'))
+
+
+@app.route('/analyze/<filename>')
+def analyze_file(filename):
+    """Analyze uploaded file and show variable selection"""
+    is_download_param = request.args.get('is_download', 'false')
+    is_download = str_to_bool(is_download_param)
+    
+    try:
+        # Determine file path
+        if is_download:
+            file_path = Path('downloads/extracted') / filename
+        else:
+            file_path = Path(app.config['UPLOAD_FOLDER']) / filename
+        
+        if not file_path.exists():
+            flash('File not found', 'error')
+            return redirect(url_for('index'))
+        
+        # Analyze the file
+        analysis = analyze_netcdf_file(str(file_path))
+        
+        if not analysis['success']:
+            flash(f'Error analyzing file: {analysis["error"]}', 'error')
+            return redirect(url_for('index'))
+        
+        if analysis['total_variables'] == 0:
+            flash('No air pollution variables found in the file', 'warning')
+            return redirect(url_for('index'))
+        
+        # Process variables for template
+        variables = []
+        for var_name, var_info in analysis['detected_variables'].items():
+            variables.append({
+                'name': var_name,
+                'display_name': var_info['name'],
+                'type': var_info['type'],
+                'units': var_info['units'],
+                'shape': var_info['shape']
+            })
+        
+        return render_template('variables.html',
+                             filename=filename,
+                             variables=variables,
+                             color_themes=COLOR_THEMES,
+                             is_download=is_download)
+        
+    except Exception as e:
+        flash(f'Error analyzing file: {str(e)}', 'error')
+        return redirect(url_for('index'))
+
+
+@app.route('/get_pressure_levels/<filename>/<variable>')
+def get_pressure_levels(filename, variable):
+    """AJAX endpoint to get pressure levels for atmospheric variables"""
+    try:
+        is_download_param = request.args.get('is_download', 'false')
+        is_download = str_to_bool(is_download_param)
+        
+        print(f"is_download: {is_download} (type: {type(is_download)})")
+
+        # Determine file path
+        if is_download:
+            file_path = Path('downloads/extracted') / filename
+            print("Using downloaded file path")
+        else:
+            file_path = Path(app.config['UPLOAD_FOLDER']) / filename
+            print("Using upload file path")
+        
+        print(f"File path: {file_path}")
+
+        processor = NetCDFProcessor(str(file_path))
+        processor.load_dataset()
+        processor.detect_variables()
+        
+        pressure_levels = processor.get_available_pressure_levels(variable)
+        processor.close()
+        
+        return jsonify({
+            'success': True,
+            'pressure_levels': pressure_levels
+        })
+        
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        })
+
+
+@app.route('/get_available_times/<filename>/<variable>')
+def get_available_times(filename, variable):
+    """AJAX endpoint to get available timestamps for a variable"""
+    try:
+        is_download_param = request.args.get('is_download', 'false')
+        is_download = str_to_bool(is_download_param)
+        
+        # Determine file path
+        if is_download:
+            file_path = Path('downloads/extracted') / filename
+        else:
+            file_path = Path(app.config['UPLOAD_FOLDER']) / filename
+        
+        processor = NetCDFProcessor(str(file_path))
+        processor.load_dataset()
+        processor.detect_variables()
+        
+        available_times = processor.get_available_times(variable)
+        processor.close()
+        
+        # Format times for display
+        formatted_times = []
+        for i, time_val in enumerate(available_times):
+            formatted_times.append({
+                'index': i,
+                'value': str(time_val),
+                'display': time_val.strftime('%Y-%m-%d %H:%M') if hasattr(time_val, 'strftime') else str(time_val)
+            })
+        
+        return jsonify({
+            'success': True,
+            'times': formatted_times
+        })
+        
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'error': str(e)
+        })
+
+@app.route('/visualize', methods=['POST'])
+def visualize():
+    """Generate and display the pollution map"""
+    try:
+        filename = request.form.get('filename')
+        variable = request.form.get('variable')
+        color_theme = request.form.get('color_theme', 'viridis')
+        pressure_level = request.form.get('pressure_level')
+        is_download_param = request.form.get('is_download', 'false')
+        is_download = str_to_bool(is_download_param)
+        
+        if not filename or not variable:
+            flash('Missing required parameters', 'error')
+            return redirect(url_for('index'))
+        
+        # Determine file path
+        if is_download:
+            file_path = Path('downloads/extracted') / filename
+        else:
+            file_path = Path(app.config['UPLOAD_FOLDER']) / filename
+        
+        if not file_path.exists():
+            flash('File not found', 'error')
+            return redirect(url_for('index'))
+        
+        # Process the data
+        processor = NetCDFProcessor(str(file_path))
+        processor.load_dataset()
+        processor.detect_variables()
+        
+        # Convert pressure level to float if provided
+        pressure_level_val = None
+        if pressure_level and pressure_level != 'None':
+            try:
+                pressure_level_val = float(pressure_level)
+            except ValueError:
+                pressure_level_val = None
+
+        time_index_val = request.form.get('time_index')
+        # Extract data
+        data_values, metadata = processor.extract_data(
+            variable, 
+            time_index = int(time_index_val) if time_index_val and time_index_val != 'None' else 0,
+            pressure_level=pressure_level_val
+        )
+        
+        # Generate plot
+        plot_path = plotter.create_india_map(
+            data_values, 
+            metadata, 
+            color_theme=color_theme,
+            save_plot=True
+        )
+        
+        processor.close()
+        
+        if plot_path:
+            plot_filename = Path(plot_path).name
+            
+            # Prepare metadata for display
+            plot_info = {
+                'variable': metadata.get('display_name', 'Unknown Variable'),
+                'units': metadata.get('units', ''),
+                'shape': str(metadata.get('shape', 'Unknown')),
+                'pressure_level': metadata.get('pressure_level'),
+                'color_theme': COLOR_THEMES.get(color_theme, color_theme),
+                'generated_time': datetime.now().strftime('%Y-%m-%d %H:%M:%S'),
+                'data_range': {
+                    'min': float(f"{data_values.min():.3f}") if hasattr(data_values, 'min') and not data_values.min() is None else 0,
+                    'max': float(f"{data_values.max():.3f}") if hasattr(data_values, 'max') and not data_values.max() is None else 0,
+                    'mean': float(f"{data_values.mean():.3f}") if hasattr(data_values, 'mean') and not data_values.mean() is None else 0
+                }
+            }
+            
+            print(f"Plot info prepared: {plot_info}")
+            
+            return render_template('plot.html',
+                                    plot_filename=plot_filename,
+                                    plot_info=plot_info)
+        else:
+            flash('Error generating plot', 'error')
+            return redirect(url_for('index'))
+            
+    except Exception as e:
+        flash(f'Error creating visualization: {str(e)}', 'error')
+        print(f"Full error: {traceback.format_exc()}")
+        return redirect(url_for('index'))
+    
+@app.route('/visualize_interactive', methods=['POST'])
+def visualize_interactive():
+    """Generate and display the interactive pollution map"""
+    try:
+        filename = request.form.get('filename')
+        variable = request.form.get('variable')
+        color_theme = request.form.get('color_theme', 'viridis')
+        pressure_level = request.form.get('pressure_level')
+        is_download_param = request.form.get('is_download', 'false')
+        is_download = str_to_bool(is_download_param)
+        
+        if not filename or not variable:
+            flash('Missing required parameters', 'error')
+            return redirect(url_for('index'))
+        
+        # Determine file path
+        if is_download:
+            file_path = Path('downloads/extracted') / filename
+        else:
+            file_path = Path(app.config['UPLOAD_FOLDER']) / filename
+        
+        if not file_path.exists():
+            flash('File not found', 'error')
+            return redirect(url_for('index'))
+        
+        # Process the data
+        processor = NetCDFProcessor(str(file_path))
+        processor.load_dataset()
+        processor.detect_variables()
+        
+        # Convert pressure level to float if provided
+        pressure_level_val = None
+        if pressure_level and pressure_level != 'None':
+            try:
+                pressure_level_val = float(pressure_level)
+            except ValueError:
+                pressure_level_val = None
+
+        time_index_val = request.form.get('time_index')
+        # Extract data
+        data_values, metadata = processor.extract_data(
+            variable, 
+            time_index = int(time_index_val) if time_index_val and time_index_val != 'None' else 0,
+            pressure_level=pressure_level_val
+        )
+        
+        # Generate interactive plot (saved as JPG)
+        plot_path = interactive_plotter.create_india_map(
+            data_values, 
+            metadata, 
+            color_theme=color_theme,
+            save_plot=True
+        )
+        
+        processor.close()
+        
+        if plot_path:
+            plot_filename = Path(plot_path).name
+            
+            # Prepare metadata for display
+            plot_info = {
+                'variable': metadata.get('display_name', 'Unknown Variable'),
+                'units': metadata.get('units', ''),
+                'shape': str(metadata.get('shape', 'Unknown')),
+                'pressure_level': metadata.get('pressure_level'),
+                'color_theme': COLOR_THEMES.get(color_theme, color_theme),
+                'generated_time': datetime.now().strftime('%Y-%m-%d %H:%M:%S'),
+                'data_range': {
+                    'min': float(f"{data_values.min():.3f}") if hasattr(data_values, 'min') and not data_values.min() is None else 0,
+                    'max': float(f"{data_values.max():.3f}") if hasattr(data_values, 'max') and not data_values.max() is None else 0,
+                    'mean': float(f"{data_values.mean():.3f}") if hasattr(data_values, 'mean') and not data_values.mean() is None else 0
+                },
+                'is_interactive': True
+            }
+            
+            return render_template('plot.html',
+                                    plot_filename=plot_filename,
+                                    plot_info=plot_info)
+        else:
+            flash('Error generating interactive plot', 'error')
+            return redirect(url_for('index'))
+            
+    except Exception as e:
+        flash(f'Error creating interactive visualization: {str(e)}', 'error')
+        print(f"Full error: {traceback.format_exc()}")
+        return redirect(url_for('index'))
+    
+@app.route('/plot/<filename>')
+def serve_plot(filename):
+    """Serve plot images"""
+    try:
+        plot_path = Path('plots') / filename
+        if plot_path.exists():
+            # Determine mimetype based on file extension
+            if filename.lower().endswith('.jpg') or filename.lower().endswith('.jpeg'):
+                mimetype = 'image/jpeg'
+            else:
+                mimetype = 'image/png'
+            return send_file(str(plot_path), mimetype=mimetype)
+        else:
+            flash('Plot not found', 'error')
+            return redirect(url_for('index'))
+    except Exception as e:
+        flash(f'Error serving plot: {str(e)}', 'error')
+        return redirect(url_for('index'))
+
+
+@app.route('/cleanup')
+def cleanup():
+    """Clean up old files"""
+    try:
+        # Clean up old plots (older than 24 hours)
+        cutoff_time = datetime.now() - timedelta(hours=24)
+        cleaned_count = 0
+        
+        for plot_file in Path('plots').glob('*.png'):
+            if plot_file.stat().st_mtime < cutoff_time.timestamp():
+                plot_file.unlink()
+                cleaned_count += 1
+        
+        for plot_file in Path('plots').glob('*.jpg'):
+            if plot_file.stat().st_mtime < cutoff_time.timestamp():
+                plot_file.unlink()
+                cleaned_count += 1
+        
+        flash(f'Cleaned up {cleaned_count} old plot files', 'success')
+        return redirect(url_for('index'))
+        
+    except Exception as e:
+        print(f"Error during cleanup: {str(e)}")
+        flash('Error during cleanup', 'error')
+        return redirect(url_for('index'))
+
+
+@app.route('/health')
+def health_check():
+    """Health check endpoint for monitoring"""
+    return jsonify({
+        'status': 'healthy',
+        'timestamp': datetime.now().isoformat(),
+        'cds_ready': downloader.is_client_ready()
+    })
+
+
+@app.errorhandler(413)
+def too_large(e):
+    """Handle file too large error"""
+    flash('File too large. Maximum size is 500MB.', 'error')
+    return redirect(url_for('index'))
+
+
+@app.errorhandler(404)
+def not_found(e):
+    """Handle 404 errors"""
+    flash('Page not found', 'error')
+    return redirect(url_for('index'))
+
+
+@app.errorhandler(500)
+def server_error(e):
+    """Handle server errors"""
+    flash('An internal error occurred', 'error')
+    return redirect(url_for('index'))
+
+
+if __name__ == '__main__':
+    import os
+    
+    # Get port from environment variable (Hugging Face uses 7860)
+    port = int(os.environ.get('PORT', 7860))
+    debug_mode = os.environ.get('FLASK_ENV', 'production') != 'production'
+    
+    print("🚀 Starting CAMS Air Pollution Visualization App")
+    print(f"📊 Available at: http://localhost:{port}")
+    print("🔧 CDS API Ready:", downloader.is_client_ready())
+    
+    # Run the Flask app
+    app.run(debug=debug_mode, host='0.0.0.0', port=port)

app_readme.md

@@ -0,0 +1,38 @@
+---
+title: CAMS Air Pollution Dashboard
+emoji: 🌍
+colorFrom: green
+colorTo: blue
+sdk: docker
+pinned: false
+license: mit
+app_port: 7860
+---
+
+# CAMS Air Pollution Dashboard
+
+A comprehensive web application for visualizing atmospheric composition data from the Copernicus Atmosphere Monitoring Service (CAMS).
+
+## Features
+
+- 🌍 Interactive air pollution maps for India
+- 📊 Multiple pollutant visualization (PM2.5, PM10, NO2, O3, CO, etc.)
+- 🎨 Various color themes for data visualization
+- 📁 Support for NetCDF file uploads
+- 🌐 Direct CAMS data download integration
+- 📈 Statistical analysis and hover information
+
+## Usage
+
+1. Upload your own NetCDF files or download CAMS data for specific dates
+2. Select variables, pressure levels, and time points
+3. Generate static or interactive pollution maps
+4. Explore air quality data with detailed statistics
+
+## Data Source
+
+This application uses data from the Copernicus Atmosphere Monitoring Service (CAMS), which provides global atmospheric composition forecasts and analyses.
+
+## Note
+
+For downloading CAMS data, you'll need to set up CDS API credentials. You can upload your own NetCDF files to explore the visualization features without API access.

cams_downloader.py

@@ -0,0 +1,355 @@
+# cams_downloader.py
+# Download CAMS atmospheric composition data
+
+import cdsapi
+import zipfile
+import os
+from pathlib import Path
+from datetime import datetime, timedelta
+import pandas as pd
+
+class CAMSDownloader:
+    def __init__(self, download_dir="downloads"):
+        """
+        Initialize CAMS downloader
+        
+        Parameters:
+        download_dir (str): Directory to store downloaded files
+        """
+        self.download_dir = Path(download_dir)
+        self.download_dir.mkdir(exist_ok=True)
+        
+        # Create subdirectories
+        self.extracted_dir = self.download_dir / "extracted"
+        self.extracted_dir.mkdir(exist_ok=True)
+        
+        self.client = None
+        self._init_client()
+    
+    def _init_client(self):
+        """Initialize CDS API client"""
+        try:
+            # Try to read .cdsapirc file from current directory first, then home directory
+            cdsapirc_path = Path.cwd() / ".cdsapirc"
+            if not cdsapirc_path.exists():
+                cdsapirc_path = Path.home() / ".cdsapirc"
+            
+            if cdsapirc_path.exists():
+                # Parse credentials from .cdsapirc
+                with open(cdsapirc_path, 'r') as f:
+                    lines = f.readlines()
+                
+                url = None
+                key = None
+                for line in lines:
+                    line = line.strip()
+                    if line.startswith('url:'):
+                        url = line.split(':', 1)[1].strip()
+                    elif line.startswith('key:'):
+                        key = line.split(':', 1)[1].strip()
+                
+                print(url, key)
+                if url and key:
+                    self.client = cdsapi.Client(key=key, url=url)
+                    print("✅ CDS API client initialized from .cdsapirc")
+                else:
+                    raise ValueError("Could not parse URL or key from .cdsapirc file")
+            else:
+                # Try default initialization (will look for environment variables)
+                self.client = cdsapi.Client()
+                print("✅ CDS API client initialized with default settings")
+                
+        except Exception as e:
+            print(f"⚠️  Warning: Could not initialize CDS API client: {str(e)}")
+            print("Please ensure you have:")
+            print("1. Created an account at https://cds.climate.copernicus.eu/")
+            print("2. Created a .cdsapirc file in your home directory with your credentials")
+            print("3. Or set CDSAPI_URL and CDSAPI_KEY environment variables")
+            self.client = None
+    
+    def is_client_ready(self):
+        """Check if CDS API client is ready"""
+        return self.client is not None
+    
+    def download_cams_data(self, date_str, variables=None, pressure_levels=None):
+        """
+        Download CAMS atmospheric composition data for a specific date
+        
+        Parameters:
+        date_str (str): Date in YYYY-MM-DD format
+        variables (list): List of variables to download (default: common air pollution variables)
+        pressure_levels (list): List of pressure levels (default: standard levels)
+        
+        Returns:
+        str: Path to downloaded ZIP file
+        """
+        if not self.is_client_ready():
+            raise Exception("CDS API client not initialized. Please check your credentials.")
+        
+        # Validate date
+        try:
+            target_date = pd.to_datetime(date_str)
+            date_str = target_date.strftime('%Y-%m-%d')
+        except:
+            raise ValueError(f"Invalid date format: {date_str}. Use YYYY-MM-DD format.")
+        
+        # Check if data already exists
+        filename = f"{date_str}-cams.nc.zip"
+        filepath = self.download_dir / filename
+        
+        if filepath.exists():
+            print(f"✅ Data for {date_str} already exists: {filename}")
+            return str(filepath)
+        
+        # Default variables (common air pollution variables)
+        if variables is None:
+            variables = [
+                # Meteorological surface-level variables
+                "10m_u_component_of_wind",
+                "10m_v_component_of_wind", 
+                "2m_temperature",
+                "mean_sea_level_pressure",
+                
+                # Pollution surface-level variables
+                "particulate_matter_1um",
+                "particulate_matter_2.5um", 
+                "particulate_matter_10um",
+                "total_column_carbon_monoxide",
+                "total_column_nitrogen_monoxide",
+                "total_column_nitrogen_dioxide",
+                "total_column_ozone",
+                "total_column_sulphur_dioxide",
+                
+                # Meteorological atmospheric variables
+                "u_component_of_wind",
+                "v_component_of_wind",
+                "temperature", 
+                "geopotential",
+                "specific_humidity",
+                
+                # Pollution atmospheric variables
+                "carbon_monoxide",
+                "nitrogen_dioxide",
+                "nitrogen_monoxide", 
+                "ozone",
+                "sulphur_dioxide",
+            ]
+        
+        # Default pressure levels
+        if pressure_levels is None:
+            pressure_levels = [
+                "50", "100", "150", "200", "250", "300", "400",
+                "500", "600", "700", "850", "925", "1000",
+            ]
+        
+        print(f"🔄 Downloading CAMS data for {date_str}...")
+        print(f"Variables: {len(variables)} selected")
+        print(f"Pressure levels: {len(pressure_levels)} levels")
+        
+        try:
+            # Make the API request
+            self.client.retrieve(
+                "cams-global-atmospheric-composition-forecasts",
+                {
+                    "type": "forecast",
+                    "leadtime_hour": "0",
+                    "variable": variables,
+                    "pressure_level": pressure_levels,
+                    "date": date_str,
+                    "time": ["00:00", "12:00"],  # Two time steps
+                    "format": "netcdf_zip",
+                },
+                str(filepath),
+            )
+            
+            print(f"✅ Successfully downloaded: {filename}")
+            return str(filepath)
+            
+        except Exception as e:
+            # Clean up partial download
+            if filepath.exists():
+                filepath.unlink()
+            raise Exception(f"Error downloading CAMS data: {str(e)}")
+    
+    def extract_cams_files(self, zip_path):
+        """
+        Extract surface and atmospheric data from CAMS ZIP file
+        
+        Parameters:
+        zip_path (str): Path to CAMS ZIP file
+        
+        Returns:
+        dict: Paths to extracted files
+        """
+        zip_path = Path(zip_path)
+        if not zip_path.exists():
+            raise FileNotFoundError(f"ZIP file not found: {zip_path}")
+        
+        # Extract date from filename
+        date_str = zip_path.stem.replace("-cams.nc", "")
+        
+        surface_path = self.extracted_dir / f"{date_str}-cams-surface.nc"
+        atmospheric_path = self.extracted_dir / f"{date_str}-cams-atmospheric.nc"
+        
+        extracted_files = {}
+        
+        try:
+            with zipfile.ZipFile(zip_path, "r") as zf:
+                zip_contents = zf.namelist()
+                
+                # Extract surface data
+                surface_file = None
+                for file in zip_contents:
+                    if 'sfc' in file.lower() or file.endswith('_sfc.nc'):
+                        surface_file = file
+                        break
+                
+                if surface_file and not surface_path.exists():
+                    with open(surface_path, "wb") as f:
+                        f.write(zf.read(surface_file))
+                    print(f"✅ Extracted surface data: {surface_path.name}")
+                    extracted_files['surface'] = str(surface_path)
+                elif surface_path.exists():
+                    extracted_files['surface'] = str(surface_path)
+                
+                # Extract atmospheric data  
+                atmospheric_file = None
+                for file in zip_contents:
+                    if 'plev' in file.lower() or file.endswith('_plev.nc'):
+                        atmospheric_file = file
+                        break
+                
+                if atmospheric_file and not atmospheric_path.exists():
+                    with open(atmospheric_path, "wb") as f:
+                        f.write(zf.read(atmospheric_file))
+                    print(f"✅ Extracted atmospheric data: {atmospheric_path.name}")
+                    extracted_files['atmospheric'] = str(atmospheric_path)
+                elif atmospheric_path.exists():
+                    extracted_files['atmospheric'] = str(atmospheric_path)
+                
+                # If no specific files found, extract all .nc files
+                if not extracted_files:
+                    nc_files = [f for f in zip_contents if f.endswith('.nc')]
+                    for nc_file in nc_files:
+                        output_path = self.extracted_dir / nc_file
+                        if not output_path.exists():
+                            with open(output_path, "wb") as f:
+                                f.write(zf.read(nc_file))
+                            extracted_files[nc_file] = str(output_path)
+        
+        except Exception as e:
+            raise Exception(f"Error extracting ZIP file: {str(e)}")
+        
+        if not extracted_files:
+            raise Exception("No NetCDF files found in ZIP archive")
+        
+        return extracted_files
+    
+    def get_available_dates(self, start_date=None, end_date=None):
+        """
+        Get list of dates for which CAMS data is typically available
+        Note: This doesn't check actual availability, just generates reasonable date range
+        
+        Parameters:
+        start_date (str): Start date (default: 30 days ago)
+        end_date (str): End date (default: yesterday)
+        
+        Returns:
+        list: List of date strings in YYYY-MM-DD format
+        """
+        if start_date is None:
+            start_date = (datetime.now() - timedelta(days=30)).strftime('%Y-%m-%d')
+        
+        if end_date is None:
+            end_date = (datetime.now() - timedelta(days=1)).strftime('%Y-%m-%d')
+        
+        # Generate date range
+        date_range = pd.date_range(start=start_date, end=end_date, freq='D')
+        return [date.strftime('%Y-%m-%d') for date in date_range]
+    
+    def list_downloaded_files(self):
+        """List all downloaded CAMS files"""
+        downloaded_files = []
+        
+        for zip_file in self.download_dir.glob("*-cams.nc.zip"):
+            date_str = zip_file.stem.replace("-cams.nc", "")
+            file_info = {
+                'date': date_str,
+                'zip_path': str(zip_file),
+                'size_mb': zip_file.stat().st_size / (1024 * 1024),
+                'downloaded': zip_file.stat().st_mtime
+            }
+            downloaded_files.append(file_info)
+        
+        # Sort by date (newest first)
+        downloaded_files.sort(key=lambda x: x['date'], reverse=True)
+        return downloaded_files
+    
+    def cleanup_old_files(self, days_old=30):
+        """
+        Clean up downloaded files older than specified days
+        
+        Parameters:
+        days_old (int): Delete files older than this many days
+        """
+        try:
+            cutoff_date = datetime.now() - timedelta(days=days_old)
+            
+            deleted_count = 0
+            for zip_file in self.download_dir.glob("*-cams.nc.zip"):
+                if datetime.fromtimestamp(zip_file.stat().st_mtime) < cutoff_date:
+                    zip_file.unlink()
+                    deleted_count += 1
+            
+            # Also clean extracted files
+            for nc_file in self.extracted_dir.glob("*.nc"):
+                if datetime.fromtimestamp(nc_file.stat().st_mtime) < cutoff_date:
+                    nc_file.unlink()
+                    deleted_count += 1
+            
+            print(f"🧹 Cleaned up {deleted_count} old files")
+            return deleted_count
+            
+        except Exception as e:
+            print(f"Error during cleanup: {str(e)}")
+            return 0
+
+
+def test_cams_downloader():
+    """Test function for CAMS downloader"""
+    print("Testing CAMS downloader...")
+    
+    downloader = CAMSDownloader()
+    
+    if not downloader.is_client_ready():
+        print("❌ CDS API client not ready. Please check your credentials.")
+        return False
+    
+    # Test with recent date
+    test_date = (datetime.now() - timedelta(days=600)).strftime('%Y-%m-%d')
+    
+    print(f"Testing download for date: {test_date}")
+    print("⚠️  This may take several minutes for the first download...")
+    
+    try:
+        # Download data (will skip if already exists)
+        zip_path = downloader.download_cams_data(test_date)
+        print(f"✅ Download successful: {zip_path}")
+        
+        # Test extraction
+        extracted_files = downloader.extract_cams_files(zip_path)
+        print(f"✅ Extraction successful: {len(extracted_files)} files")
+        
+        # List downloaded files
+        downloaded = downloader.list_downloaded_files()
+        print(f"✅ Found {len(downloaded)} downloaded files")
+        
+        return True
+        
+    except Exception as e:
+        print(f"❌ Test failed: {str(e)}")
+        return False
+
+
+if __name__ == "__main__":
+    test_cams_downloader()

constants.py

@@ -0,0 +1,114 @@
+# Air pollution variables and their properties
+
+AIR_POLLUTION_VARIABLES = {
+    # PM2.5
+    'pm2p5': {'units': 'µg/m³', 'name': 'PM2.5', 'cmap': 'YlOrRd', 'vmax_percentile': 95, 'type': 'surface'},
+    'pm25': {'units': 'µg/m³', 'name': 'PM2.5', 'cmap': 'YlOrRd', 'vmax_percentile': 95, 'type': 'surface'},
+    'PM2P5': {'units': 'µg/m³', 'name': 'PM2.5', 'cmap': 'YlOrRd', 'vmax_percentile': 95, 'type': 'surface'},
+    'PM25': {'units': 'µg/m³', 'name': 'PM2.5', 'cmap': 'YlOrRd', 'vmax_percentile': 95, 'type': 'surface'},
+    'pm2_5': {'units': 'µg/m³', 'name': 'PM2.5', 'cmap': 'YlOrRd', 'vmax_percentile': 95, 'type': 'surface'},
+    'PM2_5': {'units': 'µg/m³', 'name': 'PM2.5', 'cmap': 'YlOrRd', 'vmax_percentile': 95, 'type': 'surface'},
+    'particulate_matter_2_5': {'units': 'µg/m³', 'name': 'PM2.5', 'cmap': 'YlOrRd', 'vmax_percentile': 95, 'type': 'surface'},
+    'particulate_matter_2.5um': {'units': 'µg/m³', 'name': 'PM2.5', 'cmap': 'YlOrRd', 'vmax_percentile': 95, 'type': 'surface'},
+    'mass_concentration_of_pm2p5_ambient_aerosol_particles_in_air': {'units': 'µg/m³', 'name': 'PM2.5', 'cmap': 'YlOrRd', 'vmax_percentile': 95, 'type': 'surface'},
+    
+    # PM10
+    'pm10': {'units': 'µg/m³', 'name': 'PM10', 'cmap': 'Oranges', 'vmax_percentile': 95, 'type': 'surface'},
+    'PM10': {'units': 'µg/m³', 'name': 'PM10', 'cmap': 'Oranges', 'vmax_percentile': 95, 'type': 'surface'},
+    'pm10p0': {'units': 'µg/m³', 'name': 'PM10', 'cmap': 'Oranges', 'vmax_percentile': 95, 'type': 'surface'},
+    'particulate_matter_10': {'units': 'µg/m³', 'name': 'PM10', 'cmap': 'Oranges', 'vmax_percentile': 95, 'type': 'surface'},
+    'particulate_matter_10um': {'units': 'µg/m³', 'name': 'PM10', 'cmap': 'Oranges', 'vmax_percentile': 95, 'type': 'surface'},
+    'mass_concentration_of_pm10_ambient_aerosol_particles_in_air': {'units': 'µg/m³', 'name': 'PM10', 'cmap': 'Oranges', 'vmax_percentile': 95, 'type': 'surface'},
+    
+    # PM1
+    'pm1': {'units': 'µg/m³', 'name': 'PM1', 'cmap': 'Reds', 'vmax_percentile': 95, 'type': 'surface'},
+    'PM1': {'units': 'µg/m³', 'name': 'PM1', 'cmap': 'Reds', 'vmax_percentile': 95, 'type': 'surface'},
+    'particulate_matter_1um': {'units': 'µg/m³', 'name': 'PM1', 'cmap': 'Reds', 'vmax_percentile': 95, 'type': 'surface'},
+    
+    # NO2
+    'no2': {'units': 'µg/m³', 'name': 'NO₂', 'cmap': 'Reds', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'NO2': {'units': 'µg/m³', 'name': 'NO₂', 'cmap': 'Reds', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'nitrogen_dioxide': {'units': 'µg/m³', 'name': 'NO₂', 'cmap': 'Reds', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'mass_concentration_of_nitrogen_dioxide_in_air': {'units': 'µg/m³', 'name': 'NO₂', 'cmap': 'Reds', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    
+    # SO2
+    'so2': {'units': 'µg/m³', 'name': 'SO₂', 'cmap': 'Purples', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'SO2': {'units': 'µg/m³', 'name': 'SO₂', 'cmap': 'Purples', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'sulphur_dioxide': {'units': 'µg/m³', 'name': 'SO₂', 'cmap': 'Purples', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'sulfur_dioxide': {'units': 'µg/m³', 'name': 'SO₂', 'cmap': 'Purples', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'mass_concentration_of_sulfur_dioxide_in_air': {'units': 'µg/m³', 'name': 'SO₂', 'cmap': 'Purples', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    
+    # O3
+    'o3': {'units': 'µg/m³', 'name': 'O₃', 'cmap': 'Blues', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'O3': {'units': 'µg/m³', 'name': 'O₃', 'cmap': 'Blues', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'ozone': {'units': 'µg/m³', 'name': 'O₃', 'cmap': 'Blues', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'mass_concentration_of_ozone_in_air': {'units': 'µg/m³', 'name': 'O₃', 'cmap': 'Blues', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    
+    # CO
+    'co': {'units': 'mg/m³', 'name': 'CO', 'cmap': 'Greens', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'CO': {'units': 'mg/m³', 'name': 'CO', 'cmap': 'Greens', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'carbon_monoxide': {'units': 'mg/m³', 'name': 'CO', 'cmap': 'Greens', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'mass_concentration_of_carbon_monoxide_in_air': {'units': 'mg/m³', 'name': 'CO', 'cmap': 'Greens', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    
+    # NO (Nitrogen Monoxide)
+    'no': {'units': 'µg/m³', 'name': 'NO', 'cmap': 'Oranges', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'NO': {'units': 'µg/m³', 'name': 'NO', 'cmap': 'Oranges', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'nitrogen_monoxide': {'units': 'µg/m³', 'name': 'NO', 'cmap': 'Oranges', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    
+    # NH3
+    'nh3': {'units': 'µg/m³', 'name': 'NH₃', 'cmap': 'viridis', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'NH3': {'units': 'µg/m³', 'name': 'NH₃', 'cmap': 'viridis', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'ammonia': {'units': 'µg/m³', 'name': 'NH₃', 'cmap': 'viridis', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    'mass_concentration_of_ammonia_in_air': {'units': 'µg/m³', 'name': 'NH₃', 'cmap': 'viridis', 'vmax_percentile': 90, 'type': 'atmospheric'},
+    
+    # Total Column variables (these are surface-level total column measurements)
+    'total_column_carbon_monoxide': {'units': 'mol/m²', 'name': 'Total Column CO', 'cmap': 'Greens', 'vmax_percentile': 90, 'type': 'surface'},
+    'total_column_nitrogen_monoxide': {'units': 'mol/m²', 'name': 'Total Column NO', 'cmap': 'Oranges', 'vmax_percentile': 90, 'type': 'surface'},
+    'total_column_nitrogen_dioxide': {'units': 'mol/m²', 'name': 'Total Column NO₂', 'cmap': 'Reds', 'vmax_percentile': 90, 'type': 'surface'},
+    'total_column_ozone': {'units': 'mol/m²', 'name': 'Total Column O₃', 'cmap': 'Blues', 'vmax_percentile': 90, 'type': 'surface'},
+    'total_column_sulphur_dioxide': {'units': 'mol/m²', 'name': 'Total Column SO₂', 'cmap': 'Purples', 'vmax_percentile': 90, 'type': 'surface'},
+    
+    # Legacy total column names
+    'tcno2': {'units': 'mol/m²', 'name': 'Total Column NO₂', 'cmap': 'Reds', 'vmax_percentile': 90, 'type': 'surface'},
+    'tcso2': {'units': 'mol/m²', 'name': 'Total Column SO₂', 'cmap': 'Purples', 'vmax_percentile': 90, 'type': 'surface'},
+    'tco3': {'units': 'mol/m²', 'name': 'Total Column O₃', 'cmap': 'Blues', 'vmax_percentile': 90, 'type': 'surface'},
+    'tcco': {'units': 'mol/m²', 'name': 'Total Column CO', 'cmap': 'Greens', 'vmax_percentile': 90, 'type': 'surface'},
+    
+    # AOD (Aerosol Optical Depth) - surface measurement
+    'aod550': {'units': '', 'name': 'AOD 550nm', 'cmap': 'plasma', 'vmax_percentile': 95, 'type': 'surface'},
+    'aod': {'units': '', 'name': 'AOD', 'cmap': 'plasma', 'vmax_percentile': 95, 'type': 'surface'},
+    'aerosol_optical_depth': {'units': '', 'name': 'AOD', 'cmap': 'plasma', 'vmax_percentile': 95, 'type': 'surface'},
+}
+
+# Available color themes for plotting
+COLOR_THEMES = {
+    'YlOrRd': 'Yellow-Orange-Red',
+    'Oranges': 'Oranges',
+    'Reds': 'Reds', 
+    'Purples': 'Purples',
+    'Blues': 'Blues',
+    'Greens': 'Greens',
+    'viridis': 'Viridis',
+    'plasma': 'Plasma',
+    'inferno': 'Inferno',
+    'magma': 'Magma',
+    'cividis': 'Cividis',
+    'coolwarm': 'Cool-Warm',
+    'RdYlBu': 'Red-Yellow-Blue',
+    'Spectral': 'Spectral'
+}
+
+# India map boundaries
+INDIA_BOUNDS = {
+    'lat_min': 6.0,
+    'lat_max': 38.0,
+    'lon_min': 68.0,
+    'lon_max': 98.0
+}
+
+# Common pressure levels for atmospheric variables (in hPa)
+PRESSURE_LEVELS = [50, 100, 150, 200, 250, 300, 400, 500, 600, 700, 850, 925, 1000]
+
+# File upload settings
+ALLOWED_EXTENSIONS = {'nc', 'zip'}
+MAX_FILE_SIZE = 500 * 1024 * 1024  # 500MB

data_processor.py

@@ -0,0 +1,468 @@
+# NetCDF file processing and air pollution variable detection
+
+import os
+import zipfile
+import warnings
+import tempfile
+
+import numpy as np
+import pandas as pd
+import xarray as xr
+
+from pathlib import Path
+from datetime import datetime
+
+# Imports from our Modules
+from constants import AIR_POLLUTION_VARIABLES, PRESSURE_LEVELS
+warnings.filterwarnings('ignore')
+
+class NetCDFProcessor:
+    def __init__(self, file_path):
+        """
+        Initialize NetCDF processor
+        
+        Parameters:
+        file_path (str): Path to NetCDF or ZIP file
+        """
+        self.file_path = Path(file_path)
+        self.dataset = None
+        self.surface_dataset = None
+        self.atmospheric_dataset = None
+        self.detected_variables = {}
+        
+    def load_dataset(self):
+        """Load NetCDF dataset from file or ZIP"""
+        try:
+            if self.file_path.suffix.lower() == '.zip':
+                return self._load_from_zip()
+            elif self.file_path.suffix.lower() == '.nc':
+                return self._load_from_netcdf()
+            else:
+                raise ValueError("Unsupported file format. Use .nc or .zip files.")
+                
+        except Exception as e:
+            raise Exception(f"Error loading dataset: {str(e)}")
+    
+    def _load_from_zip(self):
+        """Load dataset from ZIP file (CAMS format)"""
+        with zipfile.ZipFile(self.file_path, 'r') as zf:
+            zip_contents = zf.namelist()
+            
+            # Look for surface and atmospheric data files
+            surface_file = None
+            atmospheric_file = None
+            
+            for file in zip_contents:
+                if 'sfc' in file.lower() or 'surface' in file.lower():
+                    surface_file = file
+                elif 'plev' in file.lower() or 'pressure' in file.lower() or 'atmospheric' in file.lower():
+                    atmospheric_file = file
+            
+            # Load surface data if available
+            if surface_file:
+                with zf.open(surface_file) as f:
+                    with tempfile.NamedTemporaryFile(suffix='.nc') as tmp:
+                        tmp.write(f.read())
+                        tmp.flush()
+                        self.surface_dataset = xr.open_dataset(tmp.name, engine='netcdf4')
+                        print(f"Loaded surface data: {surface_file}")
+            
+            # Load atmospheric data if available
+            if atmospheric_file:
+                with zf.open(atmospheric_file) as f:
+                    with tempfile.NamedTemporaryFile(suffix='.nc') as tmp:
+                        tmp.write(f.read())
+                        tmp.flush()
+                        self.atmospheric_dataset = xr.open_dataset(tmp.name, engine='netcdf4')
+                        print(f"Loaded atmospheric data: {atmospheric_file}")
+            
+            # If no specific files found, try to load the first .nc file
+            if not surface_file and not atmospheric_file:
+                nc_files = [f for f in zip_contents if f.endswith('.nc')]
+                if nc_files:
+                    with zf.open(nc_files[0]) as f:
+                        with tempfile.NamedTemporaryFile(suffix='.nc') as tmp:
+                            tmp.write(f.read())
+                            tmp.flush()
+                            self.dataset = xr.open_dataset(tmp.name, engine='netcdf4')
+                            print(f"Loaded dataset: {nc_files[0]}")
+                else:
+                    raise ValueError("No NetCDF files found in ZIP")
+        
+        return True
+    
+    def _load_from_netcdf(self):
+        """Load dataset from single NetCDF file"""
+        self.dataset = xr.open_dataset(self.file_path)
+        print(f"Loaded NetCDF file: {self.file_path.name}")
+        return True
+    
+    def detect_variables(self):
+        """Detect air pollution variables in all loaded datasets"""
+        self.detected_variables = {}
+        
+        # Check surface dataset
+        if self.surface_dataset is not None:
+            surface_vars = self._detect_variables_in_dataset(self.surface_dataset, 'surface')
+            self.detected_variables.update(surface_vars)
+        
+        # Check atmospheric dataset
+        if self.atmospheric_dataset is not None:
+            atmo_vars = self._detect_variables_in_dataset(self.atmospheric_dataset, 'atmospheric')
+            self.detected_variables.update(atmo_vars)
+        
+        # Check main dataset if no separate files
+        if self.dataset is not None:
+            main_vars = self._detect_variables_in_dataset(self.dataset, 'unknown')
+            self.detected_variables.update(main_vars)
+        
+        return self.detected_variables
+    
+    def _detect_variables_in_dataset(self, dataset, dataset_type):
+        """Detect air pollution variables in a specific dataset"""
+        detected = {}
+        
+        for var_name in dataset.data_vars:
+            var_name_lower = var_name.lower()
+            
+            # Check exact matches first
+            if var_name in AIR_POLLUTION_VARIABLES:
+                detected[var_name] = AIR_POLLUTION_VARIABLES[var_name].copy()
+                detected[var_name]['original_name'] = var_name
+                detected[var_name]['dataset_type'] = dataset_type
+                detected[var_name]['shape'] = dataset[var_name].shape
+                detected[var_name]['dims'] = list(dataset[var_name].dims)
+                
+            elif var_name_lower in AIR_POLLUTION_VARIABLES:
+                detected[var_name] = AIR_POLLUTION_VARIABLES[var_name_lower].copy()
+                detected[var_name]['original_name'] = var_name
+                detected[var_name]['dataset_type'] = dataset_type
+                detected[var_name]['shape'] = dataset[var_name].shape
+                detected[var_name]['dims'] = list(dataset[var_name].dims)
+                
+            else:
+                # Check for partial matches
+                var_info = dataset[var_name]
+                long_name = getattr(var_info, 'long_name', '').lower()
+                standard_name = getattr(var_info, 'standard_name', '').lower()
+                
+                # Check for keywords
+                pollution_keywords = {
+                    'pm2.5': {'units': 'µg/m³', 'name': 'PM2.5', 'cmap': 'YlOrRd', 'vmax_percentile': 95, 'type': 'surface'},
+                    'pm10': {'units': 'µg/m³', 'name': 'PM10', 'cmap': 'Oranges', 'vmax_percentile': 95, 'type': 'surface'},
+                    'pm1': {'units': 'µg/m³', 'name': 'PM1', 'cmap': 'Reds', 'vmax_percentile': 95, 'type': 'surface'},
+                    'no2': {'units': 'µg/m³', 'name': 'NO₂', 'cmap': 'Reds', 'vmax_percentile': 90, 'type': 'atmospheric'},
+                    'nitrogen dioxide': {'units': 'µg/m³', 'name': 'NO₂', 'cmap': 'Reds', 'vmax_percentile': 90, 'type': 'atmospheric'},
+                    'so2': {'units': 'µg/m³', 'name': 'SO₂', 'cmap': 'Purples', 'vmax_percentile': 90, 'type': 'atmospheric'},
+                    'sulphur dioxide': {'units': 'µg/m³', 'name': 'SO₂', 'cmap': 'Purples', 'vmax_percentile': 90, 'type': 'atmospheric'},
+                    'sulfur dioxide': {'units': 'µg/m³', 'name': 'SO₂', 'cmap': 'Purples', 'vmax_percentile': 90, 'type': 'atmospheric'},
+                    'ozone': {'units': 'µg/m³', 'name': 'O₃', 'cmap': 'Blues', 'vmax_percentile': 90, 'type': 'atmospheric'},
+                    'carbon monoxide': {'units': 'mg/m³', 'name': 'CO', 'cmap': 'Greens', 'vmax_percentile': 90, 'type': 'atmospheric'},
+                    'nitrogen monoxide': {'units': 'µg/m³', 'name': 'NO', 'cmap': 'Oranges', 'vmax_percentile': 90, 'type': 'atmospheric'},
+                    'ammonia': {'units': 'µg/m³', 'name': 'NH₃', 'cmap': 'viridis', 'vmax_percentile': 90, 'type': 'atmospheric'},
+                    'particulate': {'units': 'µg/m³', 'name': 'Particulate Matter', 'cmap': 'YlOrRd', 'vmax_percentile': 95, 'type': 'surface'},
+                }
+                
+                for keyword, properties in pollution_keywords.items():
+                    if (keyword in var_name_lower or 
+                        keyword in long_name or 
+                        keyword in standard_name):
+                        detected[var_name] = properties.copy()
+                        detected[var_name]['original_name'] = var_name
+                        detected[var_name]['dataset_type'] = dataset_type
+                        detected[var_name]['shape'] = dataset[var_name].shape
+                        detected[var_name]['dims'] = list(dataset[var_name].dims)
+                        break
+        
+        return detected
+    
+    def get_coordinates(self, dataset):
+        """Get coordinate names from dataset"""
+        coords = list(dataset.coords.keys())
+        
+        # Find latitude coordinate
+        lat_names = ['latitude', 'lat', 'y', 'Latitude', 'LATITUDE']
+        lat_coord = next((name for name in lat_names if name in coords), None)
+        
+        # Find longitude coordinate
+        lon_names = ['longitude', 'lon', 'x', 'Longitude', 'LONGITUDE']
+        lon_coord = next((name for name in lon_names if name in coords), None)
+        
+        # Find time coordinate
+        time_names = ['time', 'Time', 'TIME', 'forecast_reference_time']
+        time_coord = next((name for name in time_names if name in coords), None)
+        
+        # Find pressure/level coordinate
+        level_names = ['pressure_level', 'plev', 'level', 'pressure', 'lev']
+        level_coord = next((name for name in level_names if name in coords), None)
+        
+        return {
+            'lat': lat_coord,
+            'lon': lon_coord,
+            'time': time_coord,
+            'level': level_coord
+        }
+    
+    def format_timestamp(self, timestamp):
+        """Format timestamp for display in plots"""
+        try:
+            if pd.isna(timestamp):
+                return "Unknown Time"
+            
+            # Convert to pandas datetime if it isn't already
+            if not isinstance(timestamp, pd.Timestamp):
+                timestamp = pd.to_datetime(timestamp)
+            
+            # Format as "YYYY-MM-DD HH:MM"
+            return timestamp.strftime('%Y-%m-%d %H:%M')
+        except:
+            return str(timestamp)
+    
+    def extract_data(self, variable_name, time_index=1, pressure_level=None):
+        """
+        Extract data for a specific variable
+        
+        Parameters:
+        variable_name (str): Name of the variable to extract
+        time_index (int): Time index to extract (default: 0 for current time)
+        pressure_level (float): Pressure level for atmospheric variables (default: surface level)
+        
+        Returns:
+        tuple: (data_array, metadata)
+        """
+        if variable_name not in self.detected_variables:
+            raise ValueError(f"Variable {variable_name} not found in detected variables")
+        
+        var_info = self.detected_variables[variable_name]
+        dataset_type = var_info['dataset_type']
+        
+        # Determine which dataset to use
+        if dataset_type == 'surface' and self.surface_dataset is not None:
+            dataset = self.surface_dataset
+        elif dataset_type == 'atmospheric' and self.atmospheric_dataset is not None:
+            dataset = self.atmospheric_dataset
+        elif self.dataset is not None:
+            dataset = self.dataset
+        else:
+            raise ValueError(f"No suitable dataset found for variable {variable_name}")
+        
+        # Get the data variable
+        data_var = dataset[variable_name]
+        coords = self.get_coordinates(dataset)
+        print(f"Coordinates: {coords}\n\n")
+
+        # Handle different data shapes
+        data_array = data_var
+        print(f"Data array shape: {data_array.dims} \n\n")
+
+        # Get timestamp information before extracting data
+        selected_timestamp = None
+        timestamp_str = "Unknown Time"
+        
+        # Handle time dimension
+        if coords['time'] and coords['time'] in data_array.dims:
+            # Get all available times
+            available_times = pd.to_datetime(dataset[coords['time']].values)
+            
+            if time_index == -1:  # Latest time
+                time_index = len(available_times) - 1
+            
+            # Ensure time_index is within bounds
+            if 0 <= time_index < len(available_times):
+                selected_timestamp = available_times[time_index]
+                timestamp_str = self.format_timestamp(selected_timestamp)
+                print(f"Time index: {time_index} selected - {timestamp_str}")
+                data_array = data_array.isel({coords['time']: time_index})
+            else:
+                print(f"Warning: time_index {time_index} out of bounds, using index 0")
+                time_index = 0
+                selected_timestamp = available_times[time_index]
+                timestamp_str = self.format_timestamp(selected_timestamp)
+                data_array = data_array.isel({coords['time']: time_index})
+        
+        # Handle pressure/level dimension for atmospheric variables
+        if coords['level'] and coords['level'] in data_array.dims:
+            if pressure_level is None:
+                # Default to surface level (highest pressure)
+                pressure_level = 1000
+            
+            # Find closest pressure level
+            pressure_values = dataset[coords['level']].values
+            level_index = np.argmin(np.abs(pressure_values - pressure_level))
+            actual_pressure = pressure_values[level_index]
+            
+            data_array = data_array.isel({coords['level']: level_index})
+            print(f"Selected pressure level: {actual_pressure} hPa (requested: {pressure_level} hPa)")
+        
+        # Handle batch dimension (usually the first dimension for CAMS data)
+        shape = data_array.shape
+        if len(shape) == 4:  # (batch, time, lat, lon) or similar
+            data_array = data_array[0, -1]  # Take first batch, latest time
+        elif len(shape) == 3:  # (batch, lat, lon) or (time, lat, lon)
+            data_array = data_array[-1]  # Take latest
+        elif len(shape) == 5:  # (batch, time, level, lat, lon)
+            data_array = data_array[0, -1]  # Already handled level above
+        
+        # Get coordinate arrays
+        lats = dataset[coords['lat']].values
+        lons = dataset[coords['lon']].values
+        
+        # Convert units if necessary
+        original_units = getattr(dataset[variable_name], 'units', '')
+        data_values = self._convert_units(data_array.values, original_units, var_info['units'])
+
+        metadata = {
+            'variable_name': variable_name,
+            'display_name': var_info['name'],
+            'units': var_info['units'],
+            'original_units': original_units,
+            'shape': data_values.shape,
+            'lats': lats,
+            'lons': lons,
+            'pressure_level': pressure_level if coords['level'] and coords['level'] in dataset[variable_name].dims else None,
+            'time_index': time_index,
+            'timestamp': selected_timestamp,
+            'timestamp_str': timestamp_str,
+            'dataset_type': dataset_type
+        }
+        
+        return data_values, metadata
+    
+    def _convert_units(self, data, original_units, target_units):
+        """Convert data units for air pollution variables"""
+        data_converted = data.copy()
+        
+        if original_units and target_units:
+            orig_lower = original_units.lower()
+            target_lower = target_units.lower()
+            
+            # kg/m³ to µg/m³
+            if 'kg' in orig_lower and 'µg' in target_lower:
+                data_converted = data_converted * 1e9
+                print(f"Converting from {original_units} to {target_units} (×1e9)")
+            
+            # kg/m³ to mg/m³
+            elif 'kg' in orig_lower and 'mg' in target_lower:
+                data_converted = data_converted * 1e6
+                print(f"Converting from {original_units} to {target_units} (×1e6)")
+            
+            # mol/m² conversions (keep as is)
+            elif 'mol' in orig_lower:
+                print(f"Units {original_units} kept as is")
+            
+            # No unit (dimensionless) - keep as is
+            elif target_units == '':
+                print("Dimensionless variable - no unit conversion")
+        
+        return data_converted
+    
+    def get_available_times(self, variable_name):
+        """Get available time steps for a variable"""
+        if variable_name not in self.detected_variables:
+            return []
+        
+        var_info = self.detected_variables[variable_name]
+        dataset_type = var_info['dataset_type']
+        
+        # Determine which dataset to use
+        if dataset_type == 'surface' and self.surface_dataset is not None:
+            dataset = self.surface_dataset
+        elif dataset_type == 'atmospheric' and self.atmospheric_dataset is not None:
+            dataset = self.atmospheric_dataset
+        elif self.dataset is not None:
+            dataset = self.dataset
+        else:
+            return []
+        
+        coords = self.get_coordinates(dataset)
+        
+        if coords['time'] and coords['time'] in dataset.dims:
+            times = pd.to_datetime(dataset[coords['time']].values)
+            print(f"Times: {times.to_list()}")
+            return times.tolist()
+        
+        return []
+    
+    def get_available_pressure_levels(self, variable_name):
+        """Get available pressure levels for atmospheric variables"""
+        if variable_name not in self.detected_variables:
+            return []
+        
+        var_info = self.detected_variables[variable_name]
+        if var_info['type'] != 'atmospheric':
+            return []
+        
+        dataset_type = var_info['dataset_type']
+        
+        # Determine which dataset to use
+        if dataset_type == 'atmospheric' and self.atmospheric_dataset is not None:
+            dataset = self.atmospheric_dataset
+        elif self.dataset is not None:
+            dataset = self.dataset
+        else:
+            return []
+        
+        coords = self.get_coordinates(dataset)
+        
+        if coords['level'] and coords['level'] in dataset.dims:
+            levels = dataset[coords['level']].values
+            return levels.tolist()
+        
+        return PRESSURE_LEVELS  # Default pressure levels
+    
+    def close(self):
+        """Close all open datasets"""
+        if self.dataset is not None:
+            self.dataset.close()
+        if self.surface_dataset is not None:
+            self.surface_dataset.close()
+        if self.atmospheric_dataset is not None:
+            self.atmospheric_dataset.close()
+
+
+def analyze_netcdf_file(file_path):
+    """
+    Analyze NetCDF file structure and return summary
+    
+    Parameters:
+    file_path (str): Path to NetCDF or ZIP file
+    
+    Returns:
+    dict: Analysis summary
+    """
+    processor = NetCDFProcessor(file_path)
+    
+    try:
+        processor.load_dataset()
+        detected_vars = processor.detect_variables()
+        
+        analysis = {
+            'success': True,
+            'file_path': str(file_path),
+            'detected_variables': detected_vars,
+            'total_variables': len(detected_vars),
+            'surface_variables': len([v for v in detected_vars.values() if v.get('type') == 'surface']),
+            'atmospheric_variables': len([v for v in detected_vars.values() if v.get('type') == 'atmospheric']),
+        }
+        
+        # Get sample time information
+        if detected_vars:
+            sample_var = list(detected_vars.keys())[0]
+            times = processor.get_available_times(sample_var)
+            if times:
+                analysis['time_range'] = {
+                    'start': str(times[0]),
+                    'end': str(times[-1]),
+                    'count': len(times)
+                }
+        
+        processor.close()
+        return analysis
+        
+    except Exception as e:
+        processor.close()
+        return {
+            'success': False,
+            'error': str(e),
+            'file_path': str(file_path)
+        }

deploy.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+# Deployment script for Hugging Face Spaces
+
+echo "🚀 Preparing CAMS Air Pollution Dashboard for Hugging Face deployment"
+
+# Build the Docker image
+echo "📦 Building Docker image..."
+docker build -t cams-pollution-dashboard .
+
+# Test the container locally (optional)
+echo "🧪 To test locally, run:"
+echo "docker run -p 7860:7860 cams-pollution-dashboard"
+
+echo ""
+echo "📋 Deployment checklist for Hugging Face Spaces:"
+echo "1. Create a new Space on Hugging Face"
+echo "2. Select 'Docker' as the SDK"
+echo "3. Upload all files including Dockerfile"
+echo "4. Make sure app_readme.md contains the correct YAML frontmatter"
+echo "5. Push to your Hugging Face repository"
+
+echo ""
+echo "✅ Ready for deployment!"

interactive_plot_generator.py

@@ -0,0 +1,347 @@
+# interactive_plot_generator.py
+# Generate interactive air pollution maps for India with hover information
+
+import numpy as np
+import plotly.graph_objects as go
+import plotly.express as px
+import geopandas as gpd
+from pathlib import Path
+from datetime import datetime
+from constants import INDIA_BOUNDS, COLOR_THEMES
+import warnings
+warnings.filterwarnings('ignore')
+
+
+class InteractiveIndiaMapPlotter:
+    def __init__(self, plots_dir="plots", shapefile_path="shapefiles/India_State_Boundary.shp"):
+        """
+        Initialize the interactive map plotter
+        
+        Parameters:
+        plots_dir (str): Directory to save plots
+        shapefile_path (str): Path to the India districts shapefile
+        """
+        self.plots_dir = Path(plots_dir)
+        self.plots_dir.mkdir(exist_ok=True)
+        
+        try:
+            self.india_map = gpd.read_file(shapefile_path)
+
+            # Ensure it's in lat/lon (WGS84)
+            if self.india_map.crs is not None and self.india_map.crs.to_epsg() != 4326:
+                self.india_map = self.india_map.to_crs(epsg=4326)
+
+        except Exception as e:
+            raise FileNotFoundError(f"Could not read the shapefile at '{shapefile_path}'. "
+                                    f"Please ensure the file exists. Error: {e}")
+    
+    def create_india_map(self, data_values, metadata, color_theme=None, save_plot=True, custom_title=None):
+        """
+        Create interactive air pollution map over India with hover information
+        
+        Parameters:
+        data_values (np.ndarray): 2D array of pollution data
+        metadata (dict): Metadata containing lats, lons, variable info, etc.
+        color_theme (str): Color theme name from COLOR_THEMES
+        save_plot (bool): Whether to save the plot as JPG
+        custom_title (str): Custom title for the plot
+        
+        Returns:
+        str: Path to saved plot file
+        """
+        try:
+            # Extract metadata
+            lats = metadata['lats']
+            lons = metadata['lons']
+            var_name = metadata['variable_name']
+            display_name = metadata['display_name']
+            units = metadata['units']
+            pressure_level = metadata.get('pressure_level')
+            time_stamp = metadata.get('timestamp_str')
+            
+            # Determine color theme
+            if color_theme is None:
+                from constants import AIR_POLLUTION_VARIABLES
+                color_theme = AIR_POLLUTION_VARIABLES.get(var_name, {}).get('cmap', 'viridis')
+            
+            # Map matplotlib colormaps to Plotly colormaps
+            colormap_mapping = {
+                'viridis': 'Viridis',
+                'plasma': 'Plasma',
+                'inferno': 'Inferno',
+                'magma': 'Magma',
+                'cividis': 'Cividis',
+                'YlOrRd': 'YlOrRd',
+                'RdYlGn_r': 'RdYlGn_r',
+                'coolwarm': 'RdBu_r',
+                'Spectral_r': 'Spectral_r',
+                'jet': 'Jet',
+                'turbo': 'Turbo'
+            }
+            plotly_colorscale = colormap_mapping.get(color_theme, 'Viridis')
+            
+            # Create mesh grid if needed
+            if lons.ndim == 1 and lats.ndim == 1:
+                lon_grid, lat_grid = np.meshgrid(lons, lats)
+            else:
+                lon_grid, lat_grid = lons, lats
+            
+            # Calculate statistics
+            valid_data = data_values[~np.isnan(data_values)]
+            if len(valid_data) == 0:
+                raise ValueError("All data values are NaN - cannot create plot")
+            
+            from constants import AIR_POLLUTION_VARIABLES
+            vmax_percentile = AIR_POLLUTION_VARIABLES.get(var_name, {}).get('vmax_percentile', 90)
+            vmin = np.nanpercentile(valid_data, 5)
+            vmax = np.nanpercentile(valid_data, vmax_percentile)
+            if vmax <= vmin:
+                vmax = vmin + 1.0
+            
+            # Create hover text with detailed information
+            hover_text = self._create_hover_text(lon_grid, lat_grid, data_values, display_name, units)
+            
+            # Create the figure
+            fig = go.Figure()
+            
+            # Add pollution data as heatmap
+            fig.add_trace(go.Heatmap(
+                x=lons,
+                y=lats,
+                z=data_values,
+                colorscale=plotly_colorscale,
+                zmin=vmin,
+                zmax=vmax,
+                hovertext=hover_text,
+                hoverinfo='text',
+                colorbar=dict(
+                    title=dict(
+                        text=f"{display_name}" + (f"<br>({units})" if units else ""),
+                        side="right"
+                    ),
+                    thickness=20,
+                    len=0.6,
+                    x=1.02
+                )
+            ))
+            
+            # Add India state boundaries
+            for _, row in self.india_map.iterrows():
+                if row.geometry.geom_type == 'Polygon':
+                    self._add_polygon_trace(fig, row.geometry)
+                elif row.geometry.geom_type == 'MultiPolygon':
+                    for polygon in row.geometry.geoms:
+                        self._add_polygon_trace(fig, polygon)
+            
+            # Create title
+            if custom_title:
+                title = custom_title
+            else:
+                title = f'{display_name} Concentration over India'
+                if pressure_level:
+                    title += f' at {pressure_level} hPa'
+                title += f' on {time_stamp}'
+            
+            # Calculate stats for annotation
+            stats_text = self._create_stats_text(valid_data, units)
+            theme_name = COLOR_THEMES.get(color_theme, color_theme)
+            
+            # Auto-adjust bounds if needed
+            xmin, ymin, xmax, ymax = self.india_map.total_bounds
+            if not (INDIA_BOUNDS['lon_min'] <= xmin <= INDIA_BOUNDS['lon_max']):
+                lon_range = [xmin, xmax]
+                lat_range = [ymin, ymax]
+            else:
+                lon_range = [INDIA_BOUNDS['lon_min'], INDIA_BOUNDS['lon_max']]
+                lat_range = [INDIA_BOUNDS['lat_min'], INDIA_BOUNDS['lat_max']]
+            
+            # Update layout
+            fig.update_layout(
+                title=dict(
+                    text=title,
+                    x=0.5,
+                    xanchor='center',
+                    font=dict(size=18, weight='bold')
+                ),
+                xaxis=dict(
+                    title='Longitude',
+                    range=lon_range,
+                    showgrid=True,
+                    gridcolor='rgba(128, 128, 128, 0.3)'
+                ),
+                yaxis=dict(
+                    title='Latitude',
+                    range=lat_range,
+                    showgrid=True,
+                    gridcolor='rgba(128, 128, 128, 0.3)'
+                ),
+                width=1400,
+                height=1000,
+                plot_bgcolor='white',
+                annotations=[
+                    # Statistics box
+                    dict(
+                        text=stats_text.replace('\n', '<br>'),
+                        xref='paper', yref='paper',
+                        x=0.02, y=0.98,
+                        xanchor='left', yanchor='top',
+                        showarrow=False,
+                        bgcolor='rgba(255, 255, 255, 0.9)',
+                        bordercolor='black',
+                        borderwidth=1,
+                        borderpad=10,
+                        font=dict(size=11)
+                    ),
+                    # Theme info box
+                    dict(
+                        text=f'Color Theme: {theme_name}',
+                        xref='paper', yref='paper',
+                        x=0.98, y=0.02,
+                        xanchor='right', yanchor='bottom',
+                        showarrow=False,
+                        bgcolor='rgba(211, 211, 211, 0.8)',
+                        bordercolor='gray',
+                        borderwidth=1,
+                        borderpad=8,
+                        font=dict(size=10)
+                    )
+                ]
+            )
+            
+            plot_path = None
+            if save_plot:
+                plot_path = self._save_plot(fig, var_name, display_name, pressure_level, color_theme, time_stamp)
+            
+            return plot_path
+            
+        except Exception as e:
+            raise Exception(f"Error creating interactive map: {str(e)}")
+    
+    def _add_polygon_trace(self, fig, polygon):
+        """Add a polygon boundary to the figure"""
+        x, y = polygon.exterior.xy
+        fig.add_trace(go.Scatter(
+            x=list(x),
+            y=list(y),
+            mode='lines',
+            line=dict(color='black', width=1),
+            hoverinfo='skip',
+            showlegend=False
+        ))
+    
+    def _create_hover_text(self, lon_grid, lat_grid, data_values, display_name, units):
+        """Create formatted hover text for each point"""
+        hover_text = np.empty(data_values.shape, dtype=object)
+        units_str = f" {units}" if units else ""
+        
+        for i in range(data_values.shape[0]):
+            for j in range(data_values.shape[1]):
+                lat = lat_grid[i, j] if lat_grid.ndim == 2 else lat_grid[i]
+                lon = lon_grid[i, j] if lon_grid.ndim == 2 else lon_grid[j]
+                value = data_values[i, j]
+                
+                if np.isnan(value):
+                    value_str = "N/A"
+                elif abs(value) >= 1000:
+                    value_str = f"{value:.0f}{units_str}"
+                elif abs(value) >= 10:
+                    value_str = f"{value:.1f}{units_str}"
+                else:
+                    value_str = f"{value:.2f}{units_str}"
+                
+                hover_text[i, j] = (
+                    f"<b>{display_name}</b>: {value_str}<br>"
+                    f"<b>Latitude</b>: {lat:.3f}°<br>"
+                    f"<b>Longitude</b>: {lon:.3f}°"
+                )
+        
+        return hover_text
+    
+    def _create_stats_text(self, data, units):
+        """Create statistics text for annotation"""
+        units_str = f" {units}" if units else ""
+        stats = {
+            'Min': np.nanmin(data),
+            'Max': np.nanmax(data),
+            'Mean': np.nanmean(data),
+            'Median': np.nanmedian(data),
+            'Std': np.nanstd(data)
+        }
+        
+        def format_number(val):
+            if abs(val) >= 1000:
+                return f"{val:.0f}"
+            elif abs(val) >= 10:
+                return f"{val:.1f}"
+            else:
+                return f"{val:.2f}"
+        
+        stats_lines = [f"{name}: {format_number(val)}{units_str}" for name, val in stats.items()]
+        return "\n".join(stats_lines)
+    
+    def _save_plot(self, fig, var_name, display_name, pressure_level, color_theme, time_stamp):
+        """Save the plot as JPG"""
+        safe_display_name = display_name.replace('/', '_').replace(' ', '_').replace('₂', '2').replace('₃', '3').replace('.', '_')
+        safe_time_stamp = time_stamp.replace('-', '').replace(':', '').replace(' ', '_')
+        
+        filename_parts = [f"{safe_display_name}_India_interactive"]
+        if pressure_level:
+            filename_parts.append(f"{int(pressure_level)}hPa")
+        filename_parts.extend([color_theme, safe_time_stamp])
+        filename = "_".join(filename_parts) + ".jpg"
+        
+        plot_path = self.plots_dir / filename
+        
+        # Save as static JPG with high quality
+        fig.write_image(str(plot_path), format='jpg', width=1400, height=1000, scale=2)
+        print(f"Interactive plot saved as JPG: {plot_path}")
+        
+        return str(plot_path)
+    
+    def list_available_themes(self):
+        """List available color themes"""
+        return COLOR_THEMES
+
+
+def test_interactive_plot_generator():
+    """Test function for the interactive plot generator"""
+    print("Testing interactive plot generator...")
+    
+    # Create test data
+    lats = np.linspace(6, 38, 50)
+    lons = np.linspace(68, 98, 60)
+    lon_grid, lat_grid = np.meshgrid(lons, lats)
+    data = np.sin(lat_grid * 0.1) * np.cos(lon_grid * 0.1) * 100 + 50
+    data += np.random.normal(0, 10, data.shape)
+    
+    metadata = {
+        'variable_name': 'pm25',
+        'display_name': 'PM2.5',
+        'units': 'µg/m³',
+        'lats': lats,
+        'lons': lons,
+        'pressure_level': None,
+        'timestamp_str': datetime.now().strftime('%Y-%m-%d %H:%M:%S'),
+    }
+    
+    shapefile_path = "shapefiles/India_State_Boundary.shp"
+    if not Path(shapefile_path).exists():
+        print(f"❌ Test failed: Shapefile not found at '{shapefile_path}'.")
+        print("Please make sure you have unzipped 'India_State_Boundary.zip' into a 'shapefiles' folder.")
+        return False
+    
+    plotter = InteractiveIndiaMapPlotter(shapefile_path=shapefile_path)
+    
+    try:
+        plot_path = plotter.create_india_map(data, metadata, color_theme='YlOrRd')
+        print(f"✅ Test interactive plot created successfully: {plot_path}")
+        return True
+    except Exception as e:
+        print(f"❌ Test failed: {str(e)}")
+        import traceback
+        traceback.print_exc()
+        return False
+
+
+if __name__ == "__main__":
+    test_interactive_plot_generator()

plot_generator.py

@@ -0,0 +1,216 @@
+# plot_generator.py
+# Generate air pollution maps for India using GeoPandas for the map outline
+
+import numpy as np
+import matplotlib.pyplot as plt
+import matplotlib
+matplotlib.use('Agg')  # Use non-interactive backend for web apps
+import geopandas as gpd
+from pathlib import Path
+from datetime import datetime
+from constants import INDIA_BOUNDS, COLOR_THEMES
+import warnings
+warnings.filterwarnings('ignore')
+
+
+class IndiaMapPlotter:
+    def __init__(self, plots_dir="plots", shapefile_path="shapefiles/India_State_Boundary.shp"):
+        """
+        Initialize the map plotter
+        
+        Parameters:
+        plots_dir (str): Directory to save plots
+        shapefile_path (str): Path to the India districts shapefile
+        """
+        self.plots_dir = Path(plots_dir)
+        self.plots_dir.mkdir(exist_ok=True)
+        
+        try:
+            self.india_map = gpd.read_file(shapefile_path)
+
+            # Ensure it's in lat/lon (WGS84)
+            if self.india_map.crs is not None and self.india_map.crs.to_epsg() != 4326:
+                self.india_map = self.india_map.to_crs(epsg=4326)
+
+        except Exception as e:
+            raise FileNotFoundError(f"Could not read the shapefile at '{shapefile_path}'. "
+                                    f"Please ensure the file exists. Error: {e}")
+        
+        plt.rcParams['figure.dpi'] = 300
+        plt.rcParams['savefig.dpi'] = 300
+        plt.rcParams['savefig.bbox'] = 'tight'
+        plt.rcParams['font.size'] = 10
+        
+    def create_india_map(self, data_values, metadata, color_theme=None, save_plot=True, custom_title=None):
+        """
+        Create air pollution map over India
+        """
+        try:
+            # Metadata extraction remains the same
+            lats = metadata['lats']
+            lons = metadata['lons']
+            var_name = metadata['variable_name']
+            display_name = metadata['display_name']
+            units = metadata['units']
+            pressure_level = metadata.get('pressure_level')
+            time_stamp = metadata.get('timestamp_str')
+            
+            # Color theme logic remains the same
+            if color_theme is None:
+                from constants import AIR_POLLUTION_VARIABLES
+                color_theme = AIR_POLLUTION_VARIABLES.get(var_name, {}).get('cmap', 'viridis')
+            if color_theme not in COLOR_THEMES:
+                print(f"Warning: Color theme '{color_theme}' not found, using 'viridis'")
+                color_theme = 'viridis'
+            
+            # Create figure and axes
+            fig = plt.figure(figsize=(14, 10))
+            ax = fig.add_subplot(1, 1, 1)
+            
+            # Set map extent
+            ax.set_xlim(INDIA_BOUNDS['lon_min'], INDIA_BOUNDS['lon_max'])
+            ax.set_ylim(INDIA_BOUNDS['lat_min'], INDIA_BOUNDS['lat_max'])
+            
+            # --- KEY CHANGE: PLOT ORDER & ZORDER ---
+            
+            # 1. Plot the pollution data in the background (lower zorder)
+            if lons.ndim == 1 and lats.ndim == 1:
+                lon_grid, lat_grid = np.meshgrid(lons, lats)
+            else:
+                lon_grid, lat_grid = lons, lats
+            
+            valid_data = data_values[~np.isnan(data_values)]
+            if len(valid_data) == 0:
+                raise ValueError("All data values are NaN - cannot create plot")
+            
+            from constants import AIR_POLLUTION_VARIABLES
+            vmax_percentile = AIR_POLLUTION_VARIABLES.get(var_name, {}).get('vmax_percentile', 90)
+            vmin = np.nanpercentile(valid_data, 5)
+            vmax = np.nanpercentile(valid_data, vmax_percentile)
+            if vmax <= vmin:
+                vmax = vmin + 1.0
+            
+            levels = np.linspace(vmin, vmax, 25)
+            contour = ax.contourf(lon_grid, lat_grid, data_values, 
+                                levels=levels, cmap=color_theme, extend='max', 
+                                zorder=1) 
+
+            # Auto-adjust bounds if INDIA_BOUNDS is too small or wrong
+            xmin, ymin, xmax, ymax = self.india_map.total_bounds
+            if not (INDIA_BOUNDS['lon_min'] <= xmin <= INDIA_BOUNDS['lon_max'] and INDIA_BOUNDS['lon_min'] <= xmax <= INDIA_BOUNDS['lon_max']):
+                print("⚠️ Warning: Using shapefile's actual bounds instead of INDIA_BOUNDS.")
+                ax.set_xlim(xmin, xmax)
+                ax.set_ylim(ymin, ymax)
+
+            # 2. Plot the India map outlines on top of the data (higher zorder)
+            self.india_map.plot(ax=ax, edgecolor='black', facecolor='none', 
+                                linewidth=0.8, zorder=2) # <-- CHANGED: Set zorder=2 (foreground)
+            
+            # Add colorbar
+            cbar = plt.colorbar(contour, ax=ax, shrink=0.6, pad=0.02, aspect=30)
+            cbar_label = f"{display_name}" + (f" ({units})" if units else "")
+            cbar.set_label(cbar_label, fontsize=12, labelpad=15)
+            
+            # Add gridlines and labels
+            ax.grid(True, linestyle='--', alpha=0.6, color='gray', zorder=3)
+            ax.set_xlabel("Longitude", fontsize=10)
+            ax.set_ylabel("Latitude", fontsize=10)
+            ax.tick_params(axis='both', which='major', labelsize=10)
+            
+            # Title creation logic remains the same
+            if custom_title:
+                title = custom_title
+            else:
+                title = f'{display_name} Concentration over India'
+                if pressure_level: title += f' at {pressure_level} hPa'
+                title += f' on {time_stamp}'
+            plt.title(title, fontsize=14, pad=20, weight='bold')
+            
+            # Statistics and theme info boxes remain the same
+            stats_text = self._create_stats_text(valid_data, units)
+            ax.text(0.02, 0.98, stats_text, transform=ax.transAxes, 
+                    bbox=dict(boxstyle="round,pad=0.5", facecolor="white", alpha=0.9),
+                    verticalalignment='top', fontsize=10, zorder=4)
+            
+            theme_text = f"Color Theme: {COLOR_THEMES[color_theme]}"
+            ax.text(0.98, 0.02, theme_text, transform=ax.transAxes,
+                    bbox=dict(boxstyle="round,pad=0.3", facecolor="lightgray", alpha=0.8),
+                    horizontalalignment='right', verticalalignment='bottom', fontsize=9, zorder=4)
+            
+            plt.tight_layout()
+            
+            plot_path = None
+            if save_plot:
+                plot_path = self._save_plot(fig, var_name, display_name, pressure_level, color_theme, time_stamp)
+            
+            plt.close(fig)
+            return plot_path
+            
+        except Exception as e:
+            plt.close('all')
+            raise Exception(f"Error creating map: {str(e)}")
+    
+    # All other helper methods (_create_stats_text, _save_plot, etc.) are unchanged.
+    # The `create_comparison_plot` method is also left out for brevity but would need the same zorder fix.
+    # The full, unchanged code for the helper methods from the previous answer is still valid.
+
+    def _create_stats_text(self, data, units):
+        units_str = f" {units}" if units else ""
+        stats = {'Min': np.nanmin(data), 'Max': np.nanmax(data), 'Mean': np.nanmean(data), 'Median': np.nanmedian(data), 'Std': np.nanstd(data)}
+        def format_number(val):
+            if abs(val) >= 1000: return f"{val:.0f}"
+            elif abs(val) >= 10: return f"{val:.1f}"
+            else: return f"{val:.2f}"
+        stats_lines = [f"{name}: {format_number(val)}{units_str}" for name, val in stats.items()]
+        return "\n".join(stats_lines)
+
+    def _save_plot(self, fig, var_name, display_name, pressure_level, color_theme, time_stamp):
+        safe_display_name = display_name.replace('/', '_').replace(' ', '_').replace('₂', '2').replace('₃', '3').replace('.', '_')
+        safe_time_stamp = time_stamp.replace('-', '').replace(':', '').replace(' ', '_')
+        filename_parts = [f"{safe_display_name}_India"]
+        if pressure_level:
+            filename_parts.append(f"{int(pressure_level)}hPa")
+        filename_parts.extend([color_theme, safe_time_stamp])
+        filename = "_".join(filename_parts) + ".png"
+        plot_path = self.plots_dir / filename
+        fig.savefig(plot_path, dpi=300, bbox_inches='tight', facecolor='white', edgecolor='none')
+        print(f"Plot saved: {plot_path}")
+        return str(plot_path)
+
+    def list_available_themes(self):
+        return COLOR_THEMES
+
+def test_plot_generator():
+    print("Testing plot generator with GeoPandas and zorder fix...")
+    
+    lats, lons = np.linspace(6, 38, 50), np.linspace(68, 98, 60)
+    lon_grid, lat_grid = np.meshgrid(lons, lats)
+    data = np.sin(lat_grid * 0.1) * np.cos(lon_grid * 0.1) * 100 + 50
+    data += np.random.normal(0, 10, data.shape)
+    
+    metadata = {
+        'variable_name': 'pm25', 'display_name': 'PM2.5', 'units': 'µg/m³',
+        'lats': lats, 'lons': lons, 'pressure_level': None,
+        'timestamp_str': datetime.now().strftime('%Y-%m-%d %H:%M:%S'),
+    }
+    
+    shapefile_path = "shapefiles/India_State_Boundary.shp"
+    if not Path(shapefile_path).exists():
+        print(f"❌ Test failed: Shapefile not found at '{shapefile_path}'.")
+        print("Please make sure you have unzipped 'India_State_Boundary.zip' into a 'shapefiles' folder.")
+        return False
+        
+    plotter = IndiaMapPlotter(shapefile_path=shapefile_path)
+    
+    try:
+        plot_path = plotter.create_india_map(data, metadata, color_theme='YlOrRd')
+        print(f"✅ Test plot created successfully: {plot_path}")
+        return True
+    except Exception as e:
+        print(f"❌ Test failed: {str(e)}")
+        import traceback
+        traceback.print_exc()
+        return False
+
+if __name__ == "__main__":
+    test_plot_generator()

requirements.txt

@@ -0,0 +1,14 @@
+flask==2.3.3
+numpy==1.24.3
+pandas==2.0.3
+matplotlib==3.7.2
+cartopy==0.22.0
+xarray==2023.8.0
+netcdf4==1.6.4
+cdsapi==0.7.4
+werkzeug==2.3.7
+jinja2==3.1.2
+python-dateutil==2.8.2
+plotly==6.3.0
+kaleido
+geopandas

templates/index.html

@@ -0,0 +1,281 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CAMS Air Pollution Visualization</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+        }
+        h1 { color: #2c3e50; text-align: center; margin-bottom: 30px; }
+        h2 { color: #34495e; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
+        .method-section {
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            border-left: 4px solid #3498db;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 600;
+            color: #2c3e50;
+        }
+        input[type="file"], select, input[type="date"] {
+            width: 100%;
+            padding: 10px;
+            border: 2px solid #ddd;
+            border-radius: 5px;
+            font-size: 14px;
+        }
+        input[type="file"]:focus, select:focus, input[type="date"]:focus {
+            border-color: #3498db;
+            outline: none;
+        }
+        .btn {
+            background: #3498db;
+            color: white;
+            padding: 12px 24px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 600;
+            transition: background 0.3s;
+        }
+        .btn:hover { background: #2980b9; }
+        .btn:disabled {
+            background: #bdc3c7;
+            cursor: not-allowed;
+        }
+        .alert {
+            padding: 15px;
+            margin-bottom: 20px;
+            border-radius: 5px;
+            font-weight: 500;
+        }
+        .alert-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
+        .alert-error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
+        .alert-warning { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; }
+        .info-box {
+            background: #e8f4fd;
+            border: 1px solid #bee5eb;
+            padding: 15px;
+            border-radius: 5px;
+            margin-bottom: 20px;
+        }
+        .status-indicator {
+            display: inline-block;
+            padding: 4px 8px;
+            border-radius: 3px;
+            font-size: 12px;
+            font-weight: bold;
+            margin-left: 10px;
+        }
+        .status-ready { background: #d4edda; color: #155724; }
+        .status-error { background: #f8d7da; color: #721c24; }
+        .file-info {
+            background: #f8f9fa;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
+            font-size: 14px;
+        }
+        .download-list {
+            max-height: 200px;
+            overflow-y: auto;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+        }
+        .download-item {
+            padding: 10px;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            justify-content: between;
+            align-items: center;
+        }
+        .download-item:last-child { border-bottom: none; }
+        .cleanup-section {
+            background: #fff3cd;
+            padding: 15px;
+            border-radius: 5px;
+            margin-top: 20px;
+        }
+        .two-column {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+        }
+        @media (max-width: 768px) {
+            .two-column { grid-template-columns: 1fr; }
+            body { padding: 10px; }
+            .container { padding: 20px; }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🌍 CAMS Air Pollution Visualization</h1>
+        
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="alert alert-{{ category }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        
+        <div class="info-box">
+            <strong>📡 System Status:</strong>
+            <span class="status-indicator {% if cds_ready %}status-ready{% else %}status-error{% endif %}">
+                {% if cds_ready %}✅ CDS API Ready{% else %}❌ CDS API Not Configured{% endif %}
+            </span>
+            {% if not cds_ready %}
+                <p style="margin: 10px 0 0 0; font-size: 14px; color: #721c24;">
+                    Please create a .cdsapirc file with your CDS credentials to enable data download.
+                </p>
+            {% endif %}
+        </div>
+        
+        <div class="two-column">
+            <div class="method-section">
+                <h2>📁 Method 1: Upload File</h2>
+                <p>Upload your own NetCDF (.nc) or ZIP (.zip) file containing CAMS data</p>
+                
+                <form action="/upload" method="post" enctype="multipart/form-data">
+                    <div class="form-group">
+                        <label for="file">Select File (.nc or .zip):</label>
+                        <input type="file" name="file" id="file" accept=".nc,.zip" required>
+                        <div class="file-info">
+                            <strong>Supported formats:</strong> NetCDF (.nc) or ZIP (.zip)<br>
+                            <strong>Maximum size:</strong> 500MB
+                        </div>
+                    </div>
+                    <button type="submit" class="btn">📤 Upload & Analyze</button>
+                </form>
+            </div>
+            
+            <div class="method-section">
+                <h2>📅 Method 2: Download by Date</h2>
+                <p>Download CAMS data for a specific date (requires CDS API)</p>
+                
+                <form action="/download_date" method="post">
+                    <div class="form-group">
+                        <label for="date_input">Select Date (YYYY-MM-DD):</label>
+                        <input type="date" name="date" id="date_input" required
+                            min="2015-01-01" max="{{ current_date }}">
+                    </div>
+                    
+                    <button type="submit" class="btn" id="download_btn" {% if not cds_ready %}disabled{% endif %}>
+                        ⬇️ Download & Analyze
+                    </button>
+                    
+                    {% if not cds_ready %}
+                        <p style="margin-top: 10px; font-size: 14px; color: #721c24;">
+                            CDS API configuration required
+                        </p>
+                    {% endif %}
+                </form>
+            </div>
+        </div>
+        
+        <!-- {% if downloaded_files %}
+        <div class="container">
+            <h2>📦 Previously Downloaded Files</h2>
+            <div class="download-list">
+                {% for file in downloaded_files %}
+                <div class="download-item">
+                    <div>
+                        <strong>{{ file.date }}</strong> 
+                        <span style="color: #666;">({{ "%.1f"|format(file.size_mb) }} MB)</span>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+        {% endif %} -->
+        
+            <div class="method-section">
+            <h2>🗂️ Method 3: Choose from Recent Files</h2>
+            <p>Select a previously uploaded or downloaded file for visualization.</p>
+            <form id="recentFileForm" action="" method="get" style="display: flex; gap: 10px; align-items: center;">
+                <select name="recent_file" id="recent_file" required style="flex: 1;">
+                    <option value="" disabled selected>Select a file...</option>
+                    {% for file in recent_files %}
+                        <option value="{{ file.name }}|{{ file.type }}">
+                            {{ file.name }} ({{ 'Downloaded' if file.type == 'download' else 'Uploaded' }})
+                        </option>
+                    {% endfor %}
+                </select>
+                <button type="submit" class="btn">Analyze</button>
+            </form>
+        </div>
+
+        <div class="container">
+            <h2>📋 How to Use</h2>
+            <ol style="line-height: 1.8;">
+                <li><strong>Choose your method:</strong> Upload your own file or download data by date</li>
+                <li><strong>File Analysis:</strong> The system will detect air pollution variables in your data</li>
+                <li><strong>Variable Selection:</strong> Choose which pollutant to visualize and select pressure level (for atmospheric variables)</li>
+                <li><strong>Visualization:</strong> Generate and view the pollution map over India with your preferred color theme</li>
+            </ol>
+            
+            <div class="info-box">
+                <strong>💡 Supported Variables:</strong>
+                PM2.5, PM10, PM1, NO₂, SO₂, O₃, CO, NO, NH₃, Total Column measurements, and more
+            </div>
+        </div>
+        
+        <div class="cleanup-section">
+            <h3>🧹 Maintenance</h3>
+            <p>Clean up old files to free up disk space</p>
+            <a href="/cleanup" class="btn" style="font-size: 14px; padding: 8px 16px;">Clean Old Files</a>
+        </div>
+    </div>
+    
+    <script>
+        document.getElementById('file').addEventListener('change', function() {
+            const file = this.files[0];
+            if (file) {
+                const maxSize = 500 * 1024 * 1024;
+                if (file.size > maxSize) {
+                    alert('File size exceeds 500MB limit. Please choose a smaller file.');
+                    this.value = '';
+                }
+            }
+        });
+        
+        document.querySelector('form[action="/download_date"]').addEventListener('submit', function(e) {
+            if (!confirm('CAMS data download may take several minutes. Continue?')) {
+                e.preventDefault();
+            }
+        });
+        
+        document.getElementById('recentFileForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const val = document.getElementById('recent_file').value;
+            if (!val) return;
+            const [filename, filetype] = val.split('|');
+            // is_download param: true for download, false for upload
+            const is_download = (filetype === 'download') ? 'true' : 'false';
+            window.location.href = `/analyze/${encodeURIComponent(filename)}?is_download=${is_download}`;
+        });
+    </script>
+</body>
+</html>

templates/plot.html

@@ -0,0 +1,423 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ plot_info.variable }} - CAMS Air Pollution Map</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+        }
+        h1 { color: #2c3e50; text-align: center; margin-bottom: 30px; }
+        h2 { color: #34495e; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
+        .info-section, .plot-section, .action-section, .technical-section {
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            border-left: 4px solid #3498db;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        .btn {
+            background: #3498db;
+            color: white;
+            padding: 12px 24px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 600;
+            transition: background 0.3s;
+            text-decoration: none;
+            display: inline-block;
+        }
+        .btn:hover { background: #2980b9; }
+        .btn:disabled {
+            background: #bdc3c7;
+            cursor: not-allowed;
+        }
+        .btn-secondary {
+            background: #6c757d;
+        }
+        .btn-secondary:hover {
+            background: #5a6268;
+        }
+        .btn-download {
+            background: #28a745;
+        }
+        .btn-download:hover {
+            background: #218838;
+        }
+        .alert {
+            padding: 15px;
+            margin-bottom: 20px;
+            border-radius: 5px;
+            font-weight: 500;
+        }
+        .alert-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
+        .alert-error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
+        .alert-warning { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; }
+        .breadcrumb {
+            margin-bottom: 20px;
+            font-size: 14px;
+            color: #7f8c8d;
+        }
+        .breadcrumb a {
+            color: #3498db;
+            text-decoration: none;
+        }
+        .breadcrumb a:hover {
+            text-decoration: underline;
+        }
+        .two-column {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+        }
+        .plot-container {
+            text-align: center;
+            padding: 10px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 1px 5px rgba(0,0,0,0.1);
+        }
+        .plot-image {
+            max-width: 100%;
+            height: auto;
+            border-radius: 5px;
+        }
+        .plot-controls {
+            margin-top: 20px;
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+        }
+        .info-grid, .stats-grid, .technical-grid {
+            display: grid;
+            gap: 10px;
+        }
+        .info-grid {
+            grid-template-columns: 1fr;
+        }
+        .info-item {
+            padding: 8px 0;
+            border-bottom: 1px solid #e1e1e1;
+        }
+        .info-item:last-child {
+            border-bottom: none;
+        }
+        .stats-grid {
+            grid-template-columns: repeat(3, 1fr);
+            text-align: center;
+        }
+        .stat-item {
+            background: white;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 1px 5px rgba(0,0,0,0.05);
+        }
+        .stat-value {
+            font-size: 24px;
+            font-weight: 700;
+            color: #3498db;
+        }
+        .stat-label {
+            font-size: 14px;
+            color: #7f8c8d;
+            margin-top: 5px;
+        }
+        .units-note {
+            text-align: center;
+            margin-top: 15px;
+            font-size: 14px;
+            color: #7f8c8d;
+        }
+        .action-section .button-group {
+            display: flex;
+            justify-content: center;
+            gap: 15px;
+            flex-wrap: wrap;
+        }
+        .technical-section summary {
+            cursor: pointer;
+            outline: none;
+            color: #34495e;
+        }
+        .technical-section h3 {
+            display: inline;
+        }
+        .technical-content {
+            padding-top: 10px;
+        }
+        .technical-grid {
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+        }
+        .technical-grid ul {
+            padding-left: 20px;
+            margin-top: 5px;
+            list-style-type: '• ';
+        }
+        .fullscreen-modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0, 0, 0, 0.9);
+            justify-content: center;
+            align-items: center;
+        }
+        .fullscreen-content {
+            position: relative;
+            max-width: 95%;
+            max-height: 95%;
+        }
+        .fullscreen-image {
+            max-width: 100%;
+            max-height: 100%;
+        }
+        .close-fullscreen {
+            position: absolute;
+            top: 20px;
+            right: 35px;
+            color: #f1f1f1;
+            font-size: 40px;
+            font-weight: bold;
+            transition: 0.3s;
+            background: none;
+            border: none;
+            cursor: pointer;
+        }
+        .close-fullscreen:hover, .close-fullscreen:focus {
+            color: #bbb;
+            text-decoration: none;
+        }
+        @media (max-width: 768px) {
+            .two-column, .technical-grid {
+                grid-template-columns: 1fr;
+            }
+            .container { padding: 20px; }
+            .action-section .button-group {
+                flex-direction: column;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🗺️ {{ plot_info.variable }} Visualization</h1>
+        
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="alert alert-{{ category }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        
+        <div class="breadcrumb">
+            <a href="{{ url_for('index') }}">🏠 Home</a> → 
+            <a href="javascript:history.back()">Variable Selection</a> → 
+            Visualization
+        </div>
+        
+        <div class="plot-section">
+            <div class="plot-container">
+                <img src="{{ url_for('serve_plot', filename=plot_filename) }}" 
+                     alt="{{ plot_info.variable }} Map" 
+                     class="plot-image"
+                     id="plotImage">
+                
+                <div class="plot-controls">
+                    <button onclick="downloadPlot()" class="btn btn-download">
+                        💾 Download Image
+                    </button>
+                    <button onclick="toggleFullscreen()" class="btn btn-secondary">
+                        🔍 View Fullscreen
+                    </button>
+                </div>
+            </div>
+        </div>
+        
+        <div class="two-column">
+            <div class="info-section">
+                <h2>📊 Variable Information</h2>
+                <div class="info-grid">
+                    <div class="info-item">
+                        <strong>Variable:</strong>
+                        <span>{{ plot_info.variable }}</span>
+                    </div>
+                    <div class="info-item">
+                        <strong>Units:</strong>
+                        <span>{{ plot_info.units if plot_info.units else 'dimensionless' }}</span>
+                    </div>
+                    <div class="info-item">
+                        <strong>Data Shape:</strong>
+                        <span>{{ plot_info.shape }}</span>
+                    </div>
+                    {% if plot_info.pressure_level %}
+                    <div class="info-item">
+                        <strong>Pressure Level:</strong>
+                        <span>{{ plot_info.pressure_level }} hPa</span>
+                    </div>
+                    {% endif %}
+                    <div class="info-item">
+                        <strong>Color Theme:</strong>
+                        <span>{{ plot_info.color_theme }}</span>
+                    </div>
+                    <div class="info-item">
+                        <strong>Generated:</strong>
+                        <span>{{ plot_info.generated_time }}</span>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="info-section">
+                <h2>📈 Data Statistics</h2>
+                <div class="stats-grid">
+                    <div class="stat-item">
+                        <div class="stat-value">{{ "%.3f"|format(plot_info.data_range.min) }}</div>
+                        <div class="stat-label">Minimum</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-value">{{ "%.3f"|format(plot_info.data_range.max) }}</div>
+                        <div class="stat-label">Maximum</div>
+                    </div>
+                    <div class="stat-item">
+                        <div class="stat-value">{{ "%.3f"|format(plot_info.data_range.mean) }}</div>
+                        <div class="stat-label">Average</div>
+                    </div>
+                </div>
+                
+                {% if plot_info.units %}
+                <p class="units-note">All values in {{ plot_info.units }}</p>
+                {% endif %}
+            </div>
+        </div>
+        
+        <div class="action-section">
+            <h2>🛠️ Actions</h2>
+            <div class="button-group">
+                <a href="javascript:history.back()" class="btn btn-secondary">
+                    ← Create Another Visualization
+                </a>
+                <a href="{{ url_for('index') }}" class="btn btn-secondary">
+                    🏠 Back to Home
+                </a>
+                <button onclick="sharePlot()" class="btn">
+                    📤 Share Plot
+                </button>
+            </div>
+        </div>
+        
+        <div class="technical-section">
+            <details>
+                <summary><h3>🔧 Technical Details</h3></summary>
+                <div class="technical-content">
+                    <div class="technical-grid">
+                        <div>
+                            <strong>File Information:</strong>
+                            <ul>
+                                <li>Plot filename: {{ plot_filename }}</li>
+                                <li>Generated: {{ plot_info.generated_time }}</li>
+                                <li>Resolution: High (300 DPI)</li>
+                                <li>Format: PNG</li>
+                            </ul>
+                        </div>
+                        <div>
+                            <strong>Map Details:</strong>
+                            <ul>
+                                <li>Projection: PlateCarree</li>
+                                <li>Region: India (6°N-38°N, 68°E-98°E)</li>
+                                <li>Features: Coastlines, borders, states</li>
+                                <li>Gridlines: Enabled</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </details>
+        </div>
+    </div>
+    
+    <div id="fullscreenModal" class="fullscreen-modal">
+        <div class="fullscreen-content">
+            <button class="close-fullscreen" onclick="closeFullscreen()">&times;</button>
+            <img src="{{ url_for('serve_plot', filename=plot_filename) }}" 
+                 alt="{{ plot_info.variable }} Map"
+                 class="fullscreen-image">
+        </div>
+    </div>
+    
+    <script>
+        function downloadPlot() {
+            const link = document.createElement('a');
+            link.href = "{{ url_for('serve_plot', filename=plot_filename) }}";
+            link.download = '{{ plot_filename }}';
+            link.click();
+        }
+        
+        function toggleFullscreen() {
+            document.getElementById('fullscreenModal').style.display = 'flex';
+        }
+        
+        function closeFullscreen() {
+            document.getElementById('fullscreenModal').style.display = 'none';
+        }
+        
+        function sharePlot() {
+            if (navigator.share) {
+                navigator.share({
+                    title: '{{ plot_info.variable }} - Air Pollution Map',
+                    text: 'Check out this air pollution visualization over India',
+                    url: window.location.href
+                });
+            } else {
+                // Fallback: copy URL to clipboard
+                if (navigator.clipboard) {
+                    navigator.clipboard.writeText(window.location.href).then(() => {
+                        alert('URL copied to clipboard!');
+                    });
+                } else {
+                    alert('Share URL: ' + window.location.href);
+                }
+            }
+        }
+        
+        // Keyboard shortcuts
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                closeFullscreen();
+            } else if (e.key === 'f' || e.key === 'F') {
+                toggleFullscreen();
+            } else if (e.ctrlKey && e.key === 's') {
+                e.preventDefault();
+                downloadPlot();
+            }
+        });
+        
+        // Click outside to close fullscreen
+        document.getElementById('fullscreenModal').addEventListener('click', function(e) {
+            if (e.target === this) {
+                closeFullscreen();
+            }
+        });
+    </script>
+</body>
+</html>

templates/variables.html

@@ -0,0 +1,508 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Variable Selection - CAMS Air Pollution</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+        }
+        h1 { color: #2c3e50; text-align: center; margin-bottom: 30px; }
+        h2 { color: #34495e; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
+        .method-section, .form-section, .pressure-section {
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            border-left: 4px solid #3498db;
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 600;
+            color: #2c3e50;
+        }
+        input[type="file"], select, input[type="date"] {
+            width: 100%;
+            padding: 10px;
+            border: 2px solid #ddd;
+            border-radius: 5px;
+            font-size: 14px;
+        }
+        input[type="file"]:focus, select:focus, input[type="date"]:focus {
+            border-color: #3498db;
+            outline: none;
+        }
+        .btn {
+            background: #3498db;
+            color: white;
+            padding: 12px 24px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 600;
+            transition: background 0.3s;
+            text-decoration: none;
+            display: inline-block;
+        }
+        .btn:hover { background: #2980b9; }
+        .btn:disabled {
+            background: #bdc3c7;
+            cursor: not-allowed;
+        }
+        .btn-secondary {
+            background: #6c757d;
+        }
+        .btn-secondary:hover {
+            background: #5a6268;
+        }
+        .alert {
+            padding: 15px;
+            margin-bottom: 20px;
+            border-radius: 5px;
+            font-weight: 500;
+        }
+        .alert-success { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
+        .alert-error { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
+        .alert-warning { background: #fff3cd; border: 1px solid #ffeaa7; color: #856404; }
+        .info-box {
+            background: #e8f4fd;
+            border: 1px solid #bee5eb;
+            padding: 15px;
+            border-radius: 5px;
+            margin-bottom: 20px;
+        }
+        .status-indicator {
+            display: inline-block;
+            padding: 4px 8px;
+            border-radius: 3px;
+            font-size: 12px;
+            font-weight: bold;
+            margin-left: 10px;
+        }
+        .status-ready { background: #d4edda; color: #155724; }
+        .status-error { background: #f8d7da; color: #721c24; }
+        .file-info {
+            background: #f8f9fa;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
+            font-size: 14px;
+        }
+        .breadcrumb {
+            margin-bottom: 20px;
+            font-size: 14px;
+            color: #7f8c8d;
+        }
+        .breadcrumb a {
+            color: #3498db;
+            text-decoration: none;
+        }
+        .breadcrumb a:hover {
+            text-decoration: underline;
+        }
+        .variable-info {
+            background: #ecf0f1;
+            padding: 15px;
+            border-radius: 8px;
+            margin-top: 15px;
+        }
+        .variable-info h4 {
+            margin-top: 0;
+            color: #34495e;
+        }
+        .info-text {
+            font-size: 14px;
+            color: #7f8c8d;
+            margin-top: 5px;
+        }
+        .color-preview-section {
+            margin-top: 15px;
+        }
+        .color-gradient {
+            width: 100%;
+            height: 20px;
+            border-radius: 5px;
+            border: 1px solid #ddd;
+        }
+        .button-group {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .loading-message {
+            text-align: center;
+            margin-top: 20px;
+            color: #34495e;
+        }
+        .spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 10px auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        @media (max-width: 768px) {
+            .button-group {
+                flex-direction: column;
+                gap: 15px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🔬 Variable Selection</h1>
+        
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="alert alert-{{ category }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        
+        <div class="breadcrumb">
+            <a href="{{ url_for('index') }}">🏠 Home</a> → Variable Selection
+        </div>
+        
+        <form action="/visualize" method="post" id="visualizeForm">
+            <input type="hidden" name="filename" value="{{ filename }}">
+            <input type="hidden" name="is_download" value="{{ is_download }}">
+            
+            <div class="form-section">
+                <h2>📊 Select Air Pollution Variable</h2>
+                <p>Found {{ variables|length }} air pollution variable(s) in your data. Select one below:</p>
+                
+                <div class="form-group">
+                    <label for="variable">Choose Variable:</label>
+                    <select name="variable" id="variable" required onchange="handleVariableChange()">
+                        <option value="">-- Select a variable --</option>
+                        {% for var in variables %}
+                            <option value="{{ var.name }}" 
+                                    data-type="{{ var.type }}" 
+                                    data-display="{{ var.display_name }}"
+                                    data-units="{{ var.units }}"
+                                    data-shape="{{ var.shape }}">
+                                {{ var.display_name }} ({{ var.name }})
+                            </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="variable-info" id="variableInfo" style="display: none;">
+                    <h4>Selected Variable Details:</h4>
+                    <div id="variableDetails"></div>
+                </div>
+            </div>
+
+            <div class="pressure-section" id="pressureSection" style="display: none;">
+                <h3>🌡️ Pressure Level Selection</h3>
+                <p>This is an atmospheric variable. Please select a pressure level:</p>
+                
+                <div class="form-group">
+                    <label for="pressure_level">Pressure Level (hPa):</label>
+                    <select name="pressure_level" id="pressure_level">
+                        <option value="">-- Select pressure level --</option>
+                        <option value="50">50 hPa (Stratosphere - ~20km)</option>
+                        <option value="100">100 hPa (Tropopause - ~16km)</option>
+                        <option value="150">150 hPa (Upper Troposphere - ~14km)</option>
+                        <option value="200">200 hPa (Upper Troposphere - ~12km)</option>
+                        <option value="250">250 hPa (Upper Troposphere - ~10km)</option>
+                        <option value="300">300 hPa (Upper Troposphere - ~9km)</option>
+                        <option value="400">400 hPa (Mid Troposphere - ~7km)</option>
+                        <option value="500">500 hPa (Mid Troposphere - ~5km)</option>
+                        <option value="600">600 hPa (Lower Troposphere - ~4km)</option>
+                        <option value="700">700 hPa (Lower Troposphere - ~3km)</option>
+                        <option value="850" selected>850 hPa (Lower Troposphere - ~1.5km)</option>
+                        <option value="925">925 hPa (Boundary Layer - ~800m)</option>
+                        <option value="1000">1000 hPa (Surface Level)</option>
+                    </select>
+                    <div class="info-text">
+                        💡 <strong>Tip:</strong> 850 hPa is commonly used for atmospheric analysis (pre-selected)
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Time Selection -->
+            <div class="form-section" id="timeSection" style="display: none;">
+                <h3>⏰ Time Selection</h3>
+                <p>Multiple time steps available. Please select a time:</p>
+                
+                <div class="form-group">
+                    <label for="time_index">Available Times:</label>
+                    <select name="time_index" id="time_index">
+                        <option value="">-- Loading available times --</option>
+                    </select>
+                    <div class="info-text">
+                        💡 <strong>Tip:</strong> Latest time is usually pre-selected
+                    </div>
+                </div>
+            </div>
+            
+            <div class="form-section">
+                <h2>🎨 Color Theme</h2>
+                <div class="form-group">
+                    <label for="color_theme">Select Color Scheme:</label>
+                    <select name="color_theme" id="color_theme" onchange="updateColorPreview()">
+                        {% for theme_key, theme_name in color_themes.items() %}
+                            <option value="{{ theme_key }}" 
+                                    {% if theme_key == 'viridis' %}selected{% endif %}>
+                                {{ theme_name }}
+                            </option>
+                        {% endfor %}
+                    </select>
+                </div>
+                
+                <div class="color-preview-section">
+                    <p><strong>Preview:</strong> <span id="colorPreviewText">Viridis</span></p>
+                    <div class="color-gradient" id="colorPreview"></div>
+                </div>
+            </div>
+            
+            <div class="form-section">
+                <div class="form-group">
+                    <label style="display: block; margin-bottom: 10px; font-weight: 600;">
+                        Choose Plot Type:
+                    </label>
+                    <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+                        <button type="submit" formaction="{{ url_for('visualize') }}" class="btn">
+                            📊 Generate Static Plot (PNG)
+                        </button>
+                        <button type="submit" formaction="{{ url_for('visualize_interactive') }}" class="btn btn-interactive">
+                            🎯 Generate Interactive Plot (with hover info)
+                        </button>
+                    </div>
+                    <p style="margin-top: 10px; font-size: 14px; color: #7f8c8d;">
+                        <strong>Static:</strong> Fast PNG export for reports<br>
+                        <strong>Interactive:</strong> Hover over any point to see exact values
+                    </p>
+                </div>
+                
+                <div class="loading-message" id="loadingMessage" style="display: none;">
+                    <p>🔄 Generating map visualization... This may take a moment.</p>
+                    <div class="spinner"></div>
+                </div>
+            </div>
+        </form>
+    </div>
+    
+    <script>
+        function handleVariableChange() {
+            const select = document.getElementById('variable');
+            const selectedOption = select.options[select.selectedIndex];
+            
+            if (selectedOption.value) {
+                // Show variable info
+                const info = document.getElementById('variableInfo');
+                const details = document.getElementById('variableDetails');
+                
+                details.innerHTML = `
+                    <strong>Name:</strong> ${selectedOption.dataset.display}<br>
+                    <strong>Variable ID:</strong> ${selectedOption.value}<br>
+                    <strong>Type:</strong> ${selectedOption.dataset.type}<br>
+                    <strong>Units:</strong> ${selectedOption.dataset.units || 'dimensionless'}<br>
+                    <strong>Shape:</strong> ${selectedOption.dataset.shape}
+                `;
+                info.style.display = 'block';
+                
+                // Show/hide pressure level section
+                const pressureSection = document.getElementById('pressureSection');
+                if (selectedOption.dataset.type === 'atmospheric') {
+                    pressureSection.style.display = 'block';
+                    loadPressureLevels(selectedOption.value);
+                } else {
+                    pressureSection.style.display = 'none';
+                }
+                
+                // Always load available times
+                const timeSection = document.getElementById('timeSection');
+                timeSection.style.display = 'block';
+                loadAvailableTimes(selectedOption.value);
+                
+            } else {
+                document.getElementById('variableInfo').style.display = 'none';
+                document.getElementById('pressureSection').style.display = 'none';
+                document.getElementById('timeSection').style.display = 'none';
+            }
+        }
+        function loadPressureLevels(varName) {
+            const pressureSelect = document.getElementById('pressure_level');
+            const originalHTML = pressureSelect.innerHTML;
+            
+            pressureSelect.innerHTML = '<option value="">Loading pressure levels...</option>';
+            
+            const filename = "{{ filename }}";
+            const isDownload = {{ 'true' if is_download else 'false' }};
+            
+            fetch(`/get_pressure_levels/${filename}/${varName}?is_download=${isDownload}`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success && data.pressure_levels && data.pressure_levels.length > 0) {
+                        pressureSelect.innerHTML = '<option value="">-- Select pressure level --</option>';
+                        
+                        data.pressure_levels.forEach(level => {
+                            const option = document.createElement('option');
+                            option.value = level;
+                            option.textContent = `${level} hPa`;
+                            
+                            // Select 850 hPa as default
+                            if (level == 850) {
+                                option.selected = true;
+                            }
+                            
+                            pressureSelect.appendChild(option);
+                        });
+                    } else {
+                        console.log(data.error);
+                        // Fallback to original options if API fails
+                        pressureSelect.innerHTML = originalHTML;
+                    }
+                })
+                .catch(error => {
+                    console.log('Using default pressure levels');
+                    pressureSelect.innerHTML = originalHTML;
+                });
+        }
+        
+        function loadAvailableTimes(varName) {
+            const timeSelect = document.getElementById('time_index');
+            const originalHTML = timeSelect.innerHTML;
+            
+            timeSelect.innerHTML = '<option value="">Loading available times...</option>';
+            
+            const filename = "{{ filename }}";
+            const isDownload = {{ 'true' if is_download else 'false' }};
+            
+            fetch(`/get_available_times/${filename}/${varName}?is_download=${isDownload}`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success && data.times && data.times.length > 0) {
+                        timeSelect.innerHTML = '<option value="">-- Select time --</option>';
+                        
+                        data.times.forEach(time => {
+                            const option = document.createElement('option');
+                            option.value = time.index;
+                            option.textContent = time.display;
+                            
+                            // Select latest time as default (last index)
+                            if (time.index === data.times.length - 1) {
+                                option.selected = true;
+                            }
+                            
+                            timeSelect.appendChild(option);
+                        });
+                    } else {
+                        console.log(data.error);
+                        // Single time step or error
+                        timeSelect.innerHTML = '<option value="0" selected>Latest Available</option>';
+                    }
+                })
+                .catch(error => {
+                    console.log('Using default time selection');
+                    timeSelect.innerHTML = '<option value="0" selected>Latest Available</option>';
+                });
+        }
+        
+        // Color theme preview
+        const colorMaps = {
+            'viridis': 'linear-gradient(to right, #440154, #414487, #2a788e, #22a884, #7ad151, #fde725)',
+            'plasma': 'linear-gradient(to right, #0d0887, #6a00a8, #b12a90, #e16462, #fca636, #f0f921)',
+            'YlOrRd': 'linear-gradient(to right, #ffffcc, #ffeda0, #fed976, #feb24c, #fd8d3c, #e31a1c)',
+            'Blues': 'linear-gradient(to right, #f7fbff, #deebf7, #c6dbef, #9ecae1, #6baed6, #2171b5)',
+            'Reds': 'linear-gradient(to right, #fff5f0, #fee0d2, #fcbba1, #fc9272, #fb6a4a, #de2d26)',
+            'Greens': 'linear-gradient(to right, #f7fcf5, #e5f5e0, #c7e9c0, #a1d99b, #74c476, #238b45)',
+            'Oranges': 'linear-gradient(to right, #fff5eb, #fee6ce, #fdd0a2, #fdae6b, #fd8d3c, #d94701)',
+            'Purples': 'linear-gradient(to right, #fcfbfd, #efedf5, #dadaeb, #bcbddc, #9e9ac8, #756bb1)',
+            'inferno': 'linear-gradient(to right, #000004, #420a68, #932667, #dd513a, #fca50a, #fcffa4)',
+            'magma': 'linear-gradient(to right, #000004, #3b0f70, #8c2981, #de4968, #fe9f6d, #fcfdbf)',
+            'cividis': 'linear-gradient(to right, #00224e, #123570, #3b496c, #575d6d, #707173, #8a8678)',
+            'coolwarm': 'linear-gradient(to right, #3b4cc0, #688aef, #b7d4f1, #f7f7f7, #f4b2a6, #dc7176, #a50026)',
+            'RdYlBu': 'linear-gradient(to right, #a50026, #d73027, #f46d43, #fdae61, #fee090, #e0f3f8, #abd9e9, #74add1, #4575b4, #313695)',
+            'Spectral': 'linear-gradient(to right, #9e0142, #d53e4f, #f46d43, #fdae61, #fee08b, #e6f598, #abdda4, #66c2a5, #3288bd, #5e4fa2)'
+        };
+        
+        function updateColorPreview() {
+            const theme = document.getElementById('color_theme').value;
+            const preview = document.getElementById('colorPreview');
+            const previewText = document.getElementById('colorPreviewText');
+            
+            previewText.textContent = document.getElementById('color_theme').selectedOptions[0].text;
+            
+            if (colorMaps[theme]) {
+                preview.style.background = colorMaps[theme];
+            } else {
+                preview.style.background = colorMaps['viridis'];
+            }
+        }
+        
+        // Initialize color preview
+        updateColorPreview();
+        
+        // Form submission with loading state
+        document.getElementById('visualizeForm').addEventListener('submit', function(e) {
+            const selectedVar = document.getElementById('variable').value;
+            if (!selectedVar) {
+                alert('Please select a variable first!');
+                e.preventDefault();
+                return;
+            }
+            
+            // Check if atmospheric variable has pressure level selected
+            const varType = document.getElementById('variable').selectedOptions[0].dataset.type;
+            if (varType === 'atmospheric') {
+                const pressureLevel = document.getElementById('pressure_level').value;
+                if (!pressureLevel) {
+                    alert('Please select a pressure level for atmospheric variables!');
+                    e.preventDefault();
+                    return;
+                }
+            }
+
+            const timeIndex = document.getElementById('time_index').value;
+            if (!timeIndex) {
+                alert('Please select a time step!');
+                e.preventDefault();
+                return;
+            }
+            
+            // Show loading message
+            document.getElementById('loadingMessage').style.display = 'block';
+            document.getElementById('submitBtn').disabled = true;
+            document.getElementById('submitBtn').textContent = '⏳ Generating...';
+        });
+        
+        // Auto-select first variable if only one available
+        {% if variables|length == 1 %}
+        document.addEventListener('DOMContentLoaded', function() {
+            setTimeout(() => {
+                document.getElementById('variable').selectedIndex = 1;
+                handleVariableChange();
+            }, 100);
+        });
+        {% endif %}
+    </script>
+</body>
+</html>