summaryrefslogtreecommitdiffstats
path: root/g4f/gui/client/static/js/chat.v1.js
diff options
context:
space:
mode:
authorHeiner Lohaus <hlohaus@users.noreply.github.com>2024-04-09 05:54:47 +0200
committerHeiner Lohaus <hlohaus@users.noreply.github.com>2024-04-09 05:54:47 +0200
commitd4a92bb8df56009a7e5520dca0a3ed8f79e92d06 (patch)
tree1e044ae1edfcc1f737b40ae1ecf59d25e371fd3d /g4f/gui/client/static/js/chat.v1.js
parentAdd DuckDuckGo Provider, Add SpeechRecognition to gui (diff)
downloadgpt4free-d4a92bb8df56009a7e5520dca0a3ed8f79e92d06.tar
gpt4free-d4a92bb8df56009a7e5520dca0a3ed8f79e92d06.tar.gz
gpt4free-d4a92bb8df56009a7e5520dca0a3ed8f79e92d06.tar.bz2
gpt4free-d4a92bb8df56009a7e5520dca0a3ed8f79e92d06.tar.lz
gpt4free-d4a92bb8df56009a7e5520dca0a3ed8f79e92d06.tar.xz
gpt4free-d4a92bb8df56009a7e5520dca0a3ed8f79e92d06.tar.zst
gpt4free-d4a92bb8df56009a7e5520dca0a3ed8f79e92d06.zip
Diffstat (limited to 'g4f/gui/client/static/js/chat.v1.js')
-rw-r--r--g4f/gui/client/static/js/chat.v1.js102
1 files changed, 88 insertions, 14 deletions
diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js
index 87a06aa6..0aa601e8 100644
--- a/g4f/gui/client/static/js/chat.v1.js
+++ b/g4f/gui/client/static/js/chat.v1.js
@@ -64,6 +64,7 @@ const highlight = (container) => {
);
}
+let stopped = false;
const register_message_buttons = async () => {
document.querySelectorAll(".message .fa-xmark").forEach(async (el) => {
if (!("click" in el.dataset)) {
@@ -90,6 +91,72 @@ const register_message_buttons = async () => {
})
}
});
+ document.querySelectorAll(".message .fa-volume-high").forEach(async (el) => {
+ if (!("click" in el.dataset)) {
+ el.dataset.click = "true";
+ el.addEventListener("click", async () => {
+ if ("active" in el.classList || window.doSpeech || stopped) {
+ stopped = true;
+ return;
+ }
+ el.classList.add("blink")
+ el.classList.add("active")
+ const message_el = el.parentElement.parentElement.parentElement;
+ const content_el = el.parentElement.parentElement;
+ let speechText = await get_message(window.conversation_id, message_el.dataset.index);
+
+ speechText = speechText.replaceAll(/\[(.+)\]\(.+\)/gm, "($1)");
+ speechText = speechText.replaceAll(/\(http.+\)/gm, "");
+ speechText = speechText.replaceAll("`", "").replaceAll("#", "")
+ speechText = speechText.replaceAll(
+ /<!-- generated images start -->[\s\S]+<!-- generated images end -->/gm,
+ ""
+ )
+
+ const lines = speechText.trim().split(/\n|\.|;/);
+ let ended = true;
+ window.onSpeechResponse = (url) => {
+ if (url) {
+ var sound = document.createElement('audio');
+ sound.controls = 'controls';
+ sound.src = url;
+ sound.type = 'audio/wav';
+ if (ended) {
+ sound.autoplay = true;
+ }
+ sound.onended = function() {
+ ended = true;
+ };
+ sound.onplay = function() {
+ ended = false;
+ };
+ var container = document.createElement('div');
+ container.classList.add("audio");
+ container.appendChild(sound);
+ content_el.appendChild(container);
+ }
+ if (lines.length < 1 || stopped) {
+ el.classList.remove("blink");
+ el.classList.remove("active");
+ return;
+ }
+ while (lines.length > 0) {
+ let line = lines.shift();
+ var reg = new RegExp('^[0-9]$');
+ if (line && !reg.test(line)) {
+ return handleGenerateSpeech(line);
+ }
+ }
+ if (!line) {
+ el.classList.remove("blink")
+ el.classList.remove("active")
+ }
+ }
+ let line = lines.shift();
+ return handleGenerateSpeech(line);
+ });
+ }
+ });
}
const delete_conversations = async () => {
@@ -145,7 +212,11 @@ const handle_ask = async () => {
: ''
}
</div>
- <div class="count">${count_words_and_tokens(message, get_selected_model())} <i class="fa-regular fa-clipboard"></i></div>
+ <div class="count">
+ ${count_words_and_tokens(message, get_selected_model())}
+ <i class="fa-solid fa-volume-high"></i>
+ <i class="fa-regular fa-clipboard"></i>
+ </div>
</div>
</div>
`;
@@ -479,7 +550,11 @@ const load_conversation = async (conversation_id, scroll=true) => {
<div class="content">
${provider}
<div class="content_inner">${markdown_render(item.content)}</div>
- <div class="count">${count_words_and_tokens(item.content, next_provider?.model)} <i class="fa-regular fa-clipboard"></i></div>
+ <div class="count">
+ ${count_words_and_tokens(item.content, next_provider?.model)}
+ <i class="fa-solid fa-volume-high"></i>
+ <i class="fa-regular fa-clipboard"></i>
+ </div>
</div>
</div>
`;
@@ -1149,10 +1224,12 @@ if (SpeechRecognition) {
}
let startValue;
+ let lastValue;
let timeoutHandle;
recognition.onstart = function() {
microLabel.classList.add("recognition");
startValue = messageInput.value;
+ lastValue = "";
timeoutHandle = window.setTimeout(may_stop, 8000);
};
recognition.onend = function() {
@@ -1163,25 +1240,22 @@ if (SpeechRecognition) {
return;
}
window.clearTimeout(timeoutHandle);
- let notFinal = "";
- event.results.forEach((result) => {
- const newText = result[0].transcript;
- if (newText) {
+ let newText;
+ Array.from(event.results).forEach((result) => {
+ newText = result[0].transcript;
+ if (newText && newText != lastValue) {
+ messageInput.value = `${startValue ? startValue+"\n" : ""}${newText.trim()}`;
if (result.isFinal) {
- messageInput.value = `${startValue ? startValue+"\n" : ""}${newText.trim()}`;
+ lastValue = newText;
startValue = messageInput.value;
- notFinal = "";
messageInput.focus();
- } else {
- notFinal += newText;
- messageInput.value = `${startValue ? startValue+"\n" : ""}${notFinal.trim()}`;
}
messageInput.style.height = messageInput.scrollHeight + "px";
messageInput.scrollTop = messageInput.scrollHeight;
}
});
window.clearTimeout(timeoutHandle);
- timeoutHandle = window.setTimeout(may_stop, notFinal ? 5000 : 8000);
+ timeoutHandle = window.setTimeout(may_stop, newText ? 8000 : 5000);
};
microLabel.addEventListener("click", () => {
@@ -1189,8 +1263,8 @@ if (SpeechRecognition) {
window.clearTimeout(timeoutHandle);
recognition.stop();
} else {
- const lang = document.getElementById("recognition-language")?.value || navigator.language;
- recognition.lang = lang;
+ const lang = document.getElementById("recognition-language")?.value;
+ recognition.lang = lang || navigator.language;
recognition.start();
}
});