Update breed_recommendation.py

breed_recommendation.py

@@ -7,11 +7,256 @@ from scoring_calculation_system import UserPreferences, calculate_compatibility_
 from recommendation_html_format import format_recommendation_html, get_breed_recommendations
 from search_history import create_history_tab, create_history_component
 
-def create_recommendation_tab(UserPreferences, get_breed_recommendations, format_recommendation_html, history_component):
+# def create_recommendation_tab(UserPreferences, get_breed_recommendations, format_recommendation_html, history_component):
+
+#     with gr.TabItem("Breed Recommendation"):
+#         with gr.Tabs():
+#             with gr.Tab("Find by Criteria"):
+#                 gr.HTML("""
+#                     <div style='
+#                         text-align: center;
+#                         position: relative;
+#                         padding: 20px 0;
+#                         margin: 15px 0;
+#                         background: linear-gradient(to right, rgba(66, 153, 225, 0.1), rgba(72, 187, 120, 0.1));
+#                         border-radius: 10px;
+#                     '>
+#                         <!-- BETA 標籤 -->
+#                         <div style='
+#                             position: absolute;
+#                             top: 10px;
+#                             right: 20px;
+#                             background: linear-gradient(90deg, #4299e1, #48bb78);
+#                             color: white;
+#                             padding: 4px 12px;
+#                             border-radius: 15px;
+#                             font-size: 0.85em;
+#                             font-weight: 600;
+#                             letter-spacing: 1px;
+#                             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+#                         '>BETA</div>
+                        
+#                         <!-- 主標題 -->
+#                         <p style='
+#                             font-size: 1.2em;
+#                             margin: 0;
+#                             padding: 0 20px;
+#                             line-height: 1.5;
+#                             background: linear-gradient(90deg, #4299e1, #48bb78);
+#                             -webkit-background-clip: text;
+#                             -webkit-text-fill-color: transparent;
+#                             font-weight: 600;
+#                         '>
+#                             Tell us about your lifestyle, and we'll recommend the perfect dog breeds for you!
+#                         </p>
+
+#                         <!-- 提示訊息 -->
+#                         <div style='
+#                             margin-top: 15px;
+#                             padding: 10px 20px;
+#                             background: linear-gradient(to right, rgba(66, 153, 225, 0.15), rgba(72, 187, 120, 0.15));
+#                             border-radius: 8px;
+#                             font-size: 0.9em;
+#                             color: #2D3748;
+#                             display: flex;
+#                             align-items: center;
+#                             justify-content: center;
+#                             gap: 8px;
+#                         '>
+#                             <span style="font-size: 1.2em;">🔬</span>
+#                             <span style="
+#                                 letter-spacing: 0.3px;
+#                                 line-height: 1.4;
+#                             "><strong>Beta Feature:</strong> Our matching algorithm is continuously improving. Results are for reference only.</span>
+#                         </div>
+#                     </div>
+#                 """)
+
+#                 with gr.Row():
+#                     with gr.Column():
+#                         living_space = gr.Radio(
+#                             choices=["apartment", "house_small", "house_large"],
+#                             label="What type of living space do you have?",
+#                             info="Choose your current living situation",
+#                             value="apartment"
+#                         )
+
+#                         yard_access = gr.Radio(
+#                             choices=["no_yard", "shared_yard", "private_yard"],
+#                             label="Yard Access Type",
+#                             info="Available outdoor space",
+#                             value="no_yard"
+#                         )
+
+#                         exercise_time = gr.Slider(
+#                             minimum=0,
+#                             maximum=180,
+#                             value=60,
+#                             label="Daily exercise time (minutes)",
+#                             info="Consider walks, play time, and training"
+#                         )
+
+#                         exercise_type = gr.Radio(
+#                             choices=["light_walks", "moderate_activity", "active_training"],
+#                             label="Exercise Style",
+#                             info="What kind of activities do you prefer?",
+#                             value="moderate_activity"
+#                         )
+
+
+#                         grooming_commitment = gr.Radio(
+#                             choices=["low", "medium", "high"],
+#                             label="Grooming commitment level",
+#                             info="Low: monthly, Medium: weekly, High: daily",
+#                             value="medium"
+#                         )
+
+#                     with gr.Column():
+#                         experience_level = gr.Radio(
+#                             choices=["beginner", "intermediate", "advanced"],
+#                             label="Dog ownership experience",
+#                             info="Be honest - this helps find the right match",
+#                             value="beginner"
+#                         )
+
+#                         time_availability = gr.Radio(
+#                             choices=["limited", "moderate", "flexible"],
+#                             label="Time Availability",
+#                             info="Time available for dog care daily",
+#                             value="moderate"
+#                         )
+
+#                         has_children = gr.Checkbox(
+#                             label="Have children at home",
+#                             info="Helps recommend child-friendly breeds"
+#                         )
+
+#                         children_age = gr.Radio(
+#                             choices=["toddler", "school_age", "teenager"],
+#                             label="Children's Age Group",
+#                             info="Helps match with age-appropriate breeds",
+#                             visible=False  # 默認隱藏，只在has_children=True時顯示
+#                         )
+
+#                         noise_tolerance = gr.Radio(
+#                             choices=["low", "medium", "high"],
+#                             label="Noise tolerance level",
+#                             info="Some breeds are more vocal than others",
+#                             value="medium"
+#                         )
+                        
+#                 def update_children_age_visibility(has_children):
+#                     return gr.update(visible=has_children)
+
+#                 has_children.change(
+#                     fn=update_children_age_visibility,
+#                     inputs=has_children,
+#                     outputs=children_age
+#                 )
+
+#                 get_recommendations_btn = gr.Button("Find My Perfect Match! 🔍", variant="primary")
+            
+#                 recommendation_output = gr.HTML(
+#                     label="Breed Recommendations",
+#                     visible=True,  # 確保可見性
+#                     elem_id="recommendation-output"  
+#                 )
+
+#         def on_find_match_click(*args):
+#             try:
+#                 user_prefs = UserPreferences(
+#                     living_space=args[0],
+#                     yard_access=args[1],       
+#                     exercise_time=args[2],
+#                     exercise_type=args[3],      
+#                     grooming_commitment=args[4],
+#                     experience_level=args[5],
+#                     time_availability=args[6],   
+#                     has_children=args[7],
+#                     children_age=args[8] if args[7] else None,
+#                     noise_tolerance=args[9],
+#                     space_for_play=True if args[0] != "apartment" else False,
+#                     other_pets=False,
+#                     climate="moderate",
+#                     health_sensitivity="medium",
+#                     barking_acceptance=args[9]
+#                 )
+
+#                 recommendations = get_breed_recommendations(user_prefs, top_n=10)
+
+#                 history_results = [{
+#                     'breed': rec['breed'],
+#                     'rank': rec['rank'],
+#                     'overall_score': rec['final_score'],
+#                     'base_score': rec['base_score'],
+#                     'bonus_score': rec['bonus_score'],
+#                     'scores': rec['scores']
+#                 } for rec in recommendations]
+
+#                 history_component.save_search(
+#                     user_preferences={
+#                         'living_space': args[0],
+#                         'yard_access': args[1],
+#                         'exercise_time': args[2],
+#                         'exercise_type': args[3],
+#                         'grooming_commitment': args[4],
+#                         'experience_level': args[5],
+#                         'time_availability': args[6],
+#                         'has_children': args[7],
+#                         'children_age': args[8] if args[7] else None,
+#                         'noise_tolerance': args[9],
+#                         'search_type': 'Criteria'  
+#                     },
+#                     results=history_results
+#                 )
+
+#                 return 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 "Error getting recommendations"
+        
+
+#         get_recommendations_btn.click(
+#             fn=on_find_match_click,
+#             inputs=[
+#                 living_space,
+#                 yard_access,        
+#                 exercise_time,
+#                 exercise_type,      
+#                 grooming_commitment,
+#                 experience_level,
+#                 time_availability, 
+#                 has_children,
+#                 children_age,
+#                 noise_tolerance
+#             ],
+#             outputs=recommendation_output
+#         )
 
