update app.py, styles.py, dmanifest, service worker and icon for mobile prepare

app.py

@@ -61,7 +61,7 @@ class ModelManager:
         if not ModelManager._initialized:
             self._device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
             ModelManager._initialized = True
-    
+
     @property
     def device(self):
         if self._device is None:
@@ -78,10 +78,10 @@ class ModelManager:
     def breed_model(self):
         if self._breed_model is None:
             self._breed_model = BaseModel(
-                num_classes=len(dog_breeds), 
+                num_classes=len(dog_breeds),
                 device=self.device
             ).to(self.device)
-            
+
             checkpoint = torch.load(
                 'ConvNextV2Base_best_model.pth',
                 map_location=self.device
@@ -110,18 +110,18 @@ def preprocess_image(image):
 def predict_single_dog(image):
     """Predicts dog breed for a single image"""
     image_tensor = preprocess_image(image).to(model_manager.device)
-    
+
     with torch.no_grad():
         logits = model_manager.breed_model(image_tensor)[0]
         probs = F.softmax(logits, dim=1)
-        
+
         top5_prob, top5_idx = torch.topk(probs, k=5)
         breeds = [dog_breeds[idx.item()] for idx in top5_idx[0]]
         probabilities = [prob.item() for prob in top5_prob[0]]
-        
+
         sum_probs = sum(probabilities[:3])
         relative_probs = [f"{(prob/sum_probs * 100):.2f}%" for prob in probabilities[:3]]
-        
+
         return probabilities[0], breeds[:3], relative_probs
 
 def enhanced_preprocess(image, is_standing=False, has_overlap=False):
@@ -131,7 +131,7 @@ def enhanced_preprocess(image, is_standing=False, has_overlap=False):
     """
     target_size = 224
     w, h = image.size
-    
+
     if is_standing:
         if h > w * 1.5:
             new_h = target_size
@@ -145,13 +145,13 @@ def enhanced_preprocess(image, is_standing=False, has_overlap=False):
         scale = min(target_size/w, target_size/h)
         new_w = int(w * scale)
         new_h = int(h * scale)
-    
+
     resized = image.resize((new_w, new_h), Image.Resampling.LANCZOS)
     final_image = Image.new('RGB', (target_size, target_size), (240, 240, 240))
     paste_x = (target_size - new_w) // 2
     paste_y = (target_size - new_h) // 2
     final_image.paste(resized, (paste_x, paste_y))
-    
+
     return final_image
 
 @spaces.GPU
@@ -163,7 +163,7 @@ def detect_multiple_dogs(image, conf_threshold=0.3, iou_threshold=0.3):
     results = model_manager.yolo_model(image, conf=conf_threshold, iou=iou_threshold)[0]
     img_width, img_height = image.size
     detected_boxes = []
-    
+
     # Phase 1: Initial detection and processing
     for box in results.boxes:
         if box.cls.item() == 16:  # Dog class
@@ -172,7 +172,7 @@ def detect_multiple_dogs(image, conf_threshold=0.3, iou_threshold=0.3):
             x1, y1, x2, y2 = map(int, xyxy)
             w = x2 - x1
             h = y2 - y1
-            
+
             detected_boxes.append({
                 'coords': [x1, y1, x2, y2],
                 'width': w,
@@ -183,55 +183,55 @@ def detect_multiple_dogs(image, conf_threshold=0.3, iou_threshold=0.3):
                 'confidence': confidence,
                 'aspect_ratio': w / h if h != 0 else 1
             })
-    
+
     if not detected_boxes:
         return [(image, 1.0, [0, 0, img_width, img_height], False)]
-    
+
     # Phase 2: Analysis of detection relationships
     avg_height = sum(box['height'] for box in detected_boxes) / len(detected_boxes)
     avg_width = sum(box['width'] for box in detected_boxes) / len(detected_boxes)
     avg_area = sum(box['area'] for box in detected_boxes) / len(detected_boxes)
-    
+
     def calculate_iou(box1, box2):
         x1 = max(box1['coords'][0], box2['coords'][0])
         y1 = max(box1['coords'][1], box2['coords'][1])
         x2 = min(box1['coords'][2], box2['coords'][2])
         y2 = min(box1['coords'][3], box2['coords'][3])
-        
+
         if x2 <= x1 or y2 <= y1:
             return 0.0
-            
+
         intersection = (x2 - x1) * (y2 - y1)
         area1 = box1['area']
         area2 = box2['area']
         return intersection / (area1 + area2 - intersection)
-    
+
     # Phase 3: Processing each detection
     processed_boxes = []
     overlap_threshold = 0.2
-    
+
     for i, box_info in enumerate(detected_boxes):
         x1, y1, x2, y2 = box_info['coords']
         w = box_info['width']
         h = box_info['height']
         center_x = box_info['center_x']
         center_y = box_info['center_y']
-        
+
         # Check for overlaps
         has_overlap = False
         for j, other_box in enumerate(detected_boxes):
             if i != j and calculate_iou(box_info, other_box) > overlap_threshold:
                 has_overlap = True
                 break
-        
+
         # Adjust expansion strategy
         base_expansion = 0.03
         max_expansion = 0.05
-        
+
         is_standing = h > 1.5 * w
         is_sitting = 0.8 <= h/w <= 1.2
         is_abnormal_size = (h * w) > (avg_area * 1.5) or (h * w) < (avg_area * 0.5)
-        
+
         if has_overlap:
             h_expansion = w_expansion = base_expansion * 0.8
         else:
@@ -242,41 +242,41 @@ def detect_multiple_dogs(image, conf_threshold=0.3, iou_threshold=0.3):
                 h_expansion = w_expansion = base_expansion
             else:
                 h_expansion = w_expansion = base_expansion * 0.9
-        
+
         # Position compensation
         if center_x < img_width * 0.2 or center_x > img_width * 0.8:
             w_expansion *= 0.9
-        
+
         if is_abnormal_size:
             h_expansion *= 0.8
             w_expansion *= 0.8
-        
+
         # Calculate final bounding box
         expansion_w = w * w_expansion
         expansion_h = h * h_expansion
-        
+
         new_x1 = max(0, center_x - (w + expansion_w)/2)
         new_y1 = max(0, center_y - (h + expansion_h)/2)
         new_x2 = min(img_width, center_x + (w + expansion_w)/2)
         new_y2 = min(img_height, center_y + (h + expansion_h)/2)
-        
+
         # Crop and process image
-        cropped_image = image.crop((int(new_x1), int(new_y1), 
+        cropped_image = image.crop((int(new_x1), int(new_y1),
                                   int(new_x2), int(new_y2)))
-        
+
         processed_image = enhanced_preprocess(
             cropped_image,
             is_standing=is_standing,
             has_overlap=has_overlap
         )
-        
+
         processed_boxes.append((
-            processed_image, 
+            processed_image,
             box_info['confidence'],
-            [new_x1, new_y1, new_x2, new_y2], 
+            [new_x1, new_y1, new_x2, new_y2],
             True
         ))
-    
+
     return processed_boxes
 
 @spaces.GPU
@@ -443,6 +443,19 @@ def main():
         # Header HTML
 
         gr.HTML("""
+            <head>
+                <link rel="manifest" href="manifest.json">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                <meta name="theme-color" content="#4299e1">
+                <link rel="apple-touch-icon" href="assets/icon-192.png">
+            </head>
+            <script>
+                if ('serviceWorker' in navigator) {
+                    window.addEventListener('load', () => {
+                        navigator.serviceWorker.register('/service-worker.js');
+                    });
+                }
+            </script>
         <header style='text-align: center; padding: 20px; margin-bottom: 20px;'>
             <h1 style='font-size: 2.5em; margin-bottom: 10px; color: #2D3748;'>
                 🐾 PawMatch AI
@@ -522,4 +535,4 @@ def main():
 
 if __name__ == "__main__":
     iface = main()
-    iface.launch()
+    iface.launch()

manifest.json

@@ -0,0 +1,21 @@
+{
+    "name": "PawMatch AI",
+    "short_name": "PawMatch",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#4299e1",
+    "description": "Your Smart Dog Breed Guide",
+    "icons": [
+        {
+            "src": "assets/icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "assets/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}

service-worker.js

@@ -0,0 +1,23 @@
+const CACHE_NAME = 'pawmatch-v1';
+const urlsToCache = [
+    '/',
+    '/index.html',
+    '/assets/icon-192.png',
+    '/assets/icon-512.png'
+];
+
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        caches.open(CACHE_NAME).then((cache) => {
+            return cache.addAll(urlsToCache);
+        })
+    );
+});
+
+self.addEventListener('fetch', (event) => {
+    event.respondWith(
+        caches.match(event.request).then((response) => {
+            return response || fetch(event.request);
+        })
+    );
+});

