diff options
| author | elioat <{ID}+{username}@users.noreply.github.com> | 2025-01-03 10:25:16 -0500 |
|---|---|---|
| committer | elioat <{ID}+{username}@users.noreply.github.com> | 2025-01-03 10:25:16 -0500 |
| commit | 5a9765f94b615a69fa17c130da1282d39204f7e3 (patch) | |
| tree | 7b384342765c899777eb10733ab2cdee378c4b12 /html/matt-chat | |
| parent | 6416bd78e0c4cab6889a5f0590c77249a11f7ecb (diff) | |
| download | tour-5a9765f94b615a69fa17c130da1282d39204f7e3.tar.gz | |
*
Diffstat (limited to 'html/matt-chat')
| -rw-r--r-- | html/matt-chat/index.html | 90 |
1 files changed, 84 insertions, 6 deletions
diff --git a/html/matt-chat/index.html b/html/matt-chat/index.html index dcbb4a5..1b962be 100644 --- a/html/matt-chat/index.html +++ b/html/matt-chat/index.html @@ -129,16 +129,20 @@ 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"> - <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> + <select id="model-select"></select> <label> <input type="checkbox" id="retain-history" /> Build Context As You Chat? </label> @@ -150,6 +154,9 @@ <!-- 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> @@ -210,6 +217,30 @@ chatContainer.scrollTop = chatContainer.scrollHeight; // Auto-scroll to the bottom } + // Function to format milliseconds into a readable format + function formatDuration(duration) { + const seconds = Math.floor(duration / 1000); + const milliseconds = duration % 1000; + return `${seconds}.${Math.floor(milliseconds / 10)} seconds`; // Display seconds and milliseconds + } + + // Function to update the character and word count + 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 handle sending the message async function sendMessage() { const userInput = document.getElementById("user-input"); @@ -217,17 +248,33 @@ if (!userMessage) return; - // Check for dark mode toggle command + // Check for slash commands if (userMessage.toLowerCase() === '/darkmode') { toggleDarkMode(); userInput.value = ""; // Clear input after command return; } + if (userMessage.toLowerCase() === '/clear') { + clearChat(); + userInput.value = ""; // Clear input after command + return; + } + + if (userMessage.toLowerCase() === '/help') { + displayHelp(); + userInput.value = ""; // Clear input after command + return; + } + addMessage(userMessage, "user"); conversationHistory.push({ role: "user", content: userMessage }); // Add user message to history userInput.value = ""; + // 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"; @@ -238,6 +285,8 @@ // 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; @@ -276,6 +325,9 @@ if (data.choices && data.choices.length > 0) { const botResponse = data.choices[0].message.content; + // Calculate the duration + const duration = Date.now() - startTime; // Time taken in milliseconds + // Clear loading indicator clearInterval(animationInterval); loadingIndicator.remove(); @@ -283,6 +335,14 @@ // Add bot's response to chat addMessage(botResponse, "bot"); conversationHistory.push({ role: "bot", content: botResponse }); // Add bot response to history + + // Display the time taken + const timeTakenMessage = formatDuration(duration); + const timeDisplay = document.createElement("div"); + timeDisplay.classList.add("bot-time"); + timeDisplay.textContent = `Response time: ${timeTakenMessage}`; + timeDisplay.style.textAlign = "center"; // Center the text + document.getElementById("chat-container").appendChild(timeDisplay); // Append the time display } else { console.error("No response from API"); loadingIndicator.remove(); @@ -354,6 +414,24 @@ toggleDarkMode(); // Activate dark mode if preference is set } }); + + // Function to clear the chat + function clearChat() { + const chatContainer = document.getElementById("chat-container"); + chatContainer.innerHTML = ""; // Clear all messages + conversationHistory = []; // Clear the conversation history + } + + // Function to display help information + function displayHelp() { + const helpMessage = ` + Available commands: + /darkmode - Toggle dark mode + /clear - Clear the chat history + /help - Show this help message + `; + addMessage(helpMessage, "bot"); // Display help message as a bot message + } </script> </body> </html> |