mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-19 20:37:51 +00:00
huge progress in ui
This commit is contained in:
Saifeddine ALOUI
parent
36596a136b
commit
2a6ebab6df
1
app.py
1
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","<br>")
|
||||
time.sleep(0)
|
||||
except :
|
||||
time.sleep(0.1)
|
||||
|
||||
|
||||
@ -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 = "";
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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', () => {
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}" type="image/x-icon">
|
||||
|
||||
</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-12 h-12"><a href="#main"><img src="{{ url_for('static', filename='images/icon.png') }}"></a></div>
|
||||
<h1>GPT4All - WEBUI</h1>
|
||||
@ -32,15 +32,15 @@
|
||||
</li>
|
||||
</ul>
|
||||
</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 class="tab-pane" id="settings" style="display: none;">
|
||||
<div class="tab-pane flex-1 overflow-auto" id="settings" style="display: none;">
|
||||
</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 class="tab-pane" id="training" style="display: none;">
|
||||
<div class="tab-pane flex-1 overflow-auto" id="training" style="display: none;">
|
||||
</div>
|
||||
<div class="tab-pane" id="help" style="display: none;">
|
||||
<div class="tab-pane flex-1 overflow-auto" id="help" style="display: none;">
|
||||
|
||||
</div>
|
||||
<footer class="border-t border-accent flex">
|
||||
|
||||
@ -1,40 +1,41 @@
|
||||
<div class="dark bg-gray-900 md:flex-row flex flex-row">
|
||||
<div class="dark hidden bg-gray-900 md:flex w-[260px] flex flex-col">
|
||||
<nav id="action-buttons" class="flex flex-row">
|
||||
<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">
|
||||
</button>
|
||||
<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">
|
||||
</button>
|
||||
<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">
|
||||
</button>
|
||||
<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">
|
||||
</button>
|
||||
</nav>
|
||||
<div>
|
||||
<h1 class="font-bold font-large">Discussions</h1>
|
||||
<div class="flex h-screen w-screen">
|
||||
<div class="w-1/4 flex flex-col rounded bg-gray-700 text-white h-full overflow-hidden">
|
||||
<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">
|
||||
<img src="/static/images/new_message.png" class="w-5 h-5">
|
||||
</button>
|
||||
<button id="reset-discussions-btn" class="px-4 py-4 rounded hover:bg-gray-600">
|
||||
<img src="/static/images/reset_db.png" class="w-5 h-5">
|
||||
</button>
|
||||
<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-5 h-5">
|
||||
</button>
|
||||
<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-5 h-5">
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-shrink-0 p-0">
|
||||
<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>
|
||||
<nav id="discussions-list" class="flex h-full flex-1 flex-col space-y-1 p-2 overflow-y-auto">
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex max-w-full flex-1 flex-col">
|
||||
<div class="text-white">
|
||||
<h1 class="font-bold font-large">Chat box</h1>
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<div class="flex-shrink-0 p-4 bg-gray-700 text-white">
|
||||
<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 id="chat-window" class="overflow-y-auto max-h-full">
|
||||
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user