Update emotion.py

emotion.py

@@ -1,5 +1,5 @@
 import time
-import cv2  # 用於繪製導引框
+import cv2  # 確保有安裝 opencv-python
 from dataclasses import dataclass, field
 from typing import Optional, Dict, Tuple, List
 import gradio as gr
@@ -17,525 +17,234 @@ CONF_TH = 40.0
 SWITCH_CONFIRM_SEC = 2.5
 IOU_TH = 0.25
 ZOOM_FACTOR = 1.5
-DETECTOR_BACKEND = "mtcnn"     # 想快一點可改 "opencv"
+DETECTOR_BACKEND = "mtcnn"
 ALIGN_FACE = True
 
 # =========================
-# 情緒中文 + 分數映射（7 -> 5）
+# 狀態與映射 (保持原本邏輯)
 # =========================
-EMO_ZH = {
-    "angry": "生氣",
-    "disgust": "厭惡",
-    "fear": "害怕",
-    "happy": "開心",
-    "sad": "難過",
-    "surprise": "驚訝",
-    "neutral": "平靜",
-    "unknown": "未知",
-}
-
-# 把 7 種情緒塞進 5 分心情分數
-EMO_TO_SCORE = {
-    "angry": 1,
-    "disgust": 1,
-    "fear": 1,
-    "sad": 2,
-    "neutral": 3,
-    "surprise": 4,
-    "happy": 5,
-    "unknown": 3,
-}
-
-def get_emotion_score(emo: str) -> int:
-    return EMO_TO_SCORE.get(emo, 3)
-
-SCORE_LABELS = {
-    1: "1（心情差）",
-    2: "2（不太好）",
-    3: "3（普通）",
-    4: "4（不錯）",
-    5: "5（超棒）",
-}
-
+EMO_ZH = {"angry": "生氣", "disgust": "厭惡", "fear": "害怕", "happy": "開心", "sad": "難過", "surprise": "驚訝", "neutral": "平靜", "unknown": "未知"}
+EMO_TO_SCORE = {"angry": 1, "disgust": 1, "fear": 1, "sad": 2, "neutral": 3, "surprise": 4, "happy": 5, "unknown": 3}
+SCORE_LABELS = {1: "1（心情差）", 2: "2（不太好）", 3: "3（普通）", 4: "4（不錯）", 5: "5（超棒）"}
 SCORE_CHOICES = [SCORE_LABELS[i] for i in [1, 2, 3, 4, 5]]
 
-# =========================
-# 狀態
-# =========================
 @dataclass
 class AppState:
     mode: str = "攝影機辨識" 
     running: bool = True
     finished: bool = False
     last_analyze_t: float = 0.0
-    # tracking
     track_bbox: Optional[Tuple[int, int, int, int]] = None
-    # smoothing
     ema_scores: Optional[np.ndarray] = None
     emo_keys: List[str] = field(default_factory=list)
-    # stable/candidate
     stable_emo: str = "unknown"
     candidate_emo: Optional[str] = None
     candidate_since: Optional[float] = None
-    # final
     final_emo: Optional[str] = None
     final_conf: Optional[float] = None
     final_score: int = 3
 
 # =========================
-# UI HTML (強制黑色文字)
+# 輔助函式
 # =========================
 def _hint_html(msg: str) -> str:
-    # 加入 color:#000000 強制黑色
-    return f"""
-    <div style="border-radius:14px;padding:14px;border:1px dashed #DADADA;background:#FAFAFA;color:#000000;">
-      {msg}
-    </div>
-    """
+    return f'<div style="border-radius:14px;padding:14px;border:1px dashed #DADADA;background:#FAFAFA;color:#000000;">{msg}</div>'
 
 def _camera_hint_before_start() -> str:
-    return _hint_html(
-        "請先按「Click to access webcam / 允許」開啟攝影機；"
-        "接著，請按「錄製（Record）」開始。"
-    )
+    return _hint_html("請先按「Click to access webcam」開啟攝影機，接著按「錄製 (Record)」開始。")
 
 def _camera_hint_done() -> str:
