5 files changed, 67 insertions, 25 deletions

diff --git a/g4f/gui/__init__.py b/g4f/gui/__init__.py
index 16b03e4c..f5e448ad 100644
--- a/g4f/gui/__init__.py
+++ b/g4f/gui/__init__.py
@@ -10,7 +10,7 @@ except ImportError as e:
 
 def run_gui(host: str = '0.0.0.0', port: int = 8080, debug: bool = False) -> None:
     if import_error is not None:
-        raise MissingRequirementsError(f'Install "gui" requirements | pip install g4f[gui] -U\n{import_error}')
+        raise MissingRequirementsError(f'Install "gui" requirements | pip install -U g4f[gui]\n{import_error}')
 
     if debug:
         from g4f import debug
@@ -20,7 +20,7 @@ def run_gui(host: str = '0.0.0.0', port: int = 8080, debug: bool = False) -> Non
         'port' : port,
         'debug': debug
     }
-    
+
     site = Website(app)
     for route in site.routes:
         app.add_url_rule(
@@ -28,7 +28,7 @@ def run_gui(host: str = '0.0.0.0', port: int = 8080, debug: bool = False) -> Non
             view_func = site.routes[route]['function'],
             methods   = site.routes[route]['methods'],
         )
-    
+
     backend_api  = Backend_Api(app)
     for route in backend_api.routes:
         app.add_url_rule(
@@ -36,7 +36,7 @@ def run_gui(host: str = '0.0.0.0', port: int = 8080, debug: bool = False) -> Non
             view_func = backend_api.routes[route]['function'],
             methods   = backend_api.routes[route]['methods'],
         )
-    
+
     print(f"Running on port {config['port']}")
     app.run(**config)
     print(f"Closing port {config['port']}")
diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html
index f63932e7..7103b9c3 100644
--- a/g4f/gui/client/index.html
+++ b/g4f/gui/client/index.html
@@ -77,17 +77,35 @@
             </div>
         </div>
         <div class="settings">
-            <textarea name="OpenaiChat[api_key]" class="box" placeholder="OpenaiChat: accessToken"></textarea>
-             <div class="field">
-                <input id="auto_continue" type="checkbox" name="OpenaiChat[auto_continue]" checked/>
-                <label for="auto_continue" title=""></label>
-                <span class="about">Auto Continue</span>
+            <div class="field box">
+                <label for="OpenaiChat-api_key" class="label" title="">OpenaiChat: access_token</label>
+                <textarea id="OpenaiChat-api_key" name="OpenaiChat[api_key]" placeholder="..."></textarea>
+            </div>
+            <div class="field">
+                <span class="label">OpenaiChat: Auto continue</span>
+                <input id="OpenaiChat-auto_continue" type="checkbox" name="OpenaiChat[auto_continue]" checked/>
+                <label for="OpenaiChat-auto_continue" class="toogle" title=""></label>
+            </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>
+            </div>
+            <div class="field box">
+                <label for="Gemini-api_key" class="label" title="">Gemini: Auth cookies</label>
+                <textarea id="Gemini-api_key" name="Gemini[api_key]" placeholder="..."></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>
+            </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>
+            </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>
             </div>
-            <textarea name="Bing[api_key]" class="box" placeholder="Bing: _U cookie"></textarea>
-            <textarea name="Gemini[api_key]" class="box" placeholder="Gemini: Auth cookies"></textarea>
-           <textarea name="Openai[api_key]" class="box" placeholder="Openai: api_key></textarea>
-           <textarea name="Grok[api_key]" class="box" placeholder="Grok: api_key"></textarea>
-           <textarea name="GeminiPro[api_key]" class="box" placeholder="GeminiPro: api_key"></textarea> 
         </div>
         <div class="conversation">
             <textarea id="systemPrompt" class="box" placeholder="System prompt"></textarea>    
diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index 25fc4911..b0f7a4a0 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -520,7 +520,7 @@ label[for="camera"] {
 }
 
 .buttons label,
-.settings label {
+.settings label.toogle {
     cursor: pointer;
     text-indent: -9999px;
     width: 50px;
@@ -538,7 +538,7 @@ label[for="camera"] {
 }
 
 .buttons label:after,
-.settings label:after {
+.settings label.toogle:after {
     content: "";
     position: absolute;
     top: 50%;
@@ -560,17 +560,13 @@ label[for="camera"] {
     left: calc(100% - 5px - 20px);
 }
 
-.buttons, .settings {
+.buttons {
     display: flex;
     align-items: center;
     justify-content: left;
     width: 100%;
 }
 
-.settings textarea{
-    height: 20px;
-}
-
 .field {
     height: fit-content;
     display: flex;
@@ -1017,7 +1013,7 @@ a:-webkit-any-link {
     border: 1px solid #e4d4ffc9;
 }
 
-#systemPrompt {
+#systemPrompt, .settings textarea {
     font-size: 15px;
     width: 100%;
     color: var(--colour-3);
@@ -1028,6 +1024,30 @@ a:-webkit-any-link {
     resize: vertical;
 }
 
+.settings {
+    width: 100%;
+    display: none;
+}
+
+.settings .field {
+    margin: var(--inner-gap) 0;
+}
+
+.settings textarea {
+    background-color: transparent;
+    border: none;
+    padding: var(--inner-gap) 0;
+}
+
+.settings .label {
+    font-size: 15px;
+    padding: var(--inner-gap) 0;
+    width: fit-content;
+    min-width: 190px;
+    margin-left: var(--section-gap);
+    white-space:nowrap;
+}
+
 ::-webkit-scrollbar {
     width: 10px;
 }
diff --git a/g4f/gui/server/api.py b/g4f/gui/server/api.py
index 2c6279d1..7c09fdbe 100644
--- a/g4f/gui/server/api.py
+++ b/g4f/gui/server/api.py
@@ -98,7 +98,7 @@ class Api():
         if conversation_id and provider in conversations and conversation_id in conversations[provider]:
             kwargs["conversation"] = conversations[provider][conversation_id]
 
-        model = json_data.get('model', models.default)
+        model = json_data.get('model') or models.default
 
         return {
             "model": model,
@@ -169,4 +169,8 @@ def get_error_message(exception: Exception) -> str:
     Returns:
         str: A formatted error message string.
     """
-    return f"{get_last_provider().__name__}: {type(exception).__name__}: {exception}"
\ No newline at end of file
+    message = f"{type(exception).__name__}: {exception}"
+    provider = get_last_provider()
+    if provider is None:
+        return message
+    return f"{provider.__name__}: {message}"
\ No newline at end of file
diff --git a/g4f/gui/webview.py b/g4f/gui/webview.py
index 1557279c..dce47ecc 100644
--- a/g4f/gui/webview.py
+++ b/g4f/gui/webview.py
@@ -31,7 +31,7 @@ def run_webview(
         f"g4f - {g4f.version.utils.current_version}",
         os.path.join(dirname, "client/index.html"),
         text_select=True,
-        js_api=Api(),
+        js_api=JsApi(),
     )
     if has_platformdirs and storage_path is None:
         storage_path = user_config_dir("g4f-webview")