Update app.py

app.py

@@ -9,6 +9,9 @@ import torch.nn.functional as F
 from torchvision import transforms
 from PIL import Image, ImageDraw, ImageFont, ImageFilter
 from data_manager import get_dog_description, UserPreferences, get_breed_recommendations, format_recommendation_html
+from history_manager import UserHistoryManager
+from search_history import create_history_tab
+from styles import get_css_styles
 from urllib.parse import quote
 from ultralytics import YOLO
 import asyncio
@@ -17,6 +20,7 @@ import traceback
 
 model_yolo = YOLO('yolov8l.pt')
 
+history_manager = UserHistoryManager()
 
 dog_breeds = ["Afghan_Hound", "African_Hunting_Dog", "Airedale", "American_Staffordshire_Terrier",
               "Appenzeller", "Australian_Terrier", "Bedlington_Terrier", "Bernese_Mountain_Dog",
@@ -104,7 +108,7 @@ num_classes = 120
 device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
 model = BaseModel(num_classes=num_classes, device=device)
 
-checkpoint = torch.load('best_model_81_dog.pth', map_location=torch.device('cpu'))
+checkpoint = torch.load('/content/drive/Othercomputers/我的 MacBook Pro/Learning/Cats_Dogs_Detector/(120)best_model/best_model_81_dog.pth', map_location=torch.device('cpu'))
 model.load_state_dict(checkpoint['model_state_dict'])
 
 # evaluation mode
@@ -271,7 +275,6 @@ async def process_single_dog(image):
 
 
 def create_breed_comparison(breed1: str, breed2: str) -> dict:
-    """比較兩個狗品種的特性"""
     breed1_info = get_dog_description(breed1)
     breed2_info = get_dog_description(breed2)
 
@@ -730,877 +733,290 @@ def format_description_html(description, breed):
     '''
     return html
 
+with gr.Blocks(css=get_css_styles()) as iface:
+
+    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>
+    """)
+
+    # 使用 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]
+            )
 
-with gr.Blocks(css="""
-        .dog-info-card {
-            border: 1px solid #e1e4e8;
-            margin: 40px 0;  /* 增加卡片間距 */
-            padding: 0;
-            border-radius: 12px;
-            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
-            overflow: hidden;
-            transition: all 0.3s ease;
-            background: white;
-        }
-
-        .dog-info-card:hover {
-            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
-        }
-
-        .dog-info-header {
-            padding: 24px 28px;  /* 增加內距 */
-            margin: 0;
-            font-size: 22px;
-            font-weight: bold;
-            border-bottom: 1px solid #e1e4e8;
-        }
-
-        .breed-info {
-            padding: 28px;  /* 增加整體內距 */
-            line-height: 1.6;
-        }
-
-        .section-title {
-            font-size: 1.3em;
-            font-weight: 700;
-            color: #2c3e50;
-            margin: 32px 0 20px 0;
-            padding: 12px 0;
-            border-bottom: 2px solid #e1e4e8;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            position: relative;
-        }
-
-        .icon {
-            font-size: 1.2em;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .info-section, .care-section, .family-section {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 16px;
-            margin-bottom: 28px;  /* 增加底部間距 */
-            padding: 20px;  /* 增加內距 */
-            background: #f8f9fa;
-            border-radius: 12px;
-            border: 1px solid #e1e4e8;  /* 添加邊框 */
-        }
-
-        .info-item {
-            background: white;  /* 改為白色背景 */
-            padding: 14px 18px;  /* 增加內距 */
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-            border: 1px solid #e1e4e8;
-            flex: 1 1 auto;
-            min-width: 200px;
-        }
-
-        .label {
-            color: #666;
-            font-weight: 600;
-            font-size: 1.1rem;
-        }
-
-        .value {
-            color: #2c3e50;
-            font-weight: 500;
-            font-size: 1.1rem;
-        }
-
-        .temperament-section {
-            background: #f8f9fa;
-            padding: 20px;  /* 增加內距 */
-            border-radius: 12px;
-            margin-bottom: 28px;  /* 增加間距 */
-            color: #444;
-            border: 1px solid #e1e4e8;  /* 添加邊框 */
-        }
-
-        .description-section {
-            background: #f8f9fa;
-            padding: 24px;  /* 增加內距 */
-            border-radius: 12px;
-            margin: 28px 0;  /* 增加上下間距 */
-            line-height: 1.8;
-            color: #444;
-            border: 1px solid #e1e4e8;  /* 添加邊框 */
-            fontsize: 1.1rem;
-        }
-        .description-section p {
-            margin: 0;
-            padding: 0;
-            text-align: justify;  /* 文字兩端對齊 */
-            word-wrap: break-word;  /* 確保長單字會換行 */
-            white-space: pre-line;  /* 保留換行但合併空白 */
-            max-width: 100%;  /* 確保不會超出容器 */
-        }
-
-        .action-section {
-            margin-top: 24px;
-            text-align: center;
-        }
-
-        .akc-button,
-        .breed-section .akc-link,
-        .breed-option .akc-link {
-            display: inline-flex;
-            align-items: center;
-            padding: 14px 28px;
-            background: linear-gradient(145deg, #00509E, #003F7F);
-            color: white;
-            border-radius: 12px;  /* 增加圓角 */
-            text-decoration: none;
-            gap: 12px;  /* 增加圖標和文字間距 */
-            transition: all 0.3s ease;
-            font-weight: 600;
-            font-size: 1.1em;
-            box-shadow:
-                0 2px 4px rgba(0,0,0,0.1),
-                inset 0 1px 1px rgba(255,255,255,0.1);
-            border: 1px solid rgba(255,255,255,0.1);
-        }
-
-        .akc-button:hover,
-        .breed-section .akc-link:hover,
-        .breed-option .akc-link:hover {
-            background: linear-gradient(145deg, #003F7F, #00509E);
-            transform: translateY(-2px);
-            color: white;
-            box-shadow:
-                0 6px 12px rgba(0,0,0,0.2),
-                inset 0 1px 1px rgba(255,255,255,0.2);
-            border: 1px solid rgba(255,255,255,0.2);
-        }
-        .icon {
-            font-size: 1.3em;
-            filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
-        }
-
-        .warning-message {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            color: #ff3b30;
-            font-weight: 500;
-            margin: 0;
-            padding: 16px;
-            background: #fff5f5;
-            border-radius: 8px;
-        }
-
-        .model-uncertainty-note {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            padding: 16px;
-            background-color: #f8f9fa;
-            border-left: 4px solid #6c757d;
-            margin-bottom: 20px;
-            color: #495057;
-            border-radius: 4px;
-        }
-
-        .breeds-list {
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
-
-        .breed-option {
-            background: white;
-            border: 1px solid #e1e4e8;
-            border-radius: 8px;
-            overflow: hidden;
-        }
-
-        .breed-header {
-            display: flex;
-            align-items: center;
-            padding: 16px;
-            background: #f8f9fa;
-            gap: 12px;
-            border-bottom: 1px solid #e1e4e8;
-        }
-
-        .option-number {
-            font-weight: 600;
-            color: #666;
-            padding: 4px 8px;
-            background: #e1e4e8;
-            border-radius: 4px;
-        }
-
-        .breed-name {
-            font-size: 1.5em;
-            font-weight: bold;
-            color: #2c3e50;
-            flex-grow: 1;
-        }
-
-        .confidence-badge {
-            padding: 4px 12px;
-            border-radius: 20px;
-            font-size: 0.9em;
-            font-weight: 500;
-        }
-
-        .breed-content {
-            padding: 20px;
-        }
-        .breed-content li {
-            margin-bottom: 8px;
-            display: flex;
-            align-items: flex-start;  /* 改為頂部對齊 */
-            gap: 8px;
-            flex-wrap: wrap;  /* 允許內容換�� */
-        }
-        .breed-content li strong {
-            flex: 0 0 auto;  /* 不讓標題縮放 */
-            min-width: 100px;  /* 給標題一個固定最小寬度 */
-        }
-
-        ul {
-            padding-left: 0;
-            margin: 0;
-            list-style-type: none;
-        }
-
-        li {
-            margin-bottom: 8px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .akc-link {
-            color: white;
-            text-decoration: none;
-            font-weight: 600;
-            font-size: 1.1em;
-            transition: all 0.3s ease;
-        }
-
-        .akc-link:hover {
-            text-decoration: underline;
-            color: #D3E3F0;
-        }
-        .tooltip {
-            position: relative;
-            display: inline-flex;
-            align-items: center;
-            gap: 4px;
-            cursor: help;
-        }
-        .tooltip .tooltip-icon {
-            font-size: 14px;
-            color: #666;
-        }
-        .tooltip .tooltip-text {
-            visibility: hidden;
-            width: 250px;
-            background-color: rgba(44, 62, 80, 0.95);
-            color: white;
-            text-align: left;
-            border-radius: 8px;
-            padding: 8px 10px;
-            position: absolute;
-            z-index: 100;
-            bottom: 150%;
-            left: 50%;
-            transform: translateX(-50%);
-            opacity: 0;
-            transition: all 0.3s ease;
-            font-size: 14px;
-            line-height: 1.3;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-            border: 1px solid rgba(255, 255, 255, 0.1)
-            margin-bottom: 10px;
-        }
-        .tooltip.tooltip-left .tooltip-text {
-            left: 0;
-            transform: translateX(0);
-        }
-        .tooltip.tooltip-right .tooltip-text {
-            left: auto;
-            right: 0;
-            transform: translateX(0);
-        }
-        .tooltip-text strong {
-            color: white !important;
-            background-color: transparent !important;
-            display: block;  /* 讓標題獨立一行 */
-            margin-bottom: 2px;  /* 增加標題下方間距 */
-            padding-bottom: 2px; /* 加入小間距 */
-            border-bottom: 1px solid rgba(255,255,255,0.2);
-        }
-        .tooltip-text {
-            font-size: 13px;  /* 稍微縮小字體 */
-        }
-
-        /* 調整列表符號和文字的間距 */
-        .tooltip-text ul {
-            margin: 0;
-            padding-left: 15px;  /* 減少列表符號的縮進 */
-        }
-
-        .tooltip-text li {
-            margin-bottom: 1px;  /* 減少列表項目間的間距 */
-        }
-        .tooltip-text br {
-            line-height: 1.2;  /* 減少行距 */
-        }
-
-        .tooltip .tooltip-text::after {
-            content: "";
-            position: absolute;
-            top: 100%;
-            left: 20%;  /* 調整箭頭位置 */
-            margin-left: -5px;
-            border-width: 5px;
-            border-style: solid;
-            border-color: rgba(44, 62, 80, 0.95) transparent transparent transparent;
-        }
-        .tooltip-left .tooltip-text::after {
-            left: 20%;
-        }
-
-        /* 右側箭頭 */
-        .tooltip-right .tooltip-text::after {
-            left: 80%;
-        }
-        .tooltip:hover .tooltip-text {
-            visibility: visible;
-            opacity: 1;
-        }
-        .tooltip .tooltip-text::after {
-            content: "";
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            border-width: 8px;
-            border-style: solid;
-            border-color: rgba(44, 62, 80, 0.95) transparent transparent transparent;
-        }
-        .uncertainty-mode .tooltip .tooltip-text {
-            position: absolute;
-            left: 100%;
-            bottom: auto;
-            top: 50%;
-            transform: translateY(-50%);
-            margin-left: 10px;
-            z-index: 1000;  /* 確保提示框在最上層 */
-        }
-
-        .uncertainty-mode .tooltip .tooltip-text::after {
-            content: "";
-            position: absolute;
-            top: 50%;
-            right: 100%;
-            transform: translateY(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-color: transparent rgba(44, 62, 80, 0.95) transparent transparent;
-        }
-        .uncertainty-mode .breed-content {
-            font-size: 1.1rem;  /* 增加字體大小 */
-        }
-        .description-section,
-        .description-section p,
-        .temperament-section,
-        .temperament-section .value,
-        .info-item,
-        .info-item .value,
-        .breed-content {
-            font-size: 1.1rem !important;  /* 使用 !important 確保覆蓋其他樣式 */
-        }
-
-        .recommendation-card {
-            margin-bottom: 40px;
-        }
-
-        .compatibility-scores {
-            background: #f8f9fa;
-            padding: 24px;
-            border-radius: 12px;
-            margin: 20px 0;
-        }
-
-        .score-item {
-            margin: 15px 0;
-        }
-
-        .progress-bar {
-            height: 12px;
-            background-color: #e9ecef;
-            border-radius: 6px;
-            overflow: hidden;
-            margin: 8px 0;
-        }
-
-        .progress {
-            height: 100%;
-            background: linear-gradient(90deg, #34C759, #30B350);
-            border-radius: 6px;
-            transition: width 0.6s ease;
-        }
-
-        .percentage {
-            float: right;
-            color: #34C759;
-            font-weight: 600;
-        }
-
-        .breed-details-section {
-            margin: 30px 0;
-        }
-
-        .subsection-title {
-            font-size: 1.2em;
-            color: #2c3e50;
-            margin-bottom: 20px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .details-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 20px;
-            background: #f8f9fa;
-            padding: 20px;
-            border-radius: 12px;
-            border: 1px solid #e1e4e8;
-        }
-
-        .detail-item {
-            background: white;
-            padding: 15px;
-            border-radius: 8px;
-            border: 1px solid #e1e4e8;
-        }
-
-        .description-text {
-            line-height: 1.8;
-            color: #444;
-            margin: 0;
-            padding: 24px 30px;  /* 調整內部間距，從 20px 改為 24px 30px */
-            background: #f8f9fa;
-            border-radius: 12px;
-            border: 1px solid #e1e4e8;
-            text-align: justify;  /* 添加文字對齊 */
-            word-wrap: break-word;  /* 確保長文字會換行 */
-            word-spacing: 1px;  /* 加入字間距 */
-        }
-
-        /* 工具提示改進 */
-        .tooltip {
-            position: relative;
-            display: inline-flex;
-            align-items: center;
-            gap: 4px;
-            cursor: help;
-            padding: 5px 0;
-        }
-
-        .tooltip .tooltip-text {
-            visibility: hidden;
-            width: 280px;
-            background-color: rgba(44, 62, 80, 0.95);
-            color: white;
-            text-align: left;
-            border-radius: 8px;
-            padding: 12px 15px;
-            position: absolute;
-            z-index: 1000;
-            bottom: calc(100% + 15px);
-            left: 50%;
-            transform: translateX(-50%);
-            opacity: 0;
-            transition: all 0.3s ease;
-            font-size: 14px;
-            line-height: 1.4;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-            white-space: normal;
-        }
-
-        .tooltip:hover .tooltip-text {
-            visibility: visible;
-            opacity: 1;
-        }
-
-        .score-badge {
-            background-color: #34C759;
-            color: white;
-            padding: 6px 12px;
-            border-radius: 20px;
-            font-size: 0.9em;
-            margin-left: 10px;
-            font-weight: 500;
-            box-shadow: 0 2px 4px rgba(52, 199, 89, 0.2);
-        }
+            gr.Examples(
+                examples=['/content/drive/Othercomputers/我的 MacBook Pro/Learning/Cats_Dogs_Detector/test_images/Border_Collie.jpg',
+                    '/content/drive/Othercomputers/我的 MacBook Pro/Learning/Cats_Dogs_Detector/test_images/Golden_Retriever.jpeg',
+                    '/content/drive/Othercomputers/我的 MacBook Pro/Learning/Cats_Dogs_Detector/test_images/Saint_Bernard.jpeg',
+                    '/content/drive/Othercomputers/我的 MacBook Pro/Learning/Cats_Dogs_Detector/test_images/Samoyed.jpg',
+                    '/content/drive/Othercomputers/我的 MacBook Pro/Learning/Cats_Dogs_Detector/test_images/French_Bulldog.jpeg'],
+                inputs=input_image
+            )
 
-        .bonus-score .tooltip-text {
-            width: 250px;
-            line-height: 1.4;
-            padding: 10px;
-        }
+        # 第二個 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>")
 
-        .bonus-score .progress {
-            background: linear-gradient(90deg, #48bb78, #68d391);
-        }
+            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"
+                )
 
-        .health-section {
-            margin: 25px 0;
-            padding: 24px;
-            background-color: #f8f9fb;
-            border-radius: 12px;
-            border: 1px solid #e1e4e8;
-        }
+            compare_btn = gr.Button("Compare Breeds")
+            comparison_output = gr.HTML(label="Comparison Results")
 
-        .health-section .subsection-title {
-            font-size: 1.3em;
-            font-weight: 600;
-            margin-bottom: 20px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            color: #2c3e50;
-        }
+            def show_comparison(breed1, breed2):
+                if not breed1 or not breed2:
+                    return "Please select two breeds to compare"
 
-        .health-info {
-            background-color: white;
-            padding: 24px;
-            border-radius: 8px;
-            margin: 15px 0;
-            border: 1px solid #e1e4e8;
-        }
+                breed1_info = get_dog_description(breed1)
+                breed2_info = get_dog_description(breed2)
 
-        .health-details {
-            font-size: 1.1rem;
-            line-height: 1.6;
-        }
+                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>
 
-        .health-details h4 {
-            color: #2c3e50;
-            font-size: 1.15rem;
-            font-weight: 600;
-            margin: 20px 0 15px 0;
-        }
+                        <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
 
-        .health-details h4:first-child {
-            margin-top: 0;
-        }
+            compare_btn.click(
+                show_comparison,
+                inputs=[breed1_dropdown, breed2_dropdown],
+                outputs=comparison_output
+            )
 
-        .health-details ul {
-            list-style-type: none;
-            padding-left: 0;
-            margin: 0 0 25px 0;
-        }
+        # 第三個 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"
+                    )
 
-        .health-details ul li {
-            margin-bottom: 12px;
-            padding-left: 20px;
-            position: relative;
-        }
+                    exercise_time = gr.Slider(
+                        minimum=0,
+                        maximum=180,
+                        value=60,
+                        label="Daily exercise time (minutes)",
+                        info="Consider walks, play time, and training"
+                    )
 
-        .health-details ul li:before {
-            content: "•";
-            position: absolute;
-            left: 0;
-            color: #2c3e50;
-        }
+                    grooming_commitment = gr.Radio(
+                        choices=["low", "medium", "high"],
+                        label="Grooming commitment level",
+                        info="Low: monthly, Medium: weekly, High: daily",
+                        value="medium"
+                    )
 
-        .health-disclaimer {
-            margin-top: 20px;
-            padding-top: 20px;
-            border-top: 1px solid #e1e4e8;
-        }
-        
-        .health-disclaimer p {
-            margin: 6px 0;
-            padding-left: 20px;
-            position: relative;
-            color: #888;  /* 統一設定灰色 */
-            font-size: 0.95rem;
-            line-height: 1.5;
-            font-style: italic;  
-        }
-        
-        .health-disclaimer p:before {
-            content: "›";
-            position: absolute;
-            left: 0;
-            color: #999;
-            font-style: normal;
-            font-weight: 500;
-        }
-        
-        .health-disclaimer p:first-child {
-            font-style: normal;  /* 取消斜體 */
-            font-weight: 500;    /* 加粗 */
-            color: #666;         /* 稍深的灰色 */
-        }
-        
-        .health-disclaimer p span,
-        .health-disclaimer p strong,
-        .health-disclaimer p em {
-            color: inherit;  
-        }
+                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"
+                    )
 
-        """) as iface:
-
-        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>
-        """)
-
-        # 使用 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]
-                )
+                    has_children = gr.Checkbox(
+                        label="Have children at home",
+                        info="Helps recommend child-friendly breeds"
+                    )
 
-                gr.Examples(
-                    examples=['Border_Collie.jpg', 'Golden_Retriever.jpeg', 'Saint_Bernard.jpeg',  'French_Bulldog.jpeg', 'Samoyed.jpg'],
-                    inputs=input_image
-                )
+                    noise_tolerance = gr.Radio(
+                        choices=["low", "medium", "high"],
+                        label="Noise tolerance level",
+                        info="Some breeds are more vocal than others",
+                        value="medium"
+                    )
 
-            # 第二個 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"
+            # 設置按鈕的點擊事件
+            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"
                     )
 
-                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>
+                    # 取得推薦結果
+                    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
+                )
 
-                            <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
+                    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
+            )
 
-                compare_btn.click(
-                    show_comparison,
-                    inputs=[breed1_dropdown, breed2_dropdown],
-                    outputs=comparison_output
-                )
+        history_component = create_history_tab() 
 
-            # 第三個 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 process_recommendations(living_space, exercise_time, grooming_commitment,
-                        experience_level, has_children, noise_tolerance):
-                    try:
-                        user_prefs = UserPreferences(
-                            living_space=living_space,
-                            exercise_time=exercise_time,
-                            grooming_commitment=grooming_commitment,
-                            experience_level=experience_level,
-                            has_children=has_children,
-                            noise_tolerance=noise_tolerance,
-                            space_for_play=True if living_space != "apartment" else False,
-                            other_pets=False,
-                            climate="moderate"
-                        )
-
-                        recommendations = get_breed_recommendations(user_prefs)
-                        return format_recommendation_html(recommendations)
-                    except Exception as e:
-                        print(f"Error in process_recommendations: {str(e)}")
-                        return f"An error occurred: {str(e)}"
-
-                # 這行是關鍵 - 確保按鈕點擊事件有正確連接到處理函數
-                get_recommendations_btn.click(
-                    fn=process_recommendations,  # 處理函數
-                    inputs=[
-                        living_space,
-                        exercise_time,
-                        grooming_commitment,
-                        experience_level,
-                        has_children,
-                        noise_tolerance
-                    ],
-                    outputs=recommendation_output  # 輸出結果的位置
-                )
 
-        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>')
 
 if __name__ == "__main__":