From 14167671d42dfcb905e4fd0b53f3fd41f4d7e54c Mon Sep 17 00:00:00 2001 From: Heiner Lohaus Date: Sat, 9 Mar 2024 03:10:59 +0100 Subject: Add system message input to gui Improve OpenaiChat provider --- g4f/gui/client/css/style.css | 21 +++++-- g4f/gui/client/html/index.html | 1 + g4f/gui/client/js/chat.v1.js | 127 +++++++++++++++++++++++------------------ 3 files changed, 89 insertions(+), 60 deletions(-) (limited to 'g4f/gui/client') diff --git a/g4f/gui/client/css/style.css b/g4f/gui/client/css/style.css index 6ae720f3..9e42b1e3 100644 --- a/g4f/gui/client/css/style.css +++ b/g4f/gui/client/css/style.css @@ -65,6 +65,7 @@ :root { --font-1: "Inter", sans-serif; --section-gap: 25px; + --inner-gap: 15px; --border-radius-1: 8px; } @@ -222,7 +223,7 @@ body { overflow-wrap: break-word; display: flex; gap: var(--section-gap); - padding: var(--section-gap); + padding: var(--inner-gap) var(--section-gap); padding-bottom: 0; } @@ -393,7 +394,7 @@ body { #input-count { width: fit-content; font-size: 12px; - padding: 6px 15px; + padding: 6px var(--inner-gap); } .stop_generating, .regenerate { @@ -417,7 +418,7 @@ body { background-color: var(--blur-bg); border-radius: var(--border-radius-1); border: 1px solid var(--blur-border); - padding: 5px 15px; + padding: 5px var(--inner-gap); color: var(--colour-3); display: flex; justify-content: center; @@ -601,7 +602,7 @@ select { .input-box { display: flex; align-items: center; - padding-right: 15px; + padding-right: var(--inner-gap); cursor: pointer; } @@ -785,7 +786,7 @@ a:-webkit-any-link { font-size: 15px; width: 100%; height: 100%; - padding: 12px 15px; + padding: 12px var(--inner-gap); background: none; border: none; outline: none; @@ -997,3 +998,13 @@ a:-webkit-any-link { #send-button:hover { border: 1px solid #e4d4ffc9; } + +#systemPrompt { + font-size: 15px; + width: 100%; + color: var(--colour-3); + height: 50px; + outline: none; + padding: var(--inner-gap) var(--section-gap); + resize: vertical; +} \ No newline at end of file diff --git a/g4f/gui/client/html/index.html b/g4f/gui/client/html/index.html index 86ab157d..5a9d1178 100644 --- a/g4f/gui/client/html/index.html +++ b/g4f/gui/client/html/index.html @@ -116,6 +116,7 @@
+
diff --git a/g4f/gui/client/js/chat.v1.js b/g4f/gui/client/js/chat.v1.js index 7135b8f6..3d9945d9 100644 --- a/g4f/gui/client/js/chat.v1.js +++ b/g4f/gui/client/js/chat.v1.js @@ -13,6 +13,7 @@ const cameraInput = document.getElementById("camera"); const fileInput = document.getElementById("file"); const inputCount = document.getElementById("input-count") const modelSelect = document.getElementById("model"); +const systemPrompt = document.getElementById("systemPrompt") let prompt_lock = false; @@ -135,7 +136,7 @@ const remove_cancel_button = async () => { }, 300); }; -const filter_messages = (messages, filter_last_message = true) => { +const prepare_messages = (messages, filter_last_message = true) => { // Removes none user messages at end if (filter_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 (filter_last_message) { messages = [messages.pop()]; @@ -160,7 +161,7 @@ const filter_messages = (messages, filter_last_message = true) => { for (i in messages) { new_message = messages[i]; // Remove generated images from history - new_message["content"] = new_message["content"].replaceAll( + new_message.content = new_message.content.replaceAll( /[\s\S]+/gm, "" ) @@ -171,6 +172,15 @@ const filter_messages = (messages, filter_last_message = true) => { } } + // Add system message + system_content = systemPrompt?.value; + if (system_content) { + new_messages.unshift({ + "role": "system", + "content": system_content + }); + } + return new_messages; } @@ -179,7 +189,7 @@ const ask_gpt = async () => { messages = await get_messages(window.conversation_id); total_messages = messages.length; - messages = filter_messages(messages); + messages = prepare_messages(messages); window.scrollTo(0, 0); window.controller = new AbortController(); @@ -192,8 +202,6 @@ const ask_gpt = async () => { message_box.scrollTop = message_box.scrollHeight; window.scrollTo(0, 0); - await new Promise((r) => setTimeout(r, 500)); - window.scrollTo(0, 0); el = message_box.querySelector('.count_total'); el ? el.parentElement.removeChild(el) : null; @@ -218,6 +226,8 @@ const ask_gpt = async () => { message_box.scrollTop = message_box.scrollHeight; window.scrollTo(0, 0); + + error = provider_result = null; try { let body = JSON.stringify({ id: window.token, @@ -241,18 +251,14 @@ const ask_gpt = async () => { } else { headers['content-type'] = 'application/json'; } + const response = await fetch(`/backend-api/v2/conversation`, { method: 'POST', signal: window.controller.signal, headers: headers, body: body }); - - await new Promise((r) => setTimeout(r, 1000)); - window.scrollTo(0, 0); - const reader = response.body.pipeThrough(new TextDecoderStream()).getReader(); - error = provider = null; while (true) { const { value, done } = await reader.read(); if (done) break; @@ -262,12 +268,12 @@ const ask_gpt = async () => { if (message.type == "content") { text += message.content; } else if (message["type"] == "provider") { - provider = message.provider + provider_result = message.provider content.querySelector('.provider').innerHTML = ` - - ${provider.name} + + ${provider_result.name} - ${provider.model ? ' with ' + provider.model : ''} + ${provider_result.model ? ' with ' + provider_result.model : ''} ` } else if (message["type"] == "error") { error = message["error"]; @@ -292,7 +298,7 @@ const ask_gpt = async () => { html = html.substring(0, lastIndex) + '' + lastElement; } 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); } @@ -324,19 +330,19 @@ const ask_gpt = async () => { } } if (!error) { - 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); } else { let cursorDiv = document.getElementById(`cursor`); if (cursorDiv) cursorDiv.parentNode.removeChild(cursorDiv); } + window.scrollTo(0, 0); message_box.scrollTop = message_box.scrollHeight; await remove_cancel_button(); await register_remove_message(); prompt_lock = false; - window.scrollTo(0, 0); await load_conversations(); - regenerate.classList.remove(`regenerate-hidden`); + regenerate.classList.remove("regenerate-hidden"); }; const clear_conversations = async () => { @@ -362,6 +368,10 @@ const clear_conversation = async () => { while (messages.length > 0) { message_box.removeChild(messages[0]); } + + if (systemPrompt) { + systemPrompt.value = ""; + } }; const show_option = async (conversation_id) => { @@ -418,17 +428,22 @@ const new_conversation = async () => { }; const load_conversation = async (conversation_id) => { - 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 last_model = null; for (i in messages) { let item = messages[i]; - last_model = item?.provider?.model; + 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_link = item.provider?.name ? `${item.provider.name}` : ""; + let provider_link = item.provider?.name ? `${item.provider.name}` : ""; let provider = provider_link ? `
${provider_link} @@ -454,7 +469,7 @@ const load_conversation = async (conversation_id) => { `; } - const filtered = filter_messages(messages, false); + const filtered = prepare_messages(messages, false); 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 @@ -493,19 +508,26 @@ function count_words_and_tokens(text, model) { return countWords ? `(${countWords(text)} words${tokens_append})` : ""; } -const get_conversation = async (conversation_id) => { +async function get_conversation(conversation_id) { let conversation = await JSON.parse( localStorage.getItem(`conversation:${conversation_id}`) ); 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); return conversation?.items || []; -}; +} -const add_conversation = async (conversation_id, content) => { +async function add_conversation(conversation_id, content) { if (content.length > 17) { title = content.substring(0, 17) + '...' } else { @@ -513,18 +535,23 @@ const add_conversation = async (conversation_id, content) => { } if (localStorage.getItem(`conversation:${conversation_id}`) == null) { - localStorage.setItem( - `conversation:${conversation_id}`, - JSON.stringify({ - id: conversation_id, - title: title, - items: [], - }) - ); + await save_conversation(conversation_id, { + id: conversation_id, + title: title, + 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); + conversation.system = systemPrompt?.value; + await save_conversation(window.conversation_id, conversation); +} const hide_last_message = async (conversation_id) => { const conversation = await get_conversation(conversation_id) @@ -533,11 +560,7 @@ const hide_last_message = async (conversation_id) => { last_message["regenerate"] = true; } conversation.items.push(last_message); - - localStorage.setItem( - `conversation:${conversation_id}`, - JSON.stringify(conversation) - ); + await save_conversation(conversation_id, conversation); }; const remove_message = async (conversation_id, index) => { @@ -552,10 +575,7 @@ const remove_message = async (conversation_id, index) => { } } conversation.items = new_items; - localStorage.setItem( - `conversation:${conversation_id}`, - JSON.stringify(conversation) - ); + await save_conversation(conversation_id, conversation); }; const add_message = async (conversation_id, role, content, provider) => { @@ -566,12 +586,7 @@ const add_message = async (conversation_id, role, content, provider) => { content: content, provider: provider }); - - localStorage.setItem( - `conversation:${conversation_id}`, - JSON.stringify(conversation) - ); - + await save_conversation(conversation_id, conversation); return conversation.items.length - 1; }; @@ -754,9 +769,7 @@ window.onload = async () => { say_hello() } - setTimeout(() => { - load_conversations(); - }, 1); + load_conversations(); message_input.addEventListener("keydown", async (evt) => { if (prompt_lock) return; @@ -875,4 +888,8 @@ fileInput.addEventListener('change', async (event) => { } else { delete fileInput.dataset.text; } +}); + +systemPrompt?.addEventListener("blur", async () => { + await save_system_message(); }); \ No newline at end of file -- cgit v1.2.3 From 74a33f10dd4bcac9e9f9716ffa27d3876fc976a0 Mon Sep 17 00:00:00 2001 From: Heiner Lohaus Date: Sat, 9 Mar 2024 19:05:05 +0100 Subject: Add word count from iG8R Improve Bing provider Some gui improvments Improve error handling in gui --- g4f/gui/client/css/style.css | 22 +++-- g4f/gui/client/html/index.html | 5 - g4f/gui/client/js/chat.v1.js | 210 ++++++++++++++++++++--------------------- 3 files changed, 120 insertions(+), 117 deletions(-) (limited to 'g4f/gui/client') diff --git a/g4f/gui/client/css/style.css b/g4f/gui/client/css/style.css index 9e42b1e3..eb71fa72 100644 --- a/g4f/gui/client/css/style.css +++ b/g4f/gui/client/css/style.css @@ -205,6 +205,12 @@ body { gap: 10px; } +.conversations .convo .choise { + position: absolute; + right: 8px; + background-color: var(--blur-bg); +} + .conversations i { color: var(--conversations); cursor: pointer; @@ -227,6 +233,10 @@ body { padding-bottom: 0; } +.message.regenerate { + opacity: 0.75; +} + .message:last-child { animation: 0.6s show_message; } @@ -397,7 +407,7 @@ body { padding: 6px var(--inner-gap); } -.stop_generating, .regenerate { +.stop_generating, .toolbar .regenerate { position: absolute; z-index: 1000000; top: 0; @@ -405,14 +415,14 @@ body { } @media only screen and (min-width: 40em) { - .stop_generating, .regenerate { + .stop_generating, .toolbar .regenerate { left: 50%; transform: translateX(-50%); right: auto; } } -.stop_generating button, .regenerate button{ +.stop_generating button, .toolbar .regenerate button{ backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background-color: var(--blur-bg); @@ -602,7 +612,6 @@ select { .input-box { display: flex; align-items: center; - padding-right: var(--inner-gap); cursor: pointer; } @@ -991,8 +1000,9 @@ a:-webkit-any-link { padding-right: 5px; padding-top: 2px; padding-bottom: 2px; - top: 20px; - left: 8px; + position: absolute; + bottom: 8px; + right: 8px; } #send-button:hover { diff --git a/g4f/gui/client/html/index.html b/g4f/gui/client/html/index.html index 5a9d1178..85192d23 100644 --- a/g4f/gui/client/html/index.html +++ b/g4f/gui/client/html/index.html @@ -37,10 +37,6 @@ import llamaTokenizer from "llama-tokenizer-js" -