Update app.py

app.py

@@ -10,20 +10,7 @@ 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
@@ -31,12 +18,14 @@ 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())
         
@@ -49,7 +38,7 @@ class FastGPTChat:
             })
         
         # 添加聊天历史
-        for user_msg, bot_msg in chat_history:
+        for user_msg, bot_msg in chat_history[:-1]:  # 不包含最新消息
             messages.append({"role": "user", "content": user_msg})
             messages.append({"role": "assistant", "content": bot_msg})
         
@@ -78,8 +67,9 @@ class FastGPTChat:
             if response.status_code != 200:
                 error_msg = f"API Error: Status {response.status_code}"
                 logger.error(error_msg)
-                chat_history.append((message, f"Error: {error_msg}"))
-                return "", chat_history
+                chat_history[-1] = (message, f"Error: {error_msg}")
+                yield "", chat_history
+                return
             
             # 处理流式响应
             full_response = ""
@@ -93,22 +83,18 @@ class FastGPTChat:
                                 content = data['choices'][0]['delta'].get('content', '')
                                 if content:
                                     full_response += content
-                                    # 更新聊天历史
-                                    if len(chat_history) > 0 and chat_history[-1][0] == message:
-                                        chat_history[-1] = (message, full_response)
-                                    else:
-                                        chat_history.append((message, full_response))
+                                    chat_history[-1] = (message, full_response)
                                     yield "", chat_history
                     except Exception as e:
                         logger.error(f"Error processing stream: {str(e)}")
             
-            return "", chat_history
+            yield "", chat_history
                 
         except requests.exceptions.RequestException as e:
             error_msg = f"Request failed: {str(e)}"
             logger.error(error_msg)
-            chat_history.append((message, f"Error: {error_msg}"))
-            return "", chat_history
+            chat_history[-1] = (message, f"Error: {error_msg}")
+            yield "", chat_history
 
 def create_chat_interface():
     fastgpt_chat = FastGPTChat()
@@ -116,121 +102,148 @@ def create_chat_interface():
     with gr.Blocks(
         title="AI用药咨询助手",
         css="""
-        .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;
+        /* 整体容器样式 */
+        .container { 
+            width: 80%;
+            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;
+        }
+
+        .title-container h3 {
+            color: #7F8C8D;
+            font-size: 1.2rem;
+            font-weight: normal;
         }
+
+        /* 聊天容器样式 */
         .chat-container { 
-            background-color: #ffffff; 
-            border-radius: 15px; 
-            padding: 20px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            border: 1px solid #e0e0e0;
+            background-color: #FFFFFF;
+            border-radius: 20px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+            padding: 2rem;
+            margin-bottom: 2rem;
         }
+
+        /* 聊天框样式 */
+        .chatbot {
+            background-color: #F8F9FA;
+            border-radius: 15px;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+            height: 600px !important;
+            overflow-y: auto;
+        }
+
+        /* 消息样式 */
+        .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;
+            float: right !important;
+            clear: both !important;
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2) !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;
+            float: left !important;
+            clear: both !important;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
+        }
+
+        /* 输入区域样式 */
+        .input-container {
+            background: white;
+            padding: 1.5rem;
+            border-radius: 15px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+        }
+
         .message-box {
-            border: 2px solid #e0e0e0;
-            border-radius: 10px;
-            background-color: white;
-            transition: all 0.3s ease;
+            border: 2px solid #E5E7EB !important;
+            border-radius: 12px !important;
+            padding: 1rem !important;
+            font-size: 1rem !important;
+            transition: all 0.3s ease !important;
+            background: white !important;
         }
+
         .message-box:focus {
-            border-color: #00b4d8;
-            box-shadow: 0 0 0 2px rgba(0, 180, 216, 0.2);
+            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-color: #00b4d8 !important;
-            border: none !important;
+            background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
             color: white !important;
-            padding: 10px 20px !important;
-            border-radius: 8px !important;
-            transition: all 0.3s ease !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 {
-            background-color: #0077b6 !important;
             transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
         }
+
         .clear-btn {
-            background-color: #ff4757 !important;
-            border: none !important;
+            background: #EF4444 !important;
             color: white !important;
-            padding: 10px 20px !important;
-            border-radius: 8px !important;
-            transition: all 0.3s ease !important;
+            padding: 0.75rem 1.5rem !important;
+            border-radius: 12px !important;
             font-weight: 600 !important;
+            transition: all 0.3s ease !important;
         }
+
         .clear-btn:hover {
-            background-color: #ff6b81 !important;
             transform: translateY(-2px);
-        }
-        .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;
+            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
         }
         """
     ) as interface:
         with gr.Column(elem_classes="container"):
-            gr.Markdown(
-                """
-                # 🏥 AI用药咨询助手
-                ### 您的专业用药咨询顾问，随时为您解答用药相关问题
-                """
-            )
+            with gr.Column(elem_classes="title-container"):
+                gr.Markdown(
+                    """
+                    # 🏥 AI用药咨询助手
+                    ### 您的专业用药咨询顾问，随时为您解答用药相关问题
+                    """
+                )
             
             with gr.Column(elem_classes="chat-container"):
                 chatbot = gr.Chatbot(
-                    height=500,
+                    height=600,
                     container=False,
                     elem_classes="chatbot",
                     show_label=False,
@@ -238,28 +251,26 @@ def create_chat_interface():
                     avatar_images=("👤", "🤖")
                 )
                 
-                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):
+                with gr.Column(elem_classes="input-container"):
+                    message = gr.Textbox(
+                        show_label=False,
+                        placeholder="请输入您的用药问题...",
+                        container=False,
+                        elem_classes="message-box",
+                        lines=3
+                    )
+                    
+                    with gr.Row(elem_classes="button-container"):
                         submit = gr.Button(
                             "发送 💊", 
                             variant="primary",
                             elem_classes="submit-btn"
                         )
-                
-                with gr.Row(elem_id="control-container"):
-                    clear = gr.Button(
-                        "清空对话 🗑️", 
-                        variant="secondary",
-                        elem_classes="clear-btn"
-                    )
+                        clear = gr.Button(
+                            "清空对话 🗑️", 
+                            variant="secondary",
+                            elem_classes="clear-btn"
+                        )
         
         # 设置事件处理
         submit_click = submit.click(