Update emotion.py

emotion.py

@@ -4,267 +4,583 @@ from typing import Optional, Dict, Tuple, List
 
 import gradio as gr
 import numpy as np
-import cv2
-import mediapipe as mp
-from mediapipe.tasks import python
-from mediapipe.tasks.vision import FaceDetector, FaceDetectorOptions, RunningMode
+from PIL import Image
+
+import cv2  # ✅ 新增：用來畫框
 
 from deepface import DeepFace
 
+
 # =========================
-# 參數與 MediaPipe 初始化
+# 參數（可微調）
 # =========================
-ANALYZE_EVERY_SEC = 0.6  
+ANALYZE_EVERY_SEC = 0.8
 DOWNSAMPLE_W = 720
 EMA_ALPHA = 0.45
 CONF_TH = 40.0
-SWITCH_CONFIRM_SEC = 2.0
+SWITCH_CONFIRM_SEC = 2.5
 IOU_TH = 0.25
-ZOOM_FACTOR = 1.3
-
-# MediaPipe 設定 (請確保 model 資料夾內有此檔案)
-MODEL_PATH = 'blaze_face_short_range.tflite'
-base_options = python.BaseOptions(model_asset_path=MODEL_PATH)
-options = FaceDetectorOptions(
-    base_options=base_options, 
-    running_mode=RunningMode.IMAGE
-)
-# 建立全域偵測器
-mp_detector = FaceDetector.create_from_options(options)
+ZOOM_FACTOR = 1.5
+
+DETECTOR_BACKEND = "mtcnn"     # 想快一點可改 "opencv"
+ALIGN_FACE = True
+
+# ✅ 新增：bbox 過期時間（秒），避免框卡死
+BBOX_TTL_SEC = 2.0
+
 
 # =========================
-# 情緒映射與標籤
+# 情緒中文 + 分數映射（7 -> 5）
 # =========================
 EMO_ZH = {
-    "angry": "生氣", "disgust": "厭惡", "fear": "害怕",
-    "happy": "開心", "sad": "難過", "surprise": "驚訝",
-    "neutral": "平靜", "unknown": "未知",
+    "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,
+    "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（超棒）",
+    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（bbox 在 small 座標系）
     track_bbox: Optional[Tuple[int, int, int, int]] = None
+    track_small_shape: Optional[Tuple[int, int]] = None  # ✅ 新增：(h, w) of small
+    track_bbox_time: float = 0.0                          # ✅ 新增：bbox 更新時間
+
+    # 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
+
+    final_score: int = 3  
+
 
 # =========================
-# UI 工具與輔助函式
+# UI HTML (強制黑色文字)
 # =========================
 def _hint_html(msg: str) -> str:
-    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）」開始。"
+    )
+
+
+def _camera_hint_done() -> str:
+    return _hint_html("已完成辨識，可按「重新攝影機辨識」再次進行辨識。")
+
+
+def _camera_hint_stopped() -> str:
+    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("）")
+
     return f"""
-    <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 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>
     """
 
+
 def _score_radio_value(score: int) -> str:
-    return SCORE_LABELS[min(5, max(1, int(score)))]
+    score = int(score)
+    score = min(5, max(1, score))
+    return SCORE_LABELS[score]
 
-def _iou(a, b) -> float:
-    ax, ay, aw, ah = a
-    bx, by, bw, bh = b
-    ix, iy = max(ax, bx), max(ay, by)
-    iw, ih = max(0, min(ax+aw, bx+bw)-ix), max(0, min(ay+ah, by+bh)-iy)
-    area_i = iw * ih
-    if area_i <= 0: return 0.0
-    return area_i / (aw*ah + bw*bh - area_i)
 
-def _zoom_center(frame: np.ndarray, zoom: float) -> np.ndarray:
-    if frame is None or zoom <= 1.0: return frame
+def _downsample_rgb(frame: np.ndarray, target_w: int) -> np.ndarray:
+    if frame is None:
+        return None
     h, w = frame.shape[:2]
-    nw, nh = int(w / zoom), int(h / zoom)
-    sx, sy = (w - nw) // 2, (h - nh) // 2
-    return frame[sy:sy+nh, sx:sx+nw]
+    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)
 
