From 20ab17f31ace225b434236b9c61fa6e8ae12c573 Mon Sep 17 00:00:00 2001 From: Heiner Lohaus Date: Sun, 3 Mar 2024 11:34:56 +0100 Subject: Improve gui handling, Improve count tokens --- g4f/gui/client/js/chat.v1.js | 50 +++++++++++++++++++++++++------------------- 1 file changed, 28 insertions(+), 22 deletions(-) diff --git a/g4f/gui/client/js/chat.v1.js b/g4f/gui/client/js/chat.v1.js index 7e1bb397..9772fbf7 100644 --- a/g4f/gui/client/js/chat.v1.js +++ b/g4f/gui/client/js/chat.v1.js @@ -5,6 +5,8 @@ const message_input = 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 send_button = document.getElementById("send-button"); const imageInput = document.getElementById("image"); const cameraInput = document.getElementById("camera"); @@ -65,6 +67,13 @@ const register_remove_message = async () => { const delete_conversations = async () => { localStorage.clear(); + for (let i = 0; i < localStorage.length; i++){ + let key = localStorage.key(i); + if (key.startsWith("conversation:")) { + localStorage.removeItem(key); + } + } + hide_sidebar(); await new_conversation(); }; @@ -395,7 +404,8 @@ const set_conversation = async (conversation_id) => { await clear_conversation(); await load_conversation(conversation_id); - await load_conversations(); + load_conversations(); + hide_sidebar(); }; const new_conversation = async () => { @@ -403,9 +413,9 @@ const new_conversation = async () => { window.conversation_id = uuid(); await clear_conversation(); - await load_conversations(); - - await say_hello() + load_conversations(); + hide_sidebar(); + say_hello(); }; const load_conversation = async (conversation_id) => { @@ -419,7 +429,7 @@ const load_conversation = async (conversation_id) => { let next_i = parseInt(i) + 1; let next_provider = item.provider ? item.provider : (messages.length > next_i ? messages[next_i].provider : null); - let provider_link = item?.provider?.name ? `${item.provider.name}` : ""; + let provider_link = item.provider?.name ? `${item.provider.name}` : ""; let provider = provider_link ? `
${provider_link} @@ -428,7 +438,7 @@ const load_conversation = async (conversation_id) => { ` : ""; elements += `
-
+
${item.role == "assistant" ? gpt_image : user_image} ${item.role == "assistant" @@ -450,13 +460,13 @@ const load_conversation = async (conversation_id) => { 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 += `
(${count_total} tokens total)
`; + elements += `
(${count_total} tokens used)
`; } } message_box.innerHTML = elements; - await register_remove_message(); + register_remove_message(); highlight(message_box); message_box.scrollTo({ top: message_box.scrollHeight, behavior: "smooth" }); @@ -485,8 +495,9 @@ function count_tokens(model, text) { } function count_words_and_tokens(text, model) { - const tokens_count = model ? `, ${count_tokens(model, text)} tokens` : ""; - return `(${count_words(text)} words${tokens_count})` + const tokens_count = model ? count_tokens(model, text) : null; + const tokens_append = tokens_count ? `, ${tokens_count} tokens` : ""; + return `(${count_words(text)} words${tokens_append})` } const get_conversation = async (conversation_id) => { @@ -629,15 +640,17 @@ const message_id = () => { return BigInt(`0b${unix}${random_bytes}`).toString(); }; -document.querySelector(".mobile-sidebar").addEventListener("click", (event) => { - const sidebar = document.querySelector(".conversations"); +async function hide_sidebar() { + sidebar.classList.remove("shown"); + sidebar_button.classList.remove("rotated"); +} +sidebar_button.addEventListener("click", (event) => { if (sidebar.classList.contains("shown")) { - sidebar.classList.remove("shown"); - event.target.classList.remove("rotated"); + hide_sidebar(); } else { sidebar.classList.add("shown"); - event.target.classList.add("rotated"); + sidebar_button.classList.add("rotated"); } window.scrollTo(0, 0); @@ -740,13 +753,6 @@ message_input.addEventListener("keyup", count_input); window.onload = async () => { setTheme(); - let conversations = 0; - for (let i = 0; i < localStorage.length; i++) { - if (localStorage.key(i).startsWith("conversation:")) { - conversations += 1; - } - } - count_input(); if (/\/chat\/.+/.test(window.location.href)) { -- cgit v1.2.3