Add input to change api key in UI

client/css/api-key.css

@@ -0,0 +1,22 @@
+.api-key-container {
+    margin: 24px 12px 0;
+    display: flex;
+    justify-content: center;
+}
+
+.api-key-container .button {
+    color: var(--colour-3);
+}
+
+.api-key-container #api-key-ok-button {
+    width: 30%;
+}
+
+.api-key-container input {
+    color: var(--colour-3);
+    margin: 0px 4px;
+    border: 1px solid var(--conversations);
+	border-radius: var(--border-radius-1);
+    background: transparent;
+    width: 70%;
+}

client/css/global.css

@@ -10,21 +10,20 @@
 	font-family: var(--font-1);
 }
 
-.theme-light {  
-    --colour-1: #f5f5f5;  
-    --colour-2: #222222;  
-    --colour-3: #333333;  
-    --colour-4: #444444;  
-    --colour-5: #fafafa;  
-    --colour-6: #e0e0e0;  
-
-    --accent: #3a3a3a;  
-    --blur-bg: #f9f9f9;  
-    --blur-border: #ebebeb;  
-    --user-input: #333333;  
-    --conversations: #555555;  
-}  
+.theme-light {
+	--colour-1: #f5f5f5;
+	--colour-2: #222222;
+	--colour-3: #333333;
+	--colour-4: #444444;
+	--colour-5: #fafafa;
+	--colour-6: #e0e0e0;
 
+	--accent: #3a3a3a;
+	--blur-bg: #f9f9f9;
+	--blur-border: #ebebeb;
+	--user-input: #333333;
+	--conversations: #555555;
+}
 
 .theme-dark {
 	--colour-1: #181818;
@@ -60,6 +59,21 @@ a:-webkit-any-link {
 	color: var(--accent);
 }
 
+.hidden {
+	display: none !important;
+}
+
+.fade-in {
+	opacity: 0;
+	animation: fadeIn 1s forwards;
+}
+
+@keyframes fadeIn {
+	to {
+		opacity: 1;
+	}
+}
+
 @media screen and (max-height: 720px) {
 	:root {
 		--section-gap: 16px;

client/css/style.css

@@ -15,3 +15,4 @@
 @import "./select.css";
 @import "./options.css";
 @import "./theme-toggler.css";
+@import "./api-key.css";

client/css/theme-toggler.css

@@ -1,5 +1,5 @@
 .theme-toggler-container {
-    margin: 24px 0px 8px 0px;
+    margin: 12px 0px 8px 0px;
     justify-content: center;
 }
 

client/html/index.html

@@ -12,9 +12,20 @@
 			content="A conversational AI system that listens, learns, and challenges" />
 		<meta property="og:url" content="https://chat.acy.dev" />
 		<link rel="stylesheet" href="{{ url_for('bp.static', filename='css/style.css') }}" />
-		<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('bp.static', filename='img/apple-touch-icon.png') }}" />
-		<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('bp.static', filename='img/favicon-32x32.png') }}" />
-		<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('bp.static', filename='img/favicon-16x16.png') }}" />
+		<link
+			rel="apple-touch-icon"
+			sizes="180x180"
+			href="{{ url_for('bp.static', filename='img/apple-touch-icon.png') }}" />
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="32x32"
+			href="{{ url_for('bp.static', filename='img/favicon-32x32.png') }}" />
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="16x16"
+			href="{{ url_for('bp.static', filename='img/favicon-16x16.png') }}" />
 		<link rel="manifest" href="{{ url_for('bp.static', filename='img/site.webmanifest') }}" />
 		<link
 			rel="stylesheet"
@@ -37,12 +48,20 @@
 						<i class="fa-regular fa-trash"></i>
 						<span>Clear Conversations</span>
 					</button>
+					<div class="api-key-container" id="api-key-container">
+						<button id="show-api-key-button" class="button">API Key</button>
+						<input type="password" id="API-key" class="hidden fade-in" />
+						<button id="api-key-ok-button" class="button hidden fade-in">Ok</button>
+					</div>
 					<div class="field checkbox theme-toggler-container">
 						<input type="checkbox" id="theme-toggler" />
 						<label for="theme-toggler"></label>
 						<span>Dark Mode</span>
 					</div>
-					<a class="info" href="https://github.com/ramonvc/freegpt-webui/tree/chimeragpt-version" target="_blank">
+					<a
+						class="info"
+						href="https://github.com/ramonvc/freegpt-webui/tree/chimeragpt-version"
+						target="_blank">
 						<i class="fa-brands fa-github"></i>
 						<span class="conversation-title">freegpt-webui-chimera</span>
 					</a>
@@ -130,6 +149,7 @@
 		<script>
 			window.conversation_id = "{{ chat_id }}";
 		</script>
+		<script src="{{ url_for('bp.static', filename='js/api-key.js') }}"></script>
 		<script src="{{ url_for('bp.static', filename='js/icons.js') }}"></script>
 		<script src="{{ url_for('bp.static', filename='js/chat.js') }}" defer></script>
 		<script src="https://cdn.jsdelivr.net/npm/markdown-it@latest/dist/markdown-it.min.js"></script>

client/js/api-key.js

