update UI

app.py

@@ -132,117 +132,186 @@ css = """
     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;
+    margin-bottom: 16px !important;
     box-sizing: border-box;
 }
+
 .big-group {
-    background: #F5F6F7 !important;
+    background: #fff !important;
     border: 2px solid #e0e2e5 !important;
     border-radius: 18px !important;
     padding: 28px 18px 24px 18px !important;
     margin: 16px !important;
     box-shadow: 0 3px 12px 2px rgba(60,64,67,.14);
 }
+
 .big-title {
-    font-size: 25px;
+    font-size: 28px;
     font-weight: bold;
     margin-bottom: 18px;
     color: #343434;
     letter-spacing: 1px;
     text-align: center;
 }
-.orange-btn {
-    background: #FF7F1F !important;
-    color: white !important;
+
+/* ===== 按钮公共属性合并 ===== */
+.orange-btn,
+.orange-btn-diag {
+    background: #A7C0DE !important;
+    color: #111 !important;
+    font-size: 32px;
     font-weight: bold;
-    border: none !important;
-    border-radius: 12px !important;
-    padding: 7px 6px !important;
-    margin-left: 10px !important;
-    box-shadow: none !important;
-    min-width: unset !important;
+    border: none #5900c2 !important;
+    border-radius: 16px !important;
+    padding: 12px 20px !important;
     width: auto !important;
 }
-.gray-btn {
-    background: #EBEBEE !important;
-    color: black !important;
+
+.gray-btn,
+.gray-btn-diag {
+    background: #f2f2f2 !important;
+    color: #111 !important;
+    font-size: 32px;
     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;
+    border: 3px dashed #6c91c2 !important;
+    border-radius: 16px !important;
+    padding: 12px 20px !important;
     width: auto !important;
 }
+
+/* ===== 不同之处仅在于左右 margin ===== */
+.orange-btn {
+    margin-left: 48px !important;
+    margin-right: 48px !important;
+}
+
+.gray-btn {
+    margin-left: 48px !important;
+    margin-right: 48px !important;
+}
+
+/* ====== 诊断模块按钮独立CSS ====== */
+.orange-btn-diag {
+    margin-left: 24px !important;
+    margin-right: 24px !important;
+}
+
+.gray-btn-diag {
+    margin-left: 24px !important;
+    margin-right: 24px !important;
+}
+
 .button-row {
     margin-top: 8px;
 }
 
-/* 让图片和标签容器固定宽度 300px，并紧贴无缝 */
+.image-label-container,
+.image-label-container * {
+    margin: 0 !important;
+    padding: 0 !important;
+    line-height: 0 !important;
+    font-size: 0 !important;
+    border-spacing: 0 !important;
+    box-sizing: border-box !important;
+}
+
 .image-label-container {
-    width: 300px;
-    margin: 0 auto !important;
-    display: block;
+    width: 300px !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
     position: relative;
-    text-align: center;
+    text-align: center !important;
     padding: 0 !important;
     border: none !important;
 }
 
-/* >>>>>> 关键：消除图片和下方label的所有间隔 <<<<<< */
 .image-label-container .gr-image,
-.image-label-container .gr-image-preview,
-.image-label-container img,
-.image-label-container .img-label-bar {
-    margin-bottom: 0 !important;
-    margin-top: 0 !important;
-    padding-bottom: 0 !important;
-    padding-top: 0 !important;
-    display: block !important;
-    vertical-align: bottom !important;
+.image-label-container .gr-image-preview {
+    width: 300px !important;
+    height: 300px !important;
+    min-width: 300px !important;
+    min-height: 300px !important;
+    max-width: 300px !important;
+    max-height: 300px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    background: #fff !important;
+    border-radius: 10px 10px 0 0 !important;
+    box-shadow: 0 2px 12px 0 rgba(60,64,67,.08);
 }
 
-.image-label-container .gr-image .gr-image-img,
-.image-label-container .gr-image-preview .gr-image-img,
 .image-label-container img {
-    margin: 0 !important;
-    padding: 0 !important;
     display: block !important;
     vertical-align: bottom !important;
+    width: 300px !important;
+    height: 300px !important;
+    margin: 0 auto !important;
+    padding: 0 !important;
+    border-radius: 10px 10px 0 0 !important;
+    background: #fff !important;
+    box-shadow: 0 2px 12px 0 rgba(60,64,67,.08);
 }
 
 .image-label-container .img-label-bar {
-    width: 300px;
+    margin: 0 !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    line-height: normal !important;
+    font-size: 22px !important;
+    width: 300px !important;
     text-align: center !important;
-    display: block;
-    background: rgb(76, 180, 184);
+    background: rgb(17, 26, 110);
     color: #fff;
-    padding: 6px 0;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
-    font-size: 14px;
     font-weight: normal;
+    box-sizing: border-box;
+    align-self: center !important;
 }
 
-/* 图片也圆角，label贴合图片 */
-.image-label-container .gr-image,
-.image-label-container .gr-image-preview,
-.image-label-container img {
-    width: 300px !important;
-    height: 300px !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    border-radius: 10px 10px 0 0 !important;
-    background: #fff !important;
-    box-shadow: 0 2px 12px 0 rgba(60,64,67,.08);
-    display: block !important;
-    vertical-align: bottom !important;
+.gradio-container label, 
+.gradio-container .gr-input-label, 
+.gradio-container .block-label {
+    font-size: 36px !important;
+    font-weight: 500 !important;
+    color: #222 !important;
+    letter-spacing: 0.5px;
+}
+
+.gradio-container select, 
+.gradio-container option,
+.gradio-container input[type="text"] {
+    font-size: 22px !important;
+}
+
+.gradio-container .gr-dataframe,
+.gradio-container .gr-dataframe table,
+.gradio-container .gr-dataframe table th,
+.gradio-container .gr-dataframe table td {
+    font-size: 28px !important;
+}
+
+.gradio-container .gr-dataframe .block-label,
+.gradio-container .gr-dataframe label {
+    font-size: 28px !important;
+    font-weight: 600 !important;
+}
+
+.gradio-container .gr-textbox,
+.gradio-container .gr-textbox textarea,
+.gradio-container .gr-textbox .block-label,
+.gradio-container .gr-textbox label {
+    font-size: 28px !important;
 }
 """
 
@@ -365,14 +434,17 @@ with gr.Blocks(title="消化道疾病智能分析系统") as demo:
                                 )
                                 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")
+                            # === 这里用新class名 ===
+                            diag_reset_btn = gr.Button("清空", elem_classes="gray-btn-diag")
+                            diag_btn = gr.Button("点击执行诊断", elem_classes="orange-btn-diag")
 
                         diag_select.change(fn=show_diag_input, inputs=diag_select, outputs=diag_input_img)
 
-                    # ---------- 中列：结果表格 ----------
+                    # ---------- 中列：结果表格（新增label） ----------
                     with gr.Column():
-                        diag_table = gr.Dataframe(headers=["类别", "概率"])
+                        diag_table = gr.Dataframe(
+                            headers=["诊断类别", "模型预测概率"]
+                        )
 
                     # ---------- 右列：诊断结果 & 建议 ----------
                     with gr.Column():