fix css

app.py

@@ -222,32 +222,102 @@ def handle_targeted_recognition(file_path: str, prompt_choice: str) -> Tuple[str
 # =========================
 # CSS & UI (From New Script)
 # =========================
-custom_css = '''
-body, button, input, textarea, select, p, label { font-family: "Microsoft YaHei","微软雅黑","Microsoft YaHei UI", "Noto Sans SC","PingFang SC",sans-serif !important; }
-.app-header { text-align: center; max-width: 900px; margin: 0 auto 4px !important; padding: 0 !important; }
-.gradio-container { padding-top: 2px !important; padding-bottom: 2px !important; }
-.gradio-container .tabs { margin-top: 0px !important; }
-.gradio-container .tabitem { padding-top: 4px !important; }
-.prompt-grid { gap: 8px !important; margin-top: 4px !important; }
-.prompt-grid button { height: 40px !important; min-height: 0 !important; padding: 0 12px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: .2px; }
-.quick-links { text-align: center; padding: 8px 0; border: 1px solid #e5e7eb; border-radius: 8px; margin: 8px auto !important; max-width: 900px; }
-.quick-links a { margin: 0 15px; font-size: 14px; font-weight: 600; text-decoration: none; color: #3b82f6; }
-.quick-links a:hover { text-decoration: underline; }
-#image_preview_vl, #image_preview_doc { height: 60vh !important; overflow: auto; }
-#vis_image_doc { height: 42vh !important; }
-#image_preview_vl .uploaded-image, #image_preview_doc .uploaded-image { height: 100%; }
-#image_preview_vl img, #image_preview_doc img, #vis_image_doc img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
-#md_preview_vl, #md_preview_doc { max-height: 60vh; overflow: auto; scrollbar-gutter: stable both-edges; }
-#md_preview_doc .prose img,
-#md_preview_vl .prose img {
-  display: block !important;
-  margin-left: auto !important;
-  margin-right: auto !important; /* 块级元素用 margin auto 居中 */
-  height: auto; /* 可选：保持比例 */
-  max-width: 100%; /* 可选：避免溢出 */
+custom_css = """
+/* 全局字体 */
+body, .gradio-container, .gradio-container * {
+  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif !important;
 }
-#md_preview_vl .prose, #md_preview_doc .prose { line-height: 1.7 !important; font-family: 'Microsoft YaHei','Noto Sans SC','PingFang SC',sans-serif !important; }
-'''
+
+/* 头部 */
+.app-header {
+  text-align: center;
+  max-width: 900px;
+  margin: 0 auto 8px !important;
+}
+
+/* 全局容器与标签页 */
+.gradio-container {
+  padding: 4px 0 !important;
+}
+.gradio-container [data-testid="tabs"],
+.gradio-container .tabs {
+  margin-top: 0 !important;
+}
+.gradio-container [data-testid="tabitem"],
+.gradio-container .tabitem {
+  padding-top: 4px !important;
+}
+
+/* 快速链接 */
+.quick-links {
+  text-align: center;
+  padding: 8px 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  margin: 8px auto;
+  max-width: 900px;
+}
+.quick-links a {
+  margin: 0 12px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #3b82f6;
+  text-decoration: none;
+}
+.quick-links a:hover {
+  text-decoration: underline;
+}
+
+/* 按钮区域（识别类型选择） */
+.prompt-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 6px;
+}
+.prompt-grid button {
+  height: 40px !important;
+  padding: 0 12px !important;
+  border-radius: 8px !important;
+  font-weight: 600 !important;
+  font-size: 13px !important;
+  letter-spacing: 0.2px;
+}
+
+/* 图片预览与可视化 (vh -> px) */
+#image_preview_vl, #image_preview_doc {
+  height: 400px !important; /* 原为 60vh */
+  overflow: auto;
+}
+
+#image_preview_vl img,
+#image_preview_doc img,
+#vis_image_doc img {
+  width: 100% !important;
+  height: auto !important;
+  object-fit: contain !important;
+  display: block;
+}
+
+/* Markdown 预览区 (vh -> px) */
+#md_preview_vl, #md_preview_doc {
+  max-height: 540px; /* 原为 60vh */
+  overflow: auto;
+  scrollbar-gutter: stable both-edges;
+}
+#md_preview_vl .prose,
+#md_preview_doc .prose {
+  line-height: 1.7 !important;
+}
+#md_preview_vl .prose img,
+#md_preview_doc .prose img {
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+  height: auto;
+}
+"""
+
 
 with gr.Blocks(head=GOOGLE_FONTS_URL, css=custom_css, theme=gr.themes.Soft()) as demo:
     logo_data_url = image_to_base64_data_url(LOGO_IMAGE_PATH) if os.path.exists(LOGO_IMAGE_PATH) else ""
@@ -333,5 +403,5 @@ with gr.Blocks(head=GOOGLE_FONTS_URL, css=custom_css, theme=gr.themes.Soft()) as
             btn_chart.click(fn=handle_targeted_recognition, inputs=[file_vl, gr.State("Chart Recognition")], outputs=[md_preview_vl, md_raw_vl])
 
 if __name__ == "__main__":
-    port = int(os.getenv("PORT", "7860"))
+    port = int(os.getenv("PORT", "8812"))
     demo.queue().launch(server_name="0.0.0.0", server_port=port,share=False) 

requirements.txt

@@ -2,4 +2,6 @@ gradio==5.42.0
 gradio_client==1.11.1
 huggingface-hub==0.34.4
 pillow==11.3.0
-requests==2.32.4
+requests==2.32.4
+
+pip install gradio[oauth,mcp]==5.49.1