Update app.py

app.py

@@ -1,6 +1,9 @@
 import gradio as gr
 import pandas as pd
 import numpy as np
+import matplotlib.pyplot as plt
+import matplotlib.animation as animation
+from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
 import plotly.graph_objects as go
 import plotly.express as px
 import tropycal.tracks as tracks
@@ -15,9 +18,6 @@ import tempfile
 import csv
 from collections import defaultdict
 import filecmp
-import uuid
-import base64
-from io import BytesIO
 
 # Command-line argument parsing
 parser = argparse.ArgumentParser(description='Typhoon Analysis Dashboard')
@@ -32,7 +32,7 @@ iBtrace_uri = 'https://www.ncei.noaa.gov/data/international-best-track-archive-f
 CACHE_FILE = 'ibtracs_cache.pkl'
 CACHE_EXPIRY_DAYS = 1
 
-# Color map for typhoon categories
+# Color maps for Plotly (RGB)
 color_map = {
     'C5 Super Typhoon': 'rgb(255, 0, 0)',
     'C4 Very Strong Typhoon': 'rgb(255, 63, 0)',
@@ -43,22 +43,22 @@ color_map = {
     'Tropical Depression': 'rgb(173, 216, 230)'
 }
 
-# Classification standards
+# Classification standards for both Plotly and Matplotlib (HEX for Matplotlib)
 atlantic_standard = {
-    'C5 Super Typhoon': {'wind_speed': 137, 'color': 'rgb(255, 0, 0)'},
-    'C4 Very Strong Typhoon': {'wind_speed': 113, 'color': 'rgb(255, 63, 0)'},
-    'C3 Strong Typhoon': {'wind_speed': 96, 'color': 'rgb(255, 127, 0)'},
-    'C2 Typhoon': {'wind_speed': 83, 'color': 'rgb(255, 191, 0)'},
-    'C1 Typhoon': {'wind_speed': 64, 'color': 'rgb(255, 255, 0)'},
-    'Tropical Storm': {'wind_speed': 34, 'color': 'rgb(0, 255, 255)'},
-    'Tropical Depression': {'wind_speed': 0, 'color': 'rgb(173, 216, 230)'}
+    'C5 Super Typhoon': {'wind_speed': 137, 'color': '#FF0000'},
+    'C4 Very Strong Typhoon': {'wind_speed': 113, 'color': '#FF3F00'},
+    'C3 Strong Typhoon': {'wind_speed': 96, 'color': '#FF7F00'},
+    'C2 Typhoon': {'wind_speed': 83, 'color': '#FFBF00'},
+    'C1 Typhoon': {'wind_speed': 64, 'color': '#FFFF00'},
+    'Tropical Storm': {'wind_speed': 34, 'color': '#00FFFF'},
+    'Tropical Depression': {'wind_speed': 0, 'color': '#ADD8E6'}
 }
 
 taiwan_standard = {
-    'Strong Typhoon': {'wind_speed': 51.0, 'color': 'rgb(255, 0, 0)'},
-    'Medium Typhoon': {'wind_speed': 33.7, 'color': 'rgb(255, 127, 0)'},
-    'Mild Typhoon': {'wind_speed': 17.2, 'color': 'rgb(255, 255, 0)'},
-    'Tropical Depression': {'wind_speed': 0, 'color': 'rgb(173, 216, 230)'}
+    'Strong Typhoon': {'wind_speed': 51.0, 'color': '#FF0000'},
+    'Medium Typhoon': {'wind_speed': 33.7, 'color': '#FF7F00'},
+    'Mild Typhoon': {'wind_speed': 17.2, 'color': '#FFFF00'},
+    'Tropical Depression': {'wind_speed': 0, 'color': '#ADD8E6'}
 }
 
 # Data loading and preprocessing functions
@@ -212,7 +212,7 @@ oni_long = process_oni_data(oni_data)
 typhoon_max = process_typhoon_data(typhoon_data)
 merged_data = merge_data(oni_long, typhoon_max)
 
-# Main analysis functions
+# Main analysis functions (using Plotly)
 def generate_typhoon_tracks(filtered_data, typhoon_search):
     fig = go.Figure()
     for sid in filtered_data['SID'].unique():
@@ -230,7 +230,11 @@ def generate_typhoon_tracks(filtered_data, typhoon_search):
                 lon=storm_data['LON'], lat=storm_data['LAT'], mode='lines',
                 name=f'Matched: {typhoon_search}', line=dict(width=5, color='yellow')
             ))
-    fig.update_layout(title='Typhoon Tracks', geo=dict(projection_type='natural earth', showland=True))
+    fig.update_layout(
+        title='Typhoon Tracks',
+        geo=dict(projection_type='natural earth', showland=True),
+        height=700
+    )
     return fig
 
 def generate_wind_oni_scatter(filtered_data, typhoon_search):
