From 6903d30f8d81018a1281754e90fb6a2b1f202630 Mon Sep 17 00:00:00 2001
From: Gregorio Maclen <gregorio.maclen@gmail.com>
Date: Wed, 9 Oct 2024 13:21:03 -0300
Subject: [PATCH] improve openai config

---
 src/i18n/en/index.ts                       |  1 +
 src/i18n/es/index.ts                       |  1 +
 src/i18n/i18n-types.ts                     |  8 +++++
 src/lib/chat/index.ts                      |  5 +---
 src/lib/chat/openai.ts                     | 13 +++++++-
 src/lib/components/FieldSelectModel.svelte | 13 ++++++--
 src/lib/localStorage.ts                    |  2 +-
 src/routes/settings/OpenAI.svelte          | 35 ++++++++++++----------
 8 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/src/i18n/en/index.ts b/src/i18n/en/index.ts
index 7eabc48d..f9a29278 100644
--- a/src/i18n/en/index.ts
+++ b/src/i18n/en/index.ts
@@ -22,6 +22,7 @@ const en = {
 	clear: 'Clear',
 	confirmDeletion: 'Confirm deletion',
 	connected: 'Connected',
+	connecting: 'Connecting...',
 	content: 'Content',
 	controls: 'Controls',
 	controlsOnlyAvailableForOllama:
diff --git a/src/i18n/es/index.ts b/src/i18n/es/index.ts
index ad8f34de..762c56d9 100644
--- a/src/i18n/es/index.ts
+++ b/src/i18n/es/index.ts
@@ -25,6 +25,7 @@ const es = {
 	currentVersion: 'Versión actual',
 	confirmDeletion: 'Confirmar eliminación',
 	connected: 'Conectado',
+	connecting: 'Conectando...',
 	content: 'Contenido',
 	controls: 'Controles',
 	copy: 'Copiar',
diff --git a/src/i18n/i18n-types.ts b/src/i18n/i18n-types.ts
index 1ffca2fe..039708ee 100644
--- a/src/i18n/i18n-types.ts
+++ b/src/i18n/i18n-types.ts
@@ -101,6 +101,10 @@ type RootTranslation = {
 	 * C​o​n​n​e​c​t​e​d
 	 */
 	connected: string
+	/**
+	 * C​o​n​n​e​c​t​i​n​g​.​.​.
+	 */
+	connecting: string
 	/**
 	 * C​o​n​t​e​n​t
 	 */
@@ -640,6 +644,10 @@ The completion in progress will stop
 	 * Connected
 	 */
 	connected: () => LocalizedString
+	/**
+	 * Connecting...
+	 */
+	connecting: () => LocalizedString
 	/**
 	 * Content
 	 */
diff --git a/src/lib/chat/index.ts b/src/lib/chat/index.ts
index 1eed1668..5d06f1f7 100644
--- a/src/lib/chat/index.ts
+++ b/src/lib/chat/index.ts
@@ -43,10 +43,7 @@ export async function listModels(): Promise<Model[]> {
 		.getModels()
 		.then((models) => models.models)
 		.catch(() => []);
-	const openaiModels = await new OpenAIStrategy()
-		.getModels()
-		.then((models) => models.models)
-		.catch(() => []);
+	const openaiModels = await new OpenAIStrategy().getModels().catch(() => []);
 
 	return [...ollamaModels, ...openaiModels];
 }
diff --git a/src/lib/chat/openai.ts b/src/lib/chat/openai.ts
index 65f037cd..f75d1210 100644
--- a/src/lib/chat/openai.ts
+++ b/src/lib/chat/openai.ts
@@ -17,6 +17,14 @@ export class OpenAIStrategy implements ChatStrategy {
 		});
 	}
 
+	config(params: { server: string; apiKey: string }): void {
+		this.openai = new OpenAI({
+			baseURL: params.server,
+			apiKey: params.apiKey,
+			dangerouslyAllowBrowser: true
+		});
+	}
+
 	async chat(
 		payload: any,
 		abortSignal: AbortSignal,
@@ -36,6 +44,9 @@ export class OpenAIStrategy implements ChatStrategy {
 
 	async getModels(): Promise<any> {
 		const response = await this.openai.models.list();
-		return response.data;
+		return response.data?.map((model) => ({
+			api: 'openai',
+			name: model.id
+		}));
 	}
 }
diff --git a/src/lib/components/FieldSelectModel.svelte b/src/lib/components/FieldSelectModel.svelte
index a9215e83..2bf2d329 100644
--- a/src/lib/components/FieldSelectModel.svelte
+++ b/src/lib/components/FieldSelectModel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import LL from '$i18n/i18n-svelte';
-	import { getLastUsedModels } from '$lib/chat';
+	import { getLastUsedModels, type Model } from '$lib/chat';
 	import { settingsStore } from '$lib/localStorage';
 
 	import FieldSelect from './FieldSelect.svelte';
@@ -19,16 +19,23 @@
 	let lastUsedModels: ModelOption[] = [];
 	let otherModels: ModelOption[] = [];
 
+	function getBadges(model: Model): string[] {
+		const badges: string[] = [];
+		if (model.details?.parameter_size) badges.push(model.details.parameter_size);
+		if (model.api) badges.push(model.api);
+		return badges;
+	}
+
 	$: disabled = !$settingsStore.models?.length;
 	$: models = $settingsStore.models?.map((m) => ({
 		value: m.name,
 		label: m.name,
-		badge: [m.details.parameter_size, m.api]
+		badge: getBadges(m)
 	}));
 	$: lastUsedModels = getLastUsedModels().map((m) => ({
 		value: m.name,
 		label: m.name,
-		badge: [m.details.parameter_size, m.api]
+		badge: getBadges(m)
 	}));
 	$: otherModels = models?.filter((m) => !lastUsedModels.some((lm) => lm.value === m.value)) || [];
 </script>
diff --git a/src/lib/localStorage.ts b/src/lib/localStorage.ts
index d215c27b..150e1020 100644
--- a/src/lib/localStorage.ts
+++ b/src/lib/localStorage.ts
@@ -64,7 +64,7 @@ export interface Settings {
 
 const defaultSettings: Settings = {
 	ollamaServer: 'http://localhost:11434',
-	openaiServer: 'http://localhost:11434/v1/',
+	openaiServer: 'https://api.openai.com/v1',
 	openaiApiKey: null,
 	models: [],
 	lastUpdateCheck: null,
diff --git a/src/routes/settings/OpenAI.svelte b/src/routes/settings/OpenAI.svelte
index 278e1f6c..6ded48bf 100644
--- a/src/routes/settings/OpenAI.svelte
+++ b/src/routes/settings/OpenAI.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { MonitorUp } from 'lucide-svelte';
 
 	import LL from '$i18n/i18n-svelte';
 	import { OpenAIStrategy } from '$lib/chat/openai';
@@ -11,18 +11,17 @@
 	import P from '$lib/components/P.svelte';
 	import { settingsStore } from '$lib/localStorage';
 
-	let openaiURL: URL | null = null;
-
 	const DEFAULT_OPENAI_SERVER = 'https://api.openai.com/v1';
 
 	let openai = new OpenAIStrategy();
 	let openaiServer = $settingsStore.openaiServer || DEFAULT_OPENAI_SERVER;
 	let openaiApiKey = $settingsStore.openaiApiKey || '';
-	let openaiServerStatus: 'connected' | 'disconnected' = 'disconnected';
+	let openaiServerStatus: 'connected' | 'disconnected' | 'connecting' = 'disconnected';
 
 	$: settingsStore.update((settings) => ({ ...settings, openaiServer, openaiApiKey }));
 
 	async function getModelsList(): Promise<void> {
+		openaiServerStatus = 'connecting';
 		try {
 			await openai.getModels();
 			openaiServerStatus = 'connected';
@@ -31,17 +30,10 @@
 		}
 	}
 
-	onMount(async () => {
-		// Get the current URL and set the default server
-		openaiURL = new URL(window.location.href);
-		if (openaiURL.port) {
-			openaiURL = new URL(
-				`${openaiURL.protocol}//${openaiURL.hostname}${openaiURL.pathname}${openaiURL.search}${openaiURL.hash}`
-			);
-		}
-
+	async function updateOpenAIConfig() {
+		openai.config({ server: openaiServer, apiKey: openaiApiKey });
 		await getModelsList();
-	});
+	}
 </script>
 
 <Fieldset>
@@ -51,11 +43,12 @@
 		label={$LL.baseUrl()}
 		placeholder={DEFAULT_OPENAI_SERVER}
 		bind:value={openaiServer}
-		on:keyup={getModelsList}
 	>
 		<svelte:fragment slot="status">
 			{#if openaiServerStatus === 'disconnected'}
 				<Badge variant="warning">{$LL.disconnected()}</Badge>
+			{:else if openaiServerStatus === 'connecting'}
+				<Badge variant="warning">{$LL.connecting()}</Badge>
 			{:else}
 				<Badge variant="positive">{$LL.connected()}</Badge>
 			{/if}
@@ -69,6 +62,18 @@
 		placeholder={$LL.noApiKey()}
 		type="password"
 	>
+		<svelte:fragment slot="nav">
+			<Button
+				aria-label="Connect"
+				class="h-full text-muted"
+				isLoading={openaiServerStatus === 'connecting'}
+				disabled={openaiServerStatus === 'connecting' || !openaiServer || !openaiApiKey}
+				on:click={updateOpenAIConfig}
+			>
+				<MonitorUp class="base-icon" />
+			</Button>
+		</svelte:fragment>
+
 		<svelte:fragment slot="help">
 			{#if openaiApiKey === 'ollama' || openaiServerStatus === 'disconnected'}
 				<FieldHelp>