121 lines
4.2 KiB
HTML
121 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Chat</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="bg-gray-100 h-screen">
|
|
<div class="container mx-auto max-w-3xl h-screen flex flex-col">
|
|
<!-- 消息容器 -->
|
|
<div id="messageContainer" class="flex-1 overflow-y-auto p-4 space-y-4 bg-white rounded-lg shadow-lg">
|
|
<!-- 消息历史将在此动态生成 -->
|
|
</div>
|
|
|
|
<!-- 输入区域 -->
|
|
<div class="p-4 bg-white rounded-lg shadow-lg mt-4">
|
|
<div class="flex space-x-2">
|
|
<input
|
|
type="text"
|
|
id="messageInput"
|
|
placeholder="输入消息..."
|
|
class="flex-1 p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
onkeypress="handleKeyPress(event)"
|
|
>
|
|
<button
|
|
onclick="sendMessage()"
|
|
class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
|
|
>
|
|
发送
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 添加消息到容器
|
|
function addMessage(content, isUser = false) {
|
|
const container = document.getElementById('messageContainer');
|
|
const messageDiv = document.createElement('div');
|
|
|
|
messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`;
|
|
messageDiv.innerHTML = `
|
|
<div class="max-w-[80%] p-3 rounded-lg ${
|
|
isUser ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'
|
|
}">
|
|
${content}
|
|
</div>
|
|
`;
|
|
|
|
container.appendChild(messageDiv);
|
|
container.scrollTop = container.scrollHeight; // 滚动到底部
|
|
}
|
|
|
|
// 发送消息
|
|
async function sendMessage() {
|
|
const input = document.getElementById('messageInput');
|
|
const message = input.value.trim();
|
|
|
|
if (!message) return;
|
|
|
|
// 清空输入框
|
|
input.value = '';
|
|
|
|
// 添加用户消息
|
|
addMessage(message, true);
|
|
|
|
// 添加初始AI消息占位
|
|
addMessage('<span class="animate-pulse">▍</span>');
|
|
|
|
// 构建API URL
|
|
const apiUrl = `http://localhost:8090/api/v1/ollama/generate_stream?model=deepseek-r1:1.5b&message=${encodeURIComponent(message)}`;
|
|
|
|
// 使用EventSource接收流式响应
|
|
const eventSource = new EventSource(apiUrl);
|
|
let buffer = '';
|
|
|
|
eventSource.onmessage = (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
const content = data.result?.output?.content || '';
|
|
const finishReason = data.result?.metadata?.finishReason;
|
|
|
|
if (content) {
|
|
buffer += content;
|
|
updateLastMessage(buffer + '<span class="animate-pulse">▍</span>');
|
|
}
|
|
|
|
if (finishReason === 'STOP') {
|
|
eventSource.close();
|
|
updateLastMessage(buffer); // 移除加载动画
|
|
}
|
|
} catch (error) {
|
|
console.error('解析错误:', error);
|
|
}
|
|
};
|
|
|
|
eventSource.onerror = (error) => {
|
|
console.error('EventSource错误:', error);
|
|
eventSource.close();
|
|
};
|
|
}
|
|
|
|
// 更新最后一条消息
|
|
function updateLastMessage(content) {
|
|
const container = document.getElementById('messageContainer');
|
|
const lastMessage = container.lastChild.querySelector('div');
|
|
lastMessage.innerHTML = content;
|
|
container.scrollTop = container.scrollHeight;
|
|
}
|
|
|
|
// 回车发送
|
|
function handleKeyPress(event) {
|
|
if (event.key === 'Enter' && !event.shiftKey) {
|
|
event.preventDefault();
|
|
sendMessage();
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |