diff options
Diffstat (limited to '')
| -rw-r--r-- | g4f/gui/client/html/index.html | 9 | ||||
| -rw-r--r-- | g4f/gui/client/js/chat.v2.js | 107 |
2 files changed, 54 insertions, 62 deletions
diff --git a/g4f/gui/client/html/index.html b/g4f/gui/client/html/index.html index ae5519e6..d6715ede 100644 --- a/g4f/gui/client/html/index.html +++ b/g4f/gui/client/html/index.html @@ -117,14 +117,7 @@ </div> <div class="field"> <select name="model" id="model"> - <option value="gpt-3.5-turbo" selected>gpt-3.5</option> - <option value="gpt-3.5-turbo-0613">gpt-3.5 fast</option> - <option value="gpt-3.5-turbo-16k">gpt-3.5 16k</option> - <option value="gpt-3.5-turbo-16k-0613">gpt-3.5 16k fast</option> - <option value="gpt-4">gpt-4</option> - <option value="gpt-4-0613">gpt-4 fast</option> - <option value="gpt-4-32k">gpt-4 32k</option> - <option value="gpt-4-32k-0613">gpt-4 32k fast</option> + <option value="gpt-3.5-turbo" selected>gpt-3.5-turbo</option> </select> </div> <div class="field"> diff --git a/g4f/gui/client/js/chat.v2.js b/g4f/gui/client/js/chat.v2.js index f052b7e6..03c3a87a 100644 --- a/g4f/gui/client/js/chat.v2.js +++ b/g4f/gui/client/js/chat.v2.js @@ -1,13 +1,12 @@ -const query = (obj) => Object.keys(obj).map((k) => encodeURIComponent(k) + "=" + encodeURIComponent(obj[k])).join("&"); -const colorThemes = document.querySelectorAll('[name="theme"]'); -const markdown = window.markdownit(); -const message_box = document.getElementById(`messages`); -const message_input = document.getElementById(`message-input`); +const colorThemes = document.querySelectorAll('[name="theme"]'); +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 send_button = document.querySelector(`#send-button`); -let prompt_lock = false; +const spinner = box_conversations.querySelector(".spinner"); +const stop_generating = document.querySelector(`.stop_generating`); +const send_button = document.querySelector(`#send-button`); +let prompt_lock = false; hljs.addPlugin(new CopyButtonPlugin()); @@ -81,8 +80,6 @@ const ask_gpt = async (message) => { </div> `; - /* .replace(/(?:\r\n|\r|\n)/g, '<br>') */ - message_box.scrollTop = message_box.scrollHeight; window.scrollTo(0, 0); await new Promise((r) => setTimeout(r, 500)); @@ -108,10 +105,8 @@ const ask_gpt = async (message) => { method: `POST`, signal: window.controller.signal, headers: { - "content-type": `application/json`, + 'content-type': `application/json`, accept: `text/event-stream`, - // v: `1.0.0`, - // ts: Date.now().toString(), }, body: JSON.stringify({ conversation_id: window.conversation_id, @@ -123,12 +118,12 @@ const ask_gpt = async (message) => { id: window.token, content: { conversation: await get_conversation(window.conversation_id), - internet_access: document.getElementById("switch").checked, - content_type: "text", + internet_access: document.getElementById(`switch`).checked, + content_type: `text`, parts: [ { content: message, - role: "user", + role: `user`, }, ], }, @@ -146,8 +141,7 @@ const ask_gpt = async (message) => { text += chunk; - document.getElementById(`gpt_${window.token}`).innerHTML = - markdown.render(text); + document.getElementById(`gpt_${window.token}`).innerHTML = markdown.render(text); document.querySelectorAll(`code`).forEach((el) => { hljs.highlightElement(el); }); @@ -169,6 +163,7 @@ const ask_gpt = async (message) => { await load_conversations(20, 0); window.scrollTo(0, 0); + } catch (e) { add_message(window.conversation_id, "user", message); @@ -227,19 +222,19 @@ const show_option = async (conversation_id) => { const yes = document.getElementById(`yes-${conversation_id}`); const not = document.getElementById(`not-${conversation_id}`); - conv.style.display = "none"; - yes.style.display = "block"; - not.style.display = "block"; + conv.style.display = `none`; + yes.style.display = `block`; + not.style.display = `block`; }; const hide_option = async (conversation_id) => { const conv = document.getElementById(`conv-${conversation_id}`); - const yes = document.getElementById(`yes-${conversation_id}`); - const not = document.getElementById(`not-${conversation_id}`); + const yes = document.getElementById(`yes-${conversation_id}`); + const not = document.getElementById(`not-${conversation_id}`); - conv.style.display = "block"; - yes.style.display = "none"; - not.style.display = "none"; + conv.style.display = `block`; + yes.style.display = `none`; + not.style.display = `none`; }; const delete_conversation = async (conversation_id) => { @@ -272,7 +267,7 @@ const new_conversation = async () => { await clear_conversation(); await load_conversations(20, 0, true); - await make_announcement() + await say_hello() }; const load_conversation = async (conversation_id) => { @@ -287,15 +282,15 @@ const load_conversation = async (conversation_id) => { <div class="user"> ${item.role == "assistant" ? gpt_image : user_image} ${item.role == "assistant" - ? `<i class="fa-regular fa-phone-arrow-down-left"></i>` - : `<i class="fa-regular fa-phone-arrow-up-right"></i>` - } + ? `<i class="fa-regular fa-phone-arrow-down-left"></i>` + : `<i class="fa-regular fa-phone-arrow-up-right"></i>` + } </div> <div class="content"> ${item.role == "assistant" - ? markdown.render(item.content) - : item.content - } + ? markdown.render(item.content) + : item.content + } </div> </div> `; @@ -351,13 +346,10 @@ const add_message = async (conversation_id, role, content) => { localStorage.setItem( `conversation:${conversation_id}`, JSON.stringify(before_adding) - ); // update conversation + ); }; const load_conversations = async (limit, offset, loader) => { - //console.log(loader); - //if (loader === undefined) box_conversations.appendChild(spinner); - let conversations = []; for (let i = 0; i < localStorage.length; i++) { if (localStorage.key(i).startsWith("conversation:")) { @@ -366,7 +358,6 @@ const load_conversations = async (limit, offset, loader) => { } } - //if (loader === undefined) spinner.parentNode.removeChild(spinner) await clear_conversations(); for (conversation of conversations) { @@ -393,17 +384,6 @@ document.getElementById(`cancelButton`).addEventListener(`click`, async () => { console.log(`aborted ${window.conversation_id}`); }); -function h2a(str1) { - var hex = str1.toString(); - var str = ""; - - for (var n = 0; n < hex.length; n += 2) { - str += String.fromCharCode(parseInt(hex.substr(n, 2), 16)); - } - - return str; -} - const uuid = () => { return `xxxxxxxx-xxxx-4xxx-yxxx-${Date.now().toString(16)}`.replace( /[xy]/g, @@ -476,7 +456,7 @@ const load_settings_localstorage = async () => { }); }; -const make_announcement = async () => { +const say_hello = async () => { tokens = [`Hello`, `!`, ` How`,` can`, ` I`,` assist`,` you`,` today`,`?`] message_box.innerHTML += ` @@ -569,8 +549,9 @@ window.onload = async () => { await load_conversation(window.conversation_id); } } - - await make_announcement() + + await load_models(); + await say_hello() message_input.addEventListener(`keydown`, async (evt) => { if (prompt_lock) return; @@ -612,4 +593,22 @@ const observer = new MutationObserver((mutationsList) => { } }); -observer.observe(message_input, { attributes: true });
\ No newline at end of file +observer.observe(message_input, { attributes: true }); + + +const load_models = async () => { + response = await fetch('/backend-api/v2/models') + models = await response.json() + + var MODELS_SELECT = document.getElementById('model'); + + for (model of models) { + + // Create new option elements + var model_info = document.createElement('option'); + model_info.value = model + model_info.text = model + + MODELS_SELECT.appendChild(model_info); + } +}
\ No newline at end of file |