Update app.py

app.py

@@ -102,135 +102,113 @@ def create_chat_interface():
     with gr.Blocks(
         title="AI用药咨询助手",
         css="""
-        /* 整体容器样式 */
+        body {
+            background-color: #F4F6F9;
+            font-family: 'Inter', 'PingFang SC', sans-serif;
+        }
         .container { 
-            width: 90%;
-            max-width: 1000px; /* 最大宽度限制 */
-            margin: auto;
-            padding: 1rem; /* 减小内边距 */
+            max-width: 800px;
+            margin: 2rem auto;
+            padding: 1rem;
             box-sizing: border-box;
         }
-        html, body {
-            height: 100%; /* 设置 html 和 body 的高度 */
-            background-color: #f5f5f5;
-        }
-        /* 标题区域样式 */
         .title-container {
             text-align: center;
-            margin-bottom: 1rem; /* 减小下边距 */
+            margin-bottom: 1.5rem;
         }
         .title-container h1 {
             color: #2C3E50;
-            font-size: 2rem; /* 减小标题字号 */
+            font-size: 2.2rem;
+            font-weight: 700;
             margin-bottom: 0.5rem;
         }
         .title-container h3 {
-            color: #7F8C8D;
-            font-size: 1rem; /* 减小副标题字号 */
-            font-weight: normal;
+            color: #6B7280;
+            font-size: 1rem;
+            font-weight: 400;
         }
-        /* 聊天容器样式 */
         .chat-container { 
-            background-color: #FFFFFF;
-            border-radius: 15px; /* 减小圆角 */
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-            padding: 1rem; /* 减小内边距 */
-            margin-bottom: 1rem; /* 减小下边距 */
+            background-color: white;
+            border-radius: 16px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+            overflow: hidden;
         }
-        /* 聊天框样式 */
         .chatbot {
-            background-color: transparent;
-            border-radius: 15px;
-            padding: 0; /* 移除内边距 */
-            margin-bottom: 1rem; /* 减小下边距 */
-            height: calc(100vh - 350px) !important; /* 动态计算高度 */
-            min-height: 300px; /* 最小高度 */
+            height: 500px !important;
+            background-color: #F9FAFB;
+            padding: 1rem;
             overflow-y: auto;
-            border: none !important;
         }
-        /* 消息样式 */
         .chatbot .user-message {
-            background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
+            background: linear-gradient(135deg, #3B82F6, #2563EB);
             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;
+            border-radius: 16px 16px 4px 16px !important;
+            align-self: flex-end !important;
+            max-width: 80% !important;
         }
         .chatbot .bot-message {
-            background-color: #f2f2f2 !important;
-            border: none !important; /* 移除边框 */
+            background: linear-gradient(135deg, #F3F4F6, #FFFFFF);
             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;
+            border: 1px solid #E5E7EB !important;
+            border-radius: 16px 16px 16px 4px !important;
+            align-self: flex-start !important;
+            max-width: 80% !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);
+            padding: 1rem;
+            border-top: 1px solid #E5E7EB;
         }
         .message-box {
-            border: 1px solid #E5E7EB !important; /* 减小边框宽度 */
+            border: 2px solid #E5E7EB !important;
             border-radius: 12px !important;
-            padding: 0.8rem !important; /* 减小内边距 */
-            font-size: 0.9rem !important; /* 减小字号 */
+            padding: 0.75rem !important;
+            font-size: 0.95rem !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; /* 减小阴影 */
+            border-color: #3B82F6 !important;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
         }
-        /* 按钮样式 */
         .button-container {
             display: flex;
-            gap: 0.5rem; /* 减小间距 */
-            margin-top: 0.5rem; /* 减小上边距 */
+            gap: 1rem;
+            margin-top: 1rem;
         }
         .submit-btn {
-            background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
+            background: linear-gradient(135deg, #3B82F6, #2563EB) !important;
             color: white !important;
-            padding: 0.6rem 1.2rem !important; /* 减小内边距 */
+            padding: 0.75rem 1.5rem !important;
             border-radius: 12px !important;
-            font-weight: 500 !important; /* 减小字重 */
+            font-weight: 600 !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; /* 减小阴影 */
+            transform: translateY(-2px);
+            box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3) !important;
         }
         .clear-btn {
             background: #EF4444 !important;
             color: white !important;
-            padding: 0.6rem 1.2rem !important; /* 减小内边距 */
+            padding: 0.75rem 1.5rem !important;
             border-radius: 12px !important;
-            font-weight: 500 !important; /* 减小字重 */
+            font-weight: 600 !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; /* 减小阴影 */
+            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;
+            }
         }
         """
     ) as interface: