2025-07-31 22:29 🚀

app.py

@@ -306,14 +306,14 @@ def predict(image: Image.Image, variant_dataset_metric: str):
     
     # 如果选择的是分割线，返回错误信息
     if "━━━━━━" in variant_dataset_metric:
-        return image, None, None, "Please select a valid model configuration", None, None, None
+        return image, None, None, "⚠️ Please select a valid model configuration", None, None, None
     
     # 确保模型正确加载
     update_model_if_needed(variant_dataset_metric)
     
     parts = variant_dataset_metric.split(" @ ")
     if len(parts) != 3:
-        return image, None, None, "Invalid model configuration format", None, None, None
+        return image, None, None, "❌ Invalid model configuration format", None, None, None
         
     variant, dataset, metric = parts[0], parts[1], parts[2].lower()
 
@@ -326,7 +326,7 @@ def predict(image: Image.Image, variant_dataset_metric: str):
     elif dataset == "NWPU-Crowd":
         dataset_name = "nwpu"
     else:
-        return image, None, None, f"Unknown dataset: {dataset}", None, None, None
+        return image, None, None, f"❌ Unknown dataset: {dataset}", None, None, None
 
     if not hasattr(loaded_model, "input_size"):
         if dataset_name == "sha":
@@ -363,7 +363,7 @@ def predict(image: Image.Image, variant_dataset_metric: str):
         image_height, image_width = new_height, new_width
     
     with torch.no_grad():
-        if hasattr(loaded_model, "num_vpt") and loaded_model.num_vpt > 0:  # For ViT models, use sliding window prediction
+        if hasattr(loaded_model, "num_vpt") and loaded_model.num_vpt is not None and loaded_model.num_vpt > 0:  # For ViT models, use sliding window prediction
             # For ViT models with VPT
             pi_map, lambda_map = _sliding_window_predict(
                 model=loaded_model,
@@ -458,7 +458,18 @@ def predict(image: Image.Image, variant_dataset_metric: str):
     lambda_map = Image.blend(image_rgba, lambda_map, alpha=alpha)
     complete_zero_map = Image.blend(image_rgba, complete_zero_map, alpha=alpha)
     
-    return image, den_map, lambda_map, round(count, 2), strucrual_zero_map, sampling_zero_map, complete_zero_map
+    # 格式化计数显示
+    count_display = f"👥 {round(count, 2)} people detected"
+    if count < 1:
+        count_display = "👤 Less than 1 person detected"
+    elif count == 1:
+        count_display = "👤 1 person detected"
+    elif count < 10:
+        count_display = f"👥 {round(count, 1)} people detected"
+    else:
+        count_display = f"👥 {round(count)} people detected"
+    
+    return image, den_map, lambda_map, count_display, strucrual_zero_map, sampling_zero_map, complete_zero_map
 
 
 # -----------------------------
@@ -512,45 +523,228 @@ select option[value*="━━━━━━"] {
     text-align: center !important;
     opacity: 0.6 !important;
 }
+
+/* 整体主题美化 */
+.gradio-container {
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+}
+
+/* 标题样式 */
+.gr-markdown h1 {
+    text-align: center !important;
+    color: #2563eb !important;
+    font-weight: 700 !important;
+    font-size: 2.5rem !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;
+}
+
+/* 副标题样式 */
+.gr-markdown p {
+    text-align: center !important;
+    color: #6b7280 !important;
+    font-size: 1.1rem !important;
+    margin-bottom: 2rem !important;
+}
+
+/* 按钮美化 */
+.gr-button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    border-radius: 8px !important;
+    color: white !important;
+    font-weight: 600 !important;
+    font-size: 1rem !important;
+    padding: 12px 24px !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
+}
+
+.gr-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.3) !important;
+}
+
+/* 输入框样式 */
+.gr-textbox, .gr-dropdown {
+    border-radius: 8px !important;
+    border: 2px solid #e5e7eb !important;
+    transition: border-color 0.3s ease !important;
+}
+
+.gr-textbox:focus, .gr-dropdown:focus {
+    border-color: #667eea !important;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+}
+
+/* 图像容器美化 */
+.gr-image {
+    border-radius: 12px !important;
+    overflow: hidden !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
+    transition: all 0.3s ease !important;
+}
+
+.gr-image:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
+    transform: translateY(-2px) !important;
+}
+
+/* 列间距优化 */
+.gr-column {
+    padding: 0 8px !important;
+}
+
+/* 标签美化 */
+.gr-label {
+    font-weight: 600 !important;
+    color: #374151 !important;
+    margin-bottom: 8px !important;
+}
+
+/* 模型状态框特殊样式 */
+.gr-textbox[data-testid*="model-status"] {
+    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
+    font-family: 'Monaco', 'Menlo', monospace !important;
+    font-size: 0.9rem !important;
+}
+
+/* 示例区域美化 */
+.gr-examples {
+    background: #f9fafb !important;
+    border-radius: 12px !important;
+    padding: 20px !important;
+    margin-top: 24px !important;
+    border: 1px solid #e5e7eb !important;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 16px !important;
+    }
+    
+    .gr-column {
+        margin-bottom: 16px !important;
+    }
+    
+    .gr-markdown h1 {
+        font-size: 2rem !important;
+    }
+}
+
+/* 加载动画 */
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+.gr-loading .gr-image {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
+}
+
+/* 成功状态指示 */
+.status-success {
+    color: #059669 !important;
+    background-color: #d1fae5 !important;
+    border: 1px solid #a7f3d0 !important;
+}
+
+/* 错误状态指示 */
+.status-error {
+    color: #dc2626 !important;
+    background-color: #fee2e2 !important;
+    border: 1px solid #fecaca !important;
+}
 """
 
-with gr.Blocks(css=css) as demo:
-    gr.Markdown("# Crowd Counting by ZIP")
-    gr.Markdown("Upload an image or select an example below to see the predicted crowd density map and total count.")
+with gr.Blocks(css=css, theme=gr.themes.Soft(), title="ZIP Crowd Counting") as demo:
+    gr.Markdown("""
+    # 🎯 Crowd Counting by ZIP
+    ### Upload an image and get precise crowd density predictions with advanced zero-inflated models
+    """)
+    
+    # 添加信息面板
+    with gr.Accordion("ℹ️ About ZIP Models", open=False):
+        gr.Markdown("""
+        **ZIP (Zero-Inflated Poisson)** models are designed to handle crowd counting with:
+        - **Structural Zeros**: Areas where people cannot exist (walls, sky, etc.)
+        - **Sampling Zeros**: Areas where people could exist but don't
+        - **Advanced Metrics**: MAE (Mean Absolute Error) and NAE (Normalized Absolute Error)
+        
+        Choose from different model variants: **ZIP-B** (Base), **ZIP-S** (Small), **ZIP-T** (Tiny), **ZIP-N** (Nano), **ZIP-P** (Pico)
+        """)
 
     with gr.Row():
-        with gr.Column():
-            # Dropdown for model variant
-            model_dropdown = gr.Dropdown(
-                choices=pretrained_models,
-                value="ZIP-B @ NWPU-Crowd @ MAE",
-                label="Select a pretrained model"
-            )
-            model_status = gr.Textbox(
-                label="Model Status",
-                value="No model loaded",
-                interactive=False
-            )
-
-            input_img = gr.Image(label="Input Image", sources=["upload", "clipboard"], type="pil")
-            submit_btn = gr.Button("Predict")
+        with gr.Column(scale=1):
+            # 模型选择区域
+            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",
+                    interactive=False,
+                    elem_classes=["status-display"]
+                )
+            
+            # 图像输入区域
+            with gr.Group():
+                gr.Markdown("### 📸 Image Input")
+                input_img = gr.Image(
+                    label="🖼️ Upload Image", 
+                    sources=["upload", "clipboard"], 
+                    type="pil",
+                    height=400
+                )
+                submit_btn = gr.Button(
+                    "🚀 Analyze Crowd", 
+                    variant="primary",
+                    size="lg"
+                )
     
-        with gr.Column():
-            output_den_map = gr.Image(label="Predicted Density Map", type="pil")
-            output_lambda_map = gr.Image(label="Lambda Map", type="pil")
-            output_text = gr.Textbox(label="Predicted Count")
+        with gr.Column(scale=1):
+            with gr.Group():
+                gr.Markdown("### 📊 Main Results")
+                output_den_map = gr.Image(label="🎯 Predicted Density Map", type="pil")
+                output_lambda_map = gr.Image(label="📈 Lambda Map", type="pil")
+                output_text = gr.Textbox(
+                    label="👥 Predicted Count",
+                    info="Total number of people detected"
+                )
         
-        with gr.Column():
-            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")
+        with gr.Column(scale=1):
+            with gr.Group():
+                gr.Markdown("### 🔍 Zero Analysis")
+                output_structural_zero_map = gr.Image(label="🏗️ Structural Zero Map", type="pil")
+                output_sampling_zero_map = gr.Image(label="📊 Sampling Zero Map", type="pil")
+        
+        with gr.Column(scale=1):
+            with gr.Group():
+                gr.Markdown("### 📈 Combined Analysis")
+                output_complete_zero_map = gr.Image(label="🎯 Complete Zero Map", type="pil")
 
     # 当模型变化时，自动更新模型
     def on_model_change(variant_dataset_metric):
         # 如果选择的是分割线，保持当前选择不变
         if "━━━━━━" in variant_dataset_metric:
-            return "Please select a valid model configuration"
-        return update_model_if_needed(variant_dataset_metric)
+            return "⚠️ Please select a valid model configuration"
+        result = update_model_if_needed(variant_dataset_metric)
+        if "Model loaded:" in result:
+            return f"✅ {result}"
+        elif "Model already loaded:" in result:
+            return f"🔄 {result}"
+        else:
+            return f"❌ {result}"
     
     model_dropdown.change(
         fn=on_model_change,
@@ -560,7 +754,7 @@ with gr.Blocks(css=css) as demo:
 
     # 页面加载时自动加载默认模型
     demo.load(
-        fn=lambda: update_model_if_needed("ZIP-B @ NWPU-Crowd @ MAE"),
+        fn=lambda: f"🔄 {update_model_if_needed('ZIP-B @ NWPU-Crowd @ MAE')}",
         outputs=[model_status]
     )
 
@@ -570,23 +764,62 @@ with gr.Blocks(css=css) as demo:
         outputs=[input_img, output_den_map, output_lambda_map, output_text, output_structural_zero_map, output_sampling_zero_map, output_complete_zero_map]
     )
 
-    gr.Examples(
-        examples=[
-            ["example1.jpg"],
-            ["example2.jpg"],
-            ["example3.jpg"],
-            ["example4.jpg"],
-            ["example5.jpg"],
-            ["example6.jpg"],
-            ["example7.jpg"],
-            ["example8.jpg"],
-            ["example9.jpg"],
-            ["example10.jpg"],
-            ["example11.jpg"],
-            ["example12.jpg"]
-        ],
-        inputs=input_img,
-        label="Try an example"
-    )
-
-demo.launch()
+    # 美化示例区域
+    with gr.Accordion("🖼️ Try Example Images", open=True):
+        gr.Markdown("**Click on any example below to test the model:**")
+        gr.Examples(
+            examples=[
+                ["example1.jpg"], ["example2.jpg"], # ["example3.jpg"], ["example4.jpg"],
+                ["example5.jpg"], ["example6.jpg"], ["example7.jpg"], ["example8.jpg"],
+                ["example9.jpg"], ["example10.jpg"], ["example11.jpg"], ["example12.jpg"]
+            ],
+            inputs=input_img,
+            label="📚 Example Gallery",
+            examples_per_page=6
+        )
+    
+    # 添加使用说明
+    with gr.Accordion("📖 How to Use", open=False):
+        gr.Markdown("""
+        ### Step-by-step Guide:
+        
+        1. **🎛️ Select Model**: Choose your preferred model variant, dataset, and metric from the dropdown
+        2. **📸 Upload Image**: Click the image area to upload your crowd photo or use clipboard
+        3. **🚀 Analyze**: Click the "Analyze Crowd" button to start processing
+        4. **📊 View Results**: Examine the density maps and crowd count in the output panels
+        
+        ### Understanding the Outputs:
+        
+        - **🎯 Density Map**: Shows where people are located with color intensity
+        - **📈 Lambda Map**: Represents the expected count per pixel
+        - **🏗️ Structural Zero Map**: Areas where people cannot exist (buildings, sky)
+        - **📊 Sampling Zero Map**: Areas where people could be but aren't
+        - **🎯 Complete Zero Map**: Combined zero probability map
+        """)
+    
+    # 添加技术信息
+    with gr.Accordion("🔬 Technical Details", open=False):
+        gr.Markdown("""
+        ### Model Variants:
+        - **ZIP-B**: Base model with best performance
+        - **ZIP-S**: Smaller model for faster inference
+        - **ZIP-T**: Tiny model for resource-constrained environments
+        - **ZIP-N**: Nano model for mobile applications
+        - **ZIP-P**: Pico model for edge devices
+        
+        ### Datasets:
+        - **ShanghaiTech A/B**: Dense crowd scenes
+        - **UCF-QNRF**: Ultra high-resolution crowd images
+        - **NWPU-Crowd**: Large-scale crowd counting dataset
+        
+        ### Metrics:
+        - **MAE**: Mean Absolute Error - average counting error
+        - **NAE**: Normalized Absolute Error - relative counting error
+        """)
+
+demo.launch(
+    server_name="0.0.0.0",
+    server_port=7860,
+    show_api=False,
+    share=False
+)