@@ -0,0 +1,33 @@
+const showApiKeyButton = document.getElementById("show-api-key-button");  
+const apiKeyInput = document.getElementById("API-key");  
+const apiKeyOkButton = document.getElementById("api-key-ok-button");  
+
+showApiKeyButton.addEventListener("click", () => {  
+  showApiKeyButton.classList.add("hidden");  
+
+  apiKeyInput.classList.remove("hidden");  
+  apiKeyOkButton.classList.remove("hidden");  
+});  
+
+apiKeyOkButton.addEventListener("click", () => {  
+  localStorage.setItem("API-key", apiKeyInput.value);  
+
+  apiKeyInput.classList.add("hidden");  
+  apiKeyOkButton.classList.add("hidden");  
+
+  showApiKeyButton.classList.remove("hidden");  
+});  
+
+window.addEventListener("DOMContentLoaded", () => {  
+  const apiKey = localStorage.getItem("API-key");  
+  if (apiKey) {  
+    apiKeyInput.value = apiKey;  
+  }  
+});  
+
+(function () {  
+  function getApiKeyFromLocalStorage() {  
+    return localStorage.getItem("API-key");  
+  }  
+  window.getApiKeyFromLocalStorage = getApiKeyFromLocalStorage;  
+})();  

client/js/chat.js

@@ -90,7 +90,7 @@ const ask_gpt = async (message) => {
 		window.scrollTo(0, 0);
 		await new Promise((r) => setTimeout(r, 1000));
 		window.scrollTo(0, 0);
-
+		
 		const response = await fetch(`${url_prefix}/backend-api/v2/conversation`, {
 			method: `POST`,
 			signal: window.controller.signal,
@@ -99,6 +99,7 @@ const ask_gpt = async (message) => {
 				accept: `text/event-stream`,
 			},
 			body: JSON.stringify({
+				api_key: getApiKeyFromLocalStorage(),
 				conversation_id: window.conversation_id,
 				action: `_ask`,
 				model: model.options[model.selectedIndex].value,

g4f/Provider/Providers/Chimera.py

@@ -6,7 +6,7 @@
 from ...typing import sha256, Dict, get_type_hints
 
 load_dotenv()
-openai.api_key = os.environ.get("CHIMERA_API_KEY")
+api_key_env = os.environ.get("CHIMERA_API_KEY")
 openai.api_base = "https://chimeragpt.adventblocks.cc/v1"
 
 url = 'https://chimeragpt.adventblocks.cc/'
@@ -32,7 +32,10 @@
 needs_auth = False
 
 
-def _create_completion(model: str, messages: list, stream: bool, **kwargs):
+def _create_completion(api_key: str, model: str, messages: list, stream: bool, **kwargs):
+
+    openai.api_key = api_key if api_key else api_key_env
+
     try:
         response = openai.ChatCompletion.create(
             model=model,

g4f/__init__.py

@@ -3,37 +3,37 @@
 from g4f.models import Model, ModelUtils
 
 
-class ChatCompletion:
-    @staticmethod
-    def create(model: Model.model or str, messages: list, provider: Provider.Provider = None, stream: bool = False, auth: str = False, **kwargs):
-        kwargs['auth'] = auth
-
-        if provider and provider.needs_auth and not auth:
-            print(
-                f'ValueError: {provider.__name__} requires authentication (use auth="cookie or token or jwt ..." param)', file=sys.stderr)
-            sys.exit(1)
-
-        try:
-            if isinstance(model, str):
-                try:
-                    model = ModelUtils.convert[model]
-                except KeyError:
-                    raise Exception(f'The model: {model} does not exist')
-
-            engine = model.best_provider if not provider else provider
-
-            if not engine.supports_stream and stream == True:
-                print(
-                    f"ValueError: {engine.__name__} does not support 'stream' argument", file=sys.stderr)
-                sys.exit(1)
-
-            print(f'Using {engine.__name__} provider')
-
-            return (engine._create_completion(model.name, messages, stream, **kwargs)
-                    if stream else ''.join(engine._create_completion(model.name, messages, stream, **kwargs)))
-        except TypeError as e:
-            print(e)
-            arg: str = str(e).split("'")[1]
-            print(
-                f"ValueError: {engine.__name__} does not support '{arg}' argument", file=sys.stderr)
-            sys.exit(1)
+class ChatCompletion:  
+    @staticmethod  
+    def create(api_key: str, model: Model.model or str, messages: list, provider: Provider.Provider = None, stream: bool = False, auth: str = False, **kwargs):  
+        kwargs['auth'] = auth  
+  
+        if provider and provider.needs_auth and not auth:  
+            print(  
+                f'ValueError: {provider.__name__} requires authentication (use auth="cookie or token or jwt ..." param)', file=sys.stderr)  
+            sys.exit(1)  
+  
+        try:  
+            if isinstance(model, str):  
+                try:  
+                    model = ModelUtils.convert[model]  
+                except KeyError:  
+                    raise Exception(f'The model: {model} does not exist')  
+  
+            engine = model.best_provider if not provider else provider  
+  
+            if not engine.supports_stream and stream == True:  
+                print(  
+                    f"ValueError: {engine.__name__} does not support 'stream' argument", file=sys.stderr)  
+                sys.exit(1)  
+  
+            print(f'Using {engine.__name__} provider')  
+  
+            return (engine._create_completion(api_key=api_key, model=model.name, messages=messages, stream=stream, **kwargs)  
+                    if stream else ''.join(engine._create_completion(api_key=api_key, model=model.name, messages=messages, stream=stream, **kwargs)))  
+        except TypeError as e:  
+            print(e)  
+            arg: str = str(e).split("'")[1]  
+            print(  
+                f"ValueError: {engine.__name__} does not support '{arg}' argument", file=sys.stderr)  
+            sys.exit(1)  

server/backend.py

@@ -35,12 +35,14 @@ def _conversation(self):
 
         while retries < max_retries:
             try:
+                api_key = request.json['api_key']
                 jailbreak = request.json['jailbreak']
                 model = request.json['model']
                 messages = build_messages(jailbreak)
-
+                
                 # Generate response
                 response = ChatCompletion.create(
+                    api_key=api_key,
                     model=model,
                     stream=True,
                     chatId=conversation_id,