Update app.py

app.py

@@ -489,7 +489,7 @@ async def predict(image):
                     # 每個品種名稱後面立即生成按鈕
                     button_id = f"Dog {i+1}: More about {breed}"
                     dogs_info += f"<li><strong>{breed}</strong> ({prob:.2f}% confidence)"
-                    dogs_info += f'<button 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 += f'<button style="background-color: #4CAF50; color: white; border: none; padding: 5px 10px; border-radius: 3px; margin-left: 10px;" value="{button_id}" onclick="handle_button_click(\'{button_id}\')">Learn More</button></li>'
                     buttons.append(button_id)
                 dogs_info += "</ul>"
         
@@ -510,21 +510,22 @@ async def predict(image):
         {dogs_info}
         """     
         
-        # 生成腳本來處理按鈕點擊事件
+        # 更新 JavaScript 處理按鈕點擊
         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);
-            }
+            const buttons = document.querySelectorAll('input[type=radio]');
+            buttons.forEach(radio => {
+                if (radio.value === button_id) {
+                    radio.click();
+                }
+            });
         }
         </script>
         """
 
 
+
         if buttons:
             initial_state = {
                 "dogs_info": dogs_info,