mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-14 21:35:19 +00:00
refac: styling
This commit is contained in:
Timothy Jaeryang Baek
parent
ffd7b004f4
commit
53a08eb00d
3 changed files with 149 additions and 140 deletions
|
|
@ -8,17 +8,26 @@ import { toast } from 'svelte-sonner';
|
||||||
export const getModels = async (
|
export const getModels = async (
|
||||||
token: string = '',
|
token: string = '',
|
||||||
connections: object | null = null,
|
connections: object | null = null,
|
||||||
base: boolean = false
|
base: boolean = false,
|
||||||
|
refresh: boolean = false
|
||||||
) => {
|
) => {
|
||||||
|
const searchParams = new URLSearchParams();
|
||||||
|
if (refresh) {
|
||||||
|
searchParams.append('refresh', 'true');
|
||||||
|
}
|
||||||
|
|
||||||
let error = null;
|
let error = null;
|
||||||
const res = await fetch(`${WEBUI_BASE_URL}/api/models${base ? '/base' : ''}`, {
|
const res = await fetch(
|
||||||
method: 'GET',
|
`${WEBUI_BASE_URL}/api/models${base ? '/base' : ''}?${searchParams.toString()}`,
|
||||||
headers: {
|
{
|
||||||
Accept: 'application/json',
|
method: 'GET',
|
||||||
'Content-Type': 'application/json',
|
headers: {
|
||||||
...(token && { authorization: `Bearer ${token}` })
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...(token && { authorization: `Bearer ${token}` })
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
)
|
||||||
.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();
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,9 @@
|
||||||
const getModels = async () => {
|
const getModels = async () => {
|
||||||
const models = await _getModels(
|
const models = await _getModels(
|
||||||
localStorage.token,
|
localStorage.token,
|
||||||
$config?.features?.enable_direct_connections && ($settings?.directConnections ?? null)
|
$config?.features?.enable_direct_connections && ($settings?.directConnections ?? null),
|
||||||
|
false,
|
||||||
|
true
|
||||||
);
|
);
|
||||||
return models;
|
return models;
|
||||||
};
|
};
|
||||||
|
|
@ -216,35 +218,102 @@
|
||||||
<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">
|
||||||
{#if ENABLE_OPENAI_API !== null && ENABLE_OLLAMA_API !== null && directConnectionsConfig !== null}
|
{#if ENABLE_OPENAI_API !== null && ENABLE_OLLAMA_API !== null && directConnectionsConfig !== null}
|
||||||
<div class="my-2">
|
<div class="mb-3.5">
|
||||||
<div class="mt-2 space-y-2 pr-1.5">
|
<div class=" mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
|
||||||
<div class="flex justify-between items-center text-sm">
|
|
||||||
<div class=" font-medium">{$i18n.t('OpenAI API')}</div>
|
|
||||||
|
|
||||||
<div class="flex items-center">
|
<hr class=" border-gray-100 dark:border-gray-850 my-2" />
|
||||||
<div class="">
|
|
||||||
<Switch
|
<div class="my-2">
|
||||||
bind:state={ENABLE_OPENAI_API}
|
<div class="mt-2 space-y-2">
|
||||||
on:change={async () => {
|
<div class="flex justify-between items-center text-sm">
|
||||||
updateOpenAIHandler();
|
<div class=" font-medium">{$i18n.t('OpenAI API')}</div>
|
||||||
}}
|
|
||||||
/>
|
<div class="flex items-center">
|
||||||
|
<div class="">
|
||||||
|
<Switch
|
||||||
|
bind:state={ENABLE_OPENAI_API}
|
||||||
|
on:change={async () => {
|
||||||
|
updateOpenAIHandler();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{#if ENABLE_OPENAI_API}
|
||||||
|
<div class="">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<div class="font-medium text-xs">{$i18n.t('Manage OpenAI API Connections')}</div>
|
||||||
|
|
||||||
|
<Tooltip content={$i18n.t(`Add Connection`)}>
|
||||||
|
<button
|
||||||
|
class="px-1"
|
||||||
|
on:click={() => {
|
||||||
|
showAddOpenAIConnectionModal = true;
|
||||||
|
}}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<Plus />
|
||||||
|
</button>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-1.5 mt-1.5">
|
||||||
|
{#each OPENAI_API_BASE_URLS as url, idx}
|
||||||
|
<OpenAIConnection
|
||||||
|
pipeline={pipelineUrls[url] ? true : false}
|
||||||
|
bind:url
|
||||||
|
bind:key={OPENAI_API_KEYS[idx]}
|
||||||
|
bind:config={OPENAI_API_CONFIGS[idx]}
|
||||||
|
onSubmit={() => {
|
||||||
|
updateOpenAIHandler();
|
||||||
|
}}
|
||||||
|
onDelete={() => {
|
||||||
|
OPENAI_API_BASE_URLS = OPENAI_API_BASE_URLS.filter(
|
||||||
|
(url, urlIdx) => idx !== urlIdx
|
||||||
|
);
|
||||||
|
OPENAI_API_KEYS = OPENAI_API_KEYS.filter((key, keyIdx) => idx !== keyIdx);
|
||||||
|
|
||||||
|
let newConfig = {};
|
||||||
|
OPENAI_API_BASE_URLS.forEach((url, newIdx) => {
|
||||||
|
newConfig[newIdx] =
|
||||||
|
OPENAI_API_CONFIGS[newIdx < idx ? newIdx : newIdx + 1];
|
||||||
|
});
|
||||||
|
OPENAI_API_CONFIGS = newConfig;
|
||||||
|
updateOpenAIHandler();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=" my-2">
|
||||||
|
<div class="flex justify-between items-center text-sm mb-2">
|
||||||
|
<div class=" font-medium">{$i18n.t('Ollama API')}</div>
|
||||||
|
|
||||||
|
<div class="mt-1">
|
||||||
|
<Switch
|
||||||
|
bind:state={ENABLE_OLLAMA_API}
|
||||||
|
on:change={async () => {
|
||||||
|
updateOllamaHandler();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if ENABLE_OPENAI_API}
|
{#if ENABLE_OLLAMA_API}
|
||||||
<hr class=" border-gray-100 dark:border-gray-850" />
|
|
||||||
|
|
||||||
<div class="">
|
<div class="">
|
||||||
<div class="flex justify-between items-center">
|
<div class="flex justify-between items-center">
|
||||||
<div class="font-medium">{$i18n.t('Manage OpenAI API Connections')}</div>
|
<div class="font-medium text-xs">{$i18n.t('Manage Ollama API Connections')}</div>
|
||||||
|
|
||||||
<Tooltip content={$i18n.t(`Add Connection`)}>
|
<Tooltip content={$i18n.t(`Add Connection`)}>
|
||||||
<button
|
<button
|
||||||
class="px-1"
|
class="px-1"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
showAddOpenAIConnectionModal = true;
|
showAddOllamaConnectionModal = true;
|
||||||
}}
|
}}
|
||||||
type="button"
|
type="button"
|
||||||
>
|
>
|
||||||
|
|
@ -253,131 +322,62 @@
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col gap-1.5 mt-1.5">
|
<div class="flex w-full gap-1.5">
|
||||||
{#each OPENAI_API_BASE_URLS as url, idx}
|
<div class="flex-1 flex flex-col gap-1.5 mt-1.5">
|
||||||
<OpenAIConnection
|
{#each OLLAMA_BASE_URLS as url, idx}
|
||||||
pipeline={pipelineUrls[url] ? true : false}
|
<OllamaConnection
|
||||||
bind:url
|
bind:url
|
||||||
bind:key={OPENAI_API_KEYS[idx]}
|
bind:config={OLLAMA_API_CONFIGS[idx]}
|
||||||
bind:config={OPENAI_API_CONFIGS[idx]}
|
{idx}
|
||||||
onSubmit={() => {
|
onSubmit={() => {
|
||||||
updateOpenAIHandler();
|
updateOllamaHandler();
|
||||||
}}
|
}}
|
||||||
onDelete={() => {
|
onDelete={() => {
|
||||||
OPENAI_API_BASE_URLS = OPENAI_API_BASE_URLS.filter(
|
OLLAMA_BASE_URLS = OLLAMA_BASE_URLS.filter((url, urlIdx) => idx !== urlIdx);
|
||||||
(url, urlIdx) => idx !== urlIdx
|
|
||||||
);
|
|
||||||
OPENAI_API_KEYS = OPENAI_API_KEYS.filter((key, keyIdx) => idx !== keyIdx);
|
|
||||||
|
|
||||||
let newConfig = {};
|
let newConfig = {};
|
||||||
OPENAI_API_BASE_URLS.forEach((url, newIdx) => {
|
OLLAMA_BASE_URLS.forEach((url, newIdx) => {
|
||||||
newConfig[newIdx] = OPENAI_API_CONFIGS[newIdx < idx ? newIdx : newIdx + 1];
|
newConfig[newIdx] =
|
||||||
});
|
OLLAMA_API_CONFIGS[newIdx < idx ? newIdx : newIdx + 1];
|
||||||
OPENAI_API_CONFIGS = newConfig;
|
});
|
||||||
updateOpenAIHandler();
|
OLLAMA_API_CONFIGS = newConfig;
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
|
||||||
|
{$i18n.t('Trouble accessing Ollama?')}
|
||||||
|
<a
|
||||||
|
class=" text-gray-300 font-medium underline"
|
||||||
|
href="https://github.com/open-webui/open-webui#troubleshooting"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{$i18n.t('Click here for help.')}
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class=" border-gray-100 dark:border-gray-850" />
|
<div class="my-2">
|
||||||
|
<div class="flex justify-between items-center text-sm">
|
||||||
|
<div class=" font-medium">{$i18n.t('Direct Connections')}</div>
|
||||||
|
|
||||||
<div class="pr-1.5 my-2">
|
<div class="flex items-center">
|
||||||
<div class="flex justify-between items-center text-sm mb-2">
|
<div class="">
|
||||||
<div class=" font-medium">{$i18n.t('Ollama API')}</div>
|
<Switch
|
||||||
|
bind:state={directConnectionsConfig.ENABLE_DIRECT_CONNECTIONS}
|
||||||
<div class="mt-1">
|
on:change={async () => {
|
||||||
<Switch
|
updateDirectConnectionsHandler();
|
||||||
bind:state={ENABLE_OLLAMA_API}
|
|
||||||
on:change={async () => {
|
|
||||||
updateOllamaHandler();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if ENABLE_OLLAMA_API}
|
|
||||||
<hr class=" border-gray-100 dark:border-gray-850 my-2" />
|
|
||||||
|
|
||||||
<div class="">
|
|
||||||
<div class="flex justify-between items-center">
|
|
||||||
<div class="font-medium">{$i18n.t('Manage Ollama API Connections')}</div>
|
|
||||||
|
|
||||||
<Tooltip content={$i18n.t(`Add Connection`)}>
|
|
||||||
<button
|
|
||||||
class="px-1"
|
|
||||||
on:click={() => {
|
|
||||||
showAddOllamaConnectionModal = true;
|
|
||||||
}}
|
}}
|
||||||
type="button"
|
/>
|
||||||
>
|
|
||||||
<Plus />
|
|
||||||
</button>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex w-full gap-1.5">
|
|
||||||
<div class="flex-1 flex flex-col gap-1.5 mt-1.5">
|
|
||||||
{#each OLLAMA_BASE_URLS as url, idx}
|
|
||||||
<OllamaConnection
|
|
||||||
bind:url
|
|
||||||
bind:config={OLLAMA_API_CONFIGS[idx]}
|
|
||||||
{idx}
|
|
||||||
onSubmit={() => {
|
|
||||||
updateOllamaHandler();
|
|
||||||
}}
|
|
||||||
onDelete={() => {
|
|
||||||
OLLAMA_BASE_URLS = OLLAMA_BASE_URLS.filter((url, urlIdx) => idx !== urlIdx);
|
|
||||||
|
|
||||||
let newConfig = {};
|
|
||||||
OLLAMA_BASE_URLS.forEach((url, newIdx) => {
|
|
||||||
newConfig[newIdx] = OLLAMA_API_CONFIGS[newIdx < idx ? newIdx : newIdx + 1];
|
|
||||||
});
|
|
||||||
OLLAMA_API_CONFIGS = newConfig;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
|
|
||||||
{$i18n.t('Trouble accessing Ollama?')}
|
|
||||||
<a
|
|
||||||
class=" text-gray-300 font-medium underline"
|
|
||||||
href="https://github.com/open-webui/open-webui#troubleshooting"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{$i18n.t('Click here for help.')}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class=" border-gray-100 dark:border-gray-850" />
|
<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
|
||||||
|
|
||||||
<div class="pr-1.5 my-2">
|
|
||||||
<div class="flex justify-between items-center text-sm">
|
|
||||||
<div class=" font-medium">{$i18n.t('Direct Connections')}</div>
|
|
||||||
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="">
|
|
||||||
<Switch
|
|
||||||
bind:state={directConnectionsConfig.ENABLE_DIRECT_CONNECTIONS}
|
|
||||||
on:change={async () => {
|
|
||||||
updateDirectConnectionsHandler();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-1.5">
|
|
||||||
<div class="text-xs text-gray-500">
|
|
||||||
{$i18n.t(
|
{$i18n.t(
|
||||||
'Direct Connections allow users to connect to their own OpenAI compatible API endpoints.'
|
'Direct Connections allow users to connect to their own OpenAI compatible API endpoints.'
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -378,6 +378,6 @@
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
<div class="w-full h-full flex justify-center items-center">
|
<div class="w-full h-full flex justify-center items-center">
|
||||||
<Spinner />
|
<Spinner className="size-5" />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue