Update app.py

app.py

@@ -435,6 +435,7 @@ 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']
         annotated_image = image.copy()
@@ -470,6 +471,7 @@ async def predict(image):
             top1_prob, topk_breeds, relative_probs = await predict_single_dog(cropped_image)
             combined_confidence = detection_confidence * top1_prob
             
+            # 開始資訊卡片
             dogs_info += f'<div class="dog-info-card" style="border-left: 6px solid {color};">'
             
             if combined_confidence < 0.15:
@@ -478,7 +480,10 @@ async def predict(image):
                         <span class="dog-label" style="color: {color};">Dog {i+1}</span>
                     </div>
                     <div class="breed-info">
-                        <p class="warning-message">The image is unclear or the breed is not in the dataset. Please upload a clearer image.</p>
+                        <p class="warning-message">
+                            <span class="icon">⚠️</span>
+                            The image is unclear or the breed is not in the dataset. Please upload a clearer image.
+                        </p>
                     </div>
                 '''
             elif top1_prob >= 0.45:
@@ -486,46 +491,78 @@ async def predict(image):
                 description = get_dog_description(breed)
                 dogs_info += f'''
                     <div class="dog-info-header" style="background-color: {color}10;">
-                        <span class="dog-label" style="color: {color};">{breed}</span>
+                        <span class="dog-label" style="color: {color};">
+                            <span class="icon">🏆</span> {breed}
+                        </span>
                     </div>
                     <div class="breed-info">
-                        <div class="breed-details">
-                            <div class="feature-category">
-                                <div class="feature-title">Basic Information</div>
-                                <div class="basic-info">
-                                    <span class="info-item"><strong>Size:</strong> {description['Size']}</span>
-                                    <span class="info-item"><strong>Lifespan:</strong> {description['Lifespan']}</span>
-                                </div>
+                        <h2 class="section-title">
+                            <span class="icon">📋</span> BASIC INFORMATION
+                        </h2>
+                        <div class="info-section">
+                            <div class="info-item">
+                                <span class="icon">📏</span>
+                                <span class="label">Size:</span>
+                                <span class="value">{description['Size']}</span>
                             </div>
-                            
-                            <div class="feature-category">
-                                <div class="feature-title">Temperament & Personality</div>
-                                <div class="temperament">{description['Temperament']}</div>
+                            <div class="info-item">
+                                <span class="icon">⏳</span>
+                                <span class="label">Lifespan:</span>
+                                <span class="value">{description['Lifespan']}</span>
                             </div>
-                            
-                            <div class="feature-category">
-                                <div class="feature-title">Care Requirements</div>
-                                <div class="care-info">
-                                    <span class="info-item"><strong>Exercise Needs:</strong> {description['Exercise Needs']}</span>
-                                    <span class="info-item"><strong>Grooming:</strong> {description['Grooming Needs']}</span>
-                                    <span class="info-item"><strong>Care Level:</strong> {description['Care Level']}</span>
-                                </div>
+                        </div>
+
+                        <h2 class="section-title">
+                            <span class="icon">🐕</span> TEMPERAMENT & PERSONALITY
+                        </h2>
+                        <div class="temperament-section">
+                            <span class="value">{description['Temperament']}</span>
+                        </div>
+
+                        <h2 class="section-title">
+                            <span class="icon">💪</span> CARE REQUIREMENTS
+                        </h2>
+                        <div class="care-section">
+                            <div class="info-item">
+                                <span class="icon">🏃</span>
+                                <span class="label">Exercise:</span>
+                                <span class="value">{description['Exercise Needs']}</span>
+                            </div>
+                            <div class="info-item">
+                                <span class="icon">✂️</span>
+                                <span class="label">Grooming:</span>
+                                <span class="value">{description['Grooming Needs']}</span>
                             </div>
-                            
-                            <div class="feature-category">
-                                <div class="feature-title">Family Compatibility</div>
-                                <div class="family-info">
-                                    <span class="info-item"><strong>Good with Children:</strong> {description['Good with Children']}</span>
-                                </div>
+                            <div class="info-item">
+                                <span class="icon">⭐</span>
+                                <span class="label">Care Level:</span>
+                                <span class="value">{description['Care Level']}</span>
                             </div>
-                            
-                            <div class="feature-category">
-                                <div class="feature-title">Description</div>
-                                <div class="description">{description.get('Description', '')}</div>
+                        </div>
+
+                        <h2 class="section-title">
+                            <span class="icon">👨‍👩‍👧‍👦</span> FAMILY COMPATIBILITY
+                        </h2>
+                        <div class="family-section">
+                            <div class="info-item">
+                                <span class="icon">👶</span>
+                                <span class="label">Good with Children:</span>
+                                <span class="value">{description['Good with Children']}</span>
                             </div>
                         </div>
