2025-08-01 08:54 🐛

app.py

@@ -427,13 +427,13 @@ def predict(image: Image.Image, variant_dataset_metric: str):
     complete_zero_map = strucrual_zero_map + sampling_zero_map
 
     # Normalize maps for display purposes
-    # def normalize_map(x: np.ndarray) -> np.ndarray:
-    #     """ Normalize the map to [0, 1] range for visualization. """
-    #     x_min = np.min(x)
-    #     x_max = np.max(x)
-    #     if x_max - x_min < EPS:
-    #         return np.zeros_like(x)
-    #     return (x - x_min) / (x_max - x_min + EPS)
+    def normalize_map(x: np.ndarray) -> np.ndarray:
+        """ Normalize the map to [0, 1] range for visualization. """
+        x_min = np.min(x)
+        x_max = np.max(x)
+        if x_max - x_min < EPS:
+            return np.zeros_like(x)
+        return (x - x_min) / (x_max - x_min + EPS)
     
     # strucrual_zero_map = normalize_map(strucrual_zero_map)
     # sampling_zero_map = normalize_map(sampling_zero_map)
@@ -442,8 +442,8 @@ def predict(image: Image.Image, variant_dataset_metric: str):
     # complete_zero_map = normalize_map(complete_zero_map)
     
     # Apply a colormap for better visualization
-    # Options: 'viridis' (recommended), 'plasma', 'hot', 'inferno', 'jet'
-    colormap = cm.get_cmap("viridis")
+    # Options: 'viridis', 'plasma', 'hot', 'inferno', 'jet' (recommended)
+    colormap = cm.get_cmap("jet")
 
     # The colormap returns values in [0,1]. Scale to [0,255] and convert to uint8.
     den_map = (colormap(den_map) * 255).astype(np.uint8)
@@ -536,9 +536,108 @@ select option[value*="━━━━━━"] {
 
 /* 整体主题美化 */
 .gradio-container {
-    max-width: 1400px !important;
+    max-width: 1600px !important;
     margin: 0 auto !important;
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
+    min-height: 100vh !important;
+    padding: 20px !important;
+}
+
+/* 响应式布局 - 自动调整列宽 */
+@media (max-width: 1400px) {
+    .gradio-container {
+        max-width: 1200px !important;
+        padding: 18px !important;
+    }
+}
+
+@media (max-width: 1200px) {
+    .gradio-container {
+        max-width: 100% !important;
+        padding: 16px !important;
+    }
+    
+    /* 在中等屏幕上，将第二行改为垂直布局 */
+    .gr-row:nth-of-type(2) {
+        flex-direction: column !important;
+    }
+    
+    .gr-row:nth-of-type(2) .gr-column {
+        width: 100% !important;
+        margin-bottom: 20px !important;
+    }
+}
+
+@media (max-width: 900px) {
+    /* 在小屏幕上，将第三行也改为垂直布局 */
+    .gr-row:nth-of-type(3) {
+        flex-direction: column !important;
+    }
+    
+    .gr-row:nth-of-type(3) .gr-column {
+        width: 100% !important;
+        margin-bottom: 20px !important;
+    }
+    
+    /* Zero Analysis 在小屏幕上也改为垂直布局 */
+    .gr-group .gr-row {
+        flex-direction: column !important;
+    }
+    
+    .gr-group .gr-row .gr-column {
+        width: 100% !important;
+        margin-bottom: 16px !important;
+    }
+}
+
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 12px !important;
+    }
+    
+    .gr-column {
+        margin-bottom: 16px !important;
+        padding: 0 4px !important;
+    }
+    
+    .gr-markdown h1 {
+        font-size: 2rem !important;
+    }
+    
+    .gr-group {
+        padding: 16px !important;
+    }
+    
+    .gr-button {
+        padding: 12px 24px !important;
+        font-size: 1rem !important;
+    }
+    
+    /* 图像高度在小屏幕上调整 */
+    .gr-image {
+        height: 300px !important;
+    }
+    
+    .zero-analysis-image {
+        height: 300px !important;
+    }
+}
+
+/* 超宽屏幕优化 */
+@media (min-width: 1600px) {
+    .gradio-container {
+        max-width: 1800px !important;
+        padding: 24px !important;
+    }
+    
+    .gr-image {
+        height: 450px !important;
+    }
+    
+    .zero-analysis-image {
+        height: 450px !important;
+    }
 }
 
 /* 标题样式 */
