enhanced ui and personality configuration

This commit is contained in:
Saifeddine ALOUI 2023-04-17 23:15:17 +02:00
parent 0664f269af
commit a404d67e5a
6 changed files with 69 additions and 14 deletions

3
app.py
View File

@ -196,7 +196,8 @@ class Gpt4AllWebUI(GPT4AllAPI):
json.dumps(
{
"type": "input_message_infos",
"sender": self.personality["name"],
"bot": self.personality["name"],
"user": self.personality["user_name"],
"message": message,
"id": message_id,
"response_id": response_id,

View File

@ -9,6 +9,9 @@
# Name of the personality
name: gpt4all
# Name of the user
user_name: user
# Language (see the list of supported languages here : https://github.com/ParisNeo/GPT4All_Personalities/blob/main/README.md)
language: "en_XX"

BIN
static/images/copy.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -1,15 +1,26 @@
// Dirty fix for disabling speech synth for firefox browsers :()
const userAgent = navigator.userAgent;
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
console.log('Text copied to clipboard');
} catch (err) {
console.error('Failed to copy text: ', err);
}
}
function addMessage(sender, message, id, rank = 0, can_edit = false) {
const chatWindow = document.getElementById('chat-window');
const chatForm = document.getElementById('chat-form');
const userInput = document.getElementById('user-input');
console.log(id)
const messageElement = document.createElement('div');
messageElement.classList.add('bg-secondary', 'drop-shadow-sm', 'p-4', 'mx-6', 'my-4', 'flex', 'flex-col', 'space-x-2', 'rounded-lg', 'shadow-lg', 'bg-gray-800', 'hover:bg-gray-700', 'transition-colors', 'duration-300');
messageElement.id = id
//messageElement.classList.add(sender);
messageElement.setAttribute('id', id);
@ -27,6 +38,7 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
messageElement.appendChild(senderElement);
messageElement.appendChild(messageTextElement);
if (can_edit) {
// Create buttons container
const buttonsContainer = document.createElement('div');
@ -39,7 +51,19 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
// Set the width and height of the container to 100%
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.style.float = 'right'; // set the float property to right
clipboardButton.style.display = 'inline-block'
clipboardButton.innerHTML = '';
const clipboardImg = document.createElement('img');
clipboardImg.src = "/static/images/copy.png";
clipboardImg.classList.add('py-1', 'px-1', 'rounded', 'w-10', 'h-10');
clipboardButton.title = "clipboard message";
clipboardButton.appendChild(clipboardImg)
clipboardButton.addEventListener('click', () => {
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.style.float = 'right'; // set the float property to right
@ -65,13 +89,15 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
let messageTextElement_ = undefined
let hiddenElement_ = undefined
elements = addMessage("", "", 0, 0, can_edit = true);
fetch("/run_to", {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: id,
id: messageElement.id,
message: message
})
})
@ -113,7 +139,8 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
if (entry_counter == 0) {
// We parse it and
infos = JSON.parse(text)
elements = addMessage(infos.sender, '', infos.response_id, 0, can_edit = true);
elements.id = infos.response_id
elements.setSender(infos.sender)
messageTextElement_ = elements['messageTextElement'];
hiddenElement_ = elements['hiddenElement'];
entry_counter++;
@ -305,7 +332,9 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
console.error('There was a problem updating the message:', error);
});
});
buttonsContainer.appendChild(editButton);
buttonsContainer.appendChild(clipboardButton);
buttonsContainer.appendChild(resendButton);
buttonsContainer.appendChild(deleteButton);
@ -335,7 +364,10 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
thumbUpBadge.display = `none`
thumbDownBadge.display = 'none'
}
chatWindow.buttonsContainer = buttonsContainer
}
else{
chatWindow.buttonsContainer = undefined
}
chatWindow.appendChild(messageElement);
chatWindow.appendChild(hiddenElement);
@ -344,9 +376,21 @@ function addMessage(sender, message, id, rank = 0, can_edit = false) {
// scroll to bottom of chat window
chatWindow.scrollTop = chatWindow.scrollHeight;
// Return all needed stuff
return {
'messageTextElement': messageTextElement,
'hiddenElement': hiddenElement
messageElement.hiddenElement = hiddenElement
messageElement.senderElement = senderElement
messageElement.messageTextElement = messageTextElement
messageElement.id = id
messageElement.setID=(id)=>{
messageElement.id = id
}
messageElement.setSender=(sender)=>{
messageElement.senderElement.innerHTML = sender
}
messageElement.setMessage=(message)=>{
messageElement.messageTextElement.innerHTML = message
}
// Return all needed stuff
return messageElement
}

View File

@ -1,5 +1,7 @@
function load_discussion(discussion=0){
var container = document.getElementById('chat-window');
if(discussion)
{
console.log(discussion.id)
@ -22,7 +24,6 @@ function load_discussion(discussion=0){
const messages = JSON.parse(data);
console.log(messages)
// process messages
var container = document.getElementById('chat-window');
container.innerHTML = '';
messages.forEach(message => {
console.log(`Adding message ${message.type}`)

View File

@ -21,6 +21,9 @@ function update_main(){
let hiddenElement = undefined
let messageTextElement = undefined
user_msg = addMessage('',message, 0, 0, can_edit=true);
bot_msg = addMessage('', '', 0, 0, can_edit=true);
fetch('/bot', {
method: 'POST',
headers: {
@ -63,10 +66,13 @@ function update_main(){
{
// We parse it and
infos = JSON.parse(text)
addMessage('User', infos.message, infos.id, 0, can_edit=true);
elements = addMessage(infos.sender, '', infos.response_id, 0, can_edit=true);
messageTextElement=elements['messageTextElement'];
hiddenElement=elements['hiddenElement'];
user_msg.setSender(infos.user)
user_msg.setID(infos.id)
bot_msg.setSender(infos.bot)
bot_msg.setID(infos.response_id)
messageTextElement=elements.messageTextElement;
hiddenElement=elements.hiddenElement;
entry_counter ++;
}
else{