From 5756586cde6ed6da147119113fb5a5fd640d5f83 Mon Sep 17 00:00:00 2001 From: Heiner Lohaus Date: Sun, 14 Jan 2024 07:45:41 +0100 Subject: Refactor code with AI Add doctypes to many functions Add file upload for text files Add alternative url to FreeChatgpt Add webp to allowed image types --- g4f/gui/client/css/style.css | 13 ++++++-- g4f/gui/client/html/index.html | 24 ++++++++++++-- g4f/gui/client/js/chat.v1.js | 74 ++++++++++++++++++++++++++++++------------ 3 files changed, 86 insertions(+), 25 deletions(-) (limited to 'g4f/gui') diff --git a/g4f/gui/client/css/style.css b/g4f/gui/client/css/style.css index 2d4c9857..e77410ab 100644 --- a/g4f/gui/client/css/style.css +++ b/g4f/gui/client/css/style.css @@ -404,7 +404,7 @@ body { display: none; } -#image { +#image, #file { display: none; } @@ -412,13 +412,22 @@ label[for="image"]:has(> input:valid){ color: var(--accent); } -label[for="image"] { +label[for="file"]:has(> input:valid){ + color: var(--accent); +} + +label[for="image"], label[for="file"] { cursor: pointer; position: absolute; top: 10px; left: 10px; } +label[for="file"] { + top: 32px; + left: 10px; +} + .buttons input[type="checkbox"] { height: 0; width: 0; diff --git a/g4f/gui/client/html/index.html b/g4f/gui/client/html/index.html index 3f2bb0c0..95489ba4 100644 --- a/g4f/gui/client/html/index.html +++ b/g4f/gui/client/html/index.html @@ -118,6 +118,10 @@ +
@@ -125,7 +129,14 @@
- +
- +
diff --git a/g4f/gui/client/js/chat.v1.js b/g4f/gui/client/js/chat.v1.js index ccc9461b..7ed9f183 100644 --- a/g4f/gui/client/js/chat.v1.js +++ b/g4f/gui/client/js/chat.v1.js @@ -7,7 +7,9 @@ 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`); -const imageInput = document.querySelector('#image') ; +const imageInput = document.querySelector('#image'); +const fileInput = document.querySelector('#file'); + let prompt_lock = false; hljs.addPlugin(new CopyButtonPlugin()); @@ -42,6 +44,11 @@ const handle_ask = async () => { if (message.length > 0) { message_input.value = ''; await add_conversation(window.conversation_id, message); + if ("text" in fileInput.dataset) { + message += '\n```' + fileInput.dataset.type + '\n'; + message += fileInput.dataset.text; + message += '\n```' + } await add_message(window.conversation_id, "user", message); window.token = message_id(); message_box.innerHTML += ` @@ -55,6 +62,9 @@ const handle_ask = async () => {
`; + document.querySelectorAll('code:not(.hljs').forEach((el) => { + hljs.highlightElement(el); + }); await ask_gpt(); } }; @@ -171,17 +181,30 @@ const ask_gpt = async () => { content_inner.innerHTML += "

An error occured, please try again, if the problem persists, please use a other model or provider.

"; } else { html = markdown_render(text); - html = html.substring(0, html.lastIndexOf('

')) + '

'; + let lastElement, lastIndex = null; + for (element of ['

', '', '\n']) { + const index = html.lastIndexOf(element) + if (index > lastIndex) { + lastElement = element; + lastIndex = index; + } + } + if (lastIndex) { + html = html.substring(0, lastIndex) + '' + lastElement; + } content_inner.innerHTML = html; - document.querySelectorAll('code').forEach((el) => { + document.querySelectorAll('code:not(.hljs').forEach((el) => { hljs.highlightElement(el); }); } window.scrollTo(0, 0); - message_box.scrollTo({ top: message_box.scrollHeight, behavior: "auto" }); + if (message_box.scrollTop >= message_box.scrollHeight - message_box.clientHeight - 100) { + message_box.scrollTo({ top: message_box.scrollHeight, behavior: "auto" }); + } } if (!error && imageInput) imageInput.value = ""; + if (!error && fileInput) fileInput.value = ""; } catch (e) { console.error(e); @@ -305,7 +328,7 @@ const load_conversation = async (conversation_id) => { `; } - document.querySelectorAll(`code`).forEach((el) => { + document.querySelectorAll('code:not(.hljs').forEach((el) => { hljs.highlightElement(el); }); @@ -400,7 +423,7 @@ const load_conversations = async (limit, offset, loader) => { `; } - document.querySelectorAll(`code`).forEach((el) => { + document.querySelectorAll('code:not(.hljs').forEach((el) => { hljs.highlightElement(el); }); }; @@ -602,14 +625,7 @@ observer.observe(message_input, { attributes: true }); (async () => { response = await fetch('/backend-api/v2/models') models = await response.json() - let select = document.getElementById('model'); - select.textContent = ''; - - let auto = document.createElement('option'); - auto.value = ''; - auto.text = 'Model: Default'; - select.appendChild(auto); for (model of models) { let option = document.createElement('option'); @@ -619,14 +635,7 @@ observer.observe(message_input, { attributes: true }); response = await fetch('/backend-api/v2/providers') providers = await response.json() - select = document.getElementById('provider'); - select.textContent = ''; - - auto = document.createElement('option'); - auto.value = ''; - auto.text = 'Provider: Auto'; - select.appendChild(auto); for (provider of providers) { let option = document.createElement('option'); @@ -650,4 +659,27 @@ observer.observe(message_input, { attributes: true }); text += versions["version"]; } document.getElementById("version_text").innerHTML = text -})() \ No newline at end of file +})() + +fileInput.addEventListener('change', async (event) => { + if (fileInput.files.length) { + type = fileInput.files[0].type; + if (type && type.indexOf('/')) { + type = type.split('/').pop().replace('x-', '') + type = type.replace('plain', 'plaintext') + .replace('shellscript', 'sh') + .replace('svg+xml', 'svg') + .replace('vnd.trolltech.linguist', 'ts') + } else { + type = fileInput.files[0].name.split('.').pop() + } + fileInput.dataset.type = type + const reader = new FileReader(); + reader.addEventListener('load', (event) => { + fileInput.dataset.text = event.target.result; + }); + reader.readAsText(fileInput.files[0]); + } else { + delete fileInput.dataset.text; + } +}); \ No newline at end of file -- cgit v1.2.3