+#     return {
+#         'living_space': living_space,
+#         'exercise_time': exercise_time,
+#         'grooming_commitment': grooming_commitment,
+#         'experience_level': experience_level,
+#         'has_children': has_children,
+#         'noise_tolerance': noise_tolerance,
+#         'get_recommendations_btn': get_recommendations_btn,
+#         'recommendation_output': recommendation_output,
+#     }
+
+
+def create_recommendation_tab(UserPreferences, get_breed_recommendations, format_recommendation_html, history_component):
+    """
+    創建狗品種推薦頁面的主要函數
+    包含用戶輸入界面、推薦結果顯示和 loading 狀態
+    """
     with gr.TabItem("Breed Recommendation"):
         with gr.Tabs():
             with gr.Tab("Find by Criteria"):
+                # 頁面頂部的介紹性內容
                 gr.HTML("""
                     <div style='
                         text-align: center;
@@ -72,6 +317,122 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                     </div>
                 """)
 
+                # 添加 Loading 狀態顯示
+                loading_html = gr.HTML("""
+                    <div id="loading-status" style="
+                        text-align: center;
+                        margin: 30px 0;
+                        opacity: 0;
+                        transition: opacity 0.3s ease-in-out;
+                    ">
+                        <div style="
+                            display: inline-flex;
+                            flex-direction: column;
+                            align-items: center;
+                            gap: 15px;
+                            padding: 25px;
+                            background: linear-gradient(to right, rgba(66, 153, 225, 0.1), rgba(72, 187, 120, 0.1));
+                            border-radius: 12px;
+                            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+                        ">
+                            <!-- 可愛的狗狗圖示 -->
+                            <div style="font-size: 40px;">🐕</div>
+                            
+                            <!-- 載入中主要訊息 -->
+                            <div style="
+                                color: #2D3748;
+                                font-size: 1.2em;
+                                font-weight: 500;
+                                margin-bottom: 5px;
+                            ">Sniffing out your perfect match...</div>
+                            
+                            <!-- 有趣的載入訊息 -->
+                            <div id="loading-message" style="
+                                color: #4A5568;
+                                font-size: 0.95em;
+                                font-style: italic;
+                            ">Checking all the good boys and girls...</div>
+                            
+                            <!-- 載入動畫 -->
+                            <div style="
+                                display: flex;
+                                gap: 8px;
+                                margin-top: 10px;
+                            ">
+                                <div class="paw" style="
+                                    width: 12px;
+                                    height: 12px;
+                                    background: #4299e1;
+                                    border-radius: 50%;
+                                    animation: pawAnimation 1s infinite;
+                                    animation-delay: 0s;
+                                "></div>
+                                <div class="paw" style="
+                                    width: 12px;
+                                    height: 12px;
+                                    background: #4299e1;
+                                    border-radius: 50%;
+                                    animation: pawAnimation 1s infinite;
+                                    animation-delay: 0.2s;
+                                "></div>
+                                <div class="paw" style="
+                                    width: 12px;
+                                    height: 12px;
+                                    background: #4299e1;
+                                    border-radius: 50%;
+                                    animation: pawAnimation 1s infinite;
+                                    animation-delay: 0.4s;
+                                "></div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <style>
+                        @keyframes pawAnimation {
+                            0% { transform: translateY(0); }
+                            50% { transform: translateY(-10px); }
+                            100% { transform: translateY(0); }
+                        }
+                        
+                        #loading-status {
+                            display: none;
+                        }
+                        
+                        #loading-status.visible {
+                            display: block;
+                            opacity: 1;
+                        }
+                    </style>
+                    
+                    <script>
+                        // 有趣的載入訊息列表
+                        const messages = [
+                            "Checking all the good boys and girls...",
+                            "Fetching the perfect matches...",
+                            "Calculating belly rub compatibility...",
+                            "Analyzing tail wag frequencies...",
+                            "Measuring treat enthusiasm levels...",
+                            "Evaluating walkies requirements...",
+                            "Consulting our canine experts...",
+                            "Counting tennis balls...",
+                            "Reviewing park visit preferences...",
+                            "Assessing cuddle potential..."
+                        ];
+                        
+                        // 定期更新載入訊息
+                        function updateLoadingMessage() {
+                            const messageElement = document.getElementById('loading-message');
+                            if (messageElement) {
+                                const randomMessage = messages[Math.floor(Math.random() * messages.length)];
+                                messageElement.textContent = randomMessage;
+                            }
+                        }
+                        
+                        setInterval(updateLoadingMessage, 2000);
+                    </script>
+                """, visible=False)
+
+                # 用戶輸入區域
                 with gr.Row():
                     with gr.Column():
                         living_space = gr.Radio(
@@ -103,7 +464,6 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                             value="moderate_activity"
                         )
 
