Update app.py

app.py

@@ -267,7 +267,7 @@ def detect_emotion_and_map(frame):
     return frame, mapped_score
 
 # ==========================================
-# 5. Gradio 介面建構 (修改版：鏡頭與結果分離)
+# 5. Gradio 介面建構
 # ==========================================
 
 with gr.Blocks(title="AI 心情食堂") as demo:
@@ -280,23 +280,32 @@ with gr.Blocks(title="AI 心情食堂") as demo:
             # 左側：輸入區
             with gr.Column(scale=1):
                 
-                # ★ 修改重點：將鏡頭與結果分開顯示 ★
-                gr.Markdown("### 📸 步驟 1：心情偵測 (選用)")
+                gr.Markdown("### 📸 步驟 1：心情偵測")
                 
-                # 這裡用 Row 把兩個影像並排 (左邊鏡頭，右邊截圖)
                 with gr.Row():
-                    # 左邊：永遠是即時鏡頭 (不設為 output)
-                    webcam_input = gr.Image(sources=["webcam"], label="即時鏡頭 (請看這裡)", streaming=True)
+                    # 🔴 關鍵設定 1：webcam_input
+                    # streaming=True 代表「鏡頭一直開著」，不會停下來
+                    # 這就像是相機的「觀景窗」
+                    webcam_input = gr.Image(
+                        sources=["webcam"], 
+                        label="即時觀景窗 (請保持開啟)", 
+                        streaming=True  # <--- 這個參數是實現「瞬間抓拍」的關鍵！
+                    )
                     
-                    # 右邊：顯示偵測後的「靜態截圖」
-                    captured_image = gr.Image(label="偵測結果截圖", interactive=False)
+                    # 🔵 關鍵設定 2：captured_image
+                    # 這是一個靜態圖片框，用來顯示「按下按鈕那一刻」的照片
+                    captured_image = gr.Image(
+                        label="剛剛拍下的瞬間", 
+                        interactive=False
+                    )
                 
-                detect_btn = gr.Button("📸 截圖並偵測心情 👇", variant="secondary")
+                # 這是你的快門按鈕
+                detect_btn = gr.Button("📸 3, 2, 1... 笑一個！(按下截圖)", variant="secondary")
                 
                 gr.Markdown("### 📝 步驟 2：確認與補充")
                 score_input = gr.Radio(
                     ["1 (心情差)", "2 (不太好)", "3 (普通)", "4 (不錯)", "5 (超棒)"], 
-                    label="1. 心情分數 (AI 會自動填入，也可手動改)", 
+                    label="1. 心情分數 (AI 會自動填入)", 
                     value="3 (普通)"
                 )
                 food_input = gr.Radio(["吃飯", "吃麵", "隨便"], label="2. 想吃什麼", value="隨便")
@@ -305,7 +314,7 @@ with gr.Blocks(title="AI 心情食堂") as demo:
                 debug_mode_btn = gr.Checkbox(label="🔧 顯示 Prompt 除錯資訊", value=False)
                 submit_btn = gr.Button("🚀 送出給 Agent", variant="primary")
 
-            # 右側：Agent 輸出區 (維持不變)
+            # 右側：輸出區
             with gr.Column(scale=1):
                 agent_output = gr.Markdown(label="AI 回應")
                 image_output = gr.Image(label="AI 推薦美食圖", type="pil", width=400)
@@ -313,14 +322,13 @@ with gr.Blocks(title="AI 心情食堂") as demo:
 
     # Events 
     
-    # ★ 修改重點：按鈕點擊後，輸出目標改為 captured_image，不再覆蓋 webcam_input
+    # 🟠 關鍵邏輯：按下按鈕時...
     detect_btn.click(
         fn=detect_emotion_and_map,
-        inputs=[webcam_input],
-        outputs=[captured_image, score_input] # 輸出到「右邊的截圖」和「分數選項」
+        inputs=[webcam_input],           # 1. 程式會去抓「觀景窗」現在這一瞬間的畫面
+        outputs=[captured_image, score_input] # 2. 把結果丟到「右邊的相框」和「分數選項」
     )
 
-    # 提交按鈕
     submit_btn.click(
         fn=mood_agent_logic,
         inputs=[score_input, food_input, diary_input, debug_mode_btn],