Update app.py

app.py

@@ -468,7 +468,7 @@ async def predict(image):
 
         dogs_info = ""
         buttons = []
-
+    
         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)]
@@ -488,20 +488,19 @@ async def predict(image):
                 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('%', ''))
-        
-                    # 為每個品種生成唯一的 button_id，並附加 Learn More 按鈕
-                    button_id = f"Dog {i+1}: More about {breed}"
-                    buttons.append(button_id)  # 將按鈕 ID 添加到按鈕列表中
-                    dogs_info += f"<li><strong>{breed}</strong> ({prob:.2f}% confidence)"
-                    dogs_info += f'<button class="breed-button" id="{button_id}" style="background-color: #4CAF50; color: white; border: none; padding: 5px 10px; border-radius: 3px; margin-left: 10px;">Learn More</button></li>'
+                    button_id = f"learn-more-{i}-{j}"
+                    buttons.append({"id": button_id, "text": f"Dog {i+1}: More about {breed}"})
+                    dogs_info += f"""
+                    <li><strong>{breed}</strong> ({prob:.2f}% confidence)
+                    <button class="breed-button" id="{button_id}">Learn More</button></li>
+                    """
                 dogs_info += "</ul>"
         
             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>'
-        
-        # 生成 JavaScript 處理按鈕點擊事件
+    
         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); }}
@@ -513,29 +512,26 @@ async def predict(image):
         {dogs_info}
         
         <script>
-        // 為所有生成的按鈕附加事件監聽器
-        document.querySelectorAll('button[id^="Dog"]').forEach(button => {{
+        document.querySelectorAll('.breed-button').forEach(button => {{
             button.addEventListener('click', () => {{
-                const button_id = button.id;
-                const radio = document.querySelector('input[type=radio][value="' + button_id + '"]');
-                if (radio) {{
-                    radio.click();
-                    console.log('Button clicked: ' + button_id);
-                }} else {{
-                    console.error("Radio button not found:", button_id);
+                const buttonId = button.id;
+                const radioButton = document.querySelector(`input[type="radio"][data-button-id="${{buttonId}}"]`);
+                if (radioButton) {{
+                    radioButton.click();
                 }}
             }});
         }});
         </script>
         """
-
+    
         initial_state = {
             "dogs_info": dogs_info,
             "buttons": buttons,
             "image": annotated_image
         }
         
-        return html_output, annotated_image, gr.update(visible=True, choices=buttons), initial_state
+        return html_output, annotated_image, gr.update(visible=True, choices=[button["text"] for button in buttons]), initial_state
+
 
     except Exception as e:
         error_msg = f"An error occurred: {str(e)}\n\nTraceback:\n{traceback.format_exc()}"
@@ -604,7 +600,11 @@ with gr.Blocks() as iface:
     
     output = gr.HTML(label="Prediction Results")  
     
-    breed_buttons = gr.Radio(choices=[], label="More Information", visible=False)
+    breed_buttons = gr.Radio(
+        choices=[],
+        label="More Information",
+        visible=False
+    )
     
     back_button = gr.Button("Back", visible=False)
     
@@ -635,5 +635,6 @@ with gr.Blocks() as iface:
 
     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>')
 
+# Launch the interface
 if __name__ == "__main__":
-    iface.launch()
+    iface.launch()