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: []

257
static/js/audio.js
View File

@ -1,143 +1,145 @@
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 = [];
function populateVoicesList() {
voices = synth.getVoices();
voice_select = document.getElementById("voice")
voice_select.innerHTML="";
for (let i = 0; i < voices.length; i++) {
if (
voices[i].lang.startsWith(
language_select.value.substring(0, 2)
)
) {
const option = document.createElement("option");
option.textContent = `${voices[i].name} (${voices[i].lang})`;
if (voices[i].default) {
option.textContent += " — DEFAULT";
}
option.setAttribute("data-lang", voices[i].lang);
option.setAttribute("data-name", voices[i].name);
voice_select.appendChild(option);
}
} }
voice_select.addEventListener("change", function () { voices = [];
}); function populateVoicesList() {
} voices = synth.getVoices();
// Audio code voice_select = document.getElementById("voice")
function splitString(string, maxLength) { voice_select.innerHTML = "";
const sentences = string.match(/[^.!?]+[.!?]/g); for (let i = 0; i < voices.length; i++) {
const strings = []; if (
let currentString = ""; voices[i].lang.startsWith(
language_select.value.substring(0, 2)
)
) {
const option = document.createElement("option");
option.textContent = `${voices[i].name} (${voices[i].lang})`;
if (sentences) { if (voices[i].default) {
for (const sentence of sentences) { option.textContent += " — DEFAULT";
if (currentString.length + sentence.length > maxLength) {
strings.push(currentString);
currentString = "";
}
currentString += `${sentence} `;
}
} else {
strings.push(string);
}
if (currentString) {
strings.push(currentString);
}
return strings;
}
function addListeners(button, utterThis) {
utterThis.onstart = (event) => {
isSpeaking = true;
button.style.backgroundColor = "red";
button.style.boxShadow = "2px 2px 0.5px #808080";
};
utterThis.onend = (event) => {
isSpeaking = false;
button.style.backgroundColor = "";
button.style.boxShadow = "";
};
}
function attachAudio_modules(div) {
if (div.parentNode.getElementsByClassName("audio-out-button").length > 0) {
return;
}
const audio_out_button = document.createElement("button");
audio_out_button.id = "audio-out-button";
audio_out_button.classList.add("audio_btn");
audio_out_button.innerHTML = "🕪";
div.classList.add("flex-1");
audio_out_button.classList.add("audio-out-button");
div.appendChild(audio_out_button);
function play_audio() {
if (isSpeaking) {
audio_out_button.style.backgroundColor = "";
audio_out_button.style.boxShadow = "";
synth.cancel();
isSpeaking = false;
} else {
isSpeaking = true;
text = audio_out_button.previousSibling.textContent;
const selectedOption =
voice_select.selectedOptions[0].getAttribute("data-name");
var selectedVoice = null;
for (let i = 0; i < voices.length; i++) {
if (voices[i].name === selectedOption) {
selectedVoice = voices[i];
} }
option.setAttribute("data-lang", voices[i].lang);
option.setAttribute("data-name", voices[i].name);
voice_select.appendChild(option);
} }
if (selectedVoice && selectedVoice.voiceURI === "native") { }
const utterThis = new SpeechSynthesisUtterance(text); voice_select.addEventListener("change", function () {
utterThis.voice = selectedVoice; });
addListeners(audio_out_button, utterThis); }
synth.speak(utterThis); // Audio code
function splitString(string, maxLength) {
const sentences = string.match(/[^.!?]+[.!?]/g);
const strings = [];
let currentString = "";
if (sentences) {
for (const sentence of sentences) {
if (currentString.length + sentence.length > maxLength) {
strings.push(currentString);
currentString = "";
}
currentString += `${sentence} `;
}
} else {
strings.push(string);
}
if (currentString) {
strings.push(currentString);
}
return strings;
}
function addListeners(button, utterThis) {
utterThis.onstart = (event) => {
isSpeaking = true;
button.style.backgroundColor = "red";
button.style.boxShadow = "2px 2px 0.5px #808080";
};
utterThis.onend = (event) => {
isSpeaking = false;
button.style.backgroundColor = "";
button.style.boxShadow = "";
};
}
function attachAudio_modules(div) {
if (div.parentNode.getElementsByClassName("audio-out-button").length > 0) {
return;
}
const audio_out_button = document.createElement("button");
audio_out_button.id = "audio-out-button";
audio_out_button.classList.add("audio_btn");
audio_out_button.innerHTML = "🕪";
div.classList.add("flex-1");
audio_out_button.classList.add("audio-out-button");
div.appendChild(audio_out_button);
function play_audio() {
if (isSpeaking) {
audio_out_button.style.backgroundColor = "";
audio_out_button.style.boxShadow = "";
synth.cancel();
isSpeaking = false;
} else { } else {
texts = splitString(text, 200); isSpeaking = true;
texts.forEach((text) => { text = audio_out_button.previousSibling.textContent;
const selectedOption =
voice_select.selectedOptions[0].getAttribute("data-name");
var selectedVoice = null;
for (let i = 0; i < voices.length; i++) {
if (voices[i].name === selectedOption) {
selectedVoice = voices[i];
}
}
if (selectedVoice && selectedVoice.voiceURI === "native") {
const utterThis = new SpeechSynthesisUtterance(text); const utterThis = new SpeechSynthesisUtterance(text);
utterThis.voice = selectedVoice; utterThis.voice = selectedVoice;
addListeners(audio_out_button, utterThis); addListeners(audio_out_button, utterThis);
synth.speak(utterThis); synth.speak(utterThis);
}); } else {
texts = splitString(text, 200);
texts.forEach((text) => {
const utterThis = new SpeechSynthesisUtterance(text);
utterThis.voice = selectedVoice;
addListeners(audio_out_button, utterThis);
synth.speak(utterThis);
});
}
} }
} }
audio_out_button.addEventListener("click", () => {
play_audio();
});
// TODO : activate using configuration file
//if (global["auto_audio"]) {
// play_audio();
//}
} }
audio_out_button.addEventListener("click", () => {
play_audio();
});
// TODO : activate using configuration file
//if (global["auto_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");
// 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++) {
@ -147,25 +149,25 @@ function add_audio_in_ui() {
found = true; found = true;
} }
} }
if (!found) { if (!found) {
const audio_in_button = document.createElement("button"); const audio_in_button = document.createElement("button");
audio_in_button.id = "audio_in_tool"; audio_in_button.id = "audio_in_tool";
audio_in_button.classList.add("audio_btn"); audio_in_button.classList.add("audio_btn");
audio_in_button.innerHTML = "🎤"; audio_in_button.innerHTML = "🎤";
input.parentNode.parentNode.appendChild( input.parentNode.parentNode.appendChild(
audio_in_button audio_in_button
); );
input.classList.add("flex-1"); input.classList.add("flex-1");
audio_in_button.classList.add("ml-2"); audio_in_button.classList.add("ml-2");
//wrapper.appendChild(audio_in_button); //wrapper.appendChild(audio_in_button);
//input.parentNode.parentNode.insertBefore(wrapper, input); //input.parentNode.parentNode.insertBefore(wrapper, input);
//input.parentNode.removeChild(input); //input.parentNode.removeChild(input);
//wrapper.appendChild(input); //wrapper.appendChild(input);
audio_in_button.addEventListener("click", () => { audio_in_button.addEventListener("click", () => {
if (isStarted) { if (isStarted) {
recognition.stop(); recognition.stop();
@ -176,7 +178,7 @@ function add_audio_in_ui() {
isStarted = true; isStarted = true;
} }
}); });
recognition.addEventListener("result", (event) => { recognition.addEventListener("result", (event) => {
let transcript = ""; let transcript = "";
for (const result of event.results) { for (const result of event.results) {
@ -186,16 +188,17 @@ function add_audio_in_ui() {
input.value = transcript; input.value = transcript;
} }
}); });
recognition.addEventListener("start", () => { recognition.addEventListener("start", () => {
audio_in_button.style.backgroundColor = "red"; audio_in_button.style.backgroundColor = "red";
audio_in_button.style.boxShadow = "2px 2px 0.5px #808080"; audio_in_button.style.boxShadow = "2px 2px 0.5px #808080";
}); });
recognition.addEventListener("end", () => { recognition.addEventListener("end", () => {
audio_in_button.style.backgroundColor = ""; audio_in_button.style.backgroundColor = "";
audio_in_button.style.boxShadow = ""; audio_in_button.style.boxShadow = "";
}); });
} }
}); });
} }
}

