From 9a83282902cc6e967f98a0aa8b9449ebde10be2e Mon Sep 17 00:00:00 2001
From: Morgan <me@morgan.kr>
Date: Mon, 29 Apr 2024 17:37:46 +0900
Subject: [PATCH] Added API Endpoint customization

---
 src/lib/ApiUtil.svelte | 10 +++++++++-
 src/lib/Home.svelte    | 31 ++++++++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/lib/ApiUtil.svelte b/src/lib/ApiUtil.svelte
index 74b15e5..42903a5 100644
--- a/src/lib/ApiUtil.svelte
+++ b/src/lib/ApiUtil.svelte
@@ -1,6 +1,10 @@
 <script context="module" lang="ts">
+  import { persisted } from 'svelte-local-storage-store'
+  import { get } from 'svelte/store'
   // This makes it possible to override the OpenAI API base URL in the .env file
-  const apiBase = import.meta.env.VITE_API_BASE || 'https://api.openai.com'
+  const apiBaseStorage = persisted('apiBase', 'https://api.openai.com');
+
+  const apiBase = get(apiBaseStorage) || 'https://api.openai.com';
   const endpointCompletions = import.meta.env.VITE_ENDPOINT_COMPLETIONS || '/v1/chat/completions'
   const endpointGenerations = import.meta.env.VITE_ENDPOINT_GENERATIONS || '/v1/images/generations'
   const endpointModels = import.meta.env.VITE_ENDPOINT_MODELS || '/v1/models'
@@ -8,6 +12,10 @@
   const petalsBase = import.meta.env.VITE_PEDALS_WEBSOCKET || 'wss://chat.petals.dev'
   const endpointPetals = import.meta.env.VITE_PEDALS_WEBSOCKET || '/api/v2/generate'
 
+  export const setApiBase = (e: Record<string>) => {
+    console.log(e);
+    apiBaseStorage.set(e || '')
+  }
   export const getApiBase = ():string => apiBase
   export const getEndpointCompletions = ():string => endpointCompletions
   export const getEndpointGenerations = ():string => endpointGenerations
diff --git a/src/lib/Home.svelte b/src/lib/Home.svelte
index 7cae552..c622ab6 100644
--- a/src/lib/Home.svelte
+++ b/src/lib/Home.svelte
@@ -3,7 +3,7 @@
   import Footer from './Footer.svelte'
   import { replace } from 'svelte-spa-router'
   import { afterUpdate, onMount } from 'svelte'
-  import { getPetalsBase, getPetalsWebsocket } from './ApiUtil.svelte'
+  import { getPetalsBase, getPetalsWebsocket, getApiBase, setApiBase } from './ApiUtil.svelte'
   import { set as setOpenAI } from './providers/openai/util.svelte'
   import { hasActiveModels } from './Models.svelte'
 
@@ -100,6 +100,35 @@ const setPetalsEnabled = (event: Event) => {
     </div>
   </article>
 
+  <article class="message is-danger">
+    <div class="message-body">
+        <p>Set OpenAI API Endpoint:</p>
+        <form
+          class="field has-addons has-addons-right"
+          on:submit|preventDefault={(event) => {
+            if (event.target && event.target[0].value) {
+              setApiBase(event.target[0].value);
+            } else {
+              setApiBase("https://api.openai.com");
+              event.target[0].value = "https://api.openai.com";
+            }
+          }}
+        >
+          <p class="control is-expanded">
+            <input
+              aria-label="OpenAI API  Endpoint"
+              type="text"
+              class="input"
+              placeholder="https://api.openai.com"
+              value={getApiBase() || 'https://api.openai.com'}
+            />
+          </p>
+          <p class="control">
+            <button class="button is-info" type="submit">Save</button>
+          </p>
+        </form>
+    </div>
+  </article>
   
   <article class="message" class:is-danger={!hasModels} class:is-warning={!showPetalsSettings} class:is-info={showPetalsSettings}>
     <div class="message-body">