update UI

app.py

@@ -3,6 +3,7 @@ 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)]
@@ -120,27 +121,47 @@ 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;
+/* 主标题居中 */
+#main-title {
+    text-align: center;
+    font-size: 34px;
+    font-weight: bold;
+    margin-bottom: 18px;
+    margin-top: 18px;
+    letter-spacing: 2px;
 }
+
+/* 模块外层深蓝虚线圆角 */
+.blue-dash-border {
+    border: 2.5px dashed #164fa0 !important;
+    border-radius: 22px !important;
+    padding: 0 !important;
+    margin-bottom: 32px !important;
+    box-sizing: border-box;
+}
+
+/* 模块内卡片背景、阴影、圆角等 */
 .big-group {
     background: #F5F6F7 !important;
-    border: 2px dashed #123A7A !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,.10);
+    margin: 16px !important;
+    box-shadow: 0 3px 12px 2px rgba(60,64,67,.14);
 }
+
+/* 模块标题居中 */
 .big-title {
     font-size: 25px;
     font-weight: bold;
     margin-bottom: 18px;
-    color: #123A7A;
-    text-align:center;
+    margin-left: 0;
+    color: #343434;
     letter-spacing: 1px;
+    text-align: center;
 }
+
+/* 按钮样式（宽度更小, 橙色无边框, 灰色有黑色边框） */
 .orange-btn {
     background: #FF7F1F !important;
     color: white !important;
@@ -164,31 +185,13 @@ css = """
 .button-row {
     margin-top: 8px;
 }
-.image-label-wrap {
-    width: 300px;
-    margin: 0 auto;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-.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 {
     border-radius: 10px !important;
     background: #fff !important;
     box-shadow: 0 2px 12px 0 rgba(60,64,67,.08);
 }
+/* 禁止卡片内嵌套group的边框和阴影 */
 .gr-box .gr-block.gr-group {
     box-shadow: none;
     border: none;
@@ -206,70 +209,64 @@ def reset_diag():
 
 with gr.Blocks(title="消化道疾病智能分析系统") as demo:
     gr.HTML(f"<style>{css}</style>")
-    gr.HTML('<div class="project-title">消化道疾病智能分析系统</div>')
+    gr.HTML("<div id='main-title'>消化道疾病智能分析系统</div>")
 
-    # 第一行：增强&分割（大框包裹）
+    # 第一行：增强&分割（每个模块外再加蓝色虚线边框）
     with gr.Row():
         # 图像增强
         with gr.Column():
-            with gr.Group(elem_classes="big-group"):
-                gr.HTML(f"<div class='big-title'>图像增强模块</div>")
-                enhance_select = gr.Dropdown(choices=ENHANCE_CHOICES, value="请选择样例图片或者上传", label="选择样例图片", filterable=True)
-                with gr.Row():
-                    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")
-                enhance_select.change(fn=show_enhance_input, inputs=enhance_select, outputs=enhance_input_img)
-                enhance_btn.click(fn=enhance_demo, inputs=enhance_select, outputs=enhance_output_img)
-                enhance_reset_btn.click(fn=reset_enhance, inputs=None, outputs=[enhance_select, enhance_input_img, enhance_output_img])
+            with gr.Group(elem_classes="blue-dash-border"):
+                with gr.Group(elem_classes="big-group"):
+                    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.Row(elem_classes="button-row"):
+                        enhance_reset_btn = gr.Button("Reset", elem_classes="gray-btn")
+                        enhance_btn = gr.Button("点击执行图片增强", elem_classes="orange-btn")
+                    enhance_select.change(fn=show_enhance_input, inputs=enhance_select, outputs=enhance_input_img)
+                    enhance_btn.click(fn=enhance_demo, inputs=enhance_select, outputs=enhance_output_img)
+                    enhance_reset_btn.click(fn=reset_enhance, inputs=None, outputs=[enhance_select, enhance_input_img, enhance_output_img])
 
         # 图像分割
         with gr.Column():
+            with gr.Group(elem_classes="blue-dash-border"):
+                with gr.Group(elem_classes="big-group"):
+                    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.Row(elem_classes="button-row"):
+                        seg_reset_btn = gr.Button("Reset", elem_classes="gray-btn")
+                        seg_btn = gr.Button("点击执行分割", elem_classes="orange-btn")
+                    seg_select.change(fn=show_seg_input, inputs=seg_select, outputs=seg_input_img)
+                    seg_btn.click(fn=segment_demo, inputs=seg_select, outputs=seg_output_img)
+                    seg_reset_btn.click(fn=reset_seg, inputs=None, outputs=[seg_select, seg_input_img, seg_output_img])
+
+    # 第二行：疾病诊断（外层蓝色虚线，内层卡片）
+    with gr.Row():
+        with gr.Group(elem_classes="blue-dash-border"):
             with gr.Group(elem_classes="big-group"):
-                gr.HTML(f"<div class='big-title'>图像分割模块</div>")
-                seg_select = gr.Dropdown(choices=SEG_CHOICES, value="请选择样例图片或者上传", label="选择样例图片", filterable=True)
+                gr.HTML(f"<div class='big-title'>疾病分类模块</div>")
                 with gr.Row():
+                    # 1. 输入图片+按钮
                     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")
+                        diag_select = gr.Dropdown(choices=DIAG_CHOICES, value="请选择样例图片或者上传", label="选择样例图片", filterable=True)
+                        diag_input_img = gr.Image(label="输入图片", interactive=False, width=300, height=300)
+                        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")
+                        diag_select.change(fn=show_diag_input, inputs=diag_select, outputs=diag_input_img)
+                    # 2. 结果表格
                     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")
-                seg_select.change(fn=show_seg_input, inputs=seg_select, outputs=seg_input_img)
-                seg_btn.click(fn=segment_demo, inputs=seg_select, outputs=seg_output_img)
-                seg_reset_btn.click(fn=reset_seg, inputs=None, outputs=[seg_select, seg_input_img, seg_output_img])
-
-    # 第二行：疾病诊断（大框包裹）
-    with gr.Row():
-        with gr.Group(elem_classes="big-group"):
-            gr.HTML(f"<div class='big-title'>疾病分类模块</div>")
-            with gr.Row():
-                # 1. 输入图片+按钮
-                with gr.Column():
-                    diag_select = gr.Dropdown(choices=DIAG_CHOICES, value="请选择样例图片或者上传", label="选择样例图片", filterable=True)
-                    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")
-                    diag_select.change(fn=show_diag_input, inputs=diag_select, outputs=diag_input_img)
-                # 2. 结果表格
-                with gr.Column():
-                    diag_table = gr.Dataframe(headers=["类别", "概率"])
-                # 3. 预测与建议
-                with gr.Column():
-                    diag_result = gr.Textbox(label="诊断结果")
-                    diag_suggestion = gr.Textbox(label="建议的治疗方案")
-            diag_btn.click(fn=diagnose_demo, inputs=diag_select, outputs=[diag_table, diag_result, diag_suggestion])
-            diag_reset_btn.click(fn=reset_diag, inputs=None, outputs=[diag_select, diag_input_img, diag_table, diag_result, diag_suggestion])
+                        diag_table = gr.Dataframe(headers=["类别", "概率"])
+                    # 3. 预测与建议
+                    with gr.Column():
+                        diag_result = gr.Textbox(label="诊断结果")
+                        diag_suggestion = gr.Textbox(label="建议的治疗方案")
+                diag_btn.click(fn=diagnose_demo, inputs=diag_select, outputs=[diag_table, diag_result, diag_suggestion])
+                diag_reset_btn.click(fn=reset_diag, inputs=None, outputs=[diag_select, diag_input_img, diag_table, diag_result, diag_suggestion])
 
 demo.launch()