Update emotion.py

emotion.py

@@ -49,11 +49,8 @@ EMO_TO_SCORE = {
     "unknown": 3,
 }
 
-# ### [整合需求 新增] ###
-# 為了讓主程式 (app.py) 可以呼叫這個轉換邏輯，將其包裝成函式
 def get_emotion_score(emo: str) -> int:
     return EMO_TO_SCORE.get(emo, 3)
-# ######################
 
 SCORE_LABELS = {
     1: "1（心情差）",
@@ -70,7 +67,7 @@ SCORE_CHOICES = [SCORE_LABELS[i] for i in [1, 2, 3, 4, 5]]
 # =========================
 @dataclass
 class AppState:
-    mode: str = "攝影機辨識" # 保留欄位但固定為攝影機
+    mode: str = "攝影機辨識" 
 
     running: bool = True
     finished: bool = False
@@ -92,18 +89,16 @@ class AppState:
     final_emo: Optional[str] = None
     final_conf: Optional[float] = None
 
-    # ### [整合需求 新增] ###
-    # 用來儲存最後計算出的整數分數 (1~5)，讓外部程式容易讀取
     final_score: int = 3  
-    # ######################
 
 
 # =========================
-# UI HTML
+# 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:#111;">
+    <div style="border-radius:14px;padding:14px;border:1px dashed #DADADA;background:#FAFAFA;color:#000000;">
       {msg}
     </div>
     """
@@ -130,16 +125,16 @@ def _result_card_html(emo_key: str, conf: Optional[float]) -> str:
     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:#111;
+        color:#000000; 
     ">
-      <div style="font-size:14px;color:#444;margin-bottom:8px;">
+      <div style="font-size:14px;color:#000000;margin-bottom:8px;">
         辨識結果
       </div>
 
@@ -148,16 +143,16 @@ def _result_card_html(emo_key: str, conf: Optional[float]) -> str:
         font-weight:800;
         line-height:1.1;
         margin-bottom:14px;
-        color:#000;
+        color:#000000;
       ">
         {zh}
       </div>
 
-      <div style="font-size:16px;color:#111;margin-bottom:6px;">
+      <div style="font-size:16px;color:#000000;margin-bottom:6px;">
         心情分數：<b>{score}</b>（{score_desc}）
       </div>
 
-      <div style="font-size:14px;color:#111;">
+      <div style="font-size:14px;color:#000000;">
         信心值：{conf_txt}
       </div>
     </div>
@@ -246,11 +241,7 @@ def _reset_state_for_camera(st: AppState) -> AppState:
     st.candidate_since = None
     st.final_emo = None
     st.final_conf = None
-    
-    # ### [整合需求 新增] ###
     st.final_score = 3
-    # ######################
-    
     return st
 
 
@@ -258,7 +249,6 @@ def _reset_state_for_camera(st: AppState) -> AppState:
 # Camera streaming
 # =========================
 def on_stream(frame_rgb: np.ndarray, st: AppState):
-    # ✅ 完成/停止狀態：不要再顯示「Click to access…/Record…」
     if st.finished or (not st.running):
         cam_visible = False
 
@@ -280,7 +270,6 @@ def on_stream(frame_rgb: np.ndarray, st: AppState):
             gr.update(value="重新攝影機辨識"),
         )
 
-    # ✅ 還沒拿到 frame：提示使用者按允許/Record（而不是亂寫已開啟）
     if frame_rgb is None:
         return (
             gr.update(visible=True),
@@ -393,11 +382,7 @@ def on_stream(frame_rgb: np.ndarray, st: AppState):
     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
@@ -428,19 +413,18 @@ def on_stream(frame_rgb: np.ndarray, st: AppState):
 def on_restart(st: AppState):
     st = _reset_state_for_camera(st)
     return (
-        gr.update(visible=True),                               # cam
-        gr.update(value=_hint_html("等待影像…（尚未開始串流）")),  # result
-        gr.update(value=_score_radio_value(3)),                # mood
-        gr.update(value=_camera_hint_before_start()),          # hint
+        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="重新攝影機辨識"),                      # btn label
+        gr.update(value="重新攝影機辨識"),                      
     )
 
 
 def on_stop(st: AppState):
     st.running = False
     st.finished = True
-    # ✅ 停止後也不要再顯示 Click/Record 提示，改成「已停止/可重新」
     if st.final_emo is None:
         return (
             gr.update(visible=False),
@@ -462,15 +446,41 @@ def on_stop(st: AppState):
 
 
 # =========================
-# Gradio UI
+# Gradio UI & CSS (重要修改處)
 # =========================
 css = """
+/* 讓 App 容器置中且維持淺色背景 */
 #app_container { max-width: 960px; margin: 0 auto; }
 .gradio-container { background: #f1f5f9 !important; }
+
+/* 1. 全域強制標題與文字為黑色 (針對 Markdown 生成的內容) */
+.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6, 
+.prose p, .prose strong, .prose em, .prose li {
+    color: #000000 !important;
+}
+
+/* 2. 針對 Tab 按鈕文字強制為黑色 */
+.tab-nav button {
+    color: #000000 !important;
+}
+.tab-nav button.selected {
+    color: #000000 !important;
+    font-weight: bold; /* 選中時加粗 */
+}
+
+/* 3. 針對輸入元件的 Label (例如 Radio, Textbox 上方的文字) */
+label span {
+    color: #000000 !important;
+}
+
+/* 4. 其他一般文字區塊 */
+.markdown-text {
+    color: #000000 !important;
+}
 """
 
 if __name__ == "__main__":
-    with gr.Blocks(title="Emotion Detector") as demo:
+    with gr.Blocks(title="Emotion Detector", css=css) as demo:
         st = gr.State(AppState())
 
         gr.Markdown("## 情緒辨識")
@@ -489,7 +499,6 @@ if __name__ == "__main__":
             btn_restart = gr.Button("重新攝影機辨識", variant="primary")
             btn_stop = gr.Button("停止", variant="secondary")
 
-        # ✅ 你要的排序：結果在上、分數在下
         gr.Markdown("### 辨識結果")
         result = gr.HTML(_hint_html("等待影像…（尚未開始串流）"))