summaryrefslogtreecommitdiffstats
path: root/g4f/gui/client
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--g4f/gui/client/index.html6
-rw-r--r--g4f/gui/client/static/css/dracula.min.css7
-rw-r--r--g4f/gui/client/static/css/style.css3
-rw-r--r--g4f/gui/client/static/js/chat.v1.js46
4 files changed, 42 insertions, 20 deletions
diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html
index 66bcaaab..064e4594 100644
--- a/g4f/gui/client/index.html
+++ b/g4f/gui/client/index.html
@@ -19,8 +19,7 @@
<script src="/static/js/highlightjs-copy.min.js"></script>
<script src="/static/js/chat.v1.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
- <link rel="stylesheet"
- href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/base16/dracula.min.css">
+ <link rel="stylesheet" href="/static/css/dracula.min.css">
<script>
MathJax = {
chtml: {
@@ -244,8 +243,5 @@
<div class="mobile-sidebar">
<i class="fa-solid fa-bars"></i>
</div>
- <script>
- </script>
</body>
-
</html>
diff --git a/g4f/gui/client/static/css/dracula.min.css b/g4f/gui/client/static/css/dracula.min.css
new file mode 100644
index 00000000..729bbbfb
--- /dev/null
+++ b/g4f/gui/client/static/css/dracula.min.css
@@ -0,0 +1,7 @@
+/*!
+ Theme: Dracula
+ Author: Mike Barkmin (http://github.com/mikebarkmin) based on Dracula Theme (http://github.com/dracula)
+ License: ~ MIT (or more permissive) [via base16-schemes-source]
+ Maintainer: @highlightjs/core-team
+ Version: 2021.09.0
+*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#e9e9f4;background:#282936}.hljs ::selection,.hljs::selection{background-color:#4d4f68;color:#e9e9f4}.hljs-comment{color:#626483}.hljs-tag{color:#62d6e8}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#e9e9f4}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#ea51b2}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#b45bcf}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#00f769}.hljs-strong{font-weight:700;color:#00f769}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#ebff87}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#a1efe4}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#62d6e8}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#b45bcf}.hljs-emphasis{color:#b45bcf;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#00f769}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700} \ No newline at end of file
diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index 979f9f96..01bc17fa 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -381,7 +381,8 @@ body {
}
.message .count .fa-clipboard,
-.message .count .fa-volume-high {
+.message .count .fa-volume-high,
+.message .count .fa-rotate {
z-index: 1000;
cursor: pointer;
}
diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js
index 23605ed4..a0178e63 100644
--- a/g4f/gui/client/static/js/chat.v1.js
+++ b/g4f/gui/client/static/js/chat.v1.js
@@ -109,8 +109,9 @@ const register_message_buttons = async () => {
let playlist = [];
function play_next() {
const next = playlist.shift();
- if (next)
+ if (next && el.dataset.do_play) {
next.play();
+ }
}
if (el.dataset.stopped) {
el.classList.remove("blink")
@@ -179,6 +180,20 @@ const register_message_buttons = async () => {
});
}
});
+ document.querySelectorAll(".message .fa-rotate").forEach(async (el) => {
+ if (!("click" in el.dataset)) {
+ el.dataset.click = "true";
+ el.addEventListener("click", async () => {
+ const message_el = el.parentElement.parentElement.parentElement;
+ el.classList.add("clicked");
+ setTimeout(() => el.classList.remove("clicked"), 1000);
+ prompt_lock = true;
+ await hide_message(window.conversation_id, message_el.dataset.index);
+ window.token = message_id();
+ await ask_gpt(message_el.dataset.index);
+ })
+ }
+ });
}
const delete_conversations = async () => {
@@ -257,9 +272,9 @@ const remove_cancel_button = async () => {
}, 300);
};
-const prepare_messages = (messages, filter_last_message=true) => {
+const prepare_messages = (messages, message_index = -1) => {
// Removes none user messages at end
- if (filter_last_message) {
+ if (message_index == -1) {
let last_message;
while (last_message = messages.pop()) {
if (last_message["role"] == "user") {
@@ -267,14 +282,16 @@ const prepare_messages = (messages, filter_last_message=true) => {
break;
}
}
+ } else if (message_index >= 0) {
+ messages = messages.filter((_, index) => message_index >= index);
}
// Remove history, if it's selected
if (document.getElementById('history')?.checked) {
- if (filter_last_message) {
- messages = [messages.pop()];
- } else {
+ if (message_index == null) {
messages = [messages.pop(), messages.pop()];
+ } else {
+ messages = [messages.pop()];
}
}
@@ -361,11 +378,11 @@ imageInput?.addEventListener("click", (e) => {
}
});
-const ask_gpt = async () => {
+const ask_gpt = async (message_index = -1) => {
regenerate.classList.add(`regenerate-hidden`);
messages = await get_messages(window.conversation_id);
total_messages = messages.length;
- messages = prepare_messages(messages);
+ messages = prepare_messages(messages, message_index);
stop_generating.classList.remove(`stop_generating-hidden`);
@@ -528,6 +545,7 @@ const hide_option = async (conversation_id) => {
const span_el = document.createElement("span");
span_el.innerText = input_el.value;
span_el.classList.add("convo-title");
+ span_el.onclick = () => set_conversation(conversation_id);
left_el.removeChild(input_el);
left_el.appendChild(span_el);
}
@@ -616,7 +634,7 @@ const load_conversation = async (conversation_id, scroll=true) => {
}
if (window.GPTTokenizer_cl100k_base) {
- const filtered = prepare_messages(messages, false);
+ const filtered = prepare_messages(messages, null);
if (filtered.length > 0) {
last_model = last_model?.startsWith("gpt-4") ? "gpt-4" : "gpt-3.5-turbo"
let count_total = GPTTokenizer_cl100k_base?.encodeChat(filtered, last_model).length
@@ -683,15 +701,15 @@ async function save_system_message() {
await save_conversation(window.conversation_id, conversation);
}
}
-
-const hide_last_message = async (conversation_id) => {
+const hide_message = async (conversation_id, message_index =- 1) => {
const conversation = await get_conversation(conversation_id)
- const last_message = conversation.items.pop();
+ message_index = message_index == -1 ? conversation.items.length - 1 : message_index
+ const last_message = message_index in conversation.items ? conversation.items[message_index] : null;
if (last_message !== null) {
if (last_message["role"] == "assistant") {
last_message["regenerate"] = true;
}
- conversation.items.push(last_message);
+ conversation.items[message_index] = last_message;
}
await save_conversation(conversation_id, conversation);
};
@@ -790,7 +808,7 @@ document.getElementById("cancelButton").addEventListener("click", async () => {
document.getElementById("regenerateButton").addEventListener("click", async () => {
prompt_lock = true;
- await hide_last_message(window.conversation_id);
+ await hide_message(window.conversation_id);
window.token = message_id();
await ask_gpt();
});