<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Chatty chat chat chat. A super simple chat interface for the Ollama API.">
<title>matt chat is not a cat</title>
<meta name="theme-color" content="#007BFF">
<link rel="icon" href="cat.png" type="image/x-icon">
<link rel="shortcut icon" href="cat.png" type="image/x-icon">
<link rel="apple-touch-icon" href="cat.png">
<style>
body {
font-family: Arial, sans-serif;
font-size: 22px;
margin: 0;
padding: 20px;
background-color: #f7f7f7;
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
overflow: hidden;
}
#chat-container {
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
padding: 1em;
margin: 0 auto;
flex: 1;
overflow-y: auto;
width: 100%;
max-height: 400px;
}
#user-input {
width: 100%;
padding: 10px;
border-radius: 4px;
border: 1px solid #ddd;
font-size: 16px;
margin-top: 10px;
box-sizing: border-box;
}
#send-button {
padding: 10px 15px;
border-radius: 4px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
margin-top: 10px;
width: 100%;
}
#send-button:hover {
background-color: #0056b3;
}
.model-select-container {
align-self: flex-start;
width: 100%;
display: flex;
justify-content: space-between;
padding: 1em;
}
.model-select-container label {
margin-left: 10px;
}
.message {
white-space: pre-wrap;
margin-bottom: 10px;
padding: 1em;
border-radius: 8px;
background-color: #f1f1f1;
display: block;
max-width: 100%;
}
.user-message {
background-color: #007BFF;
color: white;
text-align: right;
margin-left: 20px;
}
.bot-message {
background-color: #f0f0f0;
color: #333;
text-align: left;
margin-right: 20px;
}
@media (max-width: 600px) {
#chat-container {
max-height: 300px; /* Reduce max height for mobile */
}
}
body.dark-mode {
background-color: #333;
color: #f7f7f7;
}
#chat-container.dark-mode {
background-color: #444;
border: 1px solid #555;
}
#user-input.dark-mode {
background-color: #555;
color: #f7f7f7;
border: 1px solid #666;
}
#send-button.dark-mode {
background-color: #007BFF;
color: white;
}
.message.dark-mode {
background-color: #555;
color: #f7f7f7;
}
.user-message.dark-mode {
background-color: #007BFF;
color: white;
}
.bot-message.dark-mode {
background-color: #666;
color: #f7f7f7;
}
.bot-time {
margin: 0.5em 0;
font-size: 0.9em; /* Smaller font size */
color: #888; /* Lighter color */
text-align: center; /* Center the text */
}
</style>
</head>
<body>
<div class="model-select-container">
<select id="model-select"></select>
<label>
<input type="checkbox" id="retain-history" /> Build Context As You Chat?
</label>
</div>
<div id="chat-container">
<!-- Messages will appear here -->
</div>
<!-- New container for user input and send button -->
<div id="input-container" style="width: 100%; display: flex; flex-direction: column; margin-top: 10px;">
<div id="counter" style="text-align: left; font-size: 0.9em; color: #555;">
Characters: <span id="char-count">0</span> | Words: <span id="word-count">0</span>
</div>
<textarea id="user-input" placeholder="Type your message..."></textarea>
<button id="send-button">Send</button>
</div>
<script>
// ==================================================
// MATT CHAT IS NOT A CAT
// This is a simple chat interface for the Ollama API
// ==================================================
//
// This configuration object is used to define all local variables for your needs
// Set the base url for the ollama api, and then list all the models you want to use
// The context window size is the number of previous exchanges to keep...
// though this is relatively naive at the moment
const config = {
apiUrl: "http://localhost:11434/v1/chat/completions",
models: [
{ value: "llama3.1:8b", label: "llama3.1:8b, general tasks" },
{ value: "llama3.2:latest", label: "llama3.2:latest, general stuff" },
{ value: "qwen2.5-coder:1.5b", label: "qwen2.5-coder:1.5b, fast coding" },
{ value: "qwen2.5-coder:7b", label: "qwen2.5-coder:7b, fast-ish coding" }
],
contextWindowSize: 6, // Number of previous exchanges to remember
systemMessage: "You are a helpful assistant. If you don't know something you'll let me know. Your name is Matt.", // Set the mood and personality for the LLM's responses
maxTokens: 4096, // Approximate max tokens for most models
summarizeThreshold: 3584, // When to trigger summarization
};
let conversationHistory = {
summary: null,
current: [],
full: []
};
let isCatMode = false; // Flag to track cat mode
function populateModelSelect() {
const modelSelect = document.getElementById("model-select");
modelSelect.innerHTML = ""; // Clear existing options
config.models.forEach(model => {
const option = document.createElement("option");
option.value = model.value;
option.textContent = model.label;
modelSelect.appendChild(option);
});
}
document.addEventListener("DOMContentLoaded", () => {
populateModelSelect(); // Populate the model select dropdown
const modelSelect = document.getElementById("model-select");
// Load the saved model from local storage
const savedModel = localStorage.getItem("selectedModel");
if (savedModel) {
modelSelect.value = savedModel;
}
// Save the selected model to local storage when changed
modelSelect.addEventListener("change", () => {
localStorage.setItem("selectedModel", modelSelect.value);
});
});
// Add a message to the chat container
function addMessage(message, sender = "user") {
const chatContainer = document.getElementById("chat-container");
const messageElement = document.createElement("div");
messageElement.classList.add("message", sender === "user" ? "user-message" : "bot-message");
messageElement.textContent = message;
chatContainer.appendChild(messageElement);
chatContainer.scrollTop = chatContainer.scrollHeight; // Try to scroll to the bottom
}
// Fancy format milliseconds into a more readable format
function formatDuration(duration) {
const minutes = Math.floor(duration / (1000 * 60));
const seconds = Math.floor((duration % (1000 * 60)) / 1000);
const milliseconds = duration % 1000;
if (minutes > 0) {
return `${minutes}m ${seconds}.${Math.floor(milliseconds / 10)}s`;
}
return `${seconds}.${Math.floor(milliseconds / 10)}s`;
}
// Character and word counter
function updateCounter() {
const userInput = document.getElementById("user-input");
const charCount = document.getElementById("char-count");
const wordCount = document.getElementById("word-count");
const text = userInput.value;
const characters = text.length;
const words = text.trim() ? text.trim().split(/\s+/).length : 0; // Count words
charCount.textContent = characters;
wordCount.textContent = words;
}
// Event listener to update the counter on input
document.getElementById("user-input").addEventListener("input", updateCounter);
// Function to toggle cat mode
function toggleCatMode() {
isCatMode = !isCatMode; // Toggle the flag
if (isCatMode) {
config.systemMessage += " You are a cat."; // Append the phrase
} else {
config.systemMessage = config.systemMessage.replace(" You are a cat.", ""); // Remove the phrase
}
addMessage(`Cat mode is now ${isCatMode ? "enabled" : "disabled"}.`, "bot"); // Inform the user
}
// Function to handle sending the message
async function sendMessage() {
const userInput = document.getElementById("user-input");
const userMessage = userInput.value.trim();
if (!userMessage) return;
// Check for slash commands
if (userMessage.toLowerCase() === '/darkmode') {
toggleDarkMode();
userInput.value = ""; // Clear input after command
updateCounter(); // Reset counters
return;
}
if (userMessage.toLowerCase() === '/clear') {
clearChat();
userInput.value = ""; // Clear input after command
updateCounter(); // Reset counters
return;
}
if (userMessage.toLowerCase() === '/help') {
displayHelp();
userInput.value = ""; // Clear input after command
updateCounter(); // Reset counters
return;
}
if (userMessage.toLowerCase() === '/cat') {
toggleCatMode(); // Toggle cat mode
userInput.value = ""; // Clear input after command
updateCounter(); // Reset counters
return;
}
if (userMessage.toLowerCase() === '/context') {
const context = viewCurrentContext();
addMessage(`Current conversation has ${context.currentMessages} messages\nEstimated tokens: ${context.estimatedTokens}`, "bot");
return;
}
addMessage(userMessage, "user");
userInput.value = ""; // Add this line back to clear the input
// Reset the counter
document.getElementById("char-count").textContent = "0";
document.getElementById("word-count").textContent = "0";
// Create and add loading indicator
const loadingIndicator = document.createElement("div");
loadingIndicator.id = "loading-indicator";
loadingIndicator.classList.add("message", "bot-message");
loadingIndicator.textContent = "...";
document.getElementById("chat-container").appendChild(loadingIndicator);
// Start animation for this specific indicator
const animationInterval = animateLoadingIndicator(loadingIndicator);
const startTime = Date.now(); // Capture the start time
try {
const modelSelect = document.getElementById("model-select");
const selectedModel = modelSelect.value;
const retainHistory = document.getElementById("retain-history").checked; // Check the checkbox state
// Prepare the messages for the API
const messagesToSend = await prepareMessages(userMessage);
const response = await fetch(config.apiUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
model: selectedModel,
messages: messagesToSend,
}),
});
if (!response.ok) {
throw new Error('Error communicating with Ollama API');
}
const data = await response.json();
console.log("API Response:", data); // Log the response for debugging
if (data.choices && data.choices.length > 0) {
const botResponse = data.choices[0].message.content;
// Clear loading indicator
clearInterval(animationInterval);
loadingIndicator.remove();
// Add bot's response to chat and history
addMessage(botResponse, "bot");
conversationHistory.current.push({ role: "assistant", content: botResponse });
// Calculate and display duration
const duration = Date.now() - startTime;
const timeTakenMessage = formatDuration(duration);
const timeDisplay = document.createElement("div");
timeDisplay.classList.add("bot-time");
timeDisplay.textContent = `Response time: ${timeTakenMessage}`;
document.getElementById("chat-container").appendChild(timeDisplay);
} else {
console.error("No response from API");
loadingIndicator.remove();
addMessage("Sorry, I didn't get a response from the assistant.", "bot");
}
// Optional: Limit the conversation history to the last 10 messages
if (conversationHistory.current.length > 10) {
conversationHistory.current.shift(); // Remove the oldest message
}
} catch (error) {
console.error("Error:", error);
clearInterval(animationInterval);
loadingIndicator.remove();
addMessage("Sorry, there was an error processing your request.", "bot");
}
}
// Basic animmation for the loading indicator
function animateLoadingIndicator(indicator) {
let dots = 0;
return setInterval(() => {
dots = (dots + 1) % 6;
if (indicator && document.contains(indicator)) {
indicator.textContent = '.'.repeat(dots || 1);
}
}, 500);
}
// Event listener for the "Send" button
document.getElementById("send-button").addEventListener("click", sendMessage);
// Use Enter to send the message, too
document.getElementById("user-input").addEventListener("keypress", function (e) {
if (e.key === "Enter") {
e.preventDefault(); // Prevent line break
sendMessage();
}
});
function toggleDarkMode() {
const body = document.body;
const chatContainer = document.getElementById("chat-container");
const userInput = document.getElementById("user-input");
const sendButton = document.getElementById("send-button");
body.classList.toggle("dark-mode");
chatContainer.classList.toggle("dark-mode");
userInput.classList.toggle("dark-mode");
sendButton.classList.toggle("dark-mode");
// Update message classes
const messages = document.querySelectorAll(".message");
messages.forEach(message => {
message.classList.toggle("dark-mode");
});
// Save preference to local storage
const isDarkMode = body.classList.contains("dark-mode");
localStorage.setItem("darkMode", isDarkMode);
}
// Load dark mode preference from local storage on page load
document.addEventListener("DOMContentLoaded", () => {
const darkModePreference = localStorage.getItem("darkMode");
if (darkModePreference === "true") {
toggleDarkMode(); // Activate dark mode if preference is set
}
});
function clearChat() {
const chatContainer = document.getElementById("chat-container");
chatContainer.innerHTML = "";
conversationHistory = {
summary: null,
current: [],
full: []
};
}
function displayHelp() {
const helpMessage = `
Available commands:\n
/darkmode - Toggle dark mode
/cat - Toggle cat mode
/clear - Clear the chat history
/help - Show this message
`;
addMessage(helpMessage, "bot"); // Display help message as a bot message
}
function estimateTokens(text) {
// Rough estimation: ~4 chars per token for English text
return Math.ceil(text.length / 4);
}
function getContextSize(messages) {
return messages.reduce((sum, msg) => sum + estimateTokens(msg.content), 0);
}
async function summarizeConversation(messages) {
try {
const modelSelect = document.getElementById("model-select");
const selectedModel = modelSelect.value;
const response = await fetch(config.apiUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
model: selectedModel,
messages: messages,
}),
});
const data = await response.json();
return data.choices[0].message.content;
} catch (error) {
console.error("Error summarizing conversation:", error);
return null;
}
}
async function prepareMessages(userMessage) {
const messages = [];
// Always start with system message
messages.push({ role: "system", content: config.systemMessage });
if (document.getElementById("retain-history").checked) {
// If we have a summary, add it more naturally
if (conversationHistory.summary) {
messages.push({
role: "system",
content: `Previous discussion: ${conversationHistory.summary}`
});
}
// Add current conversation segment
messages.push(...conversationHistory.current);
}
// We'll add the new message to history here, before we check for summarization
const newMessage = { role: "user", content: userMessage };
conversationHistory.current.push(newMessage);
messages.push(newMessage);
// Check if we need to summarize
const totalTokens = getContextSize(messages);
if (totalTokens > config.summarizeThreshold) {
// Move current messages to full history, except for the newest message
conversationHistory.full.push(...conversationHistory.current.slice(0, -1));
// Create a more natural summarization prompt
const summary = await summarizeConversation([
{
role: "system",
content: "Summarize this conversation's key points and context that would be important for continuing the discussion naturally. Be concise but maintain essential details."
},
...conversationHistory.full
]);
if (summary) {
conversationHistory.summary = summary;
// Keep only the most recent messages for immediate context
conversationHistory.current = conversationHistory.current.slice(-4);
// Rebuild messages array with new summary
return [
{ role: "system", content: config.systemMessage },
{ role: "system", content: `Previous discussion: ${summary}` },
...conversationHistory.current
];
}
}
return messages;
}
// Add a function to clean up old messages periodically
function pruneConversationHistory() {
if (conversationHistory.full.length > 100) {
// Keep only the last 100 messages in full history
conversationHistory.full = conversationHistory.full.slice(-100);
}
}
// Call this after successful responses
setInterval(pruneConversationHistory, 60000); // Clean up every minute
// Add these functions to help debug and manage context
function viewCurrentContext() {
const context = {
summary: conversationHistory.summary,
currentMessages: conversationHistory.current.length,
fullHistoryMessages: conversationHistory.full.length,
estimatedTokens: getContextSize(conversationHistory.current)
};
console.log("Current Context:", context);
return context;
}
</script>
</body>
</html>