Update breed_recommendation.py

breed_recommendation.py

@@ -11,32 +11,33 @@ from search_history import create_history_tab, create_history_component
 def create_custom_button_style():
     return """
         <style>
-        #find-match-btn {
-            background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
-            border: none;
-            border-radius: 30px;
-            padding: 12px 24px;
-            color: white;
-            font-weight: bold;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            width: 100%;
-            margin: 20px 0;
-            font-size: 1.1em;
-            position: relative;
-            overflow: hidden;
+        /* 確保選擇器精確匹配 */
+        button#find-match-btn {
+            background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%) !important;
+            border: none !important;
+            border-radius: 30px !important;
+            padding: 12px 24px !important;
+            color: white !important;
+            font-weight: bold !important;
+            cursor: pointer !important;
+            transition: all 0.3s ease !important;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
+            width: 100% !important;
+            margin: 20px 0 !important;
+            font-size: 1.1em !important;
         }
-        #find-match-btn:hover {
-            background: linear-gradient(90deg, #ff4f5d 0%, #ffb361 100%);
-            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
-            transform: translateY(-2px);
-            letter-spacing: 0.5px;  /* 文字間距略微增加 */
+
+        button#find-match-btn:hover {
+            background: linear-gradient(90deg, #ff4f5d 0%, #ffb361 100%) !important;
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
+            transform: translateY(-2px) !important;
         }
-        #find-match-btn:active {
-            transform: translateY(1px);
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+        button#find-match-btn:active {
+            transform: translateY(1px) !important;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
         }
+
         #search-status {
             text-align: center;
             padding: 15px;
@@ -46,6 +47,12 @@ def create_custom_button_style():
             border-radius: 8px;
             background: rgba(255, 95, 109, 0.1);
         }
+
+        /* 強制覆蓋任何其他樣式 */
+        .gradio-button {
+            position: relative !important;
+            overflow: visible !important;
+        }
         </style>
     """
 
@@ -203,17 +210,17 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                 )
                 gr.HTML(create_custom_button_style())
 
+                get_recommendations_btn = gr.Button(
+                        "Find My Perfect Match! 🔍",
+                        elem_id="find-match-btn"  
+                    )
+
                 search_status = gr.HTML(
                         '<div id="search-status">🔍 Sniffing out your perfect furry companion...</div>',
                         visible=False,
                         elem_id="search-status-container"
                     )
 
-                get_recommendations_btn = gr.Button(
-                        "Find My Perfect Match! 🔍",
-                        elem_id="find-match-btn"  # 添加自定義ID
-                    )
-
                 recommendation_output = gr.HTML(
                     label="Breed Recommendations",
                     visible=True,  # 確保可見性
@@ -273,7 +280,7 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
 
                 return [
                     format_recommendation_html(recommendations, is_description_search=False),
-                    gr.update(visible=True)  
+                    gr.update(visible=False)  
                 ]
 
             except Exception as e:
@@ -285,10 +292,14 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
         def update_status_and_process(*args):
             return [
                 "",  # 清空現有結果
-                gr.HTML.update(visible=True)  # 顯示載入狀態
+                gr.update(visible=True)  
             ]
-                
+        
         get_recommendations_btn.click(
+            fn=update_status_and_process,  # 先執行狀態更新
+            outputs=[recommendation_output, search_status],
+            queue=False  # 確保狀態更新立即執行
+        ).then(  # 然後執行主要處理邏輯
             fn=on_find_match_click,
             inputs=[
                 living_space,