-# =========================
-# MediaPipe 偵測邏輯 (整合繪圖)
-# =========================
-def get_face_mediapipe(frame: np.ndarray, prev_bbox: Optional[Tuple[int, int, int, int]]):
-    h, w = frame.shape[:2]
-    draw_frame = frame.copy() # 建立一個複本用來畫圖
-    mp_image = mp.Image(image_format=mp.ImageFormat.SRGB, data=frame)
-    res = mp_detector.detect(mp_image)
-    
-    if not res.detections:
-        return None, None, draw_frame
-
-    candidates = []
-    for det in res.detections:
-        b = det.bounding_box
-        nx, ny = max(0, b.origin_x), max(0, b.origin_y)
-        nw, nh = min(b.width, w - nx), min(b.height, h - ny)
-        
-        # 繪製白色正方形外框 (Thickness=5)
-        cv2.rectangle(draw_frame, (nx, ny), (nx + nw, ny + nh), (255, 255, 255), 5)
+def _zoom_center(frame: np.ndarray, zoom: float) -> np.ndarray:
+    if frame is None or zoom <= 1.0:
+        return frame
         
-        # 繪製紅色五官小圓點
-        if det.keypoints:
-            for kp in det.keypoints:
-                kx, ky = int(kp.x * w), int(kp.y * h)
-                cv2.circle(draw_frame, (kx, ky), 6, (0, 0, 255), -1)
+    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
 
-        if nw > 10 and nh > 10:
-            candidates.append(((nx, ny, nw, nh), frame[ny:ny+nh, nx:nx+nw]))
 
-    if not candidates:
-        return None, None, draw_frame
+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]]
+) -> Tuple[Optional[Dict], 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]
+
+
+# ✅ 新增：每一幀都畫上 bbox（如果 bbox 沒過期）
+def _draw_bbox_always(frame_rgb: np.ndarray, st: AppState, ttl_sec: float = BBOX_TTL_SEC) -> np.ndarray:
+    if frame_rgb is None:
+        return frame_rgb
 
-    # 優先匹配上一幀位���
-    best_match = None
-    if prev_bbox:
-        best_match = max(candidates, key=lambda c: _iou(prev_bbox, c[0]), default=(None, None))
-        if best_match[0] and _iou(prev_bbox, best_match[0]) < IOU_TH:
-            best_match = None
+    if st.track_bbox is None or st.track_small_shape is None:
+        return frame_rgb
 
-    if best_match is None:
-        best_match = max(candidates, key=lambda c: c[0][2] * c[0][3])
+    now = time.time()
+    if st.track_bbox_time and (now - st.track_bbox_time) > ttl_sec:
+        return frame_rgb
+
+    fh, fw = frame_rgb.shape[:2]
+    sh, sw = st.track_small_shape
+    if sw <= 0 or sh <= 0:
+        return frame_rgb
+
+    x, y, w, h = st.track_bbox  # small 座標系
+    sx = fw / sw
+    sy = fh / sh
+
+    x1 = int(x * sx)
+    y1 = int(y * sy)
+    x2 = int((x + w) * sx)
+    y2 = int((y + h) * sy)
+
+    x1 = max(0, min(fw - 1, x1))
+    y1 = max(0, min(fh - 1, y1))
+    x2 = max(0, min(fw - 1, x2))
+    y2 = max(0, min(fh - 1, y2))
+
+    bgr = cv2.cvtColor(frame_rgb, cv2.COLOR_RGB2BGR)
+    cv2.rectangle(bgr, (x1, y1), (x2, y2), (255, 255, 255), 3)  # 白框
+    return cv2.cvtColor(bgr, cv2.COLOR_BGR2RGB)
+
+
+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.track_small_shape = None
+    st.track_bbox_time = 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
+    return st
 
-    return best_match[0], best_match[1], draw_frame
 
 # =========================
-# Gradio 事件處理
+# Camera streaming
 # =========================
 def on_stream(frame_rgb: np.ndarray, st: AppState):
