ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-19 20:37:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

huge progress in ui

Browse Source
This commit is contained in:
Saifeddine ALOUI 2023-04-18 22:50:55 +02:00
parent 36596a136b
commit 2a6ebab6df
7 changed files with 124 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app.py
View File

@ -215,6 +215,7 @@ class Gpt4AllWebUI(GPT4AllAPI):
while not self.text_queue.empty(): while not self.text_queue.empty():
value = self.text_queue.get(False) value = self.text_queue.get(False)
yield value#.replace("\n","<br>") yield value#.replace("\n","<br>")
time.sleep(0)
except : except :
time.sleep(0.1) time.sleep(0.1)

122
static/js/audio.js
View File

@ -84,7 +84,7 @@ if (!userAgent.match(/firefox|fxios/i)) {
const audio_out_button = document.createElement("button"); const audio_out_button = document.createElement("button");
audio_out_button.title = "Listen to message"; audio_out_button.title = "Listen to message";
audio_out_button.id = "audio-out-button"; 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.innerHTML = "🕪";
audio_out_button.classList.add("audio-out-button"); audio_out_button.classList.add("audio-out-button");
container.appendChild(audio_out_button); container.appendChild(audio_out_button);
@ -137,69 +137,67 @@ if (!userAgent.match(/firefox|fxios/i)) {
} }
function add_audio_in_ui() { function add_audio_in_ui() {
const inputs = document.querySelectorAll("#user-input"); const input = document.getElementById("user-input");
inputs.forEach((input) => { // const wrapper = document.createElement("div");
// const wrapper = document.createElement("div"); // wrapper.classList.add("flex", "items-center");
// wrapper.classList.add("flex", "items-center"); var btn = document.querySelectorAll("#audio_in_tool");
var btn = document.querySelectorAll("#audio_in_tool");
var found = false; var found = false;
// Iterate through the children // Iterate through the children
for (var i = 0; i < btn.length; i++) { for (var i = 0; i < btn.length; i++) {
var child = btn[i]; var child = btn[i];
// Check if the wrapper element contains the current child element // Check if the wrapper element contains the current child element
if (input.parentNode.parentNode.contains(child)) { if (input.parentNode.parentNode.contains(child)) {
found = true; 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 = "";
});
}
});
} }
} }

14
static/js/chat.js
View File

@ -52,7 +52,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
buttonsContainer.style.width = '100%'; buttonsContainer.style.width = '100%';
buttonsContainer.style.height = '100%'; buttonsContainer.style.height = '100%';
const clipboardButton = document.createElement('button'); 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.float = 'right'; // set the float property to right
clipboardButton.style.display = 'inline-block' clipboardButton.style.display = 'inline-block'
clipboardButton.innerHTML = ''; clipboardButton.innerHTML = '';
@ -65,7 +65,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
copyToClipboard(messageTextElement.innerText) copyToClipboard(messageTextElement.innerText)
}) })
const resendButton = document.createElement('button'); 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.float = 'right'; // set the float property to right
resendButton.style.display = 'inline-block' resendButton.style.display = 'inline-block'
resendButton.innerHTML = ''; resendButton.innerHTML = '';
@ -177,7 +177,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
}); });
const editButton = document.createElement('button'); 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.float = 'right'; // set the float property to right
editButton.style.display = 'inline-block' editButton.style.display = 'inline-block'
editButton.innerHTML = ''; editButton.innerHTML = '';
@ -198,7 +198,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
//buttonsContainer.style.display = "none" //buttonsContainer.style.display = "none"
const saveButton = document.createElement('button'); 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'; saveButton.innerHTML = 'Save';
inputBlock.appendChild(inputField) inputBlock.appendChild(inputField)
inputBlock.appendChild(saveButton) inputBlock.appendChild(saveButton)
@ -230,7 +230,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
}); });
const deleteButton = document.createElement('button'); 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.float = 'right'; // set the float property to right
deleteButton.style.display = 'inline-block' deleteButton.style.display = 'inline-block'
deleteButton.innerHTML = ''; deleteButton.innerHTML = '';
@ -252,7 +252,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
}); });
}); });
const rank_up = document.createElement('button'); 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.title = "Upvote";
rank_up.style.float = 'right'; // set the float property to right rank_up.style.float = 'right'; // set the float property to right
rank_up.style.display = 'inline-block' 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'); 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.title = "Downvote";
rank_down.style.float = 'right'; // set the float property to right rank_down.style.float = 'right'; // set the float property to right
rank_down.style.display = 'inline-block' rank_down.style.display = 'inline-block'

