Update app.py

app.py

@@ -18,17 +18,17 @@ class FastGPTChat:
             "Authorization": f"Bearer {self.api_key}",
             "Content-Type": "application/json"
         }
-    
+
     def chat(self, message, chat_history):
         if not message.strip():
             return "", chat_history
-        
+
         # 立即添加用户消息到聊天历史
         chat_history.append((message, ""))
         yield "", chat_history
-            
+
         chat_id = str(uuid.uuid4())
-        
+
         # 构建消息历史，包含系统提示词
         messages = []
         if self.system_prompt:
@@ -36,15 +36,15 @@ class FastGPTChat:
                 "role": "system",
                 "content": self.system_prompt
             })
-        
+
         # 添加聊天历史
         for user_msg, bot_msg in chat_history[:-1]:  # 不包含最新消息
             messages.append({"role": "user", "content": user_msg})
             messages.append({"role": "assistant", "content": bot_msg})
-        
+
         # 添加当前用户消息
         messages.append({"role": "user", "content": message})
-        
+
         # 准备请求数据
         data = {
             "chatId": chat_id,
@@ -53,7 +53,7 @@ class FastGPTChat:
             "model": "gpt-4o",
             "messages": messages
         }
-        
+
         try:
             # 发送流式请求
             response = requests.post(
@@ -63,14 +63,14 @@ class FastGPTChat:
                 stream=True,
                 timeout=30
             )
-            
+
             if response.status_code != 200:
                 error_msg = f"API Error: Status {response.status_code}"
                 logger.error(error_msg)
                 chat_history[-1] = (message, f"Error: {error_msg}")
                 yield "", chat_history
                 return
-            
+
             # 处理流式响应
             full_response = ""
             for line in response.iter_lines():
@@ -87,9 +87,9 @@ class FastGPTChat:
                                     yield "", chat_history
                     except Exception as e:
                         logger.error(f"Error processing stream: {str(e)}")
-            
+
             yield "", chat_history
-                
+
         except requests.exceptions.RequestException as e:
             error_msg = f"Request failed: {str(e)}"
             logger.error(error_msg)
@@ -98,129 +98,149 @@ class FastGPTChat:
 
 def create_chat_interface():
     fastgpt_chat = FastGPTChat()
-    
+
+    css = """
+    /* 整体布局调整 */
+    body {
+        font-family: 'Arial', sans-serif;
+        background-color: #f4f7fc;
+        color: #333;
+    }
+    .container {
+        max-width: 900px; /* 限制容器宽度 */
+        margin: 20px auto;
+        padding: 30px;
+        background-color: #fff;
+        border-radius: 15px;
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+    }
+    .title-container {
+        text-align: center;
+        margin-bottom: 30px;
+    }
+    .title-container h1 {
+        color: #007bff;
+        font-size: 2.5rem;
+        margin-bottom: 10px;
+    }
+    .title-container h3 {
+        color: #6c757d;
+        font-size: 1.2rem;
+        font-weight: normal;
+    }
+    /* 聊天区域样式 */
+    .chat-container {
+        background-color: #f9f9f9;
+        border-radius: 10px;
+        margin-bottom: 20px;
+        overflow: hidden; /* 防止内部元素溢出 */
+    }
+    .chatbot {
+        height: auto !important; /* 移除固定高度 */
+        min-height: 400px; /* 设置最小高度 */
+        overflow-y: auto;
+        padding: 15px;
+        display: flex;
+        flex-direction: column;
+    }
+    .chatbot-row {
+        margin-bottom: 10px;
+        display: flex;
+        align-items: start; /* 对齐消息气泡顶部 */
+    }
+    .chatbot .user {
+        justify-content: flex-end;
+    }
+    .chatbot .bot {
+        justify-content: flex-start;
+    }
+    .chatbot .user-message,
+    .chatbot .bot-message {
+        max-width: 75%;
+        padding: 10px 15px;
+        border-radius: 20px;
+        word-wrap: break-word;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
+    }
+    .chatbot .user-message {
+        background-color: #dcf8c6; /* 更清新的用户消息背景 */
+        color: #333;
+        border-top-right-radius: 5px;
+    }
+    .chatbot .bot-message {
+        background-color: #e1e1eb; /* 更柔和的Bot消息背景 */
+        color: #333;
+        border-top-left-radius: 5px;
+    }
+    .chatbot .avatar {
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background-color: #ccc;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 10px;
+    }
+    .chatbot .user .avatar {
+        background-color: #007bff;
+    }
+    .chatbot .bot .avatar {
+        background-color: #6c757d;
+    }
+    .chatbot :last-child {
+        margin-bottom: 0;
+    }
+    /* 输入区域样式 */
+    .input-container {
+        display: flex;
+        gap: 10px;
+    }
+    .message-box {
+        border: 1px solid #ced4da !important;
+        border-radius: 8px !important;
+        padding: 10px !important;
+        font-size: 1rem !important;
+        flex-grow: 1;
+        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
+    }
+    .message-box:focus {
+        border-color: #007bff !important;
+        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
+    }
+    /* 按钮样式 */
+    .button-container {
+        display: flex;
+        gap: 10px;
+    }
+    .submit-btn, .clear-btn {
+        padding: 10px 20px !important;
+        border: none !important;
+        border-radius: 8px !important;
+        color: white !important;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+        font-size: 1rem !important;
+        font-weight: 500 !important;
+    }
+    .submit-btn {
+        background-color: #007bff !important;
+    }
+    .submit-btn:hover {
+        background-color: #0056b3 !important;
+    }
+    .clear-btn {
+        background-color: #dc3545 !important;
+    }
+    .clear-btn:hover {
+        background-color: #bd2130 !important;
+    }
+    """
+
     with gr.Blocks(
         title="AI用药咨询助手",
-        css="""
-        /* 整体容器样式 */
-        .container { 
-            width: 100%;
-            max-width: 800px;
-            margin: auto;
-            padding: 2rem;
-            box-sizing: border-box;
-        }
-        /* 标题区域样式 */
-        .title-container {
-            text-align: center;
-            margin-bottom: 2rem;
-        }
-        .title-container h1 {
-            color: #2C3E50;
-            font-size: 2.5rem;
-            margin-bottom: 0.5rem;
-            font-weight: 600;
-        }
-        .title-container h3 {
-            color: #7F8C8D;
-            font-size: 1.2rem;
-            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;
-            max-height: 70vh;
-            overflow: hidden;
-        }
-        /* 聊天框样式 */
-        .chatbot {
-            background-color: #F9F9F9;
-            border-radius: 12px;
-            padding: 1rem;
-            margin-bottom: 1.5rem;
-            height: 400px;
-            overflow-y: auto;
-            box-sizing: border-box;
-        }
-        /* 消息样式 */
-        .chatbot .user-message {
-            background: #5C6BC0;
-            color: white !important;
-            border-radius: 18px 18px 4px 18px !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 .bot-message {
-            background: #E1E8F0 !important;
-            border: 1px solid #CBD5E0 !important;
-            color: #1F2937 !important;
-            border-radius: 18px 18px 18px 4px !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;
-        }
-        /* 输入区域样式 */
-        .input-container {
-            background: #FFFFFF;
-            padding: 1.5rem;
-            border-radius: 15px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-        }
-        .message-box {
-            border: 2px solid #E5E7EB !important;
-            border-radius: 12px !important;
-            padding: 1rem !important;
-            font-size: 1rem !important;
-            transition: all 0.3s ease !important;
-            background: #FFFFFF !important;
-        }
-        .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;
-        }
-        .submit-btn {
-            background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
-            color: white !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);
-            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;
-            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;
-        }
-        """
+        css=css
     ) as interface:
         with gr.Column(elem_classes="container"):
             with gr.Column(elem_classes="title-container"):
@@ -230,17 +250,17 @@ def create_chat_interface():
                     ### 您的专业用药咨询顾问，随时为您解答用药相关问题
                     """
                 )
-            
+
             with gr.Column(elem_classes="chat-container"):
                 chatbot = gr.Chatbot(
-                    height=400,
+                    height=None,
                     container=False,
                     elem_classes="chatbot",
                     show_label=False,
                     bubble_full_width=False,
                     avatar_images=("👤", "🤖")
                 )
-                
+
                 with gr.Column(elem_classes="input-container"):
                     message = gr.Textbox(
                         show_label=False,
@@ -249,37 +269,37 @@ def create_chat_interface():
                         elem_classes="message-box",
                         lines=3
                     )
-                    
+
                     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],
             api_name="chat"
         )
-        
+
         message.submit(
             fastgpt_chat.chat,
             inputs=[message, chatbot],
             outputs=[message, chatbot]
         )
-        
+
         clear.click(lambda: None, None, chatbot, queue=False)
-        
+
     return interface
 
 if __name__ == "__main__":
     demo = create_chat_interface()
-    demo.launch(debug=True)
+    demo.launch(debug=True)