Update app.py

app.py

@@ -339,14 +339,12 @@ async def predict(image):
             image = Image.fromarray(image)
 
         dogs = await detect_multiple_dogs(image)
-        # 更新為更容易區分的顏色組合
         color_list = ['#FF3B30', '#34C759', '#007AFF', '#FF9500', '#5856D6', '#FF2D55', '#5AC8FA', '#FFCC00']
         annotated_image = image.copy()
         draw = ImageDraw.Draw(annotated_image)
         
-        # 改用更大的字體，提升可讀性
         try:
-            font = ImageFont.truetype("arial.ttf", 24)  # 優先使用 Arial
+            font = ImageFont.truetype("arial.ttf", 24)
         except:
             font = ImageFont.load_default()
 
@@ -355,16 +353,13 @@ async def predict(image):
         for i, (cropped_image, detection_confidence, box) in enumerate(dogs):
             color = 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(
@@ -378,47 +373,52 @@ async def predict(image):
             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};">
+            # 開始資訊卡片
+            dogs_info += f'<div class="dog-info-card" style="border-left: 6px solid {color};">'
+            
+            if combined_confidence < 0.15:
+                dogs_info += f'''
                     <div class="dog-info-header" style="background-color: {color}20;">
                         <span class="dog-label" style="color: {color};">Dog {i+1}</span>
                     </div>
-            '''
-            
-            if combined_confidence < 0.15:
-                dogs_info += '''
-                    <div class="warning-message">
-                        <p>The image is unclear or the breed is not in the dataset. Please upload a clearer image.</p>
+                    <div class="breed-info">
+                        <p class="warning-message">The image is unclear or the breed is not in the dataset. Please upload a clearer image.</p>
                     </div>
                 '''
             elif top1_prob >= 0.45:
                 breed = topk_breeds[0]
                 description = get_dog_description(breed)
                 dogs_info += f'''
+                    <div class="dog-info-header" style="background-color: {color}20;">
+                        <span class="dog-label" style="color: {color};">{breed}</span>
+                    </div>
                     <div class="breed-info">
-                        <div class="confidence-score" style="color: {color};">
-                            {breed} (Confidence: {relative_probs[0]})
-                        </div>
                         {format_description_html(description, breed)}
                     </div>
                 '''
             else:
-                dogs_info += "<h3>Top 3 possible breeds:</h3>"
-                for breed, prob in zip(topk_breeds, relative_probs):
+                dogs_info += f'''
+                    <div class="dog-info-header" style="background-color: {color}20;">
+                        <span class="dog-label" style="color: {color};">Dog {i+1}</span>
+                    </div>
+                    <div class="breed-info">
+                        <h3 class="breeds-title">Top 3 possible breeds:</h3>
+                '''
+                
+                for j, (breed, prob) in enumerate(zip(topk_breeds, relative_probs)):
                     description = get_dog_description(breed)
                     dogs_info += f'''
                         <div class="breed-section">
-                            <div class="confidence-score" style="color: {color};">
-                                {breed} (Confidence: {prob})
+                            <div class="confidence-score" style="color: {color};">{breed} (Confidence: {prob})</div>
+                            <div class="breed-info-content">
+                                {format_description_html(description, breed)}
                             </div>
-                            {format_description_html(description, breed)}
                         </div>
                     '''
+                dogs_info += '</div>'
             
             dogs_info += '</div>'
 
-        # 更新 CSS 樣式
         html_output = f"""
         <style>
         .dog-info-card {{ 
@@ -451,8 +451,14 @@ async def predict(image):
             padding: 20px;
         }}
         
+        .breeds-title {{
+            margin: 0 0 16px 0;
+            font-size: 18px;
+            color: #333;
+        }}
+        
         .breed-section {{
-            margin: 20px;
+            margin: 16px 0;
             padding: 16px;
             background-color: #f8f8f8;
             border-radius: 6px;
@@ -464,10 +470,23 @@ async def predict(image):
             margin-bottom: 12px;
         }}
         
+        .breed-info-content {{
+            margin-top: 8px;
+        }}
+        
         .warning-message {{
-            padding: 16px 20px;
             color: #ff3b30;
             font-weight: bold;
+            margin: 0;
+        }}
+
+        ul {{
+            padding-left: 0;
+            margin: 0;
+        }}
+        
+        li {{
+            margin-bottom: 8px;
         }}
         </style>
         {dogs_info}