From 68c7a92ee269131e4aada81fdbc994466ab38b57 Mon Sep 17 00:00:00 2001
From: Heiner Lohaus <hlohaus@users.noreply.github.com>
Date: Mon, 16 Dec 2024 00:58:45 +0100
Subject: Hide api_key fields from disabeld providers

---
 g4f/gui/client/index.html           | 26 +++++++++++++-------------
 g4f/gui/client/static/css/style.css |  3 ++-
 g4f/gui/client/static/js/chat.v1.js |  2 ++
 3 files changed, 17 insertions(+), 14 deletions(-)

(limited to 'g4f/gui')

diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html
index c53284ac..5ddc1104 100644
--- a/g4f/gui/client/index.html
+++ b/g4f/gui/client/index.html
@@ -150,47 +150,47 @@
                 <label for="recognition-language" class="label" title="">Speech recognition language</label>
                 <input type="text" id="recognition-language" value="" placeholder="navigator.language"/>
             </div>
-            <div class="field box">
+            <div class="field box hidden">
                 <label for="BingCreateImages-api_key" class="label" title="">Microsoft Designer in Bing:</label>
                 <textarea id="BingCreateImages-api_key" name="BingCreateImages[api_key]" placeholder="&quot;_U&quot; cookie"></textarea>
             </div>
-            <div class="field box">
+            <div class="field box hidden">
                 <label for="Cerebras-api_key" class="label" title="">Cerebras Inference:</label>
                 <textarea id="Cerebras-api_key" name="Cerebras[api_key]" placeholder="api_key"></textarea>
             </div>
-            <div class="field box">
+            <div class="field box hidden">
                 <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">
+            <div class="field box hidden">
                 <label for="GeminiPro-api_key" class="label" title="">Gemini API:</label>
                 <textarea id="GeminiPro-api_key" name="GeminiPro[api_key]" placeholder="api_key"></textarea>
             </div>
-            <div class="field box">
+            <div class="field box hidden">
                 <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">
+            <div class="field box hidden">
                 <label for="HuggingFace-api_key" class="label" title="">HuggingFace:</label>
                 <textarea id="HuggingFace-api_key" name="HuggingFace[api_key]" class="HuggingFaceAPI-api_key" placeholder="api_key"></textarea>
             </div>
-            <div class="field box">
-                <label for="Openai-api_key" class="label" title="">OpenAI API:</label>
-                <textarea id="Openai-api_key" name="Openai[api_key]" placeholder="api_key"></textarea>
+            <div class="field box hidden">
+                <label for="OpenaiAPI-api_key" class="label" title="">OpenAI API:</label>
+                <textarea id="OpenaiAPI-api_key" name="OpenaiAPI[api_key]" placeholder="api_key"></textarea>
             </div>
-            <div class="field box">
+            <div class="field box hidden">
                 <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 class="field box">
+            <div class="field box hidden">
                 <label for="PerplexityApi-api_key" class="label" title="">Perplexity API:</label>
                 <textarea id="PerplexityApi-api_key" name="PerplexityApi[api_key]" placeholder="api_key"></textarea>
             </div>
-            <div class="field box">
+            <div class="field box hidden">
                 <label for="Replicate-api_key" class="label" title="">Replicate:</label>
                 <textarea id="Replicate-api_key" name="Replicate[api_key]" class="ReplicateImage-api_key" placeholder="api_key"></textarea>
             </div>
-            <div class="field box">
+            <div class="field box hidden">
                 <label for="xAI-api_key" class="label" title="">xAI:</label>
                 <textarea id="xAI-api_key" name="xAI[api_key]" placeholder="api_key"></textarea>
             </div>
diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index 10f20607..a499779a 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -1022,7 +1022,8 @@ ul {
     }
 
     .settings h3 {
-        padding-left: 50px;
+        padding-left: 54px;
+        padding-top: 18px;
     }
 
     .buttons {
diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js
index f8bd894d..222886e9 100644
--- a/g4f/gui/client/static/js/chat.v1.js
+++ b/g4f/gui/client/static/js/chat.v1.js
@@ -1293,6 +1293,7 @@ const load_provider_option = (input, provider_name) => {
         providerSelect.querySelectorAll(`option[data-parent="${provider_name}"]`).forEach(
             (el) => el.removeAttribute("disabled")
         );
+        settings.querySelector(`.field:has(#${provider_name}-api_key)`)?.classList.remove("hidden");
     } else {
         modelSelect.querySelectorAll(`option[data-providers*="${provider_name}"]`).forEach(
             (el) => {
@@ -1307,6 +1308,7 @@ const load_provider_option = (input, provider_name) => {
         providerSelect.querySelectorAll(`option[data-parent="${provider_name}"]`).forEach(
             (el) => el.setAttribute("disabled", "disabled")
         );
+        settings.querySelector(`.field:has(#${provider_name}-api_key)`)?.classList.add("hidden");
     }
 };
 
-- 
cgit v1.2.3