diff options
| -rw-r--r-- | html/matt-chat/index.html | 65 |
1 files changed, 46 insertions, 19 deletions
diff --git a/html/matt-chat/index.html b/html/matt-chat/index.html index 8f84363..520a05e 100644 --- a/html/matt-chat/index.html +++ b/html/matt-chat/index.html @@ -3,7 +3,8 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>matt chat</title> + <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> <style> body { font-family: Arial, sans-serif; @@ -154,8 +155,49 @@ </div> <script> + // Configuration object + const config = { + apiUrl: "http://localhost:11434/v1/chat/completions", + models: [ + { value: "llama3.1:8b", label: "llama3.1:8b" }, + { value: "qwen2.5-coder:1.5b", label: "qwen2.5-coder:1.5b" }, + { value: "qwen2.5-coder:7b", label: "qwen2.5-coder:7b" } + ], + contextWindowSize: 3 // Number of previous exchanges to keep + }; + let conversationHistory = []; // Array to hold the conversation history - const contextWindowSize = 3; // Number of previous exchanges to keep + + // Function to populate the model select dropdown + 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); + }); + } + + // Call the function to populate the model select on page load + 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); + }); + }); // Function to add a message to the chat container function addMessage(message, sender = "user") { @@ -208,10 +250,10 @@ // Include conversation history only if the checkbox is checked if (retainHistory) { - messagesToSend.push(...conversationHistory.slice(-contextWindowSize * 2)); // Get the last few exchanges + messagesToSend.push(...conversationHistory.slice(-config.contextWindowSize * 2)); // Get the last few exchanges } - const response = await fetch("http://localhost:11434/v1/chat/completions", { + const response = await fetch(config.apiUrl, { method: "POST", headers: { "Content-Type": "application/json", @@ -259,21 +301,6 @@ } } - document.addEventListener("DOMContentLoaded", () => { - 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); - }); - }); - // Function to animate the loading indicator function animateLoadingIndicator(indicator) { let dots = 0; |