Update app.py

app.py

@@ -263,8 +263,8 @@ async def predict(image):
         draw = ImageDraw.Draw(annotated_image)
         font = ImageFont.load_default()
 
-        dogs_info = ""
-        buttons_html = ""
+        # dogs_info = ""
+        # buttons_html = ""
 
         # for i, (cropped_image, detection_confidence, box) in enumerate(dogs):
         #     top1_prob, topk_breeds, topk_probs_percent = await predict_single_dog(cropped_image)
@@ -302,6 +302,54 @@ async def predict(image):
         # dogs_info += 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 += """
+        #     <script>
+        #     function handle_button_click(button_id) {
+        #         const radio = document.querySelector('input[type=radio][value="' + button_id + '"]');
+        #         if (radio) {
+        #             radio.click();
+        #         } else {
+        #             console.error("Radio button not found:", button_id);
+        #         }
+        #     }
+        #     </script>
+        #     """
+        #     initial_state = {
+        #         "dogs_info": dogs_info,
+        #         "buttons": buttons,
+        #         "show_back": True,
+        #         "image": annotated_image,
+        #         "is_multi_dog": len(dogs) > 1,
+        #         "html_output": html_output  # 儲存完整的 HTML 輸出
+        #     }
+        #     return html_output, annotated_image, gr.update(visible=True, choices=buttons), initial_state
+        # else:
+        #     initial_state = {
+        #         "dogs_info": dogs_info,
+        #         "buttons": [],
+        #         "show_back": False,
+        #         "image": annotated_image,
+        #         "is_multi_dog": len(dogs) > 1,
+        #         "html_output": html_output  # 儲存完整的 HTML 輸出
+        #     }
+        #     return html_output, annotated_image, gr.update(visible=False, choices=[]), initial_state
+
+
+        dogs_info = ""  # 初始化 dogs_info
+        buttons_html = ""  # 初始化 buttons_html
+        
         for i, (cropped_image, detection_confidence, box) in enumerate(dogs):
             top1_prob, topk_breeds, topk_probs_percent = await predict_single_dog(cropped_image)
             color = color_list[i % len(color_list)]
@@ -332,27 +380,14 @@ async def predict(image):
                     button_id = f"Dog {i+1}: More about {breed}"
                     temp_buttons += f'<button class="breed-button" onclick="handle_button_click(\'{button_id}\')">{breed}</button>'
                     buttons.append(button_id)
-                temp_buttons += '</div>'
-                
-                # 將 buttons_html 只生成按鈕
-                buttons_html += temp_buttons  
+                buttons_html += temp_buttons + '</div>'  # 加入到 buttons_html 
         
             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>'  # 結束該狗的描述區塊
         
-        # 確保按鈕獨立於 dogs_info 區塊內，避免重複品種名
-        if buttons_html:  
-            dogs_info += buttons_html  # 確保按鈕獨立並附加到最後輸出
-
-
-         
-        # 避免將按鈕與 dogs_info 同步顯示
-        if buttons_html:  
-            dogs_info += 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); }}
@@ -361,9 +396,12 @@ async def predict(image):
         .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:
+            html_output += buttons_html
+        
         if buttons:
             html_output += """
             <script>
@@ -397,6 +435,7 @@ async def predict(image):
             }
             return html_output, annotated_image, gr.update(visible=False, choices=[]), initial_state
 
+
     except Exception as e:
         error_msg = f"An error occurred: {str(e)}\n\nTraceback:\n{traceback.format_exc()}"
         print(error_msg)