Upload 5 files

breed_comparison.py

@@ -0,0 +1,371 @@
+
+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 get_comparison_styles():
+          return """
+          /* Comparison specific styles */
+          .comparison-grid {
+              display: flex;
+              flex-direction: column;
+              gap: 0;
+              position: relative;
+          }
+
+          .breed-column {
+              padding: 24px;
+              position: relative;
+          }
+
+          .breed-column:first-child {
+              margin-bottom: 60px;
+              padding-bottom: 40px;
+          }
+
+          .breed-column:first-child::after {
+              content: '';
+              position: absolute;
+              bottom: -30px;
+              left: 0;
+              right: 0;
+              height: 2px;
+              background: linear-gradient(
+                  to right,
+                  transparent,
+                  #cbd5e0 10%,
+                  #cbd5e0 90%,
+                  transparent
+              );
+              box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+          }
+
+          .breed-column:first-child::before {
+              content: '•••';
+              position: absolute;
+              bottom: -38px;
+              left: 50%;
+              transform: translateX(-50%);
+              font-size: 24px;
+              letter-spacing: 8px;
+              color: #94a3b8;
+              text-align: center;
+              background: white;
+              padding: 0 20px;
+              z-index: 1;
+          }
+
+          .breed-column:first-child .action-section {
+              margin-bottom: 0;
+              padding-bottom: 0;
+          }
+
+          @media (max-width: 768px) {
+              .breed-column:first-child {
+                  margin-bottom: 50px;
+                  padding-bottom: 30px;
+              }
+
+              .breed-column:first-child::after {
+                  bottom: -25px;
+              }
+
+              .breed-column:first-child::before {
+                  bottom: -33px;
+                  font-size: 20px;
+              }
+          }
+
+          .dog-info-card {
+              background: white;
+              position: relative;
+              z-index: 0;
+          }
+
+          .breed-column:nth-child(2) {
+              position: relative;
+              margin-top: 20px;
+          }
+          """
+
+        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)
+          breed1_noise = breed_noise_info.get(breed1, {}).get('noise_notes', '').strip().split('\n')
+          breed2_noise = breed_noise_info.get(breed2, {}).get('noise_notes', '').strip().split('\n')
+          breed1_health = breed_health_info.get(breed1, {}).get('health_notes', '').strip().split('\n')
+          breed2_health = breed_health_info.get(breed2, {}).get('health_notes', '').strip().split('\n')
+
+          def format_noise_info(noise_data):
+              characteristics = []
+              triggers = []
+              noise_level = "Moderate"  # 默认值
+
+              in_characteristics = False
+              in_triggers = False
+
+              for line in noise_data:
+                  line = line.strip()
+                  if "Typical noise characteristics:" in line:
+                      in_characteristics = True
+                      continue
+                  elif "Barking triggers:" in line:
+                      in_triggers = True
+                      in_characteristics = False
+                      continue
+                  elif "Noise level:" in line:
+                      noise_level = line.split(':')[1].strip()
+                      continue
+
+                  if line.startswith('•'):
+                      if in_characteristics:
+                          characteristics.append(line[1:].strip())
+                      elif in_triggers:
+                          triggers.append(line[1:].strip())
+
+              return {
+                  'characteristics': characteristics,
+                  'triggers': triggers,
+                  'noise_level': noise_level
+              }
+
+          def format_health_info(health_data):
+              considerations = []
+              screenings = []
+
+              in_considerations = False
+              in_screenings = False
+
+              for line in health_data:
+                  line = line.strip()
+                  if "Common breed-specific health considerations" in line:
+                      in_considerations = True
+                      in_screenings = False
+                      continue
+                  elif "Recommended health screenings:" in line:
+                      in_screenings = True
+                      in_considerations = False
+                      continue
+
+                  if line.startswith('•'):
+                      if in_considerations:
+                          considerations.append(line[1:].strip())
+                      elif in_screenings:
+                          screenings.append(line[1:].strip())
+
+              return {
+                  'considerations': considerations,
+                  'screenings': screenings
+              }
+
+          def create_breed_column(breed, info, noise_data, health_data):
+              noise_info = format_noise_info(noise_data)
+              health_info = format_health_info(health_data)
+
+              basic_info = f"""
+                  <div class="breed-column">
+                      <h2 class="section-title">
+                          <span class="icon">🐕</span> {breed.replace('_', ' ')}
+                      </h2>
+
+                      <div class="info-section">
+                          <div class="info-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.get('Size', 'Not available')}</span>
+                              </span>
+                          </div>
+                          <div class="info-item">
+                              <span class="tooltip">
+                                  <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<br>
+                                      • Moderate: 1-2 hours daily<br>
+                                      • High: 2+ hours daily
+                                  </span>
+                                  <span class="value">{info.get('Exercise Needs', 'Not available')}</span>
+                              </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: Occasional brushing<br>
+                                      • Moderate: Weekly grooming<br>
+                                      • High: Daily maintenance
+                                  </span>
+                                  <span class="value">{info.get('Grooming Needs', 'Not available')}</span>
+                              </span>
+                          </div>
+                          <div class="info-item">
+                              <span class="tooltip">
+                                  <span class="icon">👨‍👩‍👧‍👦</span>
+                                  <span class="label">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.get('Good with Children', 'Not available')}</span>
+                              </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
+                                  </span>
+                                  <span class="value">{info.get('Lifespan', 'Not available')}</span>
+                              </span>
+                          </div>
+                      </div>
+              """
+
+              # Noise Section
+              noise_section = f"""
+                      <div class="noise-section">
+                          <h3 class="section-header">
+                              <span class="icon">🔊</span> Noise Behavior
+                              <span class="tooltip">
+                                  <span class="tooltip-icon">ⓘ</span>
+                                  <span class="tooltip-text">Information about typical barking patterns and noise levels</span>
+                              </span>
+                          </h3>
+                          <div class="noise-info">
+                              <div class="noise-details">
+                                  <h4 class="section-header">Typical noise characteristics:</h4>
+                                  <div class="characteristics-list">
+                                      {' '.join([f'<div class="list-item">{item}</div>' for item in noise_info['characteristics']]) or '<div class="list-item">Information not available</div>'}
+                                  </div>
+
+                                  <div class="noise-level-display">
+                                      <h4 class="section-header">Noise level:</h4>
+                                      <div class="level-indicator">
+                                          <span class="level-text">{noise_info['noise_level']}</span>
+                                      </div>
+                                  </div>
+
+                                  <h4 class="section-header">Barking triggers:</h4>
+                                  <div class="triggers-list">
+                                      {' '.join([f'<div class="list-item">{item}</div>' for item in noise_info['triggers']]) or '<div class="list-item">Information not available</div>'}
+                                  </div>
+                              </div>
+                          </div>
+                      </div>
+              """
+
+              # Health Section
+              health_section = f"""
+                      <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.
+                                  </span>
+                              </span>
+                          </h3>
+                          <div class="health-info">
+                              <div class="health-details">
+                                  <h4 class="section-header">Common health considerations:</h4>
+                                  <div class="health-grid">
+                                      {' '.join([f'<div class="health-item">{item}</div>' for item in health_info['considerations']]) or '<div class="health-item">Information not available</div>'}
+                                  </div>
+
+                                  <h4 class="section-header">Recommended screenings:</h4>
+                                  <div class="health-grid">
+                                      {' '.join([f'<div class="health-item screening">{item}</div>' for item in health_info['screenings']]) or '<div class="health-item screening">Information not available</div>'}
+                                  </div>
+                              </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
+                          </a>
+                      </div>
+                  </div>
+              """
+
+              return basic_info + noise_section + health_section
+
+          html_output = f"""
+          <div class="dog-info-card">
+              <div class="comparison-grid">
+                  {create_breed_column(breed1, breed1_info, breed1_noise, breed1_health)}
+                  {create_breed_column(breed2, breed2_info, breed2_noise, breed2_health)}
+              </div>
+              <style>
+                  {get_comparison_styles()}
+              </style>
+          </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_detection.py

@@ -0,0 +1,33 @@
+import re
+import gradio as gr
+from PIL import Image
+
+def create_detection_tab(predict_fn, example_images):
+    with gr.TabItem("Breed Detection"):
+        gr.HTML("<p style='text-align: center;'>Upload a picture of a dog, and the model will predict its breed and provide detailed information!</p>")
+        gr.HTML("<p style='text-align: center; color: #666; font-size: 0.9em;'>Note: The model's predictions may not always be 100% accurate, and it is recommended to use the results as a reference.</p>")
+
+        with gr.Row():
+            input_image = gr.Image(label="Upload a dog image", type="pil")
+            output_image = gr.Image(label="Annotated Image")
+
+        output = gr.HTML(label="Prediction Results")
+        initial_state = gr.State()
+
+        input_image.change(
+            predict_fn,
+            inputs=input_image,
+            outputs=[output, output_image, initial_state]
+        )
+
+        gr.Examples(
+            examples=example_images,
+            inputs=input_image
+        )
+
+    return {
+        'input_image': input_image,
+        'output_image': output_image,
+        'output': output,
+        'initial_state': initial_state
+    }

html_templates.py

@@ -0,0 +1,1015 @@
+
+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."""
+    # 獲取noise和health資訊
+    noise_info = breed_noise_info.get(breed, {})
+    health_info = breed_health_info.get(breed, {})
+    
+    # 處理噪音資訊
+    noise_notes = noise_info.get('noise_notes', '').split('\n')
+    noise_characteristics = []
+    barking_triggers = []
+    noise_level = noise_info.get('noise_level', 'Information not available')
+
+    in_section = None
+    for line in noise_notes:
+        line = line.strip()
+        if 'Typical noise characteristics:' in line:
+            in_section = 'characteristics'
+        elif 'Barking triggers:' in line:
+            in_section = 'triggers'
+        elif line.startswith('•'):
+            if in_section == 'characteristics':
+                noise_characteristics.append(line[1:].strip())
+            elif in_section == 'triggers':
+                barking_triggers.append(line[1:].strip())
+
+    # 處理健康資訊
+    health_notes = health_info.get('health_notes', '').split('\n')
+    health_considerations = []
+    health_screenings = []
+
+    in_section = None
+    for line in health_notes:
+        line = line.strip()
+        if 'Common breed-specific health considerations' in line:
+            in_section = 'considerations'
+        elif 'Recommended health screenings:' in line:
+            in_section = 'screenings'
+        elif line.startswith('•'):
+            if in_section == 'considerations':
+                health_considerations.append(line[1:].strip())
+            elif in_section == 'screenings':
+                health_screenings.append(line[1:].strip())
+
+    return f'''
+        <div class="dog-info-card" style="background: {color}10;">
+            <div class="breed-title" style="display: flex; align-items: center; gap: 10px; margin: 0 0 20px 20px;">
+                <span class="icon" style="font-size: 2.0em;">🐾</span>
+                <h2 style="
+                    margin: 0;
+                    padding: 10px 20px;
+                    background: ${color}15;
+                    border-left: 4px solid ${color};
+                    border-radius: 6px;
+                    color: ${color};
+                    font-weight: 600;
+                    font-size: 2.0em;
+                    letter-spacing: 0.5px;">
+                    {breed.replace('_', ' ')}
+                </h2>
+            </div>
+
+            <div class="breed-info">
+                <!-- Basic Information -->
+                <div class="section-header" style="margin-bottom: 15px;">
+                    <h3>
+                        <span class="icon">📋</span> BASIC INFORMATION
+                    </h3>
+                </div>
+                <div class="info-cards" style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px;">
+                    <div class="info-card" style="background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+                        <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<br>
+                                • Giant: Over 100 pounds
+                            </span>
+                        </span>
+                        <span>{description['Size']}</span>
+                    </div>
+                    <div class="info-card" style="background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+                        <span class="tooltip">
+                            <span class="icon">⏳</span>
+                            <span class="label">Lifespan</span>
+                            <span class="tooltip-icon">ⓘ</span>
+                            <span class="tooltip-text">
+                                <strong>Lifespan Categories:</strong><br>
+                                • Short: 6-8 years<br>
+                                • Average: 10-15 years<br>
+                                • Long: 12-20 years
+                            </span>
+                        </span>
+                        <span>{description['Lifespan']}</span>
+                    </div>
+                </div>
+
+                <!-- Care Requirements -->
+                <div class="section-header" style="margin-bottom: 15px;">
+                    <h3>
+                        <span class="icon">💪</span> CARE REQUIREMENTS
+                    </h3>
+                </div>
+                <div class="info-cards" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 30px;">
+                    <div class="info-card" style="background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+                        <span class="tooltip">
+                            <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<br>
+                                • Moderate: 1-2 hours daily<br>
+                                • High: 2+ hours daily
+                            </span>
+                        </span>
+                        <span>{description['Exercise Needs']}</span>
+                    </div>
+                    <div class="info-card" style="background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+                        <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<br>
+                                • Moderate: Weekly grooming<br>
+                                • High: Daily maintenance
+                            </span>
+                        </span>
+                        <span>{description['Grooming Needs']}</span>
+                    </div>
+                    <div class="info-card" style="background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+                        <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:</strong><br>
+                                • Low: Basic care<br>
+                                • Moderate: Regular care<br>
+                                • High: Extensive care
+                            </span>
+                        </span>
+                        <span>{description['Care Level']}</span>
+                    </div>
+                </div>
+
+                <!-- Noise Behavior -->
+                <div class="section-header" style="margin-bottom: 15px;">
+                    <h3>
+                        <span class="tooltip">
+                            <span class="icon">🔊</span>
+                            <span>NOISE BEHAVIOR</span>
+                            <span class="tooltip-icon">ⓘ</span>
+                            <span class="tooltip-text">
+                                <strong>Noise Behavior:</strong><br>
+                                • Typical vocalization patterns<br>
+                                • Common triggers and frequency<br>
+                                • Based on breed characteristics
+                            </span>
+                        </span>
+                    </h3>
+                </div>
+                <div class="noise-section" style="background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 30px;">
+                    <div class="noise-level" style="margin-bottom: 15px;">
+                        <span class="label">Noise Level:</span>
+                        <span class="value">{noise_level}</span>
+                    </div>
+                    <div class="characteristics-list">
+                        {format_noise_items(noise_characteristics[:2])}
+                    </div>
+
+                    <details class="expandable-section" style="margin-top: 15px;">
+                        <summary class="expand-header" style="cursor: pointer; padding: 10px; background: #f8f9fa; border-radius: 6px;">
+                            Show Complete Noise Information
+                            <span class="expand-icon">▼</span>
+                        </summary>
+                        <div class="expanded-content" style="margin-top: 15px;">
+                            <div class="characteristics-list">
+                                <h4>All Characteristics:</h4>
+                                {format_noise_items(noise_characteristics)}
+                            </div>
+                            <div class="triggers-list">
+                                <h4>Barking Triggers:</h4>
+                                {format_noise_items(barking_triggers)}
+                            </div>
+                            <div class="disclaimer-section" style="margin-top: 15px; font-size: 0.9em; color: #666;">
+                                <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>
+                    </details>
+                </div>
+
+                <!-- Health Insights -->
+                <div class="section-header" style="margin-bottom: 15px;">
+                    <h3>
+                        <span class="tooltip">
+                            <span class="icon">🏥</span>
+                            <span>HEALTH INSIGHTS</span>
+                            <span class="tooltip-icon">ⓘ</span>
+                            <span class="tooltip-text">
+                                <strong>Health Information:</strong><br>
+                                • Common breed-specific conditions<br>
+                                • Recommended health screenings<br>
+                                • General health considerations
+                            </span>
+                        </span>
+                    </h3>
+                </div>
+                <div class="health-section" style="background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 30px;">
+                    <div class="key-considerations">
+                        {format_health_items(health_considerations[:2])}
+                    </div>
+
+                    <details class="expandable-section" style="margin-top: 15px;">
+                        <summary class="expand-header" style="cursor: pointer; padding: 10px; background: #f8f9fa; border-radius: 6px;">
+                            Show Complete Health Information
+                            <span class="expand-icon">▼</span>
+                        </summary>
+                        <div class="expanded-content" style="margin-top: 15px;">
+                            <div class="considerations-list">
+                                <h4>All Health Considerations:</h4>
+                                {format_health_items(health_considerations)}
+                            </div>
+                            <div class="screenings-list">
+                                <h4>Recommended Screenings:</h4>
+                                {format_health_items(health_screenings)}
+                            </div>
+                            <div class="disclaimer-section" style="margin-top: 15px; font-size: 0.9em; color: #666;">
+                                <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>
+                    </details>
+                </div>
+
+                <!-- Description -->
+                <div class="section-header" style="margin-bottom: 15px;">
+                    <h3>
+                        <span class="icon">📝</span> DESCRIPTION
+                    </h3>
+                </div>
+                <div class="description-section" style="background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 30px;">
+                    <p style="line-height: 1.6;">{description.get('Description', '')}</p>
+                </div>
+
+                <!-- Action Section -->
+                <div class="action-section" style="text-align: center; margin-top: 30px;">
+                    <a href="{get_akc_breeds_link(breed)}" 
+                       target="_blank" 
+                       class="akc-button" 
+                       style="display: inline-block; padding: 12px 24px; background: linear-gradient(90deg, #4299e1, #48bb78); color: white; text-decoration: none; border-radius: 6px;">
+                        <span class="icon">🌐</span>
+                        Learn more about {breed} on AKC website
+                    </a>
+                </div>
+            </div>
+        </div>
+    '''
+
+
+def format_noise_items(items: List[str]) -> str:
+    """Format noise-related items into HTML list items."""
+    if not items:
+        return "<div class='list-item'>Information not available</div>"
+    return "\n".join([f"<div class='list-item'>• {item}</div>" for item in items])
+
+def format_health_items(items: List[str]) -> str:
+    """Format health-related items into HTML list items."""
+    if not items:
+        return "<div class='list-item'>Information not available</div>"
+    return "\n".join([f"<div class='list-item'>• {item}</div>" for item in items])
+
+  
+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 style="background: {color}10; border-radius: 12px 12px 0 0; padding: 20px;">
+            <div style="display: flex; align-items: center;">
+                <span style="font-size: 1.6em; color: {color}; margin-right: 12px;">🐾</span>
+                <span style="font-size: 1.4em; font-weight: 600; color: {color};">Dog {index}</span>
+            </div>
+        </div>
+
+        <!-- 內容區塊 -->
+        <div style="padding: 20px;">
+            <!-- 不確定性提示 -->
+            <div style="margin-bottom: 20px;">
+                <div style="display: flex; align-items: center; gap: 8px; padding: 12px; background: #f8f9fa; border-radius: 8px;">
+                    <span>ℹ️</span>
+                    <span>Note: The model is showing some uncertainty in its predictions. 
+                    Here are the most likely breeds based on the available visual features.</span>
+                </div>
+            </div>
+
+            <!-- 品種列表容器 -->
+            <div class="breeds-list" style="display: grid; gap: 20px;">
+    '''
+
+    for j, (breed, prob) in enumerate(zip(topk_breeds, relative_probs)):
+        description = get_dog_description(breed)
+        noise_info = breed_noise_info.get(breed, {})
+        health_info = breed_health_info.get(breed, {})
+
+        # 處理噪音資訊
+        noise_notes = noise_info.get('noise_notes', '').split('\n')
+        noise_characteristics = []
+        barking_triggers = []
+        noise_level = noise_info.get('noise_level', 'Information not available')
+
+        in_section = None
+        for line in noise_notes:
+            line = line.strip()
+            if 'Typical noise characteristics:' in line:
+                in_section = 'characteristics'
+            elif 'Barking triggers:' in line:
+                in_section = 'triggers'
+            elif line.startswith('•'):
+                if in_section == 'characteristics':
+                    noise_characteristics.append(line[1:].strip())
+                elif in_section == 'triggers':
+                    barking_triggers.append(line[1:].strip())
+
+        # 處理健康資訊
+        health_notes = health_info.get('health_notes', '').split('\n')
+        health_considerations = []
+        health_screenings = []
+
+        in_section = None
+        for line in health_notes:
+            line = line.strip()
+            if 'Common breed-specific health considerations' in line:
+                in_section = 'considerations'
+            elif 'Recommended health screenings:' in line:
+                in_section = 'screenings'
+            elif line.startswith('•'):
+                if in_section == 'considerations':
+                    health_considerations.append(line[1:].strip())
+                elif in_section == 'screenings':
+                    health_screenings.append(line[1:].strip())
+
+        result += f'''
+          <div class="dog-info-card" style="background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 48px;">
+              <div style="border-left: 8px solid {color};">
+                  <!-- Title Section -->
+                  <div class="breed-title" style="padding: 24px; background: #f8f9fa;">
+                      <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);">
+                          <div style="display: flex; align-items: center; gap: 14px;">
+                              <span style="font-size: 1.4em;">🐾</span>
+                              <h2 style="margin: 0; font-size: 1.8em; color: #1a202c; font-weight: 600;">
+                                  {'Option ' + str(j+1) + ': ' if prob else ''}{breed}
+                              </h2>
+                          </div>
+                          {f'<span style="background: {color}12; color: {color}; padding: 8px 16px; border-radius: 8px; font-size: 1em; font-weight: 500; box-shadow: 0 1px 2px {color}20;">Confidence: {prob}</span>' if prob else ''}
+                      </div>
+                  </div>
+
+                  <div class="breed-info" style="padding: 24px;">
+                      <!-- Basic Information -->
+                      <div style="margin-bottom: 32px;">
+                          <h3 style="display: flex; align-items: center; gap: 10px; margin: 0 0 20px 0; padding: 12px; background: #f8f9fa; border-radius: 6px;">
+                              <span style="font-size: 1.2em;">📋</span>
+                              <span style="font-size: 1.2em; font-weight: 600; color: #2d3748;">BASIC INFORMATION</span>
+                          </h3>
+                          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
+                              <!-- Size -->
+                              <div style="padding: 16px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0;">
+                                  <div style="display: flex; align-items: center; gap: 10px;">
+                                      <span style="font-size: 1.1em;">📏</span>
+                                      <span style="font-weight: 500;">Size</span>
+                                      <div style="position: relative; display: inline-block;" 
+                                          onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';" 
+                                          onmouseout="this.querySelector('.tooltip-content').style.visibility='hidden';this.querySelector('.tooltip-content').style.opacity='0';">
+                                          <span style="cursor: help; color: #718096;">ⓘ</span>
+                                          <div class="tooltip-content" style="
+                                              visibility: hidden;
+                                              opacity: 0;
+                                              position: absolute;
+                                              background: #2C3E50;
+                                              color: white;
+                                              padding: 12px;
+                                              border-radius: 8px;
+                                              font-size: 14px;
+                                              width: 250px;
+                                              {f'top: -130px; left: 0;' if not prob else 'top: 50%; right: -270px; transform: translateY(-50%); left: auto;'};
+                                              z-index: 99999;
+                                              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                                              pointer-events: none;">
+                                              <strong style="display: block; margin-bottom: 8px; color: white;">Size Categories:</strong>
+                                              • Small: Under 20 pounds<br>
+                                              • Medium: 20-60 pounds<br>
+                                              • Large: Over 60 pounds<br>
+                                              • Giant: Over 100 pounds
+                                              <div style="position: absolute; 
+                                                  {f'left: 20px; bottom: -8px; border-top: 8px solid #2C3E50;' if not prob else 'top: 50%; right: 100%; transform: translateY(-50%); border-right: 8px solid #2C3E50;'};
+                                                  width: 0;
+                                                  height: 0;
+                                                  border-left: 8px solid transparent;
+                                                  border-right: 8px solid transparent;">
+                                              </div>
+                                          </div>
+                                      </div>
+                                  </div>
+                                  <span style="display: block; margin-top: 8px; color: #4a5568;">{description['Size']}</span>
+                              </div>
+
+                              <!-- Lifespan -->
+                              <div style="padding: 16px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0;">
+                                  <div style="display: flex; align-items: center; gap: 10px;">
+                                      <span style="font-size: 1.1em;">⏳</span>
+                                      <span style="font-weight: 500;">Lifespan</span>
+                                      <div style="position: relative; display: inline-block;" 
+                                          onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';" 
+                                          onmouseout="this.querySelector('.tooltip-content').style.visibility='hidden';this.querySelector('.tooltip-content').style.opacity='0';">
+                                          <span style="cursor: help; color: #718096;">ⓘ</span>
+                                          <div class="tooltip-content" style="
+                                              visibility: hidden;
+                                              opacity: 0;
+                                              position: absolute;
+                                              background: #2C3E50;
+                                              color: white;
+                                              padding: 12px;
+                                              border-radius: 8px;
+                                              font-size: 14px;
+                                              width: 250px;
+                                              {f'top: -130px; left: 0;' if not prob else 'top: 50%; right: -270px; transform: translateY(-50%); left: auto;'};
+                                              z-index: 99999;
+                                              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                                              pointer-events: none;">
+                                              <strong style="display: block; margin-bottom: 8px; color: white;">Lifespan Categories:</strong>
+                                              • Short: 6-8 years<br>
+                                              • Average: 10-15 years<br>
+                                              • Long: 12-20 years
+                                              <div style="position: absolute; 
+                                                  {f'left: 20px; bottom: -8px; border-top: 8px solid #2C3E50;' if not prob else 'top: 50%; right: 100%; transform: translateY(-50%); border-right: 8px solid #2C3E50;'};
+                                                  width: 0;
+                                                  height: 0;
+                                                  border-left: 8px solid transparent;
+                                                  border-right: 8px solid transparent;">
+                                              </div>
+                                          </div>
+                                      </div>
+                                  </div>
+                                  <span style="display: block; margin-top: 8px; color: #4a5568;">{description['Lifespan']}</span>
+                              </div>
+                          </div>
+                      </div>
+
+                      <!-- Care Requirements -->
+                      <div style="margin-bottom: 32px;">
+                          <h3 style="display: flex; align-items: center; gap: 10px; margin: 0 0 20px 0; padding: 12px; background: #f8f9fa; border-radius: 6px;">
+                              <span style="font-size: 1.2em;">💪</span>
+                              <span style="font-size: 1.2em; font-weight: 600; color: #2d3748;">CARE REQUIREMENTS</span>
+                          </h3>
+                          <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;">
+                              <!-- Exercise -->
+                              <div style="padding: 16px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0;">
+                                  <div style="display: flex; align-items: center; gap: 10px;">
+                                      <span style="font-size: 1.1em;">🏃</span>
+                                      <span style="font-weight: 500;">Exercise</span>
+                                      <div style="position: relative; display: inline-block;" 
+                                          onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';" 
+                                          onmouseout="this.querySelector('.tooltip-content').style.visibility='hidden';this.querySelector('.tooltip-content').style.opacity='0';">
+                                          <span style="cursor: help; color: #718096;">ⓘ</span>
+                                          <div class="tooltip-content" style="
+                                              visibility: hidden;
+                                              opacity: 0;
+                                              position: absolute;
+                                              background: #2C3E50;
+                                              color: white;
+                                              padding: 12px;
+                                              border-radius: 8px;
+                                              font-size: 14px;
+                                              width: 250px;
+                                              {f'top: -130px; left: 0;' if not prob else 'top: 50%; right: -270px; transform: translateY(-50%); left: auto;'};
+                                              z-index: 99999;
+                                              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                                              pointer-events: none;">
+                                              <strong style="display: block; margin-bottom: 8px; color: white;">Exercise Needs:</strong>
+                                              • Low: Short walks<br>
+                                              • Moderate: 1-2 hours daily<br>
+                                              • High: 2+ hours daily
+                                              <div style="position: absolute; 
+                                                  {f'left: 20px; bottom: -8px; border-top: 8px solid #2C3E50;' if not prob else 'top: 50%; right: 100%; transform: translateY(-50%); border-right: 8px solid #2C3E50;'};
+                                                  width: 0;
+                                                  height: 0;
+                                                  border-left: 8px solid transparent;
+                                                  border-right: 8px solid transparent;">
+                                              </div>
+                                          </div>
+                                      </div>
+                                  </div>
+                                  <span style="display: block; margin-top: 8px; color: #4a5568;">{description['Exercise Needs']}</span>
+                              </div>
+
+                              <!-- Grooming -->
+                              <div style="padding: 16px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0;">
+                                  <div style="display: flex; align-items: center; gap: 10px;">
+                                      <span style="font-size: 1.1em;">✂️</span>
+                                      <span style="font-weight: 500;">Grooming</span>
+                                      <div style="position: relative; display: inline-block;" 
+                                          onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';" 
+                                          onmouseout="this.querySelector('.tooltip-content').style.visibility='hidden';this.querySelector('.tooltip-content').style.opacity='0';">
+                                          <span style="cursor: help; color: #718096;">ⓘ</span>
+                                          <div class="tooltip-content" style="
+                                              visibility: hidden;
+                                              opacity: 0;
+                                              position: absolute;
+                                              background: #2C3E50;
+                                              color: white;
+                                              padding: 12px;
+                                              border-radius: 8px;
+                                              font-size: 14px;
+                                              width: 250px;
+                                              {f'top: -130px; left: 0;' if not prob else 'top: 50%; right: -270px; transform: translateY(-50%); left: auto;'};
+                                              z-index: 99999;
+                                              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                                              pointer-events: none;">
+                                              <strong style="display: block; margin-bottom: 8px; color: white;">Grooming Requirements:</strong>
+                                              • Low: Basic brushing<br>
+                                              • Moderate: Weekly grooming<br>
+                                              • High: Daily maintenance
+                                              <div style="position: absolute; 
+                                                  {f'left: 20px; bottom: -8px; border-top: 8px solid #2C3E50;' if not prob else 'top: 50%; right: 100%; transform: translateY(-50%); border-right: 8px solid #2C3E50;'};
+                                                  width: 0;
+                                                  height: 0;
+                                                  border-left: 8px solid transparent;
+                                                  border-right: 8px solid transparent;">
+                                              </div>
+                                          </div>
+                                      </div>
+                                  </div>
+                                  <span style="display: block; margin-top: 8px; color: #4a5568;">{description['Grooming Needs']}</span>
+                              </div>
+
+                              <!-- Care Level -->
+                              <div style="padding: 16px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0;">
+                                  <div style="display: flex; align-items: center; gap: 10px;">
+                                      <span style="font-size: 1.1em;">⭐</span>
+                                      <span style="font-weight: 500;">Care Level</span>
+                                      <div style="position: relative; display: inline-block;" 
+                                          onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';" 
+                                          onmouseout="this.querySelector('.tooltip-content').style.visibility='hidden';this.querySelector('.tooltip-content').style.opacity='0';">
+                                          <span style="cursor: help; color: #718096;">ⓘ</span>
+                                          <div class="tooltip-content" style="
+                                              visibility: hidden;
+                                              opacity: 0;
+                                              position: absolute;
+                                              background: #2C3E50;
+                                              color: white;
+                                              padding: 12px;
+                                              border-radius: 8px;
+                                              font-size: 14px;
+                                              width: 250px;
+                                              {f'top: -130px; left: 0;' if not prob else 'top: 50%; right: -270px; transform: translateY(-50%); left: auto;'};
+                                              z-index: 99999;
+                                              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                                              pointer-events: none;">
+                                              <strong style="display: block; margin-bottom: 8px; color: white;">Care Level:</strong>
+                                              • Low: Basic care<br>
+                                              • Moderate: Regular care<br>
+                                              • High: Extensive care
+                                              <div style="position: absolute; 
+                                                  {f'left: 20px; bottom: -8px; border-top: 8px solid #2C3E50;' if not prob else 'top: 50%; right: 100%; transform: translateY(-50%); border-right: 8px solid #2C3E50;'};
+                                                  width: 0;
+                                                  height: 0;
+                                                  border-left: 8px solid transparent;
+                                                  border-right: 8px solid transparent;">
+                                              </div>
+                                          </div>
+                                      </div>
+                                  </div>
+                                  <span style="display: block; margin-top: 8px; color: #4a5568;">{description['Care Level']}</span>
+                              </div>
+                          </div>
+                      </div>
+
+                      <!-- Noise Behavior -->
+                      <div style="margin-bottom: 32px;">
+                          <h3 style="display: flex; align-items: center; gap: 10px; margin: 0 0 20px 0; padding: 12px; background: #f8f9fa; border-radius: 6px;">
+                              <span style="font-size: 1.2em;">🔊</span>
+                              <span style="font-size: 1.2em; font-weight: 600; color: #2d3748;">NOISE BEHAVIOR</span>
+                              <div style="position: relative; display: inline-block;" 
+                                  onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';" 
+                                  onmouseout="this.querySelector('.tooltip-content').style.visibility='hidden';this.querySelector('.tooltip-content').style.opacity='0';">
+                                  <span style="cursor: help; color: #718096;">ⓘ</span>
+                                  <div class="tooltip-content" style="
+                                      visibility: hidden;
+                                      opacity: 0;
+                                      position: absolute;
+                                      background: #2C3E50;
+                                      color: white;
+                                      padding: 12px;
+                                      border-radius: 8px;
+                                      font-size: 14px;
+                                      width: 250px;
+                                      {f'top: -130px; left: 0;' if not prob else 'top: 50%; right: -270px; transform: translateY(-50%); left: auto;'};
+                                      z-index: 99999;
+                                      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                                      pointer-events: none;">
+                                      <strong style="display: block; margin-bottom: 8px; color: white;">Noise Behavior:</strong>
+                                      • Typical vocalization patterns<br>
+                                      • Common triggers and frequency<br>
+                                      • Based on breed characteristics
+                                      <div style="position: absolute; 
+                                          {f'left: 20px; bottom: -8px; border-top: 8px solid #2C3E50;' if not prob else 'top: 50%; right: 100%; transform: translateY(-50%); border-right: 8px solid #2C3E50;'};
+                                          width: 0;
+                                          height: 0;
+                                          border-left: 8px solid transparent;
+                                          border-right: 8px solid transparent;">
+                                      </div>
+                                  </div>
+                              </div>
+                          </h3>
+                          <div style="background: #fff; padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
+                              <div style="margin-bottom: 16px;">
+                                  <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px;">
+                                      <span style="font-weight: 500;">Noise Level:</span>
+                                      <span>{noise_level}</span>
+                                  </div>
+                                  <div style="margin-bottom: 16px;">
+                                      {format_noise_items(noise_characteristics[:2])}
+                                  </div>
+                              </div>
+                              <details style="margin-top: 20px;">
+                                  <summary style="cursor: pointer; padding: 12px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e2e8f0; outline: none; list-style-type: none;">
+                                      <span style="display: flex; align-items: center; justify-content: space-between;">
+                                          <span style="font-weight: 500;">Show Complete Noise Information</span>
+                                          <span style="transition: transform 0.2s;">▶</span>
+                                      </span>
+                                  </summary>
+                                  <!-- 展開內容部分 -->
+                                  <div style="margin-top: 16px; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;">
+                                      <div style="margin-bottom: 24px;">
+                                          <h4 style="margin: 0 0 12px 0; color: #2d3748;">All Characteristics</h4>
+                                          {format_noise_items(noise_characteristics)}
+                                      </div>
+                                      <div style="margin-bottom: 24px;">
+                                          <h4 style="margin: 0 0 12px 0; color: #2d3748;">Barking Triggers</h4>
+                                          {format_noise_items(barking_triggers)}
+                                      </div>
+                                      <div style="margin-top: 20px; padding-top: 16px; border-top: 1px solid #e2e8f0;">
+                                          <p style="margin: 0 0 8px 0; color: #4a5568; font-size: 0.9em;">Source: Compiled from various breed behavior resources, 2024</p>
+                                          <p style="margin: 0 0 8px 0; color: #4a5568; font-size: 0.9em;">Individual dogs may vary in their vocalization patterns.</p>
+                                          <p style="margin: 0 0 8px 0; color: #4a5568; font-size: 0.9em;">Training can significantly influence barking behavior.</p>
+                                          <p style="margin: 0 0 8px 0; color: #4a5568; font-size: 0.9em;">Environmental factors may affect noise levels.</p>
+                                      </div>
+                                  </div>
+                              </details>
+                          </div>
+                      </div>
+
+                      <!-- Health Insights -->
+                      <div style="margin-bottom: 32px;">
+                          <h3 style="display: flex; align-items: center; gap: 10px; margin: 0 0 20px 0; padding: 12px; background: #f8f9fa; border-radius: 6px;">
+                              <span style="font-size: 1.2em;">🏥</span>
+                              <span style="font-size: 1.2em; font-weight: 600; color: #2d3748;">HEALTH INSIGHTS</span>
+                              <div style="position: relative; display: inline-block;" 
+                                  onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';" 
+                                  onmouseout="this.querySelector('.tooltip-content').style.visibility='hidden';this.querySelector('.tooltip-content').style.opacity='0';">
+                                  <span style="cursor: help; color: #718096;">ⓘ</span>
+                                  <div class="tooltip-content" style="
+                                      visibility: hidden;
+                                      opacity: 0;
+                                      position: absolute;
+                                      background: #2C3E50;
+                                      color: white;
+                                      padding: 12px;
+                                      border-radius: 8px;
+                                      font-size: 14px;
+                                      width: 250px;
+                                      {f'top: -130px; left: 0;' if not prob else 'top: 50%; right: -270px; transform: translateY(-50%); left: auto;'};
+                                      z-index: 99999;
+                                      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+                                      pointer-events: none;">
+                                      <strong style="display: block; margin-bottom: 8px; color: white;">Health Information:</strong>
+                                      • Common breed-specific conditions<br>
+                                      • Recommended health screenings<br>
+                                      • General health considerations
+                                      <div style="position: absolute; 
+                                          {f'left: 20px; bottom: -8px; border-top: 8px solid #2C3E50;' if not prob else 'top: 50%; right: 100%; transform: translateY(-50%); border-right: 8px solid #2C3E50;'};
+                                          width: 0;
+                                          height: 0;
+                                          border-left: 8px solid transparent;
+                                          border-right: 8px solid transparent;">
+                                      </div>
+                                  </div>
+                              </div>
+                          </h3>
+                          <div style="background: #fff; padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
+                              <div style="margin-bottom: 16px;">
+                                  {format_health_items(health_considerations[:2])}
+                              </div>
+                              <details style="margin-top: 20px;">
+                                  <summary style="cursor: pointer; padding: 12px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e2e8f0; outline: none; list-style-type: none;">
+                                      <span style="display: flex; align-items: center; justify-content: space-between;">
+                                          <span style="font-weight: 500;">Show Complete Health Information</span>
+                                          <span style="transition: transform 0.2s;">▶</span>
+                                      </span>
+                                  </summary>
+                                  <div style="margin-top: 16px; padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;">
+                                      <div style="margin-bottom: 24px;">
+                                          <h4 style="margin: 0 0 12px 0; color: #2d3748;">All Health Considerations</h4>
+                                          {format_health_items(health_considerations)}
+                                      </div>
+                                      <div style="margin-bottom: 24px;">
+                                          <h4 style="margin: 0 0 12px 0; color: #2d3748;">Recommended Screenings</h4>
+                                          {format_health_items(health_screenings)}
+                                      </div>
+                                      <div style="margin-top: 20px; padding-top: 16px; border-top: 1px solid #e2e8f0;">
+                                          <p style="margin: 0 0 8px 0; color: #4a5568; font-size: 0.9em;">Source: Compiled from veterinary resources and breed health studies, 2024</p>
+                                          <p style="margin: 0 0 8px 0; color: #4a5568; font-size: 0.9em;">Regular vet check-ups are essential for all breeds.</p>
+                                          <p style="margin: 0 0 8px 0; color: #4a5568; font-size: 0.9em;">Early detection and prevention are key to managing health issues.</p>
+                                          <p style="margin: 0 0 8px 0; color: #4a5568; font-size: 0.9em;">Not all dogs will develop these conditions.</p>
+                                      </div>
+                                  </div>
+                              </details>
+                          </div>
+                      </div>
+
+                      <!-- Description -->
+                      <div style="margin-bottom: 32px;">
+                          <h3 style="display: flex; align-items: center; gap: 10px; margin: 0 0 20px 0; padding: 12px; background: #f8f9fa; border-radius: 6px;">
+                              <span style="font-size: 1.2em;">📝</span>
+                              <span style="font-size: 1.2em; font-weight: 600; color: #2d3748;">DESCRIPTION</span>
+                          </h3>
+                          <div style="background: #fff; padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
+                              <p style="line-height: 1.6; margin: 0; color: #2d3748;">{description.get('Description', '')}</p>
+                          </div>
+                      </div>
+
+                      <!-- Action Section -->
+                      <div style="text-align: center; margin-top: 32px;">
+                          <a href="{get_akc_breeds_link(breed)}" 
+                              target="_blank" 
+                              rel="noopener noreferrer"
+                              style="display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: linear-gradient(90deg, #4299e1, #48bb78); color: white; text-decoration: none; border-radius: 8px; font-weight: 500; transition: opacity 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+                              <span style="font-size: 1.2em;">🌐</span>
+                              Learn more about {breed} on AKC website
+                          </a>
+                      </div>
+                  </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,496 @@
+import sqlite3
+import traceback
+from typing import List, Dict
+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 (
+    UserPreferences, 
+    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
+                        <span class="tooltip">
+                            <span class="tooltip-icon">ⓘ</span>
+                            <span class="tooltip-text">
+                                <strong>Noise Behavior:</strong><br>
+                                • Typical vocalization patterns<br>
+                                • Common triggers and frequency<br>
+                                • Based on breed characteristics
+                            </span>
+                        </span>
+                    </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 []

styles.py

@@ -0,0 +1,1160 @@
+
+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;
+        }
+
+        .option-item {
+            padding: 15px;
+            margin-bottom: 10px;
+            border-bottom: 1px solid #ddd;
+        }
+
+        .option-item:last-child {
+            border-bottom: none; /* 最後一個選項去除邊線 */
+        }
+
+        .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;
+            }
+        }
+
+        .expandable-section {
+            margin-top: 1rem;
+        }
+
+        .expand-header {
+            cursor: pointer;
+            padding: 0.5rem;
+            background-color: #f3f4f6;
+            border-radius: 0.375rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .expand-header:hover {
+            background-color: #e5e7eb;
+        }
+
+        .expand-icon {
+            transition: transform 0.2s;
+        }
+
+        .expandable-section[open] .expand-icon {
+            transform: rotate(180deg);
+        }
+
+        .expanded-content {
+            padding: 1rem;
+            background-color: #ffffff;
+            border-radius: 0.375rem;
+            margin-top: 0.5rem;
+        }
+
+        .info-cards > div:first-child .tooltip .tooltip-text,
+        .info-cards > div:nth-child(3n+1) .tooltip .tooltip-text {
+            left: calc(100% + 20px); /* 向右移動更多 */
+        }
+
+        .info-cards > div:first-child .tooltip .tooltip-text::after,
+        .info-cards > div:nth-child(3n+1) .tooltip .tooltip-text::after {
+            right: calc(100% - 2px); /* 向右移動箭頭 */
+        }
+
+        .section-header h3 .tooltip .tooltip-text {
+            left: calc(100% + 20px); /* 向右移動更多 */
+        }
+
+        .section-header h3 .tooltip .tooltip-text::after {
+            right: calc(100% - 2px); /* 向右移動箭頭 */
+            
+        }
+
+        """