Update app.py

app.py

@@ -15,34 +15,34 @@ import asyncio
 import traceback
 
 
-model_yolo = YOLO('yolov8l.pt')  
-
-
-dog_breeds = ["Afghan_Hound", "African_Hunting_Dog", "Airedale", "American_Staffordshire_Terrier", 
-              "Appenzeller", "Australian_Terrier", "Bedlington_Terrier", "Bernese_Mountain_Dog", 
-              "Blenheim_Spaniel", "Border_Collie", "Border_Terrier", "Boston_Bull", "Bouvier_Des_Flandres", 
-              "Brabancon_Griffon", "Brittany_Spaniel", "Cardigan", "Chesapeake_Bay_Retriever", 
-              "Chihuahua", "Dandie_Dinmont", "Doberman", "English_Foxhound", "English_Setter", 
-              "English_Springer", "EntleBucher", "Eskimo_Dog", "French_Bulldog", "German_Shepherd", 
-              "German_Short-Haired_Pointer", "Gordon_Setter", "Great_Dane", "Great_Pyrenees", 
-              "Greater_Swiss_Mountain_Dog", "Ibizan_Hound", "Irish_Setter", "Irish_Terrier", 
-              "Irish_Water_Spaniel", "Irish_Wolfhound", "Italian_Greyhound", "Japanese_Spaniel", 
-              "Kerry_Blue_Terrier", "Labrador_Retriever", "Lakeland_Terrier", "Leonberg", "Lhasa", 
-              "Maltese_Dog", "Mexican_Hairless", "Newfoundland", "Norfolk_Terrier", "Norwegian_Elkhound", 
-              "Norwich_Terrier", "Old_English_Sheepdog", "Pekinese", "Pembroke", "Pomeranian", 
-              "Rhodesian_Ridgeback", "Rottweiler", "Saint_Bernard", "Saluki", "Samoyed", 
-              "Scotch_Terrier", "Scottish_Deerhound", "Sealyham_Terrier", "Shetland_Sheepdog", 
-              "Shih-Tzu", "Siberian_Husky", "Staffordshire_Bullterrier", "Sussex_Spaniel", 
-              "Tibetan_Mastiff", "Tibetan_Terrier", "Walker_Hound", "Weimaraner", 
-              "Welsh_Springer_Spaniel", "West_Highland_White_Terrier", "Yorkshire_Terrier", 
-              "Affenpinscher", "Basenji", "Basset", "Beagle", "Black-and-Tan_Coonhound", "Bloodhound", 
-              "Bluetick", "Borzoi", "Boxer", "Briard", "Bull_Mastiff", "Cairn", "Chow", "Clumber", 
-              "Cocker_Spaniel", "Collie", "Curly-Coated_Retriever", "Dhole", "Dingo", 
-              "Flat-Coated_Retriever", "Giant_Schnauzer", "Golden_Retriever", "Groenendael", "Keeshond", 
-              "Kelpie", "Komondor", "Kuvasz", "Malamute", "Malinois", "Miniature_Pinscher", 
-              "Miniature_Poodle", "Miniature_Schnauzer", "Otterhound", "Papillon", "Pug", "Redbone", 
-              "Schipperke", "Silky_Terrier", "Soft-Coated_Wheaten_Terrier", "Standard_Poodle", 
-              "Standard_Schnauzer", "Toy_Poodle", "Toy_Terrier", "Vizsla", "Whippet", 
+model_yolo = YOLO('yolov8l.pt')
+
+
+dog_breeds = ["Afghan_Hound", "African_Hunting_Dog", "Airedale", "American_Staffordshire_Terrier",
+              "Appenzeller", "Australian_Terrier", "Bedlington_Terrier", "Bernese_Mountain_Dog",
+              "Blenheim_Spaniel", "Border_Collie", "Border_Terrier", "Boston_Bull", "Bouvier_Des_Flandres",
+              "Brabancon_Griffon", "Brittany_Spaniel", "Cardigan", "Chesapeake_Bay_Retriever",
+              "Chihuahua", "Dandie_Dinmont", "Doberman", "English_Foxhound", "English_Setter",
+              "English_Springer", "EntleBucher", "Eskimo_Dog", "French_Bulldog", "German_Shepherd",
+              "German_Short-Haired_Pointer", "Gordon_Setter", "Great_Dane", "Great_Pyrenees",
+              "Greater_Swiss_Mountain_Dog", "Ibizan_Hound", "Irish_Setter", "Irish_Terrier",
+              "Irish_Water_Spaniel", "Irish_Wolfhound", "Italian_Greyhound", "Japanese_Spaniel",
+              "Kerry_Blue_Terrier", "Labrador_Retriever", "Lakeland_Terrier", "Leonberg", "Lhasa",
+              "Maltese_Dog", "Mexican_Hairless", "Newfoundland", "Norfolk_Terrier", "Norwegian_Elkhound",
+              "Norwich_Terrier", "Old_English_Sheepdog", "Pekinese", "Pembroke", "Pomeranian",
+              "Rhodesian_Ridgeback", "Rottweiler", "Saint_Bernard", "Saluki", "Samoyed",
+              "Scotch_Terrier", "Scottish_Deerhound", "Sealyham_Terrier", "Shetland_Sheepdog",
+              "Shih-Tzu", "Siberian_Husky", "Staffordshire_Bullterrier", "Sussex_Spaniel",
+              "Tibetan_Mastiff", "Tibetan_Terrier", "Walker_Hound", "Weimaraner",
+              "Welsh_Springer_Spaniel", "West_Highland_White_Terrier", "Yorkshire_Terrier",
+              "Affenpinscher", "Basenji", "Basset", "Beagle", "Black-and-Tan_Coonhound", "Bloodhound",
+              "Bluetick", "Borzoi", "Boxer", "Briard", "Bull_Mastiff", "Cairn", "Chow", "Clumber",
+              "Cocker_Spaniel", "Collie", "Curly-Coated_Retriever", "Dhole", "Dingo",
+              "Flat-Coated_Retriever", "Giant_Schnauzer", "Golden_Retriever", "Groenendael", "Keeshond",
+              "Kelpie", "Komondor", "Kuvasz", "Malamute", "Malinois", "Miniature_Pinscher",
+              "Miniature_Poodle", "Miniature_Schnauzer", "Otterhound", "Papillon", "Pug", "Redbone",
+              "Schipperke", "Silky_Terrier", "Soft-Coated_Wheaten_Terrier", "Standard_Poodle",
+              "Standard_Schnauzer", "Toy_Poodle", "Toy_Terrier", "Vizsla", "Whippet",
               "Wire-Haired_Fox_Terrier"]
 
 class MultiHeadAttention(nn.Module):
@@ -141,30 +141,30 @@ async def predict_single_dog(image):
         topk_probs, topk_indices = torch.topk(probabilities, k=3)
         top1_prob = topk_probs[0][0].item()
         topk_breeds = [dog_breeds[idx.item()] for idx in topk_indices[0]]
-        
+
         # Calculate relative probabilities for display
         raw_probs = [prob.item() for prob in topk_probs[0]]
         sum_probs = sum(raw_probs)
         relative_probs = [f"{(prob/sum_probs * 100):.2f}%" for prob in raw_probs]
-        
+
     return top1_prob, topk_breeds, relative_probs
-    
+
 
 async def detect_multiple_dogs(image, conf_threshold=0.3, iou_threshold=0.45):
     results = model_yolo(image, conf=conf_threshold, iou=iou_threshold)[0]
     dogs = []
     boxes = []
     for box in results.boxes:
-        if box.cls == 16:  # COCO dataset class for dog is 16 
+        if box.cls == 16:  # COCO dataset class for dog is 16
             xyxy = box.xyxy[0].tolist()
             confidence = box.conf.item()
             boxes.append((xyxy, confidence))
-    
+
     if not boxes:
         dogs.append((image, 1.0, [0, 0, image.width, image.height]))
     else:
         nms_boxes = non_max_suppression(boxes, iou_threshold)
-        
+
         for box, confidence in nms_boxes:
             x1, y1, x2, y2 = box
             w, h = x2 - x1, y2 - y1
@@ -174,7 +174,7 @@ async def detect_multiple_dogs(image, conf_threshold=0.3, iou_threshold=0.45):
             y2 = min(image.height, y2 + h * 0.05)
             cropped_image = image.crop((x1, y1, x2, y2))
             dogs.append((cropped_image, confidence, [x1, y1, x2, y2]))
-    
+
     return dogs
 
 
@@ -187,24 +187,24 @@ def non_max_suppression(boxes, iou_threshold):
         boxes = [box for box in boxes if calculate_iou(current[0], box[0]) < iou_threshold]
     return keep
 
-    
+
 def calculate_iou(box1, box2):
     x1 = max(box1[0], box2[0])
     y1 = max(box1[1], box2[1])
     x2 = min(box1[2], box2[2])
     y2 = min(box1[3], box2[3])
-    
+
     intersection = max(0, x2 - x1) * max(0, y2 - y1)
     area1 = (box1[2] - box1[0]) * (box1[3] - box1[1])
     area2 = (box2[2] - box2[0]) * (box2[3] - box2[1])
-    
+
     iou = intersection / float(area1 + area2 - intersection)
     return iou
 
 
 async def process_single_dog(image):
     top1_prob, topk_breeds, relative_probs = await predict_single_dog(image)
-    
+
     # Case 1: Low confidence - unclear image or breed not in dataset
     if top1_prob < 0.2:
         error_message = '''
@@ -225,7 +225,7 @@ async def process_single_dog(image):
         return error_message, None, initial_state
 
     breed = topk_breeds[0]
-    
+
     # Case 2: High confidence - single breed result
     if top1_prob >= 0.45:
         description = get_dog_description(breed)
@@ -243,7 +243,7 @@ async def process_single_dog(image):
             "is_multi_dog": False
         }
         return html_content, image, initial_state
-        
+
     # Case 3: Medium confidence - show top 3 breeds with relative probabilities
     else:
         breeds_html = ""
@@ -269,7 +269,38 @@ async def process_single_dog(image):
         }
         return breeds_html, image, initial_state
 
-        
+
+def create_breed_comparison(breed1: str, breed2: str) -> dict:
+    """比較兩個狗品種的特性"""
+    breed1_info = get_dog_description(breed1)
+    breed2_info = get_dog_description(breed2)
+    
+    # 標準化數值轉換
+    value_mapping = {
+        'Size': {'Small': 1, 'Medium': 2, 'Large': 3, 'Giant': 4},
+        'Exercise_Needs': {'Low': 1, 'Moderate': 2, 'High': 3, 'Very High': 4},
+        'Care_Level': {'Low': 1, 'Moderate': 2, 'High': 3},
+        'Grooming_Needs': {'Low': 1, 'Moderate': 2, 'High': 3}
+    }
+    
+    comparison_data = {
+        breed1: {},
+        breed2: {}
+    }
+    
+    for breed, info in [(breed1, breed1_info), (breed2, breed2_info)]:
+        comparison_data[breed] = {
+            'Size': value_mapping['Size'].get(info['Size'], 2),  # 預設 Medium
+            'Exercise_Needs': value_mapping['Exercise_Needs'].get(info['Exercise Needs'], 2),  # 預設 Moderate
+            'Care_Level': value_mapping['Care_Level'].get(info['Care Level'], 2),
+            'Grooming_Needs': value_mapping['Grooming_Needs'].get(info['Grooming Needs'], 2),
+            'Good_with_Children': info['Good with Children'] == 'Yes',
+            'Original_Data': info
+        }
+    
+    return comparison_data
+
+
 async def predict(image):
     if image is None:
         return "Please upload an image to start.", None, None
@@ -291,7 +322,7 @@ async def predict(image):
         '#A233FF',  # 紫色
         '#FF3333',  # 紅色
         '#33FFB7',  # 青綠色
-        '#FFE033'   # 金黃色 
+        '#FFE033'   # 金黃色
         ]
         annotated_image = image.copy()
         draw = ImageDraw.Draw(annotated_image)
@@ -305,14 +336,14 @@ async def predict(image):
 
         for i, (cropped_image, detection_confidence, box) in enumerate(dogs):
             color = single_dog_color if len(dogs) == 1 else color_list[i % len(color_list)]
-            
+
             # 優化圖片上的標記
             draw.rectangle(box, outline=color, width=4)
             label = f"Dog {i+1}"
             label_bbox = draw.textbbox((0, 0), label, font=font)
             label_width = label_bbox[2] - label_bbox[0]
             label_height = label_bbox[3] - label_bbox[1]
-            
+
             label_x = box[0] + 5
             label_y = box[1] + 5
             draw.rectangle(
@@ -322,13 +353,13 @@ async def predict(image):
                 width=2
             )
             draw.text((label_x, label_y), label, fill=color, font=font)
-        
+
             top1_prob, topk_breeds, relative_probs = await predict_single_dog(cropped_image)
             combined_confidence = detection_confidence * top1_prob
-            
+
             # 開始資訊卡片
             dogs_info += f'<div class="dog-info-card" style="border-left: 6px solid {color};">'
-            
+
             if combined_confidence < 0.2:
                 dogs_info += f'''
                     <div class="dog-info-header" style="background-color: {color}10;">
@@ -387,7 +418,7 @@ async def predict(image):
                                 <span class="value">{description['Lifespan']}</span>
                             </div>
                         </div>
-        
+
                         <h2 class="section-title">
                             <span class="icon">🐕</span> TEMPERAMENT & PERSONALITY
                         </h2>
@@ -403,7 +434,7 @@ async def predict(image):
                                 </span>
                             </span>
                         </div>
-        
+
                         <h2 class="section-title">
                             <span class="icon">💪</span> CARE REQUIREMENTS
                         </h2>
@@ -454,7 +485,7 @@ async def predict(image):
                                 <span class="value">{description['Care Level']}</span>
                             </div>
                         </div>
-        
+
                         <h2 class="section-title">
                             <span class="icon">👨‍👩‍👧‍👦</span> FAMILY COMPATIBILITY
                         </h2>
@@ -474,14 +505,14 @@ async def predict(image):
                                 <span class="value">{description['Good with Children']}</span>
                             </div>
                         </div>
-        
+
                         <h2 class="section-title">
                             <span class="icon">📝</span> DESCRIPTION
                         </h2>
                         <div class="description-section">
                             <p>{description.get('Description', '')}</p>
                         </div>
-        
+
                         <div class="action-section">
                             <a href="{get_akc_breeds_link(breed)}" target="_blank" class="akc-button">
                                 <span class="icon">🌐</span>
@@ -498,16 +529,16 @@ async def predict(image):
                     <div class="breed-info">
                         <div class="model-uncertainty-note">
                             <span class="icon">ℹ️</span>
-                            Note: The model is showing some uncertainty in its predictions. 
+                            Note: The model is showing some uncertainty in its predictions.
                             Here are the most likely breeds based on the available visual features.
                         </div>
                         <div class="breeds-list">
                 '''
-                
+
                 for j, (breed, prob) in enumerate(zip(topk_breeds, relative_probs)):
                     description = get_dog_description(breed)
                     dogs_info += f'''
-                        <div class="breed-option uncertainty-mode">  
+                        <div class="breed-option uncertainty-mode">
                             <div class="breed-header">
                                 <span class="option-number">Option {j+1}</span>
                                 <span class="breed-name">{breed}</span>
@@ -521,46 +552,220 @@ async def predict(image):
                         </div>
                     '''
                 dogs_info += '</div></div>'
-            
+
             dogs_info += '</div>'
 
 
         html_output = f"""
-        <style>
-        .dog-info-card {{ 
-            border: 1px solid #e1e4e8; 
+            <div class="dog-info-card">
+                {dogs_info}
+            </div>
+        """
+
+        initial_state = {
+            "dogs_info": dogs_info,
+            "image": annotated_image,
+            "is_multi_dog": len(dogs) > 1,
+            "html_output": html_output
+        }
+
+        return html_output, annotated_image, initial_state
+
+    except Exception as e:
+        error_msg = f"An error occurred: {str(e)}\n\nTraceback:\n{traceback.format_exc()}"
+        print(error_msg)
+        return error_msg, None, None
+
+
+def show_details_html(choice, previous_output, initial_state):
+    if not choice:
+        return previous_output, gr.update(visible=True), initial_state
+
+    try:
+        breed = choice.split("More about ")[-1]
+        description = get_dog_description(breed)
+        formatted_description = format_description_html(description, breed)
+
+        html_output = f"""
+        <div class="dog-info">
+            <h2>{breed}</h2>
+            {formatted_description}
+        </div>
+        """
+
+        initial_state["current_description"] = html_output
+        initial_state["original_buttons"] = initial_state.get("buttons", [])
+
+        return html_output, gr.update(visible=True), initial_state
+    except Exception as e:
+        error_msg = f"An error occurred while showing details: {e}"
+        print(error_msg)
+        return f"<p style='color: red;'>{error_msg}</p>", gr.update(visible=True), initial_state
+
+
+def format_description_html(description, breed):
+    html = "<ul style='list-style-type: none; padding-left: 0;'>"
+    if isinstance(description, dict):
+        for key, value in description.items():
+            if key != "Breed":  # 跳過重複的品種顯示
+                if key == "Size":
+                    html += f'''
+                        <li style='margin-bottom: 10px;'>
+                            <span class="tooltip">
+                                <strong>{key}:</strong>
+                                <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> {value}
+                        </li>
+                    '''
+                elif key == "Exercise Needs":
+                    html += f'''
+                        <li style='margin-bottom: 10px;'>
+                            <span class="tooltip">
+                                <strong>{key}:</strong>
+                                <span class="tooltip-icon">ⓘ</span>
+                                <span class="tooltip-text">
+                                    <strong>Exercise Needs:</strong><br>
+                                    • High: 2+ hours of daily exercise<br>
+                                    • Moderate: 1-2 hours of daily activity<br>
+                                    • Low: Short walks and play sessions
+                                </span>
+                            </span> {value}
+                        </li>
+                    '''
+                elif key == "Grooming Needs":
+                    html += f'''
+                        <li style='margin-bottom: 10px;'>
+                            <span class="tooltip">
+                                <strong>{key}:</strong>
+                                <span class="tooltip-icon">ⓘ</span>
+                                <span class="tooltip-text">
+                                    <strong>Grooming Requirements:</strong><br>
+                                    • High: Daily brushing, regular professional care<br>
+                                    • Moderate: Weekly brushing, occasional grooming<br>
+                                    • Low: Minimal brushing, basic maintenance
+                                </span>
+                            </span> {value}
+                        </li>
+                    '''
+                elif key == "Care Level":
+                    html += f'''
+                        <li style='margin-bottom: 10px;'>
+                            <span class="tooltip">
+                                <strong>{key}:</strong>
+                                <span class="tooltip-icon">ⓘ</span>
+                                <span class="tooltip-text">
+                                    <strong>Care Level Explained:</strong><br>
+                                    • High: Needs significant training and attention<br>
+                                    • Moderate: Regular care and routine needed<br>
+                                    • Low: More independent, basic care sufficient
+                                </span>
+                            </span> {value}
+                        </li>
+                    '''
+                elif key == "Good with Children":
+                    html += f'''
+                        <li style='margin-bottom: 10px;'>
+                            <span class="tooltip">
+                                <strong>{key}:</strong>
+                                <span class="tooltip-icon">ⓘ</span>
+                                <span class="tooltip-text">
+                                    <strong>Child Compatibility:</strong><br>
+                                    • Yes: Excellent with kids, patient and gentle<br>
+                                    • Moderate: Good with older children<br>
+                                    • No: Better suited for adult households
+                                </span>
+                            </span> {value}
+                        </li>
+                    '''
+                elif key == "Lifespan":
+                    html += f'''
+                        <li style='margin-bottom: 10px;'>
+                            <span class="tooltip">
+                                <strong>{key}:</strong>
+                                <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> {value}
+                        </li>
+                    '''
+                elif key == "Temperament":
+                    html += f'''
+                        <li style='margin-bottom: 10px;'>
+                            <span class="tooltip">
+                                <strong>{key}:</strong>
+                                <span class="tooltip-icon">ⓘ</span>
+                                <span class="tooltip-text">
+                                    <strong>Temperament Guide:</strong><br>
+                                    • Describes the dog's natural behavior<br>
+                                    • Important for matching with owner
+                                </span>
+                            </span> {value}
+                        </li>
+                    '''
+                else:
+                    # 其他欄位保持原樣顯示
+                    html += f"<li style='margin-bottom: 10px;'><strong>{key}:</strong> {value}</li>"
+    else:
+        html += f"<li>{description}</li>"
+    html += "</ul>"
+
+    # 添加AKC連結
+    html += f'''
+        <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>
+    '''
+    return html
+
+
+with gr.Blocks(css="""
+        .dog-info-card {
+            border: 1px solid #e1e4e8;
             margin: 40px 0;  /* 增加卡片間距 */
-            padding: 0; 
-            border-radius: 12px; 
+            padding: 0;
+            border-radius: 12px;
             box-shadow: 0 2px 12px rgba(0,0,0,0.08);
             overflow: hidden;
             transition: all 0.3s ease;
             background: white;
-        }}
-        
-        .dog-info-card:hover {{
+        }
+
+        .dog-info-card:hover {
             box-shadow: 0 4px 16px rgba(0,0,0,0.12);
-        }}
-        
-        .dog-info-header {{ 
+        }
+
+        .dog-info-header {
             padding: 24px 28px;  /* 增加內距 */
             margin: 0;
             font-size: 22px;
             font-weight: bold;
             border-bottom: 1px solid #e1e4e8;
-        }}
-        
-        .breed-info {{
+        }
+
+        .breed-info {
             padding: 28px;  /* 增加整體內距 */
             line-height: 1.6;
-        }}
-        
-        .section-title {{
+        }
+
+        .section-title {
             font-size: 1.3em;
             font-weight: 700;
             color: #2c3e50;
             margin: 32px 0 20px 0;
-            padding: 12px 0;  
+            padding: 12px 0;
             border-bottom: 2px solid #e1e4e8;
             text-transform: uppercase;
             letter-spacing: 0.5px;
@@ -568,16 +773,16 @@ async def predict(image):
             align-items: center;
             gap: 8px;
             position: relative;
-        }}
-        
-        .icon {{
+        }
+
+        .icon {
             font-size: 1.2em;
             display: inline-flex;
             align-items: center;
             justify-content: center;
-        }}
-        
-        .info-section, .care-section, .family-section {{
+        }
+
+        .info-section, .care-section, .family-section {
             display: flex;
             flex-wrap: wrap;
             gap: 16px;
@@ -586,9 +791,9 @@ async def predict(image):
             background: #f8f9fa;
             border-radius: 12px;
             border: 1px solid #e1e4e8;  /* 添加邊框 */
-        }}
-        
-        .info-item {{
+        }
+
+        .info-item {
             background: white;  /* 改為白色背景 */
             padding: 14px 18px;  /* 增加內距 */
             border-radius: 8px;
@@ -599,30 +804,30 @@ async def predict(image):
             border: 1px solid #e1e4e8;
             flex: 1 1 auto;
             min-width: 200px;
-        }}
-        
-        .label {{
+        }
+
+        .label {
             color: #666;
             font-weight: 600;
             font-size: 1.1rem;
-        }}
-        
-        .value {{
+        }
+
+        .value {
             color: #2c3e50;
             font-weight: 500;
             font-size: 1.1rem;
-        }}
-        
-        .temperament-section {{
+        }
+
+        .temperament-section {
             background: #f8f9fa;
             padding: 20px;  /* 增加內距 */
             border-radius: 12px;
             margin-bottom: 28px;  /* 增加間距 */
             color: #444;
             border: 1px solid #e1e4e8;  /* 添加邊框 */
-        }}
-        
-        .description-section {{
+        }
+
+        .description-section {
             background: #f8f9fa;
             padding: 24px;  /* 增加內距 */
             border-radius: 12px;
@@ -631,28 +836,27 @@ async def predict(image):
             color: #444;
             border: 1px solid #e1e4e8;  /* 添加邊框 */
             fontsize: 1.1rem;
-        }}
-        
-        .description-section p {{
+        }
+        .description-section p {
             margin: 0;
             padding: 0;
             text-align: justify;  /* 文字兩端對齊 */
             word-wrap: break-word;  /* 確保長單字會換行 */
             white-space: pre-line;  /* 保留換行但合併空白 */
             max-width: 100%;  /* 確保不會超出容器 */
-        }}
-        
-        .action-section {{
+        }
+
+        .action-section {
             margin-top: 24px;
             text-align: center;
-        }}
-        
+        }
+
         .akc-button,
         .breed-section .akc-link,
-        .breed-option .akc-link {{
+        .breed-option .akc-link {
             display: inline-flex;
             align-items: center;
-            padding: 14px 28px;  
+            padding: 14px 28px;
             background: linear-gradient(145deg, #00509E, #003F7F);
             color: white;
             border-radius: 12px;  /* 增加圓角 */
@@ -661,30 +865,29 @@ async def predict(image):
             transition: all 0.3s ease;
             font-weight: 600;
             font-size: 1.1em;
-            box-shadow: 
+            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);  
-        }}
-        
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+
         .akc-button:hover,
         .breed-section .akc-link:hover,
-        .breed-option .akc-link:hover {{
+        .breed-option .akc-link:hover {
             background: linear-gradient(145deg, #003F7F, #00509E);
-            transform: translateY(-2px);  
+            transform: translateY(-2px);
             color: white;
-            box-shadow: 
-                0 6px 12px rgba(0,0,0,0.2),  
+            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 {{
+            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;
@@ -694,9 +897,9 @@ async def predict(image):
             padding: 16px;
             background: #fff5f5;
             border-radius: 8px;
-        }}
-        
-        .model-uncertainty-note {{
+        }
+
+        .model-uncertainty-note {
             display: flex;
             align-items: center;
             gap: 12px;
@@ -706,108 +909,103 @@ async def predict(image):
             margin-bottom: 20px;
             color: #495057;
             border-radius: 4px;
-        }}
-        
-        .breeds-list {{
+        }
+
+        .breeds-list {
             display: flex;
             flex-direction: column;
             gap: 20px;
-        }}
-        
-        .breed-option {{
+        }
+
+        .breed-option {
             background: white;
             border: 1px solid #e1e4e8;
             border-radius: 8px;
             overflow: hidden;
-        }}
-        
-        .breed-header {{
+        }
+
+        .breed-header {
             display: flex;
             align-items: center;
             padding: 16px;
             background: #f8f9fa;
             gap: 12px;
             border-bottom: 1px solid #e1e4e8;
-        }}
-        
-        .option-number {{
+        }
+
+        .option-number {
             font-weight: 600;
             color: #666;
             padding: 4px 8px;
             background: #e1e4e8;
             border-radius: 4px;
-        }}
-        
-        .breed-name {{
+        }
+
+        .breed-name {
             font-size: 1.5em;
             font-weight: bold;
             color: #2c3e50;
             flex-grow: 1;
-        }}
-        
-        .confidence-badge {{
+        }
+
+        .confidence-badge {
             padding: 4px 12px;
             border-radius: 20px;
             font-size: 0.9em;
             font-weight: 500;
-        }}
-        
-        .breed-content {{
+        }
+
+        .breed-content {
             padding: 20px;
-        }}
-        
-        .breed-content li {{
+        }
+        .breed-content li {
             margin-bottom: 8px;
             display: flex;
             align-items: flex-start;  /* 改為頂部對齊 */
             gap: 8px;
             flex-wrap: wrap;  /* 允許內容換行 */
-        }}
-        
-        .breed-content li strong {{
+        }
+        .breed-content li strong {
             flex: 0 0 auto;  /* 不讓標題縮放 */
             min-width: 100px;  /* 給標題一個固定最小寬度 */
-        }}
-        
-        ul {{
+        }
+
+        ul {
             padding-left: 0;
             margin: 0;
             list-style-type: none;
-        }}
-        
-        li {{
+        }
+
+        li {
             margin-bottom: 8px;
             display: flex;
             align-items: center;
             gap: 8px;
-        }}
-        
-        .akc-link {{
+        }
+        .akc-link {
             color: white;
             text-decoration: none;
             font-weight: 600;
             font-size: 1.1em;
             transition: all 0.3s ease;
-        }}
-        
-        .akc-link:hover {{
+        }
+
+        .akc-link:hover {
             text-decoration: underline;
             color: #D3E3F0;
-        }}
-        .tooltip {{
+        }
+        .tooltip {
             position: relative;
             display: inline-flex;
             align-items: center;
             gap: 4px;
             cursor: help;
-        }}
-        
-        .tooltip .tooltip-icon {{
+        }
+        .tooltip .tooltip-icon {
             font-size: 14px;
             color: #666;
-        }}
-        
-        .tooltip .tooltip-text {{
+        }
+        .tooltip .tooltip-text {
             visibility: hidden;
             width: 250px;
             background-color: rgba(44, 62, 80, 0.95);
@@ -826,47 +1024,43 @@ async def predict(image):
             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;  
+            margin-bottom: 10px;
+        }
+        .tooltip.tooltip-left .tooltip-text {
+            left: 0;
             transform: translateX(0);
-        }}
-        
-        .tooltip.tooltip-right .tooltip-text {{
+        }
+        .tooltip.tooltip-right .tooltip-text {
             left: auto;
             right: 0;
             transform: translateX(0);
-        }}
-        
-        .tooltip-text strong {{
-            color: white !important;  
-            background-color: transparent !important;  
+        }
+        .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 {{
+        }
+        .tooltip-text {
             font-size: 13px;  /* 稍微縮小字體 */
-        }}
-        
+        }
+
         /* 調整列表符號和文字的間距 */
-        .tooltip-text ul {{
+        .tooltip-text ul {
             margin: 0;
             padding-left: 15px;  /* 減少列表符號的縮進 */
-        }}
-        
-        .tooltip-text li {{
+        }
+
+        .tooltip-text li {
             margin-bottom: 1px;  /* 減少列表項目間的間距 */
-        }}
-        .tooltip-text br {{
+        }
+        .tooltip-text br {
             line-height: 1.2;  /* 減少行距 */
-        }}
-        
-        .tooltip .tooltip-text::after {{
+        }
+
+        .tooltip .tooltip-text::after {
             content: "";
             position: absolute;
             top: 100%;
@@ -875,23 +1069,20 @@ async def predict(image):
             border-width: 5px;
             border-style: solid;
             border-color: rgba(44, 62, 80, 0.95) transparent transparent transparent;
-        }}
-        
-        .tooltip-left .tooltip-text::after {{
+        }
+        .tooltip-left .tooltip-text::after {
             left: 20%;
-        }}
-        
+        }
+
         /* 右側箭頭 */
-        .tooltip-right .tooltip-text::after {{
+        .tooltip-right .tooltip-text::after {
             left: 80%;
-        }}
-        
-        .tooltip:hover .tooltip-text {{
+        }
+        .tooltip:hover .tooltip-text {
             visibility: visible;
             opacity: 1;
-        }}
-        
-        .tooltip .tooltip-text::after {{
+        }
+        .tooltip .tooltip-text::after {
             content: "";
             position: absolute;
             top: 100%;
@@ -900,9 +1091,8 @@ async def predict(image):
             border-width: 8px;
             border-style: solid;
             border-color: rgba(44, 62, 80, 0.95) transparent transparent transparent;
-        }}
-        
-        .uncertainty-mode .tooltip .tooltip-text {{
+        }
+        .uncertainty-mode .tooltip .tooltip-text {
             position: absolute;
             left: 100%;
             bottom: auto;
@@ -910,9 +1100,9 @@ async def predict(image):
             transform: translateY(-50%);
             margin-left: 10px;
             z-index: 1000;  /* 確保提示框在最上層 */
-        }}
-        
-        .uncertainty-mode .tooltip .tooltip-text::after {{
+        }
+
+        .uncertainty-mode .tooltip .tooltip-text::after {
             content: "";
             position: absolute;
             top: 50%;
@@ -921,220 +1111,379 @@ async def predict(image):
             border-width: 5px;
             border-style: solid;
             border-color: transparent rgba(44, 62, 80, 0.95) transparent transparent;
-        }}
-        
-        .uncertainty-mode .breed-content {{
+        }
+        .uncertainty-mode .breed-content {
             font-size: 1.1rem;  /* 增加字體大小 */
-        }}
-        
+        }
         .description-section,
         .description-section p,
         .temperament-section,
         .temperament-section .value,
         .info-item,
         .info-item .value,
-        .breed-content {{
+        .breed-content {
             font-size: 1.1rem !important;  /* 使用 !important 確保覆蓋其他樣式 */
-        }}
-        </style>
-        {dogs_info}
-        """
+        }
 
-        initial_state = {
-            "dogs_info": dogs_info,
-            "image": annotated_image,
-            "is_multi_dog": len(dogs) > 1,
-            "html_output": html_output
+        .recommendation-card {
+            margin-bottom: 40px;
         }
-        
-        return html_output, annotated_image, initial_state
 
-    except Exception as e:
-        error_msg = f"An error occurred: {str(e)}\n\nTraceback:\n{traceback.format_exc()}"
-        print(error_msg)
-        return error_msg, None, None
-        
+        .compatibility-scores {
+            background: #f8f9fa;
+            padding: 24px;
+            border-radius: 12px;
+            margin: 20px 0;
+        }
 
-def show_details_html(choice, previous_output, initial_state):
-    if not choice:
-        return previous_output, gr.update(visible=True), initial_state
+        .score-item {
+            margin: 15px 0;
+        }
 
-    try:
-        breed = choice.split("More about ")[-1]
-        description = get_dog_description(breed)
-        formatted_description = format_description_html(description, breed)
-        
-        html_output = f"""
-        <div class="dog-info">
-            <h2>{breed}</h2>
-            {formatted_description}
-        </div>
-        """
-        
-        initial_state["current_description"] = html_output
-        initial_state["original_buttons"] = initial_state.get("buttons", [])
-        
-        return html_output, gr.update(visible=True), initial_state
-    except Exception as e:
-        error_msg = f"An error occurred while showing details: {e}"
-        print(error_msg)
-        return f"<p style='color: red;'>{error_msg}</p>", gr.update(visible=True), initial_state
-        
+        .progress-bar {
+            height: 12px;
+            background-color: #e9ecef;
+            border-radius: 6px;
+            overflow: hidden;
+            margin: 8px 0;
+        }
 
-def format_description_html(description, breed):
-    html = "<ul style='list-style-type: none; padding-left: 0;'>"
-    if isinstance(description, dict):
-        for key, value in description.items():
-            if key != "Breed":  # 跳過重複的品種顯示
-                if key == "Size":
-                    html += f'''
-                        <li style='margin-bottom: 10px;'>
-                            <span class="tooltip">
-                                <strong>{key}:</strong>
-                                <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> {value}
-                        </li>
-                    '''
-                elif key == "Exercise Needs":
-                    html += f'''
-                        <li style='margin-bottom: 10px;'>
-                            <span class="tooltip">
-                                <strong>{key}:</strong>
-                                <span class="tooltip-icon">ⓘ</span>
-                                <span class="tooltip-text">
-                                    <strong>Exercise Needs:</strong><br>
-                                    • High: 2+ hours of daily exercise<br>
-                                    • Moderate: 1-2 hours of daily activity<br>
-                                    • Low: Short walks and play sessions
-                                </span>
-                            </span> {value}
-                        </li>
-                    '''
-                elif key == "Grooming Needs":
-                    html += f'''
-                        <li style='margin-bottom: 10px;'>
-                            <span class="tooltip">
-                                <strong>{key}:</strong>
-                                <span class="tooltip-icon">ⓘ</span>
-                                <span class="tooltip-text">
-                                    <strong>Grooming Requirements:</strong><br>
-                                    • High: Daily brushing, regular professional care<br>
-                                    • Moderate: Weekly brushing, occasional grooming<br>
-                                    • Low: Minimal brushing, basic maintenance
-                                </span>
-                            </span> {value}
-                        </li>
-                    '''
-                elif key == "Care Level":
-                    html += f'''
-                        <li style='margin-bottom: 10px;'>
-                            <span class="tooltip">
-                                <strong>{key}:</strong>
-                                <span class="tooltip-icon">ⓘ</span>
-                                <span class="tooltip-text">
-                                    <strong>Care Level Explained:</strong><br>
-                                    • High: Needs significant training and attention<br>
-                                    • Moderate: Regular care and routine needed<br>
-                                    • Low: More independent, basic care sufficient
-                                </span>
-                            </span> {value}
-                        </li>
-                    '''
-                elif key == "Good with Children":
-                    html += f'''
-                        <li style='margin-bottom: 10px;'>
-                            <span class="tooltip">
-                                <strong>{key}:</strong>
-                                <span class="tooltip-icon">ⓘ</span>
-                                <span class="tooltip-text">
-                                    <strong>Child Compatibility:</strong><br>
-                                    • Yes: Excellent with kids, patient and gentle<br>
-                                    • Moderate: Good with older children<br>
-                                    • No: Better suited for adult households
-                                </span>
-                            </span> {value}
-                        </li>
-                    '''
-                elif key == "Lifespan":
-                    html += f'''
-                        <li style='margin-bottom: 10px;'>
-                            <span class="tooltip">
-                                <strong>{key}:</strong>
-                                <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> {value}
-                        </li>
-                    '''
-                elif key == "Temperament":
-                    html += f'''
-                        <li style='margin-bottom: 10px;'>
-                            <span class="tooltip">
-                                <strong>{key}:</strong>
-                                <span class="tooltip-icon">ⓘ</span>
-                                <span class="tooltip-text">
-                                    <strong>Temperament Guide:</strong><br>
-                                    • Describes the dog's natural behavior<br>
-                                    • Important for matching with owner
-                                </span>
-                            </span> {value}
-                        </li>
-                    '''
-                else:
-                    # 其他欄位保持原樣顯示
-                    html += f"<li style='margin-bottom: 10px;'><strong>{key}:</strong> {value}</li>"
-    else:
-        html += f"<li>{description}</li>"
-    html += "</ul>"
-    
-    # 添加AKC連結
-    html += f'''
-        <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>
-    '''
-    return html
+        .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;
+        }
 
-with gr.Blocks() as iface:
-    gr.HTML("<h1 style='text-align: center;'>🐶 Dog Breed Classifier 🔍</h1>")
-    gr.HTML("<p style='text-align: center;'>Upload a picture of a dog, and the model will predict its breed and provide detailed information!</p>")
-    gr.HTML("<p style='text-align: center; color: #666; font-size: 0.9em;'>Note: The model's predictions may not always be 100% accurate, and it is recommended to use the results as a reference.</p>")
-    
-    
-    with gr.Row():
-        input_image = gr.Image(label="Upload a dog image", type="pil")
-        output_image = gr.Image(label="Annotated Image")
-    
-    output = gr.HTML(label="Prediction Results")
-    initial_state = gr.State()
-    
-    input_image.change(
-        predict,
-        inputs=input_image,
-        outputs=[output, output_image, initial_state]
-    )
-    
-    gr.Examples(
-        examples=['Border_Collie.jpg', 'Golden_Retriever.jpeg', 'Saint_Bernard.jpeg', 'French_Bulldog.jpeg', 'Samoyed.jpg'],
-        inputs=input_image
-    )
-    
-    gr.HTML('For more details on this project and other work, feel free to visit my GitHub <a href="https://github.com/Eric-Chung-0511/Learning-Record/tree/main/Data%20Science%20Projects/Dog_Breed_Classifier">Dog Breed Classifier</a>')
+        .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);
+        }
+        """) as iface:
 
+        gr.HTML("<h1 style='text-align: center;'>🐶 Dog Breed Classifier 🔍</h1>")
+        
+        # 使用 Tabs 來分隔兩個功能
+        with gr.Tabs():
+            # 第一個 Tab：原有的辨識功能
+            with gr.TabItem("Breed Detection"):
+                gr.HTML("<p style='text-align: center;'>Upload a picture of a dog, and the model will predict its breed and provide detailed information!</p>")
+                gr.HTML("<p style='text-align: center; color: #666; font-size: 0.9em;'>Note: The model's predictions may not always be 100% accurate, and it is recommended to use the results as a reference.</p>")
+                
+                with gr.Row():
+                    input_image = gr.Image(label="Upload a dog image", type="pil")
+                    output_image = gr.Image(label="Annotated Image")
+                
+                output = gr.HTML(label="Prediction Results")
+                initial_state = gr.State()
+                
+                input_image.change(
+                    predict,
+                    inputs=input_image,
+                    outputs=[output, output_image, initial_state]
+                )
+                
+                gr.Examples(
+                    examples=['Border_Collie.jpg', 
+                              'Golden_Retriever.jpeg', 
+                              'Saint_Bernard.jpeg',
+                              'Samoyed.jpg',
+                              'French_Bulldog.jpeg'],
+                    inputs=input_image
+                )
+            
+            # 第二個 Tab：品種比較功能
+            with gr.TabItem("Breed Comparison"):
+                gr.HTML("<p style='text-align: center;'>Select two dog breeds to compare their characteristics and care requirements.</p>")
+                
+                with gr.Row():
+                    breed1_dropdown = gr.Dropdown(
+                        choices=dog_breeds,
+                        label="Select First Breed",
+                        value="Golden_Retriever"
+                    )
+                    breed2_dropdown = gr.Dropdown(
+                        choices=dog_breeds,
+                        label="Select Second Breed",
+                        value="Border_Collie"
+                    )
+                
+                compare_btn = gr.Button("Compare Breeds")
+                comparison_output = gr.HTML(label="Comparison Results")
+                
+                def show_comparison(breed1, breed2):
+                    if not breed1 or not breed2:
+                        return "Please select two breeds to compare"
+                    
+                    breed1_info = get_dog_description(breed1)
+                    breed2_info = get_dog_description(breed2)
+                    
+                    html_output = f"""
+                    <div class="dog-info-card">
+                        <div class="comparison-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+                            <div class="breed-info">
+                                <h2 class="section-title">
+                                    <span class="icon">🐕</span> {breed1.replace('_', ' ')}
+                                </h2>
+                                <div class="info-section">
+                                    <div class="info-item">
+                                        <span class="tooltip">
+                                            <span class="icon">📏</span>
+                                            <span class="label">Size:</span>
+                                            <span class="value">{breed1_info['Size']}</span>
+                                        </span>
+                                    </div>
+                                    <div class="info-item">
+                                        <span class="tooltip">
+                                            <span class="icon">🏃</span>
+                                            <span class="label">Exercise Needs:</span>
+                                            <span class="value">{breed1_info['Exercise Needs']}</span>
+                                        </span>
+                                    </div>
+                                    <div class="info-item">
+                                        <span class="tooltip">
+                                            <span class="icon">✂️</span>
+                                            <span class="label">Grooming:</span>
+                                            <span class="value">{breed1_info['Grooming Needs']}</span>
+                                        </span>
+                                    </div>
+                                    <div class="info-item">
+                                        <span class="tooltip">
+                                            <span class="icon">👨‍👩‍👧‍👦</span>
+                                            <span class="label">Good with Children:</span>
+                                            <span class="value">{breed1_info['Good with Children']}</span>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="breed-info">
+                                <h2 class="section-title">
+                                    <span class="icon">🐕</span> {breed2.replace('_', ' ')}
+                                </h2>
+                                <div class="info-section">
+                                    <div class="info-item">
+                                        <span class="tooltip">
+                                            <span class="icon">📏</span>
+                                            <span class="label">Size:</span>
+                                            <span class="value">{breed2_info['Size']}</span>
+                                        </span>
+                                    </div>
+                                    <div class="info-item">
+                                        <span class="tooltip">
+                                            <span class="icon">🏃</span>
+                                            <span class="label">Exercise Needs:</span>
+                                            <span class="value">{breed2_info['Exercise Needs']}</span>
+                                        </span>
+                                    </div>
+                                    <div class="info-item">
+                                        <span class="tooltip">
+                                            <span class="icon">✂️</span>
+                                            <span class="label">Grooming:</span>
+                                            <span class="value">{breed2_info['Grooming Needs']}</span>
+                                        </span>
+                                    </div>
+                                    <div class="info-item">
+                                        <span class="tooltip">
+                                            <span class="icon">👨‍👩‍👧‍👦</span>
+                                            <span class="label">Good with Children:</span>
+                                            <span class="value">{breed2_info['Good with Children']}</span>
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    """
+                    return html_output
+                
+                compare_btn.click(
+                    show_comparison,
+                    inputs=[breed1_dropdown, breed2_dropdown],
+                    outputs=comparison_output
+                )
+            
+            # 第三個 Tab：品種推薦功能
+            with gr.TabItem("Breed Recommendation"):
+                gr.HTML("<p style='text-align: center;'>Tell us about your lifestyle, and we'll recommend the perfect dog breeds for you!</p>")
+                
+                with gr.Row():
+                    with gr.Column():
+                        living_space = gr.Radio(
+                            choices=["apartment", "house_small", "house_large"],
+                            label="What type of living space do you have?",
+                            info="Choose your current living situation",
+                            value="apartment"
+                        )
+                        
+                        exercise_time = gr.Slider(
+                            minimum=0,
+                            maximum=180,
+                            value=60,
+                            label="Daily exercise time (minutes)",
+                            info="Consider walks, play time, and training"
+                        )
+                        
+                        grooming_commitment = gr.Radio(
+                            choices=["low", "medium", "high"],
+                            label="Grooming commitment level",
+                            info="Low: monthly, Medium: weekly, High: daily",
+                            value="medium"
+                        )
+                        
+                    with gr.Column():
+                        experience_level = gr.Radio(
+                            choices=["beginner", "intermediate", "advanced"],
+                            label="Dog ownership experience",
+                            info="Be honest - this helps find the right match",
+                            value="beginner"
+                        )
+                        
+                        has_children = gr.Checkbox(
+                            label="Have children at home",
+                            info="Helps recommend child-friendly breeds"
+                        )
+                        
+                        noise_tolerance = gr.Radio(
+                            choices=["low", "medium", "high"],
+                            label="Noise tolerance level",
+                            info="Some breeds are more vocal than others",
+                            value="medium"
+                        )
+                
+                
+                # 設置按鈕的點擊事件
+                get_recommendations_btn = gr.Button("Find My Perfect Match! 🔍", variant="primary")
+                recommendation_output = gr.HTML(label="Breed Recommendations")
+
+                def process_recommendations(living_space, exercise_time, grooming_commitment,
+                        experience_level, has_children, noise_tolerance):
+                    try:
+                        user_prefs = UserPreferences(
+                            living_space=living_space,
+                            exercise_time=exercise_time,
+                            grooming_commitment=grooming_commitment,
+                            experience_level=experience_level,
+                            has_children=has_children,
+                            noise_tolerance=noise_tolerance,
+                            space_for_play=True if living_space != "apartment" else False,
+                            other_pets=False,
+                            climate="moderate"
+                        )
+                        
+                        recommendations = get_breed_recommendations(user_prefs)
+                        return format_recommendation_html(recommendations)
+                    except Exception as e:
+                        print(f"Error in process_recommendations: {str(e)}")
+                        return f"An error occurred: {str(e)}"
+                
+                # 這行是關鍵 - 確保按鈕點擊事件有正確連接到處理函數
+                get_recommendations_btn.click(
+                    fn=process_recommendations,  # 處理函數
+                    inputs=[
+                        living_space,
+                        exercise_time, 
+                        grooming_commitment,
+                        experience_level, 
+                        has_children, 
+                        noise_tolerance
+                    ],
+                    outputs=recommendation_output  # 輸出結果的位置
+                )
+                        
+        gr.HTML('For more details on this project and other work, feel free to visit my GitHub <a href="https://github.com/Eric-Chung-0511/Learning-Record/tree/main/Data%20Science%20Projects/Dog_Breed_Classifier">Dog Breed Classifier</a>')
 
 if __name__ == "__main__":
-    iface.launch()
+
+    iface.launch(share=True)