Update app.py

app.py

@@ -50,45 +50,53 @@ 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_4.jpeg", use_column_width=True)
+    st.image("https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/Fire_1.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)
 
 st.markdown("""
 Early wildfire detection using YOLOv8 AI vision model. See examples below or upload your own content!
+Hover over example videos to see detection results!
 """)
 
-# Function to create synchronized video pair HTML
-def create_synced_video_pair(orig_url, proc_url, pair_id):
+# Function to create synchronized video pair HTML with hover images
+def create_synced_video_pair(orig_url, proc_url, pair_id, hover_image_url):
     try:
         orig_bytes = requests.get(orig_url).content
         proc_bytes = requests.get(proc_url).content
+        hover_bytes = requests.get(hover_image_url).content
         orig_b64 = base64.b64encode(orig_bytes).decode('utf-8')
         proc_b64 = base64.b64encode(proc_bytes).decode('utf-8')
+        hover_b64 = base64.b64encode(hover_bytes).decode('utf-8')
         
         html = f"""
-        <div style="display: flex; gap: 10px; margin-bottom: 20px;">
-            <div style="flex: 1;">
+        <div style="display: flex; gap: 10px; margin-bottom: 20px; position: relative;">
+            <div style="flex: 1; position: relative;">
                 <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;">
+            <div style="flex: 1; position: relative;">
                 <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>
+            <img id="hover_{pair_id}" src="data:image/jpeg;base64,{hover_b64}" 
+                 style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
+                        max-width: 80%; max-height: 80%; display: none; z-index: 10;">
         </div>
         <script>
             document.addEventListener('DOMContentLoaded', function() {{
                 const origVideo = document.getElementById('orig_{pair_id}');
                 const procVideo = document.getElementById('proc_{pair_id}');
+                const hoverImg = document.getElementById('hover_{pair_id}');
+                const container = origVideo.parentElement.parentElement;
                 
-                if (origVideo && procVideo) {{
+                if (origVideo && procVideo && hoverImg) {{
                     origVideo.addEventListener('play', function() {{
                         procVideo.currentTime = origVideo.currentTime;
                         procVideo.play().catch(e => console.log('Play error:', e));
@@ -111,15 +119,23 @@ def create_synced_video_pair(orig_url, proc_url, pair_id):
                     procVideo.addEventListener('seeked', function() {{
                         origVideo.currentTime = procVideo.currentTime;
                     }});
+
+                    // Hover events
+                    container.addEventListener('mouseover', function() {{
+                        hoverImg.style.display = 'block';
+                    }});
+                    container.addEventListener('mouseout', function() {{
+                        hoverImg.style.display = 'none';
+                    }});
                 }} else {{
-                    console.log('Video elements not found for {pair_id}');
+                    console.log('Elements not found for {pair_id}');
                 }}
             }});
         </script>
         """
         return html
     except Exception as e:
-        return f"<p>Error loading videos: {str(e)}</p>"
+        return f"<p>Error loading videos or hover image: {str(e)}</p>"
 
 if not source_file:
     st.info("Please upload a file to begin.")
@@ -128,18 +144,19 @@ st.header("Your Results")
 result_cols = st.columns(2)
 viewer_slot = st.empty()
 
-# Example videos with synchronization
+# Example videos with synchronization and hover images
 st.header("Example Results")
 examples = [
-    ("T Example", "T1.mp4", "T2.mp4"),
-    ("LA Example", "LA1.mp4", "LA2.mp4")
+    ("T Example", "T1.mp4", "T2.mp4", "File_3a.jpg"),
+    ("LA Example", "LA1.mp4", "LA2.mp4", "File_4a.jpg")
 ]
-for title, orig_file, proc_file in examples:
+for title, orig_file, proc_file, hover_file in examples:
     st.subheader(title)
     orig_url = f"https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/{orig_file}"
     proc_url = f"https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/{proc_file}"
+    hover_url = f"https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/{hover_file}"
     pair_id = title.replace(" ", "").lower()
-    video_html = create_synced_video_pair(orig_url, proc_url, pair_id)
+    video_html = create_synced_video_pair(orig_url, proc_url, pair_id, hover_url)
     st.markdown(video_html, unsafe_allow_html=True)
 
 # Load model
@@ -237,7 +254,7 @@ if process_button and source_file and model:
             download_slot.download_button(
                 label="Download Processed Video",
                 data=st.session_state.processed_video,
-                file_name="processed_fire_video.mp4",
+                file_name="processed_wildfire.mp4",
                 mime="video/mp4"
             )