diff --git a/app.py b/app.py index f98dfab4..c8f5e580 100644 --- a/app.py +++ b/app.py @@ -215,6 +215,7 @@ class Gpt4AllWebUI(GPT4AllAPI): while not self.text_queue.empty(): value = self.text_queue.get(False) yield value#.replace("\n","
") + time.sleep(0) except : time.sleep(0.1) @@ -321,7 +322,7 @@ class Gpt4AllWebUI(GPT4AllAPI): app.config['executor'].submit(self.create_chatbot) # Return a success response - return json.dumps({"id": self.current_discussion.discussion_id, "time": timestamp, "welcome_message":self.personality["welcome_message"]}) + return json.dumps({"id": self.current_discussion.discussion_id, "time": timestamp, "welcome_message":self.personality["welcome_message"], "sender":self.personality["name"]}) def update_model_params(self): data = request.get_json() diff --git a/pyGpt4All/extension.py b/pyGpt4All/extension.py index 793b310f..4bf00c23 100644 --- a/pyGpt4All/extension.py +++ b/pyGpt4All/extension.py @@ -6,5 +6,8 @@ from config import load_config, save_config class Extension(): - def __init__(self, metadata_file_path:str) -> None: - self.config = load_config() \ No newline at end of file + def __init__(self, metadata_file_path:str, app) -> None: + self.app = app + self.metadata_file_path = metadata_file_path + self.config = load_config(metadata_file_path) + diff --git a/static/js/audio.js b/static/js/audio.js index cafe7945..bd8ddab1 100644 --- a/static/js/audio.js +++ b/static/js/audio.js @@ -84,7 +84,7 @@ if (!userAgent.match(/firefox|fxios/i)) { const audio_out_button = document.createElement("button"); audio_out_button.title = "Listen to message"; audio_out_button.id = "audio-out-button"; - audio_out_button.classList.add("audio_btn",'bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10"); + audio_out_button.classList.add("audio_btn",'bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded-r', "w-10", "h-10"); audio_out_button.innerHTML = "🕪"; audio_out_button.classList.add("audio-out-button"); container.appendChild(audio_out_button); @@ -137,69 +137,67 @@ if (!userAgent.match(/firefox|fxios/i)) { } function add_audio_in_ui() { - const inputs = document.querySelectorAll("#user-input"); - inputs.forEach((input) => { - // const wrapper = document.createElement("div"); - // wrapper.classList.add("flex", "items-center"); - var btn = document.querySelectorAll("#audio_in_tool"); + const input = document.getElementById("user-input"); + // const wrapper = document.createElement("div"); + // wrapper.classList.add("flex", "items-center"); + var btn = document.querySelectorAll("#audio_in_tool"); - var found = false; - // Iterate through the children - for (var i = 0; i < btn.length; i++) { - var child = btn[i]; - // Check if the wrapper element contains the current child element - if (input.parentNode.parentNode.contains(child)) { - found = true; + var found = false; + // Iterate through the children + for (var i = 0; i < btn.length; i++) { + var child = btn[i]; + // Check if the wrapper element contains the current child element + if (input.parentNode.parentNode.contains(child)) { + found = true; + } + } + + + if (!found) { + const audio_in_button = document.createElement("button"); + audio_in_button.title = "Type with your voice"; + audio_in_button.id = "audio_in_tool"; + audio_in_button.classList.add("audio_btn"); + audio_in_button.innerHTML = "🎤"; + + input.parentNode.parentNode.insertBefore( + audio_in_button, + input.parentNode + ); + + input.classList.add("flex-1"); + audio_in_button.classList.add("ml-2"); + + audio_in_button.addEventListener("click", () => { + if (isStarted) { + recognition.stop(); + isStarted = false; + } else { + recognition.lang = language_select.value; + recognition.start(); + isStarted = true; } + }); + + recognition.addEventListener("result", (event) => { + let transcript = ""; + for (const result of event.results) { + transcript += result[0].transcript; + } + if (transcript != "") { + input.value = transcript; + } + }); + + recognition.addEventListener("start", () => { + audio_in_button.style.backgroundColor = "red"; + audio_in_button.style.boxShadow = "2px 2px 0.5px #808080"; + }); + + recognition.addEventListener("end", () => { + audio_in_button.style.backgroundColor = ""; + audio_in_button.style.boxShadow = ""; + }); } - - - if (!found) { - const audio_in_button = document.createElement("button"); - audio_in_button.title = "Type with your voice"; - audio_in_button.id = "audio_in_tool"; - audio_in_button.classList.add("audio_btn"); - audio_in_button.innerHTML = "🎤"; - - input.parentNode.parentNode.insertBefore( - audio_in_button, - input.parentNode - ); - - input.classList.add("flex-1"); - audio_in_button.classList.add("ml-2"); - - audio_in_button.addEventListener("click", () => { - if (isStarted) { - recognition.stop(); - isStarted = false; - } else { - recognition.lang = language_select.value; - recognition.start(); - isStarted = true; - } - }); - - recognition.addEventListener("result", (event) => { - let transcript = ""; - for (const result of event.results) { - transcript += result[0].transcript; - } - if (transcript != "") { - input.value = transcript; - } - }); - - recognition.addEventListener("start", () => { - audio_in_button.style.backgroundColor = "red"; - audio_in_button.style.boxShadow = "2px 2px 0.5px #808080"; - }); - - recognition.addEventListener("end", () => { - audio_in_button.style.backgroundColor = ""; - audio_in_button.style.boxShadow = ""; - }); - } - }); } } diff --git a/static/js/chat.js b/static/js/chat.js index 545e5a81..26aa46bc 100644 --- a/static/js/chat.js +++ b/static/js/chat.js @@ -52,7 +52,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) { buttonsContainer.style.width = '100%'; buttonsContainer.style.height = '100%'; const clipboardButton = document.createElement('button'); - clipboardButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10"); + clipboardButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', "w-10", "h-10"); clipboardButton.style.float = 'right'; // set the float property to right clipboardButton.style.display = 'inline-block' clipboardButton.innerHTML = ''; @@ -65,7 +65,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) { copyToClipboard(messageTextElement.innerText) }) const resendButton = document.createElement('button'); - resendButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10"); + resendButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', "w-10", "h-10"); resendButton.style.float = 'right'; // set the float property to right resendButton.style.display = 'inline-block' resendButton.innerHTML = ''; @@ -177,7 +177,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) { }); const editButton = document.createElement('button'); - editButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10"); + editButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', "w-10", "h-10", "rounded-l"); editButton.style.float = 'right'; // set the float property to right editButton.style.display = 'inline-block' editButton.innerHTML = ''; @@ -198,7 +198,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) { //buttonsContainer.style.display = "none" const saveButton = document.createElement('button'); - saveButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'my-2', 'ml-2'); + saveButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'my-2', 'ml-2'); saveButton.innerHTML = 'Save'; inputBlock.appendChild(inputField) inputBlock.appendChild(saveButton) @@ -230,7 +230,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) { }); const deleteButton = document.createElement('button'); - deleteButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10"); + deleteButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', "w-10", "h-10"); deleteButton.style.float = 'right'; // set the float property to right deleteButton.style.display = 'inline-block' deleteButton.innerHTML = ''; @@ -252,7 +252,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) { }); }); const rank_up = document.createElement('button'); - rank_up.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10"); + rank_up.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', "w-10", "h-10"); rank_up.title = "Upvote"; rank_up.style.float = 'right'; // set the float property to right rank_up.style.display = 'inline-block' @@ -297,7 +297,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) { }); const rank_down = document.createElement('button'); - rank_down.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10"); + rank_down.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', "w-10", "h-10"); rank_down.title = "Downvote"; rank_down.style.float = 'right'; // set the float property to right rank_down.style.display = 'inline-block' diff --git a/static/js/discussions.js b/static/js/discussions.js index 39e278a3..54194dd4 100644 --- a/static/js/discussions.js +++ b/static/js/discussions.js @@ -54,10 +54,10 @@ function populate_discussions_list() discussions.forEach(discussion => { const buttonWrapper = document.createElement('div'); //buttonWrapper.classList.add('flex', 'space-x-2', 'mt-2'); - buttonWrapper.classList.add('flex', 'items-center', 'mt-2', 'px-2', 'py-1', 'text-left'); + buttonWrapper.classList.add('drop-shadow-sm', 'p-1', 'mx-2', 'my-2', 'flex', 'flex-row', 'space-x-2', 'rounded-lg', 'shadow-lg', 'bg-gray-800', 'hover:bg-gray-700', 'transition-colors', 'duration-300', 'text-left'); const renameButton = document.createElement('button'); - renameButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10"); + renameButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10"); const renameImg = document.createElement('img'); renameImg.src = "/static/images/edit_discussion.png"; renameButton.title = "Rename discussion"; @@ -86,7 +86,7 @@ function populate_discussions_list() }); const renameConfirmButton = document.createElement('button'); - renameConfirmButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'ml-2'); + renameConfirmButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-1', 'px-0', 'rounded', 'ml-2'); renameConfirmButton.textContent = 'Rename'; renameConfirmButton.addEventListener('click', () => { const newTitle = inputField.value; @@ -122,7 +122,7 @@ function populate_discussions_list() dialog.showModal(); }); const deleteButton = document.createElement('button'); - deleteButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10"); + deleteButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10"); const deleteImg = document.createElement('img'); deleteImg.src = "/static/images/delete_discussion.png"; deleteButton.title = "Delete discussion"; @@ -156,7 +156,7 @@ function populate_discussions_list() }); const discussionButton = document.createElement('button'); - discussionButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'ml-2', 'w-full'); + discussionButton.classList.add('bg-gray-500', 'hover:bg-gray-700', 'text-white', 'font-bold', 'py-2', 'px-4', 'rounded', 'ml-2', 'w-full'); discussionButton.textContent = discussion.title; discussionButton.title = "Open discussion"; discussionButton.addEventListener('click', () => { @@ -233,7 +233,7 @@ function populate_menu(){ // Select the new discussion //selectDiscussion(discussionId); chatWindow.innerHTML="" - addMessage("GPT4ALL", data.welcome_message,0); + addMessage(data.sender, data.welcome_message,0); populate_discussions_list() sendbtn.style.display="block"; diff --git a/static/js/main.js b/static/js/main.js index 2bce0560..7dd1c837 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -2,6 +2,14 @@ function update_main(){ const chatWindow = document.getElementById('chat-window'); const chatForm = document.getElementById('chat-form'); const userInput = document.getElementById('user-input'); + + 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(); @@ -18,9 +26,6 @@ function update_main(){ waitAnimation.style.display="block"; console.log("Sending message to bot") - let hiddenElement = undefined - let messageTextElement = undefined - user_msg = addMessage('',message, 0, 0, can_edit=true); bot_msg = addMessage('', '', 0, 0, can_edit=true); @@ -73,8 +78,8 @@ function update_main(){ bot_msg.setSender(infos.bot); bot_msg.setID(infos.response_id); - messageTextElement = bot_msg.messageTextElement; - hiddenElement = bot_msg.hiddenElement; + bot_msg.messageTextElement; + bot_msg.hiddenElement; entry_counter ++; } else{ @@ -82,8 +87,8 @@ function update_main(){ prefix = "FINAL:"; if(text.startsWith(prefix)){ text = text.substring(prefix.length); - hiddenElement.innerHTML = text - messageTextElement.innerHTML = text + bot_msg.hiddenElement.innerHTML = text + bot_msg.messageTextElement.innerHTML = text } else{ // For the other enrtries, these are just the text of the chatbot @@ -91,8 +96,8 @@ function update_main(){ txt = hiddenElement.innerHTML; if (char != '\f') { txt += char - hiddenElement.innerHTML = txt; - messageTextElement.innerHTML = txt; + bot_msg.hiddenElement.innerHTML = txt; + bot_msg.messageTextElement.innerHTML = txt; } // scroll to bottom of chat window diff --git a/templates/index.html b/templates/index.html index 11c47637..25967fad 100644 --- a/templates/index.html +++ b/templates/index.html @@ -8,7 +8,7 @@ - +

GPT4All - WEBUI

@@ -32,15 +32,15 @@
-
+
-