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,137 +98,141 @@ 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;
-    }
-    .chatbot-row {
-        margin-bottom: 10px;
-        display: flex;
-        align-items: start; /* 对齐消息气泡顶部 */
-        gap: 10px; /* 消息之间的间距 */
-    }
-    .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;
-        margin-left: auto; /* 将用户消息推到右边 */
-    }
-    .chatbot .bot-message {
-        background-color: #e1e1eb; /* 更柔和的Bot消息背景 */
-        color: #333;
-        border-top-left-radius: 5px;
-        margin-right: auto; /* 将 Bot 消息推到左边 */
-    }
-    /* 移除头像 */
-    .chatbot .avatar {
-        display: none;
-    }
-    .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=css
+        css="""
+        /* 整体容器样式 */
+        .container { 
+            width: 90%;
+            max-width: 1000px; /* 最大宽度限制 */
+            margin: auto;
+            padding: 1rem; /* 减小内边距 */
+            box-sizing: border-box;
+        }
+        html, body {
+            height: 100%; /* 设置 html 和 body 的高度 */
+            background-color: #f5f5f5;
+        }
+        /* 标题区域样式 */
+        .title-container {
+            text-align: center;
+            margin-bottom: 1rem; /* 减小下边距 */
+        }
+        .title-container h1 {
+            color: #2C3E50;
+            font-size: 2rem; /* 减小标题字号 */
+            margin-bottom: 0.5rem;
+        }
+        .title-container h3 {
+            color: #7F8C8D;
+            font-size: 1rem; /* 减小副标题字号 */
+            font-weight: normal;
+        }
+        /* 聊天容器样式 */
+        .chat-container { 
+            background-color: #FFFFFF;
+            border-radius: 15px; /* 减小圆角 */
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            padding: 1rem; /* 减小内边距 */
+            margin-bottom: 1rem; /* 减小下边距 */
+        }
+        /* 聊天框样式 */
+        .chatbot {
+            background-color: transparent;
+            border-radius: 15px;
+            padding: 0; /* 移除内边距 */
+            margin-bottom: 1rem; /* 减小下边距 */
+            height: calc(100vh - 350px) !important; /* 动态计算高度 */
+            min-height: 300px; /* 最小高度 */
+            overflow-y: auto;
+            border: none !important;
+        }
+        /* 消息样式 */
+        .chatbot .user-message {
+            background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
+            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; /* 减小最大宽度 */
+            float: right !important;
+            clear: both !important;
+            box-shadow: 0 2px 6px rgba(99, 102, 241, 0.2) !important;
+        }
+        .chatbot .bot-message {
+            background-color: #f2f2f2 !important;
+            border: none !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; /* 减小最大宽度 */
+            float: left !important;
+            clear: both !important;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
+        }
+        .chatbot .user-message p, .chatbot .bot-message p{
+            margin: 0 !important;
+            line-height: 1.5 !important;
+        }
+        .chatbot .user-message:before, .chatbot .bot-message:before {
+            content: none !important;
+        }
+        .chatbot .user-message:after, .chatbot .bot-message:after {
+            content: none !important;
+        }
+        /* 输入区域样式 */
+        .input-container {
+            background: white;
+            padding: 1rem; /* 减小内边距 */
+            border-radius: 15px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+        }
+        .message-box {
+            border: 1px solid #E5E7EB !important; /* 减小边框宽度 */
+            border-radius: 12px !important;
+            padding: 0.8rem !important; /* 减小内边距 */
+            font-size: 0.9rem !important; /* 减小字号 */
+            transition: all 0.3s ease !important;
+            background: white !important;
+        }
+        .message-box:focus {
+            border-color: #6366F1 !important;
+            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important; /* 减小阴影 */
+        }
+        /* 按钮样式 */
+        .button-container {
+            display: flex;
+            gap: 0.5rem; /* 减小间距 */
+            margin-top: 0.5rem; /* 减小上边距 */
+        }
+        .submit-btn {
+            background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
+            color: white !important;
+            padding: 0.6rem 1.2rem !important; /* 减小内边距 */
+            border-radius: 12px !important;
+            font-weight: 500 !important; /* 减小字重 */
+            transition: all 0.3s ease !important;
+            flex: 1;
+        }
+        .submit-btn:hover {
+            transform: translateY(-1px); /* 减小位移 */
+            box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3) !important; /* 减小阴影 */
+        }
+        .clear-btn {
+            background: #EF4444 !important;
+            color: white !important;
+            padding: 0.6rem 1.2rem !important; /* 减小内边距 */
+            border-radius: 12px !important;
+            font-weight: 500 !important; /* 减小字重 */
+            transition: all 0.3s ease !important;
+        }
+        .clear-btn:hover {
+            transform: translateY(-1px); /* 减小位移 */
+            box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important; /* 减小阴影 */
+        }
+        """
     ) as interface:
         with gr.Column(elem_classes="container"):
             with gr.Column(elem_classes="title-container"):
@@ -238,38 +242,39 @@ def create_chat_interface():
                     ### 您的专业用药咨询顾问，随时为您解答用药相关问题
                     """
                 )
-
+            
             with gr.Column(elem_classes="chat-container"):
                 chatbot = gr.Chatbot(
-                    height=None,
+                    height=600,
                     container=False,
                     elem_classes="chatbot",
                     show_label=False,
                     bubble_full_width=False,
-                    avatar_images=None  # 禁用头像
+                    avatar_images=("👤", "🤖")
                 )
-
+                
                 with gr.Column(elem_classes="input-container"):
                     message = gr.Textbox(
                         show_label=False,
                         placeholder="请输入您的用药问题...",
                         container=False,
                         elem_classes="message-box",
-                        lines=3
+                        lines=1, # 减小输入框初始行数
+                        max_lines=5 # 设置最大行数
                     )
-
+                    
                     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(
             fastgpt_chat.chat,
@@ -277,19 +282,17 @@ def create_chat_interface():
             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()
-    # 请检查您的 FASTGPT_API_KEY 和 FASTGPT_BASE_URL 环境变量是否已正确配置
-    # 另外，请确保您的网络连接正常，以便能够调用 API。
-    demo.launch(debug=True)
+    demo.queue().launch(debug=True, server_name="0.0.0.0")