Upload 9 files

app.py

@@ -0,0 +1,481 @@
+
+import os
+import numpy as np
+import torch
+import torch.nn as nn
+import gradio as gr
+from torchvision.models import efficientnet_v2_m, EfficientNet_V2_M_Weights
+from torchvision.ops import nms, box_iou
+import torch.nn.functional as F
+from torchvision import transforms
+from PIL import Image, ImageDraw, ImageFont, ImageFilter
+from dog_database import get_dop_description
+from scoring_calculation_system import UserPreferences
+from recommendation_html_format import format_recommendation_html, get_breed_recommendations
+from history_manager import UserHistoryManager
+from search_history import create_history_tab, create_history_component
+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 html_templates import (
+    format_description_html,
+    format_single_dog_result,
+    format_multiple_breeds_result,
+    format_error_message,
+    format_warning_html,
+    format_multi_dog_container,
+    format_breed_details_html,
+    get_color_scheme,
+    get_akc_breeds_link
+)
+from urllib.parse import quote
+from ultralytics import YOLO
+import asyncio
+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",
+              "Blenheim_Spaniel", "Border_Collie", "Border_Terrier", "Boston_Bull", "Bouvier_Des_Flandres",
+              "Brabancon_Griffon", "Brittany_Spaniel", "Cardigan", "Chesapeake_Bay_Retriever",
+              "Chihuahua", "Dandie_Dinmont", "Doberman", "English_Foxhound", "English_Setter",
+              "English_Springer", "EntleBucher", "Eskimo_Dog", "French_Bulldog", "German_Shepherd",
+              "German_Short-Haired_Pointer", "Gordon_Setter", "Great_Dane", "Great_Pyrenees",
+              "Greater_Swiss_Mountain_Dog", "Ibizan_Hound", "Irish_Setter", "Irish_Terrier",
+              "Irish_Water_Spaniel", "Irish_Wolfhound", "Italian_Greyhound", "Japanese_Spaniel",
+              "Kerry_Blue_Terrier", "Labrador_Retriever", "Lakeland_Terrier", "Leonberg", "Lhasa",
+              "Maltese_Dog", "Mexican_Hairless", "Newfoundland", "Norfolk_Terrier", "Norwegian_Elkhound",
+              "Norwich_Terrier", "Old_English_Sheepdog", "Pekinese", "Pembroke", "Pomeranian",
+              "Rhodesian_Ridgeback", "Rottweiler", "Saint_Bernard", "Saluki", "Samoyed",
+              "Scotch_Terrier", "Scottish_Deerhound", "Sealyham_Terrier", "Shetland_Sheepdog",
+              "Shih-Tzu", "Siberian_Husky", "Staffordshire_Bullterrier", "Sussex_Spaniel",
+              "Tibetan_Mastiff", "Tibetan_Terrier", "Walker_Hound", "Weimaraner",
+              "Welsh_Springer_Spaniel", "West_Highland_White_Terrier", "Yorkshire_Terrier",
+              "Affenpinscher", "Basenji", "Basset", "Beagle", "Black-and-Tan_Coonhound", "Bloodhound",
+              "Bluetick", "Borzoi", "Boxer", "Briard", "Bull_Mastiff", "Cairn", "Chow", "Clumber",
+              "Cocker_Spaniel", "Collie", "Curly-Coated_Retriever", "Dhole", "Dingo",
+              "Flat-Coated_Retriever", "Giant_Schnauzer", "Golden_Retriever", "Groenendael", "Keeshond",
+              "Kelpie", "Komondor", "Kuvasz", "Malamute", "Malinois", "Miniature_Pinscher",
+              "Miniature_Poodle", "Miniature_Schnauzer", "Otterhound", "Papillon", "Pug", "Redbone",
+              "Schipperke", "Silky_Terrier", "Soft-Coated_Wheaten_Terrier", "Standard_Poodle",
+              "Standard_Schnauzer", "Toy_Poodle", "Toy_Terrier", "Vizsla", "Whippet",
+              "Wire-Haired_Fox_Terrier"]
+
+class MultiHeadAttention(nn.Module):
+
+    def __init__(self, in_dim, num_heads=8):
+        super().__init__()
+        self.num_heads = num_heads
+        self.head_dim = max(1, in_dim // num_heads)
+        self.scaled_dim = self.head_dim * num_heads
+        self.fc_in = nn.Linear(in_dim, self.scaled_dim)
+        self.query = nn.Linear(self.scaled_dim, self.scaled_dim)
+        self.key = nn.Linear(self.scaled_dim, self.scaled_dim)
+        self.value = nn.Linear(self.scaled_dim, self.scaled_dim)
+        self.fc_out = nn.Linear(self.scaled_dim, in_dim)
+
+    def forward(self, x):
+        N = x.shape[0]
+        x = self.fc_in(x)
+        q = self.query(x).view(N, self.num_heads, self.head_dim)
+        k = self.key(x).view(N, self.num_heads, self.head_dim)
+        v = self.value(x).view(N, self.num_heads, self.head_dim)
+
+        energy = torch.einsum("nqd,nkd->nqk", [q, k])
+        attention = F.softmax(energy / (self.head_dim ** 0.5), dim=2)
+
+        out = torch.einsum("nqk,nvd->nqd", [attention, v])
+        out = out.reshape(N, self.scaled_dim)
+        out = self.fc_out(out)
+        return out
+
+class BaseModel(nn.Module):
+    def __init__(self, num_classes, device='cuda' if torch.cuda.is_available() else 'cpu'):
+        super().__init__()
+        self.device = device
+        self.backbone = efficientnet_v2_m(weights=EfficientNet_V2_M_Weights.IMAGENET1K_V1)
+        self.feature_dim = self.backbone.classifier[1].in_features
+        self.backbone.classifier = nn.Identity()
+
+        self.num_heads = max(1, min(8, self.feature_dim // 64))
+        self.attention = MultiHeadAttention(self.feature_dim, num_heads=self.num_heads)
+
+        self.classifier = nn.Sequential(
+            nn.LayerNorm(self.feature_dim),
+            nn.Dropout(0.3),
+            nn.Linear(self.feature_dim, num_classes)
+        )
+
+        self.to(device)
+
+    def forward(self, x):
+        x = x.to(self.device)
+        features = self.backbone(x)
+        attended_features = self.attention(features)
+        logits = self.classifier(attended_features)
+        return logits, attended_features
+
+
+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('/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
+model.eval()
+
+# Image preprocessing function
+def preprocess_image(image):
+    # If the image is numpy.ndarray turn into PIL.Image
+    if isinstance(image, np.ndarray):
+        image = Image.fromarray(image)
+
+    # Use torchvision.transforms to process images
+    transform = transforms.Compose([
+        transforms.Resize((224, 224)),
+        transforms.ToTensor(),
+        transforms.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225]),
+    ])
+
+    return transform(image).unsqueeze(0)
+
+async def predict_single_dog(image):
+    image_tensor = preprocess_image(image)
+    with torch.no_grad():
+        output = model(image_tensor)
+        logits = output[0] if isinstance(output, tuple) else output
+        probabilities = F.softmax(logits, dim=1)
+        topk_probs, topk_indices = torch.topk(probabilities, k=3)
+        top1_prob = topk_probs[0][0].item()
+        topk_breeds = [dog_breeds[idx.item()] for idx in topk_indices[0]]
+
+        # Calculate relative probabilities for display
+        raw_probs = [prob.item() for prob in topk_probs[0]]
+        sum_probs = sum(raw_probs)
+        relative_probs = [f"{(prob/sum_probs * 100):.2f}%" for prob in raw_probs]
+
+    return top1_prob, topk_breeds, relative_probs
+
+
+async def detect_multiple_dogs(image, conf_threshold=0.3, iou_threshold=0.45):
+    results = model_yolo(image, conf=conf_threshold, iou=iou_threshold)[0]
+    dogs = []
+    boxes = []
+    for box in results.boxes:
+        if box.cls == 16:  # COCO dataset class for dog is 16
+            xyxy = box.xyxy[0].tolist()
+            confidence = box.conf.item()
+            boxes.append((xyxy, confidence))
+
+    if not boxes:
+        dogs.append((image, 1.0, [0, 0, image.width, image.height]))
+    else:
+        nms_boxes = non_max_suppression(boxes, iou_threshold)
+
+        for box, confidence in nms_boxes:
+            x1, y1, x2, y2 = box
+            w, h = x2 - x1, y2 - y1
+            x1 = max(0, x1 - w * 0.05)
+            y1 = max(0, y1 - h * 0.05)
+            x2 = min(image.width, x2 + w * 0.05)
+            y2 = min(image.height, y2 + h * 0.05)
+            cropped_image = image.crop((x1, y1, x2, y2))
+            dogs.append((cropped_image, confidence, [x1, y1, x2, y2]))
+
+    return dogs
+
+
+def non_max_suppression(boxes, iou_threshold):
+    keep = []
+    boxes = sorted(boxes, key=lambda x: x[1], reverse=True)
+    while boxes:
+        current = boxes.pop(0)
+        keep.append(current)
+        boxes = [box for box in boxes if calculate_iou(current[0], box[0]) < iou_threshold]
+    return keep
+
+
+def calculate_iou(box1, box2):
+    x1 = max(box1[0], box2[0])
+    y1 = max(box1[1], box2[1])
+    x2 = min(box1[2], box2[2])
+    y2 = min(box1[3], box2[3])
+
+    intersection = max(0, x2 - x1) * max(0, y2 - y1)
+    area1 = (box1[2] - box1[0]) * (box1[3] - box1[1])
+    area2 = (box2[2] - box2[0]) * (box2[3] - box2[1])
+
+    iou = intersection / float(area1 + area2 - intersection)
+    return iou
+
+
+async def process_single_dog(image):
+    """Process a single dog image and return breed predictions and HTML output."""
+    top1_prob, topk_breeds, relative_probs = await predict_single_dog(image)
+
+    # Case 1: Low confidence - unclear image or breed not in dataset
+    if top1_prob < 0.2:
+        error_message = format_warning_html(
+            'The image is unclear or the breed is not in the dataset. Please upload a clearer image of a dog.'
+        )
+        initial_state = {
+            "explanation": error_message,
+            "image": None,
+            "is_multi_dog": False
+        }
+        return error_message, None, initial_state
+
+    breed = topk_breeds[0]
+
+    # Case 2: High confidence - single breed result
+    if top1_prob >= 0.45:
+        description = get_dog_description(breed)
+        html_content = format_single_dog_result(breed, description)
+        initial_state = {
+            "explanation": html_content,
+            "image": image,
+            "is_multi_dog": False
+        }
+        return html_content, image, initial_state
+
+    # Case 3: Medium confidence - show top 3 breeds with relative probabilities
+    description = get_dog_description(breed)
+    breeds_html = format_multiple_breeds_result(
+        topk_breeds=topk_breeds,
+        relative_probs=relative_probs,
+        color='#34C759',  # 使用單狗顏色
+        index=1,  # 因為是單狗處理，所以index為1
+        get_dog_description=get_dog_description
+    )
+
+    initial_state = {
+        "explanation": breeds_html,
+        "image": image,
+        "is_multi_dog": False
+    }
+    return breeds_html, image, initial_state
+
+
+def create_breed_comparison(breed1: str, breed2: str) -> dict:
+    breed1_info = get_dog_description(breed1)
+    breed2_info = get_dog_description(breed2)
+
+    # 標準化數值轉換
+    value_mapping = {
+        'Size': {'Small': 1, 'Medium': 2, 'Large': 3, 'Giant': 4},
+        'Exercise_Needs': {'Low': 1, 'Moderate': 2, 'High': 3, 'Very High': 4},
+        'Care_Level': {'Low': 1, 'Moderate': 2, 'High': 3},
+        'Grooming_Needs': {'Low': 1, 'Moderate': 2, 'High': 3}
+    }
+
+    comparison_data = {
+        breed1: {},
+        breed2: {}
+    }
+
+    for breed, info in [(breed1, breed1_info), (breed2, breed2_info)]:
+        comparison_data[breed] = {
+            'Size': value_mapping['Size'].get(info['Size'], 2),  # 預設 Medium
+            'Exercise_Needs': value_mapping['Exercise_Needs'].get(info['Exercise Needs'], 2),  # 預設 Moderate
+            'Care_Level': value_mapping['Care_Level'].get(info['Care Level'], 2),
+            'Grooming_Needs': value_mapping['Grooming_Needs'].get(info['Grooming Needs'], 2),
+            'Good_with_Children': info['Good with Children'] == 'Yes',
+            'Original_Data': info
+        }
+
+    return comparison_data
+
+
+async def predict(image):
+    """
+    Main prediction function that handles both single and multiple dog detection.
+
+    Args:
+        image: PIL Image or numpy array
+
+    Returns:
+        tuple: (html_output, annotated_image, initial_state)
+    """
+    if image is None:
+        return format_warning_html("Please upload an image to start."), None, None
+
+    try:
+        if isinstance(image, np.ndarray):
+            image = Image.fromarray(image)
+
+        # Detect dogs in the image
+        dogs = await detect_multiple_dogs(image)
+        color_scheme = get_color_scheme(len(dogs) == 1)
+
+        # Prepare for annotation
+        annotated_image = image.copy()
+        draw = ImageDraw.Draw(annotated_image)
+
+        try:
+            font = ImageFont.truetype("arial.ttf", 24)
+        except:
+            font = ImageFont.load_default()
+
+        dogs_info = ""
+
+        # Process each detected dog
+        for i, (cropped_image, detection_confidence, box) in enumerate(dogs):
+            color = color_scheme if len(dogs) == 1 else color_scheme[i % len(color_scheme)]
+
+            # Draw box and label on image
+            draw.rectangle(box, outline=color, width=4)
+            label = f"Dog {i+1}"
+            label_bbox = draw.textbbox((0, 0), label, font=font)
+            label_width = label_bbox[2] - label_bbox[0]
+            label_height = label_bbox[3] - label_bbox[1]
+
+            # Draw label background and text
+            label_x = box[0] + 5
+            label_y = box[1] + 5
+            draw.rectangle(
+                [label_x - 2, label_y - 2, label_x + label_width + 4, label_y + label_height + 4],
+                fill='white',
+                outline=color,
+                width=2
+            )
+            draw.text((label_x, label_y), label, fill=color, font=font)
+
+            # Predict breed
+            top1_prob, topk_breeds, relative_probs = await predict_single_dog(cropped_image)
+            combined_confidence = detection_confidence * top1_prob
+
+            # Format results based on confidence
+            if combined_confidence < 0.2:
+                dogs_info += format_error_message(color, i+1)
+            elif top1_prob >= 0.45:
+                breed = topk_breeds[0]
+                description = get_dog_description(breed)
+                dogs_info += format_single_dog_result(breed, description, color)
+            else:
+                dogs_info += format_multiple_breeds_result(
+                    topk_breeds,
+                    relative_probs,
+                    color,
+                    i+1,
+                    get_dog_description
+                )
+
+        # Wrap final HTML output
+        html_output = format_multi_dog_container(dogs_info)
+
+        # Prepare initial state
+        initial_state = {
+            "dogs_info": dogs_info,
+            "image": annotated_image,
+            "is_multi_dog": len(dogs) > 1,
+            "html_output": html_output
+        }
+
+        return html_output, annotated_image, initial_state
+
+    except Exception as e:
+        error_msg = f"An error occurred: {str(e)}\n\nTraceback:\n{traceback.format_exc()}"
+        print(error_msg)
+        return format_warning_html(error_msg), None, None
+
+
+def show_details_html(choice, previous_output, initial_state):
+    """
+    Generate detailed HTML view for a selected breed.
+
+    Args:
+        choice: str, Selected breed option
+        previous_output: str, Previous HTML output
+        initial_state: dict, Current state information
+
+    Returns:
+        tuple: (html_output, gradio_update, updated_state)
+    """
+    if not choice:
+        return previous_output, gr.update(visible=True), initial_state
+
+    try:
+        breed = choice.split("More about ")[-1]
+        description = get_dog_description(breed)
+        html_output = format_breed_details_html(description, breed)
+
+        # Update state
+        initial_state["current_description"] = html_output
+        initial_state["original_buttons"] = initial_state.get("buttons", [])
+
+        return html_output, gr.update(visible=True), initial_state
+
+    except Exception as e:
+        error_msg = f"An error occurred while showing details: {e}"
+        print(error_msg)
+        return format_warning_html(error_msg), gr.update(visible=True), initial_state
+
+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 = [
+                '/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'
+            ]
+            detection_components = create_detection_tab(predict, example_images)
+
+            # 2. 品種比較標籤頁
+            comparison_components = create_comparison_tab(
+                dog_breeds=dog_breeds,
+                get_dog_description=get_dog_description
+            )
+
+            # 3. 品種推薦標籤頁
+            recommendation_components = create_recommendation_tab(
+                UserPreferences=UserPreferences,
+                get_breed_recommendations=get_breed_recommendations,
+                format_recommendation_html=format_recommendation_html,
+                history_component=history_component
+            )
+
+            # 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>
+        ''')
+
+    return iface
+
+if __name__ == "__main__":
+    iface = main()
+    iface.launch(share=True, debug=True)

breed_comparison.py

@@ -0,0 +1,127 @@
+
+import gradio as gr
+from dog_database import get_dog_description
+
+def create_comparison_tab(dog_breeds, get_dog_description):
+    """创建品种比较标签页
+
+    Args:
+        dog_breeds: 狗品种列表
+        get_dog_description: 获取品种描述的函数
+    """
+    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
+        )
+
+    return {
+        'breed1_dropdown': breed1_dropdown,
+        'breed2_dropdown': breed2_dropdown,
+        'compare_btn': compare_btn,
+        'comparison_output': comparison_output
+    }

breed_recommendation.py

@@ -0,0 +1,136 @@
+
+import gradio as gr
+from recommendation_html_format import format_recommendation_html, get_breed_recommendations
+
+def create_recommendation_tab(UserPreferences, get_breed_recommendations, format_recommendation_html, history_component):
+    """创建品种推荐标签页
+
+    Args:
+        UserPreferences: 用户偏好类
+        get_breed_recommendations: 获取品种推荐的函数
+        format_recommendation_html: 格式化推荐结果的函数
+        history_component: 历史记录组件
+    """
+    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",
+                    health_sensitivity="medium",  # 新增: 默認中等敏感度
+                    barking_acceptance=args[5]    # 使用 noise_tolerance 作為 barking_acceptance
+                )
+
+                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],
+                        'exercise_time': args[1],
+                        'grooming_commitment': args[2],
+                        'experience_level': args[3],
+                        'has_children': args[4],
+                        'noise_tolerance': args[5],
+                        'health_sensitivity': "medium",
+                        'barking_acceptance': 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
+        )
+
+    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
+    }

dog_database.py

@@ -0,0 +1,218 @@
+
+import sqlite3
+from dataclasses import dataclass
+from typing import List, Dict, Optional
+from decimal import Decimal
+from breed_health_info import breed_health_info, default_health_note
+from breed_noise_info import breed_noise_info
+import numpy as np
+
+
+def create_table():
+    conn = sqlite3.connect('animal_detector.db')
+    cursor = conn.cursor()
+
+    cursor.execute('''
+    CREATE TABLE IF NOT EXISTS AnimalCatalog (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        Species TEXT NOT NULL,
+        Breed TEXT NOT NULL,
+        Size_Category TEXT,
+        Typical_Lifespan TEXT,
+        Temperament TEXT,
+        Care_Level TEXT,
+        Good_With_Children BOOLEAN,
+        Exercise_Needs TEXT,
+        Grooming_Needs TEXT,
+        Brief_Description TEXT
+    )
+    ''')
+
+    conn.commit()
+    cursor.close()
+    conn.close()
+
+# 創建表
+create_table()
+
+def insert_dog_data():
+    conn = sqlite3.connect('animal_detector.db')
+    cursor = conn.cursor()
+
+    dog_data = [
+        ('Dog', 'Afghan_Hound', 'Large', '12-18 years', 'Independent, dignified, aloof', 'High', True, 'High', 'High', 'Known for their long, silky coat and regal appearance, Afghan Hounds are ancient sighthounds with a unique, elegant presence.'),
+        ('Dog', 'African_Hunting_Dog', 'Medium', '10-12 years', 'Social, intelligent, energetic', 'Very High', False, 'Very High', 'Low', 'Also called African Wild Dogs, these are not domestic dogs and are endangered in their native habitats.'),
+        ('Dog', 'Airedale', 'Large', '10-12 years', 'Friendly, clever, courageous', 'High', True, 'High', 'High', 'Known as the "King of Terriers," Airedales are the largest of the terrier breeds and very versatile. Originally from Aire Valley of Yorkshire, they served in police and military roles while maintaining their hunting abilities.'),
+        ('Dog', 'American_Staffordshire_Terrier', 'Medium', '12-16 years', 'Confident, good-natured, courageous', 'Moderate', True, 'High', 'Low', 'Often confused with Pit Bulls, Am Staffs are strong, muscular dogs with a gentle and loving nature.'),
+        ('Dog', 'Appenzeller', 'Medium', '12-15 years', 'Reliable, fearless, lively', 'High', True, 'High', 'Moderate', 'Swiss mountain dogs known for their agility and enthusiasm, Appenzellers make excellent working and family dogs. Traditional cattle herders from the Swiss Alps, they combine working intelligence with devoted guardianship.'),
+        ('Dog', 'Australian_Terrier', 'Small', '12-15 years', 'Courageous, spirited, alert', 'Moderate', True, 'Moderate', 'Moderate', 'Small, sturdy terriers originally bred to control rodents, known for their confident personality. First breed developed in Australia, combining the tenacity of old terrier breeds with adaptability to harsh conditions.'),
+        ('Dog', 'Bedlington_Terrier', 'Medium', '11-16 years', 'Mild, gentle, lively', 'High', True, 'Moderate', 'High', 'Known for their lamb-like appearance, Bedlington Terriers are energetic and good with families. Despite their gentle look, they were originally miners\' dogs bred for hunting vermin and remain surprisingly fast and athletic.'),
+        ('Dog', 'Bernese_Mountain_Dog', 'Large', '6-8 years', 'Good-natured, calm, strong', 'High', True, 'Moderate', 'High', 'Large, tri-colored Swiss working dogs known for their gentle nature and striking appearance. Despite their short lifespan, they are excellent family companions and draft dogs. Often called "Berners", they are patient with children but prone to heat sensitivity due to their thick coat.'),
+        ('Dog', 'Blenheim_Spaniel', 'Small', '12-14 years', 'Affectionate, gentle, lively', 'Moderate', True, 'Moderate', 'High', 'A color variety of the Cavalier King Charles Spaniel, known for their red and white coat and friendly nature.'),
+        ('Dog', 'Border_Collie', 'Medium', '12-15 years', 'Intelligent, energetic, alert', 'High', True, 'Very High', 'Moderate', 'Often considered the most intelligent dog breed, Border Collies are tireless workers with intense herding instincts. Known for their "eye" - a distinctive herding gaze, they excel in dog sports and need constant mental stimulation to prevent boredom.'),
+        ('Dog', 'Border_Terrier', 'Small', '12-15 years', 'Affectionate, intelligent, even-tempered', 'Moderate', True, 'High', 'Low', 'Small but tough terriers with an otter-like head, known for their friendly and adaptable nature.'),
+        ('Dog', 'Boston_Bull', 'Small', '11-13 years', 'Friendly, lively, intelligent', 'Moderate', True, 'Moderate', 'Low', 'Also known as Boston Terriers, these "American Gentlemen" are friendly and adaptable. First bred in Boston as fighting dogs, they evolved into beloved companions known for their tuxedo-like coat pattern and gentle disposition.'),
+        ('Dog', 'Bouvier_Des_Flandres', 'Large', '10-12 years', 'Gentle, loyal, rational', 'High', True, 'High', 'High', 'Large, powerful herding dogs with a tousled coat, known for their versatility and even temperament. Originally bred as cattle drivers in Flanders, they excel in various roles from farm work to family protection.'),
+        ('Dog', 'Brabancon_Griffon', 'Small', '12-15 years', 'Self-important, sensitive, affectionate', 'Moderate', False, 'Moderate', 'Low', 'Also known as the Brussels Griffon, these small dogs have a distinctive beard and mustache, giving them an almost human-like expression.'),
+        ('Dog', 'Brittany_Spaniel', 'Medium', '12-14 years', 'Bright, fun-loving, upbeat', 'High', True, 'High', 'Moderate', 'Versatile hunting dogs and active companions, Brittanys are known for their energy and intelligence. Originally from France, these agile bird dogs excel in both hunting and family life with their eager and athletic nature.'),
+        ('Dog', 'Cardigan', 'Small', '12-15 years', 'Affectionate, loyal, intelligent', 'Moderate', True, 'Moderate', 'Moderate', 'Distinguished from Pembroke Welsh Corgis by their long tail, Cardigans are intelligent herding dogs with a fox-like appearance.'),
+        ('Dog', 'Chesapeake_Bay_Retriever', 'Large', '10-13 years', 'Bright, sensitive, affectionate', 'High', True, 'High', 'Moderate', 'Known for their waterproof coat, Chessies are strong swimmers and excellent retrievers. Developed in the American Chesapeake Bay region, they are famous for their ability to work in icy waters and their distinctive wavy coat.'),
+        ('Dog', 'Chihuahua', 'Small', '12-20 years', 'Charming, graceful, sassy', 'Moderate', False, 'Low', 'Low', 'One of the smallest dog breeds, known for their big personalities and loyalty to their owners. Named after Mexico\'s largest state, they are ancient companions with terrier-like attitudes and remarkably long lifespans for dogs.'),
+        ('Dog', 'Dandie_Dinmont', 'Small', '12-15 years', 'Independent, intelligent, dignified', 'Moderate', True, 'Moderate', 'Moderate', 'Recognizable by their long body and distinctive topknot of hair on their head. Named after a character in Sir Walter Scott novel, these unique terriers combine determination with dignity, making them distinctive companions.'),
+        ('Dog', 'Doberman', 'Large', '10-12 years', 'Loyal, fearless, alert', 'High', True, 'High', 'Low', 'Sleek, athletic dogs known for their intelligence and loyalty, often used as guard dogs. Highly trainable and protective, they excel in both working roles and as family guardians.'),
+        ('Dog', 'English_Foxhound', 'Medium', '10-13 years', 'Friendly, active, gentle', 'High', True, 'Very High', 'Low', 'Athletic, pack-oriented hounds originally bred for fox hunting in England. Known for their stamina, melodious voice, and strong hunting instincts.'),
+        ('Dog', 'English_Setter', 'Large', '10-12 years', 'Gentle, friendly, placid', 'High', True, 'High', 'High', 'Known for their speckled coat or "belton" markings, English Setters are elegant bird dogs and affectionate companions.'),
+        ('Dog', 'English_Springer', 'Medium', '12-14 years', 'Friendly, playful, obedient', 'High', True, 'High', 'High', 'Energetic and eager to please, Springers are excellent hunting dogs and loving family pets. Their name comes from their hunting style of "springing" at game birds, combining strong work ethics with a merry, affectionate family nature.'),
+        ('Dog', 'EntleBucher', 'Medium', '11-13 years', 'Loyal, enthusiastic, intelligent', 'High', True, 'High', 'Low', 'The smallest of the Swiss Mountain Dogs, known for their agility and herding abilities. Originally from the Swiss valley of Entlebuch, they combine the strength of mountain dogs with remarkable agility and quick thinking.'),
+        ('Dog', 'Eskimo_Dog', 'Large', '10-15 years', 'Alert, loyal, intelligent', 'High', True, 'High', 'High', 'Also known as the Canadian Eskimo Dog, these are strong, resilient working dogs adapted to Arctic conditions. Ancient breed used by Inuit people for hunting and transportation, known for their power and endurance.'),
+        ('Dog', 'French_Bulldog', 'Small', '10-12 years', 'Playful, adaptable, smart', 'Moderate', True, 'Low', 'Low', 'French Bulldogs are small, muscular dogs with a smooth coat, short face, and bat-like ears. They are affectionate, playful, and well-suited for family living.'),
+        ('Dog', 'German_Shepherd', 'Large', '10-13 years', 'Confident, courageous, smart', 'High', True, 'High', 'Moderate', 'Versatile working dogs, German Shepherds excel in various roles from police work to family protection.'),
+        ('Dog', 'German_Short-Haired_Pointer', 'Large', '10-12 years', 'Friendly, intelligent, willing to please', 'High', True, 'Very High', 'Moderate', 'Versatile hunting dogs known for their pointer stance, these dogs excel in both water and land retrieving.'),
+        ('Dog', 'Gordon_Setter', 'Large', '10-12 years', 'Confident, fearless, alert', 'High', True, 'High', 'High', 'The largest of the setter breeds, Gordon Setters are known for their black and tan coloring and loyal nature. Developed in Scotland, these noble bird dogs combine strong hunting abilities with devoted family loyalty.'),
+        ('Dog', 'Great_Dane', 'Giant', '7-10 years', 'Friendly, patient, dependable', 'High', True, 'Moderate', 'Low', 'One of the largest dog breeds, Great Danes are known as gentle giants with a friendly disposition. Originally bred for hunting large game, these noble giants now excel as loving family companions despite their imposing size.'),
+        ('Dog', 'Great_Pyrenees', 'Large', '10-12 years', 'Patient, calm, gentle', 'High', True, 'Moderate', 'High', 'Large, powerful dogs originally bred to guard livestock, known for their gentle and protective nature. These ancient guardians of the Pyrenees mountains combine strength and nobility with a deep devotion to family and flock.'),
+        ('Dog', 'Greater_Swiss_Mountain_dog', 'Large', '8-11 years', 'Faithful, alert, vigilant', 'Moderate', True, 'Moderate', 'Low', 'Large, strong working dogs with a tricolor coat, Swissies are gentle giants with a calm temperament.'),
+        ('Dog', 'Ibizan_Hound', 'Medium', '12-14 years', 'Even-tempered, loyal, independent', 'Moderate', True, 'High', 'Low', 'Sleek, athletic sighthounds known for their large, erect ears and red and white coats. Ancient breed from Balearic Islands, they can jump remarkable heights and were bred to hunt rabbits in difficult terrain.'),
+        ('Dog', 'Irish_Setter', 'Large', '11-15 years', 'Outgoing, sweet-tempered, active', 'High', True, 'High', 'High', 'Recognizable by their rich red coat, Irish Setters are energetic and playful dogs that love family life.'),
+        ('Dog', 'Irish_Terrier', 'Medium', '12-16 years', 'Bold, daring, intelligent', 'Moderate', True, 'High', 'Moderate', 'Known as the Daredevil of dogdom, Irish Terriers are courageous and loyal with a distinctive red coat. One of the oldest terrier breeds, they earned fame for their bravery as messenger dogs in World War I.'),
+        ('Dog', 'Irish_Water_Spaniel', 'Large', '10-12 years', 'Playful, brave, intelligent', 'High', True, 'High', 'High', 'Largest of the spaniels, known for their curly, liver-colored coat and rat-like tail. These distinctive water retrievers combine the agility of a spaniel with the endurance of a retriever, featuring a water-repellent double coat.'),
+        ('Dog', 'Irish_Wolfhound', 'Giant', '6-8 years', 'Gentle, patient, dignified', 'High', True, 'Moderate', 'Moderate', 'The tallest of all dog breeds, Irish Wolfhounds are gentle giants known for their calm and friendly nature. Ancient warriors of Ireland, they once hunted wolves but now serve as peaceful family companions.'),
+        ('Dog', 'Italian_Greyhound', 'Small', '12-15 years', 'Sensitive, alert, playful', 'Moderate', False, 'Moderate', 'Low', 'Miniature sighthounds known for their elegant appearance and affectionate nature, Italian Greyhounds make excellent companion dogs.'),
+        ('Dog', 'Japanese_Spaniel', 'Small', '10-12 years', 'Charming, noble, affectionate', 'Moderate', False, 'Low', 'High', 'Also known as the Japanese Chin, these small companion dogs have a distinctive flat face and were once favorites of Japanese nobility.'),
+        ('Dog', 'Kerry_Blue_Terrier', 'Medium', '12-15 years', 'Alert, adaptable, people-oriented', 'High', True, 'High', 'High', 'Medium-sized terriers with a distinctive blue coat, known for their versatility and intelligence. Originally from County Kerry, Ireland, they were all-purpose farm dogs that evolved into capable working and companion animals.'),
+        ('Dog', 'Labrador_Retriever', 'Large', '10-12 years', 'Friendly, outgoing, even-tempered', 'Moderate', True, 'High', 'Moderate', 'One of the most popular dog breeds, known for their friendly nature and excellent retrieving skills. Originally from Newfoundland, these versatile dogs excel as family companions, service dogs, and working retrievers.'),
+        ('Dog', 'Lakeland_Terrier', 'Small', '12-16 years', 'Bold, friendly, confident', 'Moderate', True, 'High', 'High', 'Named after the Lake District in England, these terriers are sturdy and bold with a wiry coat. Developed to protect sheep from foxes, they remain confident and fearless while being adaptable family companions.'),
+        ('Dog', 'Leonberg', 'Giant', '7-9 years', 'Gentle, friendly, intelligent', 'High', True, 'Moderate', 'High', 'Large, muscular dogs with a lion-like mane, known for their gentle nature and water rescue abilities. Created in the German town of Leonberg, these gentle giants combine strength with remarkable patience and grace.'),
+        ('Dog', 'Lhasa', 'Small', '12-15 years', 'Confident, smart, comical', 'High', False, 'Low', 'High', 'Lhasa Apsos are small but sturdy dogs with a long, flowing coat. They were originally bred as indoor sentinel dogs in Buddhist monasteries.'),
+        ('Dog', 'Maltese_Dog', 'Small', '12-15 years', 'Gentle, playful, charming', 'High', False, 'Low', 'High', 'Small, elegant dogs with long, silky white coats, known for their sweet and affectionate nature. Ancient breed of Mediterranean origin, they were cherished by nobles for centuries and remain adaptable, gentle companions.'),
+        ('Dog', 'Mexican_Hairless', 'Varies', '12-15 years', 'Loyal, alert, cheerful', 'Moderate', True, 'Moderate', 'Low', 'Also known as the Xoloitzcuintli, these dogs come in three sizes and can be either hairless or coated, known for their ancient history in Mexico.'),
+        ('Dog', 'Newfoundland', 'Giant', '8-10 years', 'Sweet, patient, devoted', 'High', True, 'Moderate', 'High', 'Large, strong dogs known for their water rescue abilities and gentle nature, especially with children. These powerful swimmers have a natural lifesaving instinct and are famous for their calm, noble temperament.'),
+        ('Dog', 'Norfolk_Terrier', 'Small', '12-15 years', 'Fearless, spirited, companionable', 'Moderate', True, 'Moderate', 'Moderate', 'Small, sturdy terriers with a wiry coat, known for their playful and affectionate nature.'),
+        ('Dog', 'Norwegian_Elkhound', 'Medium', '12-15 years', 'Bold, playful, loyal', 'High', True, 'High', 'High', 'Ancient Nordic breed known for their silver-gray coat and curled tail, originally used for hunting moose and other large game.'),
+        ('Dog', 'Norwich_Terrier', 'Small', '12-15 years', 'Fearless, loyal, affectionate', 'Moderate', True, 'Moderate', 'Moderate', 'One of the smallest terriers, Norwich Terriers are hardy, fearless, and affectionate companions.'),
+        ('Dog', 'Old_English_Sheepdog', 'Large', '10-12 years', 'Adaptable, gentle, intelligent', 'High', True, 'Moderate', 'High', 'Recognizable by their shaggy coat, Old English Sheepdogs are adaptable and good-natured. Once droving dogs of western England, they combine herding ability with a playful, protective nature toward their families.'),
+        ('Dog', 'Pekinese', 'Small', '12-14 years', 'Affectionate, loyal, regal in manner', 'Moderate', False, 'Low', 'High', 'Also spelled Pekingese, these small dogs with flat faces and long coats were once sacred to Chinese royalty.'),
+        ('Dog', 'Pembroke', 'Small', '12-15 years', 'Affectionate, intelligent, outgoing', 'Moderate', True, 'Moderate', 'Moderate', 'Known for their short legs and long bodies, Pembroke Welsh Corgis are herding dogs favored by the British royal family.'),
+        ('Dog', 'Pomeranian', 'Small', '12-16 years', 'Lively, bold, inquisitive', 'Moderate', False, 'Low', 'High', 'Small, fluffy dogs with fox-like faces, known for their vivacious personalities and luxurious coats. Once larger sled dogs, these bred-down companions retain their bold spirit and were favored by royalty including Queen Victoria.'),
+        ('Dog', 'Rhodesian_Ridgeback', 'Large', '10-12 years', 'Dignified, intelligent, strong-willed', 'Moderate', True, 'High', 'Low', 'Large, muscular dogs known for the ridge of hair along their backs, originally bred to hunt lions in Africa.'),
+        ('Dog', 'Rottweiler', 'Large', '8-10 years', 'Loyal, loving, confident guardian', 'High', True, 'High', 'Low', 'Powerful and protective, Rottweilers are excellent guard dogs but also loving family companions when well-trained.'),
+        ('Dog', 'Saint_Bernard', 'Giant', '8-10 years', 'Gentle, patient, friendly', 'High', True, 'Moderate', 'High', 'Known for their massive size and gentle nature, Saint Bernards were originally bred for rescue work in the Swiss Alps.'),
+        ('Dog', 'Saluki', 'Large', '12-14 years', 'Gentle, dignified, independent-minded', 'High', True, 'High', 'Low', 'Ancient sighthounds known for their grace and speed, Salukis have a distinctive feathered coat and ears.'),
+        ('Dog', 'Samoyed', 'Medium', '12-14 years', 'Friendly, gentle, adaptable', 'High', True, 'High', 'High', 'Beautiful white Arctic dogs known for their "smiling" expression and thick, fluffy coat. Originally bred for sledding and herding reindeer, they combine working dog capability with a warm, family-friendly nature.'),
+        ('Dog', 'Scotch_Terrier', 'Small', '11-13 years', 'Independent, confident, spirited', 'Moderate', True, 'Moderate', 'High', 'Also known as the Scottish Terrier, these distinctive dogs with beards and eyebrows are known for their dignified, almost human-like personality.'),
+        ('Dog', 'Scottish_Deerhound', 'Large', '8-11 years', 'Gentle, dignified, polite', 'High', True, 'High', 'Moderate', 'Large, wiry-coated sighthounds resembling Greyhounds, known for their gentle nature and hunting ability.'),
+        ('Dog', 'Sealyham_Terrier', 'Small', '12-14 years', 'Alert, outgoing, calm', 'Moderate', True, 'Moderate', 'High', 'Originally bred for hunting, Sealyhams are now rare but make charming and sturdy companions. Developed in Wales to hunt badgers and otters, they combine terrier tenacity with a surprisingly calm demeanor.'),
+        ('Dog', 'Shetland_Sheepdog', 'Small', '12-14 years', 'Playful, energetic, intelligent', 'High', True, 'High', 'High', 'Small herding dogs resembling miniature Collies, known for their intelligence and agility. Originally from the Shetland Islands, these "Shelties" excel in obedience, herding, and agility competitions while being devoted family companions.'),
+        ('Dog', 'Shih-Tzu', 'Small', '10-16 years', 'Affectionate, playful, outgoing', 'High', True, 'Low', 'High', 'Small, affectionate companion dogs known for their long, silky coat and sweet personality. Originally bred for Chinese royalty, they are excellent lap dogs and adapt well to both city and suburban life.'),
+        ('Dog', 'Siberian_Husky', 'Medium', '12-14 years', 'Outgoing, mischievous, loyal', 'High', True, 'Very High', 'Moderate', 'Beautiful sled dogs known for their striking blue eyes, thick coats, and wolf-like appearance. Originally bred by the Chukchi people of northeastern Asia, they combine endurance with a friendly, adventurous spirit.'),
+        ('Dog', 'Staffordshire_Bullterrier', 'Medium', '12-14 years', 'Courageous, intelligent, loyal', 'Moderate', True, 'High', 'Low', 'Strong, muscular terriers known for their courage and affectionate nature, especially with children.'),
+        ('Dog', 'Sussex_Spaniel', 'Medium', '11-13 years', 'Calm, friendly, merry', 'Moderate', True, 'Moderate', 'Moderate', 'Rare breed of spaniel known for their golden-liver coat and low-set body, originally bred for hunting.'),
+        ('Dog', 'Tibetan_Mastiff', 'Large', '10-12 years', 'Independent, reserved, intelligent', 'High', False, 'Moderate', 'High', 'Ancient guardian breed known for their massive size and thick coat, Tibetan Mastiffs are independent and protective.'),
+        ('Dog', 'Tibetan_Terrier', 'Medium', '12-15 years', 'Affectionate, sensitive, clever', 'High', True, 'Moderate', 'High', 'Not actually terriers, these dogs were bred in Tibet and are known for their profuse, long coat.'),
+        ('Dog', 'Walker_Hound', 'Large', '12-13 years', 'Smart, brave, friendly', 'Moderate', True, 'High', 'Low', 'Also known as the Treeing Walker Coonhound, these dogs are excellent hunters with a distinctive bark. Developed in Kentucky from Virginia Hounds, they are renowned for their speed, endurance, and melodious voice.'),
+        ('Dog', 'Weimaraner', 'Large', '10-13 years', 'Friendly, fearless, obedient', 'High', True, 'High', 'Low', 'Known as the "Gray Ghost," Weimaraners are athletic and intelligent dogs with a distinctive silver-gray coat.'),
+        ('Dog', 'Welsh_Springer_Spaniel', 'Medium', '12-15 years', 'Active, loyal, affectionate', 'High', True, 'High', 'Moderate', 'Similar to English Springers but with a distinctive red and white coat, Welsh Springers are devoted and energetic.'),
+        ('Dog', 'West_Highland_White_Terrier', 'Small', '12-16 years', 'Friendly, hardy, confident', 'Moderate', True, 'Moderate', 'High', 'Commonly known as "Westies," these white terriers are friendly and sturdy with a bright personality.'),
+        ('Dog', 'Yorkshire_Terrier', 'Small', '13-16 years', 'Affectionate, sprightly, tomboyish', 'High', False, 'Moderate', 'High', 'Popular toy breed known for their long silky coat and feisty personality. Despite their small size, they maintain a brave terrier spirit and were originally bred as ratters in Yorkshire mills.'),
+        ('Dog', 'Affenpinscher', 'Small', '12-15 years', 'Confident, amusing, stubborn', 'Moderate', False, 'Moderate', 'Moderate', 'Small terrier-like toys known as "monkey dogs" due to their distinctive facial appearance.'),
+        ('Dog', 'Basenji', 'Small', '12-16 years', 'Independent, smart, poised', 'Moderate', False, 'High', 'Low', 'Ancient African breed known for their inability to bark, instead making a unique yodel-like sound. Called "the barkless dog," they are intelligent hunters with cat-like cleanliness and independent nature.'),
+        ('Dog', 'Basset', 'Medium', '10-12 years', 'Patient, low-key, charming', 'Moderate', True, 'Low', 'Moderate', 'Short-legged, long-bodied hounds known for their excellent sense of smell and gentle dispositions. Second only to Bloodhounds in scenting ability, these French-origin dogs combine persistence with a sweet, patient nature.'),
+        ('Dog', 'Beagle', 'Small', '12-15 years', 'Merry, friendly, curious', 'Moderate', True, 'High', 'Low', 'Small hound dogs known for their excellent sense of smell and friendly, outgoing personalities. Popular family pets and skilled scent hunters, famous for their melodious bay and pack mentality.'),
+        ('Dog', 'Black-and-Tan_Coonhound', 'Large', '10-12 years', 'Even-tempered, easygoing, friendly', 'Moderate', True, 'High', 'Low', 'Large, powerful scent hounds known for their distinctive black and tan coloration and melodious bay.'),
+        ('Dog', 'Bloodhound', 'Large', '10-12 years', 'Gentle, patient, stubborn', 'High', True, 'Moderate', 'Moderate', 'Known for their exceptional sense of smell, Bloodhounds are large, gentle dogs often used in tracking.'),
+        ('Dog', 'Bluetick', 'Large', '11-12 years', 'Friendly, intelligent, active', 'Moderate', True, 'High', 'Low', 'Known for their mottled blue coat, Bluetick Coonhounds are skilled hunting dogs with a keen sense of smell and a melodious howl.'),
+        ('Dog', 'Borzoi', 'Large', '10-12 years', 'Quiet, gentle, athletic', 'High', True, 'Moderate', 'High', 'Also known as Russian Wolfhounds, Borzois are elegant sighthounds known for their silky coat and graceful demeanor.'),
+        ('Dog', 'Boxer', 'Large', '10-12 years', 'Fun-loving, bright, active', 'Moderate', True, 'High', 'Low', 'Playful and energetic, Boxers are known for their patient and protective nature with children. Originally developed in Germany as working dogs, they combine strength with a uniquely playful and clownish personality.'),
+        ('Dog', 'Briard', 'Large', '10-12 years', 'Confident, smart, loyal', 'High', True, 'High', 'High', 'Large French herding dogs with a distinctive long, wavy coat, Briards are loyal and protective. Known as "hearts wrapped in fur," they served as WWI sentries and now excel as both working dogs and devoted family guardians.'),
+        ('Dog', 'Bull_mastiff', 'Large', '8-10 years', 'Affectionate, loyal, quiet', 'Moderate', True, 'Moderate', 'Low', 'Large, powerful dogs originally bred to guard estates, Bullmastiffs are gentle giants with a calm demeanor.'),
+        ('Dog', 'Cairn', 'Small', '13-15 years', 'Alert, cheerful, busy', 'Moderate', True, 'Moderate', 'Moderate', 'Small, rugged terriers known for their shaggy coat and lively personality. Originally bred to hunt in the Scottish Highlands, these hardy dogs are intelligent and make excellent watchdogs despite their small size.'),
+        ('Dog', 'Chow', 'Medium', '8-12 years', 'Aloof, loyal, quiet', 'High', False, 'Low', 'High', 'Ancient Chinese breed known for their lion-like mane and blue-black tongues. Independent and dignified, they make excellent watchdogs but require early socialization.'),
+        ('Dog', 'Clumber', 'Large', '10-12 years', 'Gentle, loyal, thoughtful', 'Moderate', True, 'Moderate', 'High', 'The largest of the spaniels, Clumbers are known for their distinctive white coat and calm demeanor. Developed in France and England, these dignified hunters combine power with a methodical hunting style and gentle nature.'),
+        ('Dog', 'Cocker_Spaniel', 'Small', '10-14 years', 'Gentle, smart, happy', 'High', True, 'Moderate', 'High', 'Known for their long, silky ears and expressive eyes, Cockers are popular family dogs with a merry disposition.'),
+        ('Dog', 'Collie', 'Large', '10-14 years', 'Devoted, graceful, proud', 'High', True, 'High', 'High', 'Made famous by "Lassie," Collies are intelligent herding dogs known for their loyalty and grace. Their remarkable intuition and gentle nature make them exceptional family guardians, especially with children.'),
+        ('Dog', 'Curly-Coated_Retriever', 'Large', '10-12 years', 'Confident, independent, intelligent', 'Moderate', True, 'High', 'Low', 'Sporting dogs with a distinctive curly coat, known for their excellent swimming and retrieving abilities.'),
+        ('Dog', 'Dhole', 'Medium', '10-13 years', 'Social, intelligent, athletic', 'High', False, 'High', 'Low', 'Also known as the Asiatic wild dog, Dholes are not typically kept as pets but are important in Asian ecosystems.'),
+        ('Dog', 'Dingo', 'Medium', '10-13 years', 'Independent, intelligent, alert', 'High', False, 'High', 'Low', 'Native wild dogs of Australia, dingoes are not typically kept as pets and are important to the Australian ecosystem.'),
+        ('Dog', 'Flat-Coated_Retriever', 'Large', '8-10 years', 'Optimistic, good-humored, outgoing', 'High', True, 'Very High', 'Moderate', 'Known for their shiny black or liver-colored coat, Flat-coated Retrievers are energetic and playful, excelling in both hunting and family life.'),
+        ('Dog', 'Giant_Schnauzer', 'Large', '10-12 years', 'Loyal, intelligent, powerful', 'High', True, 'High', 'High', 'Large and powerful, Giant Schnauzers were originally bred as working dogs and require plenty of exercise.'),
+        ('Dog', 'Golden_Retriever', 'Large', '10-12 years', 'Intelligent, friendly, devoted', 'High', True, 'High', 'High', 'Beautiful, golden-coated dogs known for their gentle nature and excellence in various roles. Popular as family companions, therapy dogs, and service animals, they excel in both work and companionship with their eager-to-please attitude.'),
+        ('Dog', 'Groenendael', 'Large', '10-12 years', 'Intelligent, protective, loyal', 'High', True, 'High', 'High', 'The black variety of Belgian Shepherd, Groenendaels are intelligent working dogs with a long, black coat. Named after their village of origin, they excel in police work, herding, and as vigilant family guardians.'),
+        ('Dog', 'Keeshond', 'Medium', '12-15 years', 'Friendly, lively, outgoing', 'Moderate', True, 'Moderate', 'High', 'Distinctive "spectacles" marking around their eyes, Keeshonds are fluffy, fox-like dogs known for their friendly and affectionate nature.'),
+        ('Dog', 'Kelpie', 'Medium', '10-13 years', 'Intelligent, energetic, loyal', 'High', True, 'Very High', 'Low', 'Australian herding dogs known for their incredible work ethic and agility. Developed to work in harsh outback conditions, they are renowned for their ability to herd from above, often running across the backs of sheep in large flocks.'),
+        ('Dog', 'Komondor', 'Large', '10-12 years', 'Steady, fearless, affectionate', 'High', True, 'Moderate', 'High', 'Large Hungarian sheepdogs known for their distinctive corded white coat, resembling dreadlocks. Their unique coat once helped them blend in with sheep flocks while protecting them from wolves.'),
+        ('Dog', 'Kuvasz', 'Large', '10-12 years', 'Protective, loyal, patient', 'High', True, 'Moderate', 'High', 'Large, white guardian dogs from Hungary, Kuvaszok are protective of their families and independent. Once royal guards of Hungarian nobility, they combine impressive strength with natural protective instincts.'),
+        ('Dog', 'Malamute', 'Large', '10-12 years', 'Affectionate, loyal, playful', 'High', True, 'Very High', 'High', 'Large, powerful sled dogs with thick coats, known for their strength and endurance. Originally bred by the Mahlemut tribe for hauling heavy loads in arctic conditions, they combine impressive power with a friendly, family-oriented nature.'),
+        ('Dog', 'Malinois', 'Medium', '12-14 years', 'Confident, smart, hardworking', 'High', True, 'High', 'Moderate', 'One of four varieties of Belgian Shepherd, known for their intelligence and use in police and military work.'),
+        ('Dog', 'Miniature_Pinscher', 'Small', '12-16 years', 'Fearless, energetic, alert', 'Moderate', False, 'Moderate', 'Low', 'Often called King of Toys, Miniature Pinschers are small, energetic dogs with a big personality. Despite their small size, these fearless dogs possess proud carriage and spirited animation.'),
+        ('Dog', 'Miniature_Poodle', 'Small', '12-15 years', 'Intelligent, active, alert', 'High', True, 'Moderate', 'High', 'Smaller version of the Standard Poodle, known for their intelligence and hypoallergenic coat. Popular show dogs and companions, they retain their larger relatives high intelligence while being more adaptable to city living.'),
+        ('Dog', 'Miniature_Schnauzer', 'Small', '12-15 years', 'Friendly, smart, obedient', 'Moderate', True, 'Moderate', 'High', 'The smallest of the Schnauzer breeds, known for their distinctive beard and eyebrows. Originally ratters and farm dogs, they combine intelligence with a spunky personality, making excellent watchdogs and family companions.'),
+        ('Dog', 'Otterhound', 'Large', '10-13 years', 'Friendly, boisterous, even-tempered', 'High', True, 'High', 'High', 'Large, shaggy-coated hounds originally bred for hunting otters, now a rare breed. Known for their strong swimming ability and powerful nose, with less than 1000 remaining worldwide, making them rarer than giant pandas.'),
+        ('Dog', 'Papillon', 'Small', '13-15 years', 'Happy, alert, friendly', 'Moderate', True, 'Moderate', 'Moderate', 'Small, elegant dogs known for their butterfly-like ears and lively personalities. Despite their delicate appearance, they are surprisingly athletic and intelligent, ranking among the top 10 smartest dog breeds. Also called the Continental Toy Spaniel.'),
+        ('Dog', 'Pug', 'Small', '12-15 years', 'Charming, mischievous, loving', 'Moderate', True, 'Low', 'Moderate', 'Small, wrinkly-faced dogs known for their charming personality and comical expression. Once favored by Chinese emperors, these "multum in parvo" (much in little) dogs are excellent companions but need attention to their breathing and temperature regulation.'),
+        ('Dog', 'Redbone', 'Large', '10-12 years', 'Even-tempered, amiable, eager to please', 'Moderate', True, 'High', 'Low', 'Known for their solid red coat, Redbone Coonhounds are athletic, warm-hearted dogs originally bred for hunting. Developed in the American South, they excel at tracking and treeing with remarkable stamina and a melodious voice.'),
+        ('Dog', 'Schipperke', 'Small', '13-15 years', 'Confident, alert, curious', 'Moderate', True, 'Moderate', 'Moderate', 'Small, black dogs with a fox-like face, Schipperkes are known for their distinctive ruff and small, pointed ears. Originally Belgian barge dogs, these little captains earned their name as boat watchdogs and ratters.'),
+        ('Dog', 'Silky_terrier', 'Small', '12-15 years', 'Friendly, quick, alert', 'Moderate', False, 'Moderate', 'High', 'Similar to Yorkshire Terriers but larger, Silky Terriers are playful and enjoy being part of family activities. Developed in Australia, they combine the refinement of toy dogs with the sturdy nature of working terriers.'),
+        ('Dog', 'Soft-Coated_Wheaten_Terrier', 'Medium', '12-14 years', 'Happy, steady, self-confident', 'High', True, 'High', 'High', 'Known for their soft, wheat-colored coat and friendly demeanor, they make great family dogs. Developed in Ireland as farm dogs, they combined versatility in herding and hunting with a uniquely soft coat unlike other terriers.'),
+        ('Dog', 'Standard_Poodle', 'Large', '10-18 years', 'Intelligent, active, dignified', 'High', True, 'High', 'High', 'Highly intelligent and elegant dogs, known for their hypoallergenic coat and versatility in various dog sports.'),
+        ('Dog', 'Standard_Schnauzer', 'Medium', '13-16 years', 'Friendly, intelligent, obedient', 'High', True, 'High', 'High', 'The original Schnauzer breed, known for their distinctive beard and eyebrows and versatile working abilities.'),
+        ('Dog', 'Toy_Poodle', 'Small', '12-18 years', 'Intelligent, lively, playful', 'High', True, 'Moderate', 'High', 'The smallest variety of Poodle, known for their intelligence, agility, and hypoallergenic coat. Despite their diminutive size, they retain the intelligence and athletic ability of their larger relatives.'),
+        ('Dog', 'Toy_Terrier', 'Small', '12-16 years', 'Lively, bold, intelligent', 'Moderate', False, 'Moderate', 'Low', 'A general term for small terrier breeds, often referring to breeds like the English Toy Terrier or Toy Fox Terrier.'),
+        ('Dog', 'Vizsla', 'Medium', '10-14 years', 'Affectionate, energetic, gentle', 'High', True, 'High', 'Low', 'Known for their golden-rust coat, Vizslas are versatile hunters and loving family companions. These Hungarian pointers are often called "velcro dogs" for their strong desire to stay close to their owners.'),
+        ('Dog', 'Whippet', 'Medium', '12-15 years', 'Gentle, affectionate, quiet', 'Low', True, 'High', 'Low', 'Slender, athletic sighthounds known for their speed - capable of reaching 35mph. Despite high exercise needs, they are calm indoor companions and excellent apartment dogs.'),
+        ('Dog', 'Wire-Haired_Fox_Terrier', 'Small', '12-15 years', 'Alert, confident, gregarious', 'High', True, 'High', 'High', 'Energetic and wire-coated, these terriers were originally bred for fox hunting. Their tough, dense coat and fearless nature made them ideal for flushing foxes from their dens, and they remain bold and spirited companions.'),
+    ]
+
+    cursor.executemany('''
+    INSERT INTO AnimalCatalog (Species, Breed, Size_Category, Typical_Lifespan, Temperament, Care_Level, Good_With_Children, Exercise_Needs, Grooming_Needs, Brief_Description)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+    ''', dog_data)
+
+    conn.commit()
+    cursor.close()
+    conn.close()
+
+def get_dog_description(breed):
+    try:
+        conn = sqlite3.connect('animal_detector.db')
+        cursor = conn.cursor()
+
+        breed_name = breed.split('(')[0].strip()
+
+        cursor.execute("""
+            SELECT * FROM AnimalCatalog
+            WHERE Breed = ? OR Breed LIKE ? OR Breed LIKE ?
+        """, (breed_name, f"{breed_name}%", f"%{breed_name}"))
+
+        result = cursor.fetchone()
+
+        cursor.close()
+        conn.close()
+
+        if result:
+            # 標準化運動需求值
+            exercise_needs = result[8]
+            normalized_exercise = exercise_needs.strip().title()
+            if normalized_exercise not in ["Very High", "High", "Moderate", "Low"]:
+                normalized_exercise = "High"  # 預設值
+
+            description = {
+                "Breed": result[2],
+                "Size": result[3],
+                "Lifespan": result[4],
+                "Temperament": result[5],
+                "Care Level": result[6],
+                "Good with Children": "Yes" if result[7] else "No",
+                "Exercise Needs": normalized_exercise,
+                "Grooming Needs": result[9],
+                "Description": result[10]
+            }
+            return description
+        else:
+            print(f"No data found for breed: {breed_name}")
+            return None
+
+    except Exception as e:
+        print(f"Error in get_dog_description: {str(e)}")
+        return None
+
+insert_dog_data()

html_templates.py

@@ -0,0 +1,600 @@
+
+from typing import Dict, List, Union, Any, Optional, Callable
+from urllib.parse import quote
+
+def get_akc_breeds_link(breed: str) -> str:
+    """Generate AKC breed page URL with intelligent name handling."""
+    breed_name = breed.lower()
+    breed_name = breed_name.replace('_', '-')
+    breed_name = breed_name.replace("'", '')
+    breed_name = breed_name.replace(" ", '-')
+
+    special_cases = {
+        'mexican-hairless': 'xoloitzcuintli',
+        'brabancon-griffon': 'brussels-griffon',
+        'bull-mastiff': 'bullmastiff',
+        'walker-hound': 'treeing-walker-coonhound'
+    }
+
+    breed_name = special_cases.get(breed_name, breed_name)
+    return f"https://www.akc.org/dog-breeds/{breed_name}/"
+
+def get_color_scheme(is_single_dog: bool) -> Union[str, List[str]]:
+    """Get color scheme for dog detection visualization."""
+    single_dog_color = '#34C759'  # 清爽的綠色作為單狗顏色
+    color_list = [
+        '#FF5733',  # 珊瑚紅
+        '#28A745',  # 深綠色
+        '#3357FF',  # 寶藍色
+        '#FF33F5',  # 粉紫色
+        '#FFB733',  # 橙黃色
+        '#33FFF5',  # 青藍色
+        '#A233FF',  # 紫色
+        '#FF3333',  # 紅色
+        '#33FFB7',  # 青綠色
+        '#FFE033'   # 金黃色
+    ]
+    return single_dog_color if is_single_dog else color_list
+
+def format_warning_html(message: str) -> str:
+    """Format warning messages in a consistent style."""
+    return f'''
+        <div class="dog-info-card">
+            <div class="breed-info">
+                <p class="warning-message">
+                    <span class="icon">⚠️</span>
+                    {message}
+                </p>
+            </div>
+        </div>
+    '''
+    
+
+def format_error_message(color: str, index: int) -> str:
+    """Format error message when confidence is too low."""
+    return f'''
+        <div class="dog-info-card" style="border-left: 8px solid {color};">
+            <div class="dog-info-header" style="background-color: {color}10;">
+                <span class="dog-label" style="color: {color};">Dog {index}</span>
+            </div>
+            <div class="breed-info">
+                <div class="warning-message">
+                    <span class="icon">⚠️</span>
+                    The image is unclear or the breed is not in the dataset. Please upload a clearer image.
+                </div>
+            </div>
+        </div>
+    '''
+
+def format_description_html(description: Dict[str, Any], breed: str) -> str:
+    """Format basic breed description with tooltips."""
+    if not isinstance(description, dict):
+        return f"<p>{description}</p>"
+
+    fields_order = [
+        "Size", "Lifespan", "Temperament", "Exercise Needs",
+        "Grooming Needs", "Care Level", "Good with Children",
+        "Description"
+    ]
+
+    html_parts = []
+    for field in fields_order:
+        if field in description:
+            value = description[field]
+            tooltip_html = format_tooltip(field, value)
+            html_parts.append(f'<li style="margin-bottom: 10px;">{tooltip_html}</li>')
+
+    # Add any remaining fields
+    for key, value in description.items():
+        if key not in fields_order and key != "Breed":
+            html_parts.append(f'<li style="margin-bottom: 10px;"><strong>{key}:</strong> {value}</li>')
+
+    return f'<ul style="list-style-type: none; padding-left: 0;">{" ".join(html_parts)}</ul>'
+
+
+def format_tooltip(key: str, value: str) -> str:
+    """Format tooltip with content for each field."""
+    tooltip_contents = {
+        "Size": {
+            "title": "Size Categories",
+            "items": [
+                "Small: Under 20 pounds",
+                "Medium: 20-60 pounds",
+                "Large: Over 60 pounds",
+                "Giant: Over 100 pounds",
+                "Varies: Depends on variety"
+            ]
+        },
+        "Exercise Needs": {
+            "title": "Exercise Needs",
+            "items": [
+                "Low: Short walks and play sessions",
+                "Moderate: 1-2 hours of daily activity",
+                "High: Extensive exercise (2+ hours/day)",
+                "Very High: Constant activity and mental stimulation needed"
+            ]
+        },
+        "Grooming Needs": {
+            "title": "Grooming Requirements",
+            "items": [
+                "Low: Basic brushing, occasional baths",
+                "Moderate: Weekly brushing, occasional grooming",
+                "High: Daily brushing, frequent professional grooming needed",
+                "Professional care recommended for all levels"
+            ]
+        },
+        "Care Level": {
+            "title": "Care Level Explained",
+            "items": [
+                "Low: Basic care and attention needed",
+                "Moderate: Regular care and routine needed",
+                "High: Significant time and attention needed",
+                "Very High: Extensive care, training and attention required"
+            ]
+        },
+        "Good with Children": {
+            "title": "Child Compatibility",
+            "items": [
+                "Yes: Excellent with kids, patient and gentle",
+                "Moderate: Good with older children",
+                "No: Better suited for adult households"
+            ]
+        },
+        "Lifespan": {
+            "title": "Average Lifespan",
+            "items": [
+                "Short: 6-8 years",
+                "Average: 10-15 years",
+                "Long: 12-20 years",
+                "Varies by size: Larger breeds typically have shorter lifespans"
+            ]
+        },
+        "Temperament": {
+            "title": "Temperament Guide",
+            "items": [
+                "Describes the dog's natural behavior and personality",
+                "Important for matching with owner's lifestyle",
+                "Can be influenced by training and socialization"
+            ]
+        }
+    }
+
+    tooltip = tooltip_contents.get(key, {"title": key, "items": []})
+    tooltip_content = "<br>".join([f"• {item}" for item in tooltip["items"]])
+
+    return f'''
+        <span class="tooltip">
+            <strong>{key}:</strong>
+            <span class="tooltip-icon">ⓘ</span>
+            <span class="tooltip-text">
+                <strong>{tooltip["title"]}:</strong><br>
+                {tooltip_content}
+            </span>
+        </span> {value}
+    '''
+
+def format_single_dog_result(breed: str, description: Dict[str, Any], color: str = "#34C759") -> str:
+    """Format single dog detection result into HTML."""
+    return f'''
+        <div class="dog-info-card" style="border-left: 8px solid {color};">
+            <div class="dog-info-header" style="background-color: {color}10;">
+                <span class="dog-label" style="color: {color};">
+                    <span class="icon">🐾</span> {breed}
+                </span>
+            </div>
+            <div class="breed-info">
+                <h2 class="section-title">
+                    <span class="icon">📋</span> BASIC INFORMATION
+                </h2>
+                <div class="info-section">
+                    <div class="info-item">
+                        <span class="tooltip tooltip-left">
+                            <span class="icon">📏</span>
+                            <span class="label">Size:</span>
+                            <span class="tooltip-icon">ⓘ</span>
+                            <span class="tooltip-text">
+                                <strong>Size Categories:</strong><br>
+                                • Small: Under 20 pounds<br>
+                                • Medium: 20-60 pounds<br>
+                                • Large: Over 60 pounds<br>
+                                • Giant: Over 100 pounds<br>
+                                • Varies: Depends on variety
+                            </span>
+                        </span>
+                        <span class="value">{description['Size']}</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="tooltip">
+                            <span class="icon">⏳</span>
+                            <span class="label">Lifespan:</span>
+                            <span class="tooltip-icon">ⓘ</span>
+                            <span class="tooltip-text">
+                                <strong>Average Lifespan:</strong><br>
+                                • Short: 6-8 years<br>
+                                • Average: 10-15 years<br>
+                                • Long: 12-20 years<br>
+                                • Varies by size: Larger breeds typically have shorter lifespans
+                            </span>
+                        </span>
+                        <span class="value">{description['Lifespan']}</span>
+                    </div>
+                </div>
+                <h2 class="section-title">
+                    <span class="icon">🐕</span> TEMPERAMENT & PERSONALITY
+                </h2>
+                <div class="temperament-section">
+                    <span class="tooltip">
+                        <span class="value">{description['Temperament']}</span>
+                        <span class="tooltip-icon">ⓘ</span>
+                        <span class="tooltip-text">
+                            <strong>Temperament Guide:</strong><br>
+                            • Describes the dog's natural behavior and personality<br>
+                            • Important for matching with owner's lifestyle<br>
+                            • Can be influenced by training and socialization
+                        </span>
+                    </span>
+                </div>
+                <h2 class="section-title">
+                    <span class="icon">💪</span> CARE REQUIREMENTS
+                </h2>
+                <div class="care-section">
+                    <div class="info-item">
+                        <span class="tooltip tooltip-left">
+                            <span class="icon">🏃</span>
+                            <span class="label">Exercise:</span>
+                            <span class="tooltip-icon">ⓘ</span>
+                            <span class="tooltip-text">
+                                <strong>Exercise Needs:</strong><br>
+                                • Low: Short walks and play sessions<br>
+                                • Moderate: 1-2 hours of daily activity<br>
+                                • High: Extensive exercise (2+ hours/day)<br>
+                                • Very High: Constant activity and mental stimulation needed
+                            </span>
+                        </span>
+                        <span class="value">{description['Exercise Needs']}</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="tooltip">
+                            <span class="icon">✂️</span>
+                            <span class="label">Grooming:</span>
+                            <span class="tooltip-icon">ⓘ</span>
+                            <span class="tooltip-text">
+                                <strong>Grooming Requirements:</strong><br>
+                                • Low: Basic brushing, occasional baths<br>
+                                • Moderate: Weekly brushing, occasional grooming<br>
+                                • High: Daily brushing, frequent professional grooming needed<br>
+                                • Professional care recommended for all levels
+                            </span>
+                        </span>
+                        <span class="value">{description['Grooming Needs']}</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="tooltip">
+                            <span class="icon">⭐</span>
+                            <span class="label">Care Level:</span>
+                            <span class="tooltip-icon">ⓘ</span>
+                            <span class="tooltip-text">
+                                <strong>Care Level Explained:</strong><br>
+                                • Low: Basic care and attention needed<br>
+                                • Moderate: Regular care and routine needed<br>
+                                • High: Significant time and attention needed<br>
+                                • Very High: Extensive care, training and attention required
+                            </span>
+                        </span>
+                        <span class="value">{description['Care Level']}</span>
+                    </div>
+                </div>
+                <h2 class="section-title">
+                    <span class="icon">👨‍👩‍👧‍👦</span> FAMILY COMPATIBILITY
+                </h2>
+                <div class="family-section">
+                    <div class="info-item">
+                        <span class="tooltip">
+                            <span class="icon"></span>
+                            <span class="label">Good with Children:</span>
+                            <span class="tooltip-icon">ⓘ</span>
+                            <span class="tooltip-text">
+                                <strong>Child Compatibility:</strong><br>
+                                • Yes: Excellent with kids, patient and gentle<br>
+                                • Moderate: Good with older children<br>
+                                • No: Better suited for adult households
+                            </span>
+                        </span>
+                        <span class="value">{description['Good with Children']}</span>
+                    </div>
+                </div>
+                <h2 class="section-title">
+                    <span class="icon">📝</span>
+                    <span class="tooltip">
+                        DESCRIPTION
+                        <span class="tooltip-icon">ⓘ</span>
+                        <span class="tooltip-text">
+                            <strong>About This Description:</strong><br>
+                            • Comprehensive breed overview<br>
+                            • Personality and characteristics<br>
+                            • Historical background<br>
+                            • Typical behaviors and traits
+                        </span>
+                    </span>
+                </h2>
+                <div class="description-section">
+                    <p>{description.get('Description', '')}</p>
+                </div>
+                <div class="action-section">
+                    <a href="{get_akc_breeds_link(breed)}" target="_blank" class="akc-button">
+                        <span class="icon">🌐</span>
+                        Learn more about {breed} on AKC website
+                    </a>
+                </div>
+            </div>
+        </div>
+    '''
+
+def format_multiple_breeds_result(
+    topk_breeds: List[str],
+    relative_probs: List[str],
+    color: str,
+    index: int,
+    get_dog_description: Callable
+) -> str:
+    """Format multiple breed predictions into HTML with complete information."""
+    result = f'''
+        <div class="dog-info-card" style="border-left: 8px solid {color};">
+            <div class="dog-info-header" style="background-color: {color}10;">
+                <span class="dog-label" style="color: {color};">Dog {index+1}</span>
+            </div>
+            <div class="breed-info">
+                <div class="model-uncertainty-note">
+                    <span class="icon">ℹ️</span>
+                    Note: The model is showing some uncertainty in its predictions.
+                    Here are the most likely breeds based on the available visual features.
+                </div>
+                <div class="breeds-list">
+    '''
+
+    for j, (breed, prob) in enumerate(zip(topk_breeds, relative_probs)):
+        description = get_dog_description(breed)
+        result += f'''
+            <div class="breed-option uncertainty-mode">
+                <div class="breed-header" style="background-color: {color}10;">
+                    <span class="option-number">Option {j+1}</span>
+                    <span class="breed-name">{breed}</span>
+                    <span class="confidence-badge" style="background-color: {color}20; color: {color};">
+                        Confidence: {prob}
+                    </span>
+                </div>
+                <div class="breed-content">
+                    <div class="breed-info">
+                        <!-- BASIC INFORMATION -->
+                        <h2 class="section-title">
+                            <span class="icon">📋</span> BASIC INFORMATION
+                        </h2>
+                        <div class="info-section">
+                            <div class="info-item">
+                                <span class="tooltip tooltip-left">
+                                    <span class="icon">📏</span>
+                                    <span class="label">Size:</span>
+                                    <span class="tooltip-icon">ⓘ</span>
+                                    <span class="tooltip-text">
+                                        <strong>Size Categories:</strong><br>
+                                        • Small: Under 20 pounds<br>
+                                        • Medium: 20-60 pounds<br>
+                                        • Large: Over 60 pounds<br>
+                                        • Giant: Over 100 pounds<br>
+                                        • Varies: Depends on variety
+                                    </span>
+                                </span>
+                                <span class="value">{description['Size']}</span>
+                            </div>
+                            <div class="info-item">
+                                <span class="tooltip">
+                                    <span class="icon">⏳</span>
+                                    <span class="label">Lifespan:</span>
+                                    <span class="tooltip-icon">ⓘ</span>
+                                    <span class="tooltip-text">
+                                        <strong>Average Lifespan:</strong><br>
+                                        • Short: 6-8 years<br>
+                                        • Average: 10-15 years<br>
+                                        • Long: 12-20 years<br>
+                                        • Varies by size: Larger breeds typically have shorter lifespans
+                                    </span>
+                                </span>
+                                <span class="value">{description['Lifespan']}</span>
+                            </div>
+                        </div>
+                        <!-- TEMPERAMENT & PERSONALITY -->
+                        <h2 class="section-title">
+                            <span class="icon">🐕</span> TEMPERAMENT & PERSONALITY
+                        </h2>
+                        <div class="temperament-section">
+                            <span class="tooltip">
+                                <span class="value">{description['Temperament']}</span>
+                                <span class="tooltip-icon">ⓘ</span>
+                                <span class="tooltip-text">
+                                    <strong>Temperament Guide:</strong><br>
+                                    • Describes the dog's natural behavior and personality<br>
+                                    • Important for matching with owner's lifestyle<br>
+                                    • Can be influenced by training and socialization
+                                </span>
+                            </span>
+                        </div>
+                        <!-- CARE REQUIREMENTS -->
+                        <h2 class="section-title">
+                            <span class="icon">💪</span> CARE REQUIREMENTS
+                        </h2>
+                        <div class="care-section">
+                            <div class="info-item">
+                                <span class="tooltip tooltip-left">
+                                    <span class="icon">🏃</span>
+                                    <span class="label">Exercise:</span>
+                                    <span class="tooltip-icon">ⓘ</span>
+                                    <span class="tooltip-text">
+                                        <strong>Exercise Needs:</strong><br>
+                                        • Low: Short walks and play sessions<br>
+                                        • Moderate: 1-2 hours of daily activity<br>
+                                        • High: Extensive exercise (2+ hours/day)<br>
+                                        • Very High: Constant activity and mental stimulation needed
+                                    </span>
+                                </span>
+                                <span class="value">{description['Exercise Needs']}</span>
+                            </div>
+                            <div class="info-item">
+                                <span class="tooltip">
+                                    <span class="icon">✂️</span>
+                                    <span class="label">Grooming:</span>
+                                    <span class="tooltip-icon">ⓘ</span>
+                                    <span class="tooltip-text">
+                                        <strong>Grooming Requirements:</strong><br>
+                                        • Low: Basic brushing, occasional baths<br>
+                                        • Moderate: Weekly brushing, occasional grooming<br>
+                                        • High: Daily brushing, frequent professional grooming needed<br>
+                                        • Professional care recommended for all levels
+                                    </span>
+                                </span>
+                                <span class="value">{description['Grooming Needs']}</span>
+                            </div>
+                            <div class="info-item">
+                                <span class="tooltip">
+                                    <span class="icon">⭐</span>
+                                    <span class="label">Care Level:</span>
+                                    <span class="tooltip-icon">ⓘ</span>
+                                    <span class="tooltip-text">
+                                        <strong>Care Level Explained:</strong><br>
+                                        • Low: Basic care and attention needed<br>
+                                        • Moderate: Regular care and routine needed<br>
+                                        • High: Significant time and attention needed<br>
+                                        • Very High: Extensive care, training and attention required
+                                    </span>
+                                </span>
+                                <span class="value">{description['Care Level']}</span>
+                            </div>
+                        </div>
+                        <!-- FAMILY COMPATIBILITY -->
+                        <h2 class="section-title">
+                            <span class="icon">👨‍👩‍👧‍👦</span> FAMILY COMPATIBILITY
+                        </h2>
+                        <div class="family-section">
+                            <div class="info-item">
+                                <span class="tooltip">
+                                    <span class="icon"></span>
+                                    <span class="label">Good with Children:</span>
+                                    <span class="tooltip-icon">ⓘ</span>
+                                    <span class="tooltip-text">
+                                        <strong>Child Compatibility:</strong><br>
+                                        • Yes: Excellent with kids, patient and gentle<br>
+                                        • Moderate: Good with older children<br>
+                                        • No: Better suited for adult households
+                                    </span>
+                                </span>
+                                <span class="value">{description['Good with Children']}</span>
+                            </div>
+                        </div>
+                        <!-- DESCRIPTION -->
+                        <h2 class="section-title">
+                            <span class="icon">📝</span>
+                            <span class="tooltip">
+                                DESCRIPTION
+                                <span class="tooltip-icon">ⓘ</span>
+                                <span class="tooltip-text">
+                                    <strong>About This Description:</strong><br>
+                                    • Comprehensive breed overview<br>
+                                    • Personality and characteristics<br>
+                                    • Historical background<br>
+                                    • Typical behaviors and traits
+                                </span>
+                            </span>
+                        </h2>
+                        <div class="description-section">
+                            <p>{description.get('Description', '')}</p>
+                        </div>
+                        <!-- ACTION SECTION -->
+                        <div class="action-section">
+                            <a href="{get_akc_breeds_link(breed)}" target="_blank" class="akc-button">
+                                <span class="icon">🌐</span>
+                                Learn more about {breed} on AKC website
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        '''
+
+    result += '</div></div></div>'
+    return result
+
+
+def format_multi_dog_container(dogs_info: str) -> str:
+    """Wrap multiple dog detection results in a container."""
+    return f"""
+        <div class="dog-info-card">
+            {dogs_info}
+        </div>
+    """
+
+def format_breed_details_html(description: Dict[str, Any], breed: str) -> str:
+    """Format breed details for the show_details_html function."""
+    return f"""
+    <div class="dog-info">
+        <h2>{breed}</h2>
+        <div class="breed-details">
+            {format_description_html(description, breed)}
+            <div class="action-section">
+                <a href="{get_akc_breeds_link(breed)}" target="_blank" class="akc-button">
+                    <span class="icon">🌐</span>
+                    Learn more about {breed} on AKC website
+                </a>
+            </div>
+        </div>
+    </div>
+    """
+
+def format_comparison_result(breed1: str, breed2: str, comparison_data: Dict) -> str:
+    """Format breed comparison results into HTML."""
+    return f"""
+    <div class="comparison-container">
+        <div class="comparison-header">
+            <h3>Comparison: {breed1} vs {breed2}</h3>
+        </div>
+        <div class="comparison-content">
+            <div class="breed-column">
+                <h4>{breed1}</h4>
+                {format_comparison_details(comparison_data[breed1])}
+            </div>
+            <div class="breed-column">
+                <h4>{breed2}</h4>
+                {format_comparison_details(comparison_data[breed2])}
+            </div>
+        </div>
+    </div>
+    """
+
+def format_comparison_details(breed_data: Dict) -> str:
+    """Format individual breed details for comparison."""
+    original_data = breed_data.get('Original_Data', {})
+    return f"""
+        <div class="comparison-details">
+            <p><strong>Size:</strong> {original_data.get('Size', 'N/A')}</p>
+            <p><strong>Exercise Needs:</strong> {original_data.get('Exercise Needs', 'N/A')}</p>
+            <p><strong>Care Level:</strong> {original_data.get('Care Level', 'N/A')}</p>
+            <p><strong>Grooming Needs:</strong> {original_data.get('Grooming Needs', 'N/A')}</p>
+            <p><strong>Good with Children:</strong> {original_data.get('Good with Children', 'N/A')}</p>
+            <p><strong>Temperament:</strong> {original_data.get('Temperament', 'N/A')}</p>
+        </div>
+    """
+
+def format_header_html() -> str:
+    """Format the application header HTML."""
+    return """
+    <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>
+    """

recommendation_html_format.py

@@ -0,0 +1,482 @@
+
+from breed_health_info import breed_health_info, default_health_note
+from breed_noise_info import breed_noise_info
+from dog_database import get_dog_description
+from scoring_calculation_system import calculate_compatibility_score
+
+def format_recommendation_html(recommendations: List[Dict]) -> str:
+    """將推薦結果格式化為HTML"""
+    html_content = "<div class='recommendations-container'>"
+
+    for rec in recommendations:
+        breed = rec['breed']
+        scores = rec['scores']
+        info = rec['info']
+        rank = rec.get('rank', 0)
+        final_score = rec.get('final_score', scores['overall'])
+        bonus_score = rec.get('bonus_score', 0)
+
+        health_info = breed_health_info.get(breed, {"health_notes": default_health_note})
+        noise_info = breed_noise_info.get(breed, {
+            "noise_notes": "Noise information not available",
+            "noise_level": "Unknown",
+            "source": "N/A"
+        })
+
+        # 解析噪音資訊
+        noise_notes = noise_info.get('noise_notes', '').split('\n')
+        noise_characteristics = []
+        barking_triggers = []
+        noise_level = ''
+
+        current_section = None
+        for line in noise_notes:
+            line = line.strip()
+            if 'Typical noise characteristics:' in line:
+                current_section = 'characteristics'
+            elif 'Noise level:' in line:
+                noise_level = line.replace('Noise level:', '').strip()
+            elif 'Barking triggers:' in line:
+                current_section = 'triggers'
+            elif line.startswith('•'):
+                if current_section == 'characteristics':
+                    noise_characteristics.append(line[1:].strip())
+                elif current_section == 'triggers':
+                    barking_triggers.append(line[1:].strip())
+
+        # 生成特徵和觸發因素的HTML
+        noise_characteristics_html = '\n'.join([f'<li>{item}</li>' for item in noise_characteristics])
+        barking_triggers_html = '\n'.join([f'<li>{item}</li>' for item in barking_triggers])
+
+        # 處理健康資訊
+        health_notes = health_info.get('health_notes', '').split('\n')
+        health_considerations = []
+        health_screenings = []
+
+        current_section = None
+        for line in health_notes:
+            line = line.strip()
+            if 'Common breed-specific health considerations' in line:
+                current_section = 'considerations'
+            elif 'Recommended health screenings:' in line:
+                current_section = 'screenings'
+            elif line.startswith('•'):
+                if current_section == 'considerations':
+                    health_considerations.append(line[1:].strip())
+                elif current_section == 'screenings':
+                    health_screenings.append(line[1:].strip())
+
+        health_considerations_html = '\n'.join([f'<li>{item}</li>' for item in health_considerations])
+        health_screenings_html = '\n'.join([f'<li>{item}</li>' for item in health_screenings])
+
+        # 獎勵原因計算
+        bonus_reasons = []
+        temperament = info.get('Temperament', '').lower()
+        if any(trait in temperament for trait in ['friendly', 'gentle', 'affectionate']):
+            bonus_reasons.append("Positive temperament traits")
+        if info.get('Good with Children') == 'Yes':
+            bonus_reasons.append("Excellent with children")
+        try:
+            lifespan = info.get('Lifespan', '10-12 years')
+            years = int(lifespan.split('-')[0])
+            if years > 12:
+                bonus_reasons.append("Above-average lifespan")
+        except:
+            pass
+
+        html_content += f"""
+        <div class="dog-info-card recommendation-card">
+            <div class="breed-info">
+                <h2 class="section-title">
+                    <span class="icon">🏆</span> #{rank} {breed.replace('_', ' ')}
+                    <span class="score-badge">
+                        Overall Match: {final_score*100:.1f}%
+                    </span>
+                </h2>
+                <div class="compatibility-scores">
+                    <div class="score-item">
+                        <span class="label">Space Compatibility:</span>
+                        <div class="progress-bar">
+                            <div class="progress" style="width: {scores['space']*100}%"></div>
+                        </div>
+                        <span class="percentage">{scores['space']*100:.1f}%</span>
+                    </div>
+                    <div class="score-item">
+                        <span class="label">Exercise Match:</span>
+                        <div class="progress-bar">
+                            <div class="progress" style="width: {scores['exercise']*100}%"></div>
+                        </div>
+                        <span class="percentage">{scores['exercise']*100:.1f}%</span>
+                    </div>
+                    <div class="score-item">
+                        <span class="label">Grooming Match:</span>
+                        <div class="progress-bar">
+                            <div class="progress" style="width: {scores['grooming']*100}%"></div>
+                        </div>
+                        <span class="percentage">{scores['grooming']*100:.1f}%</span>
+                    </div>
+                    <div class="score-item">
+                        <span class="label">Experience Match:</span>
+                        <div class="progress-bar">
+                            <div class="progress" style="width: {scores['experience']*100}%"></div>
+                        </div>
+                        <span class="percentage">{scores['experience']*100:.1f}%</span>
+                    </div>
+                    <div class="score-item">
+                        <span class="label">
+                            Noise Compatibility:
+                            <span class="tooltip">
+                                <span class="tooltip-icon">ⓘ</span>
+                                <span class="tooltip-text">
+                                    <strong>Noise Compatibility Score:</strong><br>
+                                    • Based on your noise tolerance preference<br>
+                                    • Considers breed's typical noise level<br>
+                                    • Accounts for living environment
+                                </span>
+                            </span>
+                        </span>
+                        <div class="progress-bar">
+                            <div class="progress" style="width: {scores['noise']*100}%"></div>
+                        </div>
+                        <span class="percentage">{scores['noise']*100:.1f}%</span>
+                    </div>
+                    {f'''
+                    <div class="score-item bonus-score">
+                        <span class="label">
+                            Breed Bonus:
+                            <span class="tooltip">
+                                <span class="tooltip-icon">ⓘ</span>
+                                <span class="tooltip-text">
+                                    <strong>Breed Bonus Points:</strong><br>
+                                    • {('<br>• '.join(bonus_reasons)) if bonus_reasons else 'No additional bonus points'}<br>
+                                    <br>
+                                    <strong>Bonus Factors Include:</strong><br>
+                                    • Friendly temperament<br>
+                                    • Child compatibility<br>
+                                    • Longer lifespan<br>
+                                    • Living space adaptability
+                                </span>
+                            </span>
+                        </span>
+                        <div class="progress-bar">
+                            <div class="progress" style="width: {bonus_score*100}%"></div>
+                        </div>
+                        <span class="percentage">{bonus_score*100:.1f}%</span>
+                    </div>
+                    ''' if bonus_score > 0 else ''}
+                </div>
+                <div class="breed-details-section">
+                    <h3 class="subsection-title">
+                        <span class="icon">📋</span> Breed Details
+                    </h3>
+                    <div class="details-grid">
+                        <div class="detail-item">
+                            <span class="tooltip">
+                                <span class="icon">📏</span>
+                                <span class="label">Size:</span>
+                                <span class="tooltip-icon">ⓘ</span>
+                                <span class="tooltip-text">
+                                    <strong>Size Categories:</strong><br>
+                                    • Small: Under 20 pounds<br>
+                                    • Medium: 20-60 pounds<br>
+                                    • Large: Over 60 pounds
+                                </span>
+                                <span class="value">{info['Size']}</span>
+                            </span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="tooltip">
+                                <span class="icon">🏃</span>
+                                <span class="label">Exercise Needs:</span>
+                                <span class="tooltip-icon">ⓘ</span>
+                                <span class="tooltip-text">
+                                    <strong>Exercise Needs:</strong><br>
+                                    • Low: Short walks<br>
+                                    • Moderate: 1-2 hours daily<br>
+                                    • High: 2+ hours daily<br>
+                                    • Very High: Constant activity
+                                </span>
+                                <span class="value">{info['Exercise Needs']}</span>
+                            </span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="tooltip">
+                                <span class="icon">👨‍👩‍👧‍👦</span>
+                                <span class="label">Good with Children:</span>
+                                <span class="tooltip-icon">ⓘ</span>
+                                <span class="tooltip-text">
+                                    <strong>Child Compatibility:</strong><br>
+                                    • Yes: Excellent with kids<br>
+                                    • Moderate: Good with older children<br>
+                                    • No: Better for adult households
+                                </span>
+                                <span class="value">{info['Good with Children']}</span>
+                            </span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="tooltip">
+                                <span class="icon">⏳</span>
+                                <span class="label">Lifespan:</span>
+                                <span class="tooltip-icon">ⓘ</span>
+                                <span class="tooltip-text">
+                                    <strong>Average Lifespan:</strong><br>
+                                    • Short: 6-8 years<br>
+                                    • Average: 10-15 years<br>
+                                    • Long: 12-20 years<br>
+                                    • Varies by size: Larger breeds typically have shorter lifespans
+                                </span>
+                            </span>
+                            <span class="value">{info['Lifespan']}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="description-section">
+                    <h3 class="subsection-title">
+                        <span class="icon">📝</span> Description
+                    </h3>
+                    <p class="description-text">{info.get('Description', '')}</p>
+                </div>
+                <div class="noise-section">
+                    <h3 class="section-header">
+                        <span class="icon">🔊</span> Noise Behavior
+                    </h3>
+                    <div class="noise-info">
+                        <div class="noise-details">
+                            <h4 class="section-header">Typical noise characteristics:</h4>
+                            <div class="characteristics-list">
+                                <div class="list-item">Moderate to high barker</div>
+                                <div class="list-item">Alert watch dog</div>
+                                <div class="list-item">Attention-seeking barks</div>
+                                <div class="list-item">Social vocalizations</div>
+                            </div>
+
+                            <div class="noise-level-display">
+                                <h4 class="section-header">Noise level:</h4>
+                                <div class="level-indicator">
+                                    <span class="level-text">Moderate-High</span>
+                                    <div class="level-bars">
+                                        <span class="bar"></span>
+                                        <span class="bar"></span>
+                                        <span class="bar"></span>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <h4 class="section-header">Barking triggers:</h4>
+                            <div class="triggers-list">
+                                <div class="list-item">Separation anxiety</div>
+                                <div class="list-item">Attention needs</div>
+                                <div class="list-item">Strange noises</div>
+                                <div class="list-item">Excitement</div>
+                            </div>
+                        </div>
+                        <div class="noise-disclaimer">
+                            <p class="disclaimer-text source-text">Source: Compiled from various breed behavior resources, 2024</p>
+                            <p class="disclaimer-text">Individual dogs may vary in their vocalization patterns.</p>
+                            <p class="disclaimer-text">Training can significantly influence barking behavior.</p>
+                            <p class="disclaimer-text">Environmental factors may affect noise levels.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="health-section">
+                    <h3 class="section-header">
+                        <span class="icon">🏥</span> Health Insights
+                        <span class="tooltip">
+                            <span class="tooltip-icon">ⓘ</span>
+                            <span class="tooltip-text">
+                                Health information is compiled from multiple sources including veterinary resources, breed guides, and international canine health databases.
+                                Each dog is unique and may vary from these general guidelines.
+                            </span>
+                        </span>
+                    </h3>
+                    <div class="health-info">
+                        <div class="health-details">
+                            <div class="health-block">
+                                <h4 class="section-header">Common breed-specific health considerations:</h4>
+                                <div class="health-grid">
+                                    <div class="health-item">Patellar luxation</div>
+                                    <div class="health-item">Progressive retinal atrophy</div>
+                                    <div class="health-item">Von Willebrand's disease</div>
+                                    <div class="health-item">Open fontanel</div>
+                                </div>
+                            </div>
+
+                            <div class="health-block">
+                                <h4 class="section-header">Recommended health screenings:</h4>
+                                <div class="health-grid">
+                                    <div class="health-item screening">Patella evaluation</div>
+                                    <div class="health-item screening">Eye examination</div>
+                                    <div class="health-item screening">Blood clotting tests</div>
+                                    <div class="health-item screening">Skull development monitoring</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="health-disclaimer">
+                            <p class="disclaimer-text source-text">Source: Compiled from various veterinary and breed information resources, 2024</p>
+                            <p class="disclaimer-text">This information is for reference only and based on breed tendencies.</p>
+                            <p class="disclaimer-text">Each dog is unique and may not develop any or all of these conditions.</p>
+                            <p class="disclaimer-text">Always consult with qualified veterinarians for professional advice.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="action-section">
+                    <a href="https://www.akc.org/dog-breeds/{breed.lower().replace('_', '-')}/"
+                       target="_blank"
+                       class="akc-button">
+                        <span class="icon">🌐</span>
+                        Learn more about {breed.replace('_', ' ')} on AKC website
+                    </a>
+                </div>
+            </div>
+        </div>
+        """
+
+    html_content += "</div>"
+    return html_content
+
+def get_breed_recommendations(user_prefs: UserPreferences, top_n: int = 10) -> List[Dict]:
+    """基於使用者偏好推薦狗品種，確保正確的分數排序"""
+    print("Starting get_breed_recommendations")
+    recommendations = []
+    seen_breeds = set()
+
+    try:
+        # 獲取所有品種
+        conn = sqlite3.connect('animal_detector.db')
+        cursor = conn.cursor()
+        cursor.execute("SELECT Breed FROM AnimalCatalog")
+        all_breeds = cursor.fetchall()
+        conn.close()
+
+        # 收集所有品種的分數
+        for breed_tuple in all_breeds:
+            breed = breed_tuple[0]
+            base_breed = breed.split('(')[0].strip()
+
+            if base_breed in seen_breeds:
+                continue
+            seen_breeds.add(base_breed)
+
+            # 獲取品種資訊
+            breed_info = get_dog_description(breed)
+            if not isinstance(breed_info, dict):
+                continue
+
+            # 獲取噪音資訊
+            noise_info = breed_noise_info.get(breed, {
+                "noise_notes": "Noise information not available",
+                "noise_level": "Unknown",
+                "source": "N/A"
+            })
+
+            # 將噪音資訊整合到品種資訊中
+            breed_info['noise_info'] = noise_info
+
+            # 計算基礎相容性分數
+            compatibility_scores = calculate_compatibility_score(breed_info, user_prefs)
+
+            # 計算品種特定加分
+            breed_bonus = 0.0
+
+            # 壽命加分
+            try:
+                lifespan = breed_info.get('Lifespan', '10-12 years')
+                years = [int(x) for x in lifespan.split('-')[0].split()[0:1]]
+                longevity_bonus = min(0.02, (max(years) - 10) * 0.005)
+                breed_bonus += longevity_bonus
+            except:
+                pass
+
+            # 性格特徵加分
+            temperament = breed_info.get('Temperament', '').lower()
+            positive_traits = ['friendly', 'gentle', 'affectionate', 'intelligent']
+            negative_traits = ['aggressive', 'stubborn', 'dominant']
+
+            breed_bonus += sum(0.01 for trait in positive_traits if trait in temperament)
+            breed_bonus -= sum(0.01 for trait in negative_traits if trait in temperament)
+
+            # 與孩童相容性加分
+            if user_prefs.has_children:
+                if breed_info.get('Good with Children') == 'Yes':
+                    breed_bonus += 0.02
+                elif breed_info.get('Good with Children') == 'No':
+                    breed_bonus -= 0.03
+
+            # 噪音相關加分
+            if user_prefs.noise_tolerance == 'low':
+                if noise_info['noise_level'].lower() == 'high':
+                    breed_bonus -= 0.03
+                elif noise_info['noise_level'].lower() == 'low':
+                    breed_bonus += 0.02
+            elif user_prefs.noise_tolerance == 'high':
+                if noise_info['noise_level'].lower() == 'high':
+                    breed_bonus += 0.01
+
+            # 計算最終分數
+            breed_bonus = round(breed_bonus, 4)
+            final_score = round(compatibility_scores['overall'] + breed_bonus, 4)
+
+            recommendations.append({
+                'breed': breed,
+                'base_score': round(compatibility_scores['overall'], 4),
+                'bonus_score': round(breed_bonus, 4),
+                'final_score': final_score,
+                'scores': compatibility_scores,
+                'info': breed_info,
+                'noise_info': noise_info  # 添加噪音資訊到推薦結果
+            })
+        # 嚴格按照 final_score 排序
+        recommendations.sort(key=lambda x: (round(-x['final_score'], 4), x['breed'] ))  # 負號使其降序排列，並確保4位小數
+
+        # 選擇前N名並確保正確排序
+        final_recommendations = []
+        last_score = None
+        rank = 1
+
+        for rec in recommendations:
+            if len(final_recommendations) >= top_n:
+                break
+
+            current_score = rec['final_score']
+
+            # 確保分數遞減
+            if last_score is not None and current_score > last_score:
+                continue
+
+            # 添加排名資訊
+            rec['rank'] = rank
+            final_recommendations.append(rec)
+
+            last_score = current_score
+            rank += 1
+
+        # 驗證最終排序
+        for i in range(len(final_recommendations)-1):
+            current = final_recommendations[i]
+            next_rec = final_recommendations[i+1]
+
+            if current['final_score'] < next_rec['final_score']:
+                print(f"Warning: Sorting error detected!")
+                print(f"#{i+1} {current['breed']}: {current['final_score']}")
+                print(f"#{i+2} {next_rec['breed']}: {next_rec['final_score']}")
+
+                # 交換位置
+                final_recommendations[i], final_recommendations[i+1] = \
+                    final_recommendations[i+1], final_recommendations[i]
+
+        # 打印最終結果以供驗證
+        print("\nFinal Rankings:")
+        for rec in final_recommendations:
+            print(f"#{rec['rank']} {rec['breed']}")
+            print(f"Base Score: {rec['base_score']:.4f}")
+            print(f"Bonus: {rec['bonus_score']:.4f}")
+            print(f"Final Score: {rec['final_score']:.4f}\n")
+
+        return final_recommendations
+
+    except Exception as e:
+        print(f"Error in get_breed_recommendations: {str(e)}")
+        print(f"Traceback: {traceback.format_exc()}")
+        return []

scoring_calculation_system.py

@@ -0,0 +1,293 @@
+
+from breed_health_info import breed_health_info
+from breed_noise_info import breed_noise_info
+
+@dataclass
+class UserPreferences:
+    """使用者偏好設定的資料結構"""
+    living_space: str  # "apartment", "house_small", "house_large"
+    exercise_time: int  # minutes per day
+    grooming_commitment: str  # "low", "medium", "high"
+    experience_level: str  # "beginner", "intermediate", "advanced"
+    has_children: bool
+    noise_tolerance: str  # "low", "medium", "high"
+    space_for_play: bool
+    other_pets: bool
+    climate: str  # "cold", "moderate", "hot"
+    health_sensitivity: str = "medium"  # 設置默認值
+    barking_acceptance: str = None
+
+    def __post_init__(self):
+        """在初始化後運行，用於設置派生值"""
+        if self.barking_acceptance is None:
+            self.barking_acceptance = self.noise_tolerance
+
+    @staticmethod
+    def calculate_breed_bonus(breed_info: dict, user_prefs: 'UserPreferences') -> float:
+        """計算品種額外加分"""
+        bonus = 0.0
+
+        # 壽命加分
+        try:
+            lifespan = breed_info.get('Lifespan', '10-12 years')
+            years = [int(x) for x in lifespan.split('-')[0].split()[0:1]]
+            longevity_bonus = min(0.05, (max(years) - 10) * 0.01)
+            bonus += longevity_bonus
+        except:
+            pass
+
+        # 性格特徵加分
+        temperament = breed_info.get('Temperament', '').lower()
+        if user_prefs.has_children:
+            if 'gentle' in temperament or 'patient' in temperament:
+                bonus += 0.03
+
+        # 適應性加分
+        if breed_info.get('Size') == "Small" and user_prefs.living_space == "apartment":
+            bonus += 0.02
+
+        return bonus
+
+    @staticmethod
+    def calculate_additional_factors(breed_info: dict, user_prefs: 'UserPreferences') -> dict:
+        """計算額外的排序因素"""
+        factors = {
+            'versatility': 0.0,
+            'health_score': 0.0,
+            'adaptability': 0.0
+        }
+
+        # 計算多功能性分數
+        temperament = breed_info.get('Temperament', '').lower()
+        versatile_traits = ['intelligent', 'adaptable', 'versatile', 'trainable']
+        factors['versatility'] = sum(trait in temperament for trait in versatile_traits) / len(versatile_traits)
+
+        # 計算健康分數（基於預期壽命）
+        lifespan = breed_info.get('Lifespan', '10-12 years')
+        try:
+            years = [int(x) for x in lifespan.split('-')[0].split()[0:1]]
+            factors['health_score'] = min(1.0, max(years) / 15)  # 標準化到0-1範圍
+        except:
+            factors['health_score'] = 0.5  # 預設值
+
+        # 計算適應性分數
+        size = breed_info.get('Size', 'Medium')
+        factors['adaptability'] = {
+            'Small': 0.9,
+            'Medium': 0.7,
+            'Large': 0.5,
+            'Giant': 0.3
+        }.get(size, 0.5)
+
+        return factors
+
+
+def calculate_compatibility_score(breed_info: dict, user_prefs: UserPreferences) -> dict:
+    """計算品種與使用者條件的相容性分數"""
+    scores = {}
+    try:
+        # 1. 空間相容性計算
+        def calculate_space_score(size, living_space, has_yard):
+            base_scores = {
+                "Small": {"apartment": 0.95, "house_small": 1.0, "house_large": 0.90},
+                "Medium": {"apartment": 0.65, "house_small": 0.90, "house_large": 1.0},
+                "Large": {"apartment": 0.35, "house_small": 0.75, "house_large": 1.0},
+                "Giant": {"apartment": 0.15, "house_small": 0.55, "house_large": 1.0}
+            }
+
+            base_score = base_scores.get(size, base_scores["Medium"])[living_space]
+            adjustments = 0
+
+            # 特殊情況調整
+            if living_space == "apartment":
+                if size == "Small":
+                    adjustments += 0.05
+                elif size in ["Large", "Giant"]:
+                    adjustments -= 0.15
+
+            if has_yard and living_space in ["house_small", "house_large"]:
+                adjustments += 0.05
+
+            return min(1.0, max(0, base_score + adjustments))
+
+        # 2. 運動相容性計算
+        def calculate_exercise_score(breed_exercise_needs, user_exercise_time):
+            exercise_needs = {
+                'VERY HIGH': 120,
+                'HIGH': 90,
+                'MODERATE': 60,
+                'LOW': 30,
+                'VARIES': 60
+            }
+
+            breed_need = exercise_needs.get(breed_exercise_needs.strip().upper(), 60)
+            difference = abs(user_exercise_time - breed_need) / breed_need
+
+            if difference == 0:
+                return 1.0
+            elif difference <= 0.2:
+                return 0.95
+            elif difference <= 0.4:
+                return 0.85
+            elif difference <= 0.6:
+                return 0.70
+            elif difference <= 0.8:
+                return 0.50
+            else:
+                return 0.30
+
+        # 3. 美容需求計算
+        def calculate_grooming_score(breed_grooming_needs, user_commitment, breed_size):
+            base_scores = {
+                "High": {"low": 0.3, "medium": 0.7, "high": 1.0},
+                "Moderate": {"low": 0.5, "medium": 0.9, "high": 1.0},
+                "Low": {"low": 1.0, "medium": 0.95, "high": 0.9}
+            }
+
+            base_score = base_scores.get(breed_grooming_needs, base_scores["Moderate"])[user_commitment]
+
+            if breed_size == "Large" and user_commitment == "low":
+                base_score *= 0.80
+            elif breed_size == "Giant" and user_commitment == "low":
+                base_score *= 0.70
+
+            return base_score
+
+        # 4. 經驗等級計算
+        def calculate_experience_score(care_level, user_experience, temperament):
+            base_scores = {
+                "High": {"beginner": 0.3, "intermediate": 0.7, "advanced": 1.0},
+                "Moderate": {"beginner": 0.6, "intermediate": 0.9, "advanced": 1.0},
+                "Low": {"beginner": 0.9, "intermediate": 1.0, "advanced": 1.0}
+            }
+
+            score = base_scores.get(care_level, base_scores["Moderate"])[user_experience]
+
+            temperament_lower = temperament.lower()
+            if user_experience == "beginner":
+                if any(trait in temperament_lower for trait in ['stubborn', 'independent', 'intelligent']):
+                    score *= 0.80
+                if any(trait in temperament_lower for trait in ['easy', 'gentle', 'friendly']):
+                    score *= 1.15
+
+            return min(1.0, score)
+
+        def calculate_health_score(breed_name: str) -> float:
+            if breed_name not in breed_health_info:
+                return 0.5
+
+            health_notes = breed_health_info[breed_name]['health_notes'].lower()
+
+            # 嚴重健康問題
+            severe_conditions = [
+                'cancer', 'cardiomyopathy', 'epilepsy', 'dysplasia',
+                'bloat', 'progressive', 'syndrome'
+            ]
+
+            # 中等健康問題
+            moderate_conditions = [
+                'allergies', 'infections', 'thyroid', 'luxation',
+                'skin problems', 'ear'
+            ]
+
+            severe_count = sum(1 for condition in severe_conditions if condition in health_notes)
+            moderate_count = sum(1 for condition in moderate_conditions if condition in health_notes)
+
+            health_score = 1.0
+            health_score -= (severe_count * 0.1)
+            health_score -= (moderate_count * 0.05)
+
+            # 特殊條件調整
+            if user_prefs.has_children:
+                if 'requires frequent' in health_notes or 'regular monitoring' in health_notes:
+                    health_score *= 0.9
+
+            if user_prefs.experience_level == 'beginner':
+                if 'requires frequent' in health_notes or 'requires experienced' in health_notes:
+                    health_score *= 0.8
+
+            return max(0.3, min(1.0, health_score))
+
+        def calculate_noise_score(breed_name: str, user_noise_tolerance: str) -> float:
+            if breed_name not in breed_noise_info:
+                return 0.5
+
+            noise_info = breed_noise_info[breed_name]
+            noise_level = noise_info['noise_level'].lower()
+
+
+            # 基礎噪音分數矩陣
+            noise_matrix = {
+                'low': {'low': 1.0, 'medium': 0.8, 'high': 0.6},
+                'medium': {'low': 0.7, 'medium': 1.0, 'high': 0.8},
+                'high': {'low': 0.4, 'medium': 0.7, 'high': 1.0}
+            }
+
+            # 從噪音矩陣獲取基礎分數
+            base_score = noise_matrix.get(noise_level, {'low': 0.7, 'medium': 0.7, 'high': 0.7})[user_noise_tolerance]
+
+            # 特殊情況調整
+            special_adjustments = 0
+            if user_prefs.has_children and noise_level == 'high':
+                special_adjustments -= 0.1
+            if user_prefs.living_space == 'apartment':
+                if noise_level == 'high':
+                    special_adjustments -= 0.15
+                elif noise_level == 'medium':
+                    special_adjustments -= 0.05
+
+            final_score = base_score + special_adjustments
+            return max(0.3, min(1.0, final_score))
+
+        # 計算所有基礎分數
+        scores = {
+            'space': calculate_space_score(breed_info['Size'], user_prefs.living_space, user_prefs.space_for_play),
+            'exercise': calculate_exercise_score(breed_info.get('Exercise Needs', 'Moderate'), user_prefs.exercise_time),
+            'grooming': calculate_grooming_score(breed_info.get('Grooming Needs', 'Moderate'), user_prefs.grooming_commitment.lower(), breed_info['Size']),
+            'experience': calculate_experience_score(breed_info.get('Care Level', 'Moderate'), user_prefs.experience_level, breed_info.get('Temperament', '')),
+            'health': calculate_health_score(breed_info.get('Breed', '')),
+            'noise': calculate_noise_score(breed_info.get('Breed', ''), user_prefs.noise_tolerance)
+        }
+
+        # 更新權重配置
+        weights = {
+            'space': 0.20,
+            'exercise': 0.20,
+            'grooming': 0.15,
+            'experience': 0.15,
+            'health': 0.15,
+            'noise': 0.15
+        }
+
+        # 基礎分數計算
+        base_score = sum(score * weights[category]
+                        for category, score in scores.items()
+                        if category != 'overall')
+
+        # 額外調整
+        adjustments = 0
+
+        # 1. 適應性加分
+        if breed_info.get('Adaptability', 'Medium') == 'High':
+            adjustments += 0.02
+
+        # 2. 氣候相容性
+        if user_prefs.climate in breed_info.get('Suitable Climate', '').split(','):
+            adjustments += 0.02
+
+        # 3. 其他寵物相容性
+        if user_prefs.other_pets and breed_info.get('Good with Other Pets') == 'Yes':
+            adjustments += 0.02
+
+        final_score = min(1.0, max(0, base_score + adjustments))
+        scores['overall'] = round(final_score, 4)
+
+        # 四捨五入所有分數
+        for key in scores:
+            scores[key] = round(scores[key], 4)
+
+        return scores
+
+    except Exception as e:
+        print(f"Error in calculate_compatibility_score: {str(e)}")
+        return {k: 0.5 for k in ['space', 'exercise', 'grooming', 'experience', 'health', 'noise', 'overall']}

styles.py

@@ -0,0 +1,1238 @@
+
+def get_css_styles():
+    return """
+        .dog-info-card {
+            margin: 0 0 20px 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;
+            border: 1px solid #e1e4e8;
+            position: relative;
+        }
+
+        .dog-info-card:hover {
+            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+        }
+
+        .dog-info-card:before {  
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 8px;
+            background-color: inherit;
+        }
+
+        .dog-info-header {
+            padding: 24px 28px;  /* 增加內距 */
+            margin: 0;
+            font-size: 22px;
+            font-weight: bold;
+            border-bottom: 1px solid #e1e4e8;
+        }
+
+        .dog-info-header {
+            background-color: transparent;
+        }
+
+        .colored-border {
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 8px;
+        }
+
+        .dog-info-header {
+            border-left-width: 8px;
+            border-left-style: solid;
+        }
+
+        .breed-info {
+            padding: 28px;  /* 增加整體內距 */
+            line-height: 1.6;
+            font-size: 1rem;
+            border: none;
+        }
+
+        .section-title {
+            font-size: 1.2em !important;
+            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;
+        }
+
+        .section-header {
+            color: #2c3e50;
+            font-size: 1.15rem;
+            font-weight: 600;
+            margin: 20px 0 12px 0;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .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;
+            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.2em !important;  # 從 1.5em 改為 1.2em
+            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;
+        }
+
+        .action-section {
+            margin-top: 20px;
+            padding: 15px;
+            text-align: center;
+            border-top: 1px solid #dee2e6;
+        }
+
+        .akc-button {
+            display: inline-block;
+            padding: 12px 24px;
+            background-color: #007bff;
+            color: white !important;
+            text-decoration: none;
+            border-radius: 5px;
+            font-weight: 500;
+            transition: background-color 0.3s;
+        }
+
+        .akc-button:hover {
+            background-color: #0056b3;
+            text-decoration: none;
+        }
+
+        .akc-button .icon {
+            margin-right: 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: 1rem !important;  /* 增加字體大小 */
+        }
+        .description-section,
+        .description-section p,
+        .temperament-section,
+        .temperament-section .value,
+        .info-item,
+        .info-item .value,
+        .breed-content {
+            font-size: 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);
+        }
+
+        .bonus-score .tooltip-text {
+            width: 250px;
+            line-height: 1.4;
+            padding: 10px;
+        }
+
+        .bonus-score .progress {
+            background: linear-gradient(90deg, #48bb78, #68d391);
+        }
+
+        .health-section {
+            margin: 25px 0;
+            padding: 24px;
+            background-color: #f8f9fb;
+            border-radius: 12px;
+            border: 1px solid #e1e4e8;
+        }
+
+        .health-section .subsection-title {
+            font-size: 1.3em;
+            font-weight: 600;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: #2c3e50;
+        }
+
+        .health-info {
+            background-color: white;
+            padding: 24px;
+            border-radius: 8px;
+            margin: 15px 0;
+            border: 1px solid #e1e4e8;
+        }
+
+        .health-details {
+            font-size: 1.1rem;
+            line-height: 1.6;
+        }
+
+        .health-details h4 {
+            color: #2c3e50;
+            font-size: 1.15rem;
+            font-weight: 600;
+            margin: 20px 0 15px 0;
+        }
+
+        .health-details h4:first-child {
+            margin-top: 0;
+        }
+
+        .health-details ul {
+            list-style-type: none;
+            padding-left: 0;
+            margin: 0 0 25px 0;
+        }
+
+        .health-details ul li {
+            margin-bottom: 12px;
+            padding-left: 20px;
+            position: relative;
+        }
+
+        .health-details ul li:before {
+            content: "•";
+            position: absolute;
+            left: 0;
+            color: #2c3e50;
+        }
+
+        .health-item:before {
+            content: "•";
+            color: #dc3545;
+            font-weight: bold;
+        }
+
+        .health-item.screening:before {
+            color: #28a745;
+        }
+
+        /* 區塊間距 */
+        .health-block, .noise-block {
+            margin-bottom: 24px;
+        }
+
+        .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;
+        }
+
+        .health-list li:before {
+            content: "•";
+            color: #dc3545;
+        }
+
+        .history-container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .history-entry {
+            background-color: #f8f9fa;
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 20px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+
+        .history-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #eee;
+        }
+
+        .timestamp {
+            color: #666;
+            font-size: 0.9em;
+        }
+
+        .delete-btn {
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 1.2em;
+            padding: 5px;
+        }
+
+        .delete-btn:hover {
+            color: #dc3545;
+        }
+
+        .search-params ul {
+            list-style: none;
+            padding-left: 20px;
+        }
+
+        .search-params li {
+            margin: 5px 0;
+            color: #555;
+        }
+
+        .top-results ol {
+            padding-left: 25px;
+        }
+
+        .top-results li {
+            margin: 5px 0;
+            color: #333;
+        }
+
+        .breed-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 16px;
+            margin: 8px 0;
+            background-color: white;
+            border-radius: 6px;
+            border: 1px solid #e1e4e8;
+            transition: all 0.2s ease;
+        }
+
+        .breed-item:hover {
+            transform: translateX(5px);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        .breed-rank {
+            font-weight: 600;
+            color: #666;
+            margin-right: 12px;
+            min-width: 30px;
+        }
+
+        .breed-name {
+            flex: 1;
+            font-weight: 500;
+            color: #2c3e50;
+            padding: 0 12px;
+        }
+
+        .breed-score {
+            font-weight: 600;
+            color: #34C759;
+            padding: 4px 8px;
+            border-radius: 20px;
+            background-color: rgba(52, 199, 89, 0.1);
+            min-width: 70px;
+            text-align: center;
+        }
+
+        .history-entry {
+            background-color: #f8f9fa;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 25px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+            border: 1px solid #e1e4e8;
+        }
+
+        .history-header {
+            margin-bottom: 15px;
+            padding-bottom: 12px;
+            border-bottom: 1px solid #e1e4e8;
+        }
+
+        .history-header .timestamp {
+            color: #666;
+            font-size: 0.9em;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        h4 {
+            color: #2c3e50;
+            font-size: 1.15rem;
+            font-weight: 600;
+            margin: 20px 0 12px 0;
+        }
+
+        .params-list ul {
+            list-style: none;
+            padding-left: 0;
+            margin: 10px 0;
+        }
+
+        .params-list li {
+            margin: 8px 0;
+            color: #4a5568;
+            display: flex;
+            align-items: center;
+        }
+
+        .empty-history {
+            text-align: center;
+            padding: 40px 20px;
+            color: #666;
+            font-size: 1.1em;
+            background-color: #f8f9fa;
+            border-radius: 12px;
+            border: 1px dashed #e1e4e8;
+            margin: 20px 0;
+        }
+
+        .noise-section {
+            margin: 25px 0;
+            padding: 24px;
+            background-color: #f8f9fb;
+            border-radius: 12px;
+            border: 1px solid #e1e4e8;
+        }
+
+        .noise-info {
+            background-color: white;
+            padding: 24px;
+            border-radius: 8px;
+            margin: 15px 0;
+            border: 1px solid #e1e4e8;
+        }
+
+        .noise-details {
+            font-size: 1.1rem;
+            line-height: 1.6;
+        }
+
+        .noise-level {
+            margin-bottom: 20px;
+            padding: 10px 15px;
+            background: #f8f9fa;
+            border-radius: 6px;
+            font-weight: 500;
+        }
+
+        .noise-level-block {
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 8px;
+            margin: 20px 0;
+        }
+
+        .noise-level-display {
+            background: #f8f9fa;
+            padding: 16px;
+            border-radius: 8px;
+            margin: 16px 0;
+        }
+
+        .level-indicator {
+            background: white;
+            padding: 12px 16px;
+            border-radius: 8px;
+            border: 1px solid #e1e4e8;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .level-text {
+            font-weight: 500;
+            color: #2c3e50;
+        }
+
+        .level-bars {
+            display: flex;
+            gap: 4px;
+        }
+
+        .level-bars .bar {
+            width: 4px;
+            height: 16px;
+            background: #e9ecef;
+            border-radius: 2px;
+        }
+
+        .level-indicator.low .bar:nth-child(1) { 
+            background: #4CAF50; 
+        }
+
+        .level-indicator.medium .bar:nth-child(1),
+        .level-indicator.medium .bar:nth-child(2) { 
+            background: #FFA726; 
+        }
+
+        .level-indicator.high .bar { 
+            background: #EF5350; 
+        }
+
+        .feature-list, .health-list, .screening-list {
+            list-style: none;
+            padding: 0;
+            margin: 16px 0;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 12px;
+        }
+
+        .feature-list li, .health-list li, .screening-list li {
+            background: white;
+            padding: 12px 16px;
+            border-radius: 6px;
+            border: 1px solid #e1e4e8;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.95rem;
+        }
+
+        .feature-list li:before {
+            content: "•";
+            color: #2c3e50;
+        }
+
+        .noise-notes {
+            font-family: inherit;
+            white-space: pre-wrap;
+            margin: 15px 0;
+            padding: 0;
+            background: transparent;
+            border: none;
+            font-size: 1.1rem;
+            line-height: 1.6;
+            color: #333;
+        }
+
+        .characteristics-block, .health-considerations, .health-screenings {
+            margin-bottom: 24px;
+        }
+
+        .characteristics-block h4, .health-considerations h4, .health-screenings h4 {
+            color: #2c3e50;
+            font-size: 1.1em;
+            font-weight: 600;
+            margin-bottom: 12px;
+        }
+
+        .characteristics-list,
+        .triggers-list,
+        .health-considerations-list,
+        .health-screenings-list {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 12px;
+            margin: 16px 0;
+        }
+
+        .noise-details, .health-details {
+            font-size: 1.1rem;
+            line-height: 1.6;
+        }
+
+        .noise-details ul, .health-details ul {
+            list-style: none;
+            padding-left: 0;
+            margin: 0 0 20px 0;
+        }
+
+        .noise-details li, .health-details li {
+            padding-left: 20px;
+            position: relative;
+            margin-bottom: 10px;
+            line-height: 1.5;
+        }
+
+        .noise-details li:before, .health-details li:before {
+            content: "•";
+            position: absolute;
+            left: 0;
+            color: #666;
+        }
+
+        .noise-section, .health-section {
+            margin: 25px 0;
+            padding: 24px;
+            background-color: #f8f9fb;
+            border-radius: 12px;
+            border: 1px solid #e1e4e8;
+        }
+
+        .noise-info, .health-info {
+            background-color: white;
+            padding: 24px;
+            border-radius: 8px;
+            margin: 15px 0;
+            border: 1px solid #e1e4e8;
+        }
+
+        .breed-info .description-tooltip {
+            position: relative;
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            cursor: help;
+        }
+
+        .description-tooltip .tooltip-icon {
+            font-size: 14px;
+            color: #666;
+            margin-left: 4px;
+            cursor: help;
+        }
+
+        .description-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;
+        }
+
+        .description-tooltip:hover .tooltip-text {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        .description-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;
+        }
+
+        .description-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 10px;
+        }
+
+        .description-header h3 {
+            margin: 0;
+            font-size: 1.2em;
+            color: #2c3e50;
+        }
+
+        .screening-list li:before {
+            content: "•";
+            color: #28a745;
+        }
+
+        .noise-disclaimer, .health-disclaimer {
+            margin-top: 20px;
+            padding-top: 20px;
+            border-top: 1px solid #e1e4e8;
+            color: #666;
+        }
+
+        .noise-disclaimer p, .health-disclaimer p {
+            margin: 8px 0;
+            padding-left: 20px;
+            position: relative;
+        }
+
+        .noise-disclaimer p:before, .health-disclaimer p:before {
+            content: "›";
+            position: absolute;
+            left: 0;
+            color: #999;
+        }
+
+        .disclaimer-text {
+            margin: 8px 0;
+            padding-left: 20px;
+            position: relative;
+            font-size: 0.95rem;
+            line-height: 1.5;
+            font-style: italic;
+            color: #888;
+        }
+
+        .disclaimer-text:before {
+            content: "›";
+            position: absolute;
+            left: 0;
+            color: #999;
+            font-style: normal;
+            font-weight: 500;
+        }
+
+        .list-item {
+            background: white;
+            padding: 12px 16px;
+            border-radius: 8px;
+            border: 1px solid #e1e4e8;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin: 4px 0;
+            font-size: 0.95rem;
+            color: #2c3e50;
+        }
+
+        .source-text {
+            font-style: normal !important;
+            font-weight: 500 !important;
+            color: #666 !important;
+        }
+
+        .health-grid, .noise-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+            gap: 12px;
+            margin: 16px 0;
+        }
+
+        .health-item, .noise-item {
+            background: white;
+            padding: 12px 16px;
+            border-radius: 8px;
+            border: 1px solid #e1e4e8;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            transition: all 0.2s ease;
+        }
+
+        .health-item:hover, .noise-item:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+        }
+
+        @media (max-width: 768px) {
+            /* 在小螢幕上改為單列顯示 */
+            .health-grid, .noise-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            /* 減少內邊距 */
+            .health-section, .noise-section {
+                padding: 16px;
+            }
+            
+            /* 調整字體大小 */
+            .section-header {
+                font-size: 1rem;
+            }
+            
+            /* 調整項目內邊距 */
+            .health-item, .noise-item {
+                padding: 10px 14px;
+            }
+        }
+
+        /* 較小的手機螢幕 */
+        @media (max-width: 480px) {
+            .health-grid, .noise-grid {
+                gap: 8px;
+            }
+            
+            .health-item, .noise-item {
+                padding: 8px 12px;
+                font-size: 0.9rem;
+            }
+        }
+        """