:gem: [WIP] Store endpoint and api key in localStorage

apps/llm_mixer/index.html

@@ -73,13 +73,31 @@
                         </button>
                     </div>
                 </div>
-                <div class="mt-3">
-                    <button id="prev-user-input" class="btn btn-dark">
-                        <span class="fa fa-arrow-left"></span>
-                    </button>
-                    <button id="next-user-input" class="btn btn-dark">
-                        <span class="fa fa-arrow-right"></span>
-                    </button>
+                <div class="row mt-2 no-gutters">
+                    <div class="col-auto pl-3 pr-0">
+                        <button id="prev-user-input" class="btn btn-dark">
+                            <span class="fa fa-arrow-left"></span>
+                        </button>
+                        <button id="next-user-input" class="btn btn-dark">
+                            <span class="fa fa-arrow-right"></span>
+                        </button>
+                    </div>
+                    <form class="col px-1">
+                            <input
+                                id="openai-endpoint"
+                                class="form-control"
+                                rows="1"
+                                placeholder="Endpoint ..."
+                            ></input>
+                    </form>
+                    <form class="col px-1">
+                        <input
+                            id="openai-api-key"
+                            class="form-control"
+                            rows="1"
+                            placeholder="API Key ..."
+                        ></input>
+                    </form>
                 </div>
             </div>
         </div>

apps/llm_mixer/js/llm_models_loader.js

@@ -34,3 +34,32 @@ export async function setup_temperature_on_select(default_option = null) {
     }
     console.log(`Default temperature: ${select.val()}`);
 }
+
+export function setup_endpoint_and_key() {
+    if (localStorage.getItem("openai_endpoint")) {
+        $("#openai-endpoint").val(localStorage.getItem("openai_endpoint"));
+        console.log("GET: OpenAI Endpoint!");
+    } else {
+        console.log("NULL: OpenAI Endpoint!");
+        $("#openai-endpoint").on("submit", function (event) {
+            event.preventDefault();
+            localStorage.setItem(
+                "openai_endpoint",
+                $("#openai-endpoint").val()
+            );
+            console.log("SET: OpenAI Endpoint!");
+        });
+    }
+
+    if (localStorage.getItem("openai_api_key")) {
+        $("#openai-api-key").val(localStorage.getItem("openai_api_key"));
+        console.log("GET: OpenAI API Key!");
+    } else {
+        console.log("NULL: OpenAI API Key!");
+        $("#openai-api-key").on("submit", function (event) {
+            event.preventDefault();
+            localStorage.setItem("openai_api_key", $("#openai-api-key").val());
+            console.log("SET: OpenAI API Key!");
+        });
+    }
+}

apps/llm_mixer/js/llm_requester.js

@@ -2,7 +2,7 @@ import {
     jsonize_stream_data,
     stringify_stream_bytes,
 } from "./stream_jsonizer.js";
-import * as secrets from "./secrets.js";
+// import * as secrets from "./secrets.js";
 import {
     update_message,
     create_messager,
@@ -23,8 +23,8 @@ export class ChatCompletionsRequester {
         this.model = model || get_selected_llm_model() || "gpt-turbo-3.5";
         this.temperature =
             temperature !== null ? temperature : get_selected_temperature();
-        this.endpoint = endpoint || secrets.openai_endpoint;
-        this.cors_proxy = cors_proxy || secrets.cors_proxy;
+        this.endpoint = endpoint || localStorage.getItem("openai_endpoint");
+        this.cors_proxy = cors_proxy || "https://cors-anywhere.herokuapp.com/";
         this.request_endpoint = this.cors_proxy + this.endpoint;
         this.controller = new AbortController();
     }
@@ -34,7 +34,7 @@ export class ChatCompletionsRequester {
     construct_request_headers() {
         this.request_headers = {
             "Content-Type": "application/json",
-            Authorization: `Bearer ${secrets.openai_api_key}`,
+            Authorization: `Bearer ${localStorage.getItem("openai_api_key")}`,
         };
     }
     construct_request_body() {

apps/llm_mixer/js/main.js

@@ -1,6 +1,7 @@
 import {
     setup_available_models_on_select,
     setup_temperature_on_select,
+    setup_endpoint_and_key,
 } from "./llm_models_loader.js";
 import { bind_chat_buttons } from "./buttons_binder.js";
 var user_input_history = [];
@@ -23,6 +24,7 @@ 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();