Update app.py

app.py

@@ -6,7 +6,7 @@ import io
 import time
 import os
 import tempfile
-import base64
+import json
 
 # Montana cities with coordinates
 MONTANA_CITIES = {
@@ -88,6 +88,10 @@ def process_radar_images_for_html(city):
                 timestamps.append(f"{time_text} (-{minutes_ago} min)")
         
         if image_urls:
+            # Convert Python lists to JSON strings for JS
+            json_urls = json.dumps(image_urls)
+            json_timestamps = json.dumps(timestamps)
+            
             # Create HTML for browser-based animation
             html = f"""
             <div style="text-align: center; max-width: 100%;">
@@ -108,7 +112,7 @@ def process_radar_images_for_html(city):
             </div>
             
             <script>
-                (function() {
+                (function() {{
                     // Store all frame URLs and timestamps
                     const frames = {json_urls};
                     const timestamps = {json_timestamps};
@@ -126,44 +130,44 @@ def process_radar_images_for_html(city):
                     const prevBtn = document.getElementById('prevBtn');
                     
                     // Function to update the displayed frame
-                    function updateFrame() {
+                    function updateFrame() {{
                         imgElement.src = frames[currentIndex];
                         timestampElement.innerText = timestamps[currentIndex];
                         frameCounter.innerText = currentIndex + 1;
-                    }
+                    }}
                     
                     // Function to play animation
-                    function playAnimation() {
-                        if (!isPlaying) {
+                    function playAnimation() {{
+                        if (!isPlaying) {{
                             isPlaying = true;
-                            animationInterval = setInterval(() => {
+                            animationInterval = setInterval(() => {{
                                 currentIndex = (currentIndex + 1) % frames.length;
                                 updateFrame();
-                            }, 700); // ~700ms delay between frames
-                        }
-                    }
+                            }}, 700); // ~700ms delay between frames
+                        }}
+                    }}
                     
                     // Function to pause animation
-                    function pauseAnimation() {
-                        if (isPlaying) {
+                    function pauseAnimation() {{
+                        if (isPlaying) {{
                             isPlaying = false;
                             clearInterval(animationInterval);
-                        }
-                    }
+                        }}
+                    }}
                     
                     // Function to show next frame
-                    function nextFrame() {
+                    function nextFrame() {{
                         pauseAnimation();
                         currentIndex = (currentIndex + 1) % frames.length;
                         updateFrame();
-                    }
+                    }}
                     
                     // Function to show previous frame
-                    function prevFrame() {
+                    function prevFrame() {{
                         pauseAnimation();
                         currentIndex = (currentIndex - 1 + frames.length) % frames.length;
                         updateFrame();
-                    }
+                    }}
                     
                     // Set up button event listeners
                     playBtn.addEventListener('click', playAnimation);
@@ -173,9 +177,9 @@ def process_radar_images_for_html(city):
                     
                     // Start animation automatically
                     playAnimation();
-                })();
+                }})();
             </script>
-            """.replace("{json_urls}", str(image_urls)).replace("{json_timestamps}", str(timestamps))
+            """
             
             return html
         else: