Update app.py

app.py

@@ -10,131 +10,49 @@ from langchain_huggingface import HuggingFaceEmbeddings
 from langchain_community.vectorstores import FAISS
 from PIL import Image
 from dotenv import load_dotenv
-load_dotenv()  # 自動尋找並載入 .env 檔案中的變數
+
+# --- 匯入組員的模組 ---
+import emotion 
+# ---------------------------
+
+load_dotenv()
 
 # ==========================================
-# 0. 環境變數
+# 0. 環境變數 & 1. 系統初始化 (保持不變)
 # ==========================================
 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')
-        print(f"✅ CSV 資料讀取成功 (餐廳: {len(global_df)} 筆)")
-    except Exception as e:
-        print(f"❌ CSV 讀取失敗: {e}")
-        return
-
-    # --- B. 讀取預先建立好的 FAISS 索引 ---
+    except Exception: pass
     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 並上傳資料夾。")
-
+        except Exception: pass
     rag_initialized = True
 
 # ==========================================
-# 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 = {
-    "甚麼​都​不​想​​": "放空 (什麼都不想)",
-    "來​自​星星​的​你​": "韓��迷 (浪漫愛情)",
-    "進擊​的​巨人​": "動漫迷 (熱血戰鬥)",
-    "洛基": "美劇迷 (懸疑燒腦)"
-}
-
+# 2. 核心功能 (保持不變)
 # ==========================================
-# 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]['推薦料理類別']
@@ -142,253 +60,206 @@ 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
 
-# [修改] 增加 debug_mode 參數
-def generate_content_with_groq(restaurant_name, restaurant_detail, user_diary, mood_score, quiz_result, mood_guide_reason, debug_mode=False):
+def generate_content_with_groq(restaurant_name, restaurant_detail, user_diary, mood_score, 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}，日記：{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. 介紹這家餐廳的特色。
-    (只需要回覆文字內容)
-    """
-    
+    system_prompt = "你是一個幽默、懂吃且善解人意的 AI 朋友..."
+    user_msg = f"【狀態】心情分數：{mood_score}\n【日記】{user_diary}\n【建議原因】{mood_guide_reason}\n【餐廳】{restaurant_name}\n資料：{restaurant_detail}"
     try:
-        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)}"
+        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)}"
 
 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 Exception as e:
-        print(f"❌ 生圖失敗: {e}")
-        return None
+    except: return None
 
-# [修改] 增加 debug_mode 參數
-def mood_agent_logic(score_input, food_input, diary_input, quiz_state, debug_mode):
+def mood_agent_logic(score_input, food_input, diary_input, 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 檢索
+    if restaurant is None: yield "資料庫讀取錯誤", None, ""; return
+    name = restaurant['Name']; address = restaurant['Address']; url = restaurant['URL']; img_prompt = restaurant.get('Visual_prompt')
     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])
-
-    # [修改] 傳入 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}"
+        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}"
     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. 介面互動邏輯
+# 3. [修正版] 橋接邏輯 (Bridge Functions)
 # ==========================================
-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="完成測驗 (前往點餐) ➔")
+
+# 這是 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
+
 
 # ==========================================
-# 5. Gradio 介面建構
+# 4. Gradio 介面建構
 # ==========================================
-with gr.Blocks(title="AI 心情食堂") as demo:
-    gr.HTML(f"<style>{custom_css}</style>")
-    quiz_state = gr.State(value={})
 
-    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 5: Main
-        with gr.TabItem("Main", id=5):
+combined_css = emotion.css 
+
+with gr.Blocks(title="AI 心情食堂", css=combined_css) as demo:
+    
+    st_state = gr.State(emotion.AppState())
+
+    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.Column():
-                gr.Markdown(f"## 🍱 呷飽沒？？！")
+                gr.Markdown(f"## 🍱 今天想吃點什麼？")
                 with gr.Row():
                     with gr.Column(scale=1):
-                        score_input = gr.Radio(["1 (心情差)", "2 (不太好)", "3 (普通)", "4 (不錯)", "5 (超棒)"], label="1. 心情分數", value="3 (普通)")
+                        # 这里的 Radio 选项使用的是半形括号
+                        score_input = gr.Radio(
+                            ["1 (心情差)", "2 (不太好)", "3 (普通)", "4 (不錯)", "5 (超棒)"], 
+                            label="1. 心情分數 (由 Tab 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")
+                        debug_mode_btn = gr.Checkbox(label="🔧 開啟除錯模式", 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)
+    btn_start.click(
+        fn=bridge_start_click,
+        inputs=[st_state],
+        outputs=[result_markdown, cam, btn_stop, btn_start, st_state],
+        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)
+    btn_stop.click(
+        fn=bridge_stop_click,
+        inputs=[st_state],
+        outputs=[result_markdown, cam, btn_stop, btn_start, st_state],
+        show_progress="minimal"
+    )
+
+    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_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)
+    upload_img.change(
+        fn=bridge_predict_upload,
+        inputs=[upload_img, st_state],
+        outputs=[result_markdown, score_input, tabs, st_state], 
+        show_progress="minimal"
+    )
 
-    # [修改] 加入 debug_mode_btn 到輸入
     submit_btn.click(
         fn=mood_agent_logic,
-        inputs=[score_input, food_input, diary_input, quiz_state, debug_mode_btn],
+        inputs=[score_input, food_input, diary_input, debug_mode_btn],
         outputs=[agent_output, image_output, map_output]
     )