:gem: [Feature] Set and store endpoint and api key in localStorage

apps/llm_mixer/index.html

@@ -64,7 +64,7 @@
                             id="user-input"
                             class="form-control"
                             rows="1"
-                            placeholder="Typing here ..."
+                            placeholder="Typing your prompt here ..."
                         ></textarea>
                     </div>
                     <div class="col-auto pr-3 pl-0">
@@ -82,22 +82,32 @@
                             <span class="fa fa-arrow-right"></span>
                         </button>
                     </div>
-                    <form class="col px-1">
+                    <div class="col px-0">
                             <input
                                 id="openai-endpoint"
                                 class="form-control"
                                 rows="1"
-                                placeholder="Endpoint ..."
+                                placeholder="Endpoint"
                             ></input>
-                    </form>
-                    <form class="col px-1">
+                    </div>
+                    <div class="col-auto px-0">
+                        <button id="openai-endpoint-button" class="btn">
+                            <i class="fa fa-check"></i>
+                        </button>
+                    </div>
+                    <div class="col px-0">
                         <input
                             id="openai-api-key"
                             class="form-control"
                             rows="1"
-                            placeholder="API Key ..."
+                            placeholder="API Key"
                         ></input>
-                    </form>
+                    </div>
+                    <div class="col-auto px-0">
+                        <button id="openai-api-key-button" class="btn">
+                            <i class="fa fa-check"></i>
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>

apps/llm_mixer/js/buttons_binder.js

@@ -8,10 +8,14 @@ import {
 } from "./chat_operator.js";
 
 export function bind_chat_buttons() {
-    let send_binder = new SendUserInputButtonBinder();
-    send_binder.bind();
-    let new_binder = new NewChatButtonBinder();
-    new_binder.bind();
+    let send_user_input_binder = new SendUserInputButtonBinder();
+    send_user_input_binder.bind();
+    let new_chat_binder = new NewChatButtonBinder();
+    new_chat_binder.bind();
+    let openai_endpoint_binder = new OpenaiEndpointButtonBinder();
+    openai_endpoint_binder.bind();
+    let openai_api_key_binder = new OpenaiAPIKeyButtonBinder();
+    openai_api_key_binder.bind();
 }
 
 class SendUserInputButtonBinder {
@@ -94,3 +98,40 @@ class NewChatButtonBinder {
         });
     }
 }
+
+class OpenaiEndpointButtonBinder {
+    constructor() {}
+    bind() {
+        const button = $("#openai-endpoint-button");
+        button.attr("title", "Submit OpenAI Endpoint");
+        const stored_openai_endpoint = localStorage.getItem("openai_endpoint");
+        if (stored_openai_endpoint) {
+            $("#openai-endpoint").val(stored_openai_endpoint);
+            console.log(`GET OpenAI Endpoint: ${stored_openai_endpoint}`);
+        }
+        button.click(() => {
+            console.log($("#openai-endpoint").val());
+            localStorage.setItem(
+                "openai_endpoint",
+                $("#openai-endpoint").val()
+            );
+        });
+    }
+}
+
+class OpenaiAPIKeyButtonBinder {
+    constructor() {}
+    bind() {
+        const button = $("#openai-api-key-button");
+        button.attr("title", "Submit OpenAI API Key");
+        const stored_openai_api_key = localStorage.getItem("openai_api_key");
+        if (stored_openai_api_key) {
+            $("#openai-api-key").val(stored_openai_api_key);
+            console.log(`GET OpenAI API Key: ${stored_openai_api_key}`);
+        }
+        button.click(() => {
+            console.log($("#openai-api-key").val());
+            localStorage.setItem("openai_api_key", $("#openai-api-key").val());
+        });
+    }
+}

apps/llm_mixer/js/llm_requester.js

@@ -2,7 +2,6 @@ import {
     jsonize_stream_data,
     stringify_stream_bytes,
 } from "./stream_jsonizer.js";
-// import * as secrets from "./secrets.js";
 import {
     update_message,
     create_messager,

apps/llm_mixer/js/main.js

@@ -24,7 +24,6 @@ function auto_resize_user_input() {
 }
 
 function setup_interactive_components() {
-    setup_endpoint_and_key();
     setup_available_models_on_select();
     setup_temperature_on_select();
     bind_chat_buttons();