ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-01-29 15:44:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/nomic-ai/gpt4all-ui

Browse Source
This commit is contained in:
Saifeddine ALOUI 2023-04-14 22:16:29 +02:00
commit b6f6721ded
4 changed files with 464 additions and 452 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
personalities/gpt4all_chatbot.yaml
View File

@ -27,10 +27,10 @@ personality_conditionning: |
welcome_message: "Welcome! I am GPT4All A free and open discussion AI. What can I do for you today?"
# This prefix is added at the beginning of any message input by the user
message_prefix: "\nuser: "
message_prefix: "\nuser:"
# This suffix is added at the end of any message input by the user
message_suffix: "\ngpt4all: "
message_suffix: "\ngpt4all:"
# Here is the list of extensions this personality requires
dependencies: []

43
static/js/audio.js
View File

@ -1,20 +1,22 @@
isStarted = false;
isSpeaking = false;
const SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
const recognition = new SpeechRecognition();
const synth = window.speechSynthesis || webkitspeechSynthesis;
var voices = synth.getVoices();
function prepre_audio(){
// Dirty fix for disabling speech synth for firefox browsers :()
if (!userAgent.match(/firefox|fxios/i)) {
isStarted = false;
isSpeaking = false;
const SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
const recognition = new SpeechRecognition();
const synth = window.speechSynthesis || webkitspeechSynthesis;
var voices = synth.getVoices();
function prepre_audio() {
recognition.continuous = true;
recognition.interimResults = true;
recognition.maxAlternatives = 10;
language_select = document.getElementById("language")
}
voices = [];
function populateVoicesList() {
}
voices = [];
function populateVoicesList() {
voices = synth.getVoices();
voice_select = document.getElementById("voice")
voice_select.innerHTML="";
voice_select.innerHTML = "";
for (let i = 0; i < voices.length; i++) {
if (
voices[i].lang.startsWith(
@ -35,9 +37,9 @@ function populateVoicesList() {
}
voice_select.addEventListener("change", function () {
});
}
// Audio code
function splitString(string, maxLength) {
}
// Audio code
function splitString(string, maxLength) {
const sentences = string.match(/[^.!?]+[.!?]/g);
const strings = [];
let currentString = "";
@ -60,8 +62,8 @@ function splitString(string, maxLength) {
}
return strings;
}
function addListeners(button, utterThis) {
}
function addListeners(button, utterThis) {
utterThis.onstart = (event) => {
isSpeaking = true;
button.style.backgroundColor = "red";
@ -73,9 +75,9 @@ function addListeners(button, utterThis) {
button.style.backgroundColor = "";
button.style.boxShadow = "";
};
}
}
function attachAudio_modules(div) {
function attachAudio_modules(div) {
if (div.parentNode.getElementsByClassName("audio-out-button").length > 0) {
return;
}
@ -129,9 +131,9 @@ function attachAudio_modules(div) {
//if (global["auto_audio"]) {
// play_audio();
//}
}
}
function add_audio_in_ui() {
function add_audio_in_ui() {
const inputs = document.querySelectorAll("#user-input");
inputs.forEach((input) => {
// const wrapper = document.createElement("div");
@ -199,3 +201,4 @@ function add_audio_in_ui() {
}
});
}
}

164
static/js/chat.js
View File

@ -1,4 +1,7 @@
function addMessage(sender, message, id, rank=0, can_edit=false) {
// Dirty fix for disabling speech synth for firefox browsers :()
const userAgent = navigator.userAgent;
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');
@ -24,8 +27,7 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
messageElement.appendChild(senderElement);
messageElement.appendChild(messageTextElement);
if(can_edit)
{
if (can_edit) {
// Create buttons container
const buttonsContainer = document.createElement('div');
// Add the 'flex' class to the div
@ -39,9 +41,9 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
buttonsContainer.style.height = '100%';
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-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
resendButton.style.display='inline-block'
resendButton.style.display = 'inline-block'
resendButton.innerHTML = '';
const resendImg = document.createElement('img');
resendImg.src = "/static/images/refresh.png";
@ -55,8 +57,8 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
// add user message to chat window
const sendbtn = document.querySelector("#submit-input")
const waitAnimation = document.querySelector("#wait-animation")
sendbtn.style.display="none";
waitAnimation.style.display="block";
sendbtn.style.display = "none";
waitAnimation.style.display = "block";
fetch("/run_to", {
method: 'POST',
@ -68,15 +70,15 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
message: message
})
})
.then(function(response) {
.then(function (response) {
const stream = new ReadableStream({
start(controller) {
const reader = response.body.getReader();
function push() {
reader.read().then(function(result) {
reader.read().then(function (result) {
if (result.done) {
sendbtn.style.display="block";
waitAnimation.style.display="none";
sendbtn.style.display = "block";
waitAnimation.style.display = "none";
controller.close();
return;
}
@ -91,7 +93,7 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
const readableStreamDefaultReader = stream.getReader();
let entry_counter = 0
function readStream() {
readableStreamDefaultReader.read().then(function(result) {
readableStreamDefaultReader.read().then(function (result) {
if (result.done) {
return;
}
@ -99,18 +101,17 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
text = textDecoder.decode(result.value);
// The server will first send a json containing information about the message just sent
if(entry_counter==0)
{
if (entry_counter == 0) {
// We parse it and
infos = JSON.parse(text)
console.log(infos)
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'];
entry_counter ++;
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'];
entry_counter++;
}
else{
else {
// For the other enrtries, these are just the text of the chatbot
for (const char of text) {
txt = hiddenElement.innerHTML;
@ -123,7 +124,7 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
// scroll to bottom of chat window
chatWindow.scrollTop = chatWindow.scrollHeight;
}
entry_counter ++;
entry_counter++;
}
readStream();
@ -134,9 +135,9 @@ 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-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10");
editButton.style.float = 'right'; // set the float property to right
editButton.style.display='inline-block'
editButton.style.display = 'inline-block'
editButton.innerHTML = '';
const editImg = document.createElement('img');
editImg.src = "/static/images/edit_discussion.png";
@ -149,7 +150,7 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
inputField.classList.add('font-medium', 'text-md', 'border', 'border-gray-300', 'p-1');
inputField.value = messageTextElement.innerHTML;
buttonsContainer.style.display="none"
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');
@ -164,14 +165,14 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
if (!response.ok) {
throw new Error('Network response was not ok');
}
else{
else {
console.log("Updated")
}
})
.catch(error => {
console.error('There was a problem updating the message:', error);
});
buttonsContainer.style.display='inline-block'
buttonsContainer.style.display = 'inline-block'
messageElement.replaceChild(messageTextElement, inputField);
//messageElement.removeChild(inputField);
messageElement.removeChild(saveButton);
@ -183,9 +184,9 @@ 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-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10");
deleteButton.style.float = 'right'; // set the float property to right
deleteButton.style.display='inline-block'
deleteButton.style.display = 'inline-block'
deleteButton.innerHTML = '';
const deleteImg = document.createElement('img');
deleteImg.src = "/static/images/delete_discussion.png";
@ -197,16 +198,16 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
.then(response => response.json())
.then(data => {
console.log(data.new_rank)
messageElement.style.display="none"
messageElement.style.display = "none"
})
.catch(error => {
console.error('There was a problem updating the message:', error);
});
});
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-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10");
rank_up.style.float = 'right'; // set the float property to right
rank_up.style.display='inline-block'
rank_up.style.display = 'inline-block'
rank_up.innerHTML = '';
const thumbUpImg = document.createElement('img');
thumbUpImg.src = "/static/images/thumb_up.png";
@ -223,23 +224,23 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
.then(response => response.json())
.then(data => {
console.log(data.new_rank)
if(data.new_rank>0){
thumbUpBadge.innerText=`${data.new_rank}`
thumbDownBadge.innerText=``
thumbUpBadge.display=`block`
thumbDownBadge.display='none'
if (data.new_rank > 0) {
thumbUpBadge.innerText = `${data.new_rank}`
thumbDownBadge.innerText = ``
thumbUpBadge.display = `block`
thumbDownBadge.display = 'none'
}
else if(data.new_rank<0){
thumbUpBadge.innerText=``
thumbDownBadge.innerText=`${data.new_rank}`
thumbUpBadge.display=`none`
thumbDownBadge.display='block'
else if (data.new_rank < 0) {
thumbUpBadge.innerText = ``
thumbDownBadge.innerText = `${data.new_rank}`
thumbUpBadge.display = `none`
thumbDownBadge.display = 'block'
}
else{
thumbUpBadge.innerText=``
thumbDownBadge.innerText=``
thumbUpBadge.display=`none`
thumbDownBadge.display='none'
else {
thumbUpBadge.innerText = ``
thumbDownBadge.innerText = ``
thumbUpBadge.display = `none`
thumbDownBadge.display = 'none'
}
})
.catch(error => {
@ -248,9 +249,9 @@ 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-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10");
rank_down.style.float = 'right'; // set the float property to right
rank_down.style.display='inline-block'
rank_down.style.display = 'inline-block'
rank_down.innerHTML = '';
const thumbDownImg = document.createElement('img');
thumbDownImg.src = "/static/images/thumb_down.png";
@ -267,23 +268,23 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
.then(response => response.json())
.then(data => {
console.log(data)
if(data.new_rank>0){
thumbUpBadge.innerText=`${data.new_rank}`
thumbDownBadge.innerText=``
thumbUpBadge.display=`block`
thumbDownBadge.display='none'
if (data.new_rank > 0) {
thumbUpBadge.innerText = `${data.new_rank}`
thumbDownBadge.innerText = ``
thumbUpBadge.display = `block`
thumbDownBadge.display = 'none'
}
else if(data.new_rank<0){
thumbUpBadge.innerText=``
thumbDownBadge.innerText=`${data.new_rank}`
thumbUpBadge.display=`none`
thumbDownBadge.display='block'
else if (data.new_rank < 0) {
thumbUpBadge.innerText = ``
thumbDownBadge.innerText = `${data.new_rank}`
thumbUpBadge.display = `none`
thumbDownBadge.display = 'block'
}
else{
thumbUpBadge.innerText=``
thumbDownBadge.innerText=``
thumbUpBadge.display=`none`
thumbDownBadge.display='none'
else {
thumbUpBadge.innerText = ``
thumbDownBadge.innerText = ``
thumbUpBadge.display = `none`
thumbDownBadge.display = 'none'
}
})
.catch(error => {
@ -297,37 +298,40 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
buttonsContainer.appendChild(rank_up);
buttonsContainer.appendChild(rank_down);
messageElement.appendChild(buttonsContainer);
if(rank>0){
thumbUpBadge.innerText=`${rank}`
thumbDownBadge.innerText=``
thumbUpBadge.display=`block`
thumbDownBadge.display='none'
if (rank > 0) {
thumbUpBadge.innerText = `${rank}`
thumbDownBadge.innerText = ``
thumbUpBadge.display = `block`
thumbDownBadge.display = 'none'
}
else if(rank<0){
thumbUpBadge.innerText=``
thumbDownBadge.innerText=`${rank}`
thumbUpBadge.display=`none`
thumbDownBadge.display='block'
else if (rank < 0) {
thumbUpBadge.innerText = ``
thumbDownBadge.innerText = `${rank}`
thumbUpBadge.display = `none`
thumbDownBadge.display = 'block'
}
else{
thumbUpBadge.innerText=``
thumbDownBadge.innerText=``
thumbUpBadge.display=`none`
thumbDownBadge.display='none'
else {
thumbUpBadge.innerText = ``
thumbDownBadge.innerText = ``
thumbUpBadge.display = `none`
thumbDownBadge.display = 'none'
}
}
chatWindow.appendChild(messageElement);
chatWindow.appendChild(hiddenElement);
// Dirty fix for disabling speech synth for firefox browsers :()
if (!userAgent.match(/firefox|fxios/i)) {
attachAudio_modules(messageTextElement);
}
// scroll to bottom of chat window
chatWindow.scrollTop = chatWindow.scrollHeight;
// Return all needed stuff
return {
'messageTextElement':messageTextElement,
'hiddenElement':hiddenElement
'messageTextElement': messageTextElement,
'hiddenElement': hiddenElement
}
}

29
static/js/tabs.js
View File

@ -8,14 +8,14 @@ function showTab(tabId) {
console.log(tabId)
var tab = document.getElementById(tabId);
tab.style.display = 'block';
}
}
// show the main tab by default
showTab('main');
// add event listeners to the tab links
var tabLinks = document.getElementsByTagName('a');
for (var i = 0; i < tabLinks.length; i++) {
tabLinks[i].addEventListener('click', function(event) {
// show the main tab by default
showTab('main');
// add event listeners to the tab links
var tabLinks = document.getElementsByTagName('a');
for (var i = 0; i < tabLinks.length; i++) {
tabLinks[i].addEventListener('click', function (event) {
event.preventDefault();
var tabId = this.getAttribute('href').substring(1);
showTab(tabId);
@ -23,8 +23,8 @@ function showTab(tabId) {
}
fetch('/main')
.then(response => response.text())
.then(html => {
.then(response => response.text())
.then(html => {
document.getElementById('main').innerHTML = html;
// First time we populate the discussions list
populate_discussions_list()
@ -32,12 +32,17 @@ fetch('/main')
load_discussion();
update_main();
db_export();
// Dirty fix for disabling speech synth for firefox browsers :()
if (!userAgent.match(/firefox|fxios/i)) {
prepre_audio();
add_audio_in_ui();
populateVoicesList();
}
populate_models()
})
.catch(error => {
})
.catch(error => {
console.error('Error loading main page:', error);
});
});