Update emotion.py

emotion.py

@@ -5,36 +5,27 @@ from typing import Optional, Dict, Tuple, List
 
 import gradio as gr
 import numpy as np
-from PIL import Image, ImageDraw
-
 from deepface import DeepFace
 
 
-# ===== 避免 css 未定義造成 NameError =====
-css = ""
-
-
 # =========================
-# 參數（優先順：快）
+# 參數（HF Space：優先順）
 # =========================
-ANALYZE_EVERY_SEC = 1.2     # ✅ 降頻率（原 0.8）
-DOWNSAMPLE_W = 480          # ✅ 降解析（原 720）
+ANALYZE_EVERY_SEC = 2.0   # ✅ Space 上建議 >= 2.0
+DOWNSAMPLE_W = 320        # ✅ 影像縮小，提升速度
 EMA_ALPHA = 0.45
 CONF_TH = 40.0
 SWITCH_CONFIRM_SEC = 2.5
-IOU_TH = 0.25
-ZOOM_FACTOR = 1.25          # ✅ 稍微降 zoom（減少失真與負擔）
-
-DETECTOR_BACKEND = "opencv" # ✅ 改快（原 mtcnn）
 ALIGN_FACE = True
 
-# 防誤判（保留）
-MIN_FACE_AREA_RATIO = 0.05
-MIN_DET_CONF = 0.90
+DETECTOR_BACKEND = "opencv"  # ✅ 比 mtcnn 快很多
+
+# 防誤判（保留，但別太嚴苛避免一直紅）
+MIN_FACE_AREA_RATIO = 0.04   # 4%（你可調 0.03~0.06）
 
 
 # =========================
-# Warm-up（優先順：按 Record 不要等）
+# Warm-up（避免按 Record 後第一下卡很久）
 # =========================
 _WARMED = False
 
@@ -45,7 +36,6 @@ def _warmup_models():
     _WARMED = True
     try:
         dummy = np.zeros((224, 224, 3), dtype=np.uint8)
-        # detector warmup
         try:
             DeepFace.extract_faces(
                 img_path=dummy,
@@ -55,7 +45,6 @@ def _warmup_models():
             )
         except Exception:
             pass
