summaryrefslogtreecommitdiffstats
path: root/g4f/gui/client/js
diff options
context:
space:
mode:
Diffstat (limited to 'g4f/gui/client/js')
-rw-r--r--g4f/gui/client/js/chat.v1.js75
1 files changed, 57 insertions, 18 deletions
diff --git a/g4f/gui/client/js/chat.v1.js b/g4f/gui/client/js/chat.v1.js
index 57af298b..9585ca98 100644
--- a/g4f/gui/client/js/chat.v1.js
+++ b/g4f/gui/client/js/chat.v1.js
@@ -11,7 +11,7 @@ const imageInput = document.querySelector('#image');
const cameraInput = document.querySelector('#camera');
const fileInput = document.querySelector('#file');
-let prompt_lock = false;
+let prompt_lock = false;
hljs.addPlugin(new CopyButtonPlugin());
@@ -120,16 +120,8 @@ const remove_cancel_button = async () => {
}, 300);
};
-const ask_gpt = async () => {
- regenerate.classList.add(`regenerate-hidden`);
- messages = await get_messages(window.conversation_id);
-
- // Remove history, if it is selected
- if (document.getElementById('history')?.checked) {
- messages = [messages[messages.length-1]]
- }
-
- new_messages = [];
+const filter_messages = (messages) => {
+ let new_messages = [];
for (i in messages) {
new_message = messages[i];
// Remove generated images from history
@@ -143,6 +135,19 @@ const ask_gpt = async () => {
new_messages.push(new_message)
}
}
+ return new_messages;
+}
+
+const ask_gpt = async () => {
+ regenerate.classList.add(`regenerate-hidden`);
+ messages = await get_messages(window.conversation_id);
+ total_messages = messages.length;
+
+ // Remove history, if it is selected
+ if (document.getElementById('history')?.checked) {
+ messages = [messages[messages.length-1]];
+ }
+ messages = filter_messages(messages);
window.scrollTo(0, 0);
window.controller = new AbortController();
@@ -159,8 +164,11 @@ const ask_gpt = async () => {
await new Promise((r) => setTimeout(r, 500));
window.scrollTo(0, 0);
+ el = message_box.querySelector('.count_total');
+ el ? el.parentElement.removeChild(el) : null;
+
message_box.innerHTML += `
- <div class="message" data-index="${new_messages.length}">
+ <div class="message" data-index="${total_messages}">
<div class="assistant">
${gpt_image}
<i class="fa-solid fa-xmark"></i>
@@ -186,7 +194,7 @@ const ask_gpt = async () => {
web_search: document.getElementById(`switch`).checked,
provider: provider.options[provider.selectedIndex].value,
patch_provider: document.getElementById('patch').checked,
- messages: new_messages
+ messages: messages
});
const headers = {
accept: 'text/event-stream'
@@ -240,7 +248,7 @@ const ask_gpt = async () => {
} else {
html = markdown_render(text);
let lastElement, lastIndex = null;
- for (element of ['</p>', '</code></pre>', '</li>\n</ol>']) {
+ for (element of ['</p>', '</code></pre>', '</li>\n</ol>', '</li>\n</ul>']) {
const index = html.lastIndexOf(element)
if (index > lastIndex) {
lastElement = element;
@@ -278,8 +286,9 @@ const ask_gpt = async () => {
let cursorDiv = document.getElementById(`cursor`);
if (cursorDiv) cursorDiv.parentNode.removeChild(cursorDiv);
if (text) {
- add_message(window.conversation_id, "assistant", text, provider);
+ await add_message(window.conversation_id, "assistant", text, provider);
}
+ await load_conversation(window.conversation_id);
message_box.scrollTop = message_box.scrollHeight;
await remove_cancel_button();
await register_remove_message();
@@ -372,10 +381,16 @@ const load_conversation = async (conversation_id) => {
let elements = "";
for (i in messages) {
let item = messages[i];
- let provider = item.provider ? `
+ let next_i = parseInt(i) + 1;
+ let next_provider = item.provider ? item.provider : (messages.length > next_i ? messages[next_i].provider : null);
+ let tokens_count = next_provider?.model ? count_tokens(next_provider.model, item.content) : "";
+ let append_count = tokens_count ? `, ${tokens_count} tokens` : "";
+ let words_count = `(${count_words(item.content)} words${append_count})`
+ let provider_link = item?.provider?.name ? `<a href="${item?.provider?.url}" target="_blank">${item.provider.name}</a>` : "";
+ let provider = provider_link ? `
<div class="provider">
- <a href="${item.provider.url}" target="_blank">${item.provider.name}</a>
- ${item.provider.model ? ' with ' + item.provider.model : ''}
+ ${provider_link}
+ ${item.provider.model ? ' with ' + item.provider.model : ''}
</div>
` : "";
elements += `
@@ -391,10 +406,17 @@ const load_conversation = async (conversation_id) => {
<div class="content">
${provider}
<div class="content_inner">${markdown_render(item.content)}</div>
+ <div class="count">${words_count}</div>
</div>
</div>
`;
}
+
+ let count_total = GPTTokenizer_cl100k_base?.encodeChat(filter_messages(messages), "gpt-3.5-turbo").length
+ if (count_total > 0) {
+ elements += `<div class="count_total">(${count_total} tokens used)</div>`;
+ }
+
message_box.innerHTML = elements;
await register_remove_message();
@@ -407,6 +429,23 @@ const load_conversation = async (conversation_id) => {
}, 500);
};
+function count_words(text) {
+ var matches = text.match(/[\w\d\’\'-]+/gi);
+ return matches ? matches.length : 0;
+}
+
+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
+ }
+}
+
const get_conversation = async (conversation_id) => {
let conversation = await JSON.parse(
localStorage.getItem(`conversation:${conversation_id}`)