diff --git a/css/body.css b/css/body.css
index 8afb26b..7ec8bfa 100644
--- a/css/body.css
+++ b/css/body.css
@@ -9,7 +9,7 @@ body, html {
 /*主内容区test*/
 .container {
     width: 60%;
-    margin: 10% auto 0;
+    margin: 4% auto 0;
     background-color: #f0f0f0;
     padding: 2% 5%;
     border-radius: 10px
diff --git a/css/chat.css b/css/chat.css
new file mode 100644
index 0000000..3679268
--- /dev/null
+++ b/css/chat.css
@@ -0,0 +1,20 @@
+/* 简单样式，仅用于展示 */
+#chatContainer {
+    border: 1px solid #ccc;
+    padding: 10px;
+    height: 50px;
+    overflow-y: auto;
+    margin-bottom: 10px;
+  }
+  .message {
+    margin: 5px 0;
+    padding: 5px;
+  }
+  .user {
+    color: blue;
+    text-align: right;
+  }
+  .bot {
+    color: green;
+    text-align: left;
+  }
\ No newline at end of file
diff --git a/index.html b/index.html
index b61b9f9..eda8137 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <title>DreamLife|HomePage</title>
     <link rel="stylesheet" href="css/footer.css">
     <link rel="stylesheet" href="css/body.css">
+    <link rel="stylesheet" href="css/chat.css">
 </head>
 
 <body>
@@ -19,6 +20,11 @@
         </ul>
         <h2>您的当前区域时间</h2>
         <p id="timeDisplay">加载中...</p>
+
+        <h1>DeepSeek 聊天界面</h1>
+        <div id="chatContainer"></div>
+        <input type="text" id="userInput" placeholder="输入你的消息...">
+        <button onclick="sendMessage()">发送</button>
     </div>
     
     <footer>
@@ -26,6 +32,7 @@
     </footer>
 
     <script src="javascape/time.js"></script>
-    
+    <script src="javascape/ai_api.js"></script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/javascape/ai_api.js b/javascape/ai_api.js
new file mode 100644
index 0000000..65c1d88
--- /dev/null
+++ b/javascape/ai_api.js
@@ -0,0 +1,57 @@
+const API_KEY = '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';
+const API_URL = 'https://openrouter.ai/api/v1/chat/completions';
+let messages = [];
+
+function appendMessage(content, sender) {
+  const chatContainer = document.getElementById('chatContainer');
+  const messageDiv = document.createElement('div');
+  messageDiv.classList.add('message', sender);
+  messageDiv.textContent = content;
+  chatContainer.appendChild(messageDiv);
+  chatContainer.scrollTop = chatContainer.scrollHeight;
+}
+
+async function sendMessage() {
+  const inputElem = document.getElementById('userInput');
+  const userMessage = inputElem.value.trim();
+  if (!userMessage) return;
+
+  appendMessage(userMessage, 'user');
+  messages.push({ role: 'user', content: userMessage });
+  inputElem.value = '';
+
+  const payload = {
+    model: 'deepseek/deepseek-r1:free',
+    messages: messages
+  };
+
+  try {
+    const response = await fetch(API_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer ' + API_KEY
+      },
+      body: JSON.stringify(payload)
+    });
+    const data = await response.json();
+
+    if (data.choices && data.choices.length > 0) {
+      const botMessage = data.choices[0].message.content;
+      appendMessage(botMessage, 'bot');
+      messages.push({ role: 'assistant', content: botMessage });
+    } else {
+      appendMessage('没有收到有效响应，请检查 API 设置。', 'bot');
+    }
+  } catch (error) {
+    console.error('请求错误：', error);
+    appendMessage('请求出错：' + error.message, 'bot');
+  }
+}
+
+// 监听回车键事件
+document.getElementById('userInput').addEventListener('keydown', function(event) {
+  if (event.key === 'Enter') {
+    sendMessage();
+  }
+});
\ No newline at end of file