styles.py

@@ -1,4 +1,3 @@
-
 def get_css_styles():
     return """
         .dog-info-card {
@@ -15,7 +14,7 @@ def get_css_styles():
         .dog-info-card:hover {
             box-shadow: 0 4px 16px rgba(0,0,0,0.12);
         }
-        .dog-info-card:before {  
+        .dog-info-card:before {
             content: '';
             position: absolute;
             left: 0;
@@ -840,15 +839,15 @@ def get_css_styles():
             background: #e9ecef;
             border-radius: 2px;
         }
-        .level-indicator.low .bar:nth-child(1) { 
-            background: #4CAF50; 
+        .level-indicator.low .bar:nth-child(1) {
+            background: #4CAF50;
         }
         .level-indicator.medium .bar:nth-child(1),
-        .level-indicator.medium .bar:nth-child(2) { 
-            background: #FFA726; 
+        .level-indicator.medium .bar:nth-child(2) {
+            background: #FFA726;
         }
-        .level-indicator.high .bar { 
-            background: #EF5350; 
+        .level-indicator.high .bar {
+            background: #EF5350;
         }
         .feature-list, .health-list, .screening-list {
             list-style: none;
@@ -1071,24 +1070,52 @@ def get_css_styles():
         }
 
         @media (max-width: 768px) {
-            /* 在小螢幕上改為單列顯示 */
-            .health-grid, .noise-grid {
-                grid-template-columns: 1fr;
+            .info-cards {
+                grid-template-columns: 1fr !important;  /* 在手機上改為單列 */
+                gap: 12px !important;
+                padding: 10px !important;
+                width: 100% !important;
+                box-sizing: border-box !important;
+                min-height: auto !important;  /* 在手機上移除最小高度限制 */
+                height: auto !important;      /* 允許高度自適應 */
+                padding: 12px !important;     /* 稍微減少填充 */
             }
-
-            /* 減少內邊距 */
-            .health-section, .noise-section {
-                padding: 16px;
+            
+            .info-card {
+                width: 100% !important;
+                margin: 0 !important;
+                padding: 12px !important;
+                min-height: auto !important;  /* 移除最小高度限制 */
+                height: auto !important;      /* 允許高度自適應 */
+                overflow: visible !important; /* 確保內容不被切斷 */
             }
 
-            /* 調整字體大小 */
-            .section-header {
-                font-size: 1rem;
+            .info-card .tooltip {
+                flex-wrap: wrap !important;  /* 在手機版允許換行 */
             }
-
-            /* 調整項目內邊距 */
-            .health-item, .noise-item {
-                padding: 10px 14px;
+            .info-card span {
+                display: block !important;  /* 確保文字完整顯示 */
+                overflow: visible !important;
+            }
+            
+            .tooltip {
+                width: 100% !important;
+                display: flex !important;
+                align-items: center !important;
+                gap: 8px !important;
+            }
+            
+            .tooltip-text {
+                left: auto !important;
+                right: 0 !important;
+                width: 200px !important;
+            }
+            
+            /* 確保所有文字可見 */
+            .label, .value {
+                overflow: visible !important;
+                white-space: normal !important;
+                word-wrap: break-word !important;
             }
         }
 
@@ -1153,7 +1180,56 @@ def get_css_styles():
 
         .section-header h3 .tooltip .tooltip-text::after {
             right: calc(100% - 2px); /* 向右移動箭頭 */
-            
+
+        }
+
+        .analysis-container {
+            padding: 20px;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        .metrics-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin-top: 20px;
         }
-    
-        """
+
+        .metric-card {
+            padding: 20px;
+            background: #f8fafc;
+            border-radius: 8px;
+            text-align: center;
+        }
+
+        .metric-value {
+            font-size: 24px;
+            font-weight: bold;
+            color: #2563eb;
+        }
+
+        .metric-details {
+            padding: 15px;
+            background: #f8fafc;
+            border-radius: 8px;
+            margin: 10px 0;
+        }
+
+        .metric-details h3 {
+            color: #1e40af;
+            margin-bottom: 10px;
+        }
+
+        .metric-details ul {
+            list-style-type: none;
+            padding: 0;
+        }
+
+        .metric-details li {
+            margin: 5px 0;
+            color: #4b5563;
+        }
+
+        """