Update app.py - custom webcam component, no WebRTC

app.py

@@ -36,12 +36,22 @@ try:
 except ImportError:
     HAS_PIL = False
 
-try:
-    from streamlit_webrtc import webrtc_streamer, WebRtcMode
-    import av
-    HAS_WEBRTC = True
-except ImportError:
-    HAS_WEBRTC = False
+import base64
+import streamlit.components.v1 as components_lib
+import os as _os
+
+# Custom webcam component (no WebRTC needed)
+_WEBCAM_DIR = _os.path.join(_os.path.dirname(_os.path.abspath(__file__)), "webcam_component")
+_webcam_component_func = None
+if _os.path.isdir(_WEBCAM_DIR):
+    _webcam_component_func = components_lib.declare_component("webcam_capture", path=_WEBCAM_DIR)
+
+def webcam_capture(key="webcam"):
+    """Custom webcam component — captures video frames + audio, sends to Python."""
+    if _webcam_component_func is None:
+        st.error("Webcam component not found.")
+        return None
+    return _webcam_component_func(key=key, default=None)
 
 from models import EmotionLabel, EMOTION_LABELS, CulturalRegion, EMOTION_EMOJI
 from face_detector import FaceEmotionDetector
@@ -657,10 +667,7 @@ def show_demo():
         return
 
     # ── Primary: Live Streaming ──────────────────────────────────────
-    if HAS_WEBRTC:
-        _show_live_session(processor, remaining, start)
-    else:
-        st.warning("Live streaming requires streamlit-webrtc. Use video upload below.")
+    _show_live_session(processor, remaining, start)
 
     # ── Secondary: Video Upload ──────────────────────────────────────
     st.divider()
@@ -696,97 +703,54 @@ def show_demo():
 
 
 def _show_live_session(processor, remaining, start):
-    """Live session using streamlit-webrtc. Only ONE Start button (WebRTC's built-in)."""
+    """Live session using custom webcam component (no WebRTC needed)."""
 
-    # ── Stop button + timer (above the stream) ──────────────────────
-    col_stop, col_timer, col_report = st.columns([1, 1, 1])
-
-    with col_stop:
-        if processor.is_active:
-            if st.button("⏹ Stop Session", type="primary", use_container_width=True):
-                processor.stop_session()
-                st.session_state.show_report = True
-                st.rerun()
+    # Video + Results side by side
+    col_video, col_results = st.columns([1.3, 1])
 
-    with col_timer:
-        if processor.is_active:
-            elapsed = processor.elapsed_seconds
-            session_remaining = max(0, 60 - elapsed)
-            st.markdown(
-                '<div style="text-align: center; padding: 8px;">'
-                '<span style="color: #FF4444; font-size: 14px; font-weight: 700;">● LIVE</span>'
-                '<span style="color: #00D4FF; margin-left: 12px; font-weight: 700; font-size: 16px;">'
-                '{:.0f}s remaining</span>'
-                '</div>'.format(session_remaining),
-                unsafe_allow_html=True,
-            )
-        else:
-            st.markdown(
-                '<div style="text-align: center; padding: 8px; color: #6B7B9D;">'
-                'Click <strong>START</strong> on the video to begin'
-                '</div>',
-                unsafe_allow_html=True,
-            )
-
-    with col_report:
-        if processor.is_active:
-            if st.button("📊 View Report", use_container_width=True):
-                processor.stop_session()
+    with col_video:
+        # Custom webcam component with built-in START/STOP + timer
+        component_value = webcam_capture(key="webcam_live")
+
+        # Handle component messages
+        if component_value and isinstance(component_value, dict):
+            msg_type = component_value.get("type")
+
+            if msg_type == "started":
+                if not processor.is_active:
+                    processor.start_session()
+
+            elif msg_type == "frame":
+                if not processor.is_active:
+                    processor.start_session()
+                # Decode base64 JPEG and process
+                data_url = component_value.get("data", "")
+                if "," in data_url:
+                    try:
+                        img_b64 = data_url.split(",", 1)[1]
+                        img_bytes = base64.b64decode(img_b64)
+                        processor.process_image(img_bytes)
+                    except Exception as e:
+                        print(f"[App] Frame decode error: {e}")
+
+            elif msg_type == "audio":
+                data_url = component_value.get("data", "")
+                if "," in data_url:
+                    try:
+                        audio_b64 = data_url.split(",", 1)[1]
+                        audio_bytes = base64.b64decode(audio_b64)
+                        processor.process_audio_bytes(audio_bytes)
+                    except Exception as e:
+                        print(f"[App] Audio decode error: {e}")
+
+            elif msg_type == "stopped":
+                if processor.is_active:
+                    processor.stop_session()
                 st.session_state.show_report = True
                 st.rerun()
 
