From 009a67239a1df546fd22933a6b28eda03cd02a00 Mon Sep 17 00:00:00 2001
From: Heiner Lohaus <hlohaus@users.noreply.github.com>
Date: Thu, 11 Apr 2024 02:40:30 +0200
Subject: Add ReplicateImage Provider, Fix BingCreateImages Provider

---
 g4f/gui/client/index.html           | 47 ++++++++++++++++++++++---------------
 g4f/gui/client/static/css/style.css | 24 +++++++++----------
 g4f/gui/client/static/js/chat.v1.js | 44 ++++++++++++++++------------------
 3 files changed, 59 insertions(+), 56 deletions(-)

(limited to 'g4f/gui')

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>
@@ -77,6 +83,9 @@
                     <span id="version_text" class="convo-title"></span>
                 </div>
             </div>
+        </div>
+        <div class="images hidden">
+            
         </div>
         <div class="settings hidden">
             <div class="paper">
@@ -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..fd58be6d 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)`;
 }
 
-- 
cgit v1.2.3