Update app.py

app.py

@@ -104,128 +104,131 @@ def create_chat_interface():
         css="""
         /* 整体容器样式 */
         .container { 
-            width: 80%;
+            width: 95vw;
+            height: 95vh;
             margin: auto;
-            padding: 2rem;
+            padding: 1rem;
             box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
         }
-
         /* 标题区域样式 */
         .title-container {
             text-align: center;
-            margin-bottom: 2rem;
+            margin-bottom: 1rem;
         }
-
         .title-container h1 {
             color: #2C3E50;
-            font-size: 2.5rem;
+            font-size: 2rem;
             margin-bottom: 0.5rem;
         }
-
         .title-container h3 {
             color: #7F8C8D;
-            font-size: 1.2rem;
+            font-size: 1rem;
             font-weight: normal;
         }
-
         /* 聊天容器样式 */
         .chat-container { 
             background-color: #FFFFFF;
             border-radius: 20px;
             box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-            padding: 2rem;
-            margin-bottom: 2rem;
+            padding: 1rem;
+            margin-bottom: 1rem;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
         }
-
         /* 聊天框样式 */
         .chatbot {
             background-color: #F8F9FA;
             border-radius: 15px;
-            padding: 1.5rem;
-            margin-bottom: 1.5rem;
-            height: 400px !important;
+            padding: 1rem;
+            margin-bottom: 0.5rem;
+            height: 100%;
             overflow-y: auto;
         }
-
         /* 消息样式 */
+        .chatbot .gr-box {
+           border: none !important;
+           box-shadow: none !important;
+        }
         .chatbot .user-message {
             background: linear-gradient(135deg, #6366F1, #4F46E5);
             color: white !important;
             border-radius: 18px 18px 4px 18px !important;
-            padding: 1rem 1.5rem !important;
-            margin: 1rem 0 !important;
-            max-width: 80% !important;
+            padding: 0.8rem 1.2rem !important;
+            margin: 0.5rem 0 !important;
+            max-width: 70% !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;
             color: #1F2937 !important;
             border-radius: 18px 18px 18px 4px !important;
-            padding: 1rem 1.5rem !important;
-            margin: 1rem 0 !important;
-            max-width: 80% !important;
+            padding: 0.8rem 1.2rem !important;
+            margin: 0.5rem 0 !important;
+            max-width: 70% !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: 1.5rem;
+            padding: 1rem;
             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: 1rem !important;
-            font-size: 1rem !important;
+            padding: 0.8rem !important;
+            font-size: 0.9rem !important;
             transition: all 0.3s ease !important;
             background: white !important;
+            flex-grow: 1;
         }
-
         .message-box:focus {
             border-color: #6366F1 !important;
             box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
         }
-
         /* 按钮样式 */
         .button-container {
             display: flex;
-            gap: 1rem;
-            margin-top: 1rem;
+            gap: 0.5rem;
         }
-
         .submit-btn {
             background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
             color: white !important;
-            padding: 0.75rem 1.5rem !important;
+            padding: 0.6rem 1.2rem !important;
             border-radius: 12px !important;
             font-weight: 600 !important;
             transition: all 0.3s ease !important;
-            flex: 1;
         }
-
         .submit-btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
         }
-
         .clear-btn {
             background: #EF4444 !important;
             color: white !important;
-            padding: 0.75rem 1.5rem !important;
+            padding: 0.6rem 1.2rem !important;
             border-radius: 12px !important;
             font-weight: 600 !important;
             transition: all 0.3s ease !important;
         }
-
         .clear-btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
@@ -243,34 +246,36 @@ def create_chat_interface():
             
             with gr.Column(elem_classes="chat-container"):
                 chatbot = gr.Chatbot(
-                    height=600,
-                    container=False,
-                    elem_classes="chatbot",
+                    label="",
                     show_label=False,
                     bubble_full_width=False,
+                    container=False,
+                    elem_classes="chatbot",
                     avatar_images=("👤", "🤖")
                 )
                 
-                with gr.Column(elem_classes="input-container"):
+                with gr.Row(elem_classes="input-container"):
                     message = gr.Textbox(
                         show_label=False,
                         placeholder="请输入您的用药问题...",
                         container=False,
                         elem_classes="message-box",
-                        lines=3
+                        lines=1,
+                        scale=7
                     )
-                    
-                    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 = gr.Button(
+                        "发送 💊", 
+                        variant="primary",
+                        elem_classes="submit-btn",
+                        scale=1
+                    )
+                    clear = gr.Button(
+                        "清空对话 🗑️", 
+                        variant="secondary",
+                        elem_classes="clear-btn",
+                        scale=1
+                    )
+
         
         # 设置事件处理
         submit_click = submit.click(