diff options
| -rw-r--r-- | html/matt-chat/index.html | 52 |
1 files changed, 23 insertions, 29 deletions
diff --git a/html/matt-chat/index.html b/html/matt-chat/index.html index 2bc594d..d802477 100644 --- a/html/matt-chat/index.html +++ b/html/matt-chat/index.html @@ -201,24 +201,32 @@ let isCatMode = false; // Flag to track cat mode const API_URL = "http://localhost:11434/v1"; + const API_MODELS_ENDPOINT = `${API_URL}/models`; + // Function to handle errors + function handleError(message) { + console.error(message); + addMessage(message, "bot"); + } + + // Function to show loading message + function showLoadingMessage() { + return addMessage("Loading models...", "bot"); + } + + // Function to populate model select dropdown async function populateModelSelect() { const modelSelect = document.getElementById("model-select"); modelSelect.innerHTML = ""; // Clear existing options - // Show loading indicator - const loadingMessage = addMessage("Loading models...", "bot"); - - // Declare modelIds outside the try block + const loadingMessage = showLoadingMessage(); const modelIds = []; try { - const response = await fetch(`${API_URL}/models`); - if (!response.ok) { - throw new Error('Failed to fetch models'); - } - const data = await response.json(); + const response = await fetch(API_MODELS_ENDPOINT); + if (!response.ok) throw new Error('Failed to fetch models'); + const data = await response.json(); console.log("API Response:", data); if (Array.isArray(data.data)) { @@ -227,25 +235,17 @@ option.value = model.id; option.textContent = model.id; // Customize as needed modelSelect.appendChild(option); - - // Add model ID to the array modelIds.push(model.id); }); - console.log("Model IDs:", modelIds); // Debugging log to check model IDs + console.log("Model IDs:", modelIds); } else { - console.error("Expected an array of models, but got:", data); - addMessage("Error: Expected an array of models, but got an unexpected response.", "bot"); + handleError("Expected an array of models, but got: " + JSON.stringify(data)); } } catch (error) { - console.error("Error fetching models:", error); - addMessage("Error fetching models. Please check the console for details.", "bot"); + handleError("Error fetching models: " + error.message); } finally { - // Remove loading indicator loadingMessage.remove(); - - // Check if modelIds is populated before displaying the success message if (modelIds.length > 0) { - // Display a message indicating readiness to chat with the list of models addMessage(`Models loaded successfully! Ready to chat. Available models: ${modelIds.join(', ')}`, "bot"); } else { addMessage("No models available to chat.", "bot"); @@ -255,15 +255,12 @@ document.addEventListener("DOMContentLoaded", () => { populateModelSelect(); // Populate the model select dropdown - - const modelSelect = document.getElementById("model-select"); - // Load the saved model from local storage + const modelSelect = document.getElementById("model-select"); 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); @@ -280,12 +277,9 @@ // Scroll to the new message with a smooth animation messageElement.scrollIntoView({ behavior: "smooth", block: "end" }); - - // Force scroll to bottom in case the scrollIntoView doesn't work in some browsers - chatContainer.scrollTop = chatContainer.scrollHeight; + chatContainer.scrollTop = chatContainer.scrollHeight; // Ensure the chat is scrolled to the bottom - // Return the message element for further manipulation - return messageElement; + return messageElement; // Return the message element for further manipulation } // Fancy format milliseconds into a more readable format |