update UI

app.py

@@ -129,7 +129,7 @@ css = """
     margin-top: 18px;
     letter-spacing: 2px;
 }
-/* 模块外层深蓝虚线圆角 */
+/* 外层深蓝虚线圆角 */
 .blue-dash-border {
     border: 2.5px dashed #164fa0 !important;
     border-radius: 22px !important;
@@ -180,23 +180,33 @@ css = """
 .button-row {
     margin-top: 8px;
 }
-.gr-image, .gr-image-preview {
-    border-radius: 10px !important;
+
+/* 让图片和标签容器固定宽度 300px，并保持紧贴 */
+.image-label-container {
+    width: 300px;
+    margin: 0 auto;
+    display: inline-block;
+    position: relative;
+    text-align: center;
+}
+.image-label-container .gr-image,
+.image-label-container .gr-image-preview {
+    width: 300px !important;
+    height: 300px !important;
+    margin-bottom: 0 !important;
+    border-radius: 10px 10px 0 0 !important;
     background: #fff !important;
     box-shadow: 0 2px 12px 0 rgba(60,64,67,.08);
 }
-.gr-box .gr-block.gr-group {
-    box-shadow: none;
-    border: none;
-}
-.img-label-bar {
+.image-label-container .img-label-bar {
+    width: 300px;
     background: rgb(76, 180, 184);
     color: #fff;
     text-align: center;
     padding: 6px 0;
+    margin-top: 0 !important;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
-    margin-top: -5px;
     font-size: 14px;
     font-weight: normal;
 }
@@ -215,76 +225,135 @@ with gr.Blocks(title="消化道疾病智能分析系统") as demo:
     gr.HTML(f"<style>{css}</style>")
     gr.HTML("<div id='main-title'>消化道疾病智能分析系统</div>")
 
-    # 第一行：增强&分割（每个模块外再加蓝色虚线边框）
+    # ============ 第一行：增强 & 分割 ============
     with gr.Row():
-        # 图像增强
+        # ---------- 图像增强 ----------
         with gr.Column():
             with gr.Group(elem_classes="blue-dash-border"):
                 with gr.Group(elem_classes="big-group"):
                     gr.HTML("<div class='big-title'>图像增强模块</div>")
-                    enhance_select = gr.Dropdown(choices=ENHANCE_CHOICES, value="---------------", label="请选择样例图片或者上传", filterable=True)
+                    enhance_select = gr.Dropdown(
+                        choices=ENHANCE_CHOICES,
+                        value="---------------",
+                        label="请选择样例图片或者上传",
+                        filterable=True
+                    )
                     with gr.Row():
                         with gr.Column():
-                            enhance_input_img = gr.Image(show_label=False, interactive=False, width=300, height=300)
-                            gr.HTML("<div class='img-label-bar'>原始图片</div>")
+                            with gr.Group(elem_classes="image-label-container"):
+                                enhance_input_img = gr.Image(
+                                    show_label=False, interactive=False, 
+                                    width=300, height=300
+                                )
+                                gr.HTML("<div class='img-label-bar'>原始图片</div>")
                         with gr.Column():
-                            enhance_output_img = gr.Image(show_label=False, interactive=False, width=300, height=300)
-                            gr.HTML("<div class='img-label-bar'>增强结果图片</div>")
-                    # 按钮直接并排
+                            with gr.Group(elem_classes="image-label-container"):
+                                enhance_output_img = gr.Image(
+                                    show_label=False, interactive=False,
+                                    width=300, height=300
+                                )
+                                gr.HTML("<div class='img-label-bar'>增强结果图片</div>")
+
                     with gr.Row(elem_classes="button-row"):
                         enhance_reset_btn = gr.Button("清空", 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])
 
-        # 图像分割
+                    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("<div class='big-title'>图像分割模块</div>")
-                    seg_select = gr.Dropdown(choices=SEG_CHOICES, value="---------------", label="请选择样例图片或者上传", filterable=True)
+                    seg_select = gr.Dropdown(
+                        choices=SEG_CHOICES, 
+                        value="---------------", 
+                        label="请选择样例图片或者上传", 
+                        filterable=True
+                    )
                     with gr.Row():
                         with gr.Column():
-                            seg_input_img = gr.Image(show_label=False, interactive=False, width=300, height=300)
-                            gr.HTML("<div class='img-label-bar'>输入图片</div>")
+                            with gr.Group(elem_classes="image-label-container"):
+                                seg_input_img = gr.Image(
+                                    show_label=False, interactive=False, 
+                                    width=300, height=300
+                                )
+                                gr.HTML("<div class='img-label-bar'>输入图片</div>")
                         with gr.Column():
-                            seg_output_img = gr.Image(show_label=False, interactive=False, width=300, height=300)
-                            gr.HTML("<div class='img-label-bar'>分割结果图片</div>")
+                            with gr.Group(elem_classes="image-label-container"):
+                                seg_output_img = gr.Image(
+                                    show_label=False, interactive=False,
+                                    width=300, height=300
+                                )
+                                gr.HTML("<div class='img-label-bar'>分割结果图片</div>")
+
                     with gr.Row(elem_classes="button-row"):
                         seg_reset_btn = gr.Button("清空", 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("<div class='big-title'>疾病分类模块</div>")
                 with gr.Row():
-                    # 左列：输入图片+按钮
+                    # ---------- 左列：输入图片 + 按钮 ----------
                     with gr.Column():
-                        diag_select = gr.Dropdown(choices=DIAG_CHOICES, value="---------------", label="请选择样例图片或者上传", filterable=True)
+                        diag_select = gr.Dropdown(
+                            choices=DIAG_CHOICES, 
+                            value="---------------", 
+                            label="请选择样例图片或者上传", 
+                            filterable=True
+                        )
                         with gr.Column():
-                            diag_input_img = gr.Image(show_label=False, interactive=False, width=300, height=300)
-                            gr.HTML("<div class='img-label-bar'>输入图片</div>")
+                            with gr.Group(elem_classes="image-label-container"):
+                                diag_input_img = gr.Image(
+                                    show_label=False, interactive=False, 
+                                    width=300, height=300
+                                )
+                                gr.HTML("<div class='img-label-bar'>输入图片</div>")
                         with gr.Row(elem_classes="button-row"):
                             diag_reset_btn = gr.Button("清空", 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)
 
-                    # 中列：结果表格
+                    # ---------- 中列：结果表格 ----------
                     with gr.Column():
                         diag_table = gr.Dataframe(headers=["类别", "概率"])
 
-                    # 右列：诊断结果 & 建议
+                    # ---------- 右列：诊断结果 & 建议 ----------
                     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_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()