-    # ── WebRTC Stream + Results side by side ─────────────────────────
-    col_video, col_results = st.columns([1, 1])
-
-    with col_video:
-        # The WebRTC component provides its own START/STOP button
-        webrtc_ctx = webrtc_streamer(
-            key="emosphere-live",
-            mode=WebRtcMode.SENDRECV,
-            video_frame_callback=processor.video_frame_callback,
-            audio_frame_callback=processor.audio_frame_callback,
-            media_stream_constraints={
-                "video": {"width": {"ideal": 640}, "height": {"ideal": 480}},
-                "audio": True,
-            },
-            rtc_configuration={
-                "iceServers": [
-                    {"urls": ["stun:stun.l.google.com:19302"]},
-                    {"urls": ["stun:stun1.l.google.com:19302"]},
-                    {"urls": ["stun:stun2.l.google.com:19302"]},
-                    {"urls": ["stun:stun3.l.google.com:19302"]},
-                    {"urls": ["stun:stun4.l.google.com:19302"]},
-                    {
-                        "urls": [
-                            "turn:openrelay.metered.ca:80",
-                            "turn:openrelay.metered.ca:80?transport=tcp",
-                            "turn:openrelay.metered.ca:443",
-                            "turns:openrelay.metered.ca:443",
-                        ],
-                        "username": "openrelayproject",
-                        "credential": "openrelayproject",
-                    },
-                ]
-            },
-            async_processing=True,
-        )
-
-        # Auto-start processing when WebRTC connects
-        if webrtc_ctx.state.playing and not processor.is_active:
-            processor.start_session()
-            st.rerun()
-
-        # Auto-stop when WebRTC disconnects
-        if not webrtc_ctx.state.playing and processor.is_active:
-            processor.stop_session()
-            st.session_state.show_report = True
-            st.rerun()
-
-        # Auto-stop after 60 seconds of session
-        if processor.is_active and processor.elapsed_seconds >= 60:
-            processor.stop_session()
-            st.session_state.show_report = True
-            st.rerun()
+            elif msg_type == "error":
+                st.error("Camera/mic error: " + component_value.get("message", "unknown"))
 
     with col_results:
         if processor.is_active:
@@ -794,29 +758,25 @@ def _show_live_session(processor, remaining, start):
         else:
             st.markdown(
                 '<div class="glass-card" style="text-align: center; padding: 40px;">'
-                '<span style="font-size: 48px;">🎬</span>'
+                '<span style="font-size: 48px;">&#127909;</span>'
                 '<h3 style="margin: 12px 0 8px; color: #B0BCD0 !important;">Ready to Stream</h3>'
                 '<p style="color: #6B7B9D; margin: 0; font-size: 13px;">'
-                'Click the <strong>START</strong> button on the left to begin '
-                'your 60-second live emotion analysis session.</p>'
+                'Click <strong>START SESSION</strong> on the left to begin '
+                'your 60-second live emotion analysis.</p>'
                 '<div style="margin-top: 16px; padding: 12px; background: rgba(0,212,255,0.06); '
                 'border-radius: 8px; border: 1px solid rgba(0,212,255,0.15);">'
                 '<p style="color: #00D4FF; font-size: 12px; margin: 0;">'
-                '🧑 Face &bull; 🎙 Voice &bull; 💬 Speech &bull; 🧍 Posture<br/>'
+                '&#129489; Face &#8226; &#127897; Voice &#8226; &#128172; Speech &#8226; &#129485; Posture<br/>'
                 'All fused with fuzzy logic in real-time.</p>'
                 '</div>'
                 '</div>',
                 unsafe_allow_html=True,
             )
 
-    # Refresh while active to update results
-    if processor.is_active:
-        _schedule_rerun_fast()
-
 
-@st.fragment(run_every=1.5)
+@st.fragment(run_every=2.0)
 def _render_live_results(processor):
-    """Auto-updating display of live emotion results."""
+    """Auto-updating display of live emotion results. Refreshes every 2s."""
     fused = processor.get_latest_fused()
     face = processor.get_latest_face()
     voice = processor.get_latest_voice()
@@ -829,7 +789,7 @@ def _render_live_results(processor):
     if fused is None:
         st.markdown(
             '<div class="glass-card" style="text-align: center; padding: 20px;">'
-            '<span style="font-size: 36px;">🔮</span>'
+            '<span style="font-size: 36px;">&#128302;</span>'
             '<p style="color: #6B7B9D; margin-top: 8px;">'
             'Analyzing... Speak, move, or express yourself.</p>'
             '</div>',
@@ -847,10 +807,10 @@ def _render_live_results(processor):
     # Modality signals
     st.markdown("#### Modality Signals")
     mod_data = [
-        ("🧑 Face", face),
-        ("🎙 Voice", voice),
-        ("💬 Text", text),
-        ("🧍 Posture", posture),
+        ("&#129489; Face", face),
+        ("&#127897; Voice", voice),
+        ("&#128172; Speech", text),
+        ("&#129485; Posture", posture),
     ]
     mod_colors = ["#E948A0", "#FFD700", "#00D4FF", "#10B981"]
 
@@ -919,7 +879,7 @@ def _render_live_results(processor):
     # Stats
     st.markdown(
         '<div style="color: #6B7B9D; font-size: 11px; margin-top: 8px; text-align: right;">'
-        'Frames: {} &bull; Audio: {} &bull; Transcript: {}'
+        'Frames: {} &#8226; Audio: {} &#8226; Transcript: {}'
         '</div>'.format(
             stats.get("video_frames", 0),
             stats.get("audio_chunks", 0),
@@ -929,18 +889,6 @@ def _render_live_results(processor):
     )
 
 
-def _schedule_rerun_fast():
-    """Schedule a fast rerun to keep live results updating."""
-    try:
-        import streamlit.components.v1 as components
-        components.html(
-            '<script>setTimeout(function() { window.location.reload(); }, 2000);</script>',
-            height=0,
-        )
-    except Exception:
-        pass
-
-
 def _show_video_processing(processor, start):
     """Process an uploaded video and show results."""
     video_bytes = st.session_state.get("video_bytes")