From bf41cfc5d1d7ef6e2e8dde6237e54757c22b66b3 Mon Sep 17 00:00:00 2001 From: Heiner Lohaus Date: Sun, 10 Dec 2023 21:46:11 +0100 Subject: Add G4F_PROXY environment Add regenerate button in gui --- g4f/gui/client/css/style.css | 18 ++--- g4f/gui/client/html/index.html | 6 ++ g4f/gui/client/js/chat.v1.js | 151 +++++++++++++++++++---------------------- g4f/gui/server/backend.py | 52 +++++++------- 4 files changed, 108 insertions(+), 119 deletions(-) (limited to 'g4f/gui') diff --git a/g4f/gui/client/css/style.css b/g4f/gui/client/css/style.css index 254a4b15..b6d73650 100644 --- a/g4f/gui/client/css/style.css +++ b/g4f/gui/client/css/style.css @@ -301,6 +301,9 @@ body { font-size: 15px; line-height: 1.3; } +.message .content pre { + white-space: pre-wrap; +} .message .user i { position: absolute; @@ -338,19 +341,15 @@ body { font-size: 14px; } - -.stop_generating { +.stop_generating, .regenerate { position: absolute; - bottom: 118px; - /* left: 10px; - bottom: 125px; - right: 8px; */ + bottom: 158px; left: 50%; transform: translateX(-50%); z-index: 1000000; } -.stop_generating button { +.stop_generating button, .regenerate button{ backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background-color: var(--blur-bg); @@ -380,11 +379,8 @@ body { } } -.stop_generating-hiding button { +.stop_generating-hidden #cancelButton, .regenerate-hidden #regenerateButton { animation: hide_popup 0.4s; -} - -.stop_generating-hidden button { display: none; } diff --git a/g4f/gui/client/html/index.html b/g4f/gui/client/html/index.html index 53c028d7..da7aeefb 100644 --- a/g4f/gui/client/html/index.html +++ b/g4f/gui/client/html/index.html @@ -101,6 +101,12 @@ +
+ +
diff --git a/g4f/gui/client/js/chat.v1.js b/g4f/gui/client/js/chat.v1.js index 2a1bdd73..64c52275 100644 --- a/g4f/gui/client/js/chat.v1.js +++ b/g4f/gui/client/js/chat.v1.js @@ -5,15 +5,12 @@ 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`); let prompt_lock = false; hljs.addPlugin(new CopyButtonPlugin()); -const format = (text) => { - return text.replace(/(?:\r\n|\r|\n)/g, "
"); -}; - message_input.addEventListener("blur", () => { window.scrollTo(0, 0); }); @@ -22,6 +19,10 @@ message_input.addEventListener("focus", () => { document.documentElement.scrollTop = document.documentElement.scrollHeight; }); +const markdown_render = (content) => { + return markdown.render(content).replace("', '') +} + const delete_conversations = async () => { localStorage.clear(); await new_conversation(); @@ -30,38 +31,25 @@ const delete_conversations = async () => { const handle_ask = async () => { message_input.style.height = `80px`; message_input.focus(); - - let txtMsgs = []; - const divTags = document.getElementsByClassName("message"); - for(let i=0;i 0) { - message_input.value = ``; - await ask_gpt(txtMsgs); + message_input.value = ''; + await add_conversation(window.conversation_id, message); + await add_message(window.conversation_id, "user", message); + window.token = message_id(); + message_box.innerHTML += ` +
+
+ ${user_image} + +
+
+ ${markdown_render(message)} +
+
+ `; + await ask_gpt(); } }; @@ -74,13 +62,10 @@ const remove_cancel_button = async () => { }, 300); }; -const ask_gpt = async (txtMsgs) => { +const ask_gpt = async () => { + regenerate.classList.add(`regenerate-hidden`); + messages = await get_messages(window.conversation_id); try { - message_input.value = ``; - message_input.innerHTML = ``; - message_input.innerText = ``; - - add_conversation(window.conversation_id, txtMsgs[0].content); window.scrollTo(0, 0); window.controller = new AbortController(); @@ -89,22 +74,9 @@ const ask_gpt = async (txtMsgs) => { model = document.getElementById("model"); prompt_lock = true; window.text = ``; - window.token = message_id(); stop_generating.classList.remove(`stop_generating-hidden`); - message_box.innerHTML += ` -
-
- ${user_image} - -
-
- ${format(txtMsgs[txtMsgs.length-1].content)} -
-
- `; - message_box.scrollTop = message_box.scrollHeight; window.scrollTo(0, 0); await new Promise((r) => setTimeout(r, 500)); @@ -138,14 +110,13 @@ const ask_gpt = async (txtMsgs) => { action: `_ask`, model: model.options[model.selectedIndex].value, jailbreak: jailbreak.options[jailbreak.selectedIndex].value, + internet_access: document.getElementById(`switch`).checked, provider: provider.options[provider.selectedIndex].value, meta: { id: window.token, content: { - conversation: await get_conversation(window.conversation_id), - internet_access: document.getElementById(`switch`).checked, content_type: `text`, - parts: txtMsgs, + parts: messages, }, }, }), @@ -161,7 +132,7 @@ const ask_gpt = async (txtMsgs) => { text += chunk; - document.getElementById(`gpt_${window.token}`).innerHTML = markdown.render(text).replace(" Date: Sun, 10 Dec 2023 22:10:56 +0100 Subject: Improve error handling in gui --- g4f/gui/client/js/chat.v1.js | 90 +++++++++++++++++++------------------------- g4f/gui/server/backend.py | 14 +++---- 2 files changed, 45 insertions(+), 59 deletions(-) (limited to 'g4f/gui') diff --git a/g4f/gui/client/js/chat.v1.js b/g4f/gui/client/js/chat.v1.js index 64c52275..644ff77a 100644 --- a/g4f/gui/client/js/chat.v1.js +++ b/g4f/gui/client/js/chat.v1.js @@ -65,39 +65,37 @@ const remove_cancel_button = async () => { const ask_gpt = async () => { regenerate.classList.add(`regenerate-hidden`); messages = await get_messages(window.conversation_id); - try { - window.scrollTo(0, 0); - window.controller = new AbortController(); - jailbreak = document.getElementById("jailbreak"); - provider = document.getElementById("provider"); - model = document.getElementById("model"); - prompt_lock = true; - window.text = ``; + window.scrollTo(0, 0); + window.controller = new AbortController(); - stop_generating.classList.remove(`stop_generating-hidden`); + jailbreak = document.getElementById("jailbreak"); + provider = document.getElementById("provider"); + model = document.getElementById("model"); + prompt_lock = true; + window.text = ``; - message_box.scrollTop = message_box.scrollHeight; - window.scrollTo(0, 0); - await new Promise((r) => setTimeout(r, 500)); - window.scrollTo(0, 0); + stop_generating.classList.remove(`stop_generating-hidden`); - message_box.innerHTML += ` -
-
- ${gpt_image} -
-
-
-
-
- `; + message_box.scrollTop = message_box.scrollHeight; + window.scrollTo(0, 0); + await new Promise((r) => setTimeout(r, 500)); + window.scrollTo(0, 0); - message_box.scrollTop = message_box.scrollHeight; - window.scrollTo(0, 0); - await new Promise((r) => setTimeout(r, 1000)); - window.scrollTo(0, 0); + message_box.innerHTML += ` +
+
+ ${gpt_image} +
+
+
+
+
+ `; + message_box.scrollTop = message_box.scrollHeight; + window.scrollTo(0, 0); + try { const response = await fetch(`/backend-api/v2/conversation`, { method: `POST`, signal: window.controller.signal, @@ -122,8 +120,10 @@ const ask_gpt = async () => { }), }); - const reader = response.body.getReader(); + await new Promise((r) => setTimeout(r, 1000)); + window.scrollTo(0, 0); + const reader = response.body.getReader(); while (true) { const { value, done } = await reader.read(); if (done) break; @@ -142,43 +142,29 @@ const ask_gpt = async () => { } if (text.includes(`G4F_ERROR`)) { + console.log("response", text); document.getElementById(`gpt_${window.token}`).innerHTML = "An error occured, please try again, if the problem persists, please use a other model or provider"; } - - add_message(window.conversation_id, "assistant", text); - - message_box.scrollTop = message_box.scrollHeight; - await remove_cancel_button(); - prompt_lock = false; - - await load_conversations(20, 0); - window.scrollTo(0, 0); - } catch (e) { - - message_box.scrollTop = message_box.scrollHeight; - await remove_cancel_button(); - prompt_lock = false; - - await load_conversations(20, 0); - console.log(e); let cursorDiv = document.getElementById(`cursor`); if (cursorDiv) cursorDiv.parentNode.removeChild(cursorDiv); if (e.name != `AbortError`) { - let error_message = `oops ! something went wrong, please try again / reload. [stacktrace in console]`; - - document.getElementById(`gpt_${window.token}`).innerHTML = error_message; - add_message(window.conversation_id, "assistant", error_message); + text = `oops ! something went wrong, please try again / reload. [stacktrace in console]`; + document.getElementById(`gpt_${window.token}`).innerHTML = text; } else { document.getElementById(`gpt_${window.token}`).innerHTML += ` [aborted]`; - add_message(window.conversation_id, "assistant", text + ` [aborted]`); + text += ` [aborted]` } - - window.scrollTo(0, 0); } + add_message(window.conversation_id, "assistant", text); + message_box.scrollTop = message_box.scrollHeight; + await remove_cancel_button(); + prompt_lock = false; + window.scrollTo(0, 0); + await load_conversations(20, 0); regenerate.classList.remove(`regenerate-hidden`); }; diff --git a/g4f/gui/server/backend.py b/g4f/gui/server/backend.py index d17e21b7..9dc5dbb4 100644 --- a/g4f/gui/server/backend.py +++ b/g4f/gui/server/backend.py @@ -74,14 +74,14 @@ class Backend_Api: provider = g4f.Provider.ProviderUtils.convert.get(provider) def try_response(): - response = g4f.ChatCompletion.create( - model=model, - provider=provider, - messages=messages, - stream=True, - ignore_stream_and_auth=True - ) try: + response = g4f.ChatCompletion.create( + model=model, + provider=provider, + messages=messages, + stream=True, + ignore_stream_and_auth=True + ) yield from response except Exception as e: print(e) -- cgit v1.2.3 From d743ee0c26f00916233d751f2f375be414487d49 Mon Sep 17 00:00:00 2001 From: Heiner Lohaus Date: Mon, 11 Dec 2023 00:56:06 +0100 Subject: Add error classes Move version check to debug --- g4f/gui/server/backend.py | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) (limited to 'g4f/gui') diff --git a/g4f/gui/server/backend.py b/g4f/gui/server/backend.py index 9dc5dbb4..e4669699 100644 --- a/g4f/gui/server/backend.py +++ b/g4f/gui/server/backend.py @@ -4,8 +4,9 @@ from g4f.Provider import __providers__ import json from flask import request, Flask from .internet import get_search_message +from g4f import debug -g4f.debug.logging = True +debug.logging = True class Backend_Api: def __init__(self, app: Flask) -> None: @@ -52,8 +53,8 @@ class Backend_Api: def version(self): return { - "version": g4f.get_version(), - "lastet_version": g4f.get_lastet_version(), + "version": debug.get_version(), + "lastet_version": debug.get_lastet_version(), } def _gen_title(self): @@ -68,28 +69,25 @@ class Backend_Api: messages[-1]["content"] = get_search_message(messages[-1]["content"]) model = request.json.get('model') model = model if model else g4f.models.default - provider = request.json.get('provider').replace('g4f.Provider.', '') + provider = request.json.get('provider', '').replace('g4f.Provider.', '') provider = provider if provider and provider != "Auto" else None - if provider != None: - provider = g4f.Provider.ProviderUtils.convert.get(provider) def try_response(): try: - response = g4f.ChatCompletion.create( + yield from g4f.ChatCompletion.create( model=model, provider=provider, messages=messages, stream=True, ignore_stream_and_auth=True ) - yield from response except Exception as e: print(e) yield json.dumps({ 'code' : 'G4F_ERROR', '_action': '_ask', 'success': False, - 'error' : f'an error occurred {str(e)}' - }) + 'error' : f'{e.__class__.__name__}: {e}' + }) return self.app.response_class(try_response(), mimetype='text/event-stream') \ No newline at end of file -- cgit v1.2.3 From b2d02ed624f9354214228c3f4d5dcb1a74d792b3 Mon Sep 17 00:00:00 2001 From: Heiner Lohaus Date: Mon, 11 Dec 2023 02:50:33 +0100 Subject: Change default port for gui Change default host for api Disable gui in build Add custom docker user --- g4f/gui/run.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'g4f/gui') diff --git a/g4f/gui/run.py b/g4f/gui/run.py index 0f94814c..7ff769fd 100644 --- a/g4f/gui/run.py +++ b/g4f/gui/run.py @@ -6,7 +6,7 @@ from g4f.gui import run_gui def gui_parser(): parser = ArgumentParser(description="Run the GUI") parser.add_argument("-host", type=str, default="0.0.0.0", help="hostname") - parser.add_argument("-port", type=int, default=80, help="port") + parser.add_argument("-port", type=int, default=8080, help="port") parser.add_argument("-debug", action="store_true", help="debug mode") return parser -- cgit v1.2.3