about summary refs log tree commit diff stats
path: root/html/matt-chat
diff options
context:
space:
mode:
Diffstat (limited to 'html/matt-chat')
-rw-r--r--html/matt-chat/index.html65
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;