Update app.py

app.py

@@ -49,7 +49,7 @@ with st.sidebar:
 # Main page
 st.title("Fire Watch: AI-Powered Fire and Smoke Detection")
 
-# Custom HTML for images with hover effect
+# Custom HTML for images with hover effect using CSS
 col1, col2 = st.columns(2)
 with col1:
     fire_4_url = "https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/Fire_4.jpeg"
@@ -60,10 +60,14 @@ with col1:
     fire_4a_b64 = base64.b64encode(fire_4a_bytes).decode('utf-8')
     html1 = f"""
     <div style="position: relative; width: 100%;">
-        <img src="data:image/jpeg;base64,{fire_4_b64}" style="width: 100%; height: auto;">
+        <img src="data:image/jpeg;base64,{fire_4_b64}" style="width: 100%; height: auto; display: block;">
         <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';">
+             style="position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: opacity 0.3s;">
+        <style>
+            div:hover > img:nth-child(2) {{
+                opacity: 1;
+            }}
+        </style>
     </div>
     """
     st.markdown(html1, unsafe_allow_html=True)
@@ -77,10 +81,14 @@ with col2:
     fire_3a_b64 = base64.b64encode(fire_3a_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/png;base64,{fire_3_b64}" style="width: 100%; height: auto; display: block;">
         <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';">
+             style="position: absolute; top: 0; left: 0; width: 100%; height: auto; opacity: 0; transition: opacity 0.3s;">
+        <style>
+            div:hover > img:nth-child(2) {{
+                opacity: 1;
+            }}
+        </style>
     </div>
     """
     st.markdown(html2, unsafe_allow_html=True)
@@ -160,11 +168,11 @@ st.header("Your Results")
 result_cols = st.columns(2)
 viewer_slot = st.empty()
 
-# Example videos with synchronization
+# Example videos with synchronization (LA before T)
 st.header("Example Results")
 examples = [
-    ("T Example", "T1.mp4", "T2.mp4"),
-    ("LA Example", "LA1.mp4", "LA2.mp4")
+    ("LA Example", "LA1.mp4", "LA2.mp4"),
+    ("T Example", "T1.mp4", "T2.mp4")
 ]
 for title, orig_file, proc_file in examples:
     st.subheader(title)
@@ -269,7 +277,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="results_fire_analysis.mp4",
+                file_name="processed_wildfire.mp4",
                 mime="video/mp4"
             )