open-webui/src/lib/components/chat/Settings/Models.svelte

1353 lines
41 KiB
Svelte
Raw Normal View History

2024-02-05 09:58:54 +00:00
<script lang="ts">
import queue from 'async/queue';
2024-03-01 09:18:07 +00:00
import { toast } from 'svelte-sonner';
2024-02-05 09:58:54 +00:00
2024-03-05 10:12:55 +00:00
import {
createModel,
deleteModel,
2024-03-22 06:45:00 +00:00
downloadModel,
2024-03-05 10:12:55 +00:00
getOllamaUrls,
getOllamaVersion,
2024-03-22 06:45:00 +00:00
pullModel,
cancelOllamaRequest,
2024-03-22 06:45:00 +00:00
uploadModel
2024-03-05 10:12:55 +00:00
} from '$lib/apis/ollama';
2024-02-24 01:12:19 +00:00
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
import { WEBUI_NAME, models, MODEL_DOWNLOAD_POOL, user, config } from '$lib/stores';
2024-02-05 09:58:54 +00:00
import { splitStream } from '$lib/utils';
2024-03-01 04:40:36 +00:00
import { onMount, getContext } from 'svelte';
import { addLiteLLMModel, deleteLiteLLMModel, getLiteLLMModelInfo } from '$lib/apis/litellm';
import { getModelConfig, type GlobalModelConfig, updateModelConfig } from '$lib/apis';
2024-03-10 21:10:32 +00:00
import Tooltip from '$lib/components/common/Tooltip.svelte';
2024-02-05 09:58:54 +00:00
2024-03-01 04:40:36 +00:00
const i18n = getContext('i18n');
2024-02-05 09:58:54 +00:00
export let getModels: Function;
let showLiteLLM = false;
let showLiteLLMParams = false;
2024-03-03 22:35:07 +00:00
let modelUploadInputElement: HTMLInputElement;
let liteLLMModelInfo = [];
let liteLLMModel = '';
let liteLLMModelName = '';
let liteLLMAPIBase = '';
let liteLLMAPIKey = '';
let liteLLMRPM = '';
let liteLLMMaxTokens = '';
2024-04-21 22:26:22 +00:00
let deleteLiteLLMModelName = '';
$: liteLLMModelName = liteLLMModel;
2024-02-05 09:58:54 +00:00
// Models
2024-03-05 10:12:55 +00:00
let OLLAMA_URLS = [];
let selectedOllamaUrlIdx: string | null = null;
2024-03-10 21:10:32 +00:00
let updateModelId = null;
let updateProgress = null;
let showExperimentalOllama = false;
let ollamaVersion = '';
2024-02-05 09:58:54 +00:00
const MAX_PARALLEL_DOWNLOADS = 3;
let modelTransferring = false;
let modelTag = '';
let digest = '';
let pullProgress = null;
let modelUploadMode = 'file';
2024-03-22 06:45:00 +00:00
let modelInputFile: File[] | null = null;
2024-02-05 09:58:54 +00:00
let modelFileUrl = '';
2024-03-06 18:03:39 +00:00
let modelFileContent = `TEMPLATE """{{ .System }}\nUSER: {{ .Prompt }}\nASSISTANT: """\nPARAMETER num_ctx 4096\nPARAMETER stop "</s>"\nPARAMETER stop "USER:"\nPARAMETER stop "ASSISTANT:"`;
2024-02-05 09:58:54 +00:00
let modelFileDigest = '';
2024-03-22 07:55:59 +00:00
2024-02-05 09:58:54 +00:00
let uploadProgress = null;
2024-03-22 07:55:59 +00:00
let uploadMessage = '';
2024-02-05 09:58:54 +00:00
let deleteModelTag = '';
// Model configuration
let modelConfig: GlobalModelConfig;
let showModelInfo = false;
let selectedModelId = '';
let modelName = '';
let modelDescription = '';
let modelIsVisionCapable = false;
const onModelInfoIdChange = () => {
const model = $models.find((m) => m.id === selectedModelId);
if (model) {
modelName = model.custom_info?.name ?? model.name;
modelDescription = model.custom_info?.description ?? '';
modelIsVisionCapable = model.custom_info?.vision_capable ?? false;
}
};
2024-03-10 21:10:32 +00:00
const updateModelsHandler = async () => {
for (const model of $models.filter(
(m) =>
m.size != null &&
(selectedOllamaUrlIdx === null ? true : (m?.urls ?? []).includes(selectedOllamaUrlIdx))
)) {
console.log(model);
updateModelId = model.id;
const res = await pullModel(localStorage.token, model.id, selectedOllamaUrlIdx).catch(
(error) => {
toast.error(error);
return null;
}
);
if (res) {
const reader = res.body
.pipeThrough(new TextDecoderStream())
.pipeThrough(splitStream('\n'))
.getReader();
while (true) {
try {
const { value, done } = await reader.read();
if (done) break;
let lines = value.split('\n');
for (const line of lines) {
if (line !== '') {
let data = JSON.parse(line);
console.log(data);
if (data.error) {
throw data.error;
}
if (data.detail) {
throw data.detail;
}
if (data.status) {
if (data.digest) {
updateProgress = 0;
if (data.completed) {
updateProgress = Math.round((data.completed / data.total) * 1000) / 10;
} else {
updateProgress = 100;
}
} else {
toast.success(data.status);
}
}
}
}
} catch (error) {
console.log(error);
}
}
}
}
updateModelId = null;
updateProgress = null;
};
2024-02-05 09:58:54 +00:00
const pullModelHandler = async () => {
const sanitizedModelTag = modelTag.trim().replace(/^ollama\s+(run|pull)\s+/, '');
2024-04-23 11:36:46 +00:00
console.log($MODEL_DOWNLOAD_POOL);
if ($MODEL_DOWNLOAD_POOL[sanitizedModelTag]) {
2024-03-03 10:01:34 +00:00
toast.error(
$i18n.t(`Model '{{modelTag}}' is already in queue for downloading.`, {
modelTag: sanitizedModelTag
})
);
2024-02-05 09:58:54 +00:00
return;
}
2024-04-23 11:36:46 +00:00
if (Object.keys($MODEL_DOWNLOAD_POOL).length === MAX_PARALLEL_DOWNLOADS) {
2024-03-03 10:01:34 +00:00
toast.error(
$i18n.t('Maximum of 3 models can be downloaded simultaneously. Please try again later.')
);
2024-02-05 09:58:54 +00:00
return;
}
2024-04-23 11:36:46 +00:00
const res = await pullModel(localStorage.token, sanitizedModelTag, '0').catch((error) => {
toast.error(error);
return null;
});
if (res) {
const reader = res.body
.pipeThrough(new TextDecoderStream())
.pipeThrough(splitStream('\n'))
.getReader();
2024-02-05 09:58:54 +00:00
2024-04-23 11:36:46 +00:00
while (true) {
try {
const { value, done } = await reader.read();
if (done) break;
2024-02-05 09:58:54 +00:00
2024-04-23 11:36:46 +00:00
let lines = value.split('\n');
for (const line of lines) {
if (line !== '') {
let data = JSON.parse(line);
console.log(data);
if (data.error) {
throw data.error;
}
if (data.detail) {
throw data.detail;
}
if (data.id) {
MODEL_DOWNLOAD_POOL.set({
...$MODEL_DOWNLOAD_POOL,
[sanitizedModelTag]: {
...$MODEL_DOWNLOAD_POOL[sanitizedModelTag],
requestId: data.id,
reader,
done: false
}
});
console.log(data);
}
if (data.status) {
if (data.digest) {
let downloadProgress = 0;
if (data.completed) {
downloadProgress = Math.round((data.completed / data.total) * 1000) / 10;
} else {
downloadProgress = 100;
}
2024-02-05 09:58:54 +00:00
2024-04-23 11:36:46 +00:00
MODEL_DOWNLOAD_POOL.set({
...$MODEL_DOWNLOAD_POOL,
[sanitizedModelTag]: {
...$MODEL_DOWNLOAD_POOL[sanitizedModelTag],
pullProgress: downloadProgress,
digest: data.digest
}
});
} else {
toast.success(data.status);
2024-02-05 09:58:54 +00:00
2024-04-23 11:36:46 +00:00
MODEL_DOWNLOAD_POOL.set({
...$MODEL_DOWNLOAD_POOL,
[sanitizedModelTag]: {
...$MODEL_DOWNLOAD_POOL[sanitizedModelTag],
done: data.status === 'success'
}
});
}
}
}
}
} catch (error) {
console.log(error);
if (typeof error !== 'string') {
error = error.message;
}
2024-02-05 09:58:54 +00:00
2024-04-23 11:36:46 +00:00
toast.error(error);
// opts.callback({ success: false, error, modelName: opts.modelName });
2024-02-05 09:58:54 +00:00
}
}
2024-04-23 11:36:46 +00:00
console.log($MODEL_DOWNLOAD_POOL[sanitizedModelTag]);
if ($MODEL_DOWNLOAD_POOL[sanitizedModelTag].done) {
toast.success(
$i18n.t(`Model '{{modelName}}' has been successfully downloaded.`, {
modelName: sanitizedModelTag
})
);
models.set(await getModels(localStorage.token));
} else {
2024-05-07 09:44:35 +00:00
toast.error($i18n.t('Download canceled'));
2024-04-23 11:36:46 +00:00
}
delete $MODEL_DOWNLOAD_POOL[sanitizedModelTag];
MODEL_DOWNLOAD_POOL.set({
...$MODEL_DOWNLOAD_POOL
});
}
2024-02-05 09:58:54 +00:00
modelTag = '';
modelTransferring = false;
};
const uploadModelHandler = async () => {
modelTransferring = true;
let uploaded = false;
let fileResponse = null;
let name = '';
if (modelUploadMode === 'file') {
2024-03-22 06:45:00 +00:00
const file = modelInputFile ? modelInputFile[0] : null;
if (file) {
2024-03-22 07:55:59 +00:00
uploadMessage = 'Uploading...';
2024-03-22 07:10:55 +00:00
fileResponse = await uploadModel(localStorage.token, file, selectedOllamaUrlIdx).catch(
2024-03-22 06:45:00 +00:00
(error) => {
toast.error(error);
return null;
}
);
}
2024-02-05 09:58:54 +00:00
} else {
2024-03-22 07:55:59 +00:00
uploadProgress = 0;
2024-03-22 07:10:55 +00:00
fileResponse = await downloadModel(
localStorage.token,
modelFileUrl,
selectedOllamaUrlIdx
).catch((error) => {
toast.error(error);
return null;
});
2024-02-05 09:58:54 +00:00
}
if (fileResponse && fileResponse.ok) {
const reader = fileResponse.body
.pipeThrough(new TextDecoderStream())
.pipeThrough(splitStream('\n'))
.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
try {
let lines = value.split('\n');
for (const line of lines) {
if (line !== '') {
let data = JSON.parse(line.replace(/^data: /, ''));
if (data.progress) {
2024-03-22 07:55:59 +00:00
if (uploadMessage) {
uploadMessage = '';
}
2024-02-05 09:58:54 +00:00
uploadProgress = data.progress;
}
if (data.error) {
throw data.error;
}
if (data.done) {
modelFileDigest = data.blob;
name = data.name;
uploaded = true;
}
}
}
} catch (error) {
console.log(error);
}
}
2024-04-01 21:01:05 +00:00
} else {
const error = await fileResponse?.json();
toast.error(error?.detail ?? error);
2024-02-05 09:58:54 +00:00
}
if (uploaded) {
const res = await createModel(
localStorage.token,
`${name}:latest`,
`FROM @${modelFileDigest}\n${modelFileContent}`
);
if (res && res.ok) {
const reader = res.body
.pipeThrough(new TextDecoderStream())
.pipeThrough(splitStream('\n'))
.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
try {
let lines = value.split('\n');
for (const line of lines) {
if (line !== '') {
console.log(line);
let data = JSON.parse(line);
console.log(data);
if (data.error) {
throw data.error;
}
if (data.detail) {
throw data.detail;
}
if (data.status) {
if (
!data.digest &&
!data.status.includes('writing') &&
!data.status.includes('sha256')
) {
toast.success(data.status);
} else {
if (data.digest) {
digest = data.digest;
if (data.completed) {
pullProgress = Math.round((data.completed / data.total) * 1000) / 10;
} else {
pullProgress = 100;
}
}
}
}
}
}
} catch (error) {
console.log(error);
toast.error(error);
}
}
}
}
modelFileUrl = '';
2024-03-22 07:10:55 +00:00
if (modelUploadInputElement) {
modelUploadInputElement.value = '';
}
2024-03-22 06:45:00 +00:00
modelInputFile = null;
2024-02-05 09:58:54 +00:00
modelTransferring = false;
uploadProgress = null;
models.set(await getModels());
};
const deleteModelHandler = async () => {
2024-03-05 10:12:55 +00:00
const res = await deleteModel(localStorage.token, deleteModelTag, selectedOllamaUrlIdx).catch(
(error) => {
toast.error(error);
}
);
2024-02-05 09:58:54 +00:00
if (res) {
2024-03-04 08:53:56 +00:00
toast.success($i18n.t(`Deleted {{deleteModelTag}}`, { deleteModelTag }));
2024-02-05 09:58:54 +00:00
}
deleteModelTag = '';
models.set(await getModels());
};
2024-04-23 11:36:46 +00:00
const cancelModelPullHandler = async (model: string) => {
const { reader, requestId } = $MODEL_DOWNLOAD_POOL[model];
if (reader) {
await reader.cancel();
2024-03-23 20:12:23 +00:00
2024-04-23 11:36:46 +00:00
await cancelOllamaRequest(localStorage.token, requestId);
delete $MODEL_DOWNLOAD_POOL[model];
MODEL_DOWNLOAD_POOL.set({
...$MODEL_DOWNLOAD_POOL
});
await deleteModel(localStorage.token, model);
toast.success(`${model} download has been canceled`);
2024-02-05 09:58:54 +00:00
}
};
const addLiteLLMModelHandler = async () => {
if (!liteLLMModelInfo.find((info) => info.model_name === liteLLMModelName)) {
const res = await addLiteLLMModel(localStorage.token, {
name: liteLLMModelName,
model: liteLLMModel,
api_base: liteLLMAPIBase,
api_key: liteLLMAPIKey,
rpm: liteLLMRPM,
max_tokens: liteLLMMaxTokens
}).catch((error) => {
toast.error(error);
return null;
});
if (res) {
if (res.message) {
toast.success(res.message);
}
}
} else {
2024-03-03 10:01:34 +00:00
toast.error($i18n.t(`Model {{modelName}} already exists.`, { modelName: liteLLMModelName }));
}
liteLLMModelName = '';
liteLLMModel = '';
liteLLMAPIBase = '';
liteLLMAPIKey = '';
liteLLMRPM = '';
2024-03-08 21:45:21 +00:00
liteLLMMaxTokens = '';
liteLLMModelInfo = await getLiteLLMModelInfo(localStorage.token);
models.set(await getModels());
};
const deleteLiteLLMModelHandler = async () => {
2024-04-21 22:26:22 +00:00
const res = await deleteLiteLLMModel(localStorage.token, deleteLiteLLMModelName).catch(
(error) => {
toast.error(error);
return null;
}
);
if (res) {
if (res.message) {
toast.success(res.message);
}
}
2024-04-21 22:26:22 +00:00
deleteLiteLLMModelName = '';
liteLLMModelInfo = await getLiteLLMModelInfo(localStorage.token);
models.set(await getModels());
};
const addModelInfoHandler = async () => {
if (!selectedModelId) {
return;
}
let model = $models.find((m) => m.id === selectedModelId);
if (!model) {
return;
}
const modelSource =
'details' in model ? 'ollama' : model.source === 'LiteLLM' ? 'litellm' : 'openai';
// Remove any existing config
modelConfig[modelSource] = modelConfig[modelSource].filter((m) => m.id !== selectedModelId);
// Add new config
modelConfig[modelSource].push({
id: selectedModelId,
name: modelName,
description: modelDescription,
vision_capable: modelIsVisionCapable
});
await updateModelConfig(localStorage.token, modelConfig);
toast.success(
$i18n.t('Model info for {{modelName}} added successfully', { modelName: selectedModelId })
);
models.set(await getModels());
};
const deleteModelInfoHandler = async () => {
if (!selectedModelId) {
return;
}
let model = $models.find((m) => m.id === selectedModelId);
if (!model) {
return;
}
const modelSource =
'details' in model ? 'ollama' : model.source === 'LiteLLM' ? 'litellm' : 'openai';
modelConfig[modelSource] = modelConfig[modelSource].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());
};
const toggleIsVisionCapable = () => {
modelIsVisionCapable = !modelIsVisionCapable;
};
onMount(async () => {
2024-03-05 10:12:55 +00:00
OLLAMA_URLS = await getOllamaUrls(localStorage.token).catch((error) => {
toast.error(error);
return [];
});
2024-03-10 21:10:32 +00:00
if (OLLAMA_URLS.length > 0) {
2024-03-05 10:12:55 +00:00
selectedOllamaUrlIdx = 0;
}
liteLLMModelInfo = await getLiteLLMModelInfo(localStorage.token);
modelConfig = await getModelConfig(localStorage.token);
ollamaVersion = await getOllamaVersion(localStorage.token).catch((error) => false);
});
2024-02-05 09:58:54 +00:00
</script>
<div class="flex flex-col h-full justify-between text-sm">
2024-03-16 09:24:32 +00:00
<div class=" space-y-3 pr-1.5 overflow-y-scroll h-[24rem]">
{#if ollamaVersion}
<div class="space-y-2 pr-1.5">
<div class="text-sm font-medium">{$i18n.t('Manage Ollama Models')}</div>
2024-03-05 10:12:55 +00:00
2024-03-10 21:10:32 +00:00
{#if OLLAMA_URLS.length > 0}
<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 Ollama instance')}
2024-03-10 21:10:32 +00:00
>
{#each OLLAMA_URLS 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>
2024-03-05 10:12:55 +00:00
</div>
2024-03-10 21:10:32 +00:00
{#if updateModelId}
Updating "{updateModelId}" {updateProgress ? `(${updateProgress}%)` : ''}
{/if}
2024-03-05 10:12:55 +00:00
{/if}
<div class="space-y-2">
<div>
<div class=" mb-2 text-sm font-medium">{$i18n.t('Pull a model from Ollama.com')}</div>
2024-03-05 10:12:55 +00:00
<div class="flex w-full">
<div class="flex-1 mr-2">
<input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
2024-03-09 00:31:07 +00:00
placeholder={$i18n.t('Enter model tag (e.g. {{modelTag}})', {
modelTag: 'mistral:7b'
})}
2024-03-05 10:12:55 +00:00
bind:value={modelTag}
/>
</div>
<button
class="px-2.5 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={() => {
pullModelHandler();
}}
disabled={modelTransferring}
>
{#if modelTransferring}
<div class="self-center">
<svg
class=" w-4 h-4"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<style>
2024-03-05 10:12:55 +00:00
.spinner_ajPY {
transform-origin: center;
animation: spinner_AtaB 0.75s infinite linear;
}
2024-03-05 10:12:55 +00:00
@keyframes spinner_AtaB {
100% {
transform: rotate(360deg);
}
}
</style>
<path
2024-03-05 10:12:55 +00:00
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
2024-03-05 10:12:55 +00:00
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>
2024-03-05 10:12:55 +00:00
</div>
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
2024-03-05 10:12:55 +00:00
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
2024-03-05 10:12:55 +00:00
<path
d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
/>
<path
d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
/>
</svg>
{/if}
</button>
</div>
<div class="mt-2 mb-1 text-xs text-gray-400 dark:text-gray-500">
2024-03-09 00:31:07 +00:00
{$i18n.t('To access the available model names for downloading,')}
<a
2024-03-05 10:12:55 +00:00
class=" text-gray-500 dark:text-gray-300 font-medium underline"
href="https://ollama.com/library"
2024-03-09 00:31:07 +00:00
target="_blank">{$i18n.t('click here.')}</a
2024-03-05 10:12:55 +00:00
>
</div>
2024-04-23 11:36:46 +00:00
{#if Object.keys($MODEL_DOWNLOAD_POOL).length > 0}
{#each Object.keys($MODEL_DOWNLOAD_POOL) as model}
{#if 'pullProgress' in $MODEL_DOWNLOAD_POOL[model]}
2024-03-23 20:12:23 +00:00
<div class="flex flex-col">
<div class="font-medium mb-1">{model}</div>
<div class="">
<div class="flex flex-row justify-between space-x-4 pr-2">
<div class=" flex-1">
<div
class="dark:bg-gray-600 bg-gray-500 text-xs font-medium text-gray-100 text-center p-0.5 leading-none rounded-full"
style="width: {Math.max(
15,
2024-04-23 11:36:46 +00:00
$MODEL_DOWNLOAD_POOL[model].pullProgress ?? 0
2024-03-23 20:12:23 +00:00
)}%"
>
2024-04-23 11:36:46 +00:00
{$MODEL_DOWNLOAD_POOL[model].pullProgress ?? 0}%
2024-03-23 20:12:23 +00:00
</div>
</div>
2024-05-07 09:34:15 +00:00
<Tooltip content={$i18n.t('Cancel')}>
2024-03-23 20:12:23 +00:00
<button
class="text-gray-800 dark:text-gray-100"
on:click={() => {
cancelModelPullHandler(model);
}}
>
<svg
class="w-4 h-4 text-gray-800 dark:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18 17.94 6M18 18 6.06 6"
/>
</svg>
</button>
</Tooltip>
2024-03-23 19:46:06 +00:00
</div>
2024-04-23 11:36:46 +00:00
{#if 'digest' in $MODEL_DOWNLOAD_POOL[model]}
2024-03-23 20:12:23 +00:00
<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
2024-04-23 11:36:46 +00:00
{$MODEL_DOWNLOAD_POOL[model].digest}
2024-03-23 20:12:23 +00:00
</div>
{/if}
2024-03-05 10:12:55 +00:00
</div>
</div>
2024-03-23 20:12:23 +00:00
{/if}
2024-03-05 10:12:55 +00:00
{/each}
{/if}
</div>
<div>
2024-03-09 00:31:07 +00:00
<div class=" mb-2 text-sm font-medium">{$i18n.t('Delete a model')}</div>
2024-03-05 10:12:55 +00:00
<div class="flex w-full">
<div class="flex-1 mr-2">
<select
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
bind:value={deleteModelTag}
2024-03-09 00:31:07 +00:00
placeholder={$i18n.t('Select a model')}
2024-03-05 10:12:55 +00:00
>
{#if !deleteModelTag}
2024-03-09 00:31:07 +00:00
<option value="" disabled selected>{$i18n.t('Select a model')}</option>
2024-03-05 10:12:55 +00:00
{/if}
2024-03-06 19:14:33 +00:00
{#each $models.filter((m) => m.size != null && (selectedOllamaUrlIdx === null ? true : (m?.urls ?? []).includes(selectedOllamaUrlIdx))) as model}
2024-03-05 10:12:55 +00:00
<option value={model.name} class="bg-gray-100 dark:bg-gray-700"
>{(model.custom_info?.name ?? model.name) +
' (' +
(model.size / 1024 ** 3).toFixed(1) +
' GB)'}</option
2024-03-05 10:12:55 +00:00
>
{/each}
</select>
</div>
<button
class="px-2.5 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={() => {
deleteModelHandler();
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
2024-03-05 10:12:55 +00:00
fill-rule="evenodd"
d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
clip-rule="evenodd"
/>
</svg>
2024-03-05 10:12:55 +00:00
</button>
</div>
</div>
2024-02-05 09:58:54 +00:00
2024-03-05 10:12:55 +00:00
<div class="pt-1">
<div class="flex justify-between items-center text-xs">
2024-03-07 19:54:15 +00:00
<div class=" text-sm font-medium">{$i18n.t('Experimental')}</div>
2024-02-05 09:58:54 +00:00
<button
2024-03-05 10:12:55 +00:00
class=" text-xs font-medium text-gray-500"
type="button"
2024-03-05 10:12:55 +00:00
on:click={() => {
showExperimentalOllama = !showExperimentalOllama;
2024-03-07 19:54:15 +00:00
}}>{showExperimentalOllama ? $i18n.t('Hide') : $i18n.t('Show')}</button
2024-02-05 09:58:54 +00:00
>
</div>
2024-03-05 10:12:55 +00:00
</div>
2024-02-05 09:58:54 +00:00
2024-03-05 10:12:55 +00:00
{#if showExperimentalOllama}
<form
on:submit|preventDefault={() => {
uploadModelHandler();
}}
>
<div class=" mb-2 flex w-full justify-between">
2024-03-07 19:54:15 +00:00
<div class=" text-sm font-medium">{$i18n.t('Upload a GGUF model')}</div>
<button
2024-03-05 10:12:55 +00:00
class="p-1 px-3 text-xs flex rounded transition"
on:click={() => {
if (modelUploadMode === 'file') {
modelUploadMode = 'url';
} else {
modelUploadMode = 'file';
}
}}
type="button"
2024-02-05 09:58:54 +00:00
>
2024-03-05 10:12:55 +00:00
{#if modelUploadMode === 'file'}
2024-03-07 19:54:15 +00:00
<span class="ml-2 self-center">{$i18n.t('File Mode')}</span>
2024-03-05 10:12:55 +00:00
{:else}
2024-03-07 19:54:15 +00:00
<span class="ml-2 self-center">{$i18n.t('URL Mode')}</span>
2024-03-05 10:12:55 +00:00
{/if}
</button>
</div>
<div class="flex w-full mb-1.5">
<div class="flex flex-col w-full">
{#if modelUploadMode === 'file'}
<div class="flex-1 {modelInputFile && modelInputFile.length > 0 ? 'mr-2' : ''}">
<input
id="model-upload-input"
bind:this={modelUploadInputElement}
type="file"
bind:files={modelInputFile}
on:change={() => {
console.log(modelInputFile);
}}
2024-03-07 10:17:57 +00:00
accept=".gguf,.safetensors"
2024-03-05 10:12:55 +00:00
required
hidden
/>
<button
type="button"
2024-03-23 20:36:11 +00:00
class="w-full rounded-lg text-left py-2 px-4 bg-white dark:text-gray-300 dark:bg-gray-850"
2024-03-07 19:07:27 +00:00
on:click={() => {
modelUploadInputElement.click();
}}
>
2024-03-05 10:12:55 +00:00
{#if modelInputFile && modelInputFile.length > 0}
{modelInputFile[0].name}
{:else}
2024-03-09 00:31:07 +00:00
{$i18n.t('Click here to select')}
2024-03-05 10:12:55 +00:00
{/if}
</button>
</div>
{:else}
2024-03-05 10:12:55 +00:00
<div class="flex-1 {modelFileUrl !== '' ? 'mr-2' : ''}">
<input
2024-03-23 20:36:11 +00:00
class="w-full rounded-lg text-left py-2 px-4 bg-white dark:text-gray-300 dark:bg-gray-850 outline-none {modelFileUrl !==
2024-03-05 10:12:55 +00:00
''
? 'mr-2'
: ''}"
type="url"
required
bind:value={modelFileUrl}
2024-03-09 00:31:07 +00:00
placeholder={$i18n.t('Type Hugging Face Resolve (Download) URL')}
/>
2024-03-05 10:12:55 +00:00
</div>
{/if}
2024-03-05 10:12:55 +00:00
</div>
2024-03-05 10:12:55 +00:00
{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}
<button
2024-03-23 20:36:11 +00:00
class="px-2.5 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 disabled:cursor-not-allowed transition"
2024-03-05 10:12:55 +00:00
type="submit"
disabled={modelTransferring}
>
{#if modelTransferring}
<div class="self-center">
<svg
class=" w-4 h-4"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<style>
2024-03-05 10:12:55 +00:00
.spinner_ajPY {
transform-origin: center;
animation: spinner_AtaB 0.75s infinite linear;
}
2024-03-05 10:12:55 +00:00
@keyframes spinner_AtaB {
100% {
transform: rotate(360deg);
}
}
</style>
<path
2024-03-05 10:12:55 +00:00
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
2024-03-05 10:12:55 +00:00
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>
2024-03-05 10:12:55 +00:00
</div>
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M7.25 10.25a.75.75 0 0 0 1.5 0V4.56l2.22 2.22a.75.75 0 1 0 1.06-1.06l-3.5-3.5a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 1.06 1.06l2.22-2.22v5.69Z"
/>
<path
d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
/>
</svg>
{/if}
</button>
{/if}
</div>
{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}
<div>
2024-03-05 10:12:55 +00:00
<div>
2024-03-07 19:54:15 +00:00
<div class=" my-2.5 text-sm font-medium">{$i18n.t('Modelfile Content')}</div>
2024-03-05 10:12:55 +00:00
<textarea
bind:value={modelFileContent}
2024-03-22 07:10:55 +00:00
class="w-full rounded-lg py-2 px-4 text-sm bg-gray-100 dark:text-gray-100 dark:bg-gray-850 outline-none resize-none"
2024-03-05 10:12:55 +00:00
rows="6"
/>
</div>
</div>
2024-03-05 10:12:55 +00:00
{/if}
<div class=" mt-1 text-xs text-gray-400 dark:text-gray-500">
2024-03-07 19:54:15 +00:00
{$i18n.t('To access the GGUF models available for downloading,')}
<a
2024-03-05 10:12:55 +00:00
class=" text-gray-500 dark:text-gray-300 font-medium underline"
href="https://huggingface.co/models?search=gguf"
2024-03-07 19:54:15 +00:00
target="_blank">{$i18n.t('click here.')}</a
2024-03-05 10:12:55 +00:00
>
2024-02-05 09:58:54 +00:00
</div>
2024-03-22 07:55:59 +00:00
{#if uploadMessage}
<div class="mt-2">
<div class=" mb-2 text-xs">{$i18n.t('Upload Progress')}</div>
<div class="w-full rounded-full dark:bg-gray-800">
<div
class="dark:bg-gray-600 bg-gray-500 text-xs font-medium text-gray-100 text-center p-0.5 leading-none rounded-full"
style="width: 100%"
>
{uploadMessage}
</div>
</div>
<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
{modelFileDigest}
</div>
</div>
{:else if uploadProgress !== null}
2024-03-05 10:12:55 +00:00
<div class="mt-2">
2024-03-07 19:54:15 +00:00
<div class=" mb-2 text-xs">{$i18n.t('Upload Progress')}</div>
2024-03-05 10:12:55 +00:00
<div class="w-full rounded-full dark:bg-gray-800">
<div
class="dark:bg-gray-600 bg-gray-500 text-xs font-medium text-gray-100 text-center p-0.5 leading-none rounded-full"
style="width: {Math.max(15, uploadProgress ?? 0)}%"
>
{uploadProgress ?? 0}%
</div>
</div>
<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
{modelFileDigest}
</div>
</div>
2024-03-05 10:12:55 +00:00
{/if}
</form>
{/if}
</div>
2024-02-05 09:58:54 +00:00
</div>
<hr class=" dark:border-gray-700 my-2" />
{/if}
2024-02-05 09:58:54 +00:00
<!--TODO: Hide LiteLLM options when ENABLE_LITELLM=false-->
<div class=" space-y-3">
<div class="mt-2 space-y-3 pr-1.5">
2024-02-05 09:58:54 +00:00
<div>
2024-03-09 08:50:48 +00:00
<div class="mb-2">
<div class="flex justify-between items-center text-xs">
2024-03-10 18:32:16 +00:00
<div class=" text-sm font-medium">{$i18n.t('Manage LiteLLM Models')}</div>
<button
class=" text-xs font-medium text-gray-500"
type="button"
on:click={() => {
2024-03-09 08:50:48 +00:00
showLiteLLM = !showLiteLLM;
2024-03-10 18:32:16 +00:00
}}>{showLiteLLM ? $i18n.t('Hide') : $i18n.t('Show')}</button
>
</div>
</div>
2024-03-09 08:50:48 +00:00
{#if showLiteLLM}
<div>
<div class="flex justify-between items-center text-xs">
2024-03-10 19:01:10 +00:00
<div class=" text-sm font-medium">{$i18n.t('Add a model')}</div>
2024-03-09 08:50:48 +00:00
<button
class=" text-xs font-medium text-gray-500"
type="button"
on:click={() => {
showLiteLLMParams = !showLiteLLMParams;
}}
2024-03-10 19:01:10 +00:00
>{showLiteLLMParams
? $i18n.t('Hide Additional Params')
: $i18n.t('Show Additional Params')}</button
2024-03-09 08:50:48 +00:00
>
</div>
2024-03-09 08:50:48 +00:00
</div>
2024-03-09 08:50:48 +00:00
<div class="my-2 space-y-2">
<div class="flex w-full mb-1.5">
<div class="flex-1 mr-2">
<input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
2024-03-10 19:01:10 +00:00
placeholder={$i18n.t('Enter LiteLLM Model (litellm_params.model)')}
2024-03-09 08:50:48 +00:00
bind:value={liteLLMModel}
autocomplete="off"
/>
2024-03-09 08:50:48 +00:00
</div>
2024-03-09 08:50:48 +00:00
<button
class="px-2.5 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={() => {
addLiteLLMModelHandler();
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
/>
2024-03-09 08:50:48 +00:00
</svg>
</button>
</div>
2024-03-09 08:50:48 +00:00
{#if showLiteLLMParams}
<div>
2024-03-10 18:32:16 +00:00
<div class=" mb-1.5 text-sm font-medium">{$i18n.t('Model Name')}</div>
2024-03-09 08:50:48 +00:00
<div class="flex w-full">
<div class="flex-1">
<input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
placeholder="Enter Model Name (model_name)"
bind:value={liteLLMModelName}
autocomplete="off"
/>
</div>
</div>
</div>
2024-03-09 08:50:48 +00:00
<div>
2024-03-10 19:01:10 +00:00
<div class=" mb-1.5 text-sm font-medium">{$i18n.t('API Base URL')}</div>
2024-03-09 08:50:48 +00:00
<div class="flex w-full">
<div class="flex-1">
<input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
2024-03-10 19:01:10 +00:00
placeholder={$i18n.t(
'Enter LiteLLM API Base URL (litellm_params.api_base)'
)}
2024-03-09 08:50:48 +00:00
bind:value={liteLLMAPIBase}
autocomplete="off"
/>
</div>
</div>
</div>
2024-03-09 08:50:48 +00:00
<div>
2024-03-10 19:01:10 +00:00
<div class=" mb-1.5 text-sm font-medium">{$i18n.t('API Key')}</div>
2024-03-09 08:50:48 +00:00
<div class="flex w-full">
<div class="flex-1">
<input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
2024-03-10 19:01:10 +00:00
placeholder={$i18n.t('Enter LiteLLM API Key (litellm_params.api_key)')}
2024-03-09 08:50:48 +00:00
bind:value={liteLLMAPIKey}
autocomplete="off"
/>
</div>
</div>
</div>
2024-03-09 08:50:48 +00:00
<div>
2024-03-10 19:01:10 +00:00
<div class="mb-1.5 text-sm font-medium">{$i18n.t('API RPM')}</div>
2024-03-09 08:50:48 +00:00
<div class="flex w-full">
<div class="flex-1">
<input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
2024-03-10 19:01:10 +00:00
placeholder={$i18n.t('Enter LiteLLM API RPM (litellm_params.rpm)')}
2024-03-09 08:50:48 +00:00
bind:value={liteLLMRPM}
autocomplete="off"
/>
</div>
</div>
</div>
2024-02-05 09:58:54 +00:00
2024-03-09 08:50:48 +00:00
<div>
2024-03-10 19:01:10 +00:00
<div class="mb-1.5 text-sm font-medium">{$i18n.t('Max Tokens')}</div>
2024-03-09 08:50:48 +00:00
<div class="flex w-full">
<div class="flex-1">
<input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
2024-03-10 19:01:10 +00:00
placeholder={$i18n.t('Enter Max Tokens (litellm_params.max_tokens)')}
2024-03-09 08:50:48 +00:00
bind:value={liteLLMMaxTokens}
type="number"
min="1"
autocomplete="off"
/>
</div>
</div>
</div>
2024-03-09 08:50:48 +00:00
{/if}
</div>
2024-03-09 08:50:48 +00:00
<div class="mb-2 text-xs text-gray-400 dark:text-gray-500">
2024-03-10 19:01:10 +00:00
{$i18n.t('Not sure what to add?')}
2024-03-09 08:50:48 +00:00
<a
class=" text-gray-300 font-medium underline"
href="https://litellm.vercel.app/docs/proxy/configs#quick-start"
target="_blank"
>
2024-03-10 19:01:10 +00:00
{$i18n.t('Click here for help.')}
2024-03-09 08:50:48 +00:00
</a>
</div>
<div>
2024-03-10 19:01:10 +00:00
<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Delete a model')}</div>
<div class="flex w-full">
2024-03-09 08:50:48 +00:00
<div class="flex-1 mr-2">
<select
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
2024-04-21 22:26:22 +00:00
bind:value={deleteLiteLLMModelName}
2024-03-10 19:01:10 +00:00
placeholder={$i18n.t('Select a model')}
2024-03-09 08:50:48 +00:00
>
2024-04-21 22:26:22 +00:00
{#if !deleteLiteLLMModelName}
2024-03-10 19:01:10 +00:00
<option value="" disabled selected>{$i18n.t('Select a model')}</option>
2024-03-09 08:50:48 +00:00
{/if}
{#each liteLLMModelInfo as model}
2024-04-21 22:26:22 +00:00
<option value={model.model_name} class="bg-gray-100 dark:bg-gray-700"
2024-03-09 08:50:48 +00:00
>{model.model_name}</option
>
{/each}
</select>
</div>
2024-03-09 08:50:48 +00:00
<button
class="px-2.5 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={() => {
deleteLiteLLMModelHandler();
}}
>
2024-03-09 08:50:48 +00:00
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
{/if}
2024-02-05 09:58:54 +00:00
</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={selectedModelId}
on:change={onModelInfoIdChange}
>
{#if !selectedModelId}
<option value="" disabled selected>{$i18n.t('Select a model')}</option>
{/if}
{#each $models as model}
<option value={model.id} class="bg-gray-100 dark:bg-gray-700"
>{'details' in model
? 'Ollama'
: model.source === 'LiteLLM'
? 'LiteLLM'
: 'OpenAI'}: {model.name}{`${
model.custom_info?.name
? ' - ' + model.custom_info?.name
: ''
}`}</option
>
{/each}
</select>
</div>
<button
class="px-2.5 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={() => {
deleteModelInfoHandler();
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
{#if selectedModelId}
<div>
<div class=" mb-1.5 text-sm font-medium">{$i18n.t('Model Display Name')}</div>
<div class="flex w-full mb-1.5">
<div class="flex-1 mr-2">
<input
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
placeholder={$i18n.t('Enter Model Display Name')}
bind:value={modelName}
autocomplete="off"
/>
</div>
<button
class="px-2.5 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={() => {
addModelInfoHandler();
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
/>
</svg>
</button>
</div>
</div>
<div>
<div class=" mb-1.5 text-sm font-medium">{$i18n.t('Model Description')}</div>
<div class="flex w-full">
<div class="flex-1">
<textarea
class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg -mb-1"
rows="2"
bind:value={modelDescription}
/>
</div>
</div>
</div>
<div class="py-0.5 flex w-full justify-between">
<div class=" self-center text-sm font-medium">
{$i18n.t('Is Model Vision Capable')}
</div>
<button
class="p-1 px-3sm flex rounded transition"
on:click={() => {
toggleIsVisionCapable();
}}
type="button"
>
{#if modelIsVisionCapable === true}
<span class="ml-2 self-center">{$i18n.t('Yes')}</span>
{:else}
<span class="ml-2 self-center">{$i18n.t('No')}</span>
{/if}
</button>
</div>
{/if}
</div>
{/if}
</div>
</div>
</div>
2024-02-05 09:58:54 +00:00
</div>
2024-03-10 19:01:10 +00:00
</div>