Update app.py

app.py

@@ -243,6 +243,93 @@ async def process_single_dog(image):
         return breeds_info, image, initial_state
         
 
+# async def predict(image):
+#     if image is None:
+#         return "Please upload an image to start.", None, None
+
+#     try:
+#         if isinstance(image, np.ndarray):
+#             image = Image.fromarray(image)
+
+#         dogs = await detect_multiple_dogs(image)
+#         color_list = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF', '#800080', '#FFA500']
+#         annotated_image = image.copy()
+#         draw = ImageDraw.Draw(annotated_image)
+#         font = ImageFont.load_default()
+
+#         dogs_info = ""
+
+#         for i, (cropped_image, detection_confidence, box) in enumerate(dogs):
+#             color = color_list[i % len(color_list)]
+#             draw.rectangle(box, outline=color, width=3)
+#             draw.text((box[0] + 5, box[1] + 5), f"Dog {i+1}", 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" style="border-left: 5px solid {color}; margin-bottom: 20px; padding: 15px;">'
+#             dogs_info += f'<h2>Dog {i+1}</h2>'
+            
+#             if combined_confidence < 0.2:
+#                 dogs_info += "<p>The image is unclear or the breed is not in the dataset. Please upload a clearer image.</p>"
+                
+#             elif top1_prob >= 0.45:
+#                 breed = topk_breeds[0]
+#                 description = get_dog_description(breed)
+#                 dogs_info += format_description_html(description, breed)
+                
+#             else:
+#                 dogs_info += "<h3>Top 3 possible breeds:</h3>"
+#                 for breed, prob in zip(topk_breeds, relative_probs):
+#                     description = get_dog_description(breed)
+#                     dogs_info += f"<div class='breed-section'>"
+#                     dogs_info += f"<h4>{breed} (Confidence: {prob})</h4>"
+#                     dogs_info += format_description_html(description, breed)
+#                     dogs_info += "</div>"
+            
+#             dogs_info += '</div>'
+
+#         html_output = f"""
+#         <style>
+#         .dog-info {{ 
+#             border: 1px solid #ddd; 
+#             margin-bottom: 20px; 
+#             padding: 15px; 
+#             border-radius: 5px; 
+#             box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
+#         }}
+#         .dog-info h2 {{ 
+#             background-color: #f0f0f0; 
+#             padding: 10px; 
+#             margin: -15px -15px 15px -15px; 
+#             border-radius: 5px 5px 0 0; 
+#         }}
+#         .breed-section {{
+#             margin-bottom: 20px;
+#             padding: 10px;
+#             background-color: #f8f8f8;
+#             border-radius: 5px;
+#         }}
+#         </style>
+#         {dogs_info}
+#         """
+
+#         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
+
+
+
 async def predict(image):
     if image is None:
         return "Please upload an image to start.", None, None
@@ -252,63 +339,135 @@ async def predict(image):
             image = Image.fromarray(image)
 
         dogs = await detect_multiple_dogs(image)
-        color_list = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF', '#800080', '#FFA500']
+        # 更新為更容易區分的顏色組合
+        color_list = ['#FF3B30', '#34C759', '#007AFF', '#FF9500', '#5856D6', '#FF2D55', '#5AC8FA', '#FFCC00']
         annotated_image = image.copy()
         draw = ImageDraw.Draw(annotated_image)
-        font = ImageFont.load_default()
+        
+        # 改用更大的字體，提升可讀性
+        try:
+            font = ImageFont.truetype("arial.ttf", 24)  # 優先使用 Arial
+        except:
+            font = ImageFont.load_default()
 
         dogs_info = ""
 
         for i, (cropped_image, detection_confidence, box) in enumerate(dogs):
             color = color_list[i % len(color_list)]
-            draw.rectangle(box, outline=color, width=3)
-            draw.text((box[0] + 5, box[1] + 5), f"Dog {i+1}", fill=color, font=font)
+            
+            # 增強框線可見度
+            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(
+                [label_x - 2, label_y - 2, label_x + label_width + 4, label_y + label_height + 4],
+                fill='white',
+                outline=color,
+                width=2
+            )
+            draw.text((label_x, label_y), label, fill=color, font=font)
         
             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" style="border-left: 5px solid {color}; margin-bottom: 20px; padding: 15px;">'
-            dogs_info += f'<h2>Dog {i+1}</h2>'
+            # 優化資訊卡片樣式
+            dogs_info += f'''
+                <div class="dog-info-card" style="border-left: 6px solid {color};">
+                    <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.2:
-                dogs_info += "<p>The image is unclear or the breed is not in the dataset. Please upload a clearer image.</p>"
-                
+            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>
+                '''
             elif top1_prob >= 0.45:
                 breed = topk_breeds[0]
                 description = get_dog_description(breed)
-                dogs_info += format_description_html(description, breed)
-                
+                dogs_info += f'''
+                    <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):
                     description = get_dog_description(breed)
-                    dogs_info += f"<div class='breed-section'>"
-                    dogs_info += f"<h4>{breed} (Confidence: {prob})</h4>"
-                    dogs_info += format_description_html(description, breed)
-                    dogs_info += "</div>"
+                    dogs_info += f'''
+                        <div class="breed-section">
+                            <div class="confidence-score" style="color: {color};">
+                                {breed} (Confidence: {prob})
+                            </div>
+                            {format_description_html(description, breed)}
+                        </div>
+                    '''
             
             dogs_info += '</div>'
 
+        # 更新 CSS 樣式
         html_output = f"""
         <style>
-        .dog-info {{ 
+        .dog-info-card {{ 
             border: 1px solid #ddd; 
-            margin-bottom: 20px; 
-            padding: 15px; 
-            border-radius: 5px; 
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
+            margin-bottom: 24px; 
+            padding: 0; 
+            border-radius: 8px; 
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            overflow: hidden;
+            transition: all 0.3s ease;
+        }}
+        
+        .dog-info-card:hover {{
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        }}
+        
+        .dog-info-header {{ 
+            padding: 16px 20px;
+            margin: 0;
+            font-size: 20px;
+            font-weight: bold;
+        }}
+        
+        .dog-label {{
+            font-size: 18px;
+            font-weight: bold;
         }}
-        .dog-info h2 {{ 
-            background-color: #f0f0f0; 
-            padding: 10px; 
-            margin: -15px -15px 15px -15px; 
-            border-radius: 5px 5px 0 0; 
+        
+        .breed-info {{
+            padding: 20px;
         }}
+        
         .breed-section {{
-            margin-bottom: 20px;
-            padding: 10px;
+            margin: 20px;
+            padding: 16px;
             background-color: #f8f8f8;
-            border-radius: 5px;
+            border-radius: 6px;
+        }}
+        
+        .confidence-score {{
+            font-size: 18px;
+            font-weight: bold;
+            margin-bottom: 12px;
+        }}
+        
+        .warning-message {{
+            padding: 16px 20px;
+            color: #ff3b30;
+            font-weight: bold;
         }}
         </style>
         {dogs_info}