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

feat: allow model config via config.json

Browse Source
This commit is contained in:
Jun Siang Cheah
2024-05-09 20:25:30 +08:00
parent df3675aaf7
commit e76a444ed9
21 changed files with 364 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/lib/apis/litellm/index.ts
View File

@@ -33,7 +33,8 @@ export const getLiteLLMModels = async (token: string = '') => {
id: model.id,
name: model.name ?? model.id,
external: true,
source: 'LiteLLM'
source: 'LiteLLM',
custom_info: model.custom_info ?? {}
}))
.sort((a, b) => {
return a.name.localeCompare(b.name);

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

@@ -163,7 +163,12 @@ export const getOpenAIModels = async (token: string = '') => {
return models
? models
.map((model) => ({ id: model.id, name: model.name ?? model.id, external: true }))
.map((model) => ({
id: model.id,
name: model.name ?? model.id,
external: true,
custom_info: model.custom_info ?? {}
}))
.sort((a, b) => {
return a.name.localeCompare(b.name);
})

2
src/lib/components/admin/Settings/Users.svelte
View File

@@ -125,7 +125,7 @@
<option value="" disabled selected>{$i18n.t('Select a model')}</option>
{#each $models.filter((model) => model.id) as model}
<option value={model.id} class="bg-gray-100 dark:bg-gray-700"
>{model.name}</option
>{model.custom_info?.displayName ?? model.name}</option
>
{/each}
</select>

26
src/lib/components/chat/MessageInput.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { toast } from 'svelte-sonner';
import { onMount, tick, getContext } from 'svelte';
import { modelfiles, settings, showSidebar } from '$lib/stores';
import { type Model, modelfiles, settings, showSidebar } from '$lib/stores';
import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
import {
@@ -27,7 +27,7 @@
export let stopResponse: Function;
export let autoScroll = true;
export let selectedModel = '';
export let selectedModel: Model | undefined;
let chatTextAreaElement: HTMLTextAreaElement;
let filesInputElement;
@@ -359,6 +359,12 @@
inputFiles.forEach((file) => {
console.log(file, file.name.split('.').at(-1));
if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
if (selectedModel !== undefined) {
if (!(selectedModel.custom_info?.vision_capable ?? true)) {
toast.error($i18n.t('Selected model does not support image inputs.'));
return;
}
}
let reader = new FileReader();
reader.onload = (event) => {
files = [
@@ -500,7 +506,7 @@
}}
/>
{#if selectedModel !== ''}
{#if selectedModel !== undefined}
<div
class="px-3 py-2.5 text-left w-full flex justify-between items-center absolute bottom-0 left-0 right-0 bg-gradient-to-t from-50% from-white dark:from-gray-900"
>
@@ -515,14 +521,16 @@
: `${WEBUI_BASE_URL}/static/favicon.png`)}
/>
<div>
Talking to <span class=" font-medium">{selectedModel.name} </span>
Talking to <span class=" font-medium"
>{selectedModel.custom_info?.displayName ?? selectedModel.name}
</span>
</div>
</div>
<div>
<button
class="flex items-center"
on:click={() => {
selectedModel = '';
selectedModel = undefined;
}}
>
<XMark />
@@ -548,6 +556,12 @@
const _inputFiles = Array.from(inputFiles);
_inputFiles.forEach((file) => {
if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) {
if (selectedModel !== undefined) {
if (!(selectedModel.custom_info?.vision_capable ?? true)) {
toast.error($i18n.t('Selected model does not support image inputs.'));
return;
}
}
let reader = new FileReader();
reader.onload = (event) => {
files = [
@@ -880,7 +894,7 @@
if (e.key === 'Escape') {
console.log('Escape');
selectedModel = '';
selectedModel = undefined;
}
}}
rows="1"

10
src/lib/components/chat/MessageInput/Models.svelte
View File

@@ -21,8 +21,12 @@
let filteredModels = [];
$: filteredModels = $models
.filter((p) => p.name.includes(prompt.split(' ')?.at(0)?.substring(1) ?? ''))
.sort((a, b) => a.name.localeCompare(b.name));
.filter((p) =>
(p.custom_info?.displayName ?? p.name).includes(prompt.split(' ')?.at(0)?.substring(1) ?? '')
)
.sort((a, b) =>
(a.custom_info?.displayName ?? a.name).localeCompare(b.custom_info?.displayName ?? b.name)
);
$: if (prompt) {
selectedIdx = 0;
@@ -156,7 +160,7 @@
on:focus={() => {}}
>
<div class=" font-medium text-black line-clamp-1">
{model.name}
{model.custom_info?.displayName ?? model.name}
</div>
<!-- <div class=" text-xs text-gray-600 line-clamp-1">

2
src/lib/components/chat/Messages/ResponseMessage.svelte
View File

@@ -343,7 +343,7 @@
{#if message.model in modelfiles}
{modelfiles[message.model]?.title}
{:else}
{message.model ? ` ${message.model}` : ''}
{message.modelName ? ` ${message.modelName}` : message.model ? ` ${message.model}` : ''}
{/if}
{#if message.timestamp}

2
src/lib/components/chat/ModelSelector.svelte
View File

@@ -49,7 +49,7 @@
.filter((model) => model.name !== 'hr')
.map((model) => ({
value: model.id,
label: model.name,
label: model.custom_info?.displayName ?? model.name,
info: model
}))}
bind:value={selectedModel}

10
src/lib/components/chat/ModelSelector/Selector.svelte
View File

@@ -247,7 +247,11 @@
<!-- {JSON.stringify(item.info)} -->
{#if item.info.external}
<Tooltip content={item.info?.source ?? 'External'}>
<Tooltip
content={`${item.info?.source ?? 'External'}${
item.info.custom_info?.description ? '<br>' : ''
}${item.info.custom_info?.description?.replaceAll('\n', '<br>') ?? ''}`}
>
<div class=" mr-2">
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -274,7 +278,9 @@
item.info?.details?.quantization_level
? item.info?.details?.quantization_level + ' '
: ''
}${item.info.size ? `(${(item.info.size / 1024 ** 3).toFixed(1)}GB)` : ''}`}
}${item.info.size ? `(${(item.info.size / 1024 ** 3).toFixed(1)}GB)` : ''}${
item.info.custom_info?.description ? '<br>' : ''
}${item.info.custom_info?.description?.replaceAll('\n', '<br>') ?? ''}`}
>
<div class=" mr-2">
<svg

7
src/lib/components/chat/Settings/Interface.svelte
View File

@@ -244,7 +244,10 @@
{#each $models as model}
{#if model.size != null}
<option value={model.name} class="bg-gray-100 dark:bg-gray-700">
{model.name + ' (' + (model.size / 1024 ** 3).toFixed(1) + ' GB)'}
{(model.custom_info?.displayName ?? model.name) +
' (' +
(model.size / 1024 ** 3).toFixed(1) +
' GB)'}
</option>
{/if}
{/each}
@@ -262,7 +265,7 @@
{#each $models as model}
{#if model.name !== 'hr'}
<option value={model.name} class="bg-gray-100 dark:bg-gray-700">
{model.name}
{model.custom_info?.displayName ?? model.name}
</option>
{/if}
{/each}

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

@@ -13,7 +13,7 @@
uploadModel
} from '$lib/apis/ollama';
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
import { WEBUI_NAME, models, MODEL_DOWNLOAD_POOL, user } from '$lib/stores';
import { WEBUI_NAME, models, MODEL_DOWNLOAD_POOL, user, config } from '$lib/stores';
import { splitStream } from '$lib/utils';
import { onMount, getContext } from 'svelte';
import { addLiteLLMModel, deleteLiteLLMModel, getLiteLLMModelInfo } from '$lib/apis/litellm';
@@ -67,6 +67,8 @@
let deleteModelTag = '';
let showModelInfo = false;
const updateModelsHandler = async () => {
for (const model of $models.filter(
(m) =>
@@ -587,24 +589,28 @@
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
><style>
>
<style>
.spinner_ajPY {
transform-origin: center;
animation: spinner_AtaB 0.75s infinite linear;
}
@keyframes spinner_AtaB {
100% {
transform: rotate(360deg);
}
}
</style><path
</style>
<path
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
opacity=".25"
/><path
/>
<path
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
class="spinner_ajPY"
/></svg
>
/>
</svg>
</div>
{:else}
<svg
@@ -705,7 +711,10 @@
{/if}
{#each $models.filter((m) => m.size != null && (selectedOllamaUrlIdx === null ? true : (m?.urls ?? []).includes(selectedOllamaUrlIdx))) as model}
<option value={model.name} class="bg-gray-100 dark:bg-gray-700"
>{model.name + ' (' + (model.size / 1024 ** 3).toFixed(1) + ' GB)'}</option
>{(model.custom_info?.displayName ?? model.name) +
' (' +
(model.size / 1024 ** 3).toFixed(1) +
' GB)'}</option
>
{/each}
</select>
@@ -833,24 +842,28 @@
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
><style>
>
<style>
.spinner_ajPY {
transform-origin: center;
animation: spinner_AtaB 0.75s infinite linear;
}
@keyframes spinner_AtaB {
100% {
transform: rotate(360deg);
}
}
</style><path
</style>
<path
d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
opacity=".25"
/><path
/>
<path
d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
class="spinner_ajPY"
/></svg
>
/>
</svg>
</div>
{:else}
<svg
@@ -932,6 +945,7 @@
<hr class=" dark:border-gray-700 my-2" />
{/if}
<!--TODO: Hide LiteLLM options when ENABLE_LITELLM=false-->
<div class=" space-y-3">
<div class="mt-2 space-y-3 pr-1.5">
<div>
@@ -1126,6 +1140,79 @@
{/if}
</div>
</div>
<hr class=" dark:border-gray-700 my-2" />
</div>
<!-- <div class=" space-y-3">-->
<!-- <div class="mt-2 space-y-3 pr-1.5">-->
<!-- <div>-->
<!-- <div class="mb-2">-->
<!-- <div class="flex justify-between items-center text-xs">-->
<!-- <div class=" text-sm font-medium">{$i18n.t('Manage Model Information')}</div>-->
<!-- <button-->
<!-- class=" text-xs font-medium text-gray-500"-->
<!-- type="button"-->
<!-- on:click={() => {-->
<!-- showModelInfo = !showModelInfo;-->
<!-- }}>{showModelInfo ? $i18n.t('Hide') : $i18n.t('Show')}</button-->
<!-- >-->
<!-- </div>-->
<!-- </div>-->
<!-- {#if showModelInfo}-->
<!-- <div>-->
<!-- <div class="flex justify-between items-center text-xs">-->
<!-- <div class=" text-sm font-medium">{$i18n.t('Current Models')}</div>-->
<!-- </div>-->
<!-- <div class="flex gap-2">-->
<!-- <div class="flex-1 pb-1">-->
<!-- <select-->
<!-- class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"-->
<!-- bind:value={selectedOllamaUrlIdx}-->
<!-- placeholder={$i18n.t('Select an existing model')}-->
<!-- >-->
<!-- {#each $config. as url, idx}-->
<!-- <option value={idx} class="bg-gray-100 dark:bg-gray-700">{url}</option>-->
<!-- {/each}-->
<!-- </select>-->
<!-- </div>-->
<!-- <div>-->
<!-- <div class="flex w-full justify-end">-->
<!-- <Tooltip content="Update All Models" placement="top">-->
<!-- <button-->
<!-- class="p-2.5 flex gap-2 items-center bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"-->
<!-- on:click={() => {-->
<!-- updateModelsHandler();-->
<!-- }}-->
<!-- >-->
<!-- <svg-->
<!-- xmlns="http://www.w3.org/2000/svg"-->
<!-- viewBox="0 0 16 16"-->
<!-- fill="currentColor"-->
<!-- class="w-4 h-4"-->
<!-- >-->
<!-- <path-->
<!-- d="M7 1a.75.75 0 0 1 .75.75V6h-1.5V1.75A.75.75 0 0 1 7 1ZM6.25 6v2.94L5.03 7.72a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l2.5-2.5a.75.75 0 1 0-1.06-1.06L7.75 8.94V6H10a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2.25Z"-->
<!-- />-->
<!-- <path-->
<!-- d="M4.268 14A2 2 0 0 0 6 15h6a2 2 0 0 0 2-2v-3a2 2 0 0 0-1-1.732V11a3 3 0 0 1-3 3H4.268Z"-->
<!-- />-->
<!-- </svg>-->
<!-- </button>-->
<!-- </Tooltip>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- {#if updateModelId}-->
<!-- Updating "{updateModelId}" {updateProgress ? `(${updateProgress}%)` : ''}-->
<!-- {/if}-->
<!-- </div>-->
<!-- {/if}-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>

5
src/lib/components/documents/Settings/General.svelte
View File

@@ -321,7 +321,10 @@
{/if}
{#each $models.filter((m) => m.id && !m.external) as model}
<option value={model.name} class="bg-gray-100 dark:bg-gray-700"
>{model.name + ' (' + (model.size / 1024 ** 3).toFixed(1) + ' GB)'}</option
>{(model.custom_info?.displayName ?? model.name) +
' (' +
(model.size / 1024 ** 3).toFixed(1) +
' GB)'}</option
>
{/each}
</select>

39
src/lib/stores/index.ts
View File

@@ -39,27 +39,34 @@ export const showSidebar = writable(false);
export const showSettings = writable(false);
export const showChangelog = writable(false);
type Model = OpenAIModel | OllamaModel;
export type Model = OpenAIModel | OllamaModel;
type OpenAIModel = {
id: string;
name: string;
external: boolean;
source?: string;
type ModelCustomInfo = {
name?: string;
displayName?: string;
description?: string;
vision_capable?: boolean;
};
type OllamaModel = {
type BaseModel = {
id: string;
name: string;
custom_info?: ModelCustomInfo;
};
// Ollama specific fields
interface OpenAIModel extends BaseModel {
external: boolean;
source?: string;
}
interface OllamaModel extends BaseModel {
details: OllamaModelDetails;
size: number;
description: string;
model: string;
modified_at: string;
digest: string;
};
}
type OllamaModelDetails = {
parent_model: string;
@@ -129,6 +136,20 @@ type Config = {
default_models?: string[];
default_prompt_suggestions?: PromptSuggestion[];
trusted_header_auth?: boolean;
model_config?: GlobalModelConfig;
};
type GlobalModelConfig = {
ollama?: ModelConfig[];
litellm?: ModelConfig[];
openai?: ModelConfig[];
};
type ModelConfig = {
id?: string;
name?: string;
description?: string;
vision_capable?: boolean;
};
type PromptSuggestion = {