Update app.py

app.py

@@ -11,7 +11,7 @@ import imageio_ffmpeg as ffmpeg
 
 # Page config first
 st.set_page_config(
-    page_title="Fire Watch: AI model detection of fire and smoke",
+    page_title="WildfireWatch: AI Detection",
     page_icon="🔥",
     layout="wide",
     initial_sidebar_state="expanded"
@@ -29,7 +29,7 @@ for key in ["processed_frames", "slider_value", "processed_video", "start_time"]
 with st.sidebar:
     st.header("Upload & Settings")
     source_file = st.file_uploader("Upload image/video", type=["jpg", "jpeg", "png", "bmp", "webp", "mp4"])
-    confidence = float(st.slider("Confidence Threshold", 10, 100, 20)) / 100
+    confidence = float(st.slider("Confidence Threshold", 25, 100, 40)) / 100
     fps_options = {
         "Original FPS": None,
         "3 FPS": 3,
@@ -40,13 +40,13 @@ with st.sidebar:
         "1 frame/30s": 0.0333
     }
     video_option = st.selectbox("Output Frame Rate", list(fps_options.keys()))
-    process_button = st.button("Detect fire and smoke")
+    process_button = st.button("Detect Wildfire")
     progress_bar = st.progress(0)
     progress_text = st.empty()
     download_slot = st.empty()
 
 # Main page
-st.title("Fire Watch: AI-Powered Fire Detection")
+st.title("WildfireWatch: AI-Powered Detection")
 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)
@@ -57,18 +57,68 @@ st.markdown("""
 Early wildfire detection using YOLOv8 AI vision model. See examples below or upload your own content!
 """)
 
-# Example videos
+# Function to create synchronized video pair HTML
+def create_synced_video_pair(orig_data, proc_data, pair_id):
+    orig_b64 = requests.get(orig_data).content.encode('base64').decode()
+    proc_b64 = requests.get(proc_data).content.encode('base64').decode()
+    html = f"""
+    <div style="display: flex; justify-content: space-between;">
+        <div style="width: 48%;">
+            <h4>Original</h4>
+            <video id="orig_{pair_id}" width="100%" controls>
+                <source src="data:video/mp4;base64,{orig_b64}" type="video/mp4">
+            </video>
+        </div>
+        <div style="width: 48%;">
+            <h4>Processed</h4>
+            <video id="proc_{pair_id}" width="100%" controls>
+                <source src="data:video/mp4;base64,{proc_b64}" type="video/mp4">
+            </video>
+        </div>
+    </div>
+    <script>
+        const origVideo_{pair_id} = document.getElementById('orig_{pair_id}');
+        const procVideo_{pair_id} = document.getElementById('proc_{pair_id}');
+        
+        origVideo_{pair_id}.addEventListener('play', function() {{
+            procVideo_{pair_id}.currentTime = origVideo_{pair_id}.currentTime;
+            procVideo_{pair_id}.play();
+        }});
+        procVideo_{pair_id}.addEventListener('play', function() {{
+            origVideo_{pair_id}.currentTime = procVideo_{pair_id}.currentTime;
+            origVideo_{pair_id}.play();
+        }});
+        
+        origVideo_{pair_id}.addEventListener('pause', function() {{
+            procVideo_{pair_id}.pause();
+        }});
+        procVideo_{pair_id}.addEventListener('pause', function() {{
+            origVideo_{pair_id}.pause();
+        }});
+        
+        origVideo_{pair_id}.addEventListener('seeked', function() {{
+            procVideo_{pair_id}.currentTime = origVideo_{pair_id}.currentTime;
+        }});
+        procVideo_{pair_id}.addEventListener('seeked', function() {{
+            origVideo_{pair_id}.currentTime = procVideo_{pair_id}.currentTime;
+        }});
+    </script>
+    """
+    return html
+
+# Example videos with synchronization
 st.header("Example Results")
-for example in [("T1.mp4", "T2.mp4"), ("LA1.mp4", "LA2.mp4")]:
-    col1, col2 = st.columns(2)
-    orig_url = f"https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/{example[0]}"
-    proc_url = f"https://huggingface.co/spaces/tstone87/ccr-colorado/resolve/main/{example[1]}"
-    orig_data = requests.get(orig_url).content
-    proc_data = requests.get(proc_url).content
-    with col1:
-        st.video(orig_data)
-    with col2:
-        st.video(proc_data)
+examples = [
+    ("T Example", "T1.mp4", "T2.mpg"),
+    ("LA Example", "LA1.mp4", "LA2.mp4")
+]
+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}"
+    pair_id = title.replace(" ", "").lower()
+    video_html = create_synced_video_pair(orig_url, proc_url, pair_id)
+    st.markdown(video_html, unsafe_allow_html=True)
 
 st.header("Your Results")
 result_cols = st.columns(2)
@@ -115,7 +165,6 @@ if process_button and source_file and model:
             if frame_count % sample_interval == 0:
                 res = model.predict(frame, conf=confidence)
                 processed_frame = res[0].plot()[:, :, ::-1]
-                # Ensure frame is C-contiguous
                 if not processed_frame.flags['C_CONTIGUOUS']:
                     processed_frame = np.ascontiguousarray(processed_frame)
                 st.session_state.processed_frames.append(processed_frame)