Update app.py

app.py

@@ -92,25 +92,90 @@ def predict(sequence_input):
 # --- 5. 创建并启动 Gradio 界面 ---
 valid_example_sequence = "CGKSFIWSSTLFKHKRIHTGEKPYKCEECGKAFNHSQILLHIRHKRMHT"[:49]# 简单用49个'A'作为示例，你可以替换成一个更有代表性的序列
 
-demo = gr.Interface(
-    fn=predict,
-    inputs=gr.Textbox(
-        lines=7, 
-        label=" (Input Sequence)", 
-        # 在占位符中提示长度要求
-        placeholder="Please paste your 49-length sequence here, making sure your lysine is in the middle..."
-    ),
-    outputs=gr.Label(num_top_classes=4, label=" (Prediction Probabilities)"),
-    title="CAFN Model Deployment: Multi-label Classifier for Lysine Modifications",
-    # 在描述中明确强调长度要求
-    description="Given a biological sequence as input, the model predicts the probability of it belonging to each of the four classes (Kac, Kcr, Kme, Ksucc).\n\n**Important note: This model requires the input sequence to be 49 characters long.**",
-    # 提供一个或多个长度正确的示例
-    examples=[
-        [valid_example_sequence],
-        # 如果有其他示例，也确保它们长度是49
-        # ["LFPYASLRRWHQNVQDLMVAIDNLQEFFSSLPKGLHLLLRLQFLPQSL"[:49]] 
-    ]
-)
+css = """
+#main-container {
+    max-width: 80%; 
+    margin: auto;
+}
+#navbar {
+    display: flex; 
+    justify-content: space-between; 
+    align-items: center; 
+    padding: 1rem 1.5rem; 
+    background-color: #f5f5f5;
+    border-bottom: 1px solid #e0e0e0;
+}
+#logo {
+    font-size: 1.5em; 
+    font-weight: bold;
+}
+#nav-links a {
+    margin-left: 20px; 
+    text-decoration: none; 
+    color: #333; 
+    font-weight: 500;
+}
+"""
+
+# 使用 gr.Blocks 构建更灵活的布局
+with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo:
+    
+    # --- 第一部分: 导航栏 ---
+    # 使用 gr.HTML 来直接嵌入HTML代码
+    gr.HTML("""
+        <div id="navbar">
+            <div id="logo">DeepKmulti</div>
+            <div id="nav-links">
+                <a href="/">Home</a>
+                <a href="/about">About</a>  <!-- 在Gradio中，这些链接是象征性的 -->
+            </div>
+        </div>
+    """)
+    
+    # 在一个自定义的div容器中组织主要内容，以应用居中和宽度限制
+    with gr.Column(elem_id="main-container"):
+        
+        # --- 第二部分: 标题和描述 ---
+        gr.Markdown(
+            """
+            # CAFN Model Deployment: Multi-label Classifier for Lysine Modifications
+            Given a biological sequence as input, the model predicts the probability of it belonging to each of the four classes (Kac, Kcr, Kme, Ksucc).
+            
+            **Important note: This model requires the input sequence to be 49 characters long.**
+            """
+        )
+
+        # --- 第三部分: 核心交互区 ---
+        with gr.Row():
+            with gr.Column(scale=2):  # 左侧占2/3宽度
+                sequence_input = gr.Textbox(
+                    lines=7, 
+                    label=" (Input Sequence)", 
+                    placeholder="Please paste your 49-length sequence here, making sure your lysine is in the middle..."
+                )
+                submit_button = gr.Button("Predict", variant="primary") # 添加一个明确的提交按钮
+
+            with gr.Column(scale=1):  # 右侧占1/3宽度
+                prediction_output = gr.Label(
+                    num_top_classes=4, 
+                    label=" (Prediction Probabilities)"
+                )
+        
+        # --- 第四部分: 示例 ---
+        gr.Examples(
+            examples=[[valid_example_sequence]],
+            inputs=sequence_input,
+            label="Example Sequence (Click to use)"
+        )
+
+    # --- 逻辑绑定 ---
+    # 将点击按钮的事件与预测函数关联起来
+    submit_button.click(
+        fn=predict, 
+        inputs=sequence_input, 
+        outputs=prediction_output
+    )
+
 
 # 启动应用
 demo.launch()