-    return _hint_html("已完成辨識，可按「重新攝影機辨識」再次進行辨識。")
+    return _hint_html("已完成辨識，可按「重新攝影機辨識」再次進行。")
 
 def _camera_hint_stopped() -> str:
-    return _hint_html("已停止辨識。可按「重新攝影機辨識」再試一次。")
+    return _hint_html("已停止辨識。")
 
 def _result_card_html(emo_key: str, conf: Optional[float]) -> str:
     zh = EMO_ZH.get(emo_key, emo_key)
     score = EMO_TO_SCORE.get(emo_key, 3)
     conf_txt = "" if conf is None else f"{conf:.1f}%"
     score_desc = SCORE_LABELS[score].split("（")[1].rstrip("）")
-    # ✅ 強制設定 color: #000000
     return f"""
-    <div style="
-        border-radius:16px;
-        padding:20px;
-        border:1px solid #E6E6E6;
-        background:#FFFFFF;
-        color:#000000;
-     ">
-      <div style="font-size:14px;color:#000000;margin-bottom:8px;">
-        辨識結果
-      </div>
-      <div style="
-        font-size:42px;
-        font-weight:800;
-        line-height:1.1;
-        margin-bottom:14px;
-        color:#000000;
-      ">
-        {zh}
-      </div>
-      <div style="font-size:16px;color:#000000;margin-bottom:6px;">
-        心情分數：{score}（{score_desc}）
-      </div>
-      <div style="font-size:14px;color:#000000;">
-        信心值：{conf_txt}
-      </div>
+    <div style="border-radius:16px;padding:20px;border:1px solid #E6E6E6;background:#FFFFFF;color:#000000;">
+      <div style="font-size:14px;margin-bottom:8px;">辨識結果</div>
+      <div style="font-size:42px;font-weight:800;line-height:1.1;margin-bottom:14px;">{zh}</div>
+      <div style="font-size:16px;margin-bottom:6px;">心情分數：{score}（{score_desc}）</div>
+      <div style="font-size:14px;">信心值：{conf_txt}</div>
     </div>
     """
 
 def _score_radio_value(score: int) -> str:
-    score = int(score)
-    score = min(5, max(1, score))
-    return SCORE_LABELS[score]
+    return SCORE_LABELS[min(5, max(1, int(score)))]
+
+def _zoom_center(frame: np.ndarray, zoom: float) -> np.ndarray:
+    if frame is None or zoom <= 1.0: return frame
+    h, w = frame.shape[:2]
+    new_w, new_h = int(w / zoom), int(h / zoom)
+    start_x, start_y = (w - new_w) // 2, (h - new_h) // 2
+    return frame[start_y : start_y + new_h, start_x : start_x + new_w]
 
 def _downsample_rgb(frame: np.ndarray, target_w: int) -> np.ndarray:
-    if frame is None:
-        return None
+    if frame is None: return None
     h, w = frame.shape[:2]
-    if w <= target_w:
-        return frame
+    if w <= target_w: return frame
     scale = target_w / w
     new_h = max(1, int(h * scale))
-    img = Image.fromarray(frame)
-    img = img.resize((target_w, new_h))
-    return np.array(img)
+    return np.array(Image.fromarray(frame).resize((target_w, new_h)))
 
