Update app.py

app.py

@@ -416,7 +416,14 @@ async def predict(image):
         dogs = await detect_multiple_dogs(image)
         
         color_list = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF', '#800080', '#FFA500']
-        html_output = "<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;}</style>"
+        html_output = """
+        <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; padding: 5px 10px; background-color: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; }
+        </style>
+        """
         buttons = []
         annotated_image = image.copy()
         draw = ImageDraw.Draw(annotated_image)
@@ -436,6 +443,8 @@ async def predict(image):
                 breed = topk_breeds[0]
                 description = get_dog_description(breed)
                 html_output += format_description_html(description, breed)
+                html_output += f'<div class="breed-buttons"><button class="breed-button" onclick="handle_button_click(\'Dog {i+1}: More about {breed}\')">More about {breed}</button></div>'
+                buttons.append(f"Dog {i+1}: More about {breed}")
             elif combined_confidence >= 0.15:
                 html_output += f"<p>Top 3 possible breeds:</p><ul>"
                 for j, (breed, prob) in enumerate(zip(topk_breeds[:3], topk_probs_percent[:3])):
@@ -444,7 +453,7 @@ async def predict(image):
                 html_output += '<div class="breed-buttons">'
                 for breed in topk_breeds[:3]:
                     button_id = f"Dog {i+1}: More about {breed}"
-                    html_output += f'<button onclick="handle_button_click(\'{button_id}\')">{button_id}</button>'
+                    html_output += f'<button class="breed-button" onclick="handle_button_click(\'{button_id}\')">{breed}</button>'
                     buttons.append(button_id)
                 html_output += '</div>'
             else:
@@ -453,7 +462,13 @@ async def predict(image):
             html_output += '</div>'
 
         if buttons:
-            html_output += "<script>function handle_button_click(button_id) { document.querySelector('input[type=radio][value=\"' + button_id + '\"]').click(); }</script>"
+            html_output += """
+            <script>
+            function handle_button_click(button_id) {
+                document.querySelector('input[type=radio][value="' + button_id + '"]').click();
+            }
+            </script>
+            """
             initial_state = {
                 "explanation": html_output,
                 "buttons": buttons,
@@ -506,8 +521,11 @@ def show_details_html(choice, previous_output, initial_state):
 
 def format_description_html(description, breed):
     html = "<ul>"
-    for key, value in description.items():
-        html += f"<li><strong>{key}:</strong> {value}</li>"
+    if isinstance(description, dict):
+        for key, value in description.items():
+            html += f"<li><strong>{key}:</strong> {value}</li>"
+    else:
+        html += f"<li>{description}</li>"
     html += "</ul>"
     akc_link = get_akc_breeds_link()
     html += f'<p><a href="{akc_link}" target="_blank">Learn more about {breed} on the AKC website</a></p>'