|
|
@ -1,28 +1,29 @@
|
|
|
|
const colorThemes = document.querySelectorAll('[name="theme"]');
|
|
|
|
const colorThemes = document.querySelectorAll('[name="theme"]');
|
|
|
|
const markdown = window.markdownit();
|
|
|
|
const markdown = window.markdownit();
|
|
|
|
const message_box = document.getElementById(`messages`);
|
|
|
|
const message_box = document.getElementById(`messages`);
|
|
|
|
const message_input = document.getElementById(`message-input`);
|
|
|
|
const messageInput = document.getElementById(`message-input`);
|
|
|
|
const box_conversations = document.querySelector(`.top`);
|
|
|
|
const box_conversations = document.querySelector(`.top`);
|
|
|
|
const stop_generating = document.querySelector(`.stop_generating`);
|
|
|
|
const stop_generating = document.querySelector(`.stop_generating`);
|
|
|
|
const regenerate = document.querySelector(`.regenerate`);
|
|
|
|
const regenerate = document.querySelector(`.regenerate`);
|
|
|
|
const sidebar = document.querySelector(".conversations");
|
|
|
|
const sidebar = document.querySelector(".conversations");
|
|
|
|
const sidebar_button = document.querySelector(".mobile-sidebar");
|
|
|
|
const sidebar_button = document.querySelector(".mobile-sidebar");
|
|
|
|
const send_button = document.getElementById("send-button");
|
|
|
|
const sendButton = document.getElementById("send-button");
|
|
|
|
const imageInput = document.getElementById("image");
|
|
|
|
const imageInput = document.getElementById("image");
|
|
|
|
const cameraInput = document.getElementById("camera");
|
|
|
|
const cameraInput = document.getElementById("camera");
|
|
|
|
const fileInput = document.getElementById("file");
|
|
|
|
const fileInput = document.getElementById("file");
|
|
|
|
const inputCount = document.getElementById("input-count")
|
|
|
|
const inputCount = document.getElementById("input-count")
|
|
|
|
const modelSelect = document.getElementById("model");
|
|
|
|
const modelSelect = document.getElementById("model");
|
|
|
|
|
|
|
|
const systemPrompt = document.getElementById("systemPrompt")
|
|
|
|
|
|
|
|
|
|
|
|
let prompt_lock = false;
|
|
|
|
let prompt_lock = false;
|
|
|
|
|
|
|
|
|
|
|
|
hljs.addPlugin(new CopyButtonPlugin());
|
|
|
|
hljs.addPlugin(new CopyButtonPlugin());
|
|
|
|
|
|
|
|
|
|
|
|
message_input.addEventListener("blur", () => {
|
|
|
|
messageInput.addEventListener("blur", () => {
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
message_input.addEventListener("focus", () => {
|
|
|
|
messageInput.addEventListener("focus", () => {
|
|
|
|
document.documentElement.scrollTop = document.documentElement.scrollHeight;
|
|
|
|
document.documentElement.scrollTop = document.documentElement.scrollHeight;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
@ -59,7 +60,7 @@ const register_remove_message = async () => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const message_el = el.parentElement.parentElement;
|
|
|
|
const message_el = el.parentElement.parentElement;
|
|
|
|
await remove_message(window.conversation_id, message_el.dataset.index);
|
|
|
|
await remove_message(window.conversation_id, message_el.dataset.index);
|
|
|
|
await load_conversation(window.conversation_id);
|
|
|
|
await load_conversation(window.conversation_id, false);
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
@ -77,13 +78,13 @@ const delete_conversations = async () => {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handle_ask = async () => {
|
|
|
|
const handle_ask = async () => {
|
|
|
|
message_input.style.height = `82px`;
|
|
|
|
messageInput.style.height = "82px";
|
|
|
|
message_input.focus();
|
|
|
|
messageInput.focus();
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
|
|
|
|
|
|
|
|
message = message_input.value
|
|
|
|
message = messageInput.value
|
|
|
|
if (message.length > 0) {
|
|
|
|
if (message.length > 0) {
|
|
|
|
message_input.value = '';
|
|
|
|
messageInput.value = "";
|
|
|
|
prompt_lock = true;
|
|
|
|
prompt_lock = true;
|
|
|
|
count_input()
|
|
|
|
count_input()
|
|
|
|
await add_conversation(window.conversation_id, message);
|
|
|
|
await add_conversation(window.conversation_id, message);
|
|
|
@ -135,7 +136,7 @@ const remove_cancel_button = async () => {
|
|
|
|
}, 300);
|
|
|
|
}, 300);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const filter_messages = (messages, filter_last_message = true) => {
|
|
|
|
const prepare_messages = (messages, filter_last_message = true) => {
|
|
|
|
// Removes none user messages at end
|
|
|
|
// Removes none user messages at end
|
|
|
|
if (filter_last_message) {
|
|
|
|
if (filter_last_message) {
|
|
|
|
let last_message;
|
|
|
|
let last_message;
|
|
|
@ -147,7 +148,7 @@ const filter_messages = (messages, filter_last_message = true) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Remove history, if it is selected
|
|
|
|
// Remove history, if it's selected
|
|
|
|
if (document.getElementById('history')?.checked) {
|
|
|
|
if (document.getElementById('history')?.checked) {
|
|
|
|
if (filter_last_message) {
|
|
|
|
if (filter_last_message) {
|
|
|
|
messages = [messages.pop()];
|
|
|
|
messages = [messages.pop()];
|
|
|
@ -157,20 +158,31 @@ const filter_messages = (messages, filter_last_message = true) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let new_messages = [];
|
|
|
|
let new_messages = [];
|
|
|
|
for (i in messages) {
|
|
|
|
if (messages) {
|
|
|
|
new_message = messages[i];
|
|
|
|
for (i in messages) {
|
|
|
|
// Remove generated images from history
|
|
|
|
new_message = messages[i];
|
|
|
|
new_message["content"] = new_message["content"].replaceAll(
|
|
|
|
// Remove generated images from history
|
|
|
|
/<!-- generated images start -->[\s\S]+<!-- generated images end -->/gm,
|
|
|
|
new_message.content = new_message.content.replaceAll(
|
|
|
|
""
|
|
|
|
/<!-- generated images start -->[\s\S]+<!-- generated images end -->/gm,
|
|
|
|
)
|
|
|
|
""
|
|
|
|
delete new_message["provider"];
|
|
|
|
)
|
|
|
|
// Remove regenerated messages
|
|
|
|
delete new_message["provider"];
|
|
|
|
if (!new_message.regenerate) {
|
|
|
|
// Remove regenerated messages
|
|
|
|
new_messages.push(new_message)
|
|
|
|
if (!new_message.regenerate) {
|
|
|
|
|
|
|
|
new_messages.push(new_message)
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Add system message
|
|
|
|
|
|
|
|
system_content = systemPrompt?.value;
|
|
|
|
|
|
|
|
if (system_content) {
|
|
|
|
|
|
|
|
new_messages.unshift({
|
|
|
|
|
|
|
|
"role": "system",
|
|
|
|
|
|
|
|
"content": system_content
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return new_messages;
|
|
|
|
return new_messages;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -179,7 +191,7 @@ const ask_gpt = async () => {
|
|
|
|
messages = await get_messages(window.conversation_id);
|
|
|
|
messages = await get_messages(window.conversation_id);
|
|
|
|
total_messages = messages.length;
|
|
|
|
total_messages = messages.length;
|
|
|
|
|
|
|
|
|
|
|
|
messages = filter_messages(messages);
|
|
|
|
messages = prepare_messages(messages);
|
|
|
|
|
|
|
|
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
window.controller = new AbortController();
|
|
|
|
window.controller = new AbortController();
|
|
|
@ -192,8 +204,6 @@ const ask_gpt = async () => {
|
|
|
|
|
|
|
|
|
|
|
|
message_box.scrollTop = message_box.scrollHeight;
|
|
|
|
message_box.scrollTop = message_box.scrollHeight;
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
await new Promise((r) => setTimeout(r, 500));
|
|
|
|
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
el = message_box.querySelector('.count_total');
|
|
|
|
el = message_box.querySelector('.count_total');
|
|
|
|
el ? el.parentElement.removeChild(el) : null;
|
|
|
|
el ? el.parentElement.removeChild(el) : null;
|
|
|
@ -218,6 +228,8 @@ const ask_gpt = async () => {
|
|
|
|
|
|
|
|
|
|
|
|
message_box.scrollTop = message_box.scrollHeight;
|
|
|
|
message_box.scrollTop = message_box.scrollHeight;
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
error = provider_result = null;
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
let body = JSON.stringify({
|
|
|
|
let body = JSON.stringify({
|
|
|
|
id: window.token,
|
|
|
|
id: window.token,
|
|
|
@ -241,49 +253,47 @@ const ask_gpt = async () => {
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
headers['content-type'] = 'application/json';
|
|
|
|
headers['content-type'] = 'application/json';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const response = await fetch(`/backend-api/v2/conversation`, {
|
|
|
|
const response = await fetch(`/backend-api/v2/conversation`, {
|
|
|
|
method: 'POST',
|
|
|
|
method: 'POST',
|
|
|
|
signal: window.controller.signal,
|
|
|
|
signal: window.controller.signal,
|
|
|
|
headers: headers,
|
|
|
|
headers: headers,
|
|
|
|
body: body
|
|
|
|
body: body
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
await new Promise((r) => setTimeout(r, 1000));
|
|
|
|
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
|
|
|
|
const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
|
|
|
|
error = provider = null;
|
|
|
|
|
|
|
|
while (true) {
|
|
|
|
while (true) {
|
|
|
|
const { value, done } = await reader.read();
|
|
|
|
const { value, done } = await reader.read();
|
|
|
|
if (done) break;
|
|
|
|
if (done) break;
|
|
|
|
for (const line of value.split("\n")) {
|
|
|
|
for (const line of value.split("\n")) {
|
|
|
|
if (!line) continue;
|
|
|
|
if (!line) {
|
|
|
|
|
|
|
|
continue;
|
|
|
|
|
|
|
|
}
|
|
|
|
const message = JSON.parse(line);
|
|
|
|
const message = JSON.parse(line);
|
|
|
|
if (message.type == "content") {
|
|
|
|
if (message.type == "content") {
|
|
|
|
text += message.content;
|
|
|
|
text += message.content;
|
|
|
|
} else if (message["type"] == "provider") {
|
|
|
|
} else if (message.type == "provider") {
|
|
|
|
provider = message.provider
|
|
|
|
provider_result = message.provider
|
|
|
|
content.querySelector('.provider').innerHTML = `
|
|
|
|
content.querySelector('.provider').innerHTML = `
|
|
|
|
<a href="${provider.url}" target="_blank">
|
|
|
|
<a href="${provider_result.url}" target="_blank">
|
|
|
|
${provider.name}
|
|
|
|
${provider_result.name}
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
${provider.model ? ' with ' + provider.model : ''}
|
|
|
|
${provider_result.model ? ' with ' + provider_result.model : ''}
|
|
|
|
`
|
|
|
|
`
|
|
|
|
} else if (message["type"] == "error") {
|
|
|
|
} else if (message.type == "error") {
|
|
|
|
error = message["error"];
|
|
|
|
error = message.error;
|
|
|
|
} else if (message["type"] == "message") {
|
|
|
|
} else if (messag.type == "message") {
|
|
|
|
console.error(message["message"])
|
|
|
|
console.error(messag.message)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (error) {
|
|
|
|
if (error) {
|
|
|
|
console.error(error);
|
|
|
|
console.error(error);
|
|
|
|
content_inner.innerHTML += "<p>An error occured, please try again, if the problem persists, please use a other model or provider.</p>";
|
|
|
|
content_inner.innerHTML += `<p><strong>An error occured:</strong> ${error}</p>`;
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
html = markdown_render(text);
|
|
|
|
html = markdown_render(text);
|
|
|
|
let lastElement, lastIndex = null;
|
|
|
|
let lastElement, lastIndex = null;
|
|
|
|
for (element of ['</p>', '</code></pre>', '</li>\n</ol>', '</li>\n</ul>']) {
|
|
|
|
for (element of ['</p>', '</code></pre>', '</p>\n</li>\n</ol>', '</li>\n</ol>', '</li>\n</ul>']) {
|
|
|
|
const index = html.lastIndexOf(element)
|
|
|
|
const index = html.lastIndexOf(element)
|
|
|
|
if (index > lastIndex) {
|
|
|
|
if (index - element.length > lastIndex) {
|
|
|
|
lastElement = element;
|
|
|
|
lastElement = element;
|
|
|
|
lastIndex = index;
|
|
|
|
lastIndex = index;
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -292,7 +302,7 @@ const ask_gpt = async () => {
|
|
|
|
html = html.substring(0, lastIndex) + '<span id="cursor"></span>' + lastElement;
|
|
|
|
html = html.substring(0, lastIndex) + '<span id="cursor"></span>' + lastElement;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
content_inner.innerHTML = html;
|
|
|
|
content_inner.innerHTML = html;
|
|
|
|
content_count.innerText = count_words_and_tokens(text, provider?.model);
|
|
|
|
content_count.innerText = count_words_and_tokens(text, provider_result?.model);
|
|
|
|
highlight(content_inner);
|
|
|
|
highlight(content_inner);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -302,7 +312,6 @@ const ask_gpt = async () => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (!error) {
|
|
|
|
if (!error) {
|
|
|
|
// Remove cursor
|
|
|
|
|
|
|
|
html = markdown_render(text);
|
|
|
|
html = markdown_render(text);
|
|
|
|
content_inner.innerHTML = html;
|
|
|
|
content_inner.innerHTML = html;
|
|
|
|
highlight(content_inner);
|
|
|
|
highlight(content_inner);
|
|
|
@ -313,30 +322,29 @@ const ask_gpt = async () => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} catch (e) {
|
|
|
|
} catch (e) {
|
|
|
|
console.error(e);
|
|
|
|
console.error(e);
|
|
|
|
|
|
|
|
|
|
|
|
if (e.name != "AbortError") {
|
|
|
|
if (e.name != "AbortError") {
|
|
|
|
error = true;
|
|
|
|
error = true;
|
|
|
|
text = "oops ! something went wrong, please try again / reload. [stacktrace in console]";
|
|
|
|
text = "oops ! something went wrong, please try again / reload. [stacktrace in console]";
|
|
|
|
content_inner.innerHTML = text;
|
|
|
|
content_inner.innerHTML = text;
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
content_inner.innerHTML += ` [aborted]`;
|
|
|
|
content_inner.innerHTML += " [aborted]";
|
|
|
|
text += ` [aborted]`
|
|
|
|
if (text) text += " [aborted]";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (!error) {
|
|
|
|
if (!error && text) {
|
|
|
|
await add_message(window.conversation_id, "assistant", text, provider);
|
|
|
|
await add_message(window.conversation_id, "assistant", text, provider_result);
|
|
|
|
await load_conversation(window.conversation_id);
|
|
|
|
await load_conversation(window.conversation_id);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
let cursorDiv = document.getElementById(`cursor`);
|
|
|
|
let cursorDiv = document.getElementById(`cursor`);
|
|
|
|
if (cursorDiv) cursorDiv.parentNode.removeChild(cursorDiv);
|
|
|
|
if (cursorDiv) cursorDiv.parentNode.removeChild(cursorDiv);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
message_box.scrollTop = message_box.scrollHeight;
|
|
|
|
message_box.scrollTop = message_box.scrollHeight;
|
|
|
|
await remove_cancel_button();
|
|
|
|
await remove_cancel_button();
|
|
|
|
await register_remove_message();
|
|
|
|
await register_remove_message();
|
|
|
|
prompt_lock = false;
|
|
|
|
prompt_lock = false;
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
|
|
|
|
await load_conversations();
|
|
|
|
await load_conversations();
|
|
|
|
regenerate.classList.remove(`regenerate-hidden`);
|
|
|
|
regenerate.classList.remove("regenerate-hidden");
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const clear_conversations = async () => {
|
|
|
|
const clear_conversations = async () => {
|
|
|
@ -366,22 +374,18 @@ const clear_conversation = async () => {
|
|
|
|
|
|
|
|
|
|
|
|
const show_option = async (conversation_id) => {
|
|
|
|
const show_option = async (conversation_id) => {
|
|
|
|
const conv = document.getElementById(`conv-${conversation_id}`);
|
|
|
|
const conv = document.getElementById(`conv-${conversation_id}`);
|
|
|
|
const yes = document.getElementById(`yes-${conversation_id}`);
|
|
|
|
const choi = document.getElementById(`cho-${conversation_id}`);
|
|
|
|
const not = document.getElementById(`not-${conversation_id}`);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
conv.style.display = `none`;
|
|
|
|
conv.style.display = "none";
|
|
|
|
yes.style.display = `block`;
|
|
|
|
choi.style.display = "block";
|
|
|
|
not.style.display = `block`;
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const hide_option = async (conversation_id) => {
|
|
|
|
const hide_option = async (conversation_id) => {
|
|
|
|
const conv = document.getElementById(`conv-${conversation_id}`);
|
|
|
|
const conv = document.getElementById(`conv-${conversation_id}`);
|
|
|
|
const yes = document.getElementById(`yes-${conversation_id}`);
|
|
|
|
const choi = document.getElementById(`cho-${conversation_id}`);
|
|
|
|
const not = document.getElementById(`not-${conversation_id}`);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
conv.style.display = `block`;
|
|
|
|
conv.style.display = "block";
|
|
|
|
yes.style.display = `none`;
|
|
|
|
choi.style.display = "none";
|
|
|
|
not.style.display = `none`;
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const delete_conversation = async (conversation_id) => {
|
|
|
|
const delete_conversation = async (conversation_id) => {
|
|
|
@ -412,23 +416,31 @@ const new_conversation = async () => {
|
|
|
|
window.conversation_id = uuid();
|
|
|
|
window.conversation_id = uuid();
|
|
|
|
|
|
|
|
|
|
|
|
await clear_conversation();
|
|
|
|
await clear_conversation();
|
|
|
|
|
|
|
|
if (systemPrompt) {
|
|
|
|
|
|
|
|
systemPrompt.value = "";
|
|
|
|
|
|
|
|
}
|
|
|
|
load_conversations();
|
|
|
|
load_conversations();
|
|
|
|
hide_sidebar();
|
|
|
|
hide_sidebar();
|
|
|
|
say_hello();
|
|
|
|
say_hello();
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const load_conversation = async (conversation_id) => {
|
|
|
|
const load_conversation = async (conversation_id, scroll = true) => {
|
|
|
|
let messages = await get_messages(conversation_id);
|
|
|
|
let conversation = await get_conversation(conversation_id);
|
|
|
|
|
|
|
|
let messages = conversation?.items || [];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (systemPrompt) {
|
|
|
|
|
|
|
|
systemPrompt.value = conversation.system || "";
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let elements = "";
|
|
|
|
let elements = "";
|
|
|
|
let last_model = null;
|
|
|
|
let last_model = null;
|
|
|
|
for (i in messages) {
|
|
|
|
for (i in messages) {
|
|
|
|
let item = messages[i];
|
|
|
|
let item = messages[i];
|
|
|
|
last_model = item?.provider?.model;
|
|
|
|
last_model = item.provider?.model;
|
|
|
|
let next_i = parseInt(i) + 1;
|
|
|
|
let next_i = parseInt(i) + 1;
|
|
|
|
let next_provider = item.provider ? item.provider : (messages.length > next_i ? messages[next_i].provider : null);
|
|
|
|
let next_provider = item.provider ? item.provider : (messages.length > next_i ? messages[next_i].provider : null);
|
|
|
|
|
|
|
|
|
|
|
|
let provider_link = item.provider?.name ? `<a href="${item.provider?.url}" target="_blank">${item.provider.name}</a>` : "";
|
|
|
|
let provider_link = item.provider?.name ? `<a href="${item.provider.url}" target="_blank">${item.provider.name}</a>` : "";
|
|
|
|
let provider = provider_link ? `
|
|
|
|
let provider = provider_link ? `
|
|
|
|
<div class="provider">
|
|
|
|
<div class="provider">
|
|
|
|
${provider_link}
|
|
|
|
${provider_link}
|
|
|
@ -436,7 +448,7 @@ const load_conversation = async (conversation_id) => {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
` : "";
|
|
|
|
` : "";
|
|
|
|
elements += `
|
|
|
|
elements += `
|
|
|
|
<div class="message" data-index="${i}">
|
|
|
|
<div class="message${item.regenerate ? " regenerate": ""}" data-index="${i}">
|
|
|
|
<div class="${item.role}">
|
|
|
|
<div class="${item.role}">
|
|
|
|
${item.role == "assistant" ? gpt_image : user_image}
|
|
|
|
${item.role == "assistant" ? gpt_image : user_image}
|
|
|
|
<i class="fa-solid fa-xmark"></i>
|
|
|
|
<i class="fa-solid fa-xmark"></i>
|
|
|
@ -454,7 +466,7 @@ const load_conversation = async (conversation_id) => {
|
|
|
|
`;
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const filtered = filter_messages(messages, false);
|
|
|
|
const filtered = prepare_messages(messages, false);
|
|
|
|
if (filtered.length > 0) {
|
|
|
|
if (filtered.length > 0) {
|
|
|
|
last_model = last_model?.startsWith("gpt-4") ? "gpt-4" : "gpt-3.5-turbo"
|
|
|
|
last_model = last_model?.startsWith("gpt-4") ? "gpt-4" : "gpt-3.5-turbo"
|
|
|
|
let count_total = GPTTokenizer_cl100k_base?.encodeChat(filtered, last_model).length
|
|
|
|
let count_total = GPTTokenizer_cl100k_base?.encodeChat(filtered, last_model).length
|
|
|
@ -468,44 +480,35 @@ const load_conversation = async (conversation_id) => {
|
|
|
|
register_remove_message();
|
|
|
|
register_remove_message();
|
|
|
|
highlight(message_box);
|
|
|
|
highlight(message_box);
|
|
|
|
|
|
|
|
|
|
|
|
message_box.scrollTo({ top: message_box.scrollHeight, behavior: "smooth" });
|
|
|
|
if (scroll) {
|
|
|
|
|
|
|
|
message_box.scrollTo({ top: message_box.scrollHeight, behavior: "smooth" });
|
|
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
message_box.scrollTop = message_box.scrollHeight;
|
|
|
|
message_box.scrollTop = message_box.scrollHeight;
|
|
|
|
}, 500);
|
|
|
|
}, 500);
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function count_tokens(model, text) {
|
|
|
|
|
|
|
|
if (model.startsWith("gpt-3") || model.startsWith("gpt-4")) {
|
|
|
|
|
|
|
|
return GPTTokenizer_cl100k_base?.encode(text).length;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (model.startsWith("llama2") || model.startsWith("codellama")) {
|
|
|
|
|
|
|
|
return llamaTokenizer?.encode(text).length;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (model.startsWith("mistral") || model.startsWith("mixtral")) {
|
|
|
|
};
|
|
|
|
return mistralTokenizer?.encode(text).length;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function count_words_and_tokens(text, model) {
|
|
|
|
|
|
|
|
const tokens_count = model ? count_tokens(model, text) : null;
|
|
|
|
|
|
|
|
const tokens_append = tokens_count ? `, ${tokens_count} tokens` : "";
|
|
|
|
|
|
|
|
return countWords ? `(${countWords(text)} words${tokens_append})` : "";
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const get_conversation = async (conversation_id) => {
|
|
|
|
async function get_conversation(conversation_id) {
|
|
|
|
let conversation = await JSON.parse(
|
|
|
|
let conversation = await JSON.parse(
|
|
|
|
localStorage.getItem(`conversation:${conversation_id}`)
|
|
|
|
localStorage.getItem(`conversation:${conversation_id}`)
|
|
|
|
);
|
|
|
|
);
|
|
|
|
return conversation;
|
|
|
|
return conversation;
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function save_conversation(conversation_id, conversation) {
|
|
|
|
|
|
|
|
localStorage.setItem(
|
|
|
|
|
|
|
|
`conversation:${conversation_id}`,
|
|
|
|
|
|
|
|
JSON.stringify(conversation)
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const get_messages = async (conversation_id) => {
|
|
|
|
async function get_messages(conversation_id) {
|
|
|
|
let conversation = await get_conversation(conversation_id);
|
|
|
|
let conversation = await get_conversation(conversation_id);
|
|
|
|
return conversation?.items || [];
|
|
|
|
return conversation?.items || [];
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const add_conversation = async (conversation_id, content) => {
|
|
|
|
async function add_conversation(conversation_id, content) {
|
|
|
|
if (content.length > 17) {
|
|
|
|
if (content.length > 17) {
|
|
|
|
title = content.substring(0, 17) + '...'
|
|
|
|
title = content.substring(0, 17) + '...'
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
@ -513,31 +516,34 @@ const add_conversation = async (conversation_id, content) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (localStorage.getItem(`conversation:${conversation_id}`) == null) {
|
|
|
|
if (localStorage.getItem(`conversation:${conversation_id}`) == null) {
|
|
|
|
localStorage.setItem(
|
|
|
|
await save_conversation(conversation_id, {
|
|
|
|
`conversation:${conversation_id}`,
|
|
|
|
id: conversation_id,
|
|
|
|
JSON.stringify({
|
|
|
|
title: title,
|
|
|
|
id: conversation_id,
|
|
|
|
system: systemPrompt?.value,
|
|
|
|
title: title,
|
|
|
|
items: [],
|
|
|
|
items: [],
|
|
|
|
});
|
|
|
|
})
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
history.pushState({}, null, `/chat/${conversation_id}`);
|
|
|
|
history.pushState({}, null, `/chat/${conversation_id}`);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function save_system_message() {
|
|
|
|
|
|
|
|
if (!window.conversation_id) return;
|
|
|
|
|
|
|
|
const conversation = await get_conversation(window.conversation_id);
|
|
|
|
|
|
|
|
conversation.system = systemPrompt?.value;
|
|
|
|
|
|
|
|
await save_conversation(window.conversation_id, conversation);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const hide_last_message = async (conversation_id) => {
|
|
|
|
const hide_last_message = async (conversation_id) => {
|
|
|
|
const conversation = await get_conversation(conversation_id)
|
|
|
|
const conversation = await get_conversation(conversation_id)
|
|
|
|
const last_message = conversation.items.pop();
|
|
|
|
const last_message = conversation.items.pop();
|
|
|
|
if (last_message["role"] == "assistant") {
|
|
|
|
if (last_message !== null) {
|
|
|
|
last_message["regenerate"] = true;
|
|
|
|
if (last_message["role"] == "assistant") {
|
|
|
|
|
|
|
|
last_message["regenerate"] = true;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
conversation.items.push(last_message);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
conversation.items.push(last_message);
|
|
|
|
await save_conversation(conversation_id, conversation);
|
|
|
|
|
|
|
|
|
|
|
|
localStorage.setItem(
|
|
|
|
|
|
|
|
`conversation:${conversation_id}`,
|
|
|
|
|
|
|
|
JSON.stringify(conversation)
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const remove_message = async (conversation_id, index) => {
|
|
|
|
const remove_message = async (conversation_id, index) => {
|
|
|
@ -545,17 +551,16 @@ const remove_message = async (conversation_id, index) => {
|
|
|
|
let new_items = [];
|
|
|
|
let new_items = [];
|
|
|
|
for (i in conversation.items) {
|
|
|
|
for (i in conversation.items) {
|
|
|
|
if (i == index - 1) {
|
|
|
|
if (i == index - 1) {
|
|
|
|
delete conversation.items[i]["regenerate"];
|
|
|
|
if (!conversation.items[index]?.regenerate) {
|
|
|
|
|
|
|
|
delete conversation.items[i]["regenerate"];
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (i != index) {
|
|
|
|
if (i != index) {
|
|
|
|
new_items.push(conversation.items[i])
|
|
|
|
new_items.push(conversation.items[i])
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
conversation.items = new_items;
|
|
|
|
conversation.items = new_items;
|
|
|
|
localStorage.setItem(
|
|
|
|
await save_conversation(conversation_id, conversation);
|
|
|
|
`conversation:${conversation_id}`,
|
|
|
|
|
|
|
|
JSON.stringify(conversation)
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const add_message = async (conversation_id, role, content, provider) => {
|
|
|
|
const add_message = async (conversation_id, role, content, provider) => {
|
|
|
@ -566,12 +571,7 @@ const add_message = async (conversation_id, role, content, provider) => {
|
|
|
|
content: content,
|
|
|
|
content: content,
|
|
|
|
provider: provider
|
|
|
|
provider: provider
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
await save_conversation(conversation_id, conversation);
|
|
|
|
localStorage.setItem(
|
|
|
|
|
|
|
|
`conversation:${conversation_id}`,
|
|
|
|
|
|
|
|
JSON.stringify(conversation)
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return conversation.items.length - 1;
|
|
|
|
return conversation.items.length - 1;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
@ -594,8 +594,10 @@ const load_conversations = async () => {
|
|
|
|
<span class="convo-title">${conversation.title}</span>
|
|
|
|
<span class="convo-title">${conversation.title}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<i onclick="show_option('${conversation.id}')" class="fa-regular fa-trash" id="conv-${conversation.id}"></i>
|
|
|
|
<i onclick="show_option('${conversation.id}')" class="fa-regular fa-trash" id="conv-${conversation.id}"></i>
|
|
|
|
<i onclick="delete_conversation('${conversation.id}')" class="fa-regular fa-check" id="yes-${conversation.id}" style="display:none;"></i>
|
|
|
|
<div id="cho-${conversation.id}" class="choise" style="display:none;">
|
|
|
|
<i onclick="hide_option('${conversation.id}')" class="fa-regular fa-x" id="not-${conversation.id}" style="display:none;"></i>
|
|
|
|
<i onclick="delete_conversation('${conversation.id}')" class="fa-regular fa-check"></i>
|
|
|
|
|
|
|
|
<i onclick="hide_option('${conversation.id}')" class="fa-regular fa-x"></i>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -733,15 +735,45 @@ colorThemes.forEach((themeOption) => {
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function count_tokens(model, text) {
|
|
|
|
|
|
|
|
if (model) {
|
|
|
|
|
|
|
|
if (model.startsWith("llama2") || model.startsWith("codellama")) {
|
|
|
|
|
|
|
|
return llamaTokenizer?.encode(text).length;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (model.startsWith("mistral") || model.startsWith("mixtral")) {
|
|
|
|
|
|
|
|
return mistralTokenizer?.encode(text).length;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return GPTTokenizer_cl100k_base?.encode(text).length;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function count_words(text) {
|
|
|
|
|
|
|
|
return text.trim().match(/[\w\u4E00-\u9FA5]+/gu)?.length || 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function count_words_and_tokens(text, model) {
|
|
|
|
|
|
|
|
return `(${count_words(text)} words, ${count_tokens(model, text)} tokens)`;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let countFocus = messageInput;
|
|
|
|
const count_input = async () => {
|
|
|
|
const count_input = async () => {
|
|
|
|
if (message_input.value) {
|
|
|
|
if (countFocus.value) {
|
|
|
|
model = modelSelect.options[modelSelect.selectedIndex].value;
|
|
|
|
model = modelSelect.options[modelSelect.selectedIndex].value;
|
|
|
|
inputCount.innerText = count_words_and_tokens(message_input.value, model);
|
|
|
|
inputCount.innerText = count_words_and_tokens(countFocus.value, model);
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
inputCount.innerHTML = " "
|
|
|
|
inputCount.innerHTML = " "
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
message_input.addEventListener("keyup", count_input);
|
|
|
|
messageInput.addEventListener("keyup", count_input);
|
|
|
|
|
|
|
|
systemPrompt.addEventListener("keyup", count_input);
|
|
|
|
|
|
|
|
systemPrompt.addEventListener("focus", function() {
|
|
|
|
|
|
|
|
countFocus = systemPrompt;
|
|
|
|
|
|
|
|
count_input();
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
systemPrompt.addEventListener("blur", function() {
|
|
|
|
|
|
|
|
countFocus = messageInput;
|
|
|
|
|
|
|
|
count_input();
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
window.onload = async () => {
|
|
|
|
window.onload = async () => {
|
|
|
|
setTheme();
|
|
|
|
setTheme();
|
|
|
@ -754,11 +786,9 @@ window.onload = async () => {
|
|
|
|
say_hello()
|
|
|
|
say_hello()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
load_conversations();
|
|
|
|
load_conversations();
|
|
|
|
|
|
|
|
}, 1);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
message_input.addEventListener("keydown", async (evt) => {
|
|
|
|
messageInput.addEventListener("keydown", async (evt) => {
|
|
|
|
if (prompt_lock) return;
|
|
|
|
if (prompt_lock) return;
|
|
|
|
|
|
|
|
|
|
|
|
if (evt.keyCode === 13 && !evt.shiftKey) {
|
|
|
|
if (evt.keyCode === 13 && !evt.shiftKey) {
|
|
|
@ -766,41 +796,22 @@ window.onload = async () => {
|
|
|
|
console.log("pressed enter");
|
|
|
|
console.log("pressed enter");
|
|
|
|
await handle_ask();
|
|
|
|
await handle_ask();
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
message_input.style.removeProperty("height");
|
|
|
|
messageInput.style.removeProperty("height");
|
|
|
|
message_input.style.height = message_input.scrollHeight + "px";
|
|
|
|
messageInput.style.height = messageInput.scrollHeight + "px";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
send_button.addEventListener(`click`, async () => {
|
|
|
|
sendButton.addEventListener(`click`, async () => {
|
|
|
|
console.log("clicked send");
|
|
|
|
console.log("clicked send");
|
|
|
|
if (prompt_lock) return;
|
|
|
|
if (prompt_lock) return;
|
|
|
|
await handle_ask();
|
|
|
|
await handle_ask();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
messageInput.focus();
|
|
|
|
|
|
|
|
|
|
|
|
register_settings_localstorage();
|
|
|
|
register_settings_localstorage();
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const observer = new MutationObserver((mutationsList) => {
|
|
|
|
|
|
|
|
for (const mutation of mutationsList) {
|
|
|
|
|
|
|
|
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
|
|
|
|
|
|
|
|
const height = message_input.offsetHeight;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let heightValues = {
|
|
|
|
|
|
|
|
81: "20px",
|
|
|
|
|
|
|
|
82: "20px",
|
|
|
|
|
|
|
|
100: "30px",
|
|
|
|
|
|
|
|
119: "39px",
|
|
|
|
|
|
|
|
138: "49px",
|
|
|
|
|
|
|
|
150: "55px"
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
send_button.style.top = heightValues[height] || '';
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
observer.observe(message_input, { attributes: true });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
(async () => {
|
|
|
|
(async () => {
|
|
|
|
response = await fetch('/backend-api/v2/models')
|
|
|
|
response = await fetch('/backend-api/v2/models')
|
|
|
|
models = await response.json()
|
|
|
|
models = await response.json()
|
|
|
@ -876,3 +887,7 @@ fileInput.addEventListener('change', async (event) => {
|
|
|
|
delete fileInput.dataset.text;
|
|
|
|
delete fileInput.dataset.text;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
systemPrompt?.addEventListener("blur", async () => {
|
|
|
|
|
|
|
|
await save_system_message();
|
|
|
|
|
|
|
|
});
|