@@ -296,7 +300,7 @@ def generate_main_analysis(start_year, start_month, end_year, end_month, enso_ph
     
     return tracks_fig, wind_scatter, pressure_scatter, regression_fig, slopes_text
 
-# Custom animation function with HTML and JavaScript
+# Video animation function (using Matplotlib)
 def categorize_typhoon_by_standard(wind_speed, standard):
     if standard == 'taiwan':
         wind_speed_ms = wind_speed * 0.514444
@@ -322,9 +326,9 @@ def categorize_typhoon_by_standard(wind_speed, standard):
             return 'Tropical Storm', atlantic_standard['Tropical Storm']['color']
         return 'Tropical Depression', atlantic_standard['Tropical Depression']['color']
 
-def generate_track_animation(year, typhoon, standard):
+def generate_track_video(year, typhoon, standard):
     if not typhoon:
-        return "<p>No typhoon selected.</p>"
+        return None
 
     typhoon_id = typhoon.split('(')[-1].strip(')')
     storm = ibtracs.get_storm(typhoon_id)
@@ -335,101 +339,54 @@ def generate_track_animation(year, typhoon, standard):
     lat_padding = max((max_lat - min_lat) * 0.3, 5)
     lon_padding = max((max_lon - min_lon) * 0.3, 5)
 
-    # Generate frames as images and encode them in base64
-    frames = []
-    dates = []
-    for i in range(len(storm.time)):
-        fig = go.Figure()
-        category, color = categorize_typhoon_by_standard(storm.vmax[i], standard)
-        fig.add_trace(go.Scattergeo(
-            lon=storm.lon[:i+1],
-            lat=storm.lat[:i+1],
-            mode='lines+markers',
-            line=dict(width=2, color='blue'),
-            marker=dict(size=8, color=color),
-            name=f"{storm.name}",
-            text=[f"Time: {storm.time[j].strftime('%Y-%m-%d %H:%M')}<br>Wind: {storm.vmax[j]:.1f} kt<br>Category: {categorize_typhoon_by_standard(storm.vmax[j], standard)[0]}" for j in range(i+1)],
-            hoverinfo="text"
-        ))
-        standard_dict = atlantic_standard if standard == 'atlantic' else taiwan_standard
-        for cat, details in standard_dict.items():
-            fig.add_trace(go.Scattergeo(
-                lon=[None], lat=[None], mode='markers',
-                marker=dict(size=10, color=details['color']),
-                name=cat,
-                showlegend=True
-            ))
-        fig.update_layout(
-            title=f"{year} {storm.name}",
-            geo=dict(
-                projection_type='natural earth',
-                showland=True,
-                showcoastlines=True,
-                landcolor='rgb(243, 243, 243)',
-                countrycolor='rgb(204, 204, 204)',
-                coastlinecolor='rgb(204, 204, 204)',
-                showocean=True,
-                oceancolor='rgb(230, 230, 255)',
-                lataxis={'range': [min_lat - lat_padding, max_lat + lat_padding]},
-                lonaxis={'range': [min_lon - lon_padding, max_lon + lon_padding]}
-            ),
-            height=700,
-            showlegend=True,
-            legend=dict(
-                yanchor="top",
-                y=0.99,
-                xanchor="left",
-                x=0.01,
-                bgcolor="rgba(255, 255, 255, 0.8)"
-            )
-        )
-        # Convert figure to PNG and encode in base64
-        img_bytes = fig.to_image(format="png", width=1000, height=700)
-        img_base64 = base64.b64encode(img_bytes).decode('utf-8')
-        frames.append(f"data:image/png;base64,{img_base64}")
-        dates.append(storm.time[i].strftime('%Y-%m-%d %H:%M'))
-
-    # JavaScript to handle animation
-    js_script = """
-    <div style="text-align: center;">
-        <img id="animationFrame" style="max-width: 100%; height: 700px;" src="{frames[0]}">
-        <p id="dateDisplay" style="font-size: 18px; margin: 10px;">{dates[0]}</p>
-        <button id="startBtn" style="margin: 5px;">Start</button>
-        <button id="pauseBtn" style="margin: 5px;">Pause</button>
-    </div>
-    <script>
-        const frames = {frames_json};
-        const dates = {dates_json};
-        let currentFrame = 0;
-        let intervalId = null;
-        
-        function updateFrame() {{
-            document.getElementById('animationFrame').src = frames[currentFrame];
-            document.getElementById('dateDisplay').textContent = dates[currentFrame];
-            currentFrame = (currentFrame + 1) % frames.length;
-        }}
-        
-        document.getElementById('startBtn').addEventListener('click', function() {{
-            if (!intervalId) {{
-                intervalId = setInterval(updateFrame, 200);  // 200ms per frame
-            }}
-        }});
-        
-        document.getElementById('pauseBtn').addEventListener('click', function() {{
-            if (intervalId) {{
-                clearInterval(intervalId);
-                intervalId = null;
-            }}
-        }});
-    </script>
-    """.format(
-        frames_json=str(frames).replace("'", '"'),  # JSON-safe string
-        dates_json=str(dates).replace("'", '"'),
-        frames=frames[0],  # Initial frame
-        dates=dates[0]     # Initial date
-    )
-
-    return js_script
+    # Set up the figure
+    fig, ax = plt.subplots(figsize=(10, 7))
+    ax.set_xlim(min_lon - lon_padding, max_lon + lon_padding)
+    ax.set_ylim(min_lat - lat_padding, max_lat + lat_padding)
+    ax.set_xlabel('Longitude')
+    ax.set_ylabel('Latitude')
+    ax.set_title(f"{year} {storm.name} Typhoon Path")
+    ax.grid(True)
+
+    # Plot background (simple map-like grid)
+    ax.plot([], [], 'b-', label='Track')  # Placeholder for legend
+
+    # Legend for categories
+    standard_dict = atlantic_standard if standard == 'atlantic' else taiwan_standard
+    for cat, details in standard_dict.items():
+        ax.plot([], [], 'o', color=details['color'], label=cat)
+    ax.legend(loc='upper left', bbox_to_anchor=(1, 1))
+
+    # Initialize the line and point
+    line, = ax.plot([], [], 'b-', linewidth=2)
+    point, = ax.plot([], [], 'o', markersize=8)
+    date_text = ax.text(0.02, 0.02, '', transform=ax.transAxes, fontsize=12)
+
+    def init():
+        line.set_data([], [])
+        point.set_data([], [])
+        date_text.set_text('')
+        return line, point, date_text
+
+    def update(frame):
+        line.set_data(storm.lon[:frame+1], storm.lat[:frame+1])
+        category, color = categorize_typhoon_by_standard(storm.vmax[frame], standard)
+        point.set_data([storm.lon[frame]], [storm.lat[frame]])
+        point.set_color(color)
+        date_text.set_text(storm.time[frame].strftime('%Y-%m-%d %H:%M'))
+        return line, point, date_text
+
+    # Create animation
+    ani = animation.FuncAnimation(fig, update, init_func=init, frames=len(storm.time),
+                                  interval=200, blit=True, repeat=True)
+
+    # Save as video
+    temp_file = tempfile.NamedTemporaryFile(delete=False, suffix='.mp4')
+    writer = animation.FFMpegWriter(fps=5, bitrate=1800)
+    ani.save(temp_file.name, writer=writer)
+    plt.close(fig)
+
+    return temp_file.name
 
 # Logistic regression functions
 def perform_wind_regression(start_year, start_month, end_year, end_month):
@@ -478,7 +435,7 @@ with gr.Blocks(title="Typhoon Analysis Dashboard") as demo:
         ### Features:
         - **Track Visualization**: View typhoon tracks by time period and ENSO phase
         - **Statistical Analysis**: Examine relationships between ONI values and typhoon characteristics
-        - **Path Animation**: Watch an animated typhoon path with start/pause controls
+        - **Path Animation**: Watch an animated typhoon path with video controls
         - **Regression Analysis**: Perform statistical regression on typhoon data
         
         Select a tab above to begin your analysis.
@@ -639,15 +596,14 @@ with gr.Blocks(title="Typhoon Analysis Dashboard") as demo:
             standard_dropdown = gr.Dropdown(label="Classification Standard", choices=['atlantic', 'taiwan'], value='atlantic')
         
         animate_btn = gr.Button("Generate Animation")
-        path_animation = gr.HTML(label="Typhoon Path Animation")
+        path_video = gr.Video(label="Typhoon Path Animation", elem_id="path_video")
         animation_info = gr.Markdown("""
         ### Animation Instructions
         1. Select a year and typhoon from the dropdowns
         2. Choose a classification standard (Atlantic or Taiwan)
         3. Click "Generate Animation"
-        4. Use the "Start" button to begin the animation and "Pause" to stop it
-        5. The date below the image updates with each frame
-        6. The blue line grows to show the typhoon's path, with markers indicating intensity
+        4. Use the video player's built-in controls to play, pause, or scrub through the animation
+        5. The date is displayed on each frame, and the track grows with intensity markers
         """)
         
         def update_typhoon_options(year):
@@ -658,9 +614,25 @@ with gr.Blocks(title="Typhoon Analysis Dashboard") as demo:
         
         year_dropdown.change(fn=update_typhoon_options, inputs=year_dropdown, outputs=typhoon_dropdown)
         animate_btn.click(
-            fn=generate_track_animation,
+            fn=generate_track_video,
             inputs=[year_dropdown, typhoon_dropdown, standard_dropdown],
-            outputs=path_animation
+            outputs=path_video
         )
 
+    # Custom CSS for better visibility
+    gr.HTML("""
+    <style>
+    #tracks_plot, #path_video {
+        height: 700px !important;
+        width: 100%;
+    }
+    .plot-container {
+        min-height: 600px;
+    }
+    .gr-plotly {
+        width: 100% !important;
+    }
+    </style>
+    """)
+
 demo.launch(share=True)