10
static/js/discussions.js
View File

@ -54,10 +54,10 @@ function populate_discussions_list()
discussions.forEach(discussion => { discussions.forEach(discussion => {
const buttonWrapper = document.createElement('div'); const buttonWrapper = document.createElement('div');
//buttonWrapper.classList.add('flex', 'space-x-2', 'mt-2'); //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'); 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'); const renameImg = document.createElement('img');
renameImg.src = "/static/images/edit_discussion.png"; renameImg.src = "/static/images/edit_discussion.png";
renameButton.title = "Rename discussion"; renameButton.title = "Rename discussion";
@ -86,7 +86,7 @@ function populate_discussions_list()
}); });
const renameConfirmButton = document.createElement('button'); 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.textContent = 'Rename';
renameConfirmButton.addEventListener('click', () => { renameConfirmButton.addEventListener('click', () => {
const newTitle = inputField.value; const newTitle = inputField.value;
@ -122,7 +122,7 @@ function populate_discussions_list()
dialog.showModal(); dialog.showModal();
}); });
const deleteButton = document.createElement('button'); 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'); const deleteImg = document.createElement('img');
deleteImg.src = "/static/images/delete_discussion.png"; deleteImg.src = "/static/images/delete_discussion.png";
deleteButton.title = "Delete discussion"; deleteButton.title = "Delete discussion";
@ -156,7 +156,7 @@ function populate_discussions_list()
}); });
const discussionButton = document.createElement('button'); 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.textContent = discussion.title;
discussionButton.title = "Open discussion"; discussionButton.title = "Open discussion";
discussionButton.addEventListener('click', () => { discussionButton.addEventListener('click', () => {

8
static/js/main.js
View File

@ -2,6 +2,14 @@ function update_main(){
const chatWindow = document.getElementById('chat-window'); const chatWindow = document.getElementById('chat-window');
const chatForm = document.getElementById('chat-form'); const chatForm = document.getElementById('chat-form');
const userInput = document.getElementById('user-input'); 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 => { chatForm.addEventListener('submit', event => {
event.preventDefault(); event.preventDefault();

12
templates/index.html
View File

@ -8,7 +8,7 @@
<link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}" type="image/x-icon"> <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}" type="image/x-icon">
</head> </head>
<body class="w-screen h-500 bg-primary text-gray-400 flex flex-col bg-gray-900"> <body class="w-screen h-500 bg-primary text-gray-400 flex flex-col bg-gray-900 h-screen overflow-hidden">
<div class="w-full h-50 border-b border-accent bg-tertiary text-2xl font-bold flex justify-between items-center px-6 py-6"> <div class="w-full h-50 border-b border-accent bg-tertiary text-2xl font-bold flex justify-between items-center px-6 py-6">
<div class="w-12 h-12"><a href="#main"><img src="{{ url_for('static', filename='images/icon.png') }}"></a></div> <div class="w-12 h-12"><a href="#main"><img src="{{ url_for('static', filename='images/icon.png') }}"></a></div>
<h1>GPT4All - WEBUI</h1> <h1>GPT4All - WEBUI</h1>
@ -32,15 +32,15 @@
</li> </li>
</ul> </ul>
</div> </div>
<div id="main" class="tab-pane overflow-hidden flex flex-row w-full h-full relative flex"> <div id="main" class="tab-pane flex flex-row flex-1">
</div> </div>
<div class="tab-pane" id="settings" style="display: none;"> <div class="tab-pane flex-1 overflow-auto" id="settings" style="display: none;">
</div> </div>
<div class="tab-pane" id="extensions" style="display: none;"> <div class="tab-pane flex-1 overflow-auto" id="extensions" style="display: none;">
</div> </div>
<div class="tab-pane" id="training" style="display: none;"> <div class="tab-pane flex-1 overflow-auto" id="training" style="display: none;">
</div> </div>
<div class="tab-pane" id="help" style="display: none;"> <div class="tab-pane flex-1 overflow-auto" id="help" style="display: none;">
</div> </div>
<footer class="border-t border-accent flex"> <footer class="border-t border-accent flex">

73
templates/main.html
View File

@ -1,40 +1,41 @@
<div class="dark bg-gray-900 md:flex-row flex flex-row"> <div class="flex h-screen w-screen">
<div class="dark hidden bg-gray-900 md:flex w-[260px] flex flex-col"> <div class="w-1/4 flex flex-col rounded bg-gray-700 text-white h-full overflow-hidden">
<nav id="action-buttons" class="flex flex-row"> <div id="action-buttons" class="flex-shrink-0 h-20">
<button id="new-discussion-btn" class="px-4 py-4 rounded hover:bg-gray-600"> <button id="new-discussion-btn" class="px-4 py-4 rounded hover:bg-gray-600">
<img src="/static/images/new_message.png" class="w-10 h-10"> <img src="/static/images/new_message.png" class="w-5 h-5">
</button> </button>
<button id="reset-discussions-btn" class="px-4 py-4 rounded hover:bg-gray-600"> <button id="reset-discussions-btn" class="px-4 py-4 rounded hover:bg-gray-600">
<img src="/static/images/reset_db.png" class="w-10 h-10"> <img src="/static/images/reset_db.png" class="w-5 h-5">
</button> </button>
<button value="Export" id="export-button" class="px-4 py-4 rounded hover:bg-gray-600"> <button value="Export" id="export-button" class="px-4 py-4 rounded hover:bg-gray-600">
<img src="/static/images/export_database.png" class="w-10 h-10"> <img src="/static/images/export_database.png" class="w-5 h-5">
</button> </button>
<button value="Export-discussion" id="export-discussion-button" class="px-4 py-4 rounded hover:bg-gray-600"> <button value="Export-discussion" id="export-discussion-button" class="px-4 py-4 rounded hover:bg-gray-600">
<img src="/static/images/export_discussion.png" class="w-10 h-10"> <img src="/static/images/export_discussion.png" class="w-5 h-5">
</button> </button>
</nav> </div>
<div> <div class="flex-shrink-0 p-0">
<h1 class="font-bold font-large">Discussions</h1> <h1 class="font-bold font-large">Discussions</h1>
</div>
<div class="flex-1 overflow-y-auto p-0">
<div id="discussions-list" class="pb-96" >
</div> </div>
<nav id="discussions-list" class="flex h-full flex-1 flex-col space-y-1 p-2 overflow-y-auto"> </div>
</nav>
</div> </div>
<div class="flex max-w-full flex-1 flex-col"> <div class="flex-1 flex flex-col overflow-hidden">
<div class="text-white"> <div class="flex-shrink-0 p-4 bg-gray-700 text-white">
<h1 class="font-bold font-large">Chat box</h1> <h1 class="font-bold font-large">Chat box</h1>
</div>
<div class="flex-grow overflow-y-auto p-0 bg-gray-700 rounded">
<div id="chat-window" class="pb-96">
</div> </div>
<div id="chat-window" class="overflow-y-auto max-h-full"> </div>
</div>
<div class="flex w-full mt-auto flex-row">
<form id="chat-form" class="flex w-full mt-auto">
<textarea id="user-input" placeholder="Type your message..." class="bg-secondary my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md p-2"></textarea>
<div id="wait-animation" style="display: none;" class="lds-facebook bg-secondary my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md p-2"><div></div><div></div><div></div></div>
<input type="submit" value="Send" id="submit-input" class="my-1 mx-1 outline-none px-4 bg-accent text-black rounded-md hover:bg-[#7ba0ea] active:bg-[#3d73e1] transition-colors ease-in-out">
</form>
</div>
</div> </div>
</div>
</div> <div class="w-full mx-2 flex flex-row bottom-0 fixed rounded shadow shadow-white bg-gray-300 flex-wrap">
<form id="chat-form" class="w-full flex-row text-white mr-15 p-15">
<input type="text" id="user-input" placeholder="Type your message..." class="bg-gray-600 my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md">
<div id="wait-animation" style="display: none;" class="lds-facebook bg-secondary my-1 mx-1 outline-none drop-shadow-sm w-full rounded-md p-2"><div></div><div></div><div></div></div>
<input type="submit" value="Send" id="submit-input" class="my-1 mx-1 outline-none px-4 bg-accent text-black rounded-md hover:bg-[#7ba0ea] active:bg-[#3d73e1] transition-colors ease-in-out">
</form>
</div>