-        # emotion model warmup
         try:
             DeepFace.analyze(
                 img_path=dummy,
@@ -104,6 +93,11 @@ SCORE_LABELS = {
 }
 SCORE_CHOICES = [SCORE_LABELS[i] for i in [1, 2, 3, 4, 5]]
 
+def _score_radio_value(score: int) -> str:
+    score = int(score)
+    score = min(5, max(1, score))
+    return SCORE_LABELS[score]
+
 
 # =========================
 # 狀態
@@ -114,8 +108,6 @@ class AppState:
     finished: bool = False
     last_analyze_t: float = 0.0
 
-    track_bbox: Optional[Tuple[int, int, int, int]] = None
-
     ema_scores: Optional[np.ndarray] = None
     emo_keys: List[str] = field(default_factory=list)
 
@@ -127,12 +119,12 @@ class AppState:
     final_conf: Optional[float] = None
     final_score: int = 3
 
+    face_ok: bool = False   # ✅ 是否「偵測到人臉」（用來切紅/綠框）
     last_face_t: float = 0.0
-    face_in_box: bool = False
 
 
 # =========================
-# UI HTML
+# UI HTML（結果卡 + 提示 + 前端框色）
 # =========================
 def _hint_html(msg: str) -> str:
     return f"""
@@ -158,8 +150,15 @@ def _result_card_html(emo_key: str, conf: Optional[float]) -> str:
     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("）")
+
     return f"""
-    <div style="border-radius:16px;padding:20px;border:1px solid #E6E6E6;background:#FFFFFF;color:#000000;">
+    <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>
@@ -167,14 +166,34 @@ def _result_card_html(emo_key: str, conf: Optional[float]) -> str:
     </div>
     """
 
-def _score_radio_value(score: int) -> str:
-    score = int(score)
-    score = min(5, max(1, score))
-    return SCORE_LABELS[score]
+def _overlay_style(face_ok: bool) -> str:
+    # ✅ 用 CSS 直接改 webcam 元件邊框顏色（不回傳影像，不畫在影像上）
+    color = "#00C853" if face_ok else "#FF1744"  # 綠 / 紅
+    msg = "已偵測到人臉，辨識中…" if face_ok else "未偵測到人臉，請把臉放進框內"
+    return f"""
+    <style>
+      /* gr.Image 內部會有 img，這裡用 elem_id=cam_box 鎖定 */
+      #cam_box img {{
+        outline: 4px solid {color};
+        outline-offset: -4px;
+        border-radius: 10px;
+      }}
+      #cam_msg {{
+        margin-top: 8px;
+        padding: 8px 12px;
+        border-radius: 10px;
+        background: #FFFFFF;
+        border: 1px solid #E6E6E6;
+        display: inline-block;
+        color: #000000;
+      }}
+    </style>
+    <div id="cam_msg">{msg}</div>
+    """
 
 
 # =========================
-# 影像工具
+# 影像縮小（加速）
 # =========================
 def _downsample_rgb(frame: np.ndarray, target_w: int) -> np.ndarray:
     if frame is None:
@@ -184,308 +203,181 @@ def _downsample_rgb(frame: np.ndarray, target_w: int) -> np.ndarray:
         return frame
     scale = target_w / w
     new_h = max(1, int(h * scale))
-    img = Image.fromarray(frame)
+    # 用 numpy 最近鄰簡化也可，但這裡用 slice+PIL更穩
+    import PIL.Image
+    img = PIL.Image.fromarray(frame)
     img = img.resize((target_w, new_h))
     return np.array(img)
 
-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 = int(w / zoom)
-    new_h = int(h / zoom)
-    start_x = (w - new_w) // 2
-    start_y = (h - new_h) // 2
-    return frame[start_y:start_y + new_h, start_x:start_x + new_w]
-
-
-# =========================
-# 引導框（永遠畫）
-# =========================
-GUIDE_W_RATIO = 0.55
-GUIDE_H_RATIO = 0.70
-GUIDE_Y_OFFSET = 0.00
-
-def _guide_box(frame: np.ndarray) -> Tuple[int, int, int, int]:
-    h, w = frame.shape[:2]
-    gw = int(w * GUIDE_W_RATIO)
-    gh = int(h * GUIDE_H_RATIO)
-    cx = w // 2
-    cy = int(h * (0.5 + GUIDE_Y_OFFSET))
-    x1 = max(0, cx - gw // 2)
-    y1 = max(0, cy - gh // 2)
-    x2 = min(w - 1, cx + gw // 2)
-    y2 = min(h - 1, cy + gh // 2)
-    return x1, y1, x2, y2
-
-def _bbox_center_in_box(bbox_xywh: Tuple[float, float, float, float], box_xyxy: Tuple[int, int, int, int]) -> bool:
-    x, y, w, h = bbox_xywh
-    cx = x + w / 2.0
-    cy = y + h / 2.0
-    x1, y1, x2, y2 = box_xyxy
-    return (x1 <= cx <= x2) and (y1 <= cy <= y2)
-
-def _draw_guide_overlay(frame_rgb: np.ndarray, detected_in_box: bool) -> np.ndarray:
-    img = Image.fromarray(frame_rgb)
-    draw = ImageDraw.Draw(img)
-
-    x1, y1, x2, y2 = _guide_box(frame_rgb)
-    color = (0, 200, 0) if detected_in_box else (220, 0, 0)
-
-    h, w = frame_rgb.shape[:2]
-    thickness = max(3, int(min(w, h) * 0.008))
-    for t in range(thickness):
-        draw.rectangle([x1 - t, y1 - t, x2 + t, y2 + t], outline=color)
-
-    msg = "已偵測到人臉，開始辨識情緒中…" if detected_in_box else "未偵測到人臉，請把臉放進框內"
-    tx = x1
-    ty = max(0, y1 - int(thickness * 6))
-    draw.rectangle([tx, ty, tx + 360, ty + 32], fill=(255, 255, 255))
-    draw.text((tx + 6, ty + 6), msg, fill=(0, 0, 0))
-
-    return np.array(img)
-
-
-# =========================
-# Tracking / IoU
-# =========================
-def _iou(a: Tuple[int, int, int, int], b: Tuple[int, int, int, int]) -> float:
-    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)
-    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)
-
-def _pick_face_by_tracking(faces: List[Dict], prev_bbox: Optional[Tuple[int, int, int, int]]):
-    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 _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
-    st.last_face_t = 0.0
-    st.face_in_box = False
-    return st
-
 
-def _is_real_face(pick: Dict, bbox_full_xywh: Tuple[float, float, float, float], frame_hw: Tuple[int, int]) -> bool:
+def _is_big_enough_face(facial_area: Dict, frame_hw: Tuple[int, int]) -> bool:
     fh, fw = frame_hw
-    x, y, w, h = bbox_full_xywh
-    area_ratio = (w * h) / max(1.0, float(fw * fh))
-    if area_ratio < MIN_FACE_AREA_RATIO:
+    w = float(facial_area.get("w", 0) or 0)
+    h = float(facial_area.get("h", 0) or 0)
+    if w <= 0 or h <= 0:
         return False
-    det_conf = pick.get("confidence", None)
-    if det_conf is not None:
-        try:
-            if float(det_conf) < MIN_DET_CONF:
-                return False
-        except Exception:
-            pass
-    return True
+    area_ratio = (w * h) / max(1.0, float(fw * fh))
+    return area_ratio >= MIN_FACE_AREA_RATIO
 
 
 # =========================
-# Stream（優先順）
+# 核心：只回傳「狀態」，不回傳影像（最順）
 # =========================
-def on_stream(frame_rgb: np.ndarray, st: AppState):
+def on_stream_status(frame_rgb: np.ndarray, st: AppState):
     if st.finished or (not st.running):
-        cam_visible = False
         if st.final_emo:
             return (
-                gr.update(visible=cam_visible),
                 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=_overlay_style(True)),
                 gr.update(value="重新攝影機辨識"),
             )
         return (
-            gr.update(visible=cam_visible),
             gr.update(value=_hint_html("尚未完成辨識。")),
             gr.update(value=_score_radio_value(3)),
             gr.update(value=_camera_hint_stopped()),
             st,
+            gr.update(value=_overlay_style(False)),
             gr.update(value="重新攝影機辨識"),
         )
 
     if frame_rgb is None:
+        st.face_ok = False
         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=_overlay_style(False)),
             gr.update(value="重新攝影機辨識"),
         )
 
-    frame_rgb = _zoom_center(frame_rgb, ZOOM_FACTOR)
     now = time.time()
 
-    # ✅ 先畫框（永遠立即有框），不等 detector
-    detected_recent = st.face_in_box and (now - st.last_face_t) < 1.0
-    annotated_fast = _draw_guide_overlay(frame_rgb, detected_recent)
-
-    # ✅ 如果還沒到分析時間，直接回傳畫框（超順）
+    # ✅ 沒到時間就只回傳「框色 HTML」（幾乎不耗時）
     if now - st.last_analyze_t < ANALYZE_EVERY_SEC:
         return (
-            gr.update(visible=True, value=annotated_fast),
-            gr.update(value=_hint_html("已偵測到人臉，開始辨識情緒中…" if detected_recent else "未偵測到人臉，請把臉放進框內")),
-            gr.update(value=_score_radio_value(3)),
+            gr.update(value=_hint_html("已偵測到人臉，開始辨識情緒中…" if st.face_ok else "未偵測到人臉，請把臉放進框內")),
+            gr.update(value=_score_radio_value(3 if st.final_emo is None else EMO_TO_SCORE.get(st.final_emo, 3))),
             gr.update(value=_camera_hint_before_start()),
             st,
+            gr.update(value=_overlay_style(st.face_ok)),
             gr.update(value="重新攝影機辨識"),
         )
 
-    # 到時間才做一次重工作（低頻）
     st.last_analyze_t = now
+
+    # ✅ 只用縮小後影像做偵測（快很多）
     small = _downsample_rgb(frame_rgb, DOWNSAMPLE_W)
 
     try:
         faces = DeepFace.extract_faces(
             img_path=small,
             detector_backend=DETECTOR_BACKEND,
-            enforce_detection=True,
+            enforce_detection=False,   # ✅ 不丟例外（省時間）
             align=ALIGN_FACE,
         )
     except Exception:
         faces = []
 
-    pick, bbox = _pick_face_by_tracking(faces, st.track_bbox)
-
-    if pick is None or bbox is None or pick.get("face") is None:
-        st.track_bbox = None
-        st.face_in_box = False
-        st.last_face_t = now
-        st.stable_emo = "unknown"
-        annotated = _draw_guide_overlay(frame_rgb, False)
+    # 沒有臉
+    if not faces:
+        st.face_ok = False
         return (
-            gr.update(visible=True, value=annotated),
             gr.update(value=_hint_html("未偵測到人臉，請把臉放進框內")),
             gr.update(value=_score_radio_value(3)),
             gr.update(value=_camera_hint_before_start()),
             st,
+            gr.update(value=_overlay_style(False)),
             gr.update(value="重新攝影機辨識"),
         )
 
-    sh, sw = small.shape[:2]
-    fh, fw = frame_rgb.shape[:2]
-    sx = fw / max(1, sw)
-    sy = fh / max(1, sh)
-    x, y, w, h = bbox
-    bbox_full = (x * sx, y * sy, w * sx, h * sy)
-
-    if not _is_real_face(pick, bbox_full, (fh, fw)):
-        st.track_bbox = None
-        st.face_in_box = False
-        st.last_face_t = now
-        annotated = _draw_guide_overlay(frame_rgb, False)
+    # 找最大臉（以面積判斷）
+    best = None
+    best_area = -1.0
+    for f in faces:
+        fa = f.get("facial_area", {}) or {}
+        w = float(fa.get("w", 0) or 0)
+        h = float(fa.get("h", 0) or 0)
+        area = w * h
+        if area > best_area and f.get("face") is not None:
+            best_area = area
+            best = f
+
+    if best is None:
+        st.face_ok = False
         return (
-            gr.update(visible=True, value=annotated),
             gr.update(value=_hint_html("未偵測到人臉，請把臉放進框內")),
             gr.update(value=_score_radio_value(3)),
             gr.update(value=_camera_hint_before_start()),
             st,
+            gr.update(value=_overlay_style(False)),
             gr.update(value="重新攝影機辨識"),
         )
 
-    guide = _guide_box(frame_rgb)
-    in_box = _bbox_center_in_box(bbox_full, guide)
+    # ✅ 防誤判：太小的臉視為沒有
+    fa = best.get("facial_area", {}) or {}
+    if not _is_big_enough_face(fa, small.shape[:2]):
+        st.face_ok = False
+        return (
+            gr.update(value=_hint_html("未偵測到人臉，請把臉放進框內")),
+            gr.update(value=_score_radio_value(3)),
+            gr.update(value=_camera_hint_before_start()),
+            st,
+            gr.update(value=_overlay_style(False)),
+            gr.update(value="重新攝影機辨識"),
+        )
 
+    # ✅ 這裡就算「有臉」→ 綠框
+    st.face_ok = True
     st.last_face_t = now
-    st.face_in_box = in_box
-    st.track_bbox = bbox
 
-    if not in_box:
-        annotated = _draw_guide_overlay(frame_rgb, False)
+    face = best["face"]
+    if face is None:
+        st.face_ok = False
         return (
-            gr.update(visible=True, value=annotated),
-            gr.update(value=_hint_html("已偵測到人臉，但請把臉放進框內")),
+            gr.update(value=_hint_html("未偵測到人臉，請把臉放進框內")),
             gr.update(value=_score_radio_value(3)),
             gr.update(value=_camera_hint_before_start()),
             st,
+            gr.update(value=_overlay_style(False)),
             gr.update(value="重新攝影機辨識"),
         )
 
-    # 只有臉在框內才分析情緒
-    face = pick["face"]
+    # face 轉 uint8
     if face.dtype != np.uint8:
         face = np.clip(face * 255.0, 0, 255).astype(np.uint8)
 
+    # 情緒分析（仍然低頻做）
     try:
         result = DeepFace.analyze(
             img_path=face,
             actions=["emotion"],
-            enforce_detection=True,
+            enforce_detection=False,  # ✅ 省時間
         )
     except Exception:
-        annotated = _draw_guide_overlay(frame_rgb, False)
-        st.face_in_box = False
-        st.last_face_t = now
         return (
-            gr.update(visible=True, value=annotated),
-            gr.update(value=_hint_html("未偵測到人臉，請把臉放進框內")),
+            gr.update(value=_hint_html("已偵測到人臉，辨識中…（分析暫時失敗，請保持正面）")),
             gr.update(value=_score_radio_value(3)),
             gr.update(value=_camera_hint_before_start()),
             st,
+            gr.update(value=_overlay_style(True)),
             gr.update(value="重新攝影機辨識"),
         )
 
     if isinstance(result, list):
         result = result[0]
     emo_dict = result.get("emotion", None)
+
     if not isinstance(emo_dict, dict) or len(emo_dict) == 0:
-        annotated = _draw_guide_overlay(frame_rgb, True)
         return (
-            gr.update(visible=True, value=annotated),
-            gr.update(value=_hint_html("已偵測到人臉，開始辨識情緒中…")),
+            gr.update(value=_hint_html("已偵測到人臉，辨識中…")),
             gr.update(value=_score_radio_value(3)),
             gr.update(value=_camera_hint_before_start()),
             st,
+            gr.update(value=_overlay_style(True)),
             gr.update(value="重新攝影機辨識"),
         )
 
@@ -493,16 +385,16 @@ def on_stream(frame_rgb: np.ndarray, st: AppState):
     top_conf = float(emo_dict[top_key])
 
     if top_conf < CONF_TH:
-        annotated = _draw_guide_overlay(frame_rgb, True)
         return (
-            gr.update(visible=True, value=annotated),
-            gr.update(value=_hint_html("已偵測到人臉，開始辨識情緒中…")),
+            gr.update(value=_hint_html("已偵測到人臉，辨識中…（信心值偏低，請面向鏡頭、光線再亮一點）")),
             gr.update(value=_score_radio_value(3)),
             gr.update(value=_camera_hint_before_start()),
             st,
+            gr.update(value=_overlay_style(True)),
             gr.update(value="重新攝影機辨識"),
         )
 
+    # 平滑
     keys = list(emo_dict.keys())
     vec = np.array([float(emo_dict[k]) for k in keys], dtype=np.float32)
 
@@ -516,6 +408,7 @@ def on_stream(frame_rgb: np.ndarray, st: AppState):
     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
@@ -535,21 +428,21 @@ def on_stream(frame_rgb: np.ndarray, st: AppState):
         st.running = False
         st.finished = True
         return (
-            gr.update(visible=False),
             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=_overlay_style(True)),
             gr.update(value="重新攝影機辨識"),
         )
 
-    annotated = _draw_guide_overlay(frame_rgb, True)
+    # 還在辨識中
     return (
-        gr.update(visible=True, value=annotated),
         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=_overlay_style(True)),
         gr.update(value="重新攝影機辨識"),
     )
 
@@ -557,35 +450,51 @@ def on_stream(frame_rgb: np.ndarray, st: AppState):
 # =========================
 # Buttons
 # =========================
+def _reset_state(st: AppState) -> AppState:
+    st.running = True
+    st.finished = False
+    st.last_analyze_t = 0.0
+    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
+    st.face_ok = False
+    st.last_face_t = 0.0
+    return st
+
 def on_restart(st: AppState):
-    st = _reset_state_for_camera(st)
+    st = _reset_state(st)
     return (
-        gr.update(visible=True, value=None),  # ✅ 清掉上一張畫面
         gr.update(value=_hint_html("等待影像…（尚未開始串流）")),
         gr.update(value=_score_radio_value(3)),
         gr.update(value=_camera_hint_before_start()),
         st,
+        gr.update(value=_overlay_style(False)),
         gr.update(value="重新攝影機辨識"),
     )
 
 def on_stop(st: AppState):
     st.running = False
     st.finished = True
-    if st.final_emo is None:
+    if st.final_emo:
         return (
-            gr.update(visible=False, value=None),
-            gr.update(value=_hint_html("已停止辨識。")),
-            gr.update(value=_score_radio_value(3)),
-            gr.update(value=_camera_hint_stopped()),
+            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=_overlay_style(True)),
             gr.update(value="重新攝影機辨識"),
         )
     return (
-        gr.update(visible=False, value=None),
-        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()),
+        gr.update(value=_hint_html("已停止辨識。")),
+        gr.update(value=_score_radio_value(3)),
+        gr.update(value=_camera_hint_stopped()),
         st,
+        gr.update(value=_overlay_style(False)),
         gr.update(value="重新攝影機辨識"),
     )
 
@@ -594,21 +503,25 @@ def on_stop(st: AppState):
 # Gradio UI
 # =========================
 if __name__ == "__main__":
-    with gr.Blocks(title="Emotion Detector", css=css) as demo:
+    with gr.Blocks(title="Emotion Detector") as demo:
         st = gr.State(AppState())
 
         gr.Markdown("## 情緒辨識")
 
         hint = gr.HTML(_camera_hint_before_start())
 
+        # ✅ elem_id 固定，讓 CSS 可以準確套用
         cam = gr.Image(
             sources=["webcam"],
             streaming=True,
             type="numpy",
             label="攝影機",
-            visible=True,
+            elem_id="cam_box",
         )
 
+        # ✅ 疊框 / 訊息（只回傳 HTML，不回傳影像）
+        overlay = gr.HTML(_overlay_style(False))
+
         with gr.Row():
             btn_restart = gr.Button("重新攝影機辨識", variant="primary")
             btn_stop = gr.Button("停止", variant="secondary")
@@ -624,24 +537,25 @@ if __name__ == "__main__":
             interactive=False,
         )
 
+        # ✅ 注意：outputs 裡沒有 cam → 前端保持本地 webcam 預覽（最順）
         cam.stream(
-            fn=on_stream,
+            fn=on_stream_status,
             inputs=[cam, st],
-            outputs=[cam, result, mood, hint, st, btn_restart],
+            outputs=[result, mood, hint, st, overlay, btn_restart],
             show_progress="minimal",
         )
 
         btn_restart.click(
             fn=on_restart,
             inputs=[st],
-            outputs=[cam, result, mood, hint, st, btn_restart],
+            outputs=[result, mood, hint, st, overlay, btn_restart],
             show_progress="minimal",
         )
 
         btn_stop.click(
             fn=on_stop,
             inputs=[st],
-            outputs=[cam, result, mood, hint, st, btn_restart],
+            outputs=[result, mood, hint, st, overlay, btn_restart],
             show_progress="minimal",
         )