diff options
Diffstat (limited to 'html/matt-chat')
| -rw-r--r-- | html/matt-chat/index.html | 117 |
1 files changed, 93 insertions, 24 deletions
diff --git a/html/matt-chat/index.html b/html/matt-chat/index.html index 2160c58..12265cc 100644 --- a/html/matt-chat/index.html +++ b/html/matt-chat/index.html @@ -3,31 +3,40 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Ollama chat</title> + <title>matt chat</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f7f7f7; + max-width: 600px; + 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: 20px; - max-width: 600px; + padding: 1em; margin: 0 auto; - height: 400px; + flex: 1; overflow-y: auto; + width: 100%; + max-height: 400px; } #user-input { - width: calc(100% - 20px); + 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; @@ -37,48 +46,81 @@ 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: 10px; + padding: 1em; border-radius: 8px; background-color: #f1f1f1; - max-width: 80%; + display: block; + max-width: 100%; } + .user-message { background-color: #007BFF; color: white; text-align: right; margin-right: 20px; } + .bot-message { background-color: #f0f0f0; color: #333; margin-left: 20px; } + + @media (max-width: 600px) { + #chat-container { + max-height: 300px; /* Reduce max height for mobile */ + } + } </style> </head> <body> + <div class="model-select-container"> + <select id="model-select"> + <option value="llama3.1:8b">llama3.1:8b</option> + <option value="qwen2.5-coder:1.5b">qwen2.5-coder:1.5b</option> + <option value="qwen2.5-coder:7b">qwen2.5-coder:7b</option> + </select> + <label> + <input type="checkbox" id="retain-history" /> Build Context As You Chat? + </label> + </div> + <div id="chat-container"> <!-- Messages will appear here --> </div> - <label for="model-select">Select Model:</label> - <select id="model-select"> - <option value="llama3.1:8b">llama3.1:8b</option> - <option value="qwen2.5-coder:1.5b">qwen2.5-coder:1.5b</option> - <option value="qwen2.5-coder:7b">qwen2.5-coder:7b</option> - </select> - - <textarea id="user-input" placeholder="Type your message..."></textarea> - <button id="send-button">Send</button> + <!-- New container for user input and send button --> + <div id="input-container" style="width: 100%; display: flex; flex-direction: column; margin-top: 10px;"> + <textarea id="user-input" placeholder="Type your message..."></textarea> + <button id="send-button">Send</button> + </div> <script> + let conversationHistory = []; // Array to hold the conversation history + const contextWindowSize = 3; // Number of previous exchanges to keep + // Function to add a message to the chat container function addMessage(message, sender = "user") { const chatContainer = document.getElementById("chat-container"); @@ -97,6 +139,7 @@ if (!userMessage) return; addMessage(userMessage, "user"); + conversationHistory.push({ role: "user", content: userMessage }); // Add user message to history userInput.value = ""; // Create and add loading indicator @@ -112,6 +155,18 @@ 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 = [ + { role: "system", content: "You are a helpful assistant." }, // System message for context + { role: "user", content: userMessage } // Always include the current user message + ]; + + // Include conversation history only if the checkbox is checked + if (retainHistory) { + messagesToSend.push(...conversationHistory.slice(-contextWindowSize * 2)); // Get the last few exchanges + } const response = await fetch("http://localhost:11434/v1/chat/completions", { method: "POST", @@ -120,7 +175,7 @@ }, body: JSON.stringify({ model: selectedModel, - messages: [{ role: "user", content: userMessage }], + messages: messagesToSend, }), }); @@ -130,14 +185,28 @@ // Handle the response const data = await response.json(); - const botResponse = data.choices[0].message.content; + console.log("API Response:", data); // Log the response for debugging - // Clear loading indicator - clearInterval(animationInterval); - loadingIndicator.remove(); + 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 - addMessage(botResponse, "bot"); + // Add bot's response to chat + addMessage(botResponse, "bot"); + conversationHistory.push({ role: "bot", content: botResponse }); // Add bot response to history + } 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.length > 10) { + conversationHistory.shift(); // Remove the oldest message + } } catch (error) { console.error("Error:", error); @@ -166,7 +235,7 @@ function animateLoadingIndicator(indicator) { let dots = 0; return setInterval(() => { - dots = (dots + 1) % 4; + dots = (dots + 1) % 6; if (indicator && document.contains(indicator)) { indicator.textContent = '.'.repeat(dots || 1); } |