-    if not st.running or st.finished:
-        res_html = _result_card_html(st.final_emo, st.final_conf) if st.final_emo else _hint_html("辨識停止")
-        return gr.update(visible=False), res_html, _score_radio_value(st.final_score), _hint_html("已完成"), st, gr.update()
-
+    # --- stopped/finished ---
+    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 (
+            gr.update(value=None, visible=cam_visible),  # ✅ cam
+            gr.update(value=result_html),
+            gr.update(value=mood_val),
+            gr.update(value=hint_html),
+            st,
+            gr.update(value="重新攝影機辨識"),
+        )
+
+    # --- no frame yet ---
     if frame_rgb is None:
-        return gr.update(), gr.update(), gr.update(), _hint_html("等待攝影機..."), st, gr.update()
-
+        return (
+            gr.update(value=None, visible=True),  # ✅ cam
+            gr.update(value=_hint_html("等待影像…（尚未開始串流）")),
+            gr.update(value=_score_radio_value(3)),
+            gr.update(value=_camera_hint_before_start()),
+            st,
+            gr.update(value="重新攝影機辨識"),
+        )
+
+    # zoom
     frame_rgb = _zoom_center(frame_rgb, ZOOM_FACTOR)
+
+    # ✅ 每一幀先畫「上一個 bbox」，讓框一直存在
+    frame_rgb = _draw_bbox_always(frame_rgb, st, ttl_sec=BBOX_TTL_SEC)
+
     now = time.time()
-    
-    # 頻率控制
+
+    # --- not time to analyze: return frame with bbox ---
     if now - st.last_analyze_t < ANALYZE_EVERY_SEC:
-        return gr.update(), gr.update(), gr.update(), gr.update(), st, gr.update()
-    
+        show = st.stable_emo or "unknown"
+        return (
+            gr.update(value=frame_rgb, visible=True),  # ✅ cam：回傳影像
+            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="重新攝影機辨識"),
+        )
+
+    # --- analyze tick ---
     st.last_analyze_t = now
 
-    # 使用 MediaPipe 找臉並繪圖
-    bbox, face_crop, frame_with_drawings = get_face_mediapipe(frame_rgb, st.track_bbox)
-    
-    if face_crop is None:
-        return gr.update(value=frame_with_drawings), gr.update(), gr.update(), _hint_html("未偵測到人臉"), st, gr.update()
+    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 (
+            gr.update(value=frame_rgb, visible=True),  # ✅ cam
+            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="重新攝影機辨識"),
+        )
+
+    # ✅ 更新追蹤 bbox（small 座標系）
     st.track_bbox = bbox
+    st.track_small_shape = small.shape[:2]
+    st.track_bbox_time = now
 
-    # DeepFace 情緒分析
-    try:
-        res = DeepFace.analyze(face_crop, actions=['emotion'], enforce_detection=False, silent=True)
-        emo_dict = res[0]['emotion'] if isinstance(res, list) else res['emotion']
-    except:
-        return gr.update(value=frame_with_drawings), gr.update(), gr.update(), gr.update(), st, gr.update()
+    # ✅ 立刻再畫一次最新 bbox（讓框馬上跟上）
+    frame_rgb = _draw_bbox_always(frame_rgb, st, ttl_sec=BBOX_TTL_SEC)
+
+    # ROI face for emotion
+    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,
+    )
+    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 (
+            gr.update(value=frame_rgb, visible=True),
+            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])
 
