Compare commits
1 Commits
26011801-r
...
25090701-s
| Author | SHA1 | Date | |
|---|---|---|---|
| 86bf82b3e6 |
121
docs/nginx/html/ai-case-04.html
Normal file
121
docs/nginx/html/ai-case-04.html
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
<!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>
|
||||||
190
docs/nginx/html/index.html
Normal file
190
docs/nginx/html/index.html
Normal file
@@ -0,0 +1,190 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<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>
|
||||||
|
<style>
|
||||||
|
/* Custom scrollbar for chat container */
|
||||||
|
.chat-container::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
.chat-container::-webkit-scrollbar-track {
|
||||||
|
background: #f3f4f6;
|
||||||
|
}
|
||||||
|
.chat-container::-webkit-scrollbar-thumb {
|
||||||
|
background: #d1d5db;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.chat-container::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #9ca3af;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-100 min-h-screen flex flex-col">
|
||||||
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="text-center mb-8">
|
||||||
|
<h1 class="text-3xl font-bold text-gray-800">AI Chat</h1>
|
||||||
|
<p class="text-gray-600 mt-2">Simple AI conversation powered by Ollama</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Chat Container -->
|
||||||
|
<div id="chatContainer" class="chat-container bg-white rounded-lg shadow-lg h-96 overflow-y-auto mb-4 p-4 space-y-4 flex flex-col">
|
||||||
|
<!-- Messages will be appended here -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Input Form -->
|
||||||
|
<form id="messageForm" class="flex space-x-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="messageInput"
|
||||||
|
placeholder="Type your message..."
|
||||||
|
class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
id="sendButton"
|
||||||
|
>
|
||||||
|
Send
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const API_BASE = 'http://localhost:8090/api/v1/ollama/generate_stream';
|
||||||
|
const MODEL = 'deepseek-r1:1.5b';
|
||||||
|
const chatContainer = document.getElementById('chatContainer');
|
||||||
|
const messageInput = document.getElementById('messageInput');
|
||||||
|
const sendButton = document.getElementById('sendButton');
|
||||||
|
const messageForm = document.getElementById('messageForm');
|
||||||
|
|
||||||
|
let currentEventSource = null;
|
||||||
|
let currentAIMessageElement = null;
|
||||||
|
|
||||||
|
// Function to add user message to chat
|
||||||
|
function addUserMessage(message) {
|
||||||
|
const messageDiv = document.createElement('div');
|
||||||
|
messageDiv.className = 'flex justify-end mb-4';
|
||||||
|
messageDiv.innerHTML = `
|
||||||
|
<div class="max-w-xs lg:max-w-md px-4 py-2 bg-blue-500 text-white rounded-lg rounded-tr-sm">
|
||||||
|
${escapeHtml(message)}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
chatContainer.appendChild(messageDiv);
|
||||||
|
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to add AI message container
|
||||||
|
function addAIMessageContainer() {
|
||||||
|
const messageDiv = document.createElement('div');
|
||||||
|
messageDiv.className = 'flex justify-start mb-4';
|
||||||
|
messageDiv.id = 'aiMessage';
|
||||||
|
messageDiv.innerHTML = `
|
||||||
|
<div class="max-w-xs lg:max-w-md px-4 py-2 bg-gray-200 text-gray-800 rounded-lg rounded-tl-sm">
|
||||||
|
<span id="aiContent"></span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
chatContainer.appendChild(messageDiv);
|
||||||
|
currentAIMessageElement = document.getElementById('aiContent');
|
||||||
|
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to append text to AI message
|
||||||
|
function appendToAIMessage(text) {
|
||||||
|
if (currentAIMessageElement && text) {
|
||||||
|
currentAIMessageElement.textContent += text;
|
||||||
|
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to escape HTML
|
||||||
|
function escapeHtml(text) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.textContent = text;
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to close EventSource
|
||||||
|
function closeEventSource() {
|
||||||
|
if (currentEventSource) {
|
||||||
|
currentEventSource.close();
|
||||||
|
currentEventSource = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Form submit handler
|
||||||
|
messageForm.addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const message = messageInput.value.trim();
|
||||||
|
if (!message || currentEventSource) return; // Prevent multiple requests
|
||||||
|
|
||||||
|
// Add user message
|
||||||
|
addUserMessage(message);
|
||||||
|
|
||||||
|
// Clear input
|
||||||
|
messageInput.value = '';
|
||||||
|
|
||||||
|
// Disable send button
|
||||||
|
sendButton.disabled = true;
|
||||||
|
sendButton.textContent = 'Sending...';
|
||||||
|
|
||||||
|
// Add AI message container
|
||||||
|
addAIMessageContainer();
|
||||||
|
|
||||||
|
// Prepare API URL
|
||||||
|
const encodedMessage = encodeURIComponent(message);
|
||||||
|
const apiUrl = `${API_BASE}?model=${MODEL}&message=${encodedMessage}`;
|
||||||
|
|
||||||
|
// Create EventSource for streaming
|
||||||
|
currentEventSource = new EventSource(apiUrl);
|
||||||
|
|
||||||
|
currentEventSource.onmessage = (event) => {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(event.data);
|
||||||
|
if (data && data.result) {
|
||||||
|
const content = data.result.output?.content || '';
|
||||||
|
const finishReason = data.result.metadata?.finishReason;
|
||||||
|
|
||||||
|
// Append content if not empty
|
||||||
|
if (content) {
|
||||||
|
appendToAIMessage(content);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for end of stream
|
||||||
|
if (finishReason === 'STOP') {
|
||||||
|
closeEventSource();
|
||||||
|
sendButton.disabled = false;
|
||||||
|
sendButton.textContent = 'Send';
|
||||||
|
currentAIMessageElement = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error parsing SSE data:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
currentEventSource.onerror = (error) => {
|
||||||
|
console.error('EventSource failed:', error);
|
||||||
|
closeEventSource();
|
||||||
|
sendButton.disabled = false;
|
||||||
|
sendButton.textContent = 'Send';
|
||||||
|
console.log(currentAIMessageElement)
|
||||||
|
// if (currentAIMessageElement) {
|
||||||
|
// currentAIMessageElement.textContent += ' (Error: Connection failed)';
|
||||||
|
// }
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle input focus to scroll to bottom
|
||||||
|
messageInput.addEventListener('focus', () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
chatContainer.scrollTop = chatContainer.scrollHeight;
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user