Update app.py

app.py

@@ -302,7 +302,7 @@ async def detect_multiple_dogs(image):
 
 async def predict(image):
     if image is None:
-        return "Please upload an image to start.", None
+        return "Please upload an image to start.", None, [], []
 
     try:
         if isinstance(image, np.ndarray):
@@ -311,9 +311,11 @@ async def predict(image):
         dogs = await detect_multiple_dogs(image)
         
         if len(dogs) == 0:
-            return "No dogs detected. Please upload a clear image of a dog.", None
+            return "No dogs detected. Please upload a clear image of a dog.", None, [], []
 
         explanations = []
+        buttons = []
+        button_details = []
         annotated_image = image.copy()
         draw = ImageDraw.Draw(annotated_image)
         try:
@@ -336,6 +338,7 @@ async def predict(image):
                 breed = topk_breeds[0]
                 description = get_dog_description(breed)
                 explanation = f"**Dog {i}: {breed}**\n\n{format_description(description, breed)}"
+                explanations.append(explanation)
             else:
                 explanation = f"""
 **Dog {i}: Detected with moderate confidence. Here are the top 3 possible breeds:**
@@ -343,26 +346,22 @@ async def predict(image):
 1. **{topk_breeds[0]}** ({topk_probs_percent[0]})
 2. **{topk_breeds[1]}** ({topk_probs_percent[1]})
 3. **{topk_breeds[2]}** ({topk_probs_percent[2]})
-
-[More about {topk_breeds[0]}](#breed_{i}_1)
-[More about {topk_breeds[1]}](#breed_{i}_2)
-[More about {topk_breeds[2]}](#breed_{i}_3)
 """
-
-            explanations.append(explanation)
+                explanations.append(explanation)
+                for j, breed in enumerate(topk_breeds, 1):
+                    button_text = f"More about Dog {i}: {breed}"
+                    buttons.append(button_text)
+                    description = get_dog_description(breed)
+                    button_details.append(format_description(description, breed))
 
         final_explanation = "\n\n---\n\n".join(explanations)
-        
-        # 添加隱藏的詳細信息部分
-        for i, (_, _, _) in enumerate(dogs, 1):
-            for j, breed in enumerate(topk_breeds, 1):
-                description = get_dog_description(breed)
-                final_explanation += f"\n\n<div id='breed_{i}_{j}' style='display:none;'>\n\n{format_description(description, breed)}\n\n</div>"
-
-        return final_explanation, annotated_image
+        return final_explanation, annotated_image, buttons, button_details
 
     except Exception as e:
-        return f"An error occurred: {e}", None
+        return f"An error occurred: {e}", None, [], []
+
+def show_breed_details(evt: gr.SelectData, details):
+    return details[evt.index]
 
 # Gradio 界面設置
 with gr.Blocks(css="""
@@ -381,8 +380,20 @@ with gr.Blocks(css="""
         output_image = gr.Image(label="Annotated Image")
     
     output = gr.Markdown(label="Prediction Results")
+    breed_buttons = gr.Radio([], label="Select breed for more details", visible=False)
+    breed_details = gr.Markdown(label="Breed Details")
+
+    input_image.change(
+        predict,
+        inputs=input_image,
+        outputs=[output, output_image, breed_buttons, breed_details]
+    )
 
-    input_image.change(predict, inputs=input_image, outputs=[output, output_image])
+    breed_buttons.select(
+        show_breed_details,
+        inputs=[breed_details],
+        outputs=[breed_details]
+    )
 
     gr.Examples(
         examples=['Border_Collie.jpg', 'Golden_Retriever.jpeg', 'Saint_Bernard.jpeg', 'French_Bulldog.jpeg', 'Samoyed.jpg'],