@@ -546,107 +645,219 @@ select option[value*="━━━━━━"] {
     text-align: center !important;
     color: #2563eb !important;
     font-weight: 700 !important;
-    font-size: 2.5rem !important;
+    font-size: 3rem !important;
     margin-bottom: 0.5rem !important;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
     -webkit-background-clip: text !important;
     -webkit-text-fill-color: transparent !important;
+    text-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
 }
 
 /* 副标题样式 */
 .gr-markdown p {
     text-align: center !important;
     color: #6b7280 !important;
-    font-size: 1.1rem !important;
+    font-size: 1.2rem !important;
     margin-bottom: 2rem !important;
+    font-weight: 500 !important;
+}
+
+/* 主要布局组美化 */
+.gr-group {
+    background: rgba(255, 255, 255, 0.9) !important;
+    backdrop-filter: blur(10px) !important;
+    border-radius: 20px !important;
+    padding: 24px !important;
+    margin: 16px 0 !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    transition: all 0.3s ease !important;
+}
+
+.gr-group:hover {
+    transform: translateY(-4px) !important;
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
 }
 
 /* 按钮美化 */
 .gr-button {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
     border: none !important;
-    border-radius: 8px !important;
+    border-radius: 12px !important;
     color: white !important;
     font-weight: 600 !important;
-    font-size: 1rem !important;
-    padding: 12px 24px !important;
+    font-size: 1.1rem !important;
+    padding: 16px 32px !important;
     transition: all 0.3s ease !important;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3) !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
 }
 
 .gr-button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.3) !important;
+    transform: translateY(-3px) !important;
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4) !important;
+    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
 }
 
 /* 输入框样式 */
 .gr-textbox, .gr-dropdown {
-    border-radius: 8px !important;
+    border-radius: 12px !important;
     border: 2px solid #e5e7eb !important;
-    transition: border-color 0.3s ease !important;
+    transition: all 0.3s ease !important;
+    background: rgba(255, 255, 255, 0.8) !important;
+    font-size: 1rem !important;
+    padding: 12px 16px !important;
 }
 
 .gr-textbox:focus, .gr-dropdown:focus {
     border-color: #667eea !important;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
+    background: rgba(255, 255, 255, 1) !important;
 }
 
-/* 图像容器美化 */
+/* 图像容器美化 - 统一尺寸 */
 .gr-image {
-    border-radius: 12px !important;
+    border-radius: 16px !important;
     overflow: hidden !important;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
     transition: all 0.3s ease !important;
+    background: white !important;
+    height: 400px !important;
+    width: 100% !important;
 }
 
 .gr-image:hover {
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
     transform: translateY(-2px) !important;
 }
 
+/* 确保第二行组件等高 */
+.gr-row:nth-of-type(2) .gr-group {
+    height: auto !important;
+    min-height: 180px !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+.gr-row:nth-of-type(2) .gr-group > * {
+    flex: 1 !important;
+}
+
+/* 确保第二行的文本框具有相同的高度 */
+.gr-row:nth-of-type(2) .gr-textbox {
+    min-height: 80px !important;
+    display: flex !important;
+    align-items: center !important;
+}
+
+/* 确保第二行下拉菜单区域等高 */
+.gr-row:nth-of-type(2) .gr-dropdown {
+    min-height: 60px !important;
+}
+
 /* 列间距优化 */
 .gr-column {
     padding: 0 8px !important;
+    margin-bottom: 16px !important;
+}
+
+/* 第二行特殊布局调整 */
+.gr-row:nth-of-type(2) .gr-column:first-child {
+    padding-right: 12px !important;
+}
+
+.gr-row:nth-of-type(2) .gr-column:last-child {
+    padding-left: 12px !important;
 }
 
 /* 标签美化 */
 .gr-label {
-    font-weight: 600 !important;
+    font-weight: 700 !important;
     color: #374151 !important;
-    margin-bottom: 8px !important;
+    margin-bottom: 12px !important;
+    font-size: 1.1rem !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
 }
 
 /* 模型状态框特殊样式 */
 .gr-textbox[data-testid*="model-status"] {
-    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
+    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
     font-family: 'Monaco', 'Menlo', monospace !important;
-    font-size: 0.9rem !important;
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+    border: 2px solid #10b981 !important;
+}
+
+/* Zero Analysis 特殊布局 */
+.gr-row:has(.gr-image[label*="Zero"]) {
+    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.95) 100%) !important;
+    border-radius: 20px !important;
+    padding: 24px !important;
+    margin: 20px 0 !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Zero Analysis 图像特殊样式 - 统一尺寸 */
+.zero-analysis-image {
+    border: 3px solid transparent !important;
+    background: linear-gradient(white, white) padding-box, 
+                linear-gradient(135deg, #667eea, #764ba2) border-box !important;
+    border-radius: 16px !important;
+    transition: all 0.3s ease !important;
+    height: 400px !important;
+    width: 100% !important;
+}
+
+.zero-analysis-image:hover {
+    transform: scale(1.02) !important;
+    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.2) !important;
+}
+
+/* 确保所有行的组件等高 */
+.gr-row .gr-group {
+    min-height: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+.gr-row .gr-column {
+    height: 100% !important;
+}
+
+/* 统计信息卡片美化 */
+.gr-textbox[label*="Count"] {
+    background: linear-gradient(135deg, #ecfcff 0%, #cffafe 100%) !important;
+    border: 2px solid #06b6d4 !important;
+    font-size: 1.2rem !important;
+    font-weight: 700 !important;
+    text-align: center !important;
+    color: #0e7490 !important;
 }
 
 /* 示例区域美化 */
 .gr-examples {
-    background: #f9fafb !important;
-    border-radius: 12px !important;
-    padding: 20px !important;
-    margin-top: 24px !important;
-    border: 1px solid #e5e7eb !important;
+    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.9) 100%) !important;
+    backdrop-filter: blur(10px) !important;
+    border-radius: 20px !important;
+    padding: 30px !important;
+    margin-top: 30px !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
 }
 