-                        <div class="breed-footer">
-                            <a href="{get_akc_breeds_link(breed)}" target="_blank" class="akc-link">Learn more about {breed} on the AKC website</a>
+
+                        <h2 class="section-title">
+                            <span class="icon">📝</span> DESCRIPTION
+                        </h2>
+                        <div class="description-section">
+                            <p>{description.get('Description', '')}</p>
+                        </div>
+
+                        <div class="action-section">
+                            <a href="{get_akc_breeds_link(breed)}" target="_blank" class="akc-button">
+                                <span class="icon">🌐</span>
+                                Learn more about {breed} on AKC website
+                            </a>
                         </div>
                     </div>
                 '''
@@ -536,23 +573,30 @@ async def predict(image):
                     </div>
                     <div class="breed-info">
                         <div class="model-uncertainty-note">
+                            <span class="icon">ℹ️</span>
                             Note: The model is showing some uncertainty in its predictions. 
                             Here are the most likely breeds based on the available visual features.
                         </div>
-                        <h3 class="breeds-title">Top 3 possible breeds:</h3>
+                        <div class="breeds-list">
                 '''
                 
                 for j, (breed, prob) in enumerate(zip(topk_breeds, relative_probs)):
                     description = get_dog_description(breed)
                     dogs_info += f'''
-                        <div class="breed-section">
-                            <div class="confidence-score" style="color: {color};">{breed} (Confidence: {prob})</div>
-                            <div class="breed-info-content">
+                        <div class="breed-option">
+                            <div class="breed-header">
+                                <span class="option-number">Option {j+1}</span>
+                                <span class="breed-name">{breed}</span>
+                                <span class="confidence-badge" style="background-color: {color}20; color: {color};">
+                                    Confidence: {prob}
+                                </span>
+                            </div>
+                            <div class="breed-content">
                                 {format_description_html(description, breed)}
                             </div>
                         </div>
                     '''
-                dogs_info += '</div>'
+                dogs_info += '</div></div>'
             
             dogs_info += '</div>'
 
@@ -566,6 +610,7 @@ async def predict(image):
             box-shadow: 0 2px 12px rgba(0,0,0,0.08);
             overflow: hidden;
             transition: all 0.3s ease;
+            background: white;
         }}
         
         .dog-info-card:hover {{
@@ -585,59 +630,109 @@ async def predict(image):
             line-height: 1.6;
         }}
         
-        .feature-category {{
-            margin-bottom: 24px;
-        }}
-        
-        .feature-title {{
-            font-size: 16px;
-            color: #666;
-            margin-bottom: 12px;
-            font-weight: 600;
+        .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;
         }}
         
-        .basic-info, .care-info, .family-info {{
+        .info-section, .care-section, .family-section {{
             display: flex;
             flex-wrap: wrap;
             gap: 16px;
+            margin-bottom: 20px;
         }}
         
         .info-item {{
             background: #f8f9fa;
-            padding: 8px 16px;
-            border-radius: 6px;
-            font-size: 14px;
+            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;
         }}
         
-        .temperament {{
+        .value {{
+            color: #2c3e50;
+        }}
+        
+        .temperament-section {{
+            background: #f8f9fa;
+            padding: 16px;
+            border-radius: 8px;
+            margin-bottom: 20px;
             font-style: italic;
             color: #444;
         }}
         
-        .description {{
+        .description-section {{
+            background: #f8f9fa;
+            padding: 16px;
+            border-radius: 8px;
+            margin: 20px 0;
             line-height: 1.8;
             color: #444;
         }}
         
-        .breed-footer {{
+        .action-section {{
             margin-top: 24px;
-            padding-top: 16px;
-            border-top: 1px solid #e1e4e8;
+            text-align: center;
         }}
         
-        .akc-link {{
-            color: #4A90E2;
+        .akc-button {{
+            display: inline-flex;
+            align-items: center;
+            padding: 12px 24px;
+            background-color: #4A90E2;
+            color: white;
+            border-radius: 8px;
             text-decoration: none;
-            font-weight: 500;
+            gap: 8px;
+            transition: all 0.3s ease;
         }}
         
-        .akc-link:hover {{
-            text-decoration: underline;
+        .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;
@@ -646,6 +741,67 @@ async def predict(image):
             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}
         """
@@ -666,6 +822,9 @@ async def predict(image):
 
 
 
+
+
+
 def show_details_html(choice, previous_output, initial_state):
     if not choice:
         return previous_output, gr.update(visible=True), initial_state
@@ -727,7 +886,7 @@ def format_description_html(description, breed):
 with gr.Blocks() as iface:
     gr.HTML("<h1 style='text-align: center;'>🐶 Dog Breed Classifier 🔍</h1>")
     gr.HTML("<p style='text-align: center;'>Upload a picture of a dog, and the model will predict its breed and provide detailed information!</p>")
-    gr.HTML("<p style='text-align: center; color: #666; font-size: 0.9em;'>Note: This is an AI model and predictions may not always be 100% accurate. The model provides its best estimates based on training data.</p>")
+    gr.HTML("<p style='text-align: center; color: #666; font-size: 0.9em;'>Note: The model's predictions may not always be 100% accurate, and it is recommended to use the results as a reference.</p>")
     
     
     with gr.Row():