From d4ab83a45bfef2910936dcabf3f875268631e65b Mon Sep 17 00:00:00 2001
From: abc <98614666+xtekky@users.noreply.github.com>
Date: Thu, 19 Oct 2023 15:14:48 +0100
Subject: ~
automatic models fetching in GUI.
---
g4f/gui/client/html/index.html | 9 +---
g4f/gui/client/js/chat.v2.js | 107 ++++++++++++++++++++---------------------
2 files changed, 54 insertions(+), 62 deletions(-)
(limited to 'g4f/gui/client')
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 @@
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) => {
`;
- /* .replace(/(?:\r\n|\r|\n)/g, '
') */
-
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) => {
${item.role == "assistant" ? gpt_image : user_image}
${item.role == "assistant"
- ? ``
- : ``
- }
+ ? ``
+ : ``
+ }
${item.role == "assistant"
- ? markdown.render(item.content)
- : item.content
- }
+ ? markdown.render(item.content)
+ : item.content
+ }
`;
@@ -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
--
cgit v1.2.3