190 lines
5.9 KiB
HTML
190 lines
5.9 KiB
HTML
<!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:7b';
|
|
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> |