-
                         grooming_commitment = gr.Radio(
                             choices=["low", "medium", "high"],
                             label="Grooming commitment level",
@@ -135,7 +495,7 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                             choices=["toddler", "school_age", "teenager"],
                             label="Children's Age Group",
                             info="Helps match with age-appropriate breeds",
-                            visible=False  # 默認隱藏，只在has_children=True時顯示
+                            visible=False
                         )
 
                         noise_tolerance = gr.Radio(
@@ -144,7 +504,8 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                             info="Some breeds are more vocal than others",
                             value="medium"
                         )
-                        
+
+                # 控制 children_age 顯示邏輯
                 def update_children_age_visibility(has_children):
                     return gr.update(visible=has_children)
 
@@ -154,88 +515,108 @@ def create_recommendation_tab(UserPreferences, get_breed_recommendations, format
                     outputs=children_age
                 )
 
-                get_recommendations_btn = gr.Button("Find My Perfect Match! 🔍", variant="primary")
-            
+                # 推薦按鈕
+                get_recommendations_btn = gr.Button(
+                    "Find My Perfect Match! 🔍",
+                    variant="primary"
+                )
+
+                # 推薦結果顯示區域
                 recommendation_output = gr.HTML(
                     label="Breed Recommendations",
-                    visible=True,  # 確保可見性
-                    elem_id="recommendation-output"  
+                    visible=True,
+                    elem_id="recommendation-output"
                 )
 
