优化Ai响应样式
This commit is contained in:
parent
2c117c1ca7
commit
87d425cbd3
12
css/chat.css
12
css/chat.css
@ -114,6 +114,18 @@ button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.typing {
|
||||
color: #aaa;
|
||||
font-style: italic;
|
||||
animation: blink 1s steps(1) infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
|
||||
@ -4,58 +4,98 @@ const API_KEY = 'sk-or-v1-4915a672258dc64f8d553da4df271fce635b6cdf86b296d45ccbde
|
||||
const API_URL = 'https://openrouter.ai/api/v1/chat/completions';
|
||||
let messages = [];
|
||||
|
||||
function appendMessage(content, sender, isMarkdown = false) {
|
||||
const chatContainer = document.getElementById('chatContainer');
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.classList.add('message', sender);
|
||||
// 逐字输出 Markdown 并渲染
|
||||
async function typeMarkdownEffect(fullText, container) {
|
||||
let currentText = '';
|
||||
const length = fullText.length;
|
||||
const delay = Math.max(5, 40 - Math.min(length / 1.5, 35)); // 根据长度自动调整速度
|
||||
|
||||
if (isMarkdown) {
|
||||
// 将 Markdown 转为 HTML 并清理
|
||||
const html = DOMPurify.sanitize(marked.parse(content));
|
||||
messageDiv.innerHTML = html;
|
||||
} else {
|
||||
messageDiv.textContent = content;
|
||||
}
|
||||
for (let i = 0; i < length; i++) {
|
||||
currentText += fullText[i];
|
||||
const sanitizedHtml = DOMPurify.sanitize(marked.parse(currentText));
|
||||
container.innerHTML = sanitizedHtml;
|
||||
|
||||
chatContainer.appendChild(messageDiv);
|
||||
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||
// 滚动到底部
|
||||
container.parentElement.scrollTop = container.parentElement.scrollHeight;
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, delay));
|
||||
}
|
||||
}
|
||||
|
||||
// 修改后的 appendMessage：支持逐字输出 + Markdown
|
||||
function appendMessage(content, sender, isMarkdown = false, withTyping = false) {
|
||||
const chatContainer = document.getElementById('chatContainer');
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.classList.add('message', sender);
|
||||
|
||||
chatContainer.appendChild(messageDiv);
|
||||
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||
|
||||
// 处理 AI 打字效果
|
||||
if (isMarkdown && sender === 'bot' && withTyping) {
|
||||
// 先显示“正在输入中...”提示
|
||||
messageDiv.innerHTML = `<em class="typing">正在输入中...</em>`;
|
||||
|
||||
// 稍等一下再逐字渲染（比如 50ms）
|
||||
setTimeout(() => {
|
||||
typeMarkdownEffect(content, messageDiv);
|
||||
}, 50);
|
||||
|
||||
} else if (isMarkdown) {
|
||||
const html = DOMPurify.sanitize(marked.parse(content));
|
||||
messageDiv.innerHTML = html;
|
||||
} else {
|
||||
messageDiv.textContent = content;
|
||||
}
|
||||
}
|
||||
|
||||
// 发送消息（主函数）
|
||||
async function sendMessage() {
|
||||
const inputElem = document.getElementById('userInput');
|
||||
const userMessage = inputElem.value.trim();
|
||||
if (!userMessage) return;
|
||||
const inputElem = document.getElementById('userInput');
|
||||
const userMessage = inputElem.value.trim();
|
||||
if (!userMessage) return;
|
||||
|
||||
appendMessage(userMessage, 'user');
|
||||
messages.push({ role: 'user', content: userMessage });
|
||||
inputElem.value = '';
|
||||
appendMessage(userMessage, 'user');
|
||||
messages.push({ role: 'user', content: userMessage });
|
||||
inputElem.value = '';
|
||||
|
||||
const payload = {
|
||||
model: 'deepseek/deepseek-chat-v3-0324:free',
|
||||
messages: messages
|
||||
};
|
||||
// 👉 提前显示“正在输入中...”并保存 messageDiv 元素引用
|
||||
const chatContainer = document.getElementById('chatContainer');
|
||||
const botMessageDiv = document.createElement('div');
|
||||
botMessageDiv.classList.add('message', 'bot');
|
||||
botMessageDiv.innerHTML = `<em class="typing">正在输入中...</em>`;
|
||||
chatContainer.appendChild(botMessageDiv);
|
||||
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||
|
||||
try {
|
||||
const response = await fetch(API_URL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + API_KEY
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
const payload = {
|
||||
//model: 'deepseek/deepseek-r1:free',
|
||||
model: 'deepseek/deepseek-chat-v3-0324:free',
|
||||
messages: messages
|
||||
};
|
||||
|
||||
const data = await response.json();
|
||||
try {
|
||||
const response = await fetch(API_URL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + API_KEY
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
if (data.choices && data.choices.length > 0) {
|
||||
const botMessage = data.choices[0].message.content;
|
||||
appendMessage(botMessage, 'bot', true); // 这里启用 Markdown 渲染
|
||||
messages.push({ role: 'assistant', content: botMessage });
|
||||
} else {
|
||||
appendMessage('没有收到有效响应，请检查 API 设置。', 'bot');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('请求错误：', error);
|
||||
appendMessage('请求出错：' + error.message, 'bot');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.choices && data.choices.length > 0) {
|
||||
const botMessage = data.choices[0].message.content;
|
||||
|
||||
// ✅ 拿到内容后替换 messageDiv 的内容，逐字打字渲染
|
||||
typeMarkdownEffect(botMessage, botMessageDiv);
|
||||
messages.push({ role: 'assistant', content: botMessage });
|
||||
} else {
|
||||
botMessageDiv.textContent = '没有收到有效响应，请检查 API 设置。';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('请求错误：', error);
|
||||
botMessageDiv.textContent = '请求出错：' + error.message;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user