-def _zoom_center(frame: np.ndarray, zoom: float) -> np.ndarray:
-    """
-    裁切畫面中心以模擬數位變焦。
-    zoom: 放大倍率 (例如 1.5)
-    """
-    if frame is None or zoom <= 1.0:
-        return frame
-            
-    h, w = frame.shape[:2]
-        
-    # 計算新的寬高
-    new_w = int(w / zoom)
-    new_h = int(h / zoom)
-        
-    # 計算起始點 (讓裁切框置中)
-    start_x = (w - new_w) // 2
-    start_y = (h - new_h) // 2
-        
-    # 進行裁切
-    cropped = frame[start_y : start_y + new_h, start_x : start_x + new_w]
-    return cropped
+# 這是關鍵：新增繪圖函式，確保顏色與座標正確
+def _draw_ui_overlay(frame: np.ndarray, is_detected: bool):
+    canvas = frame.copy()
+    h, w = canvas.shape[:2]
+    
+    # 框的大小 (寬50%, 高60%)
+    bw, bh = int(w * 0.5), int(h * 0.6)
+    x1, y1 = (w - bw) // 2, (h - bh) // 2
+    x2, y2 = x1 + bw, y1 + bh
+    
+    # 顏色判定 (RGB 格式)
+    # 如果抓到臉 -> 綠色 (0, 255, 0)；沒抓到 -> 紅色 (255, 0, 0)
+    color = (0, 255, 0) if is_detected else (255, 0, 0)
+    text = "DETECTED" if is_detected else "ALIGN FACE"
+
+    # 1. 畫外框矩形
+    cv2.rectangle(canvas, (x1, y1), (x2, y2), color, 4)
+    
+    # 2. 畫四個角落增強視覺感 (可選)
+    length = 30
+    cv2.line(canvas, (x1, y1), (x1 + length, y1), color, 8)
+    cv2.line(canvas, (x1, y1), (x1, y1 + length), color, 8)
+    
+    # 3. 加上文字
+    cv2.putText(canvas, text, (x1, y1 - 15), cv2.FONT_HERSHEY_DUPLEX, 1.0, color, 2)
+    
+    return canvas
 
-def _iou(a: Tuple[int, int, int, int], b: Tuple[int, int, int, int]) -> float:
+def _iou(a, b):
     ax, ay, aw, ah = a
     bx, by, bw, bh = b
-    ax2, ay2 = ax + aw, ay + ah
-    bx2, by2 = bx + bw, by + bh
     ix1, iy1 = max(ax, bx), max(ay, by)
-    ix2, iy2 = min(ax2, bx2), min(ay2, by2)
+    ix2, iy2 = min(ax + aw, bx + bw), min(ay + ah, by + bh)
     iw, ih = max(0, ix2 - ix1), max(0, iy2 - iy1)
     inter = iw * ih
-    if inter <= 0:
-        return 0.0
-    union = aw * ah + bw * bh - inter
-    return inter / max(1e-6, union)
+    if inter <= 0: return 0.0
+    return inter / (aw * ah + bw * bh - inter)
 
-def _pick_face_by_tracking(
-    faces: List[Dict],
-    prev_bbox: Optional[Tuple[int, int, int, int]]) -> Tuple[Optional[Dict], Optional[Tuple[int, int, int, int]]]:
-    
-    if not faces:
-        return None, None
-        
+def _pick_face_by_tracking(faces, prev_bbox):
+    if not faces: return None, None
     cand = []
     for f in faces:
-        fa = f.get("facial_area", {}) or {}
-        x = int(fa.get("x", 0) or 0)
-        y = int(fa.get("y", 0) or 0)
-        w = int(fa.get("w", 0) or 0)
-        h = int(fa.get("h", 0) or 0)
-        if w > 0 and h > 0 and f.get("face") is not None:
-            cand.append((f, (x, y, w, h), w * h))
-            
-    if not cand:
-        return None, None
-        
-    if prev_bbox is not None:
-        best = None
-        best_i = 0.0
-        for f, bb, area in cand:
-            i = _iou(prev_bbox, bb)
-            if i > best_i:
-                best_i = i
-                best = (f, bb)
-        if best is not None and best_i >= IOU_TH:
-            return best[0], best[1]
-            
-    cand.sort(key=lambda x: x[2], reverse=True)
-    return cand[0][0], cand[0][1]
-
-def _draw_guide_box(frame: np.ndarray, is_detected: bool):
-    """ 
-    在畫面上畫一個提示框：
-    未偵測到臉 -> 紅色框
-    偵測到臉部 -> 綠色框
-    """
-    h, w = frame.shape[:2]
-    # 定義一個框的大小
-    box_w = int(w * 0.5)
-    box_h = int(h * 0.6)
-    x1 = (w - box_w) // 2
-    y1 = (h - box_h) // 2
-    x2 = x1 + box_w
-    y2 = y1 + box_h
-    
-    # 顏色 BGR (OpenCV 使用 BGR)
-    # 但因為 Gradio 傳入的是 RGB，所以我們直接當成 RGB 畫
-    # 綠色 (0, 255, 0), 紅色 (255, 0, 0)
-    color = (0, 255, 0) if is_detected else (255, 0, 0)
-    label = "Scanning..." if is_detected else "Align Face Here"
-    
-    # 畫矩形 (粗度 3)
-    cv2.rectangle(frame, (x1, y1), (x2, y2), color, 3)
-    # 寫���
-    cv2.putText(frame, label, (x1, y1 - 10), cv2.FONT_HERSHEY_SIMPLEX, 0.8, color, 2)
-    return frame
-
-def _reset_state_for_camera(st: AppState) -> AppState:
-    st.running = True
-    st.finished = False
-    st.last_analyze_t = 0.0
-    st.track_bbox = None
-    st.ema_scores = None
-    st.emo_keys = []
-    st.stable_emo = "unknown"
-    st.candidate_emo = None
-    st.candidate_since = None
-    st.final_emo = None
-    st.final_conf = None
-    st.final_score = 3
-    return st
+        fa = f.get("facial_area", {})
+        x, y, w, h = fa.get("x",0), fa.get("y",0), fa.get("w",0), fa.get("h",0)
+        if w > 0 and h > 0: cand.append((f, (x, y, w, h), w * h))
+    if not cand: return None, None
+    if prev_bbox:
+        best = max(cand, key=lambda c: _iou(prev_bbox, c[1]), default=(None, None, 0))
+        if best[0] and _iou(prev_bbox, best[1]) >= IOU_TH: return best[0], best[1]
+    return sorted(cand, key=lambda x: x[2], reverse=True)[0][:2]
 
 # =========================
 # Camera streaming
 # =========================
 def on_stream(frame_rgb: np.ndarray, st: AppState):
+    if frame_rgb is None:
+        return (None, gr.update(), gr.update(), gr.update(), st, gr.update())
+
+    # 如果已經結束，回傳空影像讓攝像頭不再更新
     if st.finished or (not st.running):
-        cam_visible = False
-        if st.final_emo:
-            result_html = _result_card_html(st.final_emo, st.final_conf)
-            mood_val = _score_radio_value(EMO_TO_SCORE.get(st.final_emo, 3))
-            hint_html = _camera_hint_done()
-        else:
-            result_html = _hint_html("尚未完成辨識。")
-            mood_val = _score_radio_value(3)
-            hint_html = _camera_hint_stopped()
-            
-        return (
-            None,
-            gr.update(value=result_html),
-            gr.update(value=mood_val),
-            gr.update(value=hint_html),
-            st,
-            gr.update(value="重新攝影機辨識"),
-        )
+        return (None, gr.update(), gr.update(), gr.update(), st, gr.update())
 
-    if frame_rgb is None:
-        return (
-            None,
-            gr.update(value=_hint_html("等待影像…（尚未開始串流）")),
-            gr.update(value=_score_radio_value(3)),
-            gr.update(value=_camera_hint_before_start()),
-            st,
-            gr.update(value="重新攝影機辨識"),
-        )
-        
-    # 1. 數位變焦
+    # 1. 處理影像
     frame_rgb = _zoom_center(frame_rgb, ZOOM_FACTOR)
-    
-    # 2. 預檢測 (用於判斷框的顏色)
     now = time.time()
