Update app.py

app.py

@@ -52,16 +52,16 @@ st.title("Fire Watch: AI-Powered Fire and Smoke Detection")
 # Custom HTML for images with hover effect
 col1, col2 = st.columns(2)
 with col1:
-    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')
+    fire_4_url = "https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/Fire_4.jpeg"
+    fire_4a_url = "https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/Fire_4a.jpg"
+    fire_4_bytes = requests.get(fire_4_url).content
+    fire_4a_bytes = requests.get(fire_4a_url).content
+    fire_4_b64 = base64.b64encode(fire_4_bytes).decode('utf-8')
+    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_1_b64}" style="width: 100%; height: auto;">
-        <img src="data:image/jpeg;base64,{fire_3a_b64}" 
+        <img src="data:image/jpeg;base64,{fire_4_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>
@@ -70,15 +70,15 @@ with col1:
 
 with col2:
     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_3a_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_3a_bytes = requests.get(fire_3a_url).content
     fire_3_b64 = base64.b64encode(fire_3_bytes).decode('utf-8')
-    fire_4a_b64 = base64.b64encode(fire_4a_bytes).decode('utf-8')
+    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/jpeg;base64,{fire_4a_b64}" 
+        <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>
@@ -87,10 +87,10 @@ with col2:
 
 st.markdown("""
 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!
+See video examples below or upload your own content!
 """)
 
-# Function to create synchronized video pair HTML (no hover changes here)
+# Function to create synchronized video pair HTML
 def create_synced_video_pair(orig_url, proc_url, pair_id):
     try:
         orig_bytes = requests.get(orig_url).content
@@ -163,8 +163,8 @@ viewer_slot = st.empty()
 # Example videos with synchronization
 st.header("Example Results")
 examples = [
-    ("LA Example", "LA1.mp4", "LA2.mp4")
     ("T Example", "T1.mp4", "T2.mp4"),
+    ("LA Example", "LA1.mp4", "LA2.mp4")
 ]
 for title, orig_file, proc_file in examples:
     st.subheader(title)
@@ -269,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="results_fire_analysis.mp4",
+               file_name="results_fire_analysis.mp4",
                 mime="video/mp4"
             )