Update app.py

app.py

@@ -10,7 +10,20 @@ logging.basicConfig(level=logging.DEBUG)
 logger = logging.getLogger(__name__)
 
 class FastGPTChat:
+    """
+    def __init__(self, api_key="", 
+                 system_prompt="我是一名AI用药咨询顾问，请向我提问有关用药的问题"):
+        self.api_key = api_key
+        self.base_url = "https://api.fastgpt.in/api"
+        self.system_prompt = system_prompt
+        self.headers = {
+            "Authorization": f"Bearer {api_key}",
+            "Content-Type": "application/json"
+        }
+    """
+
     def __init__(self, system_prompt="我是一名AI用药咨询顾问，请向我提问有关用药的问题"):
+        # 从环境变量获取API密钥和基础URL
         self.api_key = os.environ.get('FASTGPT_API_KEY')
         self.base_url = os.environ.get('FASTGPT_BASE_URL', 'https://api.fastgpt.in/api')
         self.system_prompt = system_prompt
@@ -18,14 +31,12 @@ 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())
         
@@ -38,7 +49,7 @@ class FastGPTChat:
             })
         
         # 添加聊天历史
-        for user_msg, bot_msg in chat_history[:-1]:  # 不包含最新消息
+        for user_msg, bot_msg in chat_history:
             messages.append({"role": "user", "content": user_msg})
             messages.append({"role": "assistant", "content": bot_msg})
         
@@ -67,9 +78,8 @@ class FastGPTChat:
             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
+                chat_history.append((message, f"Error: {error_msg}"))
+                return "", chat_history
             
             # 处理流式响应
             full_response = ""
@@ -83,18 +93,22 @@ class FastGPTChat:
                                 content = data['choices'][0]['delta'].get('content', '')
                                 if content:
                                     full_response += content
-                                    chat_history[-1] = (message, full_response)
+                                    # 更新聊天历史
+                                    if len(chat_history) > 0 and chat_history[-1][0] == message:
+                                        chat_history[-1] = (message, full_response)
+                                    else:
+                                        chat_history.append((message, full_response))
                                     yield "", chat_history
                     except Exception as e:
                         logger.error(f"Error processing stream: {str(e)}")
             
-            yield "", chat_history
+            return "", chat_history
                 
         except requests.exceptions.RequestException as e:
             error_msg = f"Request failed: {str(e)}"
             logger.error(error_msg)
-            chat_history[-1] = (message, f"Error: {error_msg}")
-            yield "", chat_history
+            chat_history.append((message, f"Error: {error_msg}"))
+            return "", chat_history
 
 def create_chat_interface():
     fastgpt_chat = FastGPTChat()
