Update breed_recommendation.py

breed_recommendation.py

@@ -459,32 +459,85 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                     "🦴 Evaluating compatibility scores...",
                     "💭 Getting opinions from our experts..."
                 ]
-        
-                # 顯示加載訊息
-                for message in loading_messages:
+                
+                # 創建無限循環的訊息生成器
+                message_cycle = itertools.cycle(loading_messages)
+                
+                # 設定最大循環次數（例如3次）
+                max_cycles = 3
+                current_cycle = 0
+                
+                while current_cycle < max_cycles:
+                    message = next(message_cycle)
                     yield gr.HTML("""
                         <div style="
                             text-align: center;
-                            padding: 20px;
-                            background: rgba(255, 255, 255, 0.9);
-                            border-radius: 12px;
-                            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-                            margin: 20px 0;
+                            position: relative;
+                            max-width: 600px;
+                            margin: 20px auto;
                         ">
-                            <div style="font-size: 1.1em; color: #4a5568; margin-bottom: 10px;">
-                                {message}
-                            </div>
-                            <div style="width: 100%; height: 4px; background: #f0f0f0; border-radius: 2px; overflow: hidden;">
+                            <!-- 主要內容容器 -->
+                            <div style="
+                                padding: 20px;
+                                background: rgba(255, 255, 255, 0.95);
+                                border-radius: 16px;
+                                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+                                border: 1px solid rgba(255, 140, 66, 0.1);
+                            ">
+                                <!-- 訊息文字 -->
+                                <div style="
+                                    font-size: 1.2em;
+                                    color: #4a5568;
+                                    margin-bottom: 15px;
+                                    font-weight: 500;
+                                ">
+                                    {message}
+                                </div>
+                                
+                                <!-- 進度條容器 -->
                                 <div style="
-                                    width: 30%;
-                                    height: 100%;
-                                    background: linear-gradient(to right, #ff8c42, #ff6b2b);
-                                    animation: progress 2s infinite linear;
-                                "></div>
+                                    width: 100%;
+                                    height: 4px;
+                                    background: #f5f5f5;
+                                    border-radius: 4px;
+                                    overflow: hidden;
+                                    position: relative;
+                                ">
+                                    <!-- 動畫進度條 -->
+                                    <div style="
+                                        position: absolute;
+                                        width: 30%;
+                                        height: 100%;
+                                        background: linear-gradient(to right, #ff8c42, #ff6b2b);
+                                        animation: loading 2s infinite ease-in-out;
+                                        border-radius: 4px;
+                                    "></div>
+                                </div>
                             </div>
                         </div>
+                        
+                        <style>
+                            @keyframes loading {{
+                                0% {{ 
+                                    transform: translateX(-100%);
+                                    opacity: 0.7;
+                                }}
+                                50% {{ 
+                                    opacity: 1;
+                                }}
+                                100% {{ 
+                                    transform: translateX(400%);
+                                    opacity: 0.7;
+                                }}
+                            }}
+                        </style>
                     """.format(message=message))
-                    await asyncio.sleep(1)
+                    
+                    await asyncio.sleep(1.5)  # 稍微延長每個訊息的顯示時間
+                    
+                    # 如果是最後一個訊息，增加循環計數
+                    if message == loading_messages[-1]:
+                        current_cycle += 1
         
                 # 處理用戶數據和獲取推薦
                 user_prefs = UserPreferences(