Update app.py

app.py

@@ -16,6 +16,8 @@ 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')
@@ -294,7 +296,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
 
-# Path animation function using Gallery with image export
+# Custom animation function with HTML and JavaScript
 def categorize_typhoon_by_standard(wind_speed, standard):
     if standard == 'taiwan':
         wind_speed_ms = wind_speed * 0.514444
@@ -320,9 +322,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_gallery(year, typhoon, standard):
+def generate_track_animation(year, typhoon, standard):
     if not typhoon:
-        return []
+        return "<p>No typhoon selected.</p>"
 
     typhoon_id = typhoon.split('(')[-1].strip(')')
     storm = ibtracs.get_storm(typhoon_id)
@@ -333,15 +335,11 @@ def generate_track_gallery(year, typhoon, standard):
     lat_padding = max((max_lat - min_lat) * 0.3, 5)
     lon_padding = max((max_lon - min_lon) * 0.3, 5)
 
-    # Temporary directory for images
-    temp_dir = tempfile.mkdtemp()
-    gallery = []
-
-    # Generate a sequence of figures and save as images
+    # Generate frames as images and encode them in base64
+    frames = []
+    dates = []
     for i in range(len(storm.time)):
         fig = go.Figure()
-        
-        # Add the growing track up to the current point
         category, color = categorize_typhoon_by_standard(storm.vmax[i], standard)
         fig.add_trace(go.Scattergeo(
             lon=storm.lon[:i+1],
@@ -353,8 +351,6 @@ def generate_track_gallery(year, typhoon, standard):
             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"
         ))
-
-        # Add category legend
         standard_dict = atlantic_standard if standard == 'atlantic' else taiwan_standard
         for cat, details in standard_dict.items():
             fig.add_trace(go.Scattergeo(
@@ -363,10 +359,8 @@ def generate_track_gallery(year, typhoon, standard):
                 name=cat,
                 showlegend=True
             ))
-
-        # Update layout
         fig.update_layout(
-            title=f"{year} {storm.name} at {storm.time[i].strftime('%Y-%m-%d %H:%M')}",
+            title=f"{year} {storm.name}",
             geo=dict(
                 projection_type='natural earth',
                 showland=True,
@@ -389,13 +383,53 @@ def generate_track_gallery(year, typhoon, standard):
                 bgcolor="rgba(255, 255, 255, 0.8)"
             )
         )
-
-        # Save figure as image
-        image_path = os.path.join(temp_dir, f"frame_{i}_{uuid.uuid4()}.png")
-        fig.write_image(image_path, width=1000, height=700)
-        gallery.append(image_path)
-
-    return gallery
+        # 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
 
 # Logistic regression functions
 def perform_wind_regression(start_year, start_month, end_year, end_month):
@@ -444,7 +478,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**: View a gallery of typhoon path progression over time
+        - **Path Animation**: Watch an animated typhoon path with start/pause controls
         - **Regression Analysis**: Perform statistical regression on typhoon data
         
         Select a tab above to begin your analysis.
@@ -604,15 +638,16 @@ with gr.Blocks(title="Typhoon Analysis Dashboard") as demo:
             typhoon_dropdown = gr.Dropdown(label="Typhoon")
             standard_dropdown = gr.Dropdown(label="Classification Standard", choices=['atlantic', 'taiwan'], value='atlantic')
         
-        animate_btn = gr.Button("Generate Animation Gallery")
-        path_gallery = gr.Gallery(label="Typhoon Path Progression", elem_id="path_gallery", columns=1, height="auto")
+        animate_btn = gr.Button("Generate Animation")
+        path_animation = gr.HTML(label="Typhoon Path Animation")
         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 Gallery"
-        4. Scroll through the gallery to see the typhoon track growing over time
-        5. Each image represents a step in the typhoon's path, with the blue line extending and markers showing intensity
+        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
         """)
         
         def update_typhoon_options(year):
@@ -623,29 +658,9 @@ 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_gallery,
+            fn=generate_track_animation,
             inputs=[year_dropdown, typhoon_dropdown, standard_dropdown],
-            outputs=path_gallery
+            outputs=path_animation
         )
 
-    # Custom CSS for better spacing and visibility
-    gr.HTML("""
-    <style>
-    #tracks_plot {
-        height: 700px !important;
-        width: 100%;
-    }
-    #path_gallery .gallery-item {
-        height: 700px !important;
-        width: 100% !important;
-    }
-    .plot-container {
-        min-height: 600px;
-    }
-    .gr-plotly {
-        width: 100% !important;
-    }
-    </style>
-    """)
-
-demo.launch(share=True)  # Enable public link sharing
+demo.launch(share=True)