Update app.py

app.py

@@ -14,26 +14,25 @@ from PIL import Image
 import pdf2image
 
 API_URL = "https://t707h6d9q6oftbx3.aistudio-app.com/layout-parsing"
-TOKEN = os.getenv("API_TOKEN", "c9e4aaf9634724e215690ba66a66dbdbdf3222a2")
+TOKEN = os.getenv("API_TOKEN")
 
 
 CSS = """
 :root {
-    --sand-color: #D7B4F8;    
+    --sand-color: #FAF9F6;    
     --white: #ffffff;          
     --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
-    --text-color: #F5ECFD;     
+    --text-color: #FAF9F6;     
     --black:#000000;
-    --link-hover: #F5ECFD;
+    --link-hover: #2b6cb0;
     --content-width: 1200px;
-    --button-color: #cbbdff; /* 新增按钮颜色变量 */
 }
 
 body {
     display: flex;
     justify-content: center;
     background-color: var(--sand-color);
-    color: var(--black);
+    color: var(--text-color);
     font-family: Arial, sans-serif;
 }
 
@@ -42,22 +41,41 @@ body {
     width: 100% !important;
     margin: 20px auto;
     padding: 20px;
+    background-color: var(--white);
+}
+
+#component-0, 
+#tabs, 
+#settings { 
     background-color: var(--white) !important;
+    padding: 15px;
 }
 
-/* 修改1: 优化header容器样式 */
-.header-container {
+.upload-section {
     width: 100%;
-    background-color: var(--text-color) !important;
-    padding: 20px 0 10px 0; /* 减少底部padding */
-    margin-bottom: 20px;
+    margin: 0 auto 30px;
+    padding: 20px;
+    background-color: var(--sand-color) !important;
     border-radius: 8px;
+    box-shadow: var(--shadow);
+}
+
+.center-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.header {
+    margin-bottom: 30px;
+    width: 100%;
 }
 
 .logo-container {
     width: 100%;
-    margin-bottom: 15px; /* 减少logo与按钮间距 */
-    text-align: center;
+    margin-bottom: 20px;
 }
 
 .logo-img {
@@ -67,61 +85,35 @@ body {
     display: block;
 }
 
-/* 修改2: 优化导航按钮布局 */
-.nav-buttons {
+.nav-bar {
     display: flex;
     justify-content: center;
-    gap: 20px; /* 减少按钮间距 */
-    margin-top: 10px; /* 减少顶部间距 */
-    width: 80%; /* 控制按钮区域宽度 */
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.nav-button {
-    background-color: var(--button-color) !important; /* 修改为FAF9F6 */
-    color: var(--black) !important;
-    text-decoration: none;
-    font-weight: bold;
-    font-size: 20px;
-    padding: 6px 20px !important;
-    border-radius: 24px !important;
-    border: none !important;
-    transition: opacity 0.2s;
-    flex: 1;
-    max-width: 200px;
-    text-align: center;
-}
-
-.nav-button:hover {
-    opacity: 0.8 !important;
+    background-color: var(--white);
+    padding: 15px 0;
+    box-shadow: var(--shadow);
+    margin-bottom: 20px;
 }
 
-.upload-section {
+.nav-links {
+    display: flex;
+    gap: 30px;
     width: 100%;
-    margin: 0 auto 30px;
-    padding: 20px;
-    background-color: var(--text-color) !important;
-    border-radius: 8px;
-    box-shadow: var(--shadow);
-}
-/* 强制底部链接为白色背景 */
-#component-16, /* Use via API 部分 */
-#component-17, /* Settings 部分 */
-#component-18 { /* Built with Gradio 部分 */
-    background-color: var(--white) !important;
+    justify-content: center;
 }
 
-footer .gr-panel,
-.gr-footer,
-.gr-panel:has(a[href*="api"]),  /* 针对Use via API */
-.gr-panel:has(a[href*="settings"]) /* 针对Settings */ {
-    background-color: var(--white) !important;
-    color: var(--black) !important;
+.nav-link {
+    color: var(--black);
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 24px;
+    transition: color 0.2s;
 }
 
+.nav-link:hover {
+    color: var(--link-hover);
+    text-decoration: none;
+}
 
-/* 其他样式保持不变 */
 .result-container {
     display: flex;
     gap: 20px;
@@ -303,19 +295,21 @@ def export_markdown(results):
     except Exception as e:
         raise gr.Error(f"Error exporting markdown: {str(e)}")
 
-
 with gr.Blocks(css=CSS, title="Document Analysis System") as demo:
     results_state = gr.State()
 
-    # 修改1: 将logo和导航按钮整合到一个容器中
-    with gr.Column(elem_classes=["header-container"]):
-        with gr.Column(elem_classes=["logo-container"]):
-            gr.Image("pp-structurev3_altered.png", elem_classes=["logo-img"], show_label=False)
-
-        # 修改2: 使用按钮代替链接
-        with gr.Row(elem_classes=["nav-buttons"]):
-            gr.Button("GitHub", link="https://github.com/PaddlePaddle/PaddleOCR", elem_classes=["nav-button"])
-            gr.Button("Homepage", link="https://paddleocr.ai", elem_classes=["nav-button"])
+    # 添加logo图片
+    with gr.Column(elem_classes=["logo-container"]):
+        gr.Image("英文.png", elem_classes=["logo-img"], show_label=False)
+
+    # 添加导航栏链接
+    with gr.Row(elem_classes=["nav-bar"]):
+        gr.HTML("""
+        <div class="nav-links">
+            <a href="https://github.com/PaddlePaddle/PaddleOCR" class="nav-link" target="_blank">GitHub</a>
+            <a href="https://paddleocr.ai" class="nav-link" target="_blank">Homepage</a>
+        </div>
+        """)
 
     with gr.Column(elem_classes=["upload-section"]):
         file_type = gr.Radio(