Update app.py

app.py

@@ -104,27 +104,26 @@ def create_chat_interface():
         css="""
         /* 整体容器样式 */
         .container { 
-            width: 95vw;
-            height: 95vh;
+            width: 100%;
+            max-width: 800px;
             margin: auto;
-            padding: 1rem;
+            padding: 2rem;
             box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
         }
         /* 标题区域样式 */
         .title-container {
             text-align: center;
-            margin-bottom: 1rem;
+            margin-bottom: 2rem;
         }
         .title-container h1 {
             color: #2C3E50;
-            font-size: 2rem;
+            font-size: 2.5rem;
             margin-bottom: 0.5rem;
+            font-weight: 600;
         }
         .title-container h3 {
             color: #7F8C8D;
-            font-size: 1rem;
+            font-size: 1.2rem;
             font-weight: normal;
         }
         /* 聊天容器样式 */
@@ -132,73 +131,59 @@ def create_chat_interface():
             background-color: #FFFFFF;
             border-radius: 20px;
             box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-            padding: 1rem;
-            margin-bottom: 1rem;
-            flex-grow: 1;
-            display: flex;
-            flex-direction: column;
+            padding: 2rem;
+            margin-bottom: 2rem;
+            max-height: 70vh;
+            overflow: hidden;
         }
         /* 聊天框样式 */
         .chatbot {
-            background-color: #F8F9FA;
-            border-radius: 15px;
+            background-color: #F9F9F9;
+            border-radius: 12px;
             padding: 1rem;
-            margin-bottom: 0.5rem;
-            height: 100%;
+            margin-bottom: 1.5rem;
+            height: 400px;
             overflow-y: auto;
+            box-sizing: border-box;
         }
         /* 消息样式 */
-        .chatbot .gr-box {
-           border: none !important;
-           box-shadow: none !important;
-        }
         .chatbot .user-message {
-            background: linear-gradient(135deg, #6366F1, #4F46E5);
+            background: #5C6BC0;
             color: white !important;
             border-radius: 18px 18px 4px 18px !important;
-            padding: 0.8rem 1.2rem !important;
-            margin: 0.5rem 0 !important;
-            max-width: 70% !important;
+            padding: 1rem 1.5rem !important;
+            margin: 1rem 0 !important;
+            max-width: 80% !important;
             float: right !important;
             clear: both !important;
             box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2) !important;
         }
-        .chatbot .user-message p {
-          color: white !important;
-        }
         .chatbot .bot-message {
-            background: white !important;
-            border: 1px solid #E5E7EB !important;
+            background: #E1E8F0 !important;
+            border: 1px solid #CBD5E0 !important;
             color: #1F2937 !important;
             border-radius: 18px 18px 18px 4px !important;
-            padding: 0.8rem 1.2rem !important;
-            margin: 0.5rem 0 !important;
-            max-width: 70% !important;
+            padding: 1rem 1.5rem !important;
+            margin: 1rem 0 !important;
+            max-width: 80% !important;
             float: left !important;
             clear: both !important;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
         }
-        .chatbot .bot-message p {
-          color: #1F2937 !important;
-        }
         /* 输入区域样式 */
         .input-container {
-            background: white;
-            padding: 1rem;
+            background: #FFFFFF;
+            padding: 1.5rem;
             border-radius: 15px;
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-            display: flex;
-            gap: 0.5rem;
-            align-items: center;
         }
         .message-box {
             border: 2px solid #E5E7EB !important;
             border-radius: 12px !important;
-            padding: 0.8rem !important;
-            font-size: 0.9rem !important;
+            padding: 1rem !important;
+            font-size: 1rem !important;
             transition: all 0.3s ease !important;
-            background: white !important;
-            flex-grow: 1;
+            background: #FFFFFF !important;
         }
         .message-box:focus {
             border-color: #6366F1 !important;
@@ -207,15 +192,17 @@ def create_chat_interface():
         /* 按钮样式 */
         .button-container {
             display: flex;
-            gap: 0.5rem;
+            gap: 1rem;
+            margin-top: 1rem;
         }
         .submit-btn {
             background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
             color: white !important;
-            padding: 0.6rem 1.2rem !important;
+            padding: 0.75rem 1.5rem !important;
             border-radius: 12px !important;
             font-weight: 600 !important;
             transition: all 0.3s ease !important;
+            flex: 1;
         }
         .submit-btn:hover {
             transform: translateY(-2px);
@@ -224,7 +211,7 @@ def create_chat_interface():
         .clear-btn {
             background: #EF4444 !important;
             color: white !important;
-            padding: 0.6rem 1.2rem !important;
+            padding: 0.75rem 1.5rem !important;
             border-radius: 12px !important;
             font-weight: 600 !important;
             transition: all 0.3s ease !important;
@@ -246,39 +233,37 @@ def create_chat_interface():
             
             with gr.Column(elem_classes="chat-container"):
                 chatbot = gr.Chatbot(
-                    label="",
-                    show_label=False,
-                    bubble_full_width=False,
+                    height=400,
                     container=False,
                     elem_classes="chatbot",
+                    show_label=False,
+                    bubble_full_width=False,
                     avatar_images=("👤", "🤖")
                 )
                 
-                with gr.Row(elem_classes="input-container"):
+                with gr.Column(elem_classes="input-container"):
                     message = gr.Textbox(
                         show_label=False,
                         placeholder="请输入您的用药问题...",
                         container=False,
                         elem_classes="message-box",
-                        lines=1,
-                        scale=7
-                    )
-                    submit = gr.Button(
-                        "发送 💊", 
-                        variant="primary",
-                        elem_classes="submit-btn",
-                        scale=1
+                        lines=3
                     )
-                    clear = gr.Button(
-                        "清空对话 🗑️", 
-                        variant="secondary",
-                        elem_classes="clear-btn",
-                        scale=1
-                    )
-
+                    
+                    with gr.Row(elem_classes="button-container"):
+                        submit = gr.Button(
+                            "发送 💊", 
+                            variant="primary",
+                            elem_classes="submit-btn"
+                        )
+                        clear = gr.Button(
+                            "清空对话 🗑️", 
+                            variant="secondary",
+                            elem_classes="clear-btn"
+                        )
         
         # 设置事件处理
-        submit_click = submit.click(
+        submit.click(
             fastgpt_chat.chat,
             inputs=[message, chatbot],
             outputs=[message, chatbot],
@@ -297,4 +282,4 @@ def create_chat_interface():
 
 if __name__ == "__main__":
     demo = create_chat_interface()
-    demo.launch(debug=True)
+    demo.launch(debug=True)