Update breed_recommendation.py

breed_recommendation.py

@@ -23,24 +23,22 @@ 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;  /* 加大字體 */
+            width: 100%;
+            margin: 20px 0;
+            font-size: 1.1em;
         }
         #find-match-btn:hover {
             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;
+            padding: 15px;
             font-size: 1.1em;
             color: #666;
-            display: none;
+            margin: 10px 0;
+            border-radius: 8px;
+            background: rgba(255, 95, 109, 0.1);
         }
         </style>
     """
@@ -215,6 +213,9 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                     elem_id="recommendation-output"  
                 )
 
+        def show_loading_status():
+            return gr.HTML.update(visible=True)
+
         def on_find_match_click(*args):
             try:
                 print("Starting breed matching process...")
@@ -278,6 +279,10 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                 return ["Error getting recommendations", gr.HTML.update(visible=False)]
                 
         get_recommendations_btn.click(
+            fn=show_loading_status,
+            outputs=search_status,
+            queue=False
+        ).then(
             fn=on_find_match_click,
             inputs=[
                 living_space,
@@ -292,13 +297,7 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                 children_age,
                 noise_tolerance
             ],
-            outputs=[recommendation_output, search_status],
-            _js="""
-            () => {
-                document.getElementById('search-status').style.display = 'block';
-                return [];
-            }
-            """  # 立即顯示搜尋狀態
+            outputs=[recommendation_output, search_status]
         )
 
     return {