Update app.py

app.py

@@ -11,48 +11,135 @@ from langchain_community.vectorstores import FAISS
 from PIL import Image
 from dotenv import load_dotenv
 
-# --- 匯入組員的模組 ---
-import emotion 
+# --- [新增] 匯入組員的模組 ---
+import teammate_logic 
 # ---------------------------
 
-load_dotenv()
+load_dotenv()  # 自動尋找並載入 .env 檔案中的變數
 
 # ==========================================
-# 0. 環境變數 & 1. 系統初始化 (保持不變)
+# 0. 環境變數
 # ==========================================
 GROQ_API_KEY = os.getenv("GROQ_API_KEY")
 HF_TOKEN = os.getenv("HF_TOKEN")
 
+# 全域變數
 global_df = None
 global_mood_df = None
 global_retriever = None
 rag_initialized = False
 
+# ==========================================
+# 1. 系統初始化 (讀取 CSV + 讀取 FAISS)
+# ==========================================
 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')
-    except Exception: pass
+        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})
-        except Exception: pass
+            print("✅ FAISS 資料庫載入完成！")
+        except Exception as e:
+            print(f"❌ FAISS 載入失敗: {e}")
+    else:
+        print("⚠️ 警告：找不到 'faiss_index' 資料夾，RAG 功能將無法使用。")
+        print("請先執行 build_index.py 並上傳資料夾。")
+
     rag_initialized = True
 
 # ==========================================
-# 2. 核心功能 (保持不變)
+# 2. 小測驗與資源設定
 # ==========================================
+custom_css = """
+#hidden_tabs > .tab-nav { display: none !important; visibility: hidden !important; }
+#hidden_tabs > div > button { display: none !important; }
+.vertical-radio fieldset { display: flex !important; flex-direction: column !important; gap: 12px !important; }
+.vertical-radio label { width: 100% !important; margin: 0 !important; display: flex !important; }
+"""
+
+# 設定圖片路徑
+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_3.png" # Q4
+img_path_5 = "images/image_4.png" # Q5
+
+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]:
+    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 = {
+    "甚麼​都​不​想​​": "放空 (什麼都不想)",
+    "來​自​星星​的​你​": "韓劇迷 (浪漫愛情)",
+    "進擊​的​巨人​": "動漫迷 (熱血戰鬥)",
+    "洛基": "美劇迷 (懸疑燒腦)"
+}
+
+# ==========================================
+# 3. 核心功能
+# ==========================================
+
 def get_restaurant_data(mood_score_str, food_choice):
     init_rag_system()
     if global_df is None or global_df.empty: return None, True, "資料庫未載入", "無建議"
-    try: score = int(str(mood_score_str).split(' ')[0])
-    except: score = 3
+    
+    try:
+        score = int(str(mood_score_str).split(' ')[0])
+    except:
+        score = 3
+    
     mood_info = global_mood_df[global_mood_df['分數'] == score]
     if not mood_info.empty:
         rec_categories = mood_info.iloc[0]['推薦料理類別']
@@ -60,206 +147,258 @@ def get_restaurant_data(mood_score_str, food_choice):
     else:
         rec_categories = ""
         mood_reason = "隨意探索"
+
     candidates = global_df.copy()
+    
     if rec_categories:
         candidates = candidates[candidates['Category'].apply(lambda x: str(x) in str(rec_categories) or str(rec_categories) in str(x))]
+        
     food_keyword = "飯" if food_choice == "吃飯" else "麵" if food_choice == "吃麵" else ""
     if food_keyword:
-        candidates = candidates[candidates['Name'].str.contains(food_keyword, case=False, na=False) | candidates['RAG_Content'].str.contains(food_keyword, case=False, na=False)]
+        candidates = candidates[
+            candidates['Name'].str.contains(food_keyword, case=False, na=False) | 
+            candidates['RAG_Content'].str.contains(food_keyword, case=False, na=False)
+        ]
+    
     if candidates.empty:
-        result = global_df.sample(1).iloc[0]; is_random = True
+        result = global_df.sample(1).iloc[0]
+        is_random = True
     else:
-        result = candidates.sample(1).iloc[0]; is_random = False
+        result = candidates.sample(1).iloc[0]
+        is_random = False
+        
     return result, is_random, rec_categories, mood_reason
 
-def generate_content_with_groq(restaurant_name, restaurant_detail, user_diary, mood_score, mood_guide_reason, debug_mode=False):
+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"
+    
     client = OpenAI(api_key=GROQ_API_KEY, base_url="https://api.groq.com/openai/v1")
