From 767a6aadd5e607ab78b2f664452a24b98906670d Mon Sep 17 00:00:00 2001 From: Cx330 <1487537121@qq.com> Date: Mon, 31 Mar 2025 22:20:47 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=86=E4=B8=BB=E9=A1=B5=E6=8E=A5=E5=85=A5op?= =?UTF-8?q?enrouter=E7=9A=84api=E5=AE=9E=E7=8E=B0ai=E8=81=8A=E5=A4=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/body.css | 2 +- css/chat.css | 20 ++++++++++++++++ index.html | 9 ++++++- javascape/ai_api.js | 57 +++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 86 insertions(+), 2 deletions(-) create mode 100644 css/chat.css create mode 100644 javascape/ai_api.js 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 @@ DreamLife|HomePage + @@ -19,6 +20,11 @@

您的当前区域时间

加载中...

+ +

DeepSeek 聊天界面

+
+ + - + + \ 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