@@ -102,128 +116,121 @@ def create_chat_interface():
     with gr.Blocks(
         title="AI用药咨询助手",
         css="""
-        body {
-            background-color: #F4F6F9;
-            font-family: 'Inter', 'PingFang SC', sans-serif;
-        }
-        .container { 
-            max-width: 800px;
-            margin: 2rem auto;
-            padding: 1rem;
-            box-sizing: border-box;
-        }
-        .title-container {
-            text-align: center;
-            margin-bottom: 1.5rem;
-        }
-        .title-container h1 {
-            color: #2C3E50;
-            font-size: 2.2rem;
-            font-weight: 700;
-            margin-bottom: 0.5rem;
-        }
-        .title-container h3 {
-            color: #6B7280;
-            font-size: 1rem;
-            font-weight: 400;
+        .container { max-width: 800px; margin: auto; }
+        .chat-header { 
+            text-align: center; 
+            padding: 20px;
+            background: linear-gradient(135deg, #00b4d8, #0077b6);
+            color: white;
+            border-radius: 15px 15px 0 0;
+            margin-bottom: 20px;
         }
         .chat-container { 
-            background-color: white;
-            border-radius: 16px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
-            overflow: hidden;
-        }
-        .chatbot {
-            height: 500px !important;
-            background-color: #F9FAFB;
-            padding: 1rem;
-            overflow-y: auto;
-        }
-        .chatbot .user-message {
-            background: linear-gradient(135deg, #3B82F6, #2563EB);
-            color: white !important;
-            border-radius: 16px 16px 4px 16px !important;
-            align-self: flex-end !important;
-            max-width: 80% !important;
-        }
-        .chatbot .bot-message {
-            background: linear-gradient(135deg, #F3F4F6, #FFFFFF);
-            color: #1F2937 !important;
-            border: 1px solid #E5E7EB !important;
-            border-radius: 16px 16px 16px 4px !important;
-            align-self: flex-start !important;
-            max-width: 80% !important;
-        }
-        .input-container {
-            background: white;
-            padding: 1rem;
-            border-top: 1px solid #E5E7EB;
+            background-color: #ffffff; 
+            border-radius: 15px; 
+            padding: 20px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            border: 1px solid #e0e0e0;
         }
         .message-box {
-            border: 2px solid #E5E7EB !important;
-            border-radius: 12px !important;
-            padding: 0.75rem !important;
-            font-size: 0.95rem !important;
-            transition: all 0.3s ease !important;
-            background: white !important;
+            border: 2px solid #e0e0e0;
+            border-radius: 10px;
+            background-color: white;
+            transition: all 0.3s ease;
         }
         .message-box:focus {
-            border-color: #3B82F6 !important;
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
-        }
-        .button-container {
-            display: flex;
-            gap: 1rem;
-            margin-top: 1rem;
+            border-color: #00b4d8;
+            box-shadow: 0 0 0 2px rgba(0, 180, 216, 0.2);
         }
         .submit-btn {
-            background: linear-gradient(135deg, #3B82F6, #2563EB) !important;
+            background-color: #00b4d8 !important;
+            border: none !important;
             color: white !important;
-            padding: 0.75rem 1.5rem !important;
-            border-radius: 12px !important;
-            font-weight: 600 !important;
+            padding: 10px 20px !important;
+            border-radius: 8px !important;
             transition: all 0.3s ease !important;
-            flex: 1;
+            font-weight: 600 !important;
         }
         .submit-btn:hover {
+            background-color: #0077b6 !important;
             transform: translateY(-2px);
-            box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3) !important;
         }
         .clear-btn {
-            background: #EF4444 !important;
+            background-color: #ff4757 !important;
+            border: none !important;
             color: white !important;
-            padding: 0.75rem 1.5rem !important;
-            border-radius: 12px !important;
-            font-weight: 600 !important;
+            padding: 10px 20px !important;
+            border-radius: 8px !important;
             transition: all 0.3s ease !important;
+            font-weight: 600 !important;
         }
         .clear-btn:hover {
+            background-color: #ff6b81 !important;
             transform: translateY(-2px);
-            box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3) !important;
         }
-        @media (max-width: 600px) {
-            .container {
-                margin: 1rem;
-                padding: 0.5rem;
-            }
-            .chatbot {
-                height: 400px !important;
-            }
+        .chatbot {
+            background-color: #f8f9fa;
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 20px;
+        }
+        /* 移除消息背景的白色遮盖，优化对话样式 */
+        .chatbot > div {
+            background: transparent !important;
+        }
+        /* 用户消息样式 */
+        .chatbot .user-message {
+            background-color: #fce4ec !important;
+            border-radius: 15px 15px 2px 15px !important;
+            padding: 12px 18px !important;
+            margin: 8px 0 !important;
+            max-width: 85% !important;
+            float: right !important;
+            clear: both !important;
+            border: 1px solid #f48fb1 !important;
+            color: #1a1a1a !important;
+            font-size: 15px !important;
+        }
+        /* AI响应消息样式 */
+        .chatbot .bot-message {
+            background-color: #e8f5e9 !important;
+            border-radius: 15px 15px 15px 2px !important;
+            padding: 12px 18px !important;
+            margin: 8px 0 !important;
+            max-width: 85% !important;
+            float: left !important;
+            clear: both !important;
+            border: 1px solid #a5d6a7 !important;
+            color: #1a1a1a !important;
+            font-size: 15px !important;
+        }
+        /* 消息容器样式 */
+        .chatbot > div > div {
+            padding: 0 !important;
+            gap: 2rem !important;
+        }
+        /* 头像样式 */
+        .chatbot span.avatar {
+            padding: 8px !important;
+            margin: 8px !important;
+        }
+        /* 确保消息之间有适当的间距 */
+        .chatbot > div > div:not(:last-child) {
+            margin-bottom: 15px !important;
         }
         """
     ) as interface:
         with gr.Column(elem_classes="container"):
-            with gr.Column(elem_classes="title-container"):
-                gr.Markdown(
-                    """
-                    # 🏥 AI用药咨询助手
-                    ### 您的专业用药咨询顾问，随时为您解答用药相关问题
-                    """
-                )
+            gr.Markdown(
+                """
+                # 🏥 AI用药咨询助手
+                ### 您的专业用药咨询顾问，随时为您解答用药相关问题
+                """
+            )
             
             with gr.Column(elem_classes="chat-container"):
                 chatbot = gr.Chatbot(
-                    height=600,
+                    height=500,
                     container=False,
                     elem_classes="chatbot",
                     show_label=False,
@@ -231,27 +238,28 @@ def create_chat_interface():
                     avatar_images=("👤", "🤖")
                 )
                 
-                with gr.Column(elem_classes="input-container"):
-                    message = gr.Textbox(
-                        show_label=False,
-                        placeholder="请输入您的用药问题...",
-                        container=False,
-                        elem_classes="message-box",
-                        lines=1, # 减小输入框初始行数
-                        max_lines=5 # 设置最大行数
-                    )
-                    
-                    with gr.Row(elem_classes="button-container"):
+                with gr.Row(elem_id="input-container"):
+                    with gr.Column(scale=8):
+                        message = gr.Textbox(
+                            show_label=False,
+                            placeholder="请输入您的用药问题...",
+                            container=False,
+                            elem_classes="message-box",
+                            lines=2
+                        )
+                    with gr.Column(scale=1, min_width=100):
                         submit = gr.Button(
                             "发送 💊", 
                             variant="primary",
                             elem_classes="submit-btn"
                         )
-                        clear = gr.Button(
-                            "清空对话 🗑️", 
-                            variant="secondary",
-                            elem_classes="clear-btn"
-                        )
+                
+                with gr.Row(elem_id="control-container"):
+                    clear = gr.Button(
+                        "清空对话 🗑️", 
+                        variant="secondary",
+                        elem_classes="clear-btn"
+                    )
         
         # 设置事件处理
         submit_click = submit.click(
@@ -273,4 +281,4 @@ def create_chat_interface():
 
 if __name__ == "__main__":
     demo = create_chat_interface()
-    demo.queue().launch(debug=True, server_name="0.0.0.0")
+    demo.launch(debug=True)