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

dirty fix to disable speech for firefox users

Browse Source
This commit is contained in:
andzejsp 2023-04-14 21:56:56 +03:00
parent 8b6bfacc5d
commit 121ae6c9b6
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?" 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 # 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 # 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 # Here is the list of extensions this personality requires
dependencies: [] dependencies: []

43
static/js/audio.js
View File

@ -1,20 +1,22 @@
isStarted = false; // Dirty fix for disabling speech synth for firefox browsers :()
isSpeaking = false; if (!userAgent.match(/firefox|fxios/i)) {
const SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition; isStarted = false;
const recognition = new SpeechRecognition(); isSpeaking = false;
const synth = window.speechSynthesis || webkitspeechSynthesis; const SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var voices = synth.getVoices(); const recognition = new SpeechRecognition();
function prepre_audio(){ const synth = window.speechSynthesis || webkitspeechSynthesis;
var voices = synth.getVoices();
function prepre_audio() {
recognition.continuous = true; recognition.continuous = true;
recognition.interimResults = true; recognition.interimResults = true;
recognition.maxAlternatives = 10; recognition.maxAlternatives = 10;
language_select = document.getElementById("language") language_select = document.getElementById("language")
} }
voices = []; voices = [];
function populateVoicesList() { function populateVoicesList() {
voices = synth.getVoices(); voices = synth.getVoices();
voice_select = document.getElementById("voice") voice_select = document.getElementById("voice")
voice_select.innerHTML=""; voice_select.innerHTML = "";
for (let i = 0; i < voices.length; i++) { for (let i = 0; i < voices.length; i++) {
if ( if (
voices[i].lang.startsWith( voices[i].lang.startsWith(
@ -35,9 +37,9 @@ function populateVoicesList() {
} }
voice_select.addEventListener("change", function () { voice_select.addEventListener("change", function () {
}); });
} }
// Audio code // Audio code
function splitString(string, maxLength) { function splitString(string, maxLength) {
const sentences = string.match(/[^.!?]+[.!?]/g); const sentences = string.match(/[^.!?]+[.!?]/g);
const strings = []; const strings = [];
let currentString = ""; let currentString = "";
@ -60,8 +62,8 @@ function splitString(string, maxLength) {
} }
return strings; return strings;
} }
function addListeners(button, utterThis) { function addListeners(button, utterThis) {
utterThis.onstart = (event) => { utterThis.onstart = (event) => {
isSpeaking = true; isSpeaking = true;
button.style.backgroundColor = "red"; button.style.backgroundColor = "red";
@ -73,9 +75,9 @@ function addListeners(button, utterThis) {
button.style.backgroundColor = ""; button.style.backgroundColor = "";
button.style.boxShadow = ""; button.style.boxShadow = "";
}; };
} }
function attachAudio_modules(div) { function attachAudio_modules(div) {
if (div.parentNode.getElementsByClassName("audio-out-button").length > 0) { if (div.parentNode.getElementsByClassName("audio-out-button").length > 0) {
return; return;
} }
@ -129,9 +131,9 @@ function attachAudio_modules(div) {
//if (global["auto_audio"]) { //if (global["auto_audio"]) {
// play_audio(); // play_audio();
//} //}
} }
function add_audio_in_ui() { function add_audio_in_ui() {
const inputs = document.querySelectorAll("#user-input"); const inputs = document.querySelectorAll("#user-input");
inputs.forEach((input) => { inputs.forEach((input) => {
// const wrapper = document.createElement("div"); // 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 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');
@ -24,8 +27,7 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
messageElement.appendChild(senderElement); messageElement.appendChild(senderElement);
messageElement.appendChild(messageTextElement); messageElement.appendChild(messageTextElement);
if(can_edit) if (can_edit) {
{
// Create buttons container // Create buttons container
const buttonsContainer = document.createElement('div'); const buttonsContainer = document.createElement('div');
// Add the 'flex' class to the 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%'; buttonsContainer.style.height = '100%';
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-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.float = 'right'; // set the float property to right
resendButton.style.display='inline-block' resendButton.style.display = 'inline-block'
resendButton.innerHTML = ''; resendButton.innerHTML = '';
const resendImg = document.createElement('img'); const resendImg = document.createElement('img');
resendImg.src = "/static/images/refresh.png"; 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 // add user message to chat window
const sendbtn = document.querySelector("#submit-input") const sendbtn = document.querySelector("#submit-input")
const waitAnimation = document.querySelector("#wait-animation") const waitAnimation = document.querySelector("#wait-animation")
sendbtn.style.display="none"; sendbtn.style.display = "none";
waitAnimation.style.display="block"; waitAnimation.style.display = "block";
fetch("/run_to", { fetch("/run_to", {
method: 'POST', method: 'POST',
@ -68,15 +70,15 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
message: message message: message
}) })
}) })
.then(function(response) { .then(function (response) {
const stream = new ReadableStream({ const stream = new ReadableStream({
start(controller) { start(controller) {
const reader = response.body.getReader(); const reader = response.body.getReader();
function push() { function push() {
reader.read().then(function(result) { reader.read().then(function (result) {
if (result.done) { if (result.done) {
sendbtn.style.display="block"; sendbtn.style.display = "block";
waitAnimation.style.display="none"; waitAnimation.style.display = "none";
controller.close(); controller.close();
return; return;
} }
@ -91,7 +93,7 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
const readableStreamDefaultReader = stream.getReader(); const readableStreamDefaultReader = stream.getReader();
let entry_counter = 0 let entry_counter = 0
function readStream() { function readStream() {
readableStreamDefaultReader.read().then(function(result) { readableStreamDefaultReader.read().then(function (result) {
if (result.done) { if (result.done) {
return; return;
} }
@ -99,18 +101,17 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
text = textDecoder.decode(result.value); text = textDecoder.decode(result.value);
// The server will first send a json containing information about the message just sent // 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 // We parse it and
infos = JSON.parse(text) infos = JSON.parse(text)
console.log(infos) console.log(infos)
addMessage('User', infos.message, infos.id, 0, can_edit=true); addMessage('User', infos.message, infos.id, 0, can_edit = true);
elements = addMessage(infos.sender, '', infos.response_id, 0, can_edit=true); elements = addMessage(infos.sender, '', infos.response_id, 0, can_edit = true);
messageTextElement=elements['messageTextElement']; messageTextElement = elements['messageTextElement'];
hiddenElement=elements['hiddenElement']; hiddenElement = elements['hiddenElement'];
entry_counter ++; entry_counter++;
} }
else{ else {
// For the other enrtries, these are just the text of the chatbot // For the other enrtries, these are just the text of the chatbot
for (const char of text) { for (const char of text) {
txt = hiddenElement.innerHTML; txt = hiddenElement.innerHTML;
@ -123,7 +124,7 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
// scroll to bottom of chat window // scroll to bottom of chat window
chatWindow.scrollTop = chatWindow.scrollHeight; chatWindow.scrollTop = chatWindow.scrollHeight;
} }
entry_counter ++; entry_counter++;
} }
readStream(); readStream();
@ -134,9 +135,9 @@ 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-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.float = 'right'; // set the float property to right
editButton.style.display='inline-block' editButton.style.display = 'inline-block'
editButton.innerHTML = ''; editButton.innerHTML = '';
const editImg = document.createElement('img'); const editImg = document.createElement('img');
editImg.src = "/static/images/edit_discussion.png"; 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.classList.add('font-medium', 'text-md', 'border', 'border-gray-300', 'p-1');
inputField.value = messageTextElement.innerHTML; inputField.value = messageTextElement.innerHTML;
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-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) { if (!response.ok) {
throw new Error('Network response was not ok'); throw new Error('Network response was not ok');
} }
else{ else {
console.log("Updated") console.log("Updated")
} }
}) })
.catch(error => { .catch(error => {
console.error('There was a problem updating the message:', 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.replaceChild(messageTextElement, inputField);
//messageElement.removeChild(inputField); //messageElement.removeChild(inputField);
messageElement.removeChild(saveButton); messageElement.removeChild(saveButton);
@ -183,9 +184,9 @@ 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-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.float = 'right'; // set the float property to right
deleteButton.style.display='inline-block' deleteButton.style.display = 'inline-block'
deleteButton.innerHTML = ''; deleteButton.innerHTML = '';
const deleteImg = document.createElement('img'); const deleteImg = document.createElement('img');
deleteImg.src = "/static/images/delete_discussion.png"; 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(response => response.json())
.then(data => { .then(data => {
console.log(data.new_rank) console.log(data.new_rank)
messageElement.style.display="none" messageElement.style.display = "none"
}) })
.catch(error => { .catch(error => {
console.error('There was a problem updating the message:', error); console.error('There was a problem updating the message:', error);
}); });
}); });
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-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.float = 'right'; // set the float property to right
rank_up.style.display='inline-block' rank_up.style.display = 'inline-block'
rank_up.innerHTML = ''; rank_up.innerHTML = '';
const thumbUpImg = document.createElement('img'); const thumbUpImg = document.createElement('img');
thumbUpImg.src = "/static/images/thumb_up.png"; 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(response => response.json())
.then(data => { .then(data => {
console.log(data.new_rank) console.log(data.new_rank)
if(data.new_rank>0){ if (data.new_rank > 0) {
thumbUpBadge.innerText=`${data.new_rank}` thumbUpBadge.innerText = `${data.new_rank}`
thumbDownBadge.innerText=`` thumbDownBadge.innerText = ``
thumbUpBadge.display=`block` thumbUpBadge.display = `block`
thumbDownBadge.display='none' thumbDownBadge.display = 'none'
} }
else if(data.new_rank<0){ else if (data.new_rank < 0) {
thumbUpBadge.innerText=`` thumbUpBadge.innerText = ``
thumbDownBadge.innerText=`${data.new_rank}` thumbDownBadge.innerText = `${data.new_rank}`
thumbUpBadge.display=`none` thumbUpBadge.display = `none`
thumbDownBadge.display='block' thumbDownBadge.display = 'block'
} }
else{ else {
thumbUpBadge.innerText=`` thumbUpBadge.innerText = ``
thumbDownBadge.innerText=`` thumbDownBadge.innerText = ``
thumbUpBadge.display=`none` thumbUpBadge.display = `none`
thumbDownBadge.display='none' thumbDownBadge.display = 'none'
} }
}) })
.catch(error => { .catch(error => {
@ -248,9 +249,9 @@ 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-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.float = 'right'; // set the float property to right
rank_down.style.display='inline-block' rank_down.style.display = 'inline-block'
rank_down.innerHTML = ''; rank_down.innerHTML = '';
const thumbDownImg = document.createElement('img'); const thumbDownImg = document.createElement('img');
thumbDownImg.src = "/static/images/thumb_down.png"; 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(response => response.json())
.then(data => { .then(data => {
console.log(data) console.log(data)
if(data.new_rank>0){ if (data.new_rank > 0) {
thumbUpBadge.innerText=`${data.new_rank}` thumbUpBadge.innerText = `${data.new_rank}`
thumbDownBadge.innerText=`` thumbDownBadge.innerText = ``
thumbUpBadge.display=`block` thumbUpBadge.display = `block`
thumbDownBadge.display='none' thumbDownBadge.display = 'none'
} }
else if(data.new_rank<0){ else if (data.new_rank < 0) {
thumbUpBadge.innerText=`` thumbUpBadge.innerText = ``
thumbDownBadge.innerText=`${data.new_rank}` thumbDownBadge.innerText = `${data.new_rank}`
thumbUpBadge.display=`none` thumbUpBadge.display = `none`
thumbDownBadge.display='block' thumbDownBadge.display = 'block'
} }
else{ else {
thumbUpBadge.innerText=`` thumbUpBadge.innerText = ``
thumbDownBadge.innerText=`` thumbDownBadge.innerText = ``
thumbUpBadge.display=`none` thumbUpBadge.display = `none`
thumbDownBadge.display='none' thumbDownBadge.display = 'none'
} }
}) })
.catch(error => { .catch(error => {
@ -297,37 +298,40 @@ function addMessage(sender, message, id, rank=0, can_edit=false) {
buttonsContainer.appendChild(rank_up); buttonsContainer.appendChild(rank_up);
buttonsContainer.appendChild(rank_down); buttonsContainer.appendChild(rank_down);
messageElement.appendChild(buttonsContainer); messageElement.appendChild(buttonsContainer);
if(rank>0){ if (rank > 0) {
thumbUpBadge.innerText=`${rank}` thumbUpBadge.innerText = `${rank}`
thumbDownBadge.innerText=`` thumbDownBadge.innerText = ``
thumbUpBadge.display=`block` thumbUpBadge.display = `block`
thumbDownBadge.display='none' thumbDownBadge.display = 'none'
} }
else if(rank<0){ else if (rank < 0) {
thumbUpBadge.innerText=`` thumbUpBadge.innerText = ``
thumbDownBadge.innerText=`${rank}` thumbDownBadge.innerText = `${rank}`
thumbUpBadge.display=`none` thumbUpBadge.display = `none`
thumbDownBadge.display='block' thumbDownBadge.display = 'block'
} }
else{ else {
thumbUpBadge.innerText=`` thumbUpBadge.innerText = ``
thumbDownBadge.innerText=`` thumbDownBadge.innerText = ``
thumbUpBadge.display=`none` thumbUpBadge.display = `none`
thumbDownBadge.display='none' thumbDownBadge.display = 'none'
} }
} }
chatWindow.appendChild(messageElement); chatWindow.appendChild(messageElement);
chatWindow.appendChild(hiddenElement); chatWindow.appendChild(hiddenElement);
// Dirty fix for disabling speech synth for firefox browsers :()
if (!userAgent.match(/firefox|fxios/i)) {
attachAudio_modules(messageTextElement); attachAudio_modules(messageTextElement);
}
// scroll to bottom of chat window // scroll to bottom of chat window
chatWindow.scrollTop = chatWindow.scrollHeight; chatWindow.scrollTop = chatWindow.scrollHeight;
// Return all needed stuff // Return all needed stuff
return { return {
'messageTextElement':messageTextElement, 'messageTextElement': messageTextElement,
'hiddenElement':hiddenElement 'hiddenElement': hiddenElement
} }
} }

29
static/js/tabs.js
View File

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