Update app.py

app.py

@@ -267,36 +267,55 @@ def detect_emotion_and_map(frame):
     return frame, mapped_score
 
 # ==========================================
-# 5. Gradio 介面建構 (修改版：鏡頭與結果分離)
+# 5. Gradio 介面建構 (新增：鏡頭開關邏輯)
 # ==========================================
 
 with gr.Blocks(title="AI 心情食堂") as demo:
     
+    # 紀錄鏡頭開關狀態的變數 (False = 關閉, True = 開啟)
+    camera_state = gr.State(value=False)
+
     with gr.Column(visible=True) as main_app_col: 
         gr.Markdown(f"## 🍱 AI 心情食堂導航")
-        gr.Markdown("請看著鏡頭，讓 AI 幫你判斷今天的心情分數！")
+        gr.Markdown("請開啟鏡頭，讓 AI 幫你判斷今天的心情分數！")
 
         with gr.Row():
             # 左側：輸入區
             with gr.Column(scale=1):
                 
-                # ★ 修改重點：將鏡頭與結果分開顯示 ★
                 gr.Markdown("### 📸 步驟 1：心情偵測 (選用)")
                 
-                # 這裡用 Row 把兩個影像並排 (左邊鏡頭，右邊截圖)
-                with gr.Row():
-                    # 左邊：永遠是即時鏡頭 (不設為 output)
-                    webcam_input = gr.Image(sources=["webcam"], label="即時鏡頭 (請看這裡)", streaming=True)
+                # --- 修改開始：鏡頭開關與顯示區域 ---
+                with gr.Group():
+                    # 1. 開關按鈕 (預設是綠色的開啟)
+                    toggle_cam_btn = gr.Button("🔌 啟用鏡頭", variant="primary")
                     
-                    # 右邊：顯示偵測後的「靜態截圖」
-                    captured_image = gr.Image(label="偵測結果截圖", interactive=False)
-                
-                detect_btn = gr.Button("📸 截圖並偵測心情 👇", variant="secondary")
+                    with gr.Row():
+                        # 2. 鏡頭元件 (預設隱藏 visible=False)
+                        webcam_input = gr.Image(
+                            sources=["webcam"], 
+                            label="即時鏡頭", 
+                            streaming=True, 
+                            visible=False  # 預設不顯示
+                        )
+                        
+                        # 3. 替代文字 (當鏡頭關閉時顯示這個)
+                        placeholder_text = gr.Markdown(
+                            "### 💤 鏡頭目前已關閉\n請點擊上方按鈕啟用", 
+                            visible=True
+                        )
+                        
+                        # 4. 截圖結果顯示
+                        captured_image = gr.Image(label="偵測結果截圖", interactive=False)
+                # --- 修改結束 ---
+
+                # 偵測按鈕 (預設不能按，因為鏡頭沒開)
+                detect_btn = gr.Button("📸 截圖並偵測心情", variant="secondary", interactive=False)
                 
                 gr.Markdown("### 📝 步驟 2：確認與補充")
                 score_input = gr.Radio(
                     ["1 (心情差)", "2 (不太好)", "3 (普通)", "4 (不錯)", "5 (超棒)"], 
-                    label="1. 心情分數 (AI 會自動填入，也可手動改)", 
+                    label="1. 心情分數", 
                     value="3 (普通)"
                 )
                 food_input = gr.Radio(["吃飯", "吃麵", "隨便"], label="2. 想吃什麼", value="隨便")
@@ -305,22 +324,52 @@ with gr.Blocks(title="AI 心情食堂") as demo:
                 debug_mode_btn = gr.Checkbox(label="🔧 顯示 Prompt 除錯資訊", value=False)
                 submit_btn = gr.Button("🚀 送出給 Agent", variant="primary")
 
-            # 右側：Agent 輸出區 (維持不變)
+            # 右側：Agent 輸出區
             with gr.Column(scale=1):
                 agent_output = gr.Markdown(label="AI 回應")
                 image_output = gr.Image(label="AI 推薦美食圖", type="pil", width=400)
                 map_output = gr.HTML(label="地圖導航")
 
-    # Events 
-    
-    # ★ 修改重點：按鈕點擊後，輸出目標改為 captured_image，不再覆蓋 webcam_input
+    # ==========================================
+    # 邏輯處理函式
+    # ==========================================
+
+    # 定義：切換鏡頭的函式
+    def toggle_camera_logic(is_on):
+        if not is_on:
+            # 如果原本是關的 -> 要打開
+            return (
+                True,                          # 更新狀態為 True
+                gr.update(visible=True),       # 顯示鏡頭
+                gr.update(visible=False),      # 隱藏替代文字
+                gr.update(value="🚫 關閉鏡頭", variant="stop"), # 按鈕變紅色
+                gr.update(interactive=True)    # 讓偵測按鈕可以按
+            )
+        else:
+            # 如果原本是開的 -> 要關掉
+            return (
+                False,                         # 更新狀態為 False
+                gr.update(value=None, visible=False), # 隱藏鏡頭並清空畫面
+                gr.update(visible=True),       # 顯示替代文字
+                gr.update(value="🔌 啟用鏡頭", variant="primary"), # 按鈕變綠色
+                gr.update(interactive=False)   # 鎖住偵測按鈕
+            )
+
+    # 事件 1: 點擊開關按鈕 -> 觸發切換邏輯
+    toggle_cam_btn.click(
+        fn=toggle_camera_logic,
+        inputs=[camera_state],
+        outputs=[camera_state, webcam_input, placeholder_text, toggle_cam_btn, detect_btn]
+    )
+
+    # 事件 2: 點擊偵測按鈕 (維持不變)
     detect_btn.click(
         fn=detect_emotion_and_map,
         inputs=[webcam_input],
-        outputs=[captured_image, score_input] # 輸出到「右邊的截圖」和「分數選項」
+        outputs=[captured_image, score_input]
     )
 
-    # 提交按鈕
+    # 事件 3: 提交按鈕 (維持不變)
     submit_btn.click(
         fn=mood_agent_logic,
         inputs=[score_input, food_input, diary_input, debug_mode_btn],