Update app.py

app.py

@@ -50,7 +50,7 @@ with st.sidebar:
 st.title("Fire Watch: AI-Powered Fire and Smoke Detection")
 col1, col2 = st.columns(2)
 with col1:
-    st.image("https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/Fire_1.jpeg", use_column_width=True)
+    st.image("https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/Fire_4.jpeg", use_column_width=True)
 with col2:
     st.image("https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/Fire_3.png", use_column_width=True)
 
@@ -60,54 +60,69 @@ Early wildfire detection using YOLOv8 AI vision model. See examples below or upl
 
 # Function to create synchronized video pair HTML
 def create_synced_video_pair(orig_url, proc_url, pair_id):
-    orig_bytes = requests.get(orig_url).content
-    proc_bytes = requests.get(proc_url).content
-    orig_b64 = base64.b64encode(orig_bytes).decode('utf-8')
-    proc_b64 = base64.b64encode(proc_bytes).decode('utf-8')
-    html = f"""
-    <div style="display: flex; justify-content: space-between;">
-        <div style="width: 48%;">
-            <h4>Original</h4>
-            <video id="orig_{pair_id}" width="100%" controls>
-                <source src="data:video/mp4;base64,{orig_b64}" type="video/mp4">
-            </video>
-        </div>
-        <div style="width: 48%;">
-            <h4>Processed</h4>
-            <video id="proc_{pair_id}" width="100%" controls>
-                <source src="data:video/mp4;base64,{proc_b64}" type="video/mp4">
-            </video>
-        </div>
-    </div>
-    <script>
-        const origVideo_{pair_id} = document.getElementById('orig_{pair_id}');
-        const procVideo_{pair_id} = document.getElementById('proc_{pair_id}');
-        
-        origVideo_{pair_id}.addEventListener('play', function() {{
-            procVideo_{pair_id}.currentTime = origVideo_{pair_id}.currentTime;
-            procVideo_{pair_id}.play();
-        }});
-        procVideo_{pair_id}.addEventListener('play', function() {{
-            origVideo_{pair_id}.currentTime = procVideo_{pair_id}.currentTime;
-            origVideo_{pair_id}.play();
-        }});
+    try:
+        orig_bytes = requests.get(orig_url).content
+        proc_bytes = requests.get(proc_url).content
+        orig_b64 = base64.b64encode(orig_bytes).decode('utf-8')
+        proc_b64 = base64.b64encode(proc_bytes).decode('utf-8')
         
-        origVideo_{pair_id}.addEventListener('pause', function() {{
-            procVideo_{pair_id}.pause();
-        }});
-        procVideo_{pair_id}.addEventListener('pause', function() {{
-            origVideo_{pair_id}.pause();
-        }});
-        
-        origVideo_{pair_id}.addEventListener('seeked', function() {{
-            procVideo_{pair_id}.currentTime = origVideo_{pair_id}.currentTime;
-        }});
-        procVideo_{pair_id}.addEventListener('seeked', function() {{
-            origVideo_{pair_id}.currentTime = procVideo_{pair_id}.currentTime;
-        }});
-    </script>
-    """
-    return html
+        html = f"""
+        <div style="display: flex; gap: 10px; margin-bottom: 20px;">
+            <div style="flex: 1;">
+                <h4>Original</h4>
+                <video id="orig_{pair_id}" width="100%" controls preload="metadata">
+                    <source src="data:video/mp4;base64,{orig_b64}" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+            <div style="flex: 1;">
+                <h4>Processed</h4>
+                <video id="proc_{pair_id}" width="100%" controls preload="metadata">
+                    <source src="data:video/mp4;base64,{proc_b64}" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+        </div>
+        <script>
+            document.addEventListener('DOMContentLoaded', function() {{
+                const origVideo = document.getElementById('orig_{pair_id}');
+                const procVideo = document.getElementById('proc_{pair_id}');
+                
+                if (origVideo && procVideo) {{
+                    origVideo.addEventListener('play', function() {{
+                        procVideo.currentTime = origVideo.currentTime;
+                        procVideo.play().catch(e => console.log('Play error:', e));
+                    }});
+                    procVideo.addEventListener('play', function() {{
+                        origVideo.currentTime = procVideo.currentTime;
+                        origVideo.play().catch(e => console.log('Play error:', e));
+                    }});
+                    
+                    origVideo.addEventListener('pause', function() {{
+                        procVideo.pause();
+                    }});
+                    procVideo.addEventListener('pause', function() {{
+                        origVideo.pause();
+                    }});
+                    
+                    origVideo.addEventListener('seeked', function() {{
+                        procVideo.currentTime = origVideo.currentTime;
+                    }});
+                    procVideo.addEventListener('seeked', function() {{
+                        origVideo.currentTime = procVideo.currentTime;
+                    }});
+                }} else {{
+                    console.log('Video elements not found for {pair_id}');
+                }}
+            }});
+        </script>
+        """
+        return html
+    except Exception as e:
+        return f"<p>Error loading videos: {str(e)}</p>"
+
+if not source_file:
+    st.info("Please upload a file to begin.")
 
 st.header("Your Results")
 result_cols = st.columns(2)
@@ -127,8 +142,6 @@ for title, orig_file, proc_file in examples:
     video_html = create_synced_video_pair(orig_url, proc_url, pair_id)
     st.markdown(video_html, unsafe_allow_html=True)
 
-
-
 # Load model
 try:
     model = YOLO(model_path)