summaryrefslogtreecommitdiffstats
path: root/g4f/gui
diff options
context:
space:
mode:
Diffstat (limited to 'g4f/gui')
-rw-r--r--g4f/gui/client/index.html47
-rw-r--r--g4f/gui/client/static/css/style.css24
-rw-r--r--g4f/gui/client/static/js/chat.v1.js50
3 files changed, 62 insertions, 59 deletions
diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html
index 463eb650..566a965c 100644
--- a/g4f/gui/client/index.html
+++ b/g4f/gui/client/index.html
@@ -58,6 +58,12 @@
</button>
</div>
<div class="bottom_buttons">
+ <!--
+ <button onclick="open_album();">
+ <i class="fa-solid fa-toolbox"></i>
+ <span>Images Album</span>
+ </button>
+ -->
<button onclick="open_settings();">
<i class="fa-solid fa-toolbox"></i>
<span>Open Settings</span>
@@ -78,6 +84,9 @@
</div>
</div>
</div>
+ <div class="images hidden">
+
+ </div>
<div class="settings hidden">
<div class="paper">
<div class="field">
@@ -101,7 +110,7 @@
<label for="auto_continue" class="toogle" title="Continue large responses in OpenaiChat"></label>
</div>
<div class="field box">
- <label for="message-input-height" class="label" title="">Input max. grow height</label>
+ <label for="message-input-height" class="label" title="">Input max. height</label>
<input type="number" id="message-input-height" value="200"/>
</div>
<div class="field box">
@@ -109,40 +118,40 @@
<input type="text" id="recognition-language" value="" placeholder="navigator.language"/>
</div>
<div class="field box">
- <label for="OpenaiChat-api_key" class="label" title="">OpenaiChat: api_key</label>
- <textarea id="OpenaiChat-api_key" name="OpenaiChat[api_key]" placeholder="..."></textarea>
+ <label for="Bing-api_key" class="label" title="">Bing:</label>
+ <textarea id="Bing-api_key" name="Bing[api_key]" class="BingCreateImages-api_key" placeholder="&quot;_U&quot; cookie"></textarea>
</div>
<div class="field box">
- <label for="Bing-api_key" class="label" title="">Bing: "_U" cookie</label>
- <textarea id="Bing-api_key" name="Bing[api_key]" placeholder="..."></textarea>
+ <label for="DeepInfra-api_key" class="label" title="">DeepInfra:</label>
+ <textarea id="DeepInfra-api_key" name="DeepInfra[api_key]" class="DeepInfraImage-api_key" placeholder="api_key"></textarea>
</div>
<div class="field box">
- <label for="Gemini-api_key" class="label" title="">Gemini: Cookies</label>
- <textarea id="Gemini-api_key" name="Gemini[api_key]" placeholder="..."></textarea>
+ <label for="Gemini-api_key" class="label" title="">Gemini:</label>
+ <textarea id="Gemini-api_key" name="Gemini[api_key]" placeholder="Cookies"></textarea>
</div>
<div class="field box">
- <label for="Openai-api_key" class="label" title="">Openai: api_key</label>
- <textarea id="Openai-api_key" name="Openai[api_key]" placeholder="..."></textarea>
+ <label for="GeminiPro-api_key" class="label" title="">GeminiPro:</label>
+ <textarea id="GeminiPro-api_key" name="GeminiPro[api_key]" placeholder="api_key"></textarea>
</div>
<div class="field box">
- <label for="Groq-api_key" class="label" title="">Groq: api_key</label>
- <textarea id="Groq-api_key" name="Groq[api_key]" placeholder="..."></textarea>
+ <label for="Groq-api_key" class="label" title="">Groq:</label>
+ <textarea id="Groq-api_key" name="Groq[api_key]" placeholder="api_key"></textarea>
</div>
<div class="field box">
- <label for="GeminiPro-api_key" class="label" title="">GeminiPro: api_key</label>
- <textarea id="GeminiPro-api_key" name="GeminiPro[api_key]" placeholder="..."></textarea>
+ <label for="HuggingFace-api_key" class="label" title="">HuggingFace:</label>
+ <textarea id="HuggingFace-api_key" name="HuggingFace[api_key]" placeholder="api_key"></textarea>
</div>
<div class="field box">
- <label for="OpenRouter-api_key" class="label" title="">OpenRouter: api_key</label>
- <textarea id="OpenRouter-api_key" name="OpenRouter[api_key]" placeholder="..."></textarea>
+ <label for="Openai-api_key" class="label" title="">Openai:</label>
+ <textarea id="Openai-api_key" name="Openai[api_key]" placeholder="api_key"></textarea>
</div>
<div class="field box">
- <label for="HuggingFace-api_key" class="label" title="">HuggingFace: api_key</label>
- <textarea id="HuggingFace-api_key" name="HuggingFace[api_key]" placeholder="..."></textarea>
+ <label for="OpenaiChat-api_key" class="label" title="">OpenaiChat:</label>
+ <textarea id="OpenaiChat-api_key" name="OpenaiChat[api_key]" placeholder="api_key"></textarea>
</div>
<div class="field box">
- <label for="DeepInfra-api_key" class="label" title="">DeepInfra: api_key</label>
- <textarea id="DeepInfra-api_key" name="DeepInfra[api_key]" placeholder="..."></textarea>
+ <label for="OpenRouter-api_key" class="label" title="">OpenRouter:</label>
+ <textarea id="OpenRouter-api_key" name="OpenRouter[api_key]" placeholder="api_key"></textarea>
</div>
</div>
<div class="bottom_buttons">
diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index 058fd521..fea52629 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -653,7 +653,7 @@ select {
font-size: 15px;
width: 100%;
color: var(--colour-3);
- min-height: 50px;
+ min-height: 49px;
height: 59px;
outline: none;
padding: var(--inner-gap) var(--section-gap);
@@ -809,7 +809,7 @@ ul {
}
.mobile-sidebar {
- display: none !important;
+ display: none;
position: absolute;
z-index: 100000;
top: 0;
@@ -850,12 +850,8 @@ ul {
gap: 15px;
}
- .field {
- width: fit-content;
- }
-
.mobile-sidebar {
- display: flex !important;
+ display: flex;
}
#systemPrompt {
@@ -1090,7 +1086,13 @@ a:-webkit-any-link {
}
.settings textarea {
- height: 51px;
+ height: 19px;
+ min-height: 19px;
+ padding: 0;
+}
+
+.settings .field.box {
+ padding: var(--inner-gap) var(--inner-gap) var(--inner-gap) 0;
}
.settings, .images {
@@ -1112,7 +1114,6 @@ a:-webkit-any-link {
.settings textarea {
background-color: transparent;
border: none;
- padding: var(--inner-gap) 0;
}
.settings input {
@@ -1130,10 +1131,7 @@ a:-webkit-any-link {
.settings .label {
font-size: 15px;
- padding: var(--inner-gap) 0;
- width: fit-content;
- min-width: 190px;
- margin-left: var(--section-gap);
+ margin-left: var(--inner-gap);
white-space:nowrap;
}
diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js
index d07ca4ea..46f7e808 100644
--- a/g4f/gui/client/static/js/chat.v1.js
+++ b/g4f/gui/client/static/js/chat.v1.js
@@ -179,12 +179,14 @@ const register_message_buttons = async () => {
}
const delete_conversations = async () => {
+ const remove_keys = [];
for (let i = 0; i < appStorage.length; i++){
let key = appStorage.key(i);
if (key.startsWith("conversation:")) {
- appStorage.removeItem(key);
+ remove_keys.push(key);
}
}
+ remove_keys.forEach((key)=>appStorage.removeItem(key));
hide_sidebar();
await new_conversation();
};
@@ -274,31 +276,21 @@ const prepare_messages = (messages, filter_last_message=true) => {
}
let new_messages = [];
- if (messages) {
- for (i in messages) {
- new_message = messages[i];
- // Remove generated images from history
- new_message.content = new_message.content.replaceAll(
- /<!-- generated images start -->[\s\S]+<!-- generated images end -->/gm,
- ""
- )
- delete new_message["provider"];
- // Remove regenerated messages
- if (!new_message.regenerate) {
- new_messages.push(new_message)
- }
- }
- }
-
- // Add system message
- system_content = systemPrompt?.value;
- if (system_content) {
- new_messages.unshift({
+ if (systemPrompt?.value) {
+ new_messages.push({
"role": "system",
- "content": system_content
+ "content": systemPrompt.value
});
}
-
+ messages.forEach((new_message) => {
+ // Include only not regenerated messages
+ if (!new_message.regenerate) {
+ // Remove generated images from history
+ new_message.content = filter_message(new_message.content);
+ delete new_message.provider;
+ new_messages.push(new_message)
+ }
+ });
return new_messages;
}
@@ -413,8 +405,11 @@ const ask_gpt = async () => {
if (file && !provider)
provider = "Bing";
let api_key = null;
- if (provider)
+ if (provider) {
api_key = document.getElementById(`${provider}-api_key`)?.value || null;
+ if (api_key == null)
+ api_key = document.querySelector(`.${provider}-api_key`)?.value || null;
+ }
await api("conversation", {
id: window.token,
conversation_id: window.conversation_id,
@@ -949,6 +944,7 @@ function count_chars(text) {
}
function count_words_and_tokens(text, model) {
+ text = filter_message(text);
return `(${count_words(text)} words, ${count_chars(text)} chars, ${count_tokens(model, text)} tokens)`;
}
@@ -1277,10 +1273,11 @@ if (SpeechRecognition) {
microLabel.classList.add("recognition");
startValue = messageInput.value;
lastDebounceTranscript = "";
- timeoutHandle = window.setTimeout(may_stop, 8000);
+ timeoutHandle = window.setTimeout(may_stop, 10000);
};
recognition.onend = function() {
microLabel.classList.remove("recognition");
+ messageInput.focus();
};
recognition.onresult = function(event) {
if (!event.results) {
@@ -1301,13 +1298,12 @@ if (SpeechRecognition) {
messageInput.value = `${startValue ? startValue+"\n" : ""}${transcript.trim()}`;
if (isFinal) {
startValue = messageInput.value;
- messageInput.focus();
}
messageInput.style.height = messageInput.scrollHeight + "px";
messageInput.scrollTop = messageInput.scrollHeight;
}
- timeoutHandle = window.setTimeout(may_stop, transcript ? 8000 : 5000);
+ timeoutHandle = window.setTimeout(may_stop, transcript ? 10000 : 8000);
};
microLabel.addEventListener("click", () => {
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-24 20:11:58 +0100