-    small_check = _downsample_rgb(frame_rgb, DOWNSAMPLE_W)
-    faces_check = DeepFace.extract_faces(
-        img_path=small_check,
-        detector_backend="opencv", # 快速檢查用
-        enforce_detection=False,
-        align=False,
-    )
-    pick_check, bbox_check = _pick_face_by_tracking(faces_check, st.track_bbox)
-    is_detected = pick_check is not None and pick_check.get("face") is not None
-    
-    # 3. 繪製框框
-    frame_with_box = _draw_guide_box(frame_rgb.copy(), is_detected)
-
-    # 4. 真正分析邏輯 (時間到了才跑 DeepFace.analyze)
-    if now - st.last_analyze_t < ANALYZE_EVERY_SEC:
-        show = st.stable_emo or "unknown"
-        return (
-            frame_with_box,
-            gr.update(value=_result_card_html(show, st.final_conf)),
-            gr.update(value=_score_radio_value(EMO_TO_SCORE.get(show, 3))),
-            gr.update(value=_camera_hint_before_start()),
-            st,
-            gr.update(value="重新攝影機辨識"),
-        )
-
-    st.last_analyze_t = now
-    small = _downsample_rgb(frame_rgb, DOWNSAMPLE_W)
-    
-    # 使用正式後端偵測
-    faces = DeepFace.extract_faces(
-        img_path=small,
-        detector_backend=DETECTOR_BACKEND,
-        enforce_detection=False,
-        align=ALIGN_FACE,
-    )
-    
-    pick, bbox = _pick_face_by_tracking(faces, st.track_bbox)
-    
-    if pick is None or bbox is None or pick.get("face") is None:
-        show = st.stable_emo or "unknown"
-        return (
-            frame_with_box,
-            gr.update(value=_result_card_html(show, st.final_conf)),
-            gr.update(value=_score_radio_value(EMO_TO_SCORE.get(show, 3))),
-            gr.update(value=_camera_hint_before_start()),
-            st,
-            gr.update(value="重新攝影機辨識"),
-        )
-        
-    st.track_bbox = bbox
-    face = pick["face"]
     
-    if face.dtype != np.uint8:
-        face = np.clip(face * 255.0, 0, 255).astype(np.uint8)
-        
-    result = DeepFace.analyze(
-        img_path=face,
-        actions=["emotion"],
-        enforce_detection=False,
-    )
+    # 2. 快速檢測人臉 (每一幀都跑，確保框框顏色反應即時)
+    small_check = _downsample_rgb(frame_rgb, 400) # 用更小的圖加快速度
+    faces_check = DeepFace.extract_faces(img_path=small_check, detector_backend="opencv", enforce_detection=False)
+    pick_check, _ = _pick_face_by_tracking(faces_check, st.track_bbox)
+    is_detected = (pick_check is not None)
     
-    if isinstance(result, list):
-        result = result[0]
-        
-    emo_dict = result.get("emotion", None)
-    if not isinstance(emo_dict, dict) or len(emo_dict) == 0:
-        show = st.stable_emo or "unknown"
-        return (
-            frame_with_box,
-            gr.update(value=_result_card_html(show, st.final_conf)),
-            gr.update(value=_score_radio_value(EMO_TO_SCORE.get(show, 3))),
-            gr.update(value=_camera_hint_before_start()),
-            st,
-            gr.update(value="重新攝影機辨識"),
-        )
-        
-    top_key = max(emo_dict, key=lambda k: float(emo_dict[k]))
-    top_conf = float(emo_dict[top_key])
-    
-    if top_conf < CONF_TH:
-        show = st.stable_emo or "unknown"
-        return (
-            frame_with_box,
-            gr.update(value=_result_card_html(show, st.final_conf)),
-            gr.update(value=_score_radio_value(EMO_TO_SCORE.get(show, 3))),
-            gr.update(value=_camera_hint_before_start()),
-            st,
-            gr.update(value="重新攝影機辨識"),
-        )
-        
-    keys = list(emo_dict.keys())
-    vec = np.array([float(emo_dict[k]) for k in keys], dtype=np.float32)
-    
-    if st.ema_scores is None or st.emo_keys != keys:
-        st.ema_scores = vec
-        st.emo_keys = keys
-    else:
-        st.ema_scores = EMA_ALPHA * vec + (1.0 - EMA_ALPHA) * st.ema_scores
-        
-    stable_idx = int(np.argmax(st.ema_scores))
-    stable_key = st.emo_keys[stable_idx]
-    st.stable_emo = stable_key
-    
-    # 延遲確認
-    if st.candidate_emo != stable_key:
-        st.candidate_emo = stable_key
-        st.candidate_since = now
-    else:
-        if st.candidate_since is None:
-            st.candidate_since = now
+    # 3. 繪製導引框 (這張圖會回傳給 UI)
+    frame_with_box = _draw_ui_overlay(frame_rgb, is_detected)
+
+    # 4. 深度辨識邏輯 (每 ANALYZE_EVERY_SEC 秒執行一次)
+    if is_detected and (now - st.last_analyze_t >= ANALYZE_EVERY_SEC):
+        st.last_analyze_t = now
+        # 正式分析
+        small = _downsample_rgb(frame_rgb, DOWNSAMPLE_W)
+        faces = DeepFace.extract_faces(img_path=small, detector_backend=DETECTOR_BACKEND, enforce_detection=False, align=ALIGN_FACE)
+        pick, bbox = _pick_face_by_tracking(faces, st.track_bbox)
+        
+        if pick:
+            st.track_bbox = bbox
+            face = pick["face"]
+            if face.dtype != np.uint8: face = (face * 255).astype(np.uint8)
             
