Update app.py

app.py

@@ -435,9 +435,9 @@ async def predict(image):
             image = Image.fromarray(image)
 
         dogs = await detect_multiple_dogs(image)
-        # 更柔和的顏色組合
-        single_dog_color = '#4A90E2'  # 柔和的藍色
-        color_list = ['#4A90E2', '#34C759', '#007AFF', '#5856D6', '#5AC8FA', '#FFB246', '#9C6ADE']
+        # 更新顏色組合
+        single_dog_color = '#34C759'  # 清爽的綠色作為單狗顏色
+        color_list = ['#007AFF', '#FF9500', '#5856D6', '#34C759', '#5AC8FA', '#FF3B30', '#9C6ADE']  # 保留藍色但改用不同色調
         annotated_image = image.copy()
         draw = ImageDraw.Draw(annotated_image)
 
@@ -601,224 +601,236 @@ async def predict(image):
             dogs_info += '</div>'
 
         html_output = f"""
-        <style>
-        .dog-info-card {{ 
-            border: 1px solid #e1e4e8; 
-            margin: 32px 0;
-            padding: 0; 
-            border-radius: 12px; 
-            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
-            overflow: hidden;
-            transition: all 0.3s ease;
-            background: white;
-        }}
-        
-        .dog-info-card:hover {{
-            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
-        }}
-        
-        .dog-info-header {{ 
-            padding: 20px 24px;
-            margin: 0;
-            font-size: 22px;
-            font-weight: bold;
-            border-bottom: 1px solid #e1e4e8;
-        }}
-        
-        .breed-info {{
-            padding: 24px;
-            line-height: 1.6;
-        }}
-        
-        .section-title {{
-            font-size: 1.2em;
-            font-weight: 700;
-            color: #2c3e50;
-            margin: 28px 0 16px 0;
-            padding-bottom: 8px;
-            border-bottom: 2px solid #e1e4e8;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }}
-        
-        .icon {{
-            font-size: 1.2em;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-        }}
-        
-        .info-section, .care-section, .family-section {{
-            display: flex;
-            flex-wrap: wrap;
-            gap: 16px;
-            margin-bottom: 20px;
-        }}
-        
-        .info-item {{
-            background: #f8f9fa;
-            padding: 12px 16px;
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-        }}
-        
-        .label {{
-            color: #666;
-            font-weight: 600;
-        }}
-        
-        .value {{
-            color: #2c3e50;
-        }}
-        
-        .temperament-section {{
-            background: #f8f9fa;
-            padding: 16px;
-            border-radius: 8px;
-            margin-bottom: 20px;
-            font-style: italic;
-            color: #444;
-        }}
-        
-        .description-section {{
-            background: #f8f9fa;
-            padding: 16px;
-            border-radius: 8px;
-            margin: 20px 0;
-            line-height: 1.8;
-            color: #444;
-        }}
-        
-        .action-section {{
-            margin-top: 24px;
-            text-align: center;
-        }}
-        
-        .akc-button {{
-            display: inline-flex;
-            align-items: center;
-            padding: 12px 24px;
-            background-color: #4A90E2;
-            color: white;
-            border-radius: 8px;
-            text-decoration: none;
-            gap: 8px;
-            transition: all 0.3s ease;
-        }}
-        
-        .akc-button:hover {{
-            background-color: #357ABD;
-            transform: translateY(-1px);
-        }}
-        
-        .warning-message {{
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            color: #ff3b30;
-            font-weight: 500;
-            margin: 0;
-            padding: 16px;
-            background: #fff5f5;
-            border-radius: 8px;
-        }}
-        
-        .model-uncertainty-note {{
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            padding: 16px;
-            background-color: #f8f9fa;
-            border-left: 4px solid #6c757d;
-            margin-bottom: 20px;
-            color: #495057;
-            font-style: italic;
-            border-radius: 4px;
-        }}
-        
-        .breeds-list {{
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }}
-        
-        .breed-option {{
-            background: white;
-            border: 1px solid #e1e4e8;
-            border-radius: 8px;
-            overflow: hidden;
-        }}
-        
-        .breed-header {{
-            display: flex;
-            align-items: center;
-            padding: 16px;
-            background: #f8f9fa;
-            gap: 12px;
-            border-bottom: 1px solid #e1e4e8;
-        }}
-        
-        .option-number {{
-            font-weight: 600;
-            color: #666;
-            padding: 4px 8px;
-            background: #e1e4e8;
-            border-radius: 4px;
-        }}
-        
-        .breed-name {{
-            font-size: 1.1em;
-            font-weight: bold;
-            color: #2c3e50;
-            flex-grow: 1;
-        }}
-        
-        .confidence-badge {{
-            padding: 4px 12px;
-            border-radius: 20px;
-            font-size: 0.9em;
-            font-weight: 500;
-        }}
-        
-        .breed-content {{
-            padding: 20px;
-        }}
-        
-        ul {{
-            padding-left: 0;
-            margin: 0;
-            list-style-type: none;
-        }}
-        
-        li {{
-            margin-bottom: 8px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }}
-        </style>
-        {dogs_info}
-        """
-
-        initial_state = {
-            "dogs_info": dogs_info,
-            "image": annotated_image,
-            "is_multi_dog": len(dogs) > 1,
-            "html_output": html_output
-        }
-        
-        return html_output, annotated_image, initial_state
-
-    except Exception as e:
-        error_msg = f"An error occurred: {str(e)}\n\nTraceback:\n{traceback.format_exc()}"
-        print(error_msg)
-        return error_msg, None, None
+       <style>
+       .dog-info-card {{ 
+           border: 1px solid #e1e4e8; 
+           margin: 32px 0;
+           padding: 0; 
+           border-radius: 12px; 
+           box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+           overflow: hidden;
+           transition: all 0.3s ease;
+           background: white;
+       }}
+       
+       .dog-info-card:hover {{
+           box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+       }}
+       
+       .dog-info-header {{ 
+           padding: 20px 24px;
+           margin: 0;
+           font-size: 22px;
+           font-weight: bold;
+           border-bottom: 1px solid #e1e4e8;
+       }}
+       
+       .breed-info {{
+           padding: 24px;
+           line-height: 1.6;
+       }}
+       
+       .section-title {{
+           font-size: 1.2em;
+           font-weight: 700;
+           color: #2c3e50;
+           margin: 28px 0 16px 0;
+           padding-bottom: 8px;
+           border-bottom: 2px solid #e1e4e8;
+           text-transform: uppercase;
+           letter-spacing: 0.5px;
+           display: flex;
+           align-items: center;
+           gap: 8px;
+       }}
+       
+       .icon {{
+           font-size: 1.2em;
+           display: inline-flex;
+           align-items: center;
+           justify-content: center;
+       }}
+       
+       .info-section, .care-section, .family-section {{
+           display: flex;
+           flex-wrap: wrap;
+           gap: 16px;
+           margin-bottom: 20px;
+       }}
+       
+       .info-item {{
+           background: #f8f9fa;
+           padding: 12px 16px;
+           border-radius: 8px;
+           display: flex;
+           align-items: center;
+           gap: 8px;
+           box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+       }}
+       
+       .label {{
+           color: #666;
+           font-weight: 600;
+       }}
+       
+       .value {{
+           color: #2c3e50;
+       }}
+       
+       .temperament-section {{
+           background: #f8f9fa;
+           padding: 16px;
+           border-radius: 8px;
+           margin-bottom: 20px;
+           color: #444;
+       }}
+       
+       .description-section {{
+           background: #f8f9fa;
+           padding: 16px;
+           border-radius: 8px;
+           margin: 20px 0;
+           line-height: 1.8;
+           color: #444;
+       }}
+       
+       .action-section {{
+           margin-top: 24px;
+           text-align: center;
+       }}
+       
+       .akc-button {{
+           display: inline-flex;
+           align-items: center;
+           padding: 12px 24px;
+           background-color: #4A90E2;
+           color: white;
+           border-radius: 8px;
+           text-decoration: none;
+           gap: 8px;
+           transition: all 0.3s ease;
+           font-weight: 500;
+       }}
+       
+       .akc-button:hover {{
+           background-color: #357ABD;
+           transform: translateY(-1px);
+           color: white;
+       }}
+       
+       .warning-message {{
+           display: flex;
+           align-items: center;
+           gap: 8px;
+           color: #ff3b30;
+           font-weight: 500;
+           margin: 0;
+           padding: 16px;
+           background: #fff5f5;
+           border-radius: 8px;
+       }}
+       
+       .model-uncertainty-note {{
+           display: flex;
+           align-items: center;
+           gap: 12px;
+           padding: 16px;
+           background-color: #f8f9fa;
+           border-left: 4px solid #6c757d;
+           margin-bottom: 20px;
+           color: #495057;
+           border-radius: 4px;
+       }}
+       
+       .breeds-list {{
+           display: flex;
+           flex-direction: column;
+           gap: 20px;
+       }}
+       
+       .breed-option {{
+           background: white;
+           border: 1px solid #e1e4e8;
+           border-radius: 8px;
+           overflow: hidden;
+       }}
+       
+       .breed-header {{
+           display: flex;
+           align-items: center;
+           padding: 16px;
+           background: #f8f9fa;
+           gap: 12px;
+           border-bottom: 1px solid #e1e4e8;
+       }}
+       
+       .option-number {{
+           font-weight: 600;
+           color: #666;
+           padding: 4px 8px;
+           background: #e1e4e8;
+           border-radius: 4px;
+       }}
+       
+       .breed-name {{
+           font-size: 1.1em;
+           font-weight: bold;
+           color: #2c3e50;
+           flex-grow: 1;
+       }}
+       
+       .confidence-badge {{
+           padding: 4px 12px;
+           border-radius: 20px;
+           font-size: 0.9em;
+           font-weight: 500;
+       }}
+       
+       .breed-content {{
+           padding: 20px;
+       }}
+       
+       ul {{
+           padding-left: 0;
+           margin: 0;
+           list-style-type: none;
+       }}
+       
+       li {{
+           margin-bottom: 8px;
+           display: flex;
+           align-items: center;
+           gap: 8px;
+       }}
+
+       .akc-link {{
+           color: #4A90E2;
+           text-decoration: none;
+           font-weight: 500;
+           transition: all 0.3s ease;
+       }}
+       
+       .akc-link:hover {{
+           text-decoration: underline;
+           color: #357ABD;
+       }}
+       </style>
+       {dogs_info}
+       """
+
+       initial_state = {
+           "dogs_info": dogs_info,
+           "image": annotated_image,
+           "is_multi_dog": len(dogs) > 1,
+           "html_output": html_output
+       }
+       
+       return html_output, annotated_image, initial_state
+
+   except Exception as e:
+       error_msg = f"An error occurred: {str(e)}\n\nTraceback:\n{traceback.format_exc()}"
+       print(error_msg)
+       return error_msg, None, None
 
 
 
@@ -851,21 +863,6 @@ def show_details_html(choice, previous_output, initial_state):
         return f"<p style='color: red;'>{error_msg}</p>", gr.update(visible=True), initial_state
 
 
-# def format_description_html(description, breed):
-#     html = "<ul style='list-style-type: none; padding-left: 0;'>"
-#     if isinstance(description, dict):
-#         for key, value in description.items():
-#             html += f"<li style='margin-bottom: 10px;'><strong>{key}:</strong> {value}</li>"
-#     elif isinstance(description, str):
-#         html += f"<li>{description}</li>"
-#     else:
-#         html += f"<li>No description available for {breed}</li>"
-#     html += "</ul>"
-#     akc_link = get_akc_breeds_link(breed)
-#     html += f'<p><a href="{akc_link}" target="_blank">Learn more about {breed} on the AKC website</a></p>'
-#     return html
-
-
 def format_description_html(description, breed):
     html = "<ul style='list-style-type: none; padding-left: 0;'>"
     if isinstance(description, dict):