update button

app.py

@@ -145,20 +145,13 @@ css = """
     margin: 16px !important;
     box-shadow: 0 3px 12px 2px rgba(60,64,67,.14);
 }
-.title-row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-bottom: 18px;
-}
 .big-title {
     font-size: 25px;
     font-weight: bold;
+    margin-bottom: 18px;
     color: #343434;
     letter-spacing: 1px;
     text-align: center;
-    margin: 0 16px 0 0;  /* 右侧空隙让按钮和文字隔开一点 */
-    display: inline-block;
 }
 .orange-btn {
     background: #FF7F1F !important;
@@ -166,16 +159,23 @@ css = """
     font-weight: bold;
     border: none !important;
     border-radius: 12px !important;
-    padding: 7px 16px !important;
-    margin: 0 !important;
+    padding: 7px 6px !important;
+    margin-left: 10px !important;
+    box-shadow: none !important;
+    min-width: unset !important;
+    width: auto !important;
+}
+.gray-btn {
+    background: #EBEBEE !important;
+    color: black !important;
+    font-weight: bold;
+    border: 2px solid #111 !important;
+    border-radius: 12px !important;
+    padding: 7px 6px !important;
+    margin-right: 10px !important;
     box-shadow: none !important;
     min-width: unset !important;
     width: auto !important;
-    display: inline-block !important;
-    font-size: 16px;
-    height: 38px;
-    line-height: 24px;
-    vertical-align: middle;
 }
 .button-row {
     margin-top: 8px;
@@ -190,7 +190,6 @@ css = """
     text-align: center;
     padding: 0 !important;
     border: none !important;
-    line-height: 0 !important;
 }
 
 .image-label-container .gr-image,
@@ -231,6 +230,15 @@ css = """
 }
 """
 
+def reset_enhance():
+    return "请选择样例图片或者上传", None, None
+
+def reset_seg():
+    return "请选择样例图片或者上传", None, None
+
+def reset_diag():
+    return "请选择样例图片或者上传", None, [], "", ""
+
 with gr.Blocks(title="消化道疾病智能分析系统") as demo:
     gr.HTML(f"<style>{css}</style>")
     gr.HTML("<div id='main-title'>消化道疾病智能分析系统</div>")
@@ -241,9 +249,7 @@ with gr.Blocks(title="消化道疾病智能分析系统") as demo:
         with gr.Column():
             with gr.Group(elem_classes="blue-dash-border"):
                 with gr.Group(elem_classes="big-group"):
-                    with gr.Row(elem_id="enhance-title-row", elem_classes="title-row"):
-                        gr.HTML("<div class='big-title'>图像增强模块</div>")
-                        enhance_btn = gr.Button("点击执行图片增强", elem_classes="orange-btn")
+                    gr.HTML("<div class='big-title'>图像增强模块</div>")
                     enhance_select = gr.Dropdown(
                         choices=ENHANCE_CHOICES,
                         value="---------------",
@@ -266,6 +272,10 @@ with gr.Blocks(title="消化道疾病智能分析系统") as demo:
                                 )
                                 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, 
@@ -276,14 +286,17 @@ with gr.Blocks(title="消化道疾病智能分析系统") as 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"):
-                    with gr.Row(elem_id="seg-title-row", elem_classes="title-row"):
-                        gr.HTML("<div class='big-title'>图像分割模块</div>")
-                        seg_btn = gr.Button("点击执行分割", elem_classes="orange-btn")
+                    gr.HTML("<div class='big-title'>图像分割模块</div>")
                     seg_select = gr.Dropdown(
                         choices=SEG_CHOICES, 
                         value="---------------", 
@@ -306,16 +319,19 @@ with gr.Blocks(title="消化道疾病智能分析系统") as demo:
                                 )
                                 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"):
-                with gr.Row(elem_id="diag-title-row", elem_classes="title-row"):
-                    gr.HTML("<div class='big-title'>疾病分类模块</div>")
-                    diag_btn = gr.Button("点击执行诊断", elem_classes="orange-btn")
+                gr.HTML("<div class='big-title'>疾病分类模块</div>")
                 with gr.Row():
                     # ---------- 左列：输入图片 + 按钮 ----------
                     with gr.Column():
@@ -332,6 +348,10 @@ with gr.Blocks(title="消化道疾病智能分析系统") as demo:
                                     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)
 
                     # ---------- 中列：结果表格 ----------
@@ -348,5 +368,10 @@ with gr.Blocks(title="消化道疾病智能分析系统") as 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()