-    confirmed = (
-        st.candidate_since is not None
-        and (now - st.candidate_since) >= SWITCH_CONFIRM_SEC
-    )
-    
-    if confirmed and st.final_emo is None:
-        st.final_emo = stable_key
-        st.final_conf = top_conf
-        st.final_score = EMO_TO_SCORE.get(stable_key, 3)
-        st.running = False
-        st.finished = True
-        return (
-            None,
-            gr.update(value=_result_card_html(stable_key, top_conf)),
-            gr.update(value=_score_radio_value(EMO_TO_SCORE.get(stable_key, 3))),
-            gr.update(value=_camera_hint_done()),
-            st,
-            gr.update(value="重新攝影機辨識"),
-        )
-        
+            res = DeepFace.analyze(img_path=face, actions=["emotion"], enforce_detection=False)
+            emo_dict = res[0].get("emotion") if isinstance(res, list) else res.get("emotion")
+            
+            if emo_dict:
+                top_key = max(emo_dict, key=lambda k: float(emo_dict[k]))
+                top_conf = float(emo_dict[top_key])
+                
+                # EMA & Stable 邏輯
+                keys = list(emo_dict.keys())
+                vec = np.array([float(emo_dict[k]) for k in keys])
+                if st.ema_scores is None: st.ema_scores, st.emo_keys = vec, keys
+                else: st.ema_scores = EMA_ALPHA * vec + (1.0 - EMA_ALPHA) * st.ema_scores
+                
+                stable_key = st.emo_keys[np.argmax(st.ema_scores)]
+                st.stable_emo = stable_key
+                
+                # 確認穩定度
+                if st.candidate_emo != stable_key:
+                    st.candidate_emo, st.candidate_since = stable_key, now
+                elif st.candidate_since and (now - st.candidate_since >= SWITCH_CONFIRM_SEC):
+                    # 完成辨識
+                    st.final_emo, st.final_conf, st.running, st.finished = stable_key, top_conf, False, True
+                    return (frame_with_box, _result_card_html(stable_key, top_conf), _score_radio_value(EMO_TO_SCORE.get(stable_key, 3)), _camera_hint_done(), st, gr.update(value="重新攝影機辨識"))
+
+    # 持續回傳帶有 UI 框的畫面
+    show_emo = st.stable_emo or "unknown"
     return (
-        frame_with_box,
-        gr.update(value=_result_card_html(stable_key, top_conf)),
-        gr.update(value=_score_radio_value(EMO_TO_SCORE.get(stable_key, 3))),
-        gr.update(value=_camera_hint_before_start()),
-        st,
-        gr.update(value="重新攝影機辨識"),
+        frame_with_box, 
+        gr.update(value=_result_card_html(show_emo, st.final_conf)), 
+        gr.update(value=_score_radio_value(EMO_TO_SCORE.get(show_emo, 3))), 
+        gr.update(value=_camera_hint_before_start()), 
+        st, 
+        gr.update()
     )
 
-# =========================
-# Mode / Buttons
-# =========================
 def on_restart(st: AppState):
-    st = _reset_state_for_camera(st)
-    return (
-        gr.update(visible=True),                                       
-        gr.update(value=_hint_html("等待影像…（尚未開始串流）")),          
-        gr.update(value=_score_radio_value(3)),                        
-        gr.update(value=_camera_hint_before_start()),                  
-        st,
-        gr.update(value="重新攝影機辨識"),                          
-    )
+    st.running, st.finished, st.last_analyze_t = True, False, 0.0
+    st.track_bbox, st.ema_scores, st.stable_emo, st.final_emo = None, None, "unknown", None
+    return (gr.update(visible=True), _hint_html("等待影像..."), _score_radio_value(3), _camera_hint_before_start(), st, "重新攝影機辨識")
 
 def on_stop(st: AppState):
