Update app.py

app.py

@@ -17,42 +17,45 @@ import base64
 # GPU/CPU设置
 device = torch.device('cuda:0' if torch.cuda.is_available() else 'cpu')
 
+# CSS样式设置
 # CSS样式设置
 custom_css = """
     :root {
         --primary-color: #2196F3;
         --secondary-color: #21CBF3;
         --background-color: #f6f8fa;
-        --text-color: #333;
+        --text-color: #000000;
         --border-radius: 10px;
-        --glass-bg: rgba(255, 255, 255, 0.25);
-        --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+        --glass-bg: rgba(255, 255, 255, 0.95);
+        --shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
+        --print-border: 2px solid #000000;
+        --print-bg: #ffffff;
     }
 
     .gradio-container {
-        background: linear-gradient(135deg, var(--background-color), #ffffff);
+        background: var(--print-bg);
         max-width: 1400px !important;
         margin: auto !important;
-        backdrop-filter: blur(10px);
+        color: var(--text-color);
+        font-weight: 500;
     }
 
     .output-image, .input-image {
         border-radius: var(--border-radius);
-        box-shadow: var(--shadow);
+        border: var(--print-border);
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        backdrop-filter: blur(10px);
-        border: 1px solid rgba(255, 255, 255, 0.18);
+        background: var(--print-bg);
     }
 
     .output-image:hover, .input-image:hover {
         transform: scale(1.02) translateY(-2px);
-        box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
+        box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.3);
     }
 
     .custom-button {
-        background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
-        border: none;
-        color: white;
+        background: var(--print-bg);
+        border: var(--print-border);
+        color: var(--text-color);
         padding: 12px 24px;
         border-radius: var(--border-radius);
         cursor: pointer;
@@ -60,42 +63,41 @@ custom_css = """
         font-weight: bold;
         text-transform: uppercase;
         letter-spacing: 1px;
-        box-shadow: var(--shadow);
     }
 
     .custom-button:hover {
-        transform: translateY(-3px);
-        box-shadow: 0 12px 30px rgba(33, 150, 243, 0.4);
+        transform: translateY(-2px);
+        background: #f0f0f0;
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
     }
 
     .advanced-controls {
-        background: var(--glass-bg);
-        border-radius: 20px;
+        background: var(--print-bg);
+        border-radius: 15px;
         padding: 25px;
-        box-shadow: var(--shadow);
-        backdrop-filter: blur(10px);
-        border: 1px solid rgba(255, 255, 255, 0.18);
+        border: var(--print-border);
+        color: var(--text-color);
     }
 
     .result-container {
-        background: var(--glass-bg);
-        border-radius: 20px;
+        background: var(--print-bg);
+        border-radius: 15px;
         padding: 20px;
-        backdrop-filter: blur(15px);
-        border: 1px solid rgba(255, 255, 255, 0.18);
-        box-shadow: var(--shadow);
+        border: var(--print-border);
+        color: var(--text-color);
     }
 
     .interactive-viz {
         border-radius: 15px;
         overflow: hidden;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        box-shadow: var(--shadow);
+        border: var(--print-border);
+        background: var(--print-bg);
     }
 
     .interactive-viz:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 15px 35px rgba(0,0,0,0.15);
