update UI

app.py

@@ -134,9 +134,9 @@ css = """
     font-weight: bold;
     border: none !important;
     border-radius: 12px !important;
-    font-size: 20px !important;
-    padding: 18px 24px !important;
-    margin-left: 12px !important;
+    font-size: 16px !important;
+    padding: 10px 18px !important;
+    margin-left: 10px !important;
 }
 .gray-btn {
     background: #EBEBEE !important;
@@ -144,16 +144,19 @@ css = """
     font-weight: bold;
     border: none !important;
     border-radius: 12px !important;
-    font-size: 20px !important;
-    padding: 18px 24px !important;
-    margin-right: 12px !important;
+    font-size: 16px !important;
+    padding: 10px 18px !important;
+    margin-right: 10px !important;
 }
 .button-row {
-    margin-top: 20px;
+    margin-top: 16px;
+}
+.gr-box .gr-block.gr-group {
+    box-shadow: none;
+    border: none;
 }
 """
 
-# --- Reset按钮功能 ---
 def reset_enhance():
     return "请选择样例图片或者上传", None, None
 
@@ -172,13 +175,14 @@ with gr.Blocks(title="AI内窥镜影像辅助分析系统") as demo:
         # 增强
         with gr.Column():
             with gr.Group():
-                gr.Markdown("<span style='font-size: 24px; font-weight: bold;'>图像增强模块</span>")
+                gr.Markdown("<span style='font-size: 22px; font-weight: bold;'>图像增强模块</span>")
                 enhance_select = gr.Dropdown(choices=ENHANCE_CHOICES, value="请选择样例图片或者上传", label="选择样例图片", filterable=True)
-                enhance_input_img = gr.Image(label="原始图片", interactive=False)
-                enhance_output_img = gr.Image(label="增强结果图片", interactive=False)
+                with gr.Row():
+                    enhance_input_img = gr.Image(label="原始图片", interactive=False)
+                    enhance_output_img = gr.Image(label="增强结果图片", interactive=False)
                 with gr.Row(elem_classes="button-row"):
                     enhance_reset_btn = gr.Button("Reset", elem_classes="gray-btn")
-                    enhance_btn = gr.Button("点击执行图片增强", size="sm", elem_classes="orange-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])
@@ -186,42 +190,39 @@ with gr.Blocks(title="AI内窥镜影像辅助分析系统") as demo:
         # 分割
         with gr.Column():
             with gr.Group():
-                gr.Markdown("<span style='font-size: 24px; font-weight: bold;'>图像分割模块</span>")
+                gr.Markdown("<span style='font-size: 22px; font-weight: bold;'>图像分割模块</span>")
                 seg_select = gr.Dropdown(choices=SEG_CHOICES, value="请选择样例图片或者上传", label="选择样例图片", filterable=True)
-                seg_input_img = gr.Image(label="输入图片", interactive=False)
-                seg_output_img = gr.Image(label="分割结果图片", interactive=False)
+                with gr.Row():
+                    seg_input_img = gr.Image(label="输入图片", interactive=False)
+                    seg_output_img = gr.Image(label="分割结果图片", interactive=False)
                 with gr.Row(elem_classes="button-row"):
                     seg_reset_btn = gr.Button("Reset", elem_classes="gray-btn")
-                    seg_btn = gr.Button("点击执行分割", size="sm", elem_classes="orange-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])
 
-    # 第二行：疾病诊断三列
+    # 第二行：疾病诊断Box包围三列
     with gr.Row():
-        # 1. 输入图片
-        with gr.Column():
-            with gr.Group():
-                gr.Markdown("<span style='font-size: 24px; font-weight: bold;'>输入图片</span>")
-                diag_select = gr.Dropdown(choices=DIAG_CHOICES, value="请选择样例图片或者上传", label="选择样例图片", filterable=True)
-                diag_input_img = gr.Image(label="输入图片", interactive=False)
-                with gr.Row(elem_classes="button-row"):
-                    diag_reset_btn = gr.Button("Reset", elem_classes="gray-btn")
-                    diag_btn = gr.Button("点击执行诊断", size="sm", elem_classes="orange-btn")
-                diag_select.change(fn=show_diag_input, inputs=diag_select, outputs=diag_input_img)
-        # 2. 结果表格
-        with gr.Column():
-            with gr.Group():
-                gr.Markdown("<span style='font-size: 24px; font-weight: bold;'>模型预测结果</span>")
-                diag_table = gr.Dataframe(headers=["类别", "概率"])
-        # 3. 最终诊断结果和建议
-        with gr.Column():
-            with gr.Group():
-                gr.Markdown("<span style='font-size: 24px; font-weight: bold;'>最终预测结果与建议</span>")
-                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])
+        with gr.Box():
+            gr.Markdown("<span style='font-size: 22px; font-weight: bold;'>疾病分类模块</span>")
+            with gr.Row():
+                # 1. 输入图片+按钮
+                with gr.Column():
+                    diag_select = gr.Dropdown(choices=DIAG_CHOICES, value="请选择样例图片或者上传", label="选择样例图片", filterable=True)
+                    diag_input_img = gr.Image(label="输入图片", interactive=False)
+                    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])
 
 demo.launch()