Update app.py

app.py

@@ -451,6 +451,9 @@ async def process_single_dog(image):
 
 
 
+import gradio as gr
+from PIL import Image, ImageDraw, ImageFont
+
 async def predict(image):
     if image is None:
         return "Please upload an image to start.", None, gr.update(visible=False, choices=[]), None
@@ -467,8 +470,8 @@ async def predict(image):
         font = ImageFont.load_default()
 
         dogs_info = ""
-        buttons = []
-    
+        buttons = []  # 儲存唯一的按鈕 ID
+
         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,19 +491,21 @@ 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 = 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>
-                    """
+        
+                    # 為每個品種生成唯一的 button_id，並附加 Learn More 按鈕
+                    button_id = f"Dog {i+1}: More about {breed}"
+                    if button_id not in buttons:
+                        buttons.append(button_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;" onclick="handle_button_click(\'{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); }}
@@ -512,26 +517,29 @@ async def predict(image):
         {dogs_info}
         
         <script>
-        document.querySelectorAll('.breed-button').forEach(button => {{
+        // 為所有生成的按鈕附加事件監聽器
+        document.querySelectorAll('button[id^="Dog"]').forEach(button => {{
             button.addEventListener('click', () => {{
-                const buttonId = button.id;
-                const radioButton = document.querySelector(`input[type="radio"][data-button-id="${{buttonId}}"]`);
-                if (radioButton) {{
-                    radioButton.click();
+                const button_id = button.id;
+                const radio = document.querySelector('input[type=radio][value="' + button_id + '"]');
+                if (radio) {{
+                    radio.click();  // 觸發 Radio 按鈕選擇
+                    console.log('Button clicked: ' + button_id);
+                }} else {{
+                    console.error("Radio button not found:", button_id);
                 }}
             }});
         }});
         </script>
         """
-    
+
         initial_state = {
             "dogs_info": dogs_info,
             "buttons": buttons,
             "image": annotated_image
         }
         
-        return html_output, annotated_image, gr.update(visible=True, choices=[button["text"] for button in buttons]), initial_state
-
+        return html_output, annotated_image, gr.update(visible=True, choices=buttons), initial_state
 
     except Exception as e:
         error_msg = f"An error occurred: {str(e)}\n\nTraceback:\n{traceback.format_exc()}"
@@ -600,11 +608,7 @@ 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,6 +639,5 @@ 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()