function update_main(){ const chatWindow = document.getElementById('chat-window'); const chatForm = document.getElementById('chat-form'); const userInput = document.getElementById('user-input'); const stopGeneration = document.getElementById("stop-generation") stopGeneration.addEventListener('click', (event) =>{ event.preventDefault(); console.log("Stop clicked"); fetch('/stop_gen') .then(response => response.json()) .then(data => { console.log(data); }); }) userInput.addEventListener('keydown', function(event) { if (event.shiftKey && event.key === 'Enter') { event.preventDefault(); userInput.style.height = userInput.scrollHeight + 'px'; userInput.value += '\n'; } }); chatForm.addEventListener('submit', event => { event.preventDefault(); console.log("Submitting") // get user input and clear input field message = userInput.value; userInput.value = ''; // add user message to chat window const sendbtn = document.querySelector("#submit-input") const waitAnimation = document.querySelector("#wait-animation") const stopGeneration = document.querySelector("#stop-generation") sendbtn.style.display="none"; waitAnimation.style.display="block"; stopGeneration.style.display = "block"; console.log("Sending message to bot") user_msg = addMessage('',message, 0, 0, can_edit=true); bot_msg = addMessage('', '', 0, 0, can_edit=true); fetch('/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message }) }).then(function(response) { const stream = new ReadableStream({ start(controller) { const reader = response.body.getReader(); function push() { reader.read().then(function(result) { if (result.done) { sendbtn.style.display="block"; waitAnimation.style.display="none"; stopGeneration.style.display = "none"; console.log(result) controller.close(); return; } controller.enqueue(result.value); push(); }) } push(); } }); const textDecoder = new TextDecoder(); const readableStreamDefaultReader = stream.getReader(); let entry_counter = 0 function readStream() { readableStreamDefaultReader.read().then(function(result) { if (result.done) { return; } text = textDecoder.decode(result.value); // The server will first send a json containing information about the message just sent if(entry_counter==0) { // We parse it and infos = JSON.parse(text); user_msg.setSender(infos.user); user_msg.setMessage(infos.message); user_msg.setID(infos.id); bot_msg.setSender(infos.bot); bot_msg.setID(infos.response_id); bot_msg.messageTextElement; bot_msg.hiddenElement; entry_counter ++; } else{ entry_counter ++; prefix = "FINAL:"; if(text.startsWith(prefix)){ text = text.substring(prefix.length); bot_msg.hiddenElement.innerHTML = text bot_msg.messageTextElement.innerHTML = text } else{ // For the other enrtries, these are just the text of the chatbot for (const char of text) { txt = bot_msg.hiddenElement.innerHTML; if (char != '\f') { txt += char bot_msg.hiddenElement.innerHTML = txt; bot_msg.messageTextElement.innerHTML = txt; } // scroll to bottom of chat window chatWindow.scrollTop = chatWindow.scrollHeight; } } } readStream(); }); } readStream(); }); }); }