Update app.py

app.py

@@ -12,6 +12,9 @@ from data_manager import get_dog_description, UserPreferences, get_breed_recomme
 from history_manager import UserHistoryManager
 from search_history import create_history_tab
 from styles import get_css_styles
+from breed_detection import create_detection_tab
+from breed_comparison import create_comparison_tab
+from breed_recommendation import create_recommendation_tab
 from urllib.parse import quote
 from ultralytics import YOLO
 import asyncio
@@ -750,269 +753,65 @@ with gr.Blocks(css=get_css_styles()) as iface:
     </header>
     """)
 
-    # 使用 Tabs 來分隔兩個功能
-    with gr.Tabs():
-        # 第一個 Tab：原有的辨識功能
-        with gr.TabItem("Breed Detection"):
-            gr.HTML("<p style='text-align: center;'>Upload a picture of a dog, and the model will predict its breed and provide detailed information!</p>")
-            gr.HTML("<p style='text-align: center; color: #666; font-size: 0.9em;'>Note: The model's predictions may not always be 100% accurate, and it is recommended to use the results as a reference.</p>")
-
-            with gr.Row():
-                input_image = gr.Image(label="Upload a dog image", type="pil")
-                output_image = gr.Image(label="Annotated Image")
-
-            output = gr.HTML(label="Prediction Results")
-            initial_state = gr.State()
-
-            input_image.change(
-                predict,
-                inputs=input_image,
-                outputs=[output, output_image, initial_state]
-            )
-
-            gr.Examples(
-                examples=['Border_Collie.jpg', 'Golden_Retriever.jpeg', 'Saint_Bernard.jpeg', 'Samoyed.jpg', 'French_Bulldog.jpeg'],
-                inputs=input_image)
-
-        # 第二個 Tab：品種比較功能
-        with gr.TabItem("Breed Comparison"):
-            gr.HTML("<p style='text-align: center;'>Select two dog breeds to compare their characteristics and care requirements.</p>")
-
-            with gr.Row():
-                breed1_dropdown = gr.Dropdown(
-                    choices=dog_breeds,
-                    label="Select First Breed",
-                    value="Golden_Retriever"
-                )
-                breed2_dropdown = gr.Dropdown(
-                    choices=dog_breeds,
-                    label="Select Second Breed",
-                    value="Border_Collie"
-                )
-
-            compare_btn = gr.Button("Compare Breeds")
-            comparison_output = gr.HTML(label="Comparison Results")
-
-            def show_comparison(breed1, breed2):
-                if not breed1 or not breed2:
-                    return "Please select two breeds to compare"
-
-                breed1_info = get_dog_description(breed1)
-                breed2_info = get_dog_description(breed2)
-
-                html_output = f"""
-                <div class="dog-info-card">
-                    <div class="comparison-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
-                        <div class="breed-info">
-                            <h2 class="section-title">
-                                <span class="icon">🐕</span> {breed1.replace('_', ' ')}
-                            </h2>
-                            <div class="info-section">
-                                <div class="info-item">
-                                    <span class="tooltip">
-                                        <span class="icon">📏</span>
-                                        <span class="label">Size:</span>
-                                        <span class="value">{breed1_info['Size']}</span>
-                                    </span>
-                                </div>
-                                <div class="info-item">
-                                    <span class="tooltip">
-                                        <span class="icon">🏃</span>
-                                        <span class="label">Exercise Needs:</span>
-                                        <span class="value">{breed1_info['Exercise Needs']}</span>
-                                    </span>
-                                </div>
-                                <div class="info-item">
-                                    <span class="tooltip">
-                                        <span class="icon">✂️</span>
-                                        <span class="label">Grooming:</span>
-                                        <span class="value">{breed1_info['Grooming Needs']}</span>
-                                    </span>
-                                </div>
-                                <div class="info-item">
-                                    <span class="tooltip">
-                                        <span class="icon">👨‍👩‍👧‍👦</span>
-                                        <span class="label">Good with Children:</span>
-                                        <span class="value">{breed1_info['Good with Children']}</span>
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="breed-info">
-                            <h2 class="section-title">
-                                <span class="icon">🐕</span> {breed2.replace('_', ' ')}
-                            </h2>
-                            <div class="info-section">
-                                <div class="info-item">
-                                    <span class="tooltip">
-                                        <span class="icon">📏</span>
-                                        <span class="label">Size:</span>
-                                        <span class="value">{breed2_info['Size']}</span>
-                                    </span>
-                                </div>
-                                <div class="info-item">
-                                    <span class="tooltip">
-                                        <span class="icon">🏃</span>
-                                        <span class="label">Exercise Needs:</span>
-                                        <span class="value">{breed2_info['Exercise Needs']}</span>
-                                    </span>
-                                </div>
-                                <div class="info-item">
-                                    <span class="tooltip">
-                                        <span class="icon">✂️</span>
-                                        <span class="label">Grooming:</span>
-                                        <span class="value">{breed2_info['Grooming Needs']}</span>
-                                    </span>
-                                </div>
-                                <div class="info-item">
-                                    <span class="tooltip">
-                                        <span class="icon">👨‍👩‍👧‍👦</span>
-                                        <span class="label">Good with Children:</span>
-                                        <span class="value">{breed2_info['Good with Children']}</span>
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                """
-                return html_output
-
-            compare_btn.click(
-                show_comparison,
-                inputs=[breed1_dropdown, breed2_dropdown],
-                outputs=comparison_output
+def main():
+    with gr.Blocks(css=get_css_styles()) as iface:
+        # Header HTML
+        gr.HTML("""
+        <header style='text-align: center; padding: 20px; margin-bottom: 20px;'>
+            <h1 style='font-size: 2.5em; margin-bottom: 10px; color: #2D3748;'>
+                🐾 PawMatch AI
+            </h1>
+            <h2 style='font-size: 1.2em; font-weight: normal; color: #4A5568; margin-top: 5px;'>
+                Your Smart Dog Breed Guide
+            </h2>
+            <div style='width: 50px; height: 3px; background: linear-gradient(90deg, #4299e1, #48bb78); margin: 15px auto;'></div>
+            <p style='color: #718096; font-size: 0.9em;'>
+                Powered by AI • Breed Recognition • Smart Matching • Companion Guide
+            </p>
+        </header>
+        """)
+
+        # 先創建歷史組件實例（但不創建標籤頁）
+        history_component = create_history_component()
+
+        with gr.Tabs():
+            # 1. 品種檢測標籤頁
+            example_images = [
+                'Border_Collie.jpg',
+                'Golden_Retriever.jpeg',
+                'Saint_Bernard.jpeg',
+                'Samoyed.jpg',
+                'French_Bulldog.jpeg'
+            ]
+            detection_components = create_detection_tab(predict, example_images)
+
+            # 2. 品種比較標籤頁
+            comparison_components = create_comparison_tab(
+                dog_breeds=dog_breeds,
+                get_dog_description=get_dog_description
             )
 
-        # 第三個 Tab：品種推薦功能
-        # history_component = create_history_tab() 
-        with gr.TabItem("Breed Recommendation"):
-            gr.HTML("<p style='text-align: center;'>Tell us about your lifestyle, and we'll recommend the perfect dog breeds for you!</p>")
-
-            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"
-                    )
-
-                    exercise_time = gr.Slider(
-                        minimum=0,
-                        maximum=180,
-                        value=60,
-                        label="Daily exercise time (minutes)",
-                        info="Consider walks, play time, and training"
-                    )
-
-                    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"
-                    )
-
-                    has_children = gr.Checkbox(
-                        label="Have children at home",
-                        info="Helps recommend child-friendly breeds"
-                    )
-
-                    noise_tolerance = gr.Radio(
-                        choices=["low", "medium", "high"],
-                        label="Noise tolerance level",
-                        info="Some breeds are more vocal than others",
-                        value="medium"
-                    )
-
-
-            # 設置按鈕的點擊事件
-            get_recommendations_btn = gr.Button("Find My Perfect Match! 🔍", variant="primary")
-            recommendation_output = gr.HTML(label="Breed Recommendations")
-
-            def on_find_match_click(*args):
-                try:
-                    user_prefs = UserPreferences(
-                        living_space=args[0],
-                        exercise_time=args[1],
-                        grooming_commitment=args[2],
-                        experience_level=args[3],
-                        has_children=args[4],
-                        noise_tolerance=args[5],
-                        space_for_play=True if args[0] != "apartment" else False,
-                        other_pets=False,
-                        climate="moderate"
-                    )
-
-                    # 取得推薦結果
-                    recommendations = get_breed_recommendations(user_prefs)
-                    
-                    print("Debug - Recommendations received:")
-                    for rec in recommendations:
-                        print(f"#{rec['rank']} {rec['breed']}: {rec['final_score']:.4f}")
-
-                    # 修改這裡：確保保存完整的推薦資訊
-                    history_results = [{
-                        'breed': rec['breed'],
-                        'rank': rec['rank'],
-                        'overall_score': rec['final_score'],  # 使用 final_score
-                        'base_score': rec['base_score'],
-                        'bonus_score': rec['bonus_score'],
-                        'scores': rec['scores']
-                    } for rec in recommendations]
-
-                    print("Debug - Preparing to save history:")
-                    for res in history_results:
-                        print(f"Saving #{res['rank']} {res['breed']}: {res['overall_score']:.4f}")
-
-
-                    history_component.save_search(
-                    user_preferences={
-                        'living_space': args[0],
-                        'exercise_time': args[1],
-                        'grooming_commitment': args[2],
-                        'experience_level': args[3],
-                        'has_children': args[4],
-                        'noise_tolerance': args[5]
-                    },
-                    results=history_results
-                )
-
-                    return format_recommendation_html(recommendations)
-                    
-                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,
-                    exercise_time,
-                    grooming_commitment,
-                    experience_level,
-                    has_children,
-                    noise_tolerance
-                ],
-                outputs=recommendation_output
+            # 3. 品種推薦標籤頁
+            recommendation_components = create_recommendation_tab(
+                UserPreferences=UserPreferences,
+                get_breed_recommendations=get_breed_recommendations,
+                format_recommendation_html=format_recommendation_html,
+                history_component=history_component
             )
 
-        history_component = create_history_tab() 
+            # 4. 最後創建歷史記錄標籤頁
+            create_history_tab(history_component)
 
+        # Footer
+        gr.HTML('''
+            For more details on this project and other work, feel free to visit my GitHub 
+            <a href="https://github.com/Eric-Chung-0511/Learning-Record/tree/main/Data%20Science%20Projects/Dog_Breed_Classifier">
+                Dog Breed Classifier
+            </a>
+        ''')
 
-    gr.HTML('For more details on this project and other work, feel free to visit my GitHub <a href="https://github.com/Eric-Chung-0511/Learning-Record/tree/main/Data%20Science%20Projects/Dog_Breed_Classifier">Dog Breed Classifier</a>')
+    return iface
 
 if __name__ == "__main__":
-
-    iface.launch(share=True)
+    iface = main()
+    iface.launch(share=True)