Update breed_recommendation.py

breed_recommendation.py

@@ -1,5 +1,7 @@
 import sqlite3
 import gradio as gr
+import asyncio
+from typing import Generator
 from dog_database import get_dog_description, dog_data
 from breed_health_info import breed_health_info
 from breed_noise_info import breed_noise_info
@@ -528,33 +530,89 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                     elem_id="recommendation-output"
                 )
 
-                def on_find_match_click(*args):
+                def on_find_match_click(*args) -> Generator:
+                    """
+                    處理推薦按鈕點擊事件的函數
+                    使用生成器來處理中間狀態和最終結果
+                    """
                     try:
-                        # 顯示中間狀態
-                        intermediate_message = gr.HTML("""
+                        # 首先返回 loading 狀態
+                        yield gr.HTML("""
                             <div style="
                                 text-align: center;
                                 padding: 20px;
                                 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;
                             ">
                                 <div style="font-size: 40px; margin-bottom: 10px;">🐕</div>
-                                <p style="
+                                <div style="
                                     color: #2D3748;
                                     font-size: 1.2em;
-                                    margin: 0;
+                                    margin-bottom: 15px;
+                                    font-weight: 500;
+                                ">Finding your perfect match...</div>
+                                
+                                <!-- 進度指示動畫 -->
+                                <div style="
+                                    display: flex;
+                                    justify-content: center;
+                                    gap: 8px;
+                                    margin: 15px 0;
                                 ">
-                                    Finding your perfect match...
-                                    <br>
-                                    <span style="font-size: 0.9em; color: #4A5568;">
-                                        This may take a few moments
-                                    </span>
-                                </p>
+                                    <div class="paw-print" style="
+                                        width: 12px;
+                                        height: 12px;
+                                        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;
+                                        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;
+                                        background: #4299e1;
+                                        border-radius: 50%;
+                                        animation: bounce 0.6s infinite ease-in-out;
+                                        animation-delay: 0.4s;
+                                    "></div>
+                                </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>
                             </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)
+                
+                        # 創建用戶偏好對象並獲取推薦
                         user_prefs = UserPreferences(
                             living_space=args[0],
                             yard_access=args[1],       
@@ -604,13 +662,13 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                         )
                 
                         # 返回最終結果
-                        return format_recommendation_html(recommendations, is_description_search=False)
+                        yield format_recommendation_html(recommendations, is_description_search=False)
                 
                     except Exception as e:
                         print(f"Error in find match: {str(e)}")
                         import traceback
                         print(traceback.format_exc())
-                        return gr.HTML("""
+                        yield gr.HTML("""
                             <div style="
                                 text-align: center;
                                 padding: 20px;