Cx330/DreamLife_HomePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

将主页接入openrouter的api实现ai聊天

Browse Source
This commit is contained in:
张梦南 2025-03-31 22:20:47 +08:00
parent bcec51fae6
commit 767a6aadd5
4 changed files with 86 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/body.css
View File

@ -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

20
css/chat.css Normal file
View File

@ -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;
}

7
index.html
View File

@ -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>

57
javascape/ai_api.js Normal file
View File

@ -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();
}
});