+        transform: translateY(-3px);
+        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
     }
 
     .statistics-container {
@@ -106,35 +108,89 @@ custom_css = """
     }
 
     .statistic-card {
-        background: var(--glass-bg);
+        background: var(--print-bg);
         padding: 20px;
         border-radius: var(--border-radius);
         text-align: center;
-        box-shadow: var(--shadow);
-        backdrop-filter: blur(10px);
-        border: 1px solid rgba(255, 255, 255, 0.18);
+        border: var(--print-border);
         transition: all 0.3s ease;
+        color: var(--text-color);
+        font-weight: bold;
     }
 
     .statistic-card:hover {
         transform: translateY(-2px);
-        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+        box-shadow: 0 6px 16px rgba(0,0,0,0.15);
+    }
+
+    .statistic-card h4 {
+        color: var(--text-color);
+        font-weight: bold;
+        margin-bottom: 10px;
+        font-size: 14px;
+    }
+
+    .statistic-card p {
+        color: var(--text-color);
+        font-weight: bold;
+        font-size: 16px;
+        margin: 0;
     }
 
     .progress-container {
-        background: var(--glass-bg);
+        background: var(--print-bg);
         border-radius: 10px;
         padding: 15px;
         margin: 10px 0;
-        backdrop-filter: blur(10px);
+        border: var(--print-border);
+        color: var(--text-color);
     }
 
     .comparison-slider {
-        background: var(--glass-bg);
+        background: var(--print-bg);
         border-radius: 15px;
         padding: 20px;
-        backdrop-filter: blur(10px);
-        border: 1px solid rgba(255, 255, 255, 0.18);
+        border: var(--print-border);
+        color: var(--text-color);
+    }
+
+    /* 打印优化 */
+    @media print {
+        .gradio-container {
+            background: white !important;
+            color: black !important;
+        }
+        
+        .output-image, .input-image, .advanced-controls, 
+        .result-container, .interactive-viz, .statistic-card,
+        .progress-container, .comparison-slider {
+            background: white !important;
+            border: 2px solid black !important;
+            color: black !important;
+            box-shadow: none !important;
+        }
+        
+        .custom-button {
+            background: white !important;
+            border: 2px solid black !important;
+            color: black !important;
+        }
+        
+        .statistic-card h4, .statistic-card p {
+            color: black !important;
+            font-weight: bold !important;
+        }
+    }
+
+    /* 高对比度文本 */
+    h1, h2, h3, h4, h5, h6, p, span, div, label {
+        color: var(--text-color) !important;
+        font-weight: 500 !important;
+    }
+
+    .gr-textbox, .gr-dropdown, .gr-radio, .gr-checkbox {
+        color: var(--text-color) !important;
+        border: 1px solid #000000 !important;
     }
 """
 class ImageProcessor:
@@ -189,49 +245,102 @@ class ImageProcessor:
         return image
 
     def generate_analysis_plots(self, saliency_map):
-        """生成分析图表"""
-        plt.style.use('seaborn-v0_8')
+        """生成分析图表 - 使用原始显著性图而非二值化"""
+        plt.style.use('default')  # 使用默认样式以确保打印清晰
+        
+        # 设置全局字体和颜色
+        plt.rcParams.update({
+            'font.size': 12,
+            'font.weight': 'bold',
+            'axes.labelweight': 'bold',
+            'axes.titleweight': 'bold',
+            'figure.facecolor': 'white',
+            'axes.facecolor': 'white',
+            'text.color': 'black',
+            'axes.labelcolor': 'black',
+            'axes.edgecolor': 'black',
+            'xtick.color': 'black',
+            'ytick.color': 'black'
+        })
+        
         fig, ((ax1, ax2), (ax3, ax4)) = plt.subplots(2, 2, figsize=(12, 8))
-        # 直方图
-        ax1.hist(saliency_map.flatten(), bins=50, color='#2196F3', alpha=0.7, edgecolor='black')
-        ax1.set_title('Histogram of Saliency Distribution', fontsize=12, pad=15)
-        ax1.set_xlabel('Saliency Value', fontsize=10)
-        ax1.set_ylabel('Frequency', fontsize=10)
-        ax1.grid(True, alpha=0.3)
+        fig.patch.set_facecolor('white')
+        
+        # 直方图 - 使用原始显著性值
+        ax1.hist(saliency_map.flatten(), bins=50, color='black', alpha=0.7, 
+                edgecolor='black', linewidth=1.5)
+        ax1.set_title('Histogram of Saliency Distribution', fontsize=14, 
+                     fontweight='bold', color='black', pad=15)
+        ax1.set_xlabel('Saliency Value', fontsize=12, fontweight='bold', color='black')
+        ax1.set_ylabel('Frequency', fontsize=12, fontweight='bold', color='black')
+        ax1.grid(True, alpha=0.5, color='gray', linewidth=1)
+        ax1.set_facecolor('white')
+        
         # 添加统计信息
         mean_val = np.mean(saliency_map)
         median_val = np.median(saliency_map)
-        ax1.axvline(mean_val, color='red', linestyle='--', alpha=0.7, label=f'Mean: {mean_val:.3f}')
-        ax1.axvline(median_val, color='green', linestyle='--', alpha=0.7, label=f'Median: {median_val:.3f}')
-        ax1.legend()
+        ax1.axvline(mean_val, color='black', linestyle='--', linewidth=2, 
+                   alpha=0.8, label=f'Mean: {mean_val:.3f}')
+        ax1.axvline(median_val, color='gray', linestyle=':', linewidth=2, 
+                   alpha=0.8, label=f'Median: {median_val:.3f}')
+        ax1.legend(fontsize=10, frameon=True, facecolor='white', edgecolor='black')
+        
         # 累积分布
         sorted_vals = np.sort(saliency_map.flatten())
         cumulative = np.arange(1, len(sorted_vals) + 1) / len(sorted_vals)
-        ax2.plot(sorted_vals, cumulative, color='#FF6B35', linewidth=2)
-        ax2.set_title('Cumulative Distribution Function', fontsize=12)
-        ax2.set_xlabel('Saliency Value', fontsize=10)
-        ax2.set_ylabel('Cumulative Probability', fontsize=10)
-        ax2.grid(True, alpha=0.3)
+        ax2.plot(sorted_vals, cumulative, color='black', linewidth=3)
+        ax2.set_title('Cumulative Distribution Function', fontsize=14, 
+                     fontweight='bold', color='black')
+        ax2.set_xlabel('Saliency Value', fontsize=12, fontweight='bold', color='black')
+        ax2.set_ylabel('Cumulative Probability', fontsize=12, fontweight='bold', color='black')
+        ax2.grid(True, alpha=0.5, color='gray', linewidth=1)
+        ax2.set_facecolor('white')
+        
         # 箱线图
-        ax3.boxplot(saliency_map.flatten(), patch_artist=True, 
-                   boxprops=dict(facecolor='#21CBF3', alpha=0.7))
-        ax3.set_title('Boxplot of Saliency Distribution', fontsize=12)
-        ax3.set_ylabel('Saliency Value', fontsize=10)
-        ax3.grid(True, alpha=0.3)
+        box_plot = ax3.boxplot(saliency_map.flatten(), patch_artist=True, 
+                              boxprops=dict(facecolor='lightgray', color='black', linewidth=2),
+                              whiskerprops=dict(color='black', linewidth=2),
+                              capprops=dict(color='black', linewidth=2),
+                              medianprops=dict(color='black', linewidth=3),
+                              flierprops=dict(marker='o', markerfacecolor='gray', 
+                                            markeredgecolor='black', markersize=5))
+        ax3.set_title('Boxplot of Saliency Distribution', fontsize=14, 
+                     fontweight='bold', color='black')
+        ax3.set_ylabel('Saliency Value', fontsize=12, fontweight='bold', color='black')
+        ax3.grid(True, alpha=0.5, color='gray', linewidth=1)
+        ax3.set_facecolor('white')
+        
         # 强度剖面（中心线）
         center_row = saliency_map[saliency_map.shape[0]//2, :]
-        ax4.plot(center_row, color='#9C27B0', linewidth=2)
-        ax4.set_title('Intensity Profile along Center Line', fontsize=12)
-        ax4.set_xlabel('Pixel Position', fontsize=10)
-        ax4.set_ylabel('Saliency Value', fontsize=10)
-        ax4.grid(True, alpha=0.3)
-        plt.tight_layout()
+        ax4.plot(center_row, color='black', linewidth=3, marker='o', 
+                markersize=3, markerfacecolor='gray', markeredgecolor='black')
+        ax4.set_title('Intensity Profile along Center Line', fontsize=14, 
+                     fontweight='bold', color='black')
+        ax4.set_xlabel('Pixel Position', fontsize=12, fontweight='bold', color='black')
+        ax4.set_ylabel('Saliency Value', fontsize=12, fontweight='bold', color='black')
+        ax4.grid(True, alpha=0.5, color='gray', linewidth=1)
+        ax4.set_facecolor('white')
+        
+        # 设置所有轴的颜色
+        for ax in [ax1, ax2, ax3, ax4]:
+            ax.tick_params(colors='black', labelsize=10)
+            for spine in ax.spines.values():
+                spine.set_color('black')
+                spine.set_linewidth(1.5)
+        
+        plt.tight_layout(pad=3.0)
+        
         # 保存为字节
         buf = io.BytesIO()
-        plt.savefig(buf, format='png', dpi=150, bbox_inches='tight')
+        plt.savefig(buf, format='png', dpi=300, bbox_inches='tight', 
+                   facecolor='white', edgecolor='black')
         buf.seek(0)
         img_array = np.array(Image.open(buf))
         plt.close()
+        
+        # 重置matplotlib参数
+        plt.rcParams.update(plt.rcParamsDefault)
+        
         return img_array
         
     def quick_process(self, image, threshold=0.5, testsize=256):
@@ -456,16 +565,19 @@ def run_demo(input_image, threshold, enhance_contrast, denoise, show_contours,
         overlayed = overlay_with_contours
     
     # 生成统计信息HTML
+# 生成统计信息HTML
     if stats:
-        stats_html = "<div class='statistics-container'>"
+        stats_html = "<div class='statistics-container' style='background: white; color: black;'>"
         for key, value in stats.items():
-            stats_html += f"<div class='statistic-card'><h4>{key}</h4><p>{value}</p></div>"
+            stats_html += f"""
+            <div class='statistic-card' style='background: white; border: 2px solid black; color: black;'>
+                <h4 style='color: black; font-weight: bold; margin-bottom: 10px;'>{key}</h4>
+                <p style='color: black; font-weight: bold; font-size: 16px; margin: 0;'>{value}</p>
+            </div>
+            """
         stats_html += "</div>"
     else:
-        stats_html = "<p>无可用统计信息</p>"
-    
-    return (original, saliency_map, heatmap, overlayed, segmented, 
-            comparison, time_info, stats_html, analysis_plot)
+        stats_html = "<p style='color: black; font-weight: bold;'>无可用统计信息</p>"
 
 def create_comparison_view(original, result, slider_value):
     """创建滑块对比视图"""