-        def on_find_match_click(*args):
-            try:
-                user_prefs = UserPreferences(
-                    living_space=args[0],
-                    yard_access=args[1],       
-                    exercise_time=args[2],
-                    exercise_type=args[3],      
-                    grooming_commitment=args[4],
-                    experience_level=args[5],
-                    time_availability=args[6],   
-                    has_children=args[7],
-                    children_age=args[8] if args[7] else None,
-                    noise_tolerance=args[9],
-                    space_for_play=True if args[0] != "apartment" else False,
-                    other_pets=False,
-                    climate="moderate",
-                    health_sensitivity="medium",
-                    barking_acceptance=args[9]
-                )
+                # 處理推薦請求的函數
+                def on_find_match_click(*args):
+                    try:
+                        # 顯示 loading 狀態
+                        yield loading_html.update(visible=True)
 
-                recommendations = get_breed_recommendations(user_prefs, top_n=10)
-
-                history_results = [{
-                    'breed': rec['breed'],
-                    'rank': rec['rank'],
-                    'overall_score': rec['final_score'],
-                    'base_score': rec['base_score'],
-                    'bonus_score': rec['bonus_score'],
-                    'scores': rec['scores']
-                } for rec in recommendations]
-
-                history_component.save_search(
-                    user_preferences={
-                        'living_space': args[0],
-                        'yard_access': args[1],
-                        'exercise_time': args[2],
-                        'exercise_type': args[3],
-                        'grooming_commitment': args[4],
-                        'experience_level': args[5],
-                        'time_availability': args[6],
-                        'has_children': args[7],
-                        'children_age': args[8] if args[7] else None,
-                        'noise_tolerance': args[9],
-                        'search_type': 'Criteria'  
-                    },
-                    results=history_results
-                )
+                        # 創建用戶偏好對象
+                        user_prefs = UserPreferences(
+                            living_space=args[0],
+                            yard_access=args[1],
+                            exercise_time=args[2],
+                            exercise_type=args[3],
+                            grooming_commitment=args[4],
+                            experience_level=args[5],
+                            time_availability=args[6],
+                            has_children=args[7],
+                            children_age=args[8] if args[7] else None,
+                            noise_tolerance=args[9],
+                            space_for_play=True if args[0] != "apartment" else False,
+                            other_pets=False,
+                            climate="moderate",
+                            health_sensitivity="medium",
+                            barking_acceptance=args[9]
+                        )
 
-                return format_recommendation_html(recommendations, is_description_search=False)
+                        # 獲取推薦結果
+                        recommendations = get_breed_recommendations(user_prefs, top_n=10)
 
-            except Exception as e:
-                print(f"Error in find match: {str(e)}")
-                import traceback
-                print(traceback.format_exc())
-                return "Error getting recommendations"
-        
+                        # 儲存搜尋歷史
+                        history_results = [{
+                            'breed': rec['breed'],
+                            'rank': rec['rank'],
+                            'overall_score': rec['final_score'],
+                            'base_score': rec['base_score'],
+                            'bonus_score': rec['bonus_score'],
+                            'scores': rec['scores']
+                        } for rec in recommendations]
+
+                        history_component.save_search(
+                            user_preferences={
+                                'living_space': args[0],
+                                'yard_access': args[1],
+                                'exercise_time': args[2],
+                                'exercise_type': args[3],
+                                'grooming_commitment': args[4],
+                                'experience_level': args[5],
+                                'time_availability': args[6],
+                                'has_children': args[7],
+                                'children_age': args[8] if args[7] else None,
+                                'noise_tolerance': args[9],
+                                'search_type': 'Criteria'
+                            },
+                            results=history_results
+                        )
 
-        get_recommendations_btn.click(
-            fn=on_find_match_click,
-            inputs=[
-                living_space,
-                yard_access,        
-                exercise_time,
-                exercise_type,      
-                grooming_commitment,
-                experience_level,
-                time_availability, 
-                has_children,
-                children_age,
-                noise_tolerance
-            ],
-            outputs=recommendation_output
-        )
+                        # 隱藏 loading 狀態並返回結果
+                        return [
+                            loading_html.update(visible=False),
+                            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 [
+                            loading_html.update(visible=False),
+                            "Oops! Something went wrong while finding your perfect match. Please try again!"
+                        ]
+
+                # 設置按鈕點擊事件
+                get_recommendations_btn.click(
+                    fn=on_find_match_click,
+                    inputs=[
+                        living_space,
+                        yard_access,
+                        exercise_time,
+                        exercise_type,
+                        grooming_commitment,
+                        experience_level,
+                        time_availability,
+                        has_children,
+                        children_age,
+                        noise_tolerance
+                    ],
+                    outputs=[loading_html, recommendation_output]
+                )
 
+    # 返回頁面組件
     return {
         'living_space': living_space,
         'exercise_time': exercise_time,