578
static/js/chat.js
View File

@ -1,333 +1,337 @@
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');
console.log(id) console.log(id)
const messageElement = document.createElement('div'); 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.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.classList.add(sender); //messageElement.classList.add(sender);
messageElement.setAttribute('id', id); messageElement.setAttribute('id', id);
const senderElement = document.createElement('div'); const senderElement = document.createElement('div');
senderElement.classList.add('font-normal', 'underline', 'text-sm'); senderElement.classList.add('font-normal', 'underline', 'text-sm');
senderElement.innerHTML = sender; senderElement.innerHTML = sender;
const messageTextElement = document.createElement('div'); const messageTextElement = document.createElement('div');
messageTextElement.classList.add('font-medium', 'text-md'); messageTextElement.classList.add('font-medium', 'text-md');
messageTextElement.innerText = message; messageTextElement.innerText = message;
// Create a hidden div element needed to buffer responses before commiting them to the visible message // Create a hidden div element needed to buffer responses before commiting them to the visible message
const hiddenElement = document.createElement('div'); const hiddenElement = document.createElement('div');
hiddenElement.style.display = 'none'; hiddenElement.style.display = 'none';
hiddenElement.innerHTML = ''; hiddenElement.innerHTML = '';
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 buttonsContainer.classList.add('flex');
buttonsContainer.classList.add('flex');
// Add the 'justify-end' class to the div
buttonsContainer.classList.add('justify-end');
// Set the width and height of the container to 100%
buttonsContainer.style.width = '100%';
buttonsContainer.style.height = '100%';
const resendButton = document.createElement('button'); // Add the 'justify-end' class to the div
resendButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10"); buttonsContainer.classList.add('justify-end');
resendButton.style.float = 'right'; // set the float property to right
resendButton.style.display='inline-block'
resendButton.innerHTML = '';
const resendImg = document.createElement('img');
resendImg.src = "/static/images/refresh.png";
resendImg.classList.add('py-1', 'px-1', 'rounded', 'w-10', 'h-10');
resendButton.appendChild(resendImg)
resendButton.addEventListener('click', () => {
// get user input and clear input field
message = userInput.value;
userInput.value = '';
// 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";
fetch("/run_to", { // Set the width and height of the container to 100%
method: 'POST', buttonsContainer.style.width = '100%';
headers: { buttonsContainer.style.height = '100%';
'Content-Type': 'application/json'
}, const resendButton = document.createElement('button');
body: JSON.stringify({ resendButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded', "w-10", "h-10");
id: id, resendButton.style.float = 'right'; // set the float property to right
message: message resendButton.style.display = 'inline-block'
resendButton.innerHTML = '';
const resendImg = document.createElement('img');
resendImg.src = "/static/images/refresh.png";
resendImg.classList.add('py-1', 'px-1', 'rounded', 'w-10', 'h-10');
resendButton.appendChild(resendImg)
resendButton.addEventListener('click', () => {
// get user input and clear input field
message = userInput.value;
userInput.value = '';
// 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";
fetch("/run_to", {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: id,
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) {
sendbtn.style.display = "block";
waitAnimation.style.display = "none";
controller.close();
return;
}
controller.enqueue(result.value);
push();
})
}
push();
}
});
const textDecoder = new TextDecoder();
const readableStreamDefaultReader = stream.getReader();
let entry_counter = 0
function readStream() {
readableStreamDefaultReader.read().then(function (result) {
if (result.done) { if (result.done) {
sendbtn.style.display="block";
waitAnimation.style.display="none";
controller.close();
return; return;
} }
controller.enqueue(result.value);
push(); text = textDecoder.decode(result.value);
})
} // The server will first send a json containing information about the message just sent
push(); if (entry_counter == 0) {
} // We parse it and
}); infos = JSON.parse(text)
const textDecoder = new TextDecoder(); console.log(infos)
const readableStreamDefaultReader = stream.getReader(); addMessage('User', infos.message, infos.id, 0, can_edit = true);
let entry_counter = 0 elements = addMessage(infos.sender, '', infos.response_id, 0, can_edit = true);
function readStream() { messageTextElement = elements['messageTextElement'];
readableStreamDefaultReader.read().then(function(result) { hiddenElement = elements['hiddenElement'];
if (result.done) { entry_counter++;
return;
}
text = textDecoder.decode(result.value);
// The server will first send a json containing information about the message just sent
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 ++;
}
else{
// For the other enrtries, these are just the text of the chatbot
for (const char of text) {
txt = hiddenElement.innerHTML;
if (char != '\f') {
txt += char
hiddenElement.innerHTML = txt
messageTextElement.innerHTML = txt.replace(/\n/g, "<br>")
} }
else {
// scroll to bottom of chat window // For the other enrtries, these are just the text of the chatbot
chatWindow.scrollTop = chatWindow.scrollHeight; for (const char of text) {
} txt = hiddenElement.innerHTML;
entry_counter ++; if (char != '\f') {
txt += char
hiddenElement.innerHTML = txt
messageTextElement.innerHTML = txt.replace(/\n/g, "<br>")
}
// scroll to bottom of chat window
chatWindow.scrollTop = chatWindow.scrollHeight;
}
entry_counter++;
}
readStream();
});
} }
readStream(); readStream();
}); });
} });
readStream();
});
});
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";
editImg.classList.add('py-1', 'px-1', 'rounded', 'w-10', 'h-10'); editImg.classList.add('py-1', 'px-1', 'rounded', 'w-10', 'h-10');
editButton.appendChild(editImg) editButton.appendChild(editImg)
editButton.addEventListener('click', () => { editButton.addEventListener('click', () => {
const inputField = document.createElement('input'); const inputField = document.createElement('input');
inputField.type = 'text'; inputField.type = 'text';
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');
saveButton.innerHTML = 'Save'; saveButton.innerHTML = 'Save';
saveButton.addEventListener('click', () => { saveButton.addEventListener('click', () => {
const newText = inputField.value; const newText = inputField.value;
messageTextElement.innerHTML = newText; messageTextElement.innerHTML = newText;
// make request to update message // make request to update message
const url = `/update_message?id=${id}&message=${newText}`; const url = `/update_message?id=${id}&message=${newText}`;
fetch(url) fetch(url)
.then(response => { .then(response => {
if (!response.ok) { if (!response.ok) {
throw new Error('Network response was not ok'); throw new Error('Network response was not ok');
}
else {
console.log("Updated")
}
})
.catch(error => {
console.error('There was a problem updating the message:', error);
});
buttonsContainer.style.display = 'inline-block'
messageElement.replaceChild(messageTextElement, inputField);
//messageElement.removeChild(inputField);
messageElement.removeChild(saveButton);
});
messageElement.replaceChild(inputField, messageTextElement);
messageElement.appendChild(saveButton);
inputField.focus();
});
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.style.float = 'right'; // set the float property to right
deleteButton.style.display = 'inline-block'
deleteButton.innerHTML = '';
const deleteImg = document.createElement('img');
deleteImg.src = "/static/images/delete_discussion.png";
deleteImg.classList.add('py-2', 'px-2', 'rounded', 'w-15', 'h-15');
deleteButton.appendChild(deleteImg)
deleteButton.addEventListener('click', () => {
const url = `/delete_message?id=${id}`;
fetch(url)
.then(response => response.json())
.then(data => {
console.log(data.new_rank)
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.style.float = 'right'; // set the float property to right
rank_up.style.display = 'inline-block'
rank_up.innerHTML = '';
const thumbUpImg = document.createElement('img');
thumbUpImg.src = "/static/images/thumb_up.png";
thumbUpImg.classList.add('py-2', 'px-2', 'rounded', 'w-15', 'h-15');
rank_up.appendChild(thumbUpImg)
const thumbUpBadge = document.createElement('span');
thumbUpBadge.innerText = "";
thumbUpBadge.classList.add('inline-flex', 'items-center', 'justify-center', 'h-4', 'w-4', 'rounded-full', 'bg-red-500', 'text-white', 'text-xs', 'top-0', 'right-0');
rank_up.appendChild(thumbUpBadge)
rank_up.addEventListener('click', () => {
const url = `/message_rank_up?id=${id}`;
fetch(url)
.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'
} }
else{ else if (data.new_rank < 0) {
console.log("Updated") thumbUpBadge.innerText = ``
thumbDownBadge.innerText = `${data.new_rank}`
thumbUpBadge.display = `none`
thumbDownBadge.display = 'block'
}
else {
thumbUpBadge.innerText = ``
thumbDownBadge.innerText = ``
thumbUpBadge.display = `none`
thumbDownBadge.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);
}); });
buttonsContainer.style.display='inline-block' });
messageElement.replaceChild(messageTextElement, inputField);
//messageElement.removeChild(inputField); const rank_down = document.createElement('button');
messageElement.removeChild(saveButton); 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'
messageElement.replaceChild(inputField, messageTextElement); rank_down.innerHTML = '';
messageElement.appendChild(saveButton); const thumbDownImg = document.createElement('img');
inputField.focus(); thumbDownImg.src = "/static/images/thumb_down.png";
}); thumbDownImg.classList.add('py-2', 'px-2', 'rounded', 'w-15', 'h-15');
rank_down.appendChild(thumbDownImg)
const deleteButton = document.createElement('button'); const thumbDownBadge = document.createElement('span');
deleteButton.classList.add('bg-green-500', 'hover:bg-green-700', 'text-white', 'font-bold', 'py-0', 'px-0', 'rounded',"w-10","h-10"); thumbDownBadge.innerText = "";
deleteButton.style.float = 'right'; // set the float property to right thumbDownBadge.classList.add('inline-flex', 'items-center', 'justify-center', 'h-4', 'w-4', 'rounded-full', 'bg-red-500', 'text-white', 'text-xs', 'top-0', 'right-0');
deleteButton.style.display='inline-block' rank_down.appendChild(thumbDownBadge)
deleteButton.innerHTML = '';
const deleteImg = document.createElement('img'); rank_down.addEventListener('click', () => {
deleteImg.src = "/static/images/delete_discussion.png"; const url = `/message_rank_down?id=${id}`;
deleteImg.classList.add('py-2', 'px-2', 'rounded', 'w-15', 'h-15'); fetch(url)
deleteButton.appendChild(deleteImg) .then(response => response.json())
deleteButton.addEventListener('click', () => { .then(data => {
const url = `/delete_message?id=${id}`; console.log(data)
fetch(url) if (data.new_rank > 0) {
.then(response => response.json()) thumbUpBadge.innerText = `${data.new_rank}`
.then(data => { thumbDownBadge.innerText = ``
console.log(data.new_rank) thumbUpBadge.display = `block`
messageElement.style.display="none" thumbDownBadge.display = 'none'
}) }
.catch(error => { else if (data.new_rank < 0) {
console.error('There was a problem updating the message:', error); thumbUpBadge.innerText = ``
}); thumbDownBadge.innerText = `${data.new_rank}`
}); thumbUpBadge.display = `none`
const rank_up = document.createElement('button'); thumbDownBadge.display = 'block'
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 else {
rank_up.style.display='inline-block' thumbUpBadge.innerText = ``
rank_up.innerHTML = ''; thumbDownBadge.innerText = ``
const thumbUpImg = document.createElement('img'); thumbUpBadge.display = `none`
thumbUpImg.src = "/static/images/thumb_up.png"; thumbDownBadge.display = 'none'
thumbUpImg.classList.add('py-2', 'px-2', 'rounded', 'w-15', 'h-15'); }
rank_up.appendChild(thumbUpImg) })
const thumbUpBadge = document.createElement('span'); .catch(error => {
thumbUpBadge.innerText = ""; console.error('There was a problem updating the message:', error);
thumbUpBadge.classList.add('inline-flex', 'items-center', 'justify-center', 'h-4', 'w-4', 'rounded-full', 'bg-red-500', 'text-white', 'text-xs', 'top-0', 'right-0'); });
rank_up.appendChild(thumbUpBadge) });
buttonsContainer.appendChild(editButton);
rank_up.addEventListener('click', () => { buttonsContainer.appendChild(resendButton);
const url = `/message_rank_up?id=${id}`; buttonsContainer.appendChild(deleteButton);
fetch(url)
.then(response => response.json()) buttonsContainer.appendChild(rank_up);
.then(data => { buttonsContainer.appendChild(rank_down);
console.log(data.new_rank) messageElement.appendChild(buttonsContainer);
if(data.new_rank>0){ if (rank > 0) {
thumbUpBadge.innerText=`${data.new_rank}` thumbUpBadge.innerText = `${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 (rank < 0) {
thumbUpBadge.innerText=`` thumbUpBadge.innerText = ``
thumbDownBadge.innerText=`${data.new_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'
} }
})
.catch(error => {
console.error('There was a problem updating the message:', error);
});
});
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.style.float = 'right'; // set the float property to right
rank_down.style.display='inline-block'
rank_down.innerHTML = '';
const thumbDownImg = document.createElement('img');
thumbDownImg.src = "/static/images/thumb_down.png";
thumbDownImg.classList.add('py-2', 'px-2', 'rounded', 'w-15', 'h-15');
rank_down.appendChild(thumbDownImg)
const thumbDownBadge = document.createElement('span');
thumbDownBadge.innerText = "";
thumbDownBadge.classList.add('inline-flex', 'items-center', 'justify-center', 'h-4', 'w-4', 'rounded-full', 'bg-red-500', 'text-white', 'text-xs', 'top-0', 'right-0');
rank_down.appendChild(thumbDownBadge)
rank_down.addEventListener('click', () => {
const url = `/message_rank_down?id=${id}`;
fetch(url)
.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'
}
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'
}
})
.catch(error => {
console.error('There was a problem updating the message:', error);
});
});
buttonsContainer.appendChild(editButton);
buttonsContainer.appendChild(resendButton);
buttonsContainer.appendChild(deleteButton);
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'
}
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'
}
} }
chatWindow.appendChild(messageElement); chatWindow.appendChild(messageElement);
chatWindow.appendChild(hiddenElement); chatWindow.appendChild(hiddenElement);
attachAudio_modules(messageTextElement); // Dirty fix for disabling speech synth for firefox browsers :()
if (!userAgent.match(/firefox|fxios/i)) {
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
} }
} }

77
static/js/tabs.js
View File

@ -1,43 +1,48 @@
function showTab(tabId) { function showTab(tabId) {
// hide all tabs // hide all tabs
var tabs = document.getElementsByClassName('tab-pane'); var tabs = document.getElementsByClassName('tab-pane');
for (var i = 0; i < tabs.length; i++) { for (var i = 0; i < tabs.length; i++) {
tabs[i].style.display = 'none'; tabs[i].style.display = 'none';
}
// show the selected tab
console.log(tabId)
var tab = document.getElementById(tabId);
tab.style.display = 'block';
} }
// show the selected tab
console.log(tabId)
var tab = document.getElementById(tabId);
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);
}); });
} }
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()
populate_menu(); populate_menu();
load_discussion(); load_discussion();
update_main(); update_main();
db_export(); db_export();
prepre_audio();
add_audio_in_ui();
populateVoicesList();
populate_models()
}) // Dirty fix for disabling speech synth for firefox browsers :()
.catch(error => { if (!userAgent.match(/firefox|fxios/i)) {
console.error('Error loading main page:', error); prepre_audio();
}); add_audio_in_ui();
populateVoicesList();
}
populate_models()
})
.catch(error => {
console.error('Error loading main page:', error);
});