-/* 响应式设计 */
-@media (max-width: 768px) {
-    .gradio-container {
-        padding: 16px !important;
-    }
-    
-    .gr-column {
-        margin-bottom: 16px !important;
-    }
-    
-    .gr-markdown h1 {
-        font-size: 2rem !important;
-    }
+/* Accordion 美化 */
+.gr-accordion {
+    background: rgba(255, 255, 255, 0.8) !important;
+    border-radius: 16px !important;
+    margin: 16px 0 !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
 }
 
+/* 响应式设计 - 移除旧的媒体查询，已在上方重新定义 */
+
 /* 加载动画 */
 @keyframes pulse {
     0%, 100% { opacity: 1; }
@@ -691,25 +902,43 @@ with gr.Blocks(css=css, theme=gr.themes.Soft(), title="ZIP Crowd Counting") as d
         Choose from different model variants: **ZIP-B** (Base), **ZIP-S** (Small), **ZIP-T** (Tiny), **ZIP-N** (Nano), **ZIP-P** (Pico)
         """)
 
+    # 第二行：模型配置区域（2/3宽度）和预测结果（1/3宽度）
     with gr.Row():
-        with gr.Column(scale=1):
-            # 模型选择区域
+        with gr.Column(scale=2):
             with gr.Group():
                 gr.Markdown("### 🤖 Model Configuration")
-                model_dropdown = gr.Dropdown(
-                    choices=pretrained_models,
-                    value="ZIP-B @ NWPU-Crowd @ MAE",
-                    label="🎛️ Select Model & Dataset",
-                    info="Choose model variant, dataset, and evaluation metric"
-                )
-                model_status = gr.Textbox(
-                    label="📊 Model Status",
-                    value="🔄 No model loaded",
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        model_dropdown = gr.Dropdown(
+                            choices=pretrained_models,
+                            value="ZIP-B @ NWPU-Crowd @ MAE",
+                            label="🎛️ Select Model & Dataset",
+                            info="Choose model variant, dataset, and evaluation metric"
+                        )
+                    
+                    with gr.Column(scale=1):
+                        model_status = gr.Textbox(
+                            label="📊 Model Status",
+                            value="🔄 No model loaded",
+                            interactive=False,
+                            elem_classes=["status-display"],
+                            lines=3
+                        )
+        
+        with gr.Column(scale=1):
+            with gr.Group():
+                gr.Markdown("### 🧙 Predicted Count")
+                output_text = gr.Textbox(
+                    label="Result",
+                    value="",
                     interactive=False,
-                    elem_classes=["status-display"]
+                    info="Total number of people detected",
+                    lines=3
                 )
-            
-            # 图像输入区域
+
+    # 第三行：主要图像（输入图像、密度图、Lambda图）
+    with gr.Row():
+        with gr.Column(scale=1):
             with gr.Group():
                 gr.Markdown("### 📸 Image Input")
                 input_img = gr.Image(
@@ -723,29 +952,53 @@ with gr.Blocks(css=css, theme=gr.themes.Soft(), title="ZIP Crowd Counting") as d
                     variant="primary",
                     size="lg"
                 )
-    
+        
         with gr.Column(scale=1):
             with gr.Group():
                 gr.Markdown("### 📊 Main Results")
-                output_den_map = gr.Image(label="🎯 Predicted Density Map", type="pil")
-                output_text = gr.Textbox(
-                    label="👥 Predicted Count",
-                    info="Total number of people detected"
+                output_den_map = gr.Image(
+                    label="🎯 Predicted Density Map", 
+                    type="pil", 
+                    height=400
                 )
-            
+        
         with gr.Column(scale=1):
             with gr.Group():
                 gr.Markdown("### 🔥 Hotspots")
-                output_lambda_map = gr.Image(label="📈 Lambda Map", type="pil")
+                output_lambda_map = gr.Image(
+                    label="📈 Lambda Map", 
+                    type="pil", 
+                    height=400
+                )
     
-    # Zero Analysis section - 横向排列的三个图像
-    with gr.Row():
-        with gr.Group():
-            gr.Markdown("### 🔍 Zero Analysis")
-            with gr.Row():
-                output_structural_zero_map = gr.Image(label="🏗️ Structural Zero Map", type="pil")
-                output_sampling_zero_map = gr.Image(label="📊 Sampling Zero Map", type="pil")
-                output_complete_zero_map = gr.Image(label="🎯 Complete Zero Map", type="pil")
+    # 第四行：Zero Analysis - 全宽，内部三列等宽
+    with gr.Group():
+        gr.Markdown("### 🔍 Zero Analysis")
+        gr.Markdown("*Explore different types of zero predictions in crowd analysis*")
+        with gr.Row():
+            with gr.Column(scale=1):
+                output_structural_zero_map = gr.Image(
+                    label="🏗️ Structural Zero Map", 
+                    type="pil", 
+                    height=400,
+                    elem_classes=["zero-analysis-image"]
+                )
+            
+            with gr.Column(scale=1):
+                output_sampling_zero_map = gr.Image(
+                    label="📊 Sampling Zero Map", 
+                    type="pil", 
+                    height=400,
+                    elem_classes=["zero-analysis-image"]
+                )
+            
+            with gr.Column(scale=1):
+                output_complete_zero_map = gr.Image(
+                    label="👺 Complete Zero Map", 
+                    type="pil", 
+                    height=400,
+                    elem_classes=["zero-analysis-image"]
+                )
 
     # 当模型变化时，自动更新模型
     def on_model_change(variant_dataset_metric):
@@ -806,12 +1059,12 @@ with gr.Blocks(css=css, theme=gr.themes.Soft(), title="ZIP Crowd Counting") as d
         
         **📊 Main Results:**
         - **🎯 Density Map**: Shows where people are located with color intensity, modeled by (1-π) * λ
-        - **� Predicted Count**: Total number of people detected in the image
+        - **🧙 Predicted Count**: Total number of people detected in the image
         
         **🔍 Zero Analysis:**
         - **🏗️ Structural Zero Map**: Indicates regions that structurally cannot contain head annotations (e.g., walls, sky, torso, or background). These are governed by the π head, which estimates the probability that a region never contains people.
         - **📊 Sampling Zero Map**: Shows areas where people could be present but happen not to appear in the current image. These zeros are modeled by (1-π) * exp(-λ), where the expected count λ is near zero.
-        - **🎯 Complete Zero Map**: A combined visualization of zero probabilities, capturing both structural and sampling zeros. This map reflects overall non-crowd likelihood per region.
+        - **👺 Complete Zero Map**: A combined visualization of zero probabilities, capturing both structural and sampling zeros. This map reflects overall non-crowd likelihood per region.
         
         **🔥 Hotspots:**
         - **📈 Lambda Map**: Highlights areas with high expected crowd density. Each value represents the expected number of people in that region, modeled by the Poisson intensity (λ). This map focuses on *how many* people are likely to be present, **WITHOUT** assuming people could appear there. ⚠️ Lambda Map **NEEDS** to be combined with Structural Zero Map by (1-π) * λ to produce the final density map.