-    system_prompt = "你是一個幽默、懂吃且善解人意的 AI 朋友..."
-    user_msg = f"【狀態】心情分數：{mood_score}\n【日記】{user_diary}\n【建議原因】{mood_guide_reason}\n【餐廳】{restaurant_name}\n資料：{restaurant_detail}"
+    
+    system_prompt = "你是一個幽默、懂吃且善解人意的 AI 朋友。請根據使用者的日記、心情以及「心情美食指南」來推薦餐廳。"
+    
+    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', '未知')}
+    
+    【心情美食指南建議】
+    因為分數是 {mood_score}，建議吃這類食物的原因是：「{mood_guide_reason}」。
+    
+    【推薦餐廳】
+    名稱：{restaurant_name}
+    資料：{restaurant_detail}
+    
+    任務：
+    請用繁體中文寫一段溫暖有趣的回覆：
+    1. 綜合回應他的日記與上述 5 個測驗結果。
+    2. 引用「心情美食指南」的原因。
+    3. 介紹這家餐廳的特色。
+    (只需要回覆文字內容)
+    """
+    
     try:
-        response = client.chat.completions.create(model="llama-3.3-70b-versatile", messages=[{"role": "system", "content": system_prompt}, {"role": "user", "content": user_msg}])
-        return response.choices[0].message.content
-    except Exception as e: return f"Groq Error: {str(e)}"
+        response = client.chat.completions.create(
+            model="llama-3.3-70b-versatile", messages=[{"role": "system", "content": system_prompt}, {"role": "user", "content": user_msg}]
+        )
+        content = response.choices[0].message.content
+        
+        # 如果開啟除錯模式，附加 Prompt 資訊
+        if debug_mode:
+            debug_info = f"""
+            \n\n--- 🛠️ [DEBUG] LLM Prompt 檢查 ---
+            \n**System Prompt:**\n{system_prompt}
+            \n**User Message:**\n{user_msg}
+            \n-----------------------------------
+            """
+            return content + debug_info
+            
+        return content
+    except Exception as e:
+        return f"Groq Error: {str(e)}"
 
 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")
-    except: return None
+    except Exception as e:
+        print(f"❌ 生圖失敗: {e}")
+        return None
 
-def mood_agent_logic(score_input, food_input, diary_input, debug_mode):
+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')
+    
+    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])
-    ai_text = generate_content_with_groq(name, rag_info, diary_input, score_input, mood_reason, debug_mode)
-    final_response = f"### 🍽️ 推薦：{name}\n\n{ai_text}"
+        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
 
-
 # ==========================================
-# 3. [修正版] 橋接邏輯 (Bridge Functions)
+# 4. 介面互動邏輯
 # ==========================================
-
-# 這是 app.py 自己的格式 (注意：這裡是半形括號)
-def _score_to_radio_value(score):
-    mapping = {1: "1 (心情差)", 2: "2 (不太好)", 3: "3 (普通)", 4: "4 (不錯)", 5: "5 (超棒)"}
-    # 預防萬一 score 是 None 或其他怪怪的值
-    try:
-        score = int(score)
-    except:
-        score = 3
-    return mapping.get(score, "3 (普通)")
-
-# 橋接 1：開始
-def bridge_start_click(st):
-    res = emotion.on_restart(st)
-    return res[1], res[0], gr.update(visible=True), res[5], res[4]
-
-# 橋接 2：停止
-def bridge_stop_click(st):
-    res = emotion.on_stop(st)
-    return res[1], res[0], gr.update(visible=False), res[5], res[4]
-
-# 橋接 3：Webcam 串流 (修正分數填入問題)
-def bridge_predict_frame(frame, st):
-    res = emotion.on_stream(frame, st)
-    
-    out_cam = res[0]
-    out_result = res[1]
-    # out_mood = res[2] # ❌ 我們不使用隊友回傳的 UI 更新，因為括號格式不同
-    out_st = res[4]
-    out_btn_start = res[5]
-    
-    score_update = gr.update()
-    tabs_update = gr.update()
-    out_btn_stop = gr.update()
-
-    # 如果辨識完成，我們自己產生一個符合 app.py 格式的 UI 更新
-    if out_st.finished and hasattr(out_st, 'final_score'):
-        # ✅ 使用 _score_to_radio_value 將整數轉換為半形括號字串
-        new_val = _score_to_radio_value(out_st.final_score)
-        score_update = gr.update(value=new_val)
-        
-        tabs_update = gr.Tabs(selected=1)
-        out_btn_stop = gr.update(visible=False)
-        
-    return out_cam, out_result, out_st, out_btn_stop, out_btn_start, score_update, tabs_update
-
-# 橋接 4：圖片上傳 (修正分數填入問題)
-def bridge_predict_upload(img, st):
-    res = emotion.on_upload(img, st)
-    
-    out_result = res[0]
-    # out_mood = res[1] # ❌ 同樣忽略隊友的格式
-    out_st = res[2]
-    
-    score_update = gr.update()
-    tabs_update = gr.update()
-
-    if out_st.finished and hasattr(out_st, 'final_score'):
-        # ✅ 使用 _score_to_radio_value 將整數轉換為半形括號字串
-        new_val = _score_to_radio_value(out_st.final_score)
-        score_update = gr.update(value=new_val)
-        
-        tabs_update = gr.Tabs(selected=1)
-    
-    return out_result, score_update, tabs_update, out_st
-
+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")
+
+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="完成測驗 (前往點餐) ➔")
 
 # ==========================================
-# 4. Gradio 介面建構
+# 5. Gradio 介面建構
 # ==========================================
 
-combined_css = emotion.css 
+# --- [修改] 合併 CSS ---
+combined_css = custom_css + "\n" + teammate_logic.css
+# ---------------------
 
 with gr.Blocks(title="AI 心情食堂", css=combined_css) as demo:
-    
-    st_state = gr.State(emotion.AppState())
+    quiz_state = gr.State(value={})
 
-    with gr.Tabs() as tabs:
-        
-        # Tab 1: 情緒辨識
-        with gr.TabItem("😊 情緒辨識 (Step 1)", id=0):
-            with gr.Column(elem_id="app_container"):
-                gr.Markdown("### 第一步：測測你的心情能量\n讓 AI 看看你的表情，自動幫你決定心情分數！(辨識完畢會自動跳轉)")
-                
-                with gr.Row():
-                    btn_start = gr.Button("📸 開啟攝影機辨識", variant="primary")
-                    btn_stop  = gr.Button("⏹️ 停止", variant="secondary", visible=False)
-
-                cam = gr.Image(sources=["webcam"], streaming=True, type="numpy", label="攝影機畫面", visible=False)
-                result_markdown = gr.Markdown(emotion._hint_html("請按「開啟攝影機辨識」或下方上傳照片。"))
-                
-                gr.Markdown("---")
-                gr.Markdown("### 或者：上傳照片")
-                upload_img = gr.Image(sources=["upload"], type="numpy", label="上傳照片")
-
-        # Tab 2: 主功能區
-        with gr.TabItem("🍽️ AI 心情食堂 (Step 2)", id=1):
+    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(f"## 🍱 今天想吃點什麼？")
+                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)
+
+        # --- [新增] 組員功能 ---
+        with gr.TabItem("情緒辨識 (組員功能)", id=6):
+            teammate_logic.render_ui()  # 呼叫組員的介面渲染函式
+        # ----------------------------
+
+        # Tab 5: Main
+        with gr.TabItem("Main", id=5):
+            with gr.Column():
+                gr.Markdown(f"## 🍱 呷飽沒？？！")
                 with gr.Row():
                     with gr.Column(scale=1):
-                        # 这里的 Radio 选项使用的是半形括号
-                        score_input = gr.Radio(
-                            ["1 (心情差)", "2 (不太好)", "3 (普通)", "4 (不錯)", "5 (超棒)"], 
-                            label="1. 心情分數 (由 Tab 1 自動填入)", 
-                            value="3 (普通)"
-                        )
+                        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="🔧 開啟除錯模式", value=False)
-                        submit_btn = gr.Button("🍱 送出給 Agent", variant="primary")
-                    
+                        
+                        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="地圖導航")
 
-    # ==========================================
-    # 事件綁定
-    # ==========================================
-
-    btn_start.click(
-        fn=bridge_start_click,
-        inputs=[st_state],
-        outputs=[result_markdown, cam, btn_stop, btn_start, st_state],
-        show_progress="minimal"
-    )
+    # 事件綁定 (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)
 
-    btn_stop.click(
-        fn=bridge_stop_click,
-        inputs=[st_state],
-        outputs=[result_markdown, cam, btn_stop, btn_start, st_state],
-        show_progress="minimal"
-    )
+    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)
 
-    cam.stream(
-        fn=bridge_predict_frame,
-        inputs=[cam, st_state],
-        outputs=[cam, result_markdown, st_state, btn_stop, btn_start, score_input, tabs], 
-        show_progress="minimal"
-    )
+    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)
 
-    upload_img.change(
-        fn=bridge_predict_upload,
-        inputs=[upload_img, st_state],
-        outputs=[result_markdown, score_input, tabs, st_state], 
-        show_progress="minimal"
-    )
+    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)
 
     submit_btn.click(
         fn=mood_agent_logic,
-        inputs=[score_input, food_input, diary_input, debug_mode_btn],
+        inputs=[score_input, food_input, diary_input, quiz_state, debug_mode_btn],
         outputs=[agent_output, image_output, map_output]
     )