Update app.py

app.py

@@ -261,110 +261,90 @@ async def predict(image):
 
         dogs_info = ""
 
-#         for i, (cropped_image, detection_confidence, box) in enumerate(dogs):
-#             buttons_html = ""  
-#             top1_prob, topk_breeds, topk_probs_percent = await predict_single_dog(cropped_image)
-#             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)
+        # for i, (cropped_image, detection_confidence, box) in enumerate(dogs):
+        #     buttons_html = ""  
+        #     top1_prob, topk_breeds, topk_probs_percent = await predict_single_dog(cropped_image)
+        #     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)
         
-#             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>'
+        #     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 top1_prob >= 0.45:
-#                 breed = topk_breeds[0]
-#                 description = get_dog_description(breed)
-#                 dogs_info += format_description_html(description, breed)
+        #     if top1_prob >= 0.45:
+        #         breed = topk_breeds[0]
+        #         description = get_dog_description(breed)
+        #         dogs_info += format_description_html(description, breed)
         
-#             elif combined_confidence >= 0.15:
-#                 dogs_info += f"<p>Top 3 possible breeds:</p><ul>"
-#                 for j, (breed, prob) in enumerate(zip(topk_breeds[:3], topk_probs_percent[:3])):
-#                     prob = float(prob.replace('%', ''))
-#                     dogs_info += f"<li><strong>{breed}</strong> ({prob:.2f}% confidence)</li>"
-#                 dogs_info += "</ul>"
+        #     elif combined_confidence >= 0.15:
+        #         dogs_info += f"<p>Top 3 possible breeds:</p><ul>"
+        #         for j, (breed, prob) in enumerate(zip(topk_breeds[:3], topk_probs_percent[:3])):
+        #             prob = float(prob.replace('%', ''))
+        #             dogs_info += f"<li><strong>{breed}</strong> ({prob:.2f}% confidence)</li>"
+        #         dogs_info += "</ul>"
         
-#                 for breed in topk_breeds[:3]:
-#                     button_id = f"Dog {i+1}: More about {breed}"
-#                     buttons_html += f'<button class="breed-button" onclick="handle_button_click(\'{button_id}\')">{breed}</button>'
-#                     buttons.append(button_id)
+        #         for breed in topk_breeds[:3]:
+        #             button_id = f"Dog {i+1}: More about {breed}"
+        #             buttons_html += f'<button class="breed-button" onclick="handle_button_click(\'{button_id}\')">{breed}</button>'
+        #             buttons.append(button_id)
         
-#             else:
-#                 dogs_info += "<p>The image is unclear or the breed is not in the dataset. Please upload a clearer image.</p>"
+        #     else:
+        #         dogs_info += "<p>The image is unclear or the breed is not in the dataset. Please upload a clearer image.</p>"
         
-#             dogs_info += '</div>'    
-
-         
-#         buttons_html = ""  
-      
-#         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-buttons {{ margin-top: 10px; }}
-#         .breed-button {{ margin-right: 10px; margin-bottom: 10px; padding: 5px 10px; background-color: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; }}
-#         </style>
-#         {dogs_info}
-#         """
+        #     dogs_info += '</div>'    
 
 
 
         for i, (cropped_image, detection_confidence, box) in enumerate(dogs):
-            buttons_html = ""  # 每次迴圈重置按鈕 HTML
+            buttons_html = ""  # 初始化按鈕 HTML
             top1_prob, topk_breeds, topk_probs_percent = await predict_single_dog(cropped_image)
             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)
-        
-            # 顯示追蹤訊息來幫助檢查數據
-            print(f"Detection confidence for Dog {i+1}: {detection_confidence}")
-            print(f"Top1 probability for Dog {i+1}: {top1_prob}")
-        
+            
             combined_confidence = detection_confidence * top1_prob
-            print(f"Combined confidence for Dog {i+1}: {combined_confidence}")  # 確認combined confidence
-        
             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.45:  # 條件1：當 conf >= 0.45 時，返回最可能的品種資訊
+            
+            if top1_prob >= 0.45:
                 breed = topk_breeds[0]
                 description = get_dog_description(breed)
                 dogs_info += format_description_html(description, breed)
         
-            elif 0.15 < combined_confidence < 0.45:  # 條件2：當 0.15 < conf < 0.45 時，返回前三個可能性並生成按鈕
-                print(f"Entering button generation for Dog {i+1}")  # 確認進入這部分的條件
+            elif combined_confidence >= 0.15:
+                # 列出前三個可能的品種
                 dogs_info += f"<p>Top 3 possible breeds:</p><ul>"
                 for j, (breed, prob) in enumerate(zip(topk_breeds[:3], topk_probs_percent[:3])):
                     prob = float(prob.replace('%', ''))
                     dogs_info += f"<li><strong>{breed}</strong> ({prob:.2f}% confidence)</li>"
-        
-                    # 為每個品種生成按鈕並輸出確認訊息
+                    
+                    # 在每個品種之後添加按鈕
                     button_id = f"Dog {i+1}: More about {breed}"
-                    buttons_html += f'<button style="display:inline-block; margin-top:10px;" onclick="handle_button_click(\'{button_id}\')">{breed}</button>'
-                    print(f"Button generated for breed: {breed}")  # 檢查按鈕是否生成
+                    buttons_html += f'<button class="breed-button" style="margin-right: 5px;" onclick="handle_button_click(\'{button_id}\')">{breed}</button>'
+                    buttons.append(button_id)
+                
+                dogs_info += "</ul>"
+                dogs_info += f'<div class="breed-buttons">{buttons_html}</div>'  # 把按鈕放到當前品種描述之後
         
-                # 渲染按鈕，確保CSS樣式顯示正確
-                dogs_info += f'<div style="margin-top:10px;">{buttons_html}</div>'  # 確保按鈕顯示在該品種描述下
-        
-            else:  # 條件3：當 conf < 0.15 時，返回 "圖像不清晰或無法辨認"
+            else:
                 dogs_info += "<p>The image is unclear or the breed is not in the dataset. Please upload a clearer image.</p>"
         
             dogs_info += '</div>'  # 結束當前狗的資訊區塊
-        
-        # 最終生成的 HTML 輸出
-        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); }}
-            </style>
-            {dogs_info}
-        """
-        print(f"Final HTML output: {html_output}")  # 檢查最終生成的 HTML
-
-
-
 
 
-        
+         
+        buttons_html = ""  
+      
+        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-buttons {{ margin-top: 10px; }}
+        .breed-button {{ margin-right: 10px; margin-bottom: 10px; padding: 5px 10px; background-color: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; }}
+        </style>
+        {dogs_info}
+        """     
 
         if buttons:
             html_output += """