Update app.py

app.py

@@ -6,6 +6,7 @@ import time
 import requests
 import urllib.parse
 import pandas as pd
+import random  # [新增] 用於隨機抽選
 from langchain_huggingface import HuggingFaceEmbeddings
 from langchain_community.vectorstores import FAISS
 from PIL import Image
@@ -25,46 +26,33 @@ global_retriever = None
 rag_initialized = False
 
 # ==========================================
-# 1. 系統初始化 (讀取 CSV + 讀取 FAISS)
+# 1. 系統初始化 (維持不變)
 # ==========================================
 def init_rag_system():
     global global_df, global_mood_df, global_retriever, rag_initialized
-    
     if rag_initialized: return
-
     print("⏳ 正在初始化系統...")
-    
-    # --- A. 讀取 CSV (用於篩選與對照) ---
     try:
         global_df = pd.read_csv('restaurants.csv')
         global_df['RAG_Content'] = global_df['RAG_Content'].fillna("")
         global_df['Category'] = global_df['Category'].fillna("其他")
-        
         global_mood_df = pd.read_csv('mood_food_guide.csv')
         print(f"✅ CSV 資料讀取成功 (餐廳: {len(global_df)} 筆)")
     except Exception as e:
         print(f"❌ CSV 讀取失敗: {e}")
         return
 
-    # --- B. 讀取預先建立好的 FAISS 索引 ---
     if os.path.exists("faiss_index"):
         try:
             print("⏳ 正在載入 FAISS 向量資料庫...")
             embeddings = HuggingFaceEmbeddings(model_name="sentence-transformers/all-MiniLM-L6-v2")
-            
-            vectorstore = FAISS.load_local(
-                "faiss_index", 
-                embeddings, 
-                allow_dangerous_deserialization=True
-            )
+            vectorstore = FAISS.load_local("faiss_index", embeddings, allow_dangerous_deserialization=True)
             global_retriever = vectorstore.as_retriever(search_kwargs={"k": 3})
             print("✅ FAISS 資料庫載入完成！")
         except Exception as e:
             print(f"❌ FAISS 載入失敗: {e}")
     else:
         print("⚠️ 警告：找不到 'faiss_index' 資料夾，RAG 功能將無法使用。")
-        print("請先執行 build_index.py 並上傳資料夾。")
-
     rag_initialized = True
 
 # ==========================================
@@ -78,54 +66,78 @@ custom_css = """
 """
 
 # 設定圖片路徑
-img_path_1 = "images/image_0.png"
-img_path_2 = "images/image_1.png"
-img_path_3 = "images/image_2.png" # Q3
-img_path_4 = "images/image_4.png" # Q4
-img_path_5 = "images/image_3.png" # Q5
-
+img_paths = {
+    "q1": "images/image_0.png",
+    "q2": "images/image_1.png",
+    "q3": "images/image_2.png",
+    "q4": "images/image_3.png",
+    "q5": "images/image_4.png"
+}
 if not os.path.exists("images"): os.makedirs("images")
-for p in [img_path_1, img_path_2, img_path_3, img_path_4, img_path_5]:
+for p in img_paths.values():
     if not os.path.exists(p): 
         Image.new('RGB', (400, 300), color='lightgray').save(p)
 