-    # 平滑處理 (EMA)
-    if top_conf >= CONF_TH:
-        keys = list(emo_dict.keys())
-        vals = np.array([float(emo_dict[k]) for k in keys])
-        if st.ema_scores is None or st.emo_keys != keys:
-            st.ema_scores, st.emo_keys = vals, keys
-        else:
-            st.ema_scores = EMA_ALPHA * vals + (1.0 - EMA_ALPHA) * st.ema_scores
-        
-        st.stable_emo = st.emo_keys[int(np.argmax(st.ema_scores))]
+    if top_conf < CONF_TH:
+        show = st.stable_emo or "unknown"
+        return (
+            gr.update(value=frame_rgb, visible=True),
+            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
+
+    confirmed = (
+        st.candidate_since is not None
+        and (now - st.candidate_since) >= SWITCH_CONFIRM_SEC
+    )
 
-        # 穩定切換邏輯
-        if st.candidate_emo != st.stable_emo:
-            st.candidate_emo, st.candidate_since = st.stable_emo, now
-        elif st.candidate_since and (now - st.candidate_since) >= SWITCH_CONFIRM_SEC:
-            st.final_emo, st.final_conf = st.stable_emo, top_conf
-            st.final_score = EMO_TO_SCORE.get(st.stable_emo, 3)
-            st.finished, st.running = True, False
+    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 (
+            gr.update(value=None, visible=False),  # ✅ cam hide
+            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="重新攝影機辨識"),
+        )
 
     return (
-        gr.update(value=frame_with_drawings, visible=not st.finished),
-        gr.update(value=_result_card_html(st.stable_emo, top_conf)),
-        gr.update(value=_score_radio_value(EMO_TO_SCORE.get(st.stable_emo, 3))),
-        gr.update(value=_hint_html("正在辨識中，請保持表情穩定...")),
+        gr.update(value=frame_rgb, visible=True),  # ✅ cam
+        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()
+        gr.update(value="重新攝影機辨識"),
     )
 
+
+# =========================
+# Mode / Buttons
+# =========================
+
 def on_restart(st: AppState):
-    new_st = AppState()
+    st = _reset_state_for_camera(st)
     return (
-        gr.update(visible=True),
-        _hint_html("等待影像..."),
-        _score_radio_value(3),
-        _hint_html("請點擊 Record 開始"),
-        new_st,
-        gr.update()
+        gr.update(value=None, visible=True),                               # ✅ cam
+        gr.update(value=_hint_html("等待影像…（尚未開始串流）")),
+        gr.update(value=_score_radio_value(3)),
+        gr.update(value=_camera_hint_before_start()),
+        st,
+        gr.update(value="重新攝影機辨識"),
     )
 
+
 def on_stop(st: AppState):
-    st.running, st.finished = False, True
-    return gr.update(visible=False), gr.update(), gr.update(), _hint_html("已手動停止"), st, gr.update()
+    st.running = False
+    st.finished = True
+    if st.final_emo is None:
+        return (
+            gr.update(value=None, visible=False),  # ✅ cam
+            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(value=None, visible=False),  # ✅ cam
+        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="重新攝影機辨識"),
+    )
+
 
 # =========================
-# Gradio UI 介面
+# Gradio UI
 # =========================
-css = ".gradio-container { background-color: #f7f9fc; }"
-
-with gr.Blocks(title="AI 情緒偵測系統", css=css) as demo:
-    state = gr.State(AppState())
-    
-    gr.Markdown("# 🎭 AI 情緒辨識評分系統")
-    status_hint = gr.HTML(_hint_html("請開啟攝影機並點擊錄製"))
-
-    with gr.Row():
-        with gr.Column(scale=1):
-            webcam = gr.Image(sources=["webcam"], streaming=True, type="numpy", label="攝影機畫面")
-            with gr.Row():
-                btn_re = gr.Button("🔄 重新辨識", variant="primary")
-                btn_stop = gr.Button("🛑 停止", variant="secondary")
-        
-        with gr.Column(scale=1):
-            res_display = gr.HTML(_result_card_html("unknown", 0))
-            gr.Markdown("### 系統判定心情分數")
-            mood_radio = gr.Radio(choices=SCORE_CHOICES, value=SCORE_LABELS[3], interactive=False, label="")
-
-    # 事件綁定
-    webcam.stream(
-        fn=on_stream,
-        inputs=[webcam, state],
-        outputs=[webcam, res_display, mood_radio, status_hint, state, btn_re]
-    )
-    
-    btn_re.click(fn=on_restart, inputs=[state], outputs=[webcam, res_display, mood_radio, status_hint, state, btn_re])
-    btn_stop.click(fn=on_stop, inputs=[state], outputs=[webcam, res_display, mood_radio, status_hint, state, btn_re])
+
+# 你原本這裡的 css 變數在 pasted 檔裡沒顯示出來
+# 如果你原檔有 css = "...", 請保持原樣；沒有的話請自行加上或移除 css 參數
+css = ""
 
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+    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",
+        )
+
+    demo.launch(server_name="0.0.0.0", server_port=7860, share=False)