Update app.py

app.py

@@ -267,12 +267,11 @@ def detect_emotion_and_map(frame):
     return frame, mapped_score
 
 # ==========================================
-# 3. Gradio 介面建構 (移除前兩頁)
+# 5. Gradio 介面建構 (修改版：鏡頭與結果分離)
 # ==========================================
 
 with gr.Blocks(title="AI 心情食堂") as demo:
     
-    # 只有一個主應用程式 Column，並設定為預設顯示
     with gr.Column(visible=True) as main_app_col: 
         gr.Markdown(f"## 🍱 AI 心情食堂導航")
         gr.Markdown("請看著鏡頭，讓 AI 幫你判斷今天的心情分數！")
@@ -281,42 +280,47 @@ with gr.Blocks(title="AI 心情食堂") as demo:
             # 左側：輸入區
             with gr.Column(scale=1):
                 
-                # 情緒偵測區塊 (維持不變)
+                # ★ 修改重點：將鏡頭與結果分開顯示 ★
                 gr.Markdown("### 📸 步驟 1：心情偵測 (選用)")
-                with gr.Group():
-                    webcam_input = gr.Image(sources=["webcam"], label="看著鏡頭", streaming=True)
-                    detect_btn = gr.Button("📸 偵測心情並自動填入 👇", variant="secondary")
+                
+                # 這裡用 Row 把兩個影像並排 (左邊鏡頭，右邊截圖)
+                with gr.Row():
+                    # 左邊：永遠是即時鏡頭 (不設為 output)
+                    webcam_input = gr.Image(sources=["webcam"], label="即時鏡頭 (請看這裡)", streaming=True)
+                    
+                    # 右邊：顯示偵測後的「靜態截圖」
+                    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="隨便")
                 diary_input = gr.Textbox(lines=3, label="3. 心情日記 (選填)", placeholder="例如：今天被老闆罵了，想吃點好料的...")
                 
                 debug_mode_btn = gr.Checkbox(label="🔧 顯示 Prompt 除錯資訊", value=False)
-                # 移除了 quiz_state
-                submit_btn = gr.Button("🚀 送出給 Agent", variant="primary") 
+                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)
                 map_output = gr.HTML(label="地圖導航")
 
-    # Events (只保留情緒偵測和提交)
+    # Events 
     
-    # 點擊偵測按鈕 -> 執行 DeepFace -> 更新 score_input
+    # ★ 修改重點：按鈕點擊後，輸出目標改為 captured_image，不再覆蓋 webcam_input
     detect_btn.click(
         fn=detect_emotion_and_map,
         inputs=[webcam_input],
-        outputs=[webcam_input, score_input] # 同時更新圖片(畫字)和分數(Radio)
+        outputs=[captured_image, score_input] # 輸出到「右邊的截圖」和「分數選項」
     )
 
     # 提交按鈕
-    # 移除了 quiz_state 的輸入
     submit_btn.click(
         fn=mood_agent_logic,
         inputs=[score_input, food_input, diary_input, debug_mode_btn],