update UI

app.py

@@ -3,7 +3,6 @@ from PIL import Image
 import os
 import random
 
-# ========== 配置图片路径 ==========
 ENHANCE_INPUT_DIR = "sr_input"
 ENHANCE_OUTPUT_DIR = "sr_output"
 ENHANCE_IMG_NAMES = [f"img_{i}.jpg" for i in range(1, 30)]
@@ -121,6 +120,27 @@ def diagnose_demo(img_name):
     return result_table, result_text, suggestion
 
 css = """
+.project-title {
+    font-size: 38px; font-weight:bold; text-align:center; margin-bottom:40px;
+    letter-spacing:2px;
+}
+.big-group {
+    background: #F5F6F7 !important;
+    border: 2px dashed #123A7A !important;
+    border-radius: 18px !important;
+    padding: 28px 18px 24px 18px !important;
+    margin-top: 28px !important;
+    margin-bottom: 18px !important;
+    box-shadow: 0 3px 12px 2px rgba(60,64,67,.10);
+}
+.big-title {
+    font-size: 25px;
+    font-weight: bold;
+    margin-bottom: 18px;
+    color: #123A7A;
+    text-align:center;
+    letter-spacing: 1px;
+}
 .orange-btn {
     background: #FF7F1F !important;
     color: white !important;
@@ -144,21 +164,24 @@ css = """
 .button-row {
     margin-top: 8px;
 }
-.big-group {
-    background: #F5F6F7 !important;
-    border: 2px solid #e0e2e5 !important;
-    border-radius: 18px !important;
-    padding: 28px 18px 24px 18px !important;
-    margin-top: 28px !important;
-    margin-bottom: 18px !important;
-    box-shadow: 0 3px 12px 2px rgba(60,64,67,.14);
+.image-label-wrap {
+    width: 300px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
-.big-title {
-    font-size: 25px;
-    font-weight: bold;
-    margin-bottom: 18px;
-    margin-left: 4px;
-    color: #343434;
+.custom-image-label {
+    background: #2bb7da;
+    color: #fff;
+    font-size: 16px;
+    width: 100%;
+    text-align: center;
+    border-radius: 0 0 9px 9px;
+    padding: 6px 0 4px 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    font-weight: 500;
     letter-spacing: 1px;
 }
 .gr-image, .gr-image-preview {
@@ -181,9 +204,9 @@ def reset_seg():
 def reset_diag():
     return "请选择样例图片或者上传", None, [], "", ""
 
-with gr.Blocks(title="AI内窥镜影像辅助分析系统") as demo:
+with gr.Blocks(title="消化道疾病智能分析系统") as demo:
     gr.HTML(f"<style>{css}</style>")
-    gr.Markdown("<span style='font-size: 32px; font-weight: bold;'>AI内窥镜影像辅助分析系统</span>")
+    gr.HTML('<div class="project-title">消化道疾病智能分析系统</div>')
 
     # 第一行：增强&分割（大框包裹）
     with gr.Row():
@@ -193,8 +216,12 @@ with gr.Blocks(title="AI内窥镜影像辅助分析系统") as demo:
                 gr.HTML(f"<div class='big-title'>图像增强模块</div>")
                 enhance_select = gr.Dropdown(choices=ENHANCE_CHOICES, value="请选择样例图片或者上传", label="选择样例图片", filterable=True)
                 with gr.Row():
-                    enhance_input_img = gr.Image(label="原始图片", interactive=False, width=300, height=300)
-                    enhance_output_img = gr.Image(label="增强结果图片", interactive=False, width=300, height=300)
+                    with gr.Column():
+                        enhance_input_img = gr.Image(interactive=False, width=300, height=300, show_label=False)
+                        gr.HTML('<div class="custom-image-label">原始图片</div>', elem_id=None, elem_classes="image-label-wrap")
+                    with gr.Column():
+                        enhance_output_img = gr.Image(interactive=False, width=300, height=300, show_label=False)
+                        gr.HTML('<div class="custom-image-label">增强结果图片</div>', elem_id=None, elem_classes="image-label-wrap")
                 with gr.Row(elem_classes="button-row"):
                     enhance_reset_btn = gr.Button("Reset", elem_classes="gray-btn")
                     enhance_btn = gr.Button("点击执行图片增强", elem_classes="orange-btn")
@@ -208,8 +235,12 @@ with gr.Blocks(title="AI内窥镜影像辅助分析系统") as demo:
                 gr.HTML(f"<div class='big-title'>图像分割模块</div>")
                 seg_select = gr.Dropdown(choices=SEG_CHOICES, value="请选择样例图片或者上传", label="选择样例图片", filterable=True)
                 with gr.Row():
-                    seg_input_img = gr.Image(label="输入图片", interactive=False, width=300, height=300)
-                    seg_output_img = gr.Image(label="分割结果图片", interactive=False, width=300, height=300)
+                    with gr.Column():
+                        seg_input_img = gr.Image(interactive=False, width=300, height=300, show_label=False)
+                        gr.HTML('<div class="custom-image-label">输入图片</div>', elem_id=None, elem_classes="image-label-wrap")
+                    with gr.Column():
+                        seg_output_img = gr.Image(interactive=False, width=300, height=300, show_label=False)
+                        gr.HTML('<div class="custom-image-label">分割结果图片</div>', elem_id=None, elem_classes="image-label-wrap")
                 with gr.Row(elem_classes="button-row"):
                     seg_reset_btn = gr.Button("Reset", elem_classes="gray-btn")
                     seg_btn = gr.Button("点击执行分割", elem_classes="orange-btn")
@@ -225,7 +256,8 @@ with gr.Blocks(title="AI内窥镜影像辅助分析系统") as demo:
                 # 1. 输入图片+按钮
                 with gr.Column():
                     diag_select = gr.Dropdown(choices=DIAG_CHOICES, value="请选择样例图片或者上传", label="选择样例图片", filterable=True)
-                    diag_input_img = gr.Image(label="输入图片", interactive=False, width=300, height=300)
+                    diag_input_img = gr.Image(interactive=False, width=300, height=300, show_label=False)
+                    gr.HTML('<div class="custom-image-label">输入图片</div>', elem_id=None, elem_classes="image-label-wrap")
                     with gr.Row(elem_classes="button-row"):
                         diag_reset_btn = gr.Button("Reset", elem_classes="gray-btn")
                         diag_btn = gr.Button("点击执行诊断", elem_classes="orange-btn")