update html_templates

html_templates.py

@@ -22,7 +22,7 @@ def get_akc_breeds_link(breed: str) -> str:
 
 def get_color_scheme(is_single_dog: bool) -> Union[str, List[str]]:
     """Get color scheme for dog detection visualization."""
-    single_dog_color = '#34C759'  # 適當淺度的綠色當作為單一品種的顏色
+    single_dog_color = '#34C759'  # 清爽的綠色作為單狗顏色
     color_list = [
         '#FF5733',  # 珊瑚紅
         '#28A745',  # 深綠色
@@ -36,12 +36,11 @@ def get_color_scheme(is_single_dog: bool) -> Union[str, List[str]]:
         '#FFE033'   # 金黃色
     ]
     return single_dog_color if is_single_dog else color_list
-    
 
 def format_hint_html(message: str) -> str:
     """
     提示訊息的 HTML。
-    
+
     Args:
         message: str, 要顯示的提示訊息
     Returns:
@@ -221,7 +220,7 @@ def format_single_dog_result(breed: str, description: Dict[str, Any], color: str
     # 獲取noise和health資訊
     noise_info = breed_noise_info.get(breed, {})
     health_info = breed_health_info.get(breed, {})
-    
+
     # 處理噪音資訊
     noise_notes = noise_info.get('noise_notes', '').split('\n')
     noise_characteristics = []
@@ -277,7 +276,6 @@ def format_single_dog_result(breed: str, description: Dict[str, Any], color: str
                     {display_breeds_name}
                 </h2>
             </div>
-
             <div class="breed-info">
                 <!-- Basic Information -->
                 <div class="section-header" style="margin-bottom: 15px;">
@@ -316,7 +314,6 @@ def format_single_dog_result(breed: str, description: Dict[str, Any], color: str
                         <span>{description['Lifespan']}</span>
                     </div>
                 </div>
-
                 <!-- Care Requirements -->
                 <div class="section-header" style="margin-bottom: 15px;">
                     <h3>
@@ -367,7 +364,6 @@ def format_single_dog_result(breed: str, description: Dict[str, Any], color: str
                         <span>{description['Care Level']}</span>
                     </div>
                 </div>
-
                 <!-- Noise Behavior -->
                 <div class="section-header" style="margin-bottom: 15px;">
                     <h3>
@@ -392,7 +388,6 @@ def format_single_dog_result(breed: str, description: Dict[str, Any], color: str
                     <div class="characteristics-list">
                         {format_noise_items(noise_characteristics[:2])}
                     </div>
-
                     <details class="expandable-section" style="margin-top: 15px;">
                         <summary class="expand-header" style="cursor: pointer; padding: 10px; background: #f8f9fa; border-radius: 6px;">
                             Show Complete Noise Information
@@ -416,7 +411,6 @@ def format_single_dog_result(breed: str, description: Dict[str, Any], color: str
                         </div>
                     </details>
                 </div>
-
                 <!-- Health Insights -->
                 <div class="section-header" style="margin-bottom: 15px;">
                     <h3>
@@ -437,7 +431,6 @@ def format_single_dog_result(breed: str, description: Dict[str, Any], color: str
                     <div class="key-considerations">
                         {format_health_items(health_considerations[:2])}
                     </div>
-
                     <details class="expandable-section" style="margin-top: 15px;">
                         <summary class="expand-header" style="cursor: pointer; padding: 10px; background: #f8f9fa; border-radius: 6px;">
                             Show Complete Health Information
@@ -461,7 +454,6 @@ def format_single_dog_result(breed: str, description: Dict[str, Any], color: str
                         </div>
                     </details>
                 </div>
-
                 <!-- Description -->
                 <div class="section-header" style="margin-bottom: 15px;">
                     <h3>
@@ -471,12 +463,11 @@ def format_single_dog_result(breed: str, description: Dict[str, Any], color: str
                 <div class="description-section" style="background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 30px;">
                     <p style="line-height: 1.6;">{description.get('Description', '')}</p>
                 </div>
-
                 <!-- Action Section -->
                 <div class="action-section" style="text-align: center; margin-top: 30px;">
-                    <a href="{get_akc_breeds_link(breed)}" 
-                       target="_blank" 
-                       class="akc-button" 
+                    <a href="{get_akc_breeds_link(breed)}"
+                       target="_blank"
+                       class="akc-button"
                        style="display: inline-block; padding: 12px 24px; background: linear-gradient(90deg, #4299e1, #48bb78); color: white; text-decoration: none; border-radius: 6px;">
                         <span class="icon">🌐</span>
                         Learn more about {display_breeds_name} on AKC website
@@ -499,7 +490,7 @@ def format_health_items(items: List[str]) -> str:
         return "<div class='list-item'>Information not available</div>"
     return "\n".join([f"<div class='list-item'>• {item}</div>" for item in items])
 
-  
+
 def format_multiple_breeds_result(
     topk_breeds: List[str],
     relative_probs: List[str],
@@ -509,7 +500,7 @@ def format_multiple_breeds_result(
 ) -> str:
     """Format multiple breed predictions into HTML with complete information."""
     display_breeds = [breed.replace('_', ' ') for breed in topk_breeds]
-    
+
     result = f'''
         <!-- 主標題區塊 -->
         <div style="background: {color}10; border-radius: 12px 12px 0 0; padding: 20px;">
@@ -518,18 +509,16 @@ def format_multiple_breeds_result(
                 <span style="font-size: 1.4em; font-weight: 600; color: {color};">Dog {index}</span>
             </div>
         </div>
-
         <!-- 內容區塊 -->
         <div style="padding: 20px;">
             <!-- 不確定性提示 -->
             <div style="margin-bottom: 20px;">
                 <div style="display: flex; align-items: center; gap: 8px; padding: 12px; background: #f8f9fa; border-radius: 8px;">
                     <span>ℹ️</span>
-                    <span>Note: The model is showing some uncertainty in its predictions. 
+                    <span>Note: The model is showing some uncertainty in its predictions.
                     Here are the most likely breeds based on the available visual features.</span>
                 </div>
             </div>
-
             <!-- 品種列表容器 -->
             <div class="breeds-list" style="display: grid; gap: 20px;">
     '''
@@ -591,7 +580,6 @@ def format_multiple_breeds_result(
                           {f'<span style="background: {color}12; color: {color}; padding: 8px 16px; border-radius: 8px; font-size: 1em; font-weight: 500; box-shadow: 0 1px 2px {color}20;">Confidence: {prob}</span>' if prob else ''}
                       </div>
                   </div>
-
                   <div class="breed-info" style="padding: 24px;">
                       <!-- Basic Information -->
                       <div style="margin-bottom: 32px;">
@@ -605,8 +593,8 @@ def format_multiple_breeds_result(
                                   <div style="display: flex; align-items: center; gap: 10px;">
                                       <span style="font-size: 1.1em;">📏</span>
                                       <span style="font-weight: 500;">Size</span>
-                                      <div style="position: relative; display: inline-block;" 
-                                          onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';" 
+                                      <div style="position: relative; display: inline-block;"
+                                          onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';"
                                           onmouseout="this.querySelector('.tooltip-content').style.visibility='hidden';this.querySelector('.tooltip-content').style.opacity='0';">
                                           <span style="cursor: help; color: #718096;">ⓘ</span>
                                           <div class="tooltip-content" style="
@@ -628,7 +616,7 @@ def format_multiple_breeds_result(
                                               • Medium: 20-60 pounds<br>
                                               • Large: Over 60 pounds<br>
                                               • Giant: Over 100 pounds
-                                              <div style="position: absolute; 
+                                              <div style="position: absolute;
                                                   {f'left: 20px; bottom: -8px; border-top: 8px solid #2C3E50;' if not prob else 'top: 50%; right: 100%; transform: translateY(-50%); border-right: 8px solid #2C3E50;'};
                                                   width: 0;
                                                   height: 0;
@@ -640,14 +628,13 @@ def format_multiple_breeds_result(
                                   </div>
                                   <span style="display: block; margin-top: 8px; color: #4a5568;">{description['Size']}</span>
                               </div>
-
                               <!-- Lifespan -->
                               <div style="padding: 16px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0;">
                                   <div style="display: flex; align-items: center; gap: 10px;">
                                       <span style="font-size: 1.1em;">⏳</span>
                                       <span style="font-weight: 500;">Lifespan</span>
-                                      <div style="position: relative; display: inline-block;" 
-                                          onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';" 
+                                      <div style="position: relative; display: inline-block;"
+                                          onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';"
                                           onmouseout="this.querySelector('.tooltip-content').style.visibility='hidden';this.querySelector('.tooltip-content').style.opacity='0';">
                                           <span style="cursor: help; color: #718096;">ⓘ</span>
                                           <div class="tooltip-content" style="
@@ -668,7 +655,7 @@ def format_multiple_breeds_result(
                                               • Short: 6-8 years<br>
                                               • Average: 10-15 years<br>
                                               • Long: 12-20 years
-                                              <div style="position: absolute; 
+                                              <div style="position: absolute;
                                                   {f'left: 20px; bottom: -8px; border-top: 8px solid #2C3E50;' if not prob else 'top: 50%; right: 100%; transform: translateY(-50%); border-right: 8px solid #2C3E50;'};
                                                   width: 0;
                                                   height: 0;
@@ -682,7 +669,6 @@ def format_multiple_breeds_result(
                               </div>
                           </div>
                       </div>
-
                       <!-- Care Requirements -->
                       <div style="margin-bottom: 32px;">
                           <h3 style="display: flex; align-items: center; gap: 10px; margin: 0 0 20px 0; padding: 12px; background: #f8f9fa; border-radius: 6px;">
@@ -695,8 +681,8 @@ def format_multiple_breeds_result(
                                   <div style="display: flex; align-items: center; gap: 10px;">
                                       <span style="font-size: 1.1em;">🏃</span>
                                       <span style="font-weight: 500;">Exercise</span>
-                                      <div style="position: relative; display: inline-block;" 
-                                          onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';" 
+                                      <div style="position: relative; display: inline-block;"
+                                          onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';"
                                           onmouseout="this.querySelector('.tooltip-content').style.visibility='hidden';this.querySelector('.tooltip-content').style.opacity='0';">
                                           <span style="cursor: help; color: #718096;">ⓘ</span>
                                           <div class="tooltip-content" style="
@@ -717,7 +703,7 @@ def format_multiple_breeds_result(
                                               • Low: Short walks<br>
                                               • Moderate: 1-2 hours daily<br>
                                               • High: 2+ hours daily
-                                              <div style="position: absolute; 
+                                              <div style="position: absolute;
                                                   {f'left: 20px; bottom: -8px; border-top: 8px solid #2C3E50;' if not prob else 'top: 50%; right: 100%; transform: translateY(-50%); border-right: 8px solid #2C3E50;'};
                                                   width: 0;
                                                   height: 0;
@@ -729,14 +715,13 @@ def format_multiple_breeds_result(
                                   </div>
                                   <span style="display: block; margin-top: 8px; color: #4a5568;">{description['Exercise Needs']}</span>
                               </div>
-
                               <!-- Grooming -->
                               <div style="padding: 16px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0;">
                                   <div style="display: flex; align-items: center; gap: 10px;">
                                       <span style="font-size: 1.1em;">✂️</span>
                                       <span style="font-weight: 500;">Grooming</span>
-                                      <div style="position: relative; display: inline-block;" 
-                                          onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';" 
+                                      <div style="position: relative; display: inline-block;"
+                                          onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';"
                                           onmouseout="this.querySelector('.tooltip-content').style.visibility='hidden';this.querySelector('.tooltip-content').style.opacity='0';">
                                           <span style="cursor: help; color: #718096;">ⓘ</span>
                                           <div class="tooltip-content" style="
@@ -757,7 +742,7 @@ def format_multiple_breeds_result(
                                               • Low: Basic brushing<br>
                                               • Moderate: Weekly grooming<br>
                                               • High: Daily maintenance
-                                              <div style="position: absolute; 
+                                              <div style="position: absolute;
                                                   {f'left: 20px; bottom: -8px; border-top: 8px solid #2C3E50;' if not prob else 'top: 50%; right: 100%; transform: translateY(-50%); border-right: 8px solid #2C3E50;'};
                                                   width: 0;
                                                   height: 0;
@@ -769,14 +754,13 @@ def format_multiple_breeds_result(
                                   </div>
                                   <span style="display: block; margin-top: 8px; color: #4a5568;">{description['Grooming Needs']}</span>
                               </div>
-
                               <!-- Care Level -->
                               <div style="padding: 16px; border-radius: 10px; background: #fff; border: 1px solid #e2e8f0;">
                                   <div style="display: flex; align-items: center; gap: 10px;">
                                       <span style="font-size: 1.1em;">⭐</span>
                                       <span style="font-weight: 500;">Care Level</span>
-                                      <div style="position: relative; display: inline-block;" 
-                                          onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';" 
+                                      <div style="position: relative; display: inline-block;"
+                                          onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';"
                                           onmouseout="this.querySelector('.tooltip-content').style.visibility='hidden';this.querySelector('.tooltip-content').style.opacity='0';">
                                           <span style="cursor: help; color: #718096;">ⓘ</span>
                                           <div class="tooltip-content" style="
@@ -797,7 +781,7 @@ def format_multiple_breeds_result(
                                               • Low: Basic care<br>
                                               • Moderate: Regular care<br>
                                               • High: Extensive care
-                                              <div style="position: absolute; 
+                                              <div style="position: absolute;
                                                   {f'left: 20px; bottom: -8px; border-top: 8px solid #2C3E50;' if not prob else 'top: 50%; right: 100%; transform: translateY(-50%); border-right: 8px solid #2C3E50;'};
                                                   width: 0;
                                                   height: 0;
@@ -811,14 +795,13 @@ def format_multiple_breeds_result(
                               </div>
                           </div>
                       </div>
-
                       <!-- Noise Behavior -->
                       <div style="margin-bottom: 32px;">
                           <h3 style="display: flex; align-items: center; gap: 10px; margin: 0 0 20px 0; padding: 12px; background: #f8f9fa; border-radius: 6px;">
                               <span style="font-size: 1.2em;">🔊</span>
                               <span style="font-size: 1.2em; font-weight: 600; color: #2d3748;">NOISE BEHAVIOR</span>
-                              <div style="position: relative; display: inline-block;" 
-                                  onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';" 
+                              <div style="position: relative; display: inline-block;"
+                                  onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';"
                                   onmouseout="this.querySelector('.tooltip-content').style.visibility='hidden';this.querySelector('.tooltip-content').style.opacity='0';">
                                   <span style="cursor: help; color: #718096;">ⓘ</span>
                                   <div class="tooltip-content" style="
@@ -839,7 +822,7 @@ def format_multiple_breeds_result(
                                       • Typical vocalization patterns<br>
                                       • Common triggers and frequency<br>
                                       • Based on breed characteristics
-                                      <div style="position: absolute; 
+                                      <div style="position: absolute;
                                           {f'left: 20px; bottom: -8px; border-top: 8px solid #2C3E50;' if not prob else 'top: 50%; right: 100%; transform: translateY(-50%); border-right: 8px solid #2C3E50;'};
                                           width: 0;
                                           height: 0;
@@ -886,14 +869,13 @@ def format_multiple_breeds_result(
                               </details>
                           </div>
                       </div>
-
                       <!-- Health Insights -->
                       <div style="margin-bottom: 32px;">
                           <h3 style="display: flex; align-items: center; gap: 10px; margin: 0 0 20px 0; padding: 12px; background: #f8f9fa; border-radius: 6px;">
                               <span style="font-size: 1.2em;">🏥</span>
                               <span style="font-size: 1.2em; font-weight: 600; color: #2d3748;">HEALTH INSIGHTS</span>
-                              <div style="position: relative; display: inline-block;" 
-                                  onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';" 
+                              <div style="position: relative; display: inline-block;"
+                                  onmouseover="this.querySelector('.tooltip-content').style.visibility='visible';this.querySelector('.tooltip-content').style.opacity='1';"
                                   onmouseout="this.querySelector('.tooltip-content').style.visibility='hidden';this.querySelector('.tooltip-content').style.opacity='0';">
                                   <span style="cursor: help; color: #718096;">ⓘ</span>
                                   <div class="tooltip-content" style="
@@ -914,7 +896,7 @@ def format_multiple_breeds_result(
                                       • Common breed-specific conditions<br>
                                       • Recommended health screenings<br>
                                       • General health considerations
-                                      <div style="position: absolute; 
+                                      <div style="position: absolute;
                                           {f'left: 20px; bottom: -8px; border-top: 8px solid #2C3E50;' if not prob else 'top: 50%; right: 100%; transform: translateY(-50%); border-right: 8px solid #2C3E50;'};
                                           width: 0;
                                           height: 0;
@@ -954,7 +936,6 @@ def format_multiple_breeds_result(
                               </details>
                           </div>
                       </div>
-
                       <!-- Description -->
                       <div style="margin-bottom: 32px;">
                           <h3 style="display: flex; align-items: center; gap: 10px; margin: 0 0 20px 0; padding: 12px; background: #f8f9fa; border-radius: 6px;">
@@ -965,11 +946,10 @@ def format_multiple_breeds_result(
                               <p style="line-height: 1.6; margin: 0; color: #2d3748;">{description.get('Description', '')}</p>
                           </div>
                       </div>
-
                       <!-- Action Section -->
                       <div style="text-align: center; margin-top: 32px;">
-                          <a href="{get_akc_breeds_link(breed)}" 
-                              target="_blank" 
+                          <a href="{get_akc_breeds_link(breed)}"
+                              target="_blank"
                               rel="noopener noreferrer"
                               style="display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: linear-gradient(90deg, #4299e1, #48bb78); color: white; text-decoration: none; border-radius: 8px; font-weight: 500; transition: opacity 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                               <span style="font-size: 1.2em;">🌐</span>
@@ -980,7 +960,7 @@ def format_multiple_breeds_result(
               </div>
           </div>
           '''
-    
+
     return result
 
 
@@ -1041,4 +1021,4 @@ def format_comparison_details(breed_data: Dict) -> str:
             <p><strong>Good with Children:</strong> {original_data.get('Good with Children', 'N/A')}</p>
             <p><strong>Temperament:</strong> {original_data.get('Temperament', 'N/A')}</p>
         </div>
-    """
+    """