-# --- 選項設定 ---
-q1_options_map = {
-    "不​要​再​問白癡​問題​了​我​只​想​吃飯​": "現實主義者 (只想吃飯)",
-    "去​過隱​居​生活": "隱士 (嚮往平靜)",
-    "加入​禁衛軍，​保衛​這個​世界": "守護者 (充滿正義感)",
-    "神​羅​天​征，毀滅這個​世界​": "破壞神 (心情可能很差或很中二)"
-}
-q2_options_map = {
-    "不​要​再​問白癡​問題​了​我​只​想​吃飯​": "無魔法 (飢餓度MAX)",
-    "麵​包形狀​的​魔法​炸彈": "爆炸魔法 (喜歡刺激/重口味)",
-    "毒氣​的​生化​魔法": "毒氣魔法 (可能想吃臭豆腐或特殊風味)",
-    "領域​展開:​無量​空處​": "領域展開 (思緒混亂或想放空)"
-}
-q3_options_map = {
-    "不​要​在​問白癡​問題​了​我​只​想​吃飯​": "現實主義者 (只想吃飯)",
-    "歐洲": "嚮往歐洲 (浪漫/西式)",
-    "日本": "嚮往日本 (精緻/日式)",
-    "泰國": "嚮往泰國 (熱情/酸辣)",
-    "轉身搭機捷回家": "戀家 (只想回家)"
-}
-q4_options_map = {
-    "轉頭​回家​睡覺​": "獨行俠 (想睡覺)",
-    "看​起來​很​會玩​的​帥潮​": "外向 (找帥潮)",
-    "感覺​是​動漫宅​的​同好​": "御宅族 (找同好)",
-    "有​興趣​的​異性​": "大膽 (找異性)"
-}
-q5_options_map = {
-    "甚麼​都​不​想​​": "放空 (什麼都不想)",
-    "來​自​星星​的​你​": "韓劇迷 (浪漫愛情)",
-    "進擊​的​巨人​": "動漫迷 (熱血戰鬥)",
-    "洛基": "美劇迷 (懸疑燒腦)"
+# --- 選項設定 (放入同一個字典方便管理) ---
+OPTIONS_MAP = {
+    "q1": {
+        "title": "直覺測試",
+        "question": "請觀察圖片，如果是你，你會怎麼做？",
+        "options": {
+            "不​要​再​問白癡​問題​了​我​只​想​吃飯​": "現實主義者 (只想吃飯)",
+            "去​過隱​居​生活": "隱士 (嚮往平靜)",
+            "加入​禁衛軍，​保衛​這個���世界": "守護者 (充滿正義感)",
+            "神​羅​天​征，毀滅這個​世界​": "破壞神 (心情可能很差或很中二)"
+        }
+    },
+    "q2": {
+        "title": "魔法適性",
+        "question": "身為魔導士的你，會選擇哪一個法術？",
+        "options": {
+            "不​要​再​問白癡​問題​了​我​只​想​吃飯​": "無魔法 (飢餓度MAX)",
+            "麵​包形狀​的​魔法​炸彈": "爆炸魔法 (喜歡刺激/重口味)",
+            "毒氣​的​生化​魔法": "毒氣魔法 (可能想吃臭豆腐或特殊風味)",
+            "領域​展開:​無量​空處​": "領域展開 (思緒混亂或想放空)"
+        }
+    },
+    "q3": {
+        "title": "旅遊直覺",
+        "question": "不考慮其他因素，假你在桃機你最想去哪裡玩？",
+        "options": {
+            "不​要​在​問白癡​問題​了​我​只​想​吃飯​": "現實主義者 (只想吃飯)",
+            "歐洲": "嚮往歐洲 (浪漫/西式)",
+            "日本": "嚮往日本 (精緻/日式)",
+            "泰國": "嚮往泰國 (熱情/酸辣)",
+            "轉身搭機捷回家": "戀家 (只想回家)"
+        }
+    },
+    "q4": {
+        "title": "社交場合",
+        "question": "你是小大一，班上還不熟，現在你正參加你們班上的認識彼此的活動，下列哪一個人是你會選擇搭話的人？",
+        "options": {
+            "轉頭​回家​睡覺​": "獨行俠 (想睡覺)",
+            "看​起來​很​會玩​的​帥潮​": "外向 (找帥潮)",
+            "感覺​是​動漫宅​的​同好​": "御宅族 (找同好)",
+            "有​興趣​的​異性​": "大膽 (找異性)"
+        }
+    },
+    "q5": {
+        "title": "追劇時光",
+        "question": "假設失憶了忘記以下所列的劇的劇情，而你現在閒了下來剛好想看劇，你會想看哪一部？",
+        "options": {
+            "甚麼​都​不​想​​": "放空 (什麼都不想)",
+            "來​自​星星​的​你​": "韓劇迷 (浪漫愛情)",
+            "進擊​的​巨人​": "動漫迷 (熱血戰鬥)",
+            "洛基": "美劇迷 (懸疑燒腦)"
+        }
+    }
 }
 
 # ==========================================
 # 3. 核心功能
 # ==========================================
 
+# ... get_restaurant_data 維持不變 ...
 def get_restaurant_data(mood_score_str, food_choice):
     init_rag_system()
     if global_df is None or global_df.empty: return None, True, "資料庫未載入", "無建議"
@@ -164,7 +176,7 @@ def get_restaurant_data(mood_score_str, food_choice):
         
     return result, is_random, rec_categories, mood_reason
 
-# [修改] 增加 debug_mode 參數
+# [修改] Prompt 生成邏輯：動態讀取 quiz_result
 def generate_content_with_groq(restaurant_name, restaurant_detail, user_diary, mood_score, quiz_result, mood_guide_reason, debug_mode=False):
     if not GROQ_API_KEY: return "⚠️ 請設定 GROQ_API_KEY"
     
@@ -172,15 +184,21 @@ def generate_content_with_groq(restaurant_name, restaurant_detail, user_diary, m
     
     system_prompt = "你是一個幽默、懂吃且善解人意的 AI 朋友。請根據使用者的日記、心情以及「心情美食指南」來推薦餐廳。"
     
+    # [新增] 格式化測驗結果字串
+    quiz_summary = ""
+    if quiz_result:
+        for q_key, answer_text in quiz_result.items():
+            # 取得題目的標題 (例如: 追劇時光)
+            title = OPTIONS_MAP.get(q_key, {}).get("title", q_key)
+            quiz_summary += f"- {title}：{answer_text}\n"
+    else:
+        quiz_summary = "（使用者未進行測驗或無資料）"
+
     user_msg = f"""
     【狀態】心情分數：{mood_score}，日記：{user_diary}
     
-    【五題測驗結果】
-    1. 人設直覺：{quiz_result.get('q1', '未知')}
-    2. 魔法適性：{quiz_result.get('q2', '未知')}
-    3. 旅遊偏好：{quiz_result.get('q3', '未知')}
-    4. 社交選擇：{quiz_result.get('q4', '未知')}
-    5. 追劇偏好：{quiz_result.get('q5', '未知')}
+    【隨機測驗結果】
+    {quiz_summary}
     
     【心情美食指南建議】
     因為分數是 {mood_score}，建議吃這類食物的原因是：「{mood_guide_reason}」。
@@ -191,7 +209,7 @@ def generate_content_with_groq(restaurant_name, restaurant_detail, user_diary, m
     
     任務：
     請用繁體中文寫一段溫暖有趣的回覆：
-    1. 綜合回應他的日記與上述 5 個測驗結果。
+    1. 綜合回應他的日記與上述測驗結果（請針對他有回答的部分做連結即可）。
     2. 引用「心情美食指南」的原因。
     3. 介紹這家餐廳的特色。
     (只需要回覆文字內容)
@@ -203,7 +221,6 @@ def generate_content_with_groq(restaurant_name, restaurant_detail, user_diary, m
         )
         content = response.choices[0].message.content
         
-        # [修改] 如果開啟除錯模���，附加 Prompt 資訊
         if debug_mode:
             debug_info = f"""
             \n\n--- 🛠️ [DEBUG] LLM Prompt 檢查 ---
@@ -217,10 +234,10 @@ def generate_content_with_groq(restaurant_name, restaurant_detail, user_diary, m
     except Exception as e:
         return f"Groq Error: {str(e)}"
 
+# ... generate_image_huggingface 維持不變 ...
 def generate_image_huggingface(prompt):
     if not HF_TOKEN: return None
     if not prompt or pd.isna(prompt): prompt = "Delicious gourmet food, photorealistic, 8k"
-        
     try:
         hf_client = InferenceClient(token=HF_TOKEN)
         return hf_client.text_to_image(prompt=prompt, model="stabilityai/stable-diffusion-xl-base-1.0")
@@ -228,166 +245,182 @@ def generate_image_huggingface(prompt):
         print(f"❌ 生圖失敗: {e}")
         return None
 
-# [修改] 增加 debug_mode 參數
+# ... mood_agent_logic 維持不變 ...
 def mood_agent_logic(score_input, food_input, diary_input, quiz_state, debug_mode):
     restaurant, is_random, rec_categories, mood_reason = get_restaurant_data(score_input, food_input)
-    
     if restaurant is None:
         yield "資料庫讀取錯誤", None, ""
         return
-
     name = restaurant['Name']
     address = restaurant['Address']
     url = restaurant['URL']
     img_prompt = restaurant.get('Visual_prompt') 
     note = "(隨機推薦)" if is_random else ""
-
-    # RAG 檢索
     rag_info = str(restaurant.get('RAG_Content', ''))
     if global_retriever:
         docs = global_retriever.invoke(name)
-        if docs:
-            rag_info = "\n".join([d.page_content for d in docs])
+        if docs: rag_info = "\n".join([d.page_content for d in docs])
 
-    # [修改] 傳入 debug_mode
     ai_text = generate_content_with_groq(name, rag_info, diary_input, score_input, quiz_state, mood_reason, debug_mode)
     
-    # [修改] 如果開啟除錯模式，附加圖片 Prompt 資訊
     if debug_mode:
         img_debug_info = f"""
         \n\n--- 🛠️ [DEBUG] 圖片生成檢查 ---
         \n**使用的 Visual Prompt:**\n{img_prompt}
-        \n(如果上方圖片為空白，可能是 HF API 忙碌或 Prompt 無效)
         \n-----------------------------------
         """
         ai_text += img_debug_info
 
     final_response = f"### 🍽️ 推薦：{name} {note}\n\n{ai_text}"
     map_html = f'<div style="text-align:center"><a href="{url}" target="_blank" style="background:#4CAF50;color:white;padding:8px 16px;border-radius:20px;text-decoration:none">🗺️ Google Map 導航</a></div>'
-    
     yield final_response, None, map_html
     image_output = generate_image_huggingface(img_prompt)
     yield final_response, image_output, map_html
 
 # ==========================================
-# 4. 介面互動邏輯
+# 4. 隨機與導航邏輯 (重點修改區)
 # ==========================================
-def handle_q1_change(selected_label, current_state):
-    if not selected_label: return current_state, gr.Button(interactive=False)
-    current_state["q1"] = q1_options_map[selected_label]
-    return current_state, gr.Button(interactive=True, variant="primary")
-
-def handle_q2_change(selected_label, current_state):
-    if not selected_label: return current_state, gr.Button(interactive=False)
-    current_state["q2"] = q2_options_map[selected_label]
-    return current_state, gr.Button(interactive=True, variant="primary")
-
-def handle_q3_change(selected_label, current_state):
-    if not selected_label: return current_state, gr.Button(interactive=False)
-    current_state["q3"] = q3_options_map[selected_label]
-    return current_state, gr.Button(interactive=True, variant="primary")
 
-def handle_q4_change(selected_label, current_state):
-    if not selected_label: return current_state, gr.Button(interactive=False)
-    current_state["q4"] = q4_options_map[selected_label]
-    return current_state, gr.Button(interactive=True, variant="primary")
+# 開始測驗：隨機選 2 題
+def start_quiz_logic(current_state):
+    # 從 0 到 4 (對應 q1~q5) 中隨機取 2 個不重複的數字
+    selected_indices = random.sample(range(5), 2)
+    # 儲存題目順序，例如 [2, 0] 代表先做 Q3 再做 Q1
+    current_state["flow"] = selected_indices
+    current_state["current_step_index"] = 0 # 目前在 flow 中的第幾個
+    current_state["answers"] = {} # 重置答案
+    
+    first_q_index = selected_indices[0]
+    print(f"🎲 隨機抽選題目索引: {selected_indices}")
+    
+    # 回傳：更新後的 State, 跳轉到第一個題目的 Tab ID
+    return current_state, gr.Tabs(selected=first_q_index)
+
+# 處理導航：決定去下一題還是去 Main
+def navigate_logic(q_key, selected_option, current_state):
+    if not selected_option: 
+        return current_state, gr.Tabs() # 沒選答案就不動
+
+    # 1. 儲存答案
+    options_dict = OPTIONS_MAP[q_key]["options"]
+    answer_value = options_dict.get(selected_option, selected_option)
+    current_state["answers"][q_key] = answer_value
+    
+    # 2. 判斷下一步
+    flow = current_state.get("flow", [])
+    current_step = current_state.get("current_step_index", 0)
+    
+    # 如果還有下一題
+    if current_step < len(flow) - 1:
+        next_step = current_step + 1
+        current_state["current_step_index"] = next_step
+        next_q_index = flow[next_step]
+        print(f"➡️ 前往下一題: Index {next_q_index}")
+        return current_state, gr.Tabs(selected=next_q_index)
+    else:
+        # 已經是最後一題，前往 Main (ID: 5)
+        print("🏁 測驗結束，前往結果頁")
+        return current_state, gr.Tabs(selected=5)
 
-def handle_q5_change(selected_label, current_state):
-    if not selected_label: return current_state, gr.Button(interactive=False)
-    current_state["q5"] = q5_options_map[selected_label]
-    return current_state, gr.Button(interactive=True, variant="primary", value="完成測驗 (前往點餐) ➔")
+# 為了讓按鈕啟用/禁用正常運作的輔助函式
+def on_radio_select(val):
+    return gr.Button(interactive=True, variant="primary")
 
 # ==========================================
 # 5. Gradio 介面建構
 # ==========================================
 with gr.Blocks(title="AI 心情食堂") as demo:
     gr.HTML(f"<style>{custom_css}</style>")
-    quiz_state = gr.State(value={})
+    
+    # 狀態變數：存放 flow(題目順序), answers(答案), current_step_index
+    quiz_state = gr.State(value={"flow": [], "answers": {}, "current_step_index": 0})
 
     with gr.Tabs(elem_id="hidden_tabs") as tabs:
-        # Tab 0: Q1
-        with gr.TabItem("Q1", id=0):
-            with gr.Column():
-                gr.Markdown("### 🔮 第一題：直覺測試")
-                gr.Image(value=img_path_1, type="filepath", label="請觀察圖片", height=300)
-                gr.Markdown("**問題：請觀察上方圖片，如果是你，你會怎麼做？**")
-                radio_q1 = gr.Radio(choices=list(q1_options_map.keys()), label="請選擇", elem_classes="vertical-radio")
-                btn_q1_next = gr.Button("下一頁 ➔", interactive=False)
-
-        # Tab 1: Q2
-        with gr.TabItem("Q2", id=1):
-            with gr.Column():
-                gr.Markdown("### 🔮 第二題：魔法適性")
-                gr.Image(value=img_path_2, type="filepath", label="請觀察圖片", height=300)
-                gr.Markdown("**問題：身為魔導士的你，會選擇哪一個法術？**")
-                radio_q2 = gr.Radio(choices=list(q2_options_map.keys()), label="請選擇", elem_classes="vertical-radio")
-                btn_q2_next = gr.Button("下一頁 ➔", interactive=False)
-
-        # Tab 2: Q3
-        with gr.TabItem("Q3", id=2):
-            with gr.Column():
-                gr.Markdown("### 🔮 第三題：旅遊直覺")
-                gr.Image(value=img_path_3, type="filepath", label="請觀察圖片", height=300)
-                gr.Markdown("**問題三：不考慮其他因素，假你在桃機你最想去哪裡玩？**")
-                radio_q3 = gr.Radio(choices=list(q3_options_map.keys()), label="請選擇", elem_classes="vertical-radio")
-                btn_q3_next = gr.Button("下一頁 ➔", interactive=False)
-
-        # Tab 3: Q4
-        with gr.TabItem("Q4", id=3):
-            with gr.Column():
-                gr.Markdown("### 🔮 第四題：社交場合")
-                gr.Image(value=img_path_4, type="filepath", label="請觀察圖片", height=300)
-                gr.Markdown("**問題四：你是小大一，班上還不熟，現在你正參加你們班上的認識彼此的活動，下列哪一個人是你會選擇搭話的人？**")
-                radio_q4 = gr.Radio(choices=list(q4_options_map.keys()), label="請選擇", elem_classes="vertical-radio")
-                btn_q4_next = gr.Button("下一頁 ➔", interactive=False)
-
-        # Tab 4: Q5
-        with gr.TabItem("Q5", id=4):
-            with gr.Column():
-                gr.Markdown("### 🔮 第五題：追劇時光")
-                gr.Image(value=img_path_5, type="filepath", label="請觀察圖片", height=300)
-                gr.Markdown("**問題五：假設失憶了忘記以下所列的劇的劇情，而你現在閒了下來剛好想看劇，你會想看哪一部？**")
-                radio_q5 = gr.Radio(choices=list(q5_options_map.keys()), label="請選擇", elem_classes="vertical-radio")
-                btn_q5_finish = gr.Button("完成測驗 ➔", interactive=False)
+        
+        # [新增] Tab -1: 開始頁面 (作為預設頁)
+        with gr.TabItem("Start", id=-1):
+            with gr.Column(elem_classes="start-page"):
+                gr.Markdown("# 🔮 AI 心情食堂 - 命運測驗")
+                gr.Markdown("在為您推薦美食之前，請回答 **2 個隨機問題**，讓我們更了解您現在的狀態。")
+                start_btn = gr.Button("開始隨機測驗 ➔", variant="primary", size="lg")
+
+        # 動態生成 Q1 ~ Q5 的頁面 (ID 0 ~ 4)
+        # 我們可以用迴圈來建立，讓程式碼更乾淨
+        radios = {}
+        buttons = {}
+        
+        # 依序建立 Q1(0), Q2(1), Q3(2), Q4(3), Q5(4)
+        keys = ["q1", "q2", "q3", "q4", "q5"]
+        for idx, key in enumerate(keys):
+            cfg = OPTIONS_MAP[key]
+            with gr.TabItem(key.upper(), id=idx):
+                with gr.Column():
+                    gr.Markdown(f"### 🔮 {cfg['title']}")
+                    gr.Image(value=img_paths[key], type="filepath", label="請觀察圖片", height=300)
+                    gr.Markdown(f"**問題：{cfg['question']}**")
+                    
+                    # 建立 Radio
+                    r = gr.Radio(choices=list(cfg["options"].keys()), label="請選擇", elem_classes="vertical-radio")
+                    radios[key] = r
+                    
+                    # 建立按鈕 (預設禁用)
+                    b = gr.Button("下一頁 ➔", interactive=False)
+                    buttons[key] = b
 
         # Tab 5: Main
         with gr.TabItem("Main", id=5):
             with gr.Column():
                 gr.Markdown(f"## 🍱 呷飽沒？？！")
+                gr.Markdown("測驗結束！請填寫最後的需求：")
                 with gr.Row():
                     with gr.Column(scale=1):
                         score_input = gr.Radio(["1 (心情差)", "2 (不太好)", "3 (普通)", "4 (不錯)", "5 (超棒)"], label="1. 心情分數", value="3 (普通)")
                         food_input = gr.Radio(["吃飯", "吃麵", "隨便"], label="2. 想吃什麼", value="隨便")
                         diary_input = gr.Textbox(lines=4, label="3. 心情日記", placeholder="寫下今天發生的事...")
-                        
-                        # [新增] 除錯模式開關
                         debug_mode_btn = gr.Checkbox(label="🔧 開啟除錯模式 (顯示 Prompt 與圖片資訊)", value=False)
-                        
                         submit_btn = gr.Button("送出給 Agent", variant="primary")
                     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)
-    radio_q1.change(fn=handle_q1_change, inputs=[radio_q1, quiz_state], outputs=[quiz_state, btn_q1_next])
-    btn_q1_next.click(fn=lambda: gr.Tabs(selected=1), outputs=tabs)
-    
-    radio_q2.change(fn=handle_q2_change, inputs=[radio_q2, quiz_state], outputs=[quiz_state, btn_q2_next])
-    btn_q2_next.click(fn=lambda: gr.Tabs(selected=2), outputs=tabs)
-
-    radio_q3.change(fn=handle_q3_change, inputs=[radio_q3, quiz_state], outputs=[quiz_state, btn_q3_next])
-    btn_q3_next.click(fn=lambda: gr.Tabs(selected=3), outputs=tabs)
+    # --- 事件綁定 ---
 
-    radio_q4.change(fn=handle_q4_change, inputs=[radio_q4, quiz_state], outputs=[quiz_state, btn_q4_next])
-    btn_q4_next.click(fn=lambda: gr.Tabs(selected=4), outputs=tabs)
+    # 1. 開始按鈕：觸發隨機邏輯 -> 跳到第一題
+    start_btn.click(
+        fn=start_quiz_logic,
+        inputs=[quiz_state],
+        outputs=[quiz_state, tabs]
+    )
 
-    radio_q5.change(fn=handle_q5_change, inputs=[radio_q5, quiz_state], outputs=[quiz_state, btn_q5_finish])
-    btn_q5_finish.click(fn=lambda: gr.Tabs(selected=5), outputs=tabs)
+    # 2. 綁定每一題的 Radio 與 Button
+    # 使用閉包 (Closure) 來確保 loop 中的 key 是正確的
+    for key in keys:
+        # 當選擇 Radio 時，啟用按鈕
+        radios[key].change(fn=on_radio_select, inputs=[radios[key]], outputs=[buttons[key]])
+        
+        # 當按下按鈕時，執行導航邏輯
+        # 注意：我們需要傳入固定的 key (如 "q1") 給 navigate_logic
+        # 這裡用 partial 或 default arg trick
+        buttons[key].click(
+            fn=lambda k=key, opt=None, state=None: navigate_logic(k, opt, state), # Wrapper for safely passing key
+            inputs=[gr.State(key), radios[key], quiz_state], # gr.State(key) is a trick, or just use partial
+            outputs=[quiz_state, tabs]
+        )
+        # 更正：上面的 lambda 寫法在 inputs 混用有點怪，改用更有保證的寫法：
+        def make_handler(k):
+            return lambda opt, state: navigate_logic(k, opt, state)
+            
+        buttons[key].click(
+            fn=make_handler(key),
+            inputs=[radios[key], quiz_state],
+            outputs=[quiz_state, tabs]
+        )
 
-    # [修改] 加入 debug_mode_btn 到輸入
+    # 3. 送出給 Agent
+    # 注意：我們要傳入 quiz_state["answers"] 給後端
     submit_btn.click(
-        fn=mood_agent_logic,
+        fn=lambda s, f, d, st, db: mood_agent_logic(s, f, d, st["answers"], db),
         inputs=[score_input, food_input, diary_input, quiz_state, debug_mode_btn],
         outputs=[agent_output, image_output, map_output]
     )