update UI

app.py

@@ -41,7 +41,11 @@ SUGGESTION_DICT = {
 }
 
 def open_img(img_path):
+    """
+    将图等比缩放成 300x300，并返回 PIL.Image.Image
+    """
     if not os.path.exists(img_path):
+        # 若路径不存在，用灰色方块占位
         img = Image.new("RGB", (300, 300), (200, 200, 200))
     else:
         img = Image.open(img_path)
@@ -81,6 +85,9 @@ def show_diag_input(img_name):
     return open_img(path)
 
 def diagnose_demo(img_name):
+    """
+    随机模拟诊断结果与概率分布
+    """
     if img_name in (None, "", "请选择样例图片或者上传"):
         return [], "", ""
     idx = int(os.path.splitext(img_name)[0].replace("img_", ""))
@@ -100,28 +107,34 @@ def diagnose_demo(img_name):
             main_cat = cat
             break
     if main_cat is None:
+        import random
         main_cat = random.choice(KVASIR_CLASSES)
+
+    import random
     n_cat = len(KVASIR_CLASSES)
     probs = [0.0 for _ in range(n_cat)]
     main_idx = KVASIR_CLASSES.index(main_cat)
     main_prob = random.uniform(0.85, 0.99)
     rest = 1 - main_prob
     other_probs_raw = [random.uniform(0.01, 1) for _ in range(n_cat-1)]
-    other_probs_norm = [x / sum(other_probs_raw) * rest for x in other_probs_raw]
+    other_probs_sum = sum(other_probs_raw)
+    other_probs = [x / other_probs_sum * rest for x in other_probs_raw]
     pidx = 0
     for i in range(n_cat):
         if i == main_idx:
             probs[i] = main_prob
         else:
-            probs[i] = other_probs_norm[pidx]
+            probs[i] = other_probs[pidx]
             pidx += 1
+
     result_table = [[KVASIR_CLASSES[i], f"{probs[i]:.4f}"] for i in range(n_cat)]
     result_text = f"诊断类别：{main_cat}（概率最大）"
     suggestion = SUGGESTION_DICT.get(main_cat, "建议：请咨询医生。")
     return result_table, result_text, suggestion
 
+# 自定义CSS，特别是 img-label-bar 用于在图片下方添加彩条
 css = """
-/* 主标题居中 且更大 */
+/* 主标题居中加大 */
 #main-title {
     text-align: center;
     font-size: 44px;
@@ -160,7 +173,7 @@ css = """
     text-align: center;
 }
 
-/* 按钮样式（宽度更小, 橙色无边框, 灰色有黑色边框） */
+/* 按钮样式（橙色无边框，灰色带黑色边框） */
 .orange-btn {
     background: #FF7F1F !important;
     color: white !important;
@@ -200,6 +213,19 @@ css = """
     box-shadow: none;
     border: none;
 }
+
+/* 下方彩条，用于显示文字说明 */
+.img-label-bar {
+    background: rgb(76, 180, 184);
+    color: #fff;
+    text-align: center;
+    padding: 6px 0;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    margin-top: -5px; /* 让bar紧贴图片下边缘 */
+    font-size: 14px;
+    font-weight: normal;
+}
 """
 
 def reset_enhance():
@@ -221,14 +247,24 @@ with gr.Blocks(title="消化道疾病智能分析系统") as demo:
         with gr.Column():
             with gr.Group(elem_classes="blue-dash-border"):
                 with gr.Group(elem_classes="big-group"):
-                    gr.HTML(f"<div class='big-title'>图像增强模块</div>")
+                    gr.HTML("<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, width=300, height=300)
-                        enhance_output_img = gr.Image(label="增强结果图片", interactive=False, width=300, height=300)
+                        with gr.Column():
+                            # 1) 不在 gr.Image 里加 label
+                            enhance_input_img = gr.Image(show_label=False, interactive=False, width=300, height=300)
+                            # 2) 自定义bar来显示 "原始图片"
+                            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.Row(elem_classes="button-row"):
-                        enhance_reset_btn = gr.Button("Reset", elem_classes="gray-btn")
-                        enhance_btn = gr.Button("点击执行图片增强", elem_classes="orange-btn")
+                        with gr.Column(scale=0):
+                            enhance_reset_btn = gr.Button("Reset", elem_classes="gray-btn")
+                        with gr.Column(scale=0):
+                            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])
@@ -237,14 +273,20 @@ with gr.Blocks(title="消化道疾病智能分析系统") as demo:
         with gr.Column():
             with gr.Group(elem_classes="blue-dash-border"):
                 with gr.Group(elem_classes="big-group"):
-                    gr.HTML(f"<div class='big-title'>图像分割模块</div>")
+                    gr.HTML("<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, width=300, height=300)
-                        seg_output_img = gr.Image(label="分割结果图片", interactive=False, width=300, height=300)
+                        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.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.Row(elem_classes="button-row"):
-                        seg_reset_btn = gr.Button("Reset", elem_classes="gray-btn")
-                        seg_btn = gr.Button("点击执行分割", elem_classes="orange-btn")
+                        with gr.Column(scale=0):
+                            seg_reset_btn = gr.Button("Reset", elem_classes="gray-btn")
+                        with gr.Column(scale=0):
+                            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])
@@ -253,23 +295,30 @@ with gr.Blocks(title="消化道疾病智能分析系统") as demo:
     with gr.Row():
         with gr.Group(elem_classes="blue-dash-border"):
             with gr.Group(elem_classes="big-group"):
-                gr.HTML(f"<div class='big-title'>疾病分类模块</div>")
+                gr.HTML("<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, width=300, height=300)
+                        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.Row(elem_classes="button-row"):
-                            diag_reset_btn = gr.Button("Reset", elem_classes="gray-btn")
-                            diag_btn = gr.Button("点击执行诊断", elem_classes="orange-btn")
+                            with gr.Column(scale=0):
+                                diag_reset_btn = gr.Button("Reset", elem_classes="gray-btn")
+                            with gr.Column(scale=0):
+                                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])