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: modelfiles to models

Browse Source
This commit is contained in:
Timothy J. Baek
2024-05-24 00:26:00 -07:00
parent 17e4be49c0
commit 4d57e08b38
18 changed files with 257 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/lib/apis/modelfiles/index.ts → src/lib/apis/models/index.ts
View File

@@ -1,18 +1,16 @@
import { WEBUI_API_BASE_URL } from '$lib/constants';
export const createNewModelfile = async (token: string, modelfile: object) => {
export const addNewModel = async (token: string, model: object) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/modelfiles/create`, {
const res = await fetch(`${WEBUI_API_BASE_URL}/models/add`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
},
body: JSON.stringify({
modelfile: modelfile
})
body: JSON.stringify(model)
})
.then(async (res) => {
if (!res.ok) throw await res.json();
@@ -31,10 +29,10 @@ export const createNewModelfile = async (token: string, modelfile: object) => {
return res;
};
export const getModelfiles = async (token: string = '') => {
export const getModels = async (token: string = '') => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/modelfiles/`, {
const res = await fetch(`${WEBUI_API_BASE_URL}/models/`, {
method: 'GET',
headers: {
Accept: 'application/json',
@@ -59,62 +57,19 @@ export const getModelfiles = async (token: string = '') => {
throw error;
}
return res.map((modelfile) => modelfile.modelfile);
return res;
};
export const getModelfileByTagName = async (token: string, tagName: string) => {
export const getModelById = async (token: string, id: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/modelfiles/`, {
method: 'POST',
const res = await fetch(`${WEBUI_API_BASE_URL}/models/${id}`, {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
},
body: JSON.stringify({
tag_name: tagName
})
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.then((json) => {
return json;
})
.catch((err) => {
error = err;
console.log(err);
return null;
});
if (error) {
throw error;
}
return res.modelfile;
};
export const updateModelfileByTagName = async (
token: string,
tagName: string,
modelfile: object
) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/modelfiles/update`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
},
body: JSON.stringify({
tag_name: tagName,
modelfile: modelfile
})
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
@@ -137,19 +92,49 @@ export const updateModelfileByTagName = async (
return res;
};
export const deleteModelfileByTagName = async (token: string, tagName: string) => {
export const updateModelById = async (token: string, id: string, model: object) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/modelfiles/delete`, {
const res = await fetch(`${WEBUI_API_BASE_URL}/models/${id}/update`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
},
body: JSON.stringify(model)
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.then((json) => {
return json;
})
.catch((err) => {
error = err;
console.log(err);
return null;
});
if (error) {
throw error;
}
return res;
};
export const deleteModelById = async (token: string, id: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/models/${id}/delete`, {
method: 'DELETE',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
},
body: JSON.stringify({
tag_name: tagName
})
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();

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

@@ -14,7 +14,7 @@
import { toast } from 'svelte-sonner';
import {
capitalizeFirstLetter,
getModels,
getAllModels,
sanitizeResponseContent,
splitStream
} from '$lib/utils';
@@ -159,7 +159,7 @@
})
);
models.set(await getModels(localStorage.token));
models.set(await getAllModels(localStorage.token));
} else {
toast.error($i18n.t('Download canceled'));
}

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

@@ -23,7 +23,7 @@
const i18n = getContext('i18n');
export let getModels: Function;
export let getAllModels: Function;
// External
let OLLAMA_BASE_URLS = [''];
@@ -38,7 +38,7 @@
OPENAI_API_BASE_URLS = await updateOpenAIUrls(localStorage.token, OPENAI_API_BASE_URLS);
OPENAI_API_KEYS = await updateOpenAIKeys(localStorage.token, OPENAI_API_KEYS);
await models.set(await getModels());
await models.set(await getAllModels());
};
const updateOllamaUrlsHandler = async () => {
@@ -51,7 +51,7 @@
if (ollamaVersion) {
toast.success($i18n.t('Server connection verified'));
await models.set(await getModels());
await models.set(await getAllModels());
}
};

2
src/lib/components/chat/Settings/General.svelte
View File

@@ -11,7 +11,7 @@
import AdvancedParams from './Advanced/AdvancedParams.svelte';
export let saveSettings: Function;
export let getModels: Function;
export let getAllModels: Function;
// General
let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light', 'oled-dark'];

10
src/lib/components/chat/Settings/Images.svelte
View File

@@ -42,7 +42,7 @@
let imageSize = '';
let steps = 50;
const getModels = async () => {
const getAllModels = async () => {
models = await getImageGenerationModels(localStorage.token).catch((error) => {
toast.error(error);
return null;
@@ -66,7 +66,7 @@
if (res) {
COMFYUI_BASE_URL = res.COMFYUI_BASE_URL;
await getModels();
await getAllModels();
if (models) {
toast.success($i18n.t('Server connection verified'));
@@ -85,7 +85,7 @@
if (res) {
AUTOMATIC1111_BASE_URL = res.AUTOMATIC1111_BASE_URL;
await getModels();
await getAllModels();
if (models) {
toast.success($i18n.t('Server connection verified'));
@@ -112,7 +112,7 @@
if (enableImageGeneration) {
config.set(await getBackendConfig(localStorage.token));
getModels();
getAllModels();
}
};
@@ -141,7 +141,7 @@
steps = await getImageSteps(localStorage.token);
if (enableImageGeneration) {
getModels();
getAllModels();
}
}
});

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

@@ -22,7 +22,7 @@
const i18n = getContext('i18n');
export let getModels: Function;
export let getAllModels: Function;
let showLiteLLM = false;
let showLiteLLMParams = false;
@@ -261,7 +261,7 @@
})
);
models.set(await getModels(localStorage.token));
models.set(await getAllModels(localStorage.token));
} else {
toast.error($i18n.t('Download canceled'));
}
@@ -424,7 +424,7 @@
modelTransferring = false;
uploadProgress = null;
models.set(await getModels());
models.set(await getAllModels());
};
const deleteModelHandler = async () => {
@@ -439,7 +439,7 @@
}
deleteModelTag = '';
models.set(await getModels());
models.set(await getAllModels());
};
const cancelModelPullHandler = async (model: string) => {
@@ -488,7 +488,7 @@
liteLLMMaxTokens = '';
liteLLMModelInfo = await getLiteLLMModelInfo(localStorage.token);
models.set(await getModels());
models.set(await getAllModels());
};
const deleteLiteLLMModelHandler = async () => {
@@ -507,7 +507,7 @@
deleteLiteLLMModelName = '';
liteLLMModelInfo = await getLiteLLMModelInfo(localStorage.token);
models.set(await getModels());
models.set(await getAllModels());
};
const addModelInfoHandler = async () => {
@@ -519,9 +519,7 @@
return;
}
// Remove any existing config
modelConfig = modelConfig.filter(
(m) => !(m.id === selectedModelId)
);
modelConfig = modelConfig.filter((m) => !(m.id === selectedModelId));
// Add new config
modelConfig.push({
id: selectedModelId,
@@ -536,7 +534,7 @@
toast.success(
$i18n.t('Model info for {{modelName}} added successfully', { modelName: selectedModelId })
);
models.set(await getModels());
models.set(await getAllModels());
};
const deleteModelInfoHandler = async () => {
@@ -547,14 +545,12 @@
if (!model) {
return;
}
modelConfig = modelConfig.filter(
(m) => !(m.id === selectedModelId)
);
modelConfig = modelConfig.filter((m) => !(m.id === selectedModelId));
await updateModelConfig(localStorage.token, modelConfig);
toast.success(
$i18n.t('Model info for {{modelName}} deleted successfully', { modelName: selectedModelId })
);
models.set(await getModels());
models.set(await getAllModels());
};
const toggleIsVisionCapable = () => {

14
src/lib/components/chat/SettingsModal.svelte
View File

@@ -3,7 +3,7 @@
import { toast } from 'svelte-sonner';
import { models, settings, user } from '$lib/stores';
import { getModels as _getModels } from '$lib/utils';
import { getAllModels as _getAllModels } from '$lib/utils';
import Modal from '../common/Modal.svelte';
import Account from './Settings/Account.svelte';
@@ -25,12 +25,12 @@
const saveSettings = async (updated) => {
console.log(updated);
await settings.set({ ...$settings, ...updated });
await models.set(await getModels());
await models.set(await getAllModels());
localStorage.setItem('settings', JSON.stringify($settings));
};
const getModels = async () => {
return await _getModels(localStorage.token);
const getAllModels = async () => {
return await _getAllModels(localStorage.token);
};
let selectedTab = 'general';
@@ -318,17 +318,17 @@
<div class="flex-1 md:min-h-[28rem]">
{#if selectedTab === 'general'}
<General
{getModels}
{getAllModels}
{saveSettings}
on:save={() => {
toast.success($i18n.t('Settings saved successfully!'));
}}
/>
{:else if selectedTab === 'models'}
<Models {getModels} />
<Models {getAllModels} />
{:else if selectedTab === 'connections'}
<Connections
{getModels}
{getAllModels}
on:save={() => {
toast.success($i18n.t('Settings saved successfully!'));
}}

20
src/lib/components/workspace/Modelfiles.svelte
View File

@@ -7,11 +7,7 @@
import { WEBUI_NAME, modelfiles, settings, user } from '$lib/stores';
import { createModel, deleteModel } from '$lib/apis/ollama';
import {
createNewModelfile,
deleteModelfileByTagName,
getModelfiles
} from '$lib/apis/modelfiles';
import { addNewModel, deleteModelById, getModels } from '$lib/apis/models';
import { goto } from '$app/navigation';
const i18n = getContext('i18n');
@@ -36,8 +32,8 @@
const deleteModelfile = async (tagName) => {
await deleteModelHandler(tagName);
await deleteModelfileByTagName(localStorage.token, tagName);
await modelfiles.set(await getModelfiles(localStorage.token));
await deleteModelById(localStorage.token, tagName);
await modelfiles.set(await getModels(localStorage.token));
};
const shareModelfile = async (modelfile) => {
@@ -246,12 +242,12 @@
console.log(savedModelfiles);
for (const modelfile of savedModelfiles) {
await createNewModelfile(localStorage.token, modelfile).catch((error) => {
await addNewModel(localStorage.token, modelfile).catch((error) => {
return null;
});
}
await modelfiles.set(await getModelfiles(localStorage.token));
await modelfiles.set(await getModels(localStorage.token));
};
reader.readAsText(importFiles[0]);
@@ -318,7 +314,7 @@
class="self-center w-fit text-sm px-3 py-1 border dark:border-gray-600 rounded-xl flex"
on:click={async () => {
for (const modelfile of localModelfiles) {
await createNewModelfile(localStorage.token, modelfile).catch((error) => {
await addNewModel(localStorage.token, modelfile).catch((error) => {
return null;
});
}
@@ -326,7 +322,7 @@
saveModelfiles(localModelfiles);
localStorage.removeItem('modelfiles');
localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]');
await modelfiles.set(await getModelfiles(localStorage.token));
await modelfiles.set(await getModels(localStorage.token));
}}
>
<div class=" self-center mr-2 font-medium">{$i18n.t('Sync All')}</div>
@@ -354,7 +350,7 @@
localStorage.removeItem('modelfiles');
localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]');
await modelfiles.set(await getModelfiles(localStorage.token));
await modelfiles.set(await getModels(localStorage.token));
}}
>
<div class=" self-center">

2
src/lib/utils/index.ts
View File

@@ -4,7 +4,7 @@ import { getOllamaModels } from '$lib/apis/ollama';
import { getOpenAIModels } from '$lib/apis/openai';
import { getLiteLLMModels } from '$lib/apis/litellm';
export const getModels = async (token: string) => {
export const getAllModels = async (token: string) => {
let models = await Promise.all([
getOllamaModels(token).catch((error) => {
console.log(error);

14
src/routes/(app)/+layout.svelte
View File

@@ -7,9 +7,9 @@
import { goto } from '$app/navigation';
import { getModels as _getModels } from '$lib/utils';
import { getAllModels as _getAllModels } from '$lib/utils';
import { getOllamaVersion } from '$lib/apis/ollama';
import { getModelfiles } from '$lib/apis/modelfiles';
import { getModels } from '$lib/apis/models';
import { getPrompts } from '$lib/apis/prompts';
import { getDocs } from '$lib/apis/documents';
@@ -46,8 +46,8 @@
let showShortcuts = false;
const getModels = async () => {
return _getModels(localStorage.token);
const getAllModels = async () => {
return _getAllModels(localStorage.token);
};
const setOllamaVersion = async (version: string = '') => {
@@ -91,10 +91,10 @@
await Promise.all([
(async () => {
models.set(await getModels());
models.set(await getAllModels());
})(),
(async () => {
modelfiles.set(await getModelfiles(localStorage.token));
modelfiles.set(await getModels(localStorage.token));
})(),
(async () => {
prompts.set(await getPrompts(localStorage.token));
@@ -109,7 +109,7 @@
modelfiles.subscribe(async () => {
// should fetch models
models.set(await getModels());
models.set(await getAllModels());
});
document.addEventListener('keydown', function (event) {

8
src/routes/(app)/workspace/modelfiles/create/+page.svelte
View File

@@ -8,7 +8,7 @@
import { splitStream } from '$lib/utils';
import { onMount, tick, getContext } from 'svelte';
import { createModel } from '$lib/apis/ollama';
import { createNewModelfile, getModelfileByTagName, getModelfiles } from '$lib/apis/modelfiles';
import { addNewModel, getModelById, getModels } from '$lib/apis/models';
const i18n = getContext('i18n');
@@ -98,8 +98,8 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
};
const saveModelfile = async (modelfile) => {
await createNewModelfile(localStorage.token, modelfile);
await modelfiles.set(await getModelfiles(localStorage.token));
await addNewModel(localStorage.token, modelfile);
await modelfiles.set(await getModels(localStorage.token));
};
const submitHandler = async () => {
@@ -116,7 +116,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
if (
$models.map((model) => model.name).includes(tagName) ||
(await getModelfileByTagName(localStorage.token, tagName).catch(() => false))
(await getModelById(localStorage.token, tagName).catch(() => false))
) {
toast.error(
`Uh-oh! It looks like you already have a model named '${tagName}'. Please choose a different name to complete your modelfile.`

6
src/routes/(app)/workspace/modelfiles/edit/+page.svelte
View File

@@ -10,7 +10,7 @@
import { splitStream } from '$lib/utils';
import { createModel } from '$lib/apis/ollama';
import { getModelfiles, updateModelfileByTagName } from '$lib/apis/modelfiles';
import { getModels, updateModelById } from '$lib/apis/models';
import AdvancedParams from '$lib/components/chat/Settings/Advanced/AdvancedParams.svelte';
@@ -85,8 +85,8 @@
});
const updateModelfile = async (modelfile) => {
await updateModelfileByTagName(localStorage.token, modelfile.tagName, modelfile);
await modelfiles.set(await getModelfiles(localStorage.token));
await updateModelById(localStorage.token, modelfile.tagName, modelfile);
await modelfiles.set(await getModels(localStorage.token));
};
const updateHandler = async () => {