Update app.py

app.py

@@ -267,55 +267,36 @@ 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：心情偵測 (選用)")
                 
-                # --- 修改開始：鏡頭開關與顯示區域 ---
-                with gr.Group():
-                    # 1. 開關按鈕 (預設是綠色的開啟)
-                    toggle_cam_btn = gr.Button("🔌 啟用鏡頭", variant="primary")
+                # 這裡用 Row 把兩個影像並排 (左邊鏡頭，右邊截圖)
+                with gr.Row():
+                    # 左邊：永遠是即時鏡頭 (不設為 output)
+                    webcam_input = gr.Image(sources=["webcam"], label="即時鏡頭 (請看這裡)", streaming=True)
                     
-                    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)
+                    # 右邊：顯示偵測後的「靜態截圖」
+                    captured_image = gr.Image(label="偵測結果截圖", interactive=False)
+                
+                detect_btn = gr.Button("📸 截圖並偵測心情 👇", variant="secondary")
                 
                 gr.Markdown("### 📝 步驟 2：確認與補充")
                 score_input = gr.Radio(
                     ["1 (心情差)", "2 (不太好)", "3 (普通)", "4 (不錯)", "5 (超棒)"], 
-                    label="1. 心情分數", 
+                    label="1. 心情分數 (AI 會自動填入，也可手動改)", 
                     value="3 (普通)"
                 )
                 food_input = gr.Radio(["吃飯", "吃麵", "隨便"], label="2. 想吃什麼", value="隨便")
@@ -324,52 +305,22 @@ 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="地圖導航")
 
-    # ==========================================
-    # 邏輯處理函式
-    # ==========================================
-
-    # 定義：切換鏡頭的函式
-    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: 點擊偵測按鈕 (維持不變)
+    # Events 
+    
+    # ★ 修改重點：按鈕點擊後，輸出目標改為 captured_image，不再覆蓋 webcam_input
     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],