|
const colorThemes = document.querySelectorAll('[name="theme"]'); |
|
const message_box = document.getElementById(`messages`); |
|
const messageInput = document.getElementById(`message-input`); |
|
const box_conversations = document.querySelector(`.top`); |
|
const stop_generating = document.querySelector(`.stop_generating`); |
|
const regenerate = document.querySelector(`.regenerate`); |
|
const sidebar = document.querySelector(".conversations"); |
|
const sidebar_button = document.querySelector(".mobile-sidebar"); |
|
const sendButton = document.getElementById("send-button"); |
|
const imageInput = document.getElementById("image"); |
|
const cameraInput = document.getElementById("camera"); |
|
const fileInput = document.getElementById("file"); |
|
const microLabel = document.querySelector(".micro-label"); |
|
const inputCount = document.getElementById("input-count").querySelector(".text"); |
|
const providerSelect = document.getElementById("provider"); |
|
const modelSelect = document.getElementById("model"); |
|
const modelProvider = document.getElementById("model2"); |
|
const systemPrompt = document.getElementById("systemPrompt"); |
|
const settings = document.querySelector(".settings"); |
|
const chat = document.querySelector(".conversation"); |
|
const album = document.querySelector(".images"); |
|
const log_storage = document.querySelector(".log"); |
|
|
|
const optionElements = document.querySelectorAll(".settings input, .settings textarea, #model, #model2, #provider") |
|
|
|
let provider_storage = {}; |
|
let message_storage = {}; |
|
let controller_storage = {}; |
|
let content_storage = {}; |
|
let error_storage = {}; |
|
let synthesize_storage = {}; |
|
|
|
messageInput.addEventListener("blur", () => { |
|
window.scrollTo(0, 0); |
|
}); |
|
|
|
messageInput.addEventListener("focus", () => { |
|
document.documentElement.scrollTop = document.documentElement.scrollHeight; |
|
}); |
|
|
|
appStorage = window.localStorage || { |
|
setItem: (key, value) => self[key] = value, |
|
getItem: (key) => self[key], |
|
removeItem: (key) => delete self[key], |
|
length: 0 |
|
} |
|
let markdown_render = () => null; |
|
if (window.markdownit) { |
|
const markdown = window.markdownit(); |
|
markdown_render = (content) => { |
|
return markdown.render(content |
|
.replaceAll(/<!-- generated images start -->|<!-- generated images end -->/gm, "") |
|
.replaceAll(/<img data-prompt="[^>]+">/gm, "") |
|
) |
|
.replaceAll("<a href=", '<a target="_blank" href=') |
|
.replaceAll('<code>', '<code class="language-plaintext">') |
|
} |
|
} |
|
function filter_message(text) { |
|
return text.replaceAll( |
|
/<!-- generated images start -->[\s\S]+<!-- generated images end -->/gm, "" |
|
) |
|
} |
|
|
|
function fallback_clipboard (text) { |
|
var textBox = document.createElement("textarea"); |
|
textBox.value = text; |
|
textBox.style.top = "0"; |
|
textBox.style.left = "0"; |
|
textBox.style.position = "fixed"; |
|
document.body.appendChild(textBox); |
|
textBox.focus(); |
|
textBox.select(); |
|
try { |
|
var success = document.execCommand('copy'); |
|
var msg = success ? 'succeeded' : 'failed'; |
|
console.log('Clipboard Fallback: Copying text command ' + msg); |
|
} catch (e) { |
|
console.error('Clipboard Fallback: Unable to copy', e); |
|
} |
|
document.body.removeChild(textBox); |
|
} |
|
|
|
hljs.addPlugin(new CopyButtonPlugin()); |
|
let typesetPromise = Promise.resolve(); |
|
const highlight = (container) => { |
|
container.querySelectorAll('code:not(.hljs').forEach((el) => { |
|
if (el.className != "hljs") { |
|
hljs.highlightElement(el); |
|
} |
|
}); |
|
if (window.MathJax) { |
|
typesetPromise = typesetPromise.then( |
|
() => MathJax.typesetPromise([container]) |
|
).catch( |
|
(err) => console.log('Typeset failed: ' + err.message) |
|
); |
|
} |
|
} |
|
|
|
const register_message_buttons = async () => { |
|
document.querySelectorAll(".message .fa-xmark").forEach(async (el) => { |
|
if (!("click" in el.dataset)) { |
|
el.dataset.click = "true"; |
|
el.addEventListener("click", async () => { |
|
const message_el = el.parentElement.parentElement; |
|
await remove_message(window.conversation_id, message_el.dataset.index); |
|
await safe_load_conversation(window.conversation_id, false); |
|
}); |
|
} |
|
}); |
|
|
|
document.querySelectorAll(".message .fa-clipboard").forEach(async (el) => { |
|
if (!("click" in el.dataset)) { |
|
el.dataset.click = "true"; |
|
el.addEventListener("click", async () => { |
|
const message_el = el.parentElement.parentElement.parentElement; |
|
const copyText = await get_message(window.conversation_id, message_el.dataset.index); |
|
try { |
|
if (!navigator.clipboard) { |
|
throw new Error("navigator.clipboard: Clipboard API unavailable."); |
|
} |
|
await navigator.clipboard.writeText(copyText); |
|
} catch (e) { |
|
console.error(e); |
|
console.error("Clipboard API writeText() failed! Fallback to document.exec(\"copy\")..."); |
|
fallback_clipboard(copyText); |
|
} |
|
el.classList.add("clicked"); |
|
setTimeout(() => el.classList.remove("clicked"), 1000); |
|
}) |
|
} |
|
}); |
|
|
|
document.querySelectorAll(".message .fa-volume-high").forEach(async (el) => { |
|
if (!("click" in el.dataset)) { |
|
el.dataset.click = "true"; |
|
el.addEventListener("click", async () => { |
|
const message_el = el.parentElement.parentElement.parentElement; |
|
let audio; |
|
if (message_el.dataset.synthesize_url) { |
|
el.classList.add("active"); |
|
setTimeout(()=>el.classList.remove("active"), 2000); |
|
const media_player = document.querySelector(".media_player"); |
|
if (!media_player.classList.contains("show")) { |
|
media_player.classList.add("show"); |
|
audio = new Audio(message_el.dataset.synthesize_url); |
|
audio.controls = true; |
|
media_player.appendChild(audio); |
|
} else { |
|
audio = media_player.querySelector("audio"); |
|
audio.src = message_el.dataset.synthesize_url; |
|
} |
|
audio.play(); |
|
return; |
|
} |
|
let playlist = []; |
|
function play_next() { |
|
const next = playlist.shift(); |
|
if (next && el.dataset.do_play) { |
|
next.play(); |
|
} |
|
} |
|
if (el.dataset.stopped) { |
|
el.classList.remove("blink") |
|
delete el.dataset.stopped; |
|
return; |
|
} |
|
if (el.dataset.running) { |
|
el.dataset.stopped = true; |
|
el.classList.add("blink") |
|
playlist = []; |
|
return; |
|
} |
|
el.dataset.running = true; |
|
el.classList.add("blink") |
|
el.classList.add("active") |
|
|
|
let speechText = await get_message(window.conversation_id, message_el.dataset.index); |
|
|
|
speechText = speechText.replaceAll(/([^0-9])\./gm, "$1.;"); |
|
speechText = speechText.replaceAll("?", "?;"); |
|
speechText = speechText.replaceAll(/\[(.+)\]\(.+\)/gm, "($1)"); |
|
speechText = speechText.replaceAll(/```[a-z]+/gm, ""); |
|
speechText = filter_message(speechText.replaceAll("`", "").replaceAll("#", "")) |
|
const lines = speechText.trim().split(/\n|;/).filter(v => count_words(v)); |
|
|
|
window.onSpeechResponse = (url) => { |
|
if (!el.dataset.stopped) { |
|
el.classList.remove("blink") |
|
} |
|
if (url) { |
|
var sound = document.createElement('audio'); |
|
sound.controls = 'controls'; |
|
sound.src = url; |
|
sound.type = 'audio/wav'; |
|
sound.onended = function() { |
|
el.dataset.do_play = true; |
|
setTimeout(play_next, 1000); |
|
}; |
|
sound.onplay = function() { |
|
delete el.dataset.do_play; |
|
}; |
|
var container = document.createElement('div'); |
|
container.classList.add("audio"); |
|
container.appendChild(sound); |
|
content_el.appendChild(container); |
|
if (!el.dataset.stopped) { |
|
playlist.push(sound); |
|
if (el.dataset.do_play) { |
|
play_next(); |
|
} |
|
} |
|
} |
|
let line = lines.length > 0 ? lines.shift() : null; |
|
if (line && !el.dataset.stopped) { |
|
handleGenerateSpeech(line); |
|
} else { |
|
el.classList.remove("active"); |
|
el.classList.remove("blink"); |
|
delete el.dataset.running; |
|
} |
|
} |
|
el.dataset.do_play = true; |
|
let line = lines.shift(); |
|
handleGenerateSpeech(line); |
|
}); |
|
} |
|
}); |
|
document.querySelectorAll(".message .fa-rotate").forEach(async (el) => { |
|
if (!("click" in el.dataset)) { |
|
el.dataset.click = "true"; |
|
el.addEventListener("click", async () => { |
|
const message_el = el.parentElement.parentElement.parentElement; |
|
el.classList.add("clicked"); |
|
setTimeout(() => el.classList.remove("clicked"), 1000); |
|
await ask_gpt(get_message_id(), message_el.dataset.index); |
|
}); |
|
} |
|
}); |
|
document.querySelectorAll(".message .fa-whatsapp").forEach(async (el) => { |
|
if (!el.parentElement.href) { |
|
const text = el.parentElement.parentElement.parentElement.innerText; |
|
el.parentElement.href = `https://wa.me/?text=${encodeURIComponent(text)}`; |
|
} |
|
}); |
|
document.querySelectorAll(".message .fa-print").forEach(async (el) => { |
|
if (!("click" in el.dataset)) { |
|
el.dataset.click = "true"; |
|
el.addEventListener("click", async () => { |
|
const message_el = el.parentElement.parentElement.parentElement; |
|
el.classList.add("clicked"); |
|
message_box.scrollTop = 0; |
|
message_el.classList.add("print"); |
|
setTimeout(() => el.classList.remove("clicked"), 1000); |
|
setTimeout(() => message_el.classList.remove("print"), 1000); |
|
window.print() |
|
}) |
|
} |
|
}); |
|
} |
|
|
|
const delete_conversations = async () => { |
|
const remove_keys = []; |
|
for (let i = 0; i < appStorage.length; i++){ |
|
let key = appStorage.key(i); |
|
if (key.startsWith("conversation:")) { |
|
remove_keys.push(key); |
|
} |
|
} |
|
remove_keys.forEach((key)=>appStorage.removeItem(key)); |
|
hide_sidebar(); |
|
await new_conversation(); |
|
}; |
|
|
|
const handle_ask = async () => { |
|
messageInput.style.height = "82px"; |
|
messageInput.focus(); |
|
await scroll_to_bottom(); |
|
|
|
let message = messageInput.value; |
|
if (message.length <= 0) { |
|
return; |
|
} |
|
messageInput.value = ""; |
|
await count_input() |
|
await add_conversation(window.conversation_id, message); |
|
|
|
if ("text" in fileInput.dataset) { |
|
message += '\n```' + fileInput.dataset.type + '\n'; |
|
message += fileInput.dataset.text; |
|
message += '\n```' |
|
} |
|
let message_index = await add_message(window.conversation_id, "user", message); |
|
let message_id = get_message_id(); |
|
|
|
if (imageInput.dataset.src) URL.revokeObjectURL(imageInput.dataset.src); |
|
const input = imageInput && imageInput.files.length > 0 ? imageInput : cameraInput |
|
if (input.files.length > 0) imageInput.dataset.src = URL.createObjectURL(input.files[0]); |
|
else delete imageInput.dataset.src |
|
|
|
message_box.innerHTML += ` |
|
<div class="message" data-index="${message_index}"> |
|
<div class="user"> |
|
${user_image} |
|
<i class="fa-solid fa-xmark"></i> |
|
<i class="fa-regular fa-phone-arrow-up-right"></i> |
|
</div> |
|
<div class="content" id="user_${message_id}"> |
|
<div class="content_inner"> |
|
${markdown_render(message)} |
|
${imageInput.dataset.src |
|
? '<img src="' + imageInput.dataset.src + '" alt="Image upload">' |
|
: '' |
|
} |
|
</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> |
|
<a><i class="fa-brands fa-whatsapp"></i></a> |
|
<i class="fa-solid fa-print"></i> |
|
<i class="fa-solid fa-rotate"></i> |
|
</div> |
|
</div> |
|
</div> |
|
`; |
|
highlight(message_box); |
|
await ask_gpt(message_id); |
|
}; |
|
|
|
async function safe_remove_cancel_button() { |
|
for (let key in controller_storage) { |
|
if (!controller_storage[key].signal.aborted) { |
|
return; |
|
} |
|
} |
|
stop_generating.classList.add("stop_generating-hidden"); |
|
} |
|
|
|
regenerate.addEventListener("click", async () => { |
|
regenerate.classList.add("regenerate-hidden"); |
|
setTimeout(()=>regenerate.classList.remove("regenerate-hidden"), 3000); |
|
await hide_message(window.conversation_id); |
|
await ask_gpt(get_message_id()); |
|
}); |
|
|
|
stop_generating.addEventListener("click", async () => { |
|
stop_generating.classList.add("stop_generating-hidden"); |
|
regenerate.classList.remove("regenerate-hidden"); |
|
let key; |
|
for (key in controller_storage) { |
|
if (!controller_storage[key].signal.aborted) { |
|
controller_storage[key].abort(); |
|
let message = message_storage[key]; |
|
if (message) { |
|
content_storage[key].inner.innerHTML += " [aborted]"; |
|
message_storage[key] += " [aborted]"; |
|
console.log(`aborted ${window.conversation_id} #${key}`); |
|
} |
|
} |
|
} |
|
await load_conversation(window.conversation_id, false); |
|
}); |
|
|
|
document.querySelector(".media_player .fa-x").addEventListener("click", ()=>{ |
|
const media_player = document.querySelector(".media_player"); |
|
media_player.classList.remove("show"); |
|
const audio = document.querySelector(".media_player audio"); |
|
media_player.removeChild(audio); |
|
}); |
|
|
|
const prepare_messages = (messages, message_index = -1) => { |
|
if (message_index >= 0) { |
|
messages = messages.filter((_, index) => message_index >= index); |
|
} |
|
|
|
|
|
let last_message; |
|
while (last_message = messages.pop()) { |
|
if (last_message["role"] == "user") { |
|
messages.push(last_message); |
|
break; |
|
} |
|
} |
|
|
|
let new_messages = []; |
|
if (systemPrompt?.value) { |
|
new_messages.push({ |
|
"role": "system", |
|
"content": systemPrompt.value |
|
}); |
|
} |
|
|
|
|
|
if (document.getElementById('history')?.checked) { |
|
if (message_index == null) { |
|
messages = [messages.pop(), messages.pop()]; |
|
} else { |
|
messages = [messages.pop()]; |
|
} |
|
} |
|
|
|
messages.forEach((new_message) => { |
|
|
|
if (new_message && !new_message.regenerate) { |
|
|
|
new_message.content = filter_message(new_message.content); |
|
delete new_message.provider; |
|
delete new_message.synthesize; |
|
new_messages.push(new_message) |
|
} |
|
}); |
|
|
|
return new_messages; |
|
} |
|
|
|
async function add_message_chunk(message, message_id) { |
|
content_map = content_storage[message_id]; |
|
if (message.type == "conversation") { |
|
console.info("Conversation used:", message.conversation) |
|
} else if (message.type == "provider") { |
|
provider_storage[message_id] = message.provider; |
|
content_map.content.querySelector('.provider').innerHTML = ` |
|
<a href="${message.provider.url}" target="_blank"> |
|
${message.provider.label ? message.provider.label : message.provider.name} |
|
</a> |
|
${message.provider.model ? ' with ' + message.provider.model : ''} |
|
` |
|
} else if (message.type == "message") { |
|
console.error(message.message) |
|
} else if (message.type == "error") { |
|
error_storage[message_id] = message.error |
|
console.error(message.error); |
|
content_map.inner.innerHTML += `<p><strong>An error occured:</strong> ${message.error}</p>`; |
|
let p = document.createElement("p"); |
|
p.innerText = message.error; |
|
log_storage.appendChild(p); |
|
} else if (message.type == "preview") { |
|
content_map.inner.innerHTML = markdown_render(message.preview); |
|
} else if (message.type == "content") { |
|
message_storage[message_id] += message.content; |
|
html = markdown_render(message_storage[message_id]); |
|
let lastElement, lastIndex = null; |
|
for (element of ['</p>', '</code></pre>', '</p>\n</li>\n</ol>', '</li>\n</ol>', '</li>\n</ul>']) { |
|
const index = html.lastIndexOf(element) |
|
if (index - element.length > lastIndex) { |
|
lastElement = element; |
|
lastIndex = index; |
|
} |
|
} |
|
if (lastIndex) { |
|
html = html.substring(0, lastIndex) + '<span class="cursor"></span>' + lastElement; |
|
} |
|
content_map.inner.innerHTML = html; |
|
content_map.count.innerText = count_words_and_tokens(message_storage[message_id], provider_storage[message_id]?.model); |
|
highlight(content_map.inner); |
|
} else if (message.type == "log") { |
|
let p = document.createElement("p"); |
|
p.innerText = message.log; |
|
log_storage.appendChild(p); |
|
} else if (message.type == "synthesize") { |
|
synthesize_storage[message_id] = message.synthesize; |
|
} |
|
let scroll_down = ()=>{ |
|
if (message_box.scrollTop >= message_box.scrollHeight - message_box.clientHeight - 100) { |
|
window.scrollTo(0, 0); |
|
message_box.scrollTo({ top: message_box.scrollHeight, behavior: "auto" }); |
|
} |
|
} |
|
if (!content_map.container.classList.contains("regenerate")) { |
|
scroll_down(); |
|
setTimeout(scroll_down, 200); |
|
} |
|
} |
|
|
|
cameraInput?.addEventListener("click", (e) => { |
|
if (window?.pywebview) { |
|
e.preventDefault(); |
|
pywebview.api.take_picture(); |
|
} |
|
}); |
|
|
|
imageInput?.addEventListener("click", (e) => { |
|
if (window?.pywebview) { |
|
e.preventDefault(); |
|
pywebview.api.choose_image(); |
|
} |
|
}); |
|
|
|
const ask_gpt = async (message_id, message_index = -1) => { |
|
let messages = await get_messages(window.conversation_id); |
|
messages = prepare_messages(messages, message_index); |
|
message_storage[message_id] = ""; |
|
stop_generating.classList.remove("stop_generating-hidden"); |
|
|
|
if (message_index == -1) { |
|
await scroll_to_bottom(); |
|
} |
|
|
|
let count_total = message_box.querySelector('.count_total'); |
|
count_total ? count_total.parentElement.removeChild(count_total) : null; |
|
|
|
const message_el = document.createElement("div"); |
|
message_el.classList.add("message"); |
|
if (message_index != -1) { |
|
message_el.classList.add("regenerate"); |
|
} |
|
message_el.innerHTML += ` |
|
<div class="assistant"> |
|
${gpt_image} |
|
<i class="fa-solid fa-xmark"></i> |
|
<i class="fa-regular fa-phone-arrow-down-left"></i> |
|
</div> |
|
<div class="content" id="gpt_${message_id}"> |
|
<div class="provider"></div> |
|
<div class="content_inner"><span class="cursor"></span></div> |
|
<div class="count"></div> |
|
</div> |
|
`; |
|
if (message_index == -1) { |
|
message_box.appendChild(message_el); |
|
} else { |
|
parent_message = message_box.querySelector(`.message[data-index="${message_index}"]`); |
|
if (!parent_message) { |
|
return; |
|
} |
|
parent_message.after(message_el); |
|
} |
|
|
|
controller_storage[message_id] = new AbortController(); |
|
|
|
let content_el = document.getElementById(`gpt_${message_id}`) |
|
let content_map = content_storage[message_id] = { |
|
container: message_el, |
|
content: content_el, |
|
inner: content_el.querySelector('.content_inner'), |
|
count: content_el.querySelector('.count'), |
|
} |
|
if (message_index == -1) { |
|
await scroll_to_bottom(); |
|
} |
|
try { |
|
const input = imageInput && imageInput.files.length > 0 ? imageInput : cameraInput; |
|
const file = input && input.files.length > 0 ? input.files[0] : null; |
|
const provider = providerSelect.options[providerSelect.selectedIndex].value; |
|
const auto_continue = document.getElementById("auto_continue")?.checked; |
|
const download_images = document.getElementById("download_images")?.checked; |
|
let api_key = get_api_key_by_provider(provider); |
|
await api("conversation", { |
|
id: message_id, |
|
conversation_id: window.conversation_id, |
|
model: get_selected_model(), |
|
web_search: document.getElementById("switch").checked, |
|
provider: provider, |
|
messages: messages, |
|
auto_continue: auto_continue, |
|
download_images: download_images, |
|
api_key: api_key, |
|
}, file, message_id); |
|
if (!error_storage[message_id]) { |
|
html = markdown_render(message_storage[message_id]); |
|
content_map.inner.innerHTML = html; |
|
highlight(content_map.inner); |
|
if (imageInput) imageInput.value = ""; |
|
if (cameraInput) cameraInput.value = ""; |
|
if (fileInput) fileInput.value = ""; |
|
} |
|
} catch (e) { |
|
console.error(e); |
|
if (e.name != "AbortError") { |
|
error_storage[message_id] = true; |
|
content_map.inner.innerHTML += `<p><strong>An error occured:</strong> ${e}</p>`; |
|
} |
|
} |
|
delete controller_storage[message_id]; |
|
if (!error_storage[message_id] && message_storage[message_id]) { |
|
const message_provider = message_id in provider_storage ? provider_storage[message_id] : null; |
|
await add_message( |
|
window.conversation_id, |
|
"assistant", |
|
message_storage[message_id], |
|
message_provider, |
|
message_index, |
|
synthesize_storage[message_id] |
|
); |
|
await safe_load_conversation(window.conversation_id, message_index == -1); |
|
} else { |
|
let cursorDiv = message_el.querySelector(".cursor"); |
|
if (cursorDiv) cursorDiv.parentNode.removeChild(cursorDiv); |
|
} |
|
if (message_index == -1) { |
|
await scroll_to_bottom(); |
|
} |
|
await safe_remove_cancel_button(); |
|
await register_message_buttons(); |
|
await load_conversations(); |
|
regenerate.classList.remove("regenerate-hidden"); |
|
}; |
|
|
|
async function scroll_to_bottom() { |
|
window.scrollTo(0, 0); |
|
message_box.scrollTop = message_box.scrollHeight; |
|
} |
|
|
|
const clear_conversations = async () => { |
|
const elements = box_conversations.childNodes; |
|
let index = elements.length; |
|
|
|
if (index > 0) { |
|
while (index--) { |
|
const element = elements[index]; |
|
if ( |
|
element.nodeType === Node.ELEMENT_NODE && |
|
element.tagName.toLowerCase() !== `button` |
|
) { |
|
box_conversations.removeChild(element); |
|
} |
|
} |
|
} |
|
}; |
|
|
|
const clear_conversation = async () => { |
|
let messages = message_box.getElementsByTagName(`div`); |
|
|
|
while (messages.length > 0) { |
|
message_box.removeChild(messages[0]); |
|
} |
|
}; |
|
|
|
async function set_conversation_title(conversation_id, title) { |
|
conversation = await get_conversation(conversation_id) |
|
conversation.new_title = title; |
|
appStorage.setItem( |
|
`conversation:${conversation.id}`, |
|
JSON.stringify(conversation) |
|
); |
|
} |
|
|
|
const show_option = async (conversation_id) => { |
|
const conv = document.getElementById(`conv-${conversation_id}`); |
|
const choi = document.getElementById(`cho-${conversation_id}`); |
|
|
|
conv.style.display = "none"; |
|
choi.style.display = "block"; |
|
|
|
const el = document.getElementById(`convo-${conversation_id}`); |
|
const trash_el = el.querySelector(".fa-trash"); |
|
const title_el = el.querySelector("span.convo-title"); |
|
if (title_el) { |
|
const left_el = el.querySelector(".left"); |
|
const input_el = document.createElement("input"); |
|
input_el.value = title_el.innerText; |
|
input_el.classList.add("convo-title"); |
|
input_el.onfocus = () => trash_el.style.display = "none"; |
|
input_el.onchange = () => set_conversation_title(conversation_id, input_el.value); |
|
left_el.removeChild(title_el); |
|
left_el.appendChild(input_el); |
|
} |
|
}; |
|
|
|
const hide_option = async (conversation_id) => { |
|
const conv = document.getElementById(`conv-${conversation_id}`); |
|
const choi = document.getElementById(`cho-${conversation_id}`); |
|
|
|
conv.style.display = "block"; |
|
choi.style.display = "none"; |
|
|
|
const el = document.getElementById(`convo-${conversation_id}`); |
|
el.querySelector(".fa-trash").style.display = ""; |
|
const input_el = el.querySelector("input.convo-title"); |
|
if (input_el) { |
|
const left_el = el.querySelector(".left"); |
|
const span_el = document.createElement("span"); |
|
span_el.innerText = input_el.value; |
|
span_el.classList.add("convo-title"); |
|
span_el.onclick = () => set_conversation(conversation_id); |
|
left_el.removeChild(input_el); |
|
left_el.appendChild(span_el); |
|
} |
|
}; |
|
|
|
const delete_conversation = async (conversation_id) => { |
|
appStorage.removeItem(`conversation:${conversation_id}`); |
|
|
|
const conversation = document.getElementById(`convo-${conversation_id}`); |
|
conversation.remove(); |
|
|
|
if (window.conversation_id == conversation_id) { |
|
await new_conversation(); |
|
} |
|
|
|
await load_conversations(); |
|
}; |
|
|
|
const set_conversation = async (conversation_id) => { |
|
history.pushState({}, null, `/chat/${conversation_id}`); |
|
window.conversation_id = conversation_id; |
|
|
|
await clear_conversation(); |
|
await load_conversation(conversation_id); |
|
load_conversations(); |
|
hide_sidebar(); |
|
log_storage.classList.add("hidden"); |
|
}; |
|
|
|
const new_conversation = async () => { |
|
history.pushState({}, null, `/chat/`); |
|
window.conversation_id = uuid(); |
|
|
|
await clear_conversation(); |
|
if (systemPrompt) { |
|
systemPrompt.value = ""; |
|
} |
|
load_conversations(); |
|
hide_sidebar(); |
|
log_storage.classList.add("hidden"); |
|
say_hello(); |
|
}; |
|
|
|
const load_conversation = async (conversation_id, scroll=true) => { |
|
let conversation = await get_conversation(conversation_id); |
|
let messages = conversation?.items || []; |
|
|
|
if (!conversation) { |
|
return; |
|
} |
|
|
|
if (systemPrompt) { |
|
systemPrompt.value = conversation.system || ""; |
|
} |
|
|
|
let elements = ""; |
|
let last_model = null; |
|
for (i in messages) { |
|
let item = messages[i]; |
|
last_model = item.provider?.model; |
|
let next_i = parseInt(i) + 1; |
|
let next_provider = item.provider ? item.provider : (messages.length > next_i ? messages[next_i].provider : null); |
|
let provider_label = item.provider?.label ? item.provider.label : item.provider?.name; |
|
let provider_link = item.provider?.name ? `<a href="${item.provider.url}" target="_blank">${provider_label}</a>` : ""; |
|
let provider = provider_link ? ` |
|
<div class="provider"> |
|
${provider_link} |
|
${item.provider.model ? ' with ' + item.provider.model : ''} |
|
</div> |
|
` : ""; |
|
let synthesize_params = {text: item.content} |
|
let synthesize_provider = "Gemini"; |
|
if (item.synthesize) { |
|
synthesize_params = item.synthesize.data |
|
synthesize_provider = item.synthesize.provider; |
|
} |
|
synthesize_params = (new URLSearchParams(synthesize_params)).toString(); |
|
let synthesize_url = `/backend-api/v2/synthesize/${synthesize_provider}?${synthesize_params}`; |
|
|
|
elements += ` |
|
<div class="message${item.regenerate ? " regenerate": ""}" data-index="${i}" data-synthesize_url="${synthesize_url}"> |
|
<div class="${item.role}"> |
|
${item.role == "assistant" ? gpt_image : user_image} |
|
<i class="fa-solid fa-xmark"></i> |
|
${item.role == "assistant" |
|
? `<i class="fa-regular fa-phone-arrow-down-left"></i>` |
|
: `<i class="fa-regular fa-phone-arrow-up-right"></i>` |
|
} |
|
</div> |
|
<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-solid fa-volume-high"></i> |
|
<i class="fa-regular fa-clipboard"></i> |
|
<a><i class="fa-brands fa-whatsapp"></i></a> |
|
<i class="fa-solid fa-print"></i> |
|
<i class="fa-solid fa-rotate"></i> |
|
</div> |
|
</div> |
|
</div> |
|
`; |
|
} |
|
|
|
if (window.GPTTokenizer_cl100k_base) { |
|
const filtered = prepare_messages(messages, null); |
|
if (filtered.length > 0) { |
|
last_model = last_model?.startsWith("gpt-4") ? "gpt-4" : "gpt-3.5-turbo" |
|
let count_total = GPTTokenizer_cl100k_base?.encodeChat(filtered, last_model).length |
|
if (count_total > 0) { |
|
elements += `<div class="count_total">(${count_total} tokens used)</div>`; |
|
} |
|
} |
|
} |
|
|
|
message_box.innerHTML = elements; |
|
register_message_buttons(); |
|
highlight(message_box); |
|
regenerate.classList.remove("regenerate-hidden"); |
|
|
|
if (scroll) { |
|
message_box.scrollTo({ top: message_box.scrollHeight, behavior: "smooth" }); |
|
|
|
setTimeout(() => { |
|
message_box.scrollTop = message_box.scrollHeight; |
|
}, 500); |
|
} |
|
}; |
|
|
|
async function safe_load_conversation(conversation_id, scroll=true) { |
|
let is_running = false |
|
for (const key in controller_storage) { |
|
if (!controller_storage[key].signal.aborted) { |
|
is_running = true; |
|
break |
|
} |
|
} |
|
if (!is_running) { |
|
load_conversation(conversation_id, scroll); |
|
} |
|
} |
|
|
|
async function get_conversation(conversation_id) { |
|
let conversation = await JSON.parse( |
|
appStorage.getItem(`conversation:${conversation_id}`) |
|
); |
|
return conversation; |
|
} |
|
|
|
async function save_conversation(conversation_id, conversation) { |
|
conversation.updated = Date.now(); |
|
appStorage.setItem( |
|
`conversation:${conversation_id}`, |
|
JSON.stringify(conversation) |
|
); |
|
} |
|
|
|
async function get_messages(conversation_id) { |
|
const conversation = await get_conversation(conversation_id); |
|
return conversation?.items || []; |
|
} |
|
|
|
async function add_conversation(conversation_id, content) { |
|
if (appStorage.getItem(`conversation:${conversation_id}`) == null) { |
|
await save_conversation(conversation_id, { |
|
id: conversation_id, |
|
title: "", |
|
added: Date.now(), |
|
system: systemPrompt?.value, |
|
items: [], |
|
}); |
|
} |
|
history.pushState({}, null, `/chat/${conversation_id}`); |
|
} |
|
|
|
async function save_system_message() { |
|
if (!window.conversation_id) { |
|
return; |
|
} |
|
const conversation = await get_conversation(window.conversation_id); |
|
if (conversation) { |
|
conversation.system = systemPrompt?.value; |
|
await save_conversation(window.conversation_id, conversation); |
|
} |
|
} |
|
const hide_message = async (conversation_id, message_index =- 1) => { |
|
const conversation = await get_conversation(conversation_id) |
|
if (!conversation) return; |
|
message_index = message_index == -1 ? conversation.items.length - 1 : message_index |
|
const last_message = message_index in conversation.items ? conversation.items[message_index] : null; |
|
if (last_message !== null) { |
|
if (last_message["role"] == "assistant") { |
|
last_message["regenerate"] = true; |
|
} |
|
conversation.items[message_index] = last_message; |
|
} |
|
await save_conversation(conversation_id, conversation); |
|
}; |
|
|
|
const remove_message = async (conversation_id, index) => { |
|
const conversation = await get_conversation(conversation_id); |
|
let new_items = []; |
|
for (i in conversation.items) { |
|
if (i == index - 1) { |
|
if (!conversation.items[index]?.regenerate) { |
|
delete conversation.items[i]["regenerate"]; |
|
} |
|
} |
|
if (i != index) { |
|
new_items.push(conversation.items[i]) |
|
} |
|
} |
|
conversation.items = new_items; |
|
await save_conversation(conversation_id, conversation); |
|
}; |
|
|
|
const get_message = async (conversation_id, index) => { |
|
const messages = await get_messages(conversation_id); |
|
if (index in messages) |
|
return messages[index]["content"]; |
|
}; |
|
|
|
const add_message = async ( |
|
conversation_id, role, content, |
|
provider = null, |
|
message_index = -1, |
|
synthesize_data = null |
|
) => { |
|
const conversation = await get_conversation(conversation_id); |
|
if (!conversation) return; |
|
const new_message = { |
|
role: role, |
|
content: content, |
|
provider: provider, |
|
}; |
|
if (synthesize_data) { |
|
new_message.synthesize = synthesize_data; |
|
} |
|
if (message_index == -1) { |
|
conversation.items.push(new_message); |
|
} else { |
|
const new_messages = []; |
|
conversation.items.forEach((item, index)=>{ |
|
new_messages.push(item); |
|
if (index == message_index) { |
|
new_message.regenerate = true; |
|
new_messages.push(new_message); |
|
} |
|
}); |
|
conversation.items = new_messages; |
|
} |
|
await save_conversation(conversation_id, conversation); |
|
return conversation.items.length - 1; |
|
}; |
|
|
|
const load_conversations = async () => { |
|
let conversations = []; |
|
for (let i = 0; i < appStorage.length; i++) { |
|
if (appStorage.key(i).startsWith("conversation:")) { |
|
let conversation = appStorage.getItem(appStorage.key(i)); |
|
conversations.push(JSON.parse(conversation)); |
|
} |
|
} |
|
conversations.sort((a, b) => (b.updated||0)-(a.updated||0)); |
|
|
|
await clear_conversations(); |
|
|
|
let html = ""; |
|
conversations.forEach((conversation) => { |
|
if (conversation?.items.length > 0 && !conversation.new_title) { |
|
let new_value = (conversation.items[0]["content"]).trim(); |
|
let new_lenght = new_value.indexOf("\n"); |
|
new_lenght = new_lenght > 200 || new_lenght < 0 ? 200 : new_lenght; |
|
conversation.new_title = new_value.substring(0, new_lenght); |
|
appStorage.setItem( |
|
`conversation:${conversation.id}`, |
|
JSON.stringify(conversation) |
|
); |
|
} |
|
let updated = ""; |
|
if (conversation.updated) { |
|
const date = new Date(conversation.updated); |
|
updated = date.toLocaleString('en-GB', {dateStyle: 'short', timeStyle: 'short', monthStyle: 'short'}); |
|
updated = updated.replace("/" + date.getFullYear(), "") |
|
} |
|
html += ` |
|
<div class="convo" id="convo-${conversation.id}"> |
|
<div class="left"> |
|
<i class="fa-regular fa-comments"></i> |
|
<span class="datetime" onclick="set_conversation('${conversation.id}')">${updated}</span> |
|
<span class="convo-title" onclick="set_conversation('${conversation.id}')">${conversation.new_title}</span> |
|
</div> |
|
<i onclick="show_option('${conversation.id}')" class="fa-solid fa-ellipsis-vertical" id="conv-${conversation.id}"></i> |
|
<div id="cho-${conversation.id}" class="choise" style="display:none;"> |
|
<i onclick="delete_conversation('${conversation.id}')" class="fa-regular fa-trash"></i> |
|
<i onclick="hide_option('${conversation.id}')" class="fa-regular fa-x"></i> |
|
</div> |
|
</div> |
|
`; |
|
}); |
|
box_conversations.innerHTML += html; |
|
}; |
|
|
|
const hide_input = document.querySelector(".toolbar .hide-input"); |
|
hide_input.addEventListener("click", async (e) => { |
|
const icon = hide_input.querySelector("i"); |
|
const func = icon.classList.contains("fa-angles-down") ? "add" : "remove"; |
|
const remv = icon.classList.contains("fa-angles-down") ? "remove" : "add"; |
|
icon.classList[func]("fa-angles-up"); |
|
icon.classList[remv]("fa-angles-down"); |
|
document.querySelector(".conversation .user-input").classList[func]("hidden"); |
|
document.querySelector(".conversation .buttons").classList[func]("hidden"); |
|
}); |
|
|
|
const uuid = () => { |
|
return `xxxxxxxx-xxxx-4xxx-yxxx-${Date.now().toString(16)}`.replace( |
|
/[xy]/g, |
|
function (c) { |
|
var r = (Math.random() * 16) | 0, |
|
v = c == "x" ? r : (r & 0x3) | 0x8; |
|
return v.toString(16); |
|
} |
|
); |
|
}; |
|
|
|
function get_message_id() { |
|
random_bytes = (Math.floor(Math.random() * 1338377565) + 2956589730).toString( |
|
2 |
|
); |
|
unix = Math.floor(Date.now() / 1000).toString(2); |
|
|
|
return BigInt(`0b${unix}${random_bytes}`).toString(); |
|
}; |
|
|
|
async function hide_sidebar() { |
|
sidebar.classList.remove("shown"); |
|
sidebar_button.classList.remove("rotated"); |
|
settings.classList.add("hidden"); |
|
chat.classList.remove("hidden"); |
|
if (window.location.pathname == "/menu/" || window.location.pathname == "/settings/") { |
|
history.back(); |
|
} |
|
} |
|
|
|
window.addEventListener('popstate', hide_sidebar, false); |
|
|
|
sidebar_button.addEventListener("click", (event) => { |
|
settings.classList.add("hidden"); |
|
if (sidebar.classList.contains("shown")) { |
|
hide_sidebar(); |
|
} else { |
|
sidebar.classList.add("shown"); |
|
sidebar_button.classList.add("rotated"); |
|
history.pushState({}, null, "/menu/"); |
|
} |
|
window.scrollTo(0, 0); |
|
}); |
|
|
|
function open_settings() { |
|
if (settings.classList.contains("hidden")) { |
|
chat.classList.add("hidden"); |
|
sidebar.classList.remove("shown"); |
|
settings.classList.remove("hidden"); |
|
history.pushState({}, null, "/settings/"); |
|
} else { |
|
settings.classList.add("hidden"); |
|
chat.classList.remove("hidden"); |
|
} |
|
log_storage.classList.add("hidden"); |
|
} |
|
|
|
function open_album() { |
|
if (album.classList.contains("hidden")) { |
|
sidebar.classList.remove("shown"); |
|
settings.classList.add("hidden"); |
|
album.classList.remove("hidden"); |
|
history.pushState({}, null, "/images/"); |
|
} else { |
|
album.classList.add("hidden"); |
|
} |
|
} |
|
|
|
const register_settings_storage = async () => { |
|
optionElements.forEach((element) => { |
|
if (element.type == "textarea") { |
|
element.addEventListener('input', async (event) => { |
|
appStorage.setItem(element.id, element.value); |
|
}); |
|
} else { |
|
element.addEventListener('change', async (event) => { |
|
switch (element.type) { |
|
case "checkbox": |
|
appStorage.setItem(element.id, element.checked); |
|
break; |
|
case "select-one": |
|
appStorage.setItem(element.id, element.selectedIndex); |
|
break; |
|
case "text": |
|
case "number": |
|
appStorage.setItem(element.id, element.value); |
|
break; |
|
default: |
|
console.warn("Unresolved element type"); |
|
} |
|
}); |
|
} |
|
}); |
|
} |
|
|
|
const load_settings_storage = async () => { |
|
optionElements.forEach((element) => { |
|
if (!(value = appStorage.getItem(element.id))) { |
|
return; |
|
} |
|
if (value) { |
|
switch (element.type) { |
|
case "checkbox": |
|
element.checked = value === "true"; |
|
break; |
|
case "select-one": |
|
element.selectedIndex = parseInt(value); |
|
break; |
|
case "text": |
|
case "number": |
|
case "textarea": |
|
element.value = value; |
|
break; |
|
default: |
|
console.warn("Unresolved element type"); |
|
} |
|
} |
|
}); |
|
} |
|
|
|
const say_hello = async () => { |
|
tokens = [`Hello`, `!`, ` How`,` can`, ` I`,` assist`,` you`,` today`,`?`] |
|
|
|
message_box.innerHTML += ` |
|
<div class="message"> |
|
<div class="assistant"> |
|
${gpt_image} |
|
<i class="fa-regular fa-phone-arrow-down-left"></i> |
|
</div> |
|
<div class="content"> |
|
<p class=" welcome-message"></p> |
|
</div> |
|
</div> |
|
`; |
|
|
|
to_modify = document.querySelector(`.welcome-message`); |
|
for (token of tokens) { |
|
await new Promise(resolve => setTimeout(resolve, (Math.random() * (100 - 200) + 100))) |
|
to_modify.textContent += token; |
|
} |
|
} |
|
|
|
|
|
const storeTheme = function (theme) { |
|
appStorage.setItem("theme", theme); |
|
}; |
|
|
|
|
|
const setTheme = function () { |
|
const activeTheme = appStorage.getItem("theme"); |
|
colorThemes.forEach((themeOption) => { |
|
if (themeOption.id === activeTheme) { |
|
themeOption.checked = true; |
|
} |
|
}); |
|
|
|
document.documentElement.className = activeTheme; |
|
}; |
|
|
|
colorThemes.forEach((themeOption) => { |
|
themeOption.addEventListener("click", () => { |
|
storeTheme(themeOption.id); |
|
|
|
document.documentElement.className = themeOption.id; |
|
}); |
|
}); |
|
|
|
function count_tokens(model, text) { |
|
if (model) { |
|
if (window.llamaTokenizer) |
|
if (model.startsWith("llama") || model.startsWith("codellama")) { |
|
return llamaTokenizer.encode(text).length; |
|
} |
|
if (window.mistralTokenizer) |
|
if (model.startsWith("mistral") || model.startsWith("mixtral")) { |
|
return mistralTokenizer.encode(text).length; |
|
} |
|
} |
|
if (window.GPTTokenizer_cl100k_base) { |
|
return GPTTokenizer_cl100k_base.encode(text).length; |
|
} |
|
} |
|
|
|
function count_words(text) { |
|
return text.trim().match(/[\w\u4E00-\u9FA5]+/gu)?.length || 0; |
|
} |
|
|
|
function count_chars(text) { |
|
return text.match(/[^\s\p{P}]/gu)?.length || 0; |
|
} |
|
|
|
function count_words_and_tokens(text, model) { |
|
text = filter_message(text); |
|
return `(${count_words(text)} words, ${count_chars(text)} chars, ${count_tokens(model, text)} tokens)`; |
|
} |
|
|
|
let countFocus = messageInput; |
|
let timeoutId; |
|
const count_input = async () => { |
|
if (timeoutId) clearTimeout(timeoutId); |
|
timeoutId = setTimeout(() => { |
|
if (countFocus.value) { |
|
inputCount.innerText = count_words_and_tokens(countFocus.value, get_selected_model()); |
|
} else { |
|
inputCount.innerText = ""; |
|
} |
|
}, 100); |
|
}; |
|
messageInput.addEventListener("keyup", count_input); |
|
systemPrompt.addEventListener("keyup", count_input); |
|
systemPrompt.addEventListener("focus", function() { |
|
countFocus = systemPrompt; |
|
count_input(); |
|
}); |
|
systemPrompt.addEventListener("input", function() { |
|
countFocus = messageInput; |
|
count_input(); |
|
}); |
|
|
|
window.addEventListener('load', async function() { |
|
await on_load(); |
|
if (window.conversation_id == "{{chat_id}}") { |
|
window.conversation_id = uuid(); |
|
} else { |
|
await on_api(); |
|
} |
|
}); |
|
|
|
window.addEventListener('pywebviewready', async function() { |
|
await on_api(); |
|
}); |
|
|
|
async function on_load() { |
|
setTheme(); |
|
count_input(); |
|
|
|
if (/\/chat\/.+/.test(window.location.href)) { |
|
load_conversation(window.conversation_id); |
|
} else { |
|
say_hello() |
|
} |
|
load_conversations(); |
|
} |
|
|
|
async function on_api() { |
|
let prompt_lock = false; |
|
messageInput.addEventListener("keydown", async (evt) => { |
|
if (prompt_lock) return; |
|
|
|
|
|
if (!window.matchMedia("(pointer:coarse)").matches) |
|
if (evt.keyCode === 13 && !evt.shiftKey) { |
|
evt.preventDefault(); |
|
console.log("pressed enter"); |
|
prompt_lock = true; |
|
setTimeout(()=>prompt_lock=false, 3000); |
|
await handle_ask(); |
|
} else { |
|
messageInput.style.removeProperty("height"); |
|
messageInput.style.height = messageInput.scrollHeight + "px"; |
|
} |
|
}); |
|
sendButton.addEventListener(`click`, async () => { |
|
console.log("clicked send"); |
|
if (prompt_lock) return; |
|
prompt_lock = true; |
|
setTimeout(()=>prompt_lock=false, 3000); |
|
await handle_ask(); |
|
}); |
|
messageInput.focus(); |
|
|
|
register_settings_storage(); |
|
|
|
models = await api("models"); |
|
models.forEach((model) => { |
|
let option = document.createElement("option"); |
|
option.value = option.text = model; |
|
modelSelect.appendChild(option); |
|
}); |
|
|
|
providers = await api("providers") |
|
Object.entries(providers).forEach(([provider, label]) => { |
|
let option = document.createElement("option"); |
|
option.value = provider; |
|
option.text = label; |
|
providerSelect.appendChild(option); |
|
}) |
|
|
|
await load_settings_storage() |
|
await load_provider_models(appStorage.getItem("provider")); |
|
|
|
const hide_systemPrompt = document.getElementById("hide-systemPrompt") |
|
const slide_systemPrompt_icon = document.querySelector(".slide-systemPrompt i"); |
|
if (hide_systemPrompt.checked) { |
|
systemPrompt.classList.add("hidden"); |
|
slide_systemPrompt_icon.classList.remove("fa-angles-up"); |
|
slide_systemPrompt_icon.classList.add("fa-angles-down"); |
|
} |
|
hide_systemPrompt.addEventListener('change', async (event) => { |
|
if (event.target.checked) { |
|
systemPrompt.classList.add("hidden"); |
|
} else { |
|
systemPrompt.classList.remove("hidden"); |
|
} |
|
}); |
|
document.querySelector(".slide-systemPrompt")?.addEventListener("click", () => { |
|
hide_systemPrompt.click(); |
|
let checked = hide_systemPrompt.checked; |
|
systemPrompt.classList[checked ? "add": "remove"]("hidden"); |
|
slide_systemPrompt_icon.classList[checked ? "remove": "add"]("fa-angles-up"); |
|
slide_systemPrompt_icon.classList[checked ? "add": "remove"]("fa-angles-down"); |
|
}); |
|
const messageInputHeight = document.getElementById("message-input-height"); |
|
if (messageInputHeight) { |
|
if (messageInputHeight.value) { |
|
messageInput.style.maxHeight = `${messageInputHeight.value}px`; |
|
} |
|
messageInputHeight.addEventListener('change', async () => { |
|
messageInput.style.maxHeight = `${messageInputHeight.value}px`; |
|
}); |
|
} |
|
const darkMode = document.getElementById("darkMode"); |
|
if (darkMode) { |
|
if (!darkMode.checked) { |
|
document.body.classList.add("white"); |
|
} |
|
darkMode.addEventListener('change', async (event) => { |
|
if (event.target.checked) { |
|
document.body.classList.remove("white"); |
|
} else { |
|
document.body.classList.add("white"); |
|
} |
|
}); |
|
} |
|
} |
|
|
|
async function load_version() { |
|
const versions = await api("version"); |
|
document.title = 'g4f - ' + versions["version"]; |
|
let text = "version ~ " |
|
if (versions["version"] != versions["latest_version"]) { |
|
let release_url = 'https://github.com/xtekky/gpt4free/releases/latest'; |
|
let title = `New version: ${versions["latest_version"]}`; |
|
text += `<a href="${release_url}" target="_blank" title="${title}">${versions["version"]}</a> 🆕`; |
|
const new_version = document.createElement("div"); |
|
new_version.classList.add("new_version"); |
|
const link = `<a href="${release_url}" target="_blank" title="${title}">v${versions["latest_version"]}</a>`; |
|
new_version.innerHTML = `g4f ${link} 🆕`; |
|
new_version.addEventListener("click", ()=>new_version.parentElement.removeChild(new_version)); |
|
document.body.appendChild(new_version); |
|
} else { |
|
text += versions["version"]; |
|
} |
|
document.getElementById("version_text").innerHTML = text |
|
} |
|
setTimeout(load_version, 100); |
|
|
|
[imageInput, cameraInput].forEach((el) => { |
|
el.addEventListener('click', async () => { |
|
el.value = ''; |
|
if (imageInput.dataset.src) { |
|
URL.revokeObjectURL(imageInput.dataset.src); |
|
delete imageInput.dataset.src |
|
} |
|
}); |
|
}); |
|
|
|
fileInput.addEventListener('click', async (event) => { |
|
fileInput.value = ''; |
|
delete fileInput.dataset.text; |
|
}); |
|
|
|
async function upload_cookies() { |
|
const file = fileInput.files[0]; |
|
const formData = new FormData(); |
|
formData.append('file', file); |
|
response = await fetch("/backend-api/v2/upload_cookies", { |
|
method: 'POST', |
|
body: formData, |
|
}); |
|
if (response.status == 200) { |
|
inputCount.innerText = `${file.name} was uploaded successfully`; |
|
} |
|
fileInput.value = ""; |
|
} |
|
|
|
fileInput.addEventListener('change', async (event) => { |
|
if (fileInput.files.length) { |
|
type = fileInput.files[0].name.split('.').pop() |
|
if (type == "har") { |
|
return await upload_cookies(); |
|
} |
|
fileInput.dataset.type = type |
|
const reader = new FileReader(); |
|
reader.addEventListener('load', async (event) => { |
|
fileInput.dataset.text = event.target.result; |
|
if (type == "json") { |
|
const data = JSON.parse(fileInput.dataset.text); |
|
if ("g4f" in data.options) { |
|
let count = 0; |
|
Object.keys(data).forEach(key => { |
|
if (key != "options" && !localStorage.getItem(key)) { |
|
appStorage.setItem(key, JSON.stringify(data[key])); |
|
count += 1; |
|
} |
|
}); |
|
delete fileInput.dataset.text; |
|
await load_conversations(); |
|
fileInput.value = ""; |
|
inputCount.innerText = `${count} Conversations were imported successfully`; |
|
} else { |
|
await upload_cookies(); |
|
} |
|
} |
|
}); |
|
reader.readAsText(fileInput.files[0]); |
|
} else { |
|
delete fileInput.dataset.text; |
|
} |
|
}); |
|
|
|
systemPrompt?.addEventListener("input", async () => { |
|
await save_system_message(); |
|
}); |
|
|
|
function get_selected_model() { |
|
if (modelProvider.selectedIndex >= 0) { |
|
return modelProvider.options[modelProvider.selectedIndex].value; |
|
} else if (modelSelect.selectedIndex >= 0) { |
|
return modelSelect.options[modelSelect.selectedIndex].value; |
|
} |
|
} |
|
|
|
async function api(ressource, args=null, file=null, message_id=null) { |
|
if (window?.pywebview) { |
|
if (args !== null) { |
|
if (ressource == "models") { |
|
ressource = "provider_models"; |
|
} |
|
return pywebview.api[`get_${ressource}`](args); |
|
} |
|
return pywebview.api[`get_${ressource}`](); |
|
} |
|
let api_key; |
|
if (ressource == "models" && args) { |
|
api_key = get_api_key_by_provider(args); |
|
ressource = `${ressource}/${args}`; |
|
} |
|
const url = `/backend-api/v2/${ressource}`; |
|
const headers = {}; |
|
if (api_key) { |
|
headers.authorization = `Bearer ${api_key}`; |
|
} |
|
if (ressource == "conversation") { |
|
let body = JSON.stringify(args); |
|
headers.accept = 'text/event-stream'; |
|
if (file !== null) { |
|
const formData = new FormData(); |
|
formData.append('file', file); |
|
formData.append('json', body); |
|
body = formData; |
|
} else { |
|
headers['content-type'] = 'application/json'; |
|
} |
|
response = await fetch(url, { |
|
method: 'POST', |
|
signal: controller_storage[message_id].signal, |
|
headers: headers, |
|
body: body, |
|
}); |
|
return read_response(response, message_id); |
|
} |
|
response = await fetch(url, {headers: headers}); |
|
return await response.json(); |
|
} |
|
|
|
async function read_response(response, message_id) { |
|
const reader = response.body.pipeThrough(new TextDecoderStream()).getReader(); |
|
let buffer = "" |
|
while (true) { |
|
const { value, done } = await reader.read(); |
|
if (done) { |
|
break; |
|
} |
|
for (const line of value.split("\n")) { |
|
if (!line) { |
|
continue; |
|
} |
|
try { |
|
add_message_chunk(JSON.parse(buffer + line), message_id); |
|
buffer = ""; |
|
} catch { |
|
buffer += line |
|
} |
|
} |
|
} |
|
} |
|
|
|
function get_api_key_by_provider(provider) { |
|
let api_key = null; |
|
if (provider) { |
|
api_key = document.getElementById(`${provider}-api_key`)?.value || null; |
|
if (api_key == null) |
|
api_key = document.querySelector(`.${provider}-api_key`)?.value || null; |
|
} |
|
return api_key; |
|
} |
|
|
|
async function load_provider_models(providerIndex=null) { |
|
if (!providerIndex) { |
|
providerIndex = providerSelect.selectedIndex; |
|
} |
|
modelProvider.innerHTML = ''; |
|
const provider = providerSelect.options[providerIndex].value; |
|
if (!provider) { |
|
modelProvider.classList.add("hidden"); |
|
modelSelect.classList.remove("hidden"); |
|
return; |
|
} |
|
const models = await api('models', provider); |
|
if (models.length > 0) { |
|
modelSelect.classList.add("hidden"); |
|
modelProvider.classList.remove("hidden"); |
|
models.forEach((model) => { |
|
let option = document.createElement('option'); |
|
option.value = model.model; |
|
option.text = `${model.model}${model.image ? " (Image Generation)" : ""}${model.vision ? " (Image Upload)" : ""}`; |
|
option.selected = model.default; |
|
modelProvider.appendChild(option); |
|
}); |
|
} else { |
|
modelProvider.classList.add("hidden"); |
|
modelSelect.classList.remove("hidden"); |
|
} |
|
}; |
|
providerSelect.addEventListener("change", () => load_provider_models()); |
|
|
|
function save_storage() { |
|
let filename = `chat ${new Date().toLocaleString()}.json`.replaceAll(":", "-"); |
|
let data = {"options": {"g4f": ""}}; |
|
for (let i = 0; i < appStorage.length; i++) { |
|
let key = appStorage.key(i); |
|
let item = appStorage.getItem(key); |
|
if (key.startsWith("conversation:")) { |
|
data[key] = JSON.parse(item); |
|
} else if (!key.includes("api_key")) { |
|
data["options"][key] = item; |
|
} |
|
} |
|
data = JSON.stringify(data, null, 4); |
|
const blob = new Blob([data], {type: 'application/json'}); |
|
if(window.navigator.msSaveOrOpenBlob) { |
|
window.navigator.msSaveBlob(blob, filename); |
|
} else{ |
|
const elem = window.document.createElement('a'); |
|
elem.href = window.URL.createObjectURL(blob); |
|
elem.download = filename; |
|
document.body.appendChild(elem); |
|
elem.click(); |
|
document.body.removeChild(elem); |
|
} |
|
} |
|
|
|
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; |
|
if (SpeechRecognition) { |
|
const mircoIcon = microLabel.querySelector("i"); |
|
mircoIcon.classList.add("fa-microphone"); |
|
mircoIcon.classList.remove("fa-microphone-slash"); |
|
|
|
const recognition = new SpeechRecognition(); |
|
recognition.continuous = true; |
|
recognition.interimResults = true; |
|
recognition.maxAlternatives = 1; |
|
|
|
let startValue; |
|
let lastDebounceTranscript; |
|
recognition.onstart = function() { |
|
microLabel.classList.add("recognition"); |
|
startValue = messageInput.value; |
|
lastDebounceTranscript = ""; |
|
}; |
|
recognition.onend = function() { |
|
messageInput.focus(); |
|
}; |
|
recognition.onresult = function(event) { |
|
if (!event.results) { |
|
return; |
|
} |
|
let result = event.results[event.resultIndex]; |
|
let isFinal = result.isFinal && (result[0].confidence > 0); |
|
let transcript = result[0].transcript; |
|
if (isFinal) { |
|
if(transcript == lastDebounceTranscript) { |
|
return; |
|
} |
|
lastDebounceTranscript = transcript; |
|
} |
|
if (transcript) { |
|
messageInput.value = `${startValue ? startValue+"\n" : ""}${transcript.trim()}`; |
|
if (isFinal) { |
|
startValue = messageInput.value; |
|
} |
|
messageInput.style.height = messageInput.scrollHeight + "px"; |
|
messageInput.scrollTop = messageInput.scrollHeight; |
|
} |
|
}; |
|
|
|
microLabel.addEventListener("click", () => { |
|
if (microLabel.classList.contains("recognition")) { |
|
recognition.stop(); |
|
microLabel.classList.remove("recognition"); |
|
} else { |
|
const lang = document.getElementById("recognition-language")?.value; |
|
recognition.lang = lang || navigator.language; |
|
recognition.start(); |
|
} |
|
}); |
|
} |
|
|
|
document.getElementById("showLog").addEventListener("click", ()=> { |
|
log_storage.classList.remove("hidden"); |
|
settings.classList.add("hidden"); |
|
log_storage.scrollTop = log_storage.scrollHeight; |
|
}); |
