summaryrefslogtreecommitdiffstats
path: root/g4f/gui/client
diff options
context:
space:
mode:
Diffstat (limited to 'g4f/gui/client')
-rw-r--r--g4f/gui/client/css/style.css12
-rw-r--r--g4f/gui/client/js/chat.v1.js53
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;