diff options
Diffstat (limited to 'g4f/gui')
| -rw-r--r-- | g4f/gui/client/css/style.css | 12 | ||||
| -rw-r--r-- | g4f/gui/client/js/chat.v1.js | 53 |
2 files changed, 40 insertions, 25 deletions
diff --git a/g4f/gui/client/css/style.css b/g4f/gui/client/css/style.css index bd42280d..bed54f88 100644 --- a/g4f/gui/client/css/style.css +++ b/g4f/gui/client/css/style.css @@ -541,7 +541,6 @@ label[for="camera"] { display: flex; align-items: center; gap: 16px; - padding-right: 15px } .field .about { @@ -569,7 +568,16 @@ select { padding: 8px 16px; appearance: none; - width: 250px; + width: 160px; +} + +@media only screen and (min-width: 40em) { + select { + width: 200px; + } + .field { + padding-right: 15px + } } .input-box { diff --git a/g4f/gui/client/js/chat.v1.js b/g4f/gui/client/js/chat.v1.js index 9585ca98..c727dbf9 100644 --- a/g4f/gui/client/js/chat.v1.js +++ b/g4f/gui/client/js/chat.v1.js @@ -3,7 +3,6 @@ const markdown = window.markdownit(); const message_box = document.getElementById(`messages`); const message_input = document.getElementById(`message-input`); const box_conversations = document.querySelector(`.top`); -const spinner = box_conversations.querySelector(".spinner"); const stop_generating = document.querySelector(`.stop_generating`); const regenerate = document.querySelector(`.regenerate`); const send_button = document.querySelector(`#send-button`); @@ -71,6 +70,7 @@ const handle_ask = async () => { message_input.style.height = `82px`; message_input.focus(); window.scrollTo(0, 0); + message = message_input.value if (message.length > 0) { message_input.value = ''; @@ -268,6 +268,11 @@ const ask_gpt = async () => { } } if (!error) { + // Remove cursor + html = markdown_render(text); + content_inner.innerHTML = html; + highlight(content_inner); + if (imageInput) imageInput.value = ""; if (cameraInput) cameraInput.value = ""; if (fileInput) fileInput.value = ""; @@ -275,26 +280,28 @@ const ask_gpt = async () => { } catch (e) { console.error(e); - if (e.name != `AbortError`) { - text = `oops ! something went wrong, please try again / reload. [stacktrace in console]`; + if (e.name != "AbortError") { + error = true; + text = "oops ! something went wrong, please try again / reload. [stacktrace in console]"; content_inner.innerHTML = text; } else { content_inner.innerHTML += ` [aborted]`; text += ` [aborted]` } } - let cursorDiv = document.getElementById(`cursor`); - if (cursorDiv) cursorDiv.parentNode.removeChild(cursorDiv); - if (text) { + if (!error) { await add_message(window.conversation_id, "assistant", text, provider); + await load_conversation(window.conversation_id); + } else { + let cursorDiv = document.getElementById(`cursor`); + if (cursorDiv) cursorDiv.parentNode.removeChild(cursorDiv); } - await load_conversation(window.conversation_id); message_box.scrollTop = message_box.scrollHeight; await remove_cancel_button(); await register_remove_message(); prompt_lock = false; window.scrollTo(0, 0); - await load_conversations(20, 0); + await load_conversations(); regenerate.classList.remove(`regenerate-hidden`); }; @@ -353,7 +360,7 @@ const delete_conversation = async (conversation_id) => { await new_conversation(); } - await load_conversations(20, 0, true); + await load_conversations(); }; const set_conversation = async (conversation_id) => { @@ -362,7 +369,7 @@ const set_conversation = async (conversation_id) => { await clear_conversation(); await load_conversation(conversation_id); - await load_conversations(20, 0, true); + await load_conversations(); }; const new_conversation = async () => { @@ -370,7 +377,7 @@ const new_conversation = async () => { window.conversation_id = uuid(); await clear_conversation(); - await load_conversations(20, 0, true); + await load_conversations(); await say_hello() }; @@ -435,14 +442,14 @@ function count_words(text) { } function count_tokens(model, text) { - if (model.startsWith("gpt-3") || model.startsWith("gpt-4")) { - return GPTTokenizer_cl100k_base?.encode(text).length + if (model.startsWith("gpt-3") || model.startsWith("gpt-4") || model.startsWith("text-davinci")) { + return GPTTokenizer_cl100k_base?.encode(text).length; } if (model.startsWith("llama2") || model.startsWith("codellama")) { - return llamaTokenizer?.encode(text).length + return llamaTokenizer?.encode(text).length; } if (model.startsWith("mistral") || model.startsWith("mixtral")) { - return mistralTokenizer?.encode(text).length + return mistralTokenizer?.encode(text).length; } } @@ -526,7 +533,7 @@ const add_message = async (conversation_id, role, content, provider) => { return conversation.items.length - 1; }; -const load_conversations = async (limit, offset, loader) => { +const load_conversations = async () => { let conversations = []; for (let i = 0; i < localStorage.length; i++) { if (localStorage.key(i).startsWith("conversation:")) { @@ -550,7 +557,6 @@ const load_conversations = async (limit, offset, loader) => { </div> `; } - }; document.getElementById(`cancelButton`).addEventListener(`click`, async () => { @@ -693,10 +699,8 @@ window.onload = async () => { } } - if (conversations == 0) localStorage.clear(); - await setTimeout(() => { - load_conversations(20, 0); + load_conversations(); }, 1); if (/\/chat\/.+/.test(window.location.href)) { @@ -776,15 +780,17 @@ observer.observe(message_input, { attributes: true }); versions = await response.json() document.title = 'g4f - gui - ' + versions["version"]; - text = "version ~ " + let text = "version ~ " if (versions["version"] != versions["latest_version"]) { - release_url = 'https://github.com/xtekky/gpt4free/releases/tag/' + versions["latest_version"]; - text += '<a href="' + release_url +'" target="_blank" title="New version: ' + versions["latest_version"] +'">' + versions["version"] + ' 🆕</a>'; + let release_url = 'https://github.com/xtekky/gpt4free/releases/tag/' + versions["latest_version"]; + let title = `New version: ${versions["latest_version"]}`; + text += `<a href="${release_url}" target="_blank" title="${title}">${versions["version"]} 🆕</a>`; } else { text += versions["version"]; } document.getElementById("version_text").innerHTML = text })() + for (const el of [imageInput, cameraInput]) { el.addEventListener('click', async () => { el.value = ''; @@ -794,6 +800,7 @@ for (const el of [imageInput, cameraInput]) { } }); } + fileInput.addEventListener('click', async (event) => { fileInput.value = ''; delete fileInput.dataset.text; |