Update breed_recommendation.py

breed_recommendation.py

@@ -530,89 +530,69 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                     elem_id="recommendation-output"
                 )
 
-                def on_find_match_click(*args) -> Generator:
-                    """
-                    處理推薦按鈕點擊事件的函數
-                    使用生成器來處理中間狀態和最終結果
-                    """
+                def on_find_match_click(*args):
                     try:
-                        # 首先返回 loading 狀態
-                        yield gr.HTML("""
-                            <div style="
+                        # 立即顯示處理狀態
+                        status_html = """
+                            <div id="loading-status" style="
                                 text-align: center;
                                 padding: 20px;
+                                margin: 20px 0;
                                 background: linear-gradient(to right, rgba(66, 153, 225, 0.1), rgba(72, 187, 120, 0.1));
                                 border-radius: 10px;
-                                margin: 20px 0;
-                                animation: fadeIn 0.5s ease-in-out;
+                                opacity: 1;
                             ">
                                 <div style="font-size: 40px; margin-bottom: 10px;">🐕</div>
                                 <div style="
                                     color: #2D3748;
                                     font-size: 1.2em;
-                                    margin-bottom: 15px;
+                                    margin-bottom: 10px;
                                     font-weight: 500;
                                 ">Finding your perfect match...</div>
-                                
-                                <!-- 進度指示動畫 -->
-                                <div style="
+                                <div id="status-dots" style="
                                     display: flex;
                                     justify-content: center;
                                     gap: 8px;
                                     margin: 15px 0;
                                 ">
-                                    <div class="paw-print" style="
-                                        width: 12px;
-                                        height: 12px;
+                                    <span style="
+                                        width: 10px;
+                                        height: 10px;
                                         background: #4299e1;
                                         border-radius: 50%;
-                                        animation: bounce 0.6s infinite ease-in-out;
-                                        animation-delay: 0s;
-                                    "></div>
-                                    <div class="paw-print" style="
-                                        width: 12px;
-                                        height: 12px;
+                                        display: inline-block;
+                                        animation: pulse 1s infinite;
+                                    "></span>
+                                    <span style="
+                                        width: 10px;
+                                        height: 10px;
                                         background: #4299e1;
                                         border-radius: 50%;
-                                        animation: bounce 0.6s infinite ease-in-out;
-                                        animation-delay: 0.2s;
-                                    "></div>
-                                    <div class="paw-print" style="
-                                        width: 12px;
-                                        height: 12px;
+                                        display: inline-block;
+                                        animation: pulse 1s infinite .2s;
+                                    "></span>
+                                    <span style="
+                                        width: 10px;
+                                        height: 10px;
                                         background: #4299e1;
                                         border-radius: 50%;
-                                        animation: bounce 0.6s infinite ease-in-out;
-                                        animation-delay: 0.4s;
-                                    "></div>
+                                        display: inline-block;
+                                        animation: pulse 1s infinite .4s;
+                                    "></span>
                                 </div>
-                                
-                                <!-- 提示訊息 -->
-                                <div style="
-                                    color: #4A5568;
-                                    font-size: 0.9em;
-                                    font-style: italic;
-                                    margin-top: 10px;
-                                ">Analyzing your preferences and our database of good boys and girls...</div>
+                                <style>
+                                    @keyframes pulse {
+                                        0%, 100% { transform: scale(1); opacity: 1; }
+                                        50% { transform: scale(1.5); opacity: 0.7; }
+                                    }
+                                </style>
                             </div>
-                            
-                            <style>
-                                @keyframes bounce {
-                                    0%, 100% { transform: translateY(0); }
-                                    50% { transform: translateY(-10px); }
-                                }
-                                
-                                @keyframes fadeIn {
-                                    from { opacity: 0; }
-                                    to { opacity: 1; }
-                                }
-                            </style>
-                        """)
-                
-                        # 添加短暫延遲使 loading 動畫可見
-                        yield asyncio.sleep(1)
-                
-                        # 創建用戶偏好對象並獲取推薦
+                        """
+                        
+                        # 返回載入狀態
+                        yield gr.HTML(status_html)
+                        
+                        # 建立用戶偏好
                         user_prefs = UserPreferences(
                             living_space=args[0],
                             yard_access=args[1],       
@@ -681,8 +661,7 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                                     font-size: 1.1em;
                                     margin: 0;
                                 ">
-                                    🐾 Oops! Something went wrong while finding your perfect match. 
-                                    <br>Please try again!
+                                    🐾 Oops! Something went wrong. Please try again!
                                 </p>
                             </div>
                         """)
@@ -702,7 +681,9 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                         children_age,
                         noise_tolerance
                     ],
-                    outputs=recommendation_output
+                    outputs=recommendation_output,
+                    show_progress=True,  # 顯示進度
+                    queue=False  # 允許連續點擊
                 )
 
     # 返回頁面組件