Update app.py

app.py

@@ -49,53 +49,18 @@ with st.sidebar:
 # Main page
 st.title("Fire Watch: AI-Powered Fire and Smoke Detection")
 
-# Custom HTML for images with hover effect using CSS
+# Display result images directly
 col1, col2 = st.columns(2)
 with col1:
-    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_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;">
-        <style>
-            div:hover > img:nth-child(2) {{
-                opacity: 1;
-            }}
-        </style>
-    </div>
-    """
-    st.markdown(html1, unsafe_allow_html=True)
+    st.image(fire_4a_url, use_column_width=True)
 
 with col2:
-    fire_3_url = "https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/Fire_3.png"
     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_3a_bytes = requests.get(fire_3a_url).content
-    fire_3_b64 = base64.b64encode(fire_3_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; 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;">
-        <style>
-            div:hover > img:nth-child(2) {{
-                opacity: 1;
-            }}
-        </style>
-    </div>
-    """
-    st.markdown(html2, unsafe_allow_html=True)
+    st.image(fire_3a_url, use_column_width=True)
 
 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 content!
+Early wildfire detection using YOLOv8 AI vision model. See detected results above and video examples below, or upload your own content!
 """)
 
 # Function to create synchronized video pair HTML