update UI

app.py

@@ -42,17 +42,17 @@ SUGGESTION_DICT = {
 
 def open_img(img_path):
     if not os.path.exists(img_path):
-        img = Image.new("RGB", (400, 400), (200, 200, 200))
+        img = Image.new("RGB", (300, 300), (200, 200, 200))
     else:
         img = Image.open(img_path)
     w, h = img.size
-    if max(w, h) != 400:
+    if max(w, h) != 300:
         if w >= h:
-            new_w = 400
-            new_h = int(h * 400 / w)
+            new_w = 300
+            new_h = int(h * 300 / w)
         else:
-            new_h = 400
-            new_w = int(w * 400 / h)
+            new_h = 300
+            new_w = int(w * 300 / h)
         img = img.resize((new_w, new_h), Image.LANCZOS)
     return img
 
@@ -132,26 +132,28 @@ css = """
     background: #FF7F1F !important;
     color: white !important;
     font-weight: bold;
-    border: none !important;
+    border: 2px solid #ff6100 !important;
     border-radius: 12px !important;
     font-size: 16px !important;
     padding: 10px 18px !important;
     margin-left: 10px !important;
+    box-shadow: none !important;
 }
 .gray-btn {
     background: #EBEBEE !important;
     color: black !important;
     font-weight: bold;
-    border: none !important;
+    border: 2px solid #bfbfbf !important;
     border-radius: 12px !important;
     font-size: 16px !important;
     padding: 10px 18px !important;
     margin-right: 10px !important;
+    box-shadow: none !important;
 }
 .button-row {
-    margin-top: 16px;
+    margin-top: 4px;
 }
-.diagnosis-group {
+.big-group {
     border: 2px solid #dadce0 !important;
     border-radius: 15px !important;
     padding: 28px 12px 24px 12px !important;
@@ -160,7 +162,7 @@ css = """
     background: #FAFAFA !important;
     box-shadow: 0 2px 6px 0 rgba(60,64,67,.11),0 1.5px 5px 0 rgba(60,64,67,.11);
 }
-.diagnosis-title {
+.big-title {
     font-size: 22px;
     font-weight: bold;
     margin-bottom: 14px;
@@ -182,16 +184,16 @@ with gr.Blocks(title="AI内窥镜影像辅助分析系统") as demo:
     gr.HTML(f"<style>{css}</style>")
     gr.Markdown("<span style='font-size: 32px; font-weight: bold;'>AI内窥镜影像辅助分析系统</span>")
 
-    # 第一行：增强&分割
+    # 第一行：增强&分割（大框包裹）
     with gr.Row():
-        # 增强
+        # 图像增强
         with gr.Column():
-            with gr.Group():
-                gr.Markdown("<span style='font-size: 22px; font-weight: bold;'>图像增强模块</span>")
+            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)
-                    enhance_output_img = gr.Image(label="增强结果图片", interactive=False)
+                    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")
@@ -199,14 +201,14 @@ with gr.Blocks(title="AI内窥镜影像辅助分析系统") as demo:
                 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():
-                gr.Markdown("<span style='font-size: 22px; font-weight: bold;'>图像分割模块</span>")
+            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)
-                    seg_output_img = gr.Image(label="分割结果图片", interactive=False)
+                    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")
@@ -214,15 +216,15 @@ with gr.Blocks(title="AI内窥镜影像辅助分析系统") as demo:
                 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])
 
-    # 第二行：疾病诊断，Group加大边框
+    # 第二行：疾病诊断（大框包裹）
     with gr.Row():
-        with gr.Group(elem_classes="diagnosis-group"):
-            gr.HTML(f"<div class='diagnosis-title'>疾病分类模块</div>")
+        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(label="输入图片", interactive=False)
+                    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")