Update app.py

app.py

@@ -48,55 +48,79 @@ with st.sidebar:
 
 # Main page
 st.title("Fire Watch: AI-Powered Fire and Smoke Detection")
+
+# Custom HTML for images with hover effect
 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)
+    fire_1_url = "https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/Fire_4.jpeg"
+    fire_3a_url = "https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/Fire_4a.jpg"
+    fire_1_bytes = requests.get(fire_1_url).content
+    fire_3a_bytes = requests.get(fire_3a_url).content
+    fire_1_b64 = base64.b64encode(fire_1_bytes).decode('utf-8')
+    fire_3a_b64 = base64.b64encode(fire_3a_bytes).decode('utf-8')
+    html1 = f"""
+    <div style="position: relative; width: 100%;">
+        <img src="data:image/jpeg;base64,{fire_1_b64}" style="width: 100%; height: auto;">
+        <img src="data:image/jpeg;base64,{fire_3a_b64}" 
+             style="position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: opacity 0.3s;"
+             onmouseover="this.style.opacity='1';" onmouseout="this.style.opacity='0';">
+    </div>
+    """
+    st.markdown(html1, unsafe_allow_html=True)
+
 with col2:
-    st.image("https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/Fire_3.png", use_column_width=True)
+    fire_3_url = "https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/Fire_3.png"
+    fire_4a_url = "https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/Fire_3a.jpg"
+    fire_3_bytes = requests.get(fire_3_url).content
+    fire_4a_bytes = requests.get(fire_4a_url).content
+    fire_3_b64 = base64.b64encode(fire_3_bytes).decode('utf-8')
+    fire_4a_b64 = base64.b64encode(fire_4a_bytes).decode('utf-8')
+    html2 = f"""
+    <div style="position: relative; width: 100%;">
+        <img src="data:image/png;base64,{fire_3_b64}" style="width: 100%; height: auto;">
+        <img src="data:image/jpeg;base64,{fire_4a_b64}" 
+             style="position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: opacity 0.3s;"
+             onmouseover="this.style.opacity='1';" onmouseout="this.style.opacity='0';">
+    </div>
+    """
+    st.markdown(html2, unsafe_allow_html=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!
+Early wildfire detection using YOLOv8 AI vision model. Hover over the images above to see detection results!
+See video examples below or upload your own to try it out!
 """)
 
-# Function to create synchronized video pair HTML with hover images
-def create_synced_video_pair(orig_url, proc_url, pair_id, hover_image_url):
+# Function to create synchronized video pair HTML (no hover changes here)
+def create_synced_video_pair(orig_url, proc_url, pair_id):
     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; position: relative;">
-            <div style="flex: 1; position: relative;">
+        <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; position: relative;">
+            <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>
-            <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 && hoverImg) {{
+                if (origVideo && procVideo) {{
                     origVideo.addEventListener('play', function() {{
                         procVideo.currentTime = origVideo.currentTime;
                         procVideo.play().catch(e => console.log('Play error:', e));
@@ -119,23 +143,15 @@ def create_synced_video_pair(orig_url, proc_url, pair_id, hover_image_url):
                     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('Elements not found for {pair_id}');
+                    console.log('Video elements not found for {pair_id}');
                 }}
             }});
         </script>
         """
         return html
     except Exception as e:
-        return f"<p>Error loading videos or hover image: {str(e)}</p>"
+        return f"<p>Error loading videos: {str(e)}</p>"
 
 if not source_file:
     st.info("Please upload a file to begin.")
@@ -144,19 +160,18 @@ st.header("Your Results")
 result_cols = st.columns(2)
 viewer_slot = st.empty()
 
-# Example videos with synchronization and hover images
+# Example videos with synchronization
 st.header("Example Results")
 examples = [
-    ("T Example", "T1.mp4", "T2.mp4", "File_3a.jpg"),
-    ("LA Example", "LA1.mp4", "LA2.mp4", "File_4a.jpg")
+    ("T Example", "T1.mp4", "T2.mp4"),
+    ("LA Example", "LA1.mp4", "LA2.mp4")
 ]
-for title, orig_file, proc_file, hover_file in examples:
+for title, orig_file, proc_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, hover_url)
+    video_html = create_synced_video_pair(orig_url, proc_url, pair_id)
     st.markdown(video_html, unsafe_allow_html=True)
 
 # Load model
@@ -254,7 +269,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_analysis.mp4",
+                file_name="results_fire_analysis.mp4",
                 mime="video/mp4"
             )