Update breed_recommendation.py

breed_recommendation.py

@@ -13,9 +13,8 @@ from search_history import create_history_tab, create_history_component
 def create_custom_button_style():
     return """
         <style>
-        /* 自定義按鈕樣式 */
         #find-match-btn {
-            background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
+            background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
             border: none;
             border-radius: 30px;
             padding: 12px 24px;
@@ -24,14 +23,18 @@ def create_custom_button_style():
             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;  /* 加大字體 */
         }
-
         #find-match-btn:hover {
-            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
-            opacity: 0.9;
+            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
+            opacity: 0.95;
+            transform: translateY(-1px);  /* 輕微上升效果 */
+        }
+        #find-match-btn:active {
+            transform: translateY(1px);  /* 點擊時下壓效果 */
         }
-
-        /* 搜尋中提示樣式 */
         #search-status {
             text-align: center;
             padding: 10px;
@@ -274,12 +277,6 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                 print(traceback.format_exc())
                 return ["Error getting recommendations", gr.HTML.update(visible=False)]
                 
-        get_recommendations_btn.click(
-            fn=lambda: gr.HTML.update(visible=True),
-            outputs=search_status,
-            queue=False  # 確保立即執行
-        )
-        
         get_recommendations_btn.click(
             fn=on_find_match_click,
             inputs=[
@@ -295,7 +292,13 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                 children_age,
                 noise_tolerance
             ],
-            outputs=[recommendation_output, search_status]
+            outputs=[recommendation_output, search_status],
+            _js="""
+            () => {
+                document.getElementById('search-status').style.display = 'block';
+                return [];
+            }
+            """  # 立即顯示搜尋狀態
         )
 
     return {