-    st.running = False
-    st.finished = True
-    if st.final_emo is None:
-        return (
-            gr.update(visible=False),
-            gr.update(value=_hint_html("已停止辨識。")),
-            gr.update(value=_score_radio_value(3)),
-            gr.update(value=_camera_hint_stopped()),
-            st,
-            gr.update(value="重新攝影機辨識"),
-        )
-    return (
-        gr.update(visible=False),
-        gr.update(value=_result_card_html(st.final_emo, st.final_conf)),
-        gr.update(value=_score_radio_value(EMO_TO_SCORE.get(st.final_emo, 3))),
-        gr.update(value=_camera_hint_done()),
-        st,
-        gr.update(value="重新攝影機辨識"),
-    )
+    st.running, st.finished = False, True
+    return (gr.update(visible=False), _hint_html("已停止"), _score_radio_value(3), _camera_hint_stopped(), st, "重新攝影機辨識")
 
 # =========================
-# Gradio UI
+# UI
 # =========================
-if __name__ == "__main__":
-    # 若有 CSS 可以寫在這裡，目前維持原本調用的 css 變數
-    css = "" 
-    with gr.Blocks(title="Emotion Detector", css=css) as demo:
-        st = gr.State(AppState())
-        gr.Markdown("## 情緒辨識")
-                
-        hint = gr.HTML(_camera_hint_before_start())
-        cam = gr.Image(
-            sources=["webcam"],
-            streaming=True,
-            type="numpy",
-            label="攝影機",
-            visible=True,
-        )
-        
-        with gr.Row():
-            btn_restart = gr.Button("重新攝影機辨識", variant="primary")
-            btn_stop = gr.Button("停止", variant="secondary")
-            
-        gr.Markdown("### 辨識結果")
-        result = gr.HTML(_hint_html("等待影像…（尚未開始串流）"))
-        
-        gr.Markdown("### 心情分數（系統判定）")
-        mood = gr.Radio(
-            choices=SCORE_CHOICES,
-            value=_score_radio_value(3),
-            label="心情分數",
-            interactive=False,
-        )
-        
-        cam.stream(
-            fn=on_stream,
-            inputs=[cam, st],
-            outputs=[cam, result, mood, hint, st, btn_restart],
-            show_progress="minimal",
-        )
-        
-        btn_restart.click(
-            fn=on_restart,
-            inputs=[st],
-            outputs=[cam, result, mood, hint, st, btn_restart],
-            show_progress="minimal",
-        )
-        
-        btn_stop.click(
-            fn=on_stop,
-            inputs=[st],
-            outputs=[cam, result, mood, hint, st, btn_restart],
-            show_progress="minimal",
-        )
+with gr.Blocks(title="Emotion Detector") as demo:
+    state = gr.State(AppState())
+    gr.Markdown("## 情緒辨識系統")
+    hint = gr.HTML(_camera_hint_before_start())
+    
+    # 這裡的 cam 元件接收輸出的影像
+    cam = gr.Image(sources=["webcam"], streaming=True, type="numpy", label="攝影機預覽")
+    
+    with gr.Row():
+        btn_restart = gr.Button("重新攝影機辨識", variant="primary")
+        btn_stop = gr.Button("停止", variant="secondary")
         
-    demo.launch(server_name="0.0.0.0", server_port=7860, share=False)
+    result = gr.HTML(_hint_html("等待串流..."))
+    mood = gr.Radio(choices=SCORE_CHOICES, value=SCORE_LABELS[3], label="系統判定心情", interactive=False)
+
+    # 串流綁定
+    cam.stream(on_stream, [cam, state], [cam, result, mood, hint, state, btn_restart], show_progress="minimal")
+    btn_restart.click(on_restart, [state], [cam, result, mood, hint, state, btn_restart])
+    btn_stop.click(on_stop, [state], [cam, result, mood, hint, state, btn_restart])
+
+if __name__ == "__main__":
+    demo.launch(server_name="0.0.0.0", server_port=7860)