OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-23 02:16:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refac: connections

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-02-11 23:21:09 -08:00
parent 689317c5b5
commit 862b5a947a
3 changed files with 110 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/lib/apis/openai/index.ts
View File

@ -241,33 +241,62 @@ export const getOpenAIModels = async (token: string, urlIdx?: number) => {
export const verifyOpenAIConnection = async ( export const verifyOpenAIConnection = async (
token: string = '', token: string = '',
url: string = 'https://api.openai.com/v1', url: string = 'https://api.openai.com/v1',
key: string = '' key: string = '',
direct: boolean = false
) => { ) => {
if (!url) {
throw 'OpenAI: URL is required';
}
let error = null; let error = null;
let res = null;
const res = await fetch(`${OPENAI_API_BASE_URL}/verify`, { if (direct) {
method: 'POST', res = await fetch(`${url}/models`, {
headers: { method: 'GET',
Accept: 'application/json', headers: {
Authorization: `Bearer ${token}`, Accept: 'application/json',
'Content-Type': 'application/json' Authorization: `Bearer ${key}`,
}, 'Content-Type': 'application/json'
body: JSON.stringify({ }
url,
key
}) })
}) .then(async (res) => {
.then(async (res) => { if (!res.ok) throw await res.json();
if (!res.ok) throw await res.json(); return res.json();
return res.json(); })
}) .catch((err) => {
.catch((err) => { error = `OpenAI: ${err?.error?.message ?? 'Network Problem'}`;
error = `OpenAI: ${err?.error?.message ?? 'Network Problem'}`; return [];
return []; });
});
if (error) { if (error) {
throw error; throw error;
}
} else {
res = await fetch(`${OPENAI_API_BASE_URL}/verify`, {
method: 'POST',
headers: {
Accept: 'application/json',
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
url,
key
})
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
error = `OpenAI: ${err?.error?.message ?? 'Network Problem'}`;
return [];
});
if (error) {
throw error;
}
} }
return res; return res;

10
src/lib/components/AddConnectionModal.svelte
View File

@ -20,7 +20,9 @@
export let show = false; export let show = false;
export let edit = false; export let edit = false;
export let ollama = false; export let ollama = false;
export let direct = false;
export let connection = null; export let connection = null;
@ -46,9 +48,11 @@
}; };
const verifyOpenAIHandler = async () => { const verifyOpenAIHandler = async () => {
const res = await verifyOpenAIConnection(localStorage.token, url, key).catch((error) => { const res = await verifyOpenAIConnection(localStorage.token, url, key, direct).catch(
toast.error(`${error}`); (error) => {
}); toast.error(`${error}`);
}
);
if (res) { if (res) {
toast.success($i18n.t('Server connection verified')); toast.success($i18n.t('Server connection verified'));

111
src/lib/components/chat/Settings/Connections.svelte
View File

@ -14,6 +14,8 @@
import Plus from '$lib/components/icons/Plus.svelte'; import Plus from '$lib/components/icons/Plus.svelte';
import Connection from './Connections/Connection.svelte'; import Connection from './Connections/Connection.svelte';
import AddConnectionModal from '$lib/components/AddConnectionModal.svelte';
const getModels = async () => { const getModels = async () => {
const models = await _getModels(localStorage.token); const models = await _getModels(localStorage.token);
return models; return models;
@ -25,82 +27,73 @@
onMount(async () => {}); onMount(async () => {});
const addConnectionHandler = async (connection) => {};
const submitHandler = async () => {}; const submitHandler = async () => {};
const updateHandler = async () => {}; const updateHandler = async () => {};
</script> </script>
<!-- <AddConnectionModal <AddConnectionModal direct bind:show={showConnectionModal} onSubmit={addConnectionHandler} />
bind:show={showConnectionModal}
onSubmit={addConnectionHandler}
/> -->
<form class="flex flex-col h-full justify-between text-sm" on:submit|preventDefault={submitHandler}> <form class="flex flex-col h-full justify-between text-sm" on:submit|preventDefault={submitHandler}>
<div class=" overflow-y-scroll scrollbar-hidden h-full"> <div class=" overflow-y-scroll scrollbar-hidden h-full">
<div class="my-2"> <div class="my-2">
<div class="space-y-2 pr-1.5"> <div class="pr-1.5">
<div class="flex justify-between items-center text-sm"> <div class="">
<div class=" font-medium">{$i18n.t('Direct Connections')}</div> <div class="flex justify-between items-center">
<div class="font-medium">{$i18n.t('Manage Direct Connections')}</div>
<Tooltip content={$i18n.t(`Add Connection`)}>
<button
class="px-1"
on:click={() => {
showConnectionModal = true;
}}
type="button"
>
<Plus />
</button>
</Tooltip>
</div>
<div class="flex flex-col gap-1.5 mt-1.5">
{#each config?.OPENAI_API_BASE_URLS ?? [] as url, idx}
<Connection
bind:url
bind:key={config.OPENAI_API_KEYS[idx]}
bind:config={config.OPENAI_API_CONFIGS[idx]}
onSubmit={() => {
updateHandler();
}}
onDelete={() => {
config.OPENAI_API_BASE_URLS = config.OPENAI_API_BASE_URLS.filter(
(url, urlIdx) => idx !== urlIdx
);
config.OPENAI_API_KEYS = config.OPENAI_API_KEYS.filter(
(key, keyIdx) => idx !== keyIdx
);
let newConfig = {};
config.OPENAI_API_BASE_URLS.forEach((url, newIdx) => {
newConfig[newIdx] =
config.OPENAI_API_CONFIGS[newIdx < idx ? newIdx : newIdx + 1];
});
config.OPENAI_API_CONFIGS = newConfig;
}}
/>
{/each}
</div>
</div> </div>
<hr class=" border-gray-50 dark:border-gray-850" />
<div class="mt-1.5"> <div class="mt-1.5">
<div class="text-xs text-gray-500"> <div class="text-xs text-gray-500">
{$i18n.t('Connect to your own OpenAI compatible API endpoints.')} {$i18n.t('Connect to your own OpenAI compatible API endpoints.')}
</div> </div>
</div> </div>
{#if false}
<hr class=" border-gray-50 dark:border-gray-850" />
<div class="">
<div class="flex justify-between items-center">
<div class="font-medium">{$i18n.t('Manage Connections')}</div>
<Tooltip content={$i18n.t(`Add Connection`)}>
<button
class="px-1"
on:click={() => {
showConnectionModal = true;
}}
type="button"
>
<Plus />
</button>
</Tooltip>
</div>
<div class="flex flex-col gap-1.5 mt-1.5">
{#each config?.OPENAI_API_BASE_URLS ?? [] as url, idx}
<Connection
bind:url
bind:key={config.OPENAI_API_KEYS[idx]}
bind:config={config.OPENAI_API_CONFIGS[idx]}
onSubmit={() => {
updateHandler();
}}
onDelete={() => {
config.OPENAI_API_BASE_URLS = config.OPENAI_API_BASE_URLS.filter(
(url, urlIdx) => idx !== urlIdx
);
config.OPENAI_API_KEYS = config.OPENAI_API_KEYS.filter(
(key, keyIdx) => idx !== keyIdx
);
let newConfig = {};
config.OPENAI_API_BASE_URLS.forEach((url, newIdx) => {
newConfig[newIdx] =
config.OPENAI_API_CONFIGS[newIdx < idx ? newIdx : newIdx + 1];
});
config.OPENAI_API_CONFIGS = newConfig;
}}
/>
{/each}
</div>
</div>
{/if}
</div> </div>
</div> </div>
<hr class=" border-gray-50 dark:border-gray-850" />
</div> </div>
<div class="flex justify-end pt-3 text-sm font-medium"> <div class="flex justify-end pt-3 text-sm font-medium">