forked from open-webui/open-webui
feat: litellm proxy frontend integration
This commit is contained in:
Timothy J. Baek
parent
a453be07e1
commit
ec6f53e298
6 changed files with 823 additions and 360 deletions
|
|
@ -109,6 +109,7 @@ def get_models(user=Depends(get_current_user)):
|
||||||
models = r.json()
|
models = r.json()
|
||||||
return models
|
return models
|
||||||
except Exception as e:
|
except Exception as e:
|
||||||
|
app.state.ENABLED = False
|
||||||
raise HTTPException(status_code=400, detail=ERROR_MESSAGES.DEFAULT(e))
|
raise HTTPException(status_code=400, detail=ERROR_MESSAGES.DEFAULT(e))
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -120,6 +121,7 @@ async def get_default_model(user=Depends(get_admin_user)):
|
||||||
|
|
||||||
return {"model": options["sd_model_checkpoint"]}
|
return {"model": options["sd_model_checkpoint"]}
|
||||||
except Exception as e:
|
except Exception as e:
|
||||||
|
app.state.ENABLED = False
|
||||||
raise HTTPException(status_code=400, detail=ERROR_MESSAGES.DEFAULT(e))
|
raise HTTPException(status_code=400, detail=ERROR_MESSAGES.DEFAULT(e))
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "open-webui",
|
"name": "open-webui",
|
||||||
"version": "0.1.102",
|
"version": "0.1.103",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite dev --host",
|
"dev": "vite dev --host",
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@ export const getLiteLLMModels = async (token: string = '') => {
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
error = `OpenAI: ${err?.error?.message ?? 'Network Problem'}`;
|
error = `LiteLLM: ${err?.error?.message ?? 'Network Problem'}`;
|
||||||
return [];
|
return [];
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -40,3 +40,109 @@ export const getLiteLLMModels = async (token: string = '') => {
|
||||||
})
|
})
|
||||||
: models;
|
: models;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const getLiteLLMModelInfo = async (token: string = '') => {
|
||||||
|
let error = null;
|
||||||
|
|
||||||
|
const res = await fetch(`${LITELLM_API_BASE_URL}/model/info`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...(token && { authorization: `Bearer ${token}` })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(async (res) => {
|
||||||
|
if (!res.ok) throw await res.json();
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
error = `LiteLLM: ${err?.error?.message ?? 'Network Problem'}`;
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
|
||||||
|
const models = Array.isArray(res) ? res : res?.data ?? null;
|
||||||
|
|
||||||
|
return models;
|
||||||
|
};
|
||||||
|
|
||||||
|
type AddLiteLLMModelForm = {
|
||||||
|
name: string;
|
||||||
|
model: string;
|
||||||
|
api_base: string;
|
||||||
|
api_key: string;
|
||||||
|
rpm: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const addLiteLLMModel = async (token: string = '', payload: AddLiteLLMModelForm) => {
|
||||||
|
let error = null;
|
||||||
|
|
||||||
|
const res = await fetch(`${LITELLM_API_BASE_URL}/model/new`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...(token && { authorization: `Bearer ${token}` })
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
model_name: payload.name,
|
||||||
|
litellm_params: {
|
||||||
|
model: payload.model,
|
||||||
|
...(payload.api_base === '' ? {} : { api_base: payload.api_base }),
|
||||||
|
...(payload.api_key === '' ? {} : { api_key: payload.api_key }),
|
||||||
|
...(isNaN(parseInt(payload.rpm)) ? {} : { rpm: parseInt(payload.rpm) })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(async (res) => {
|
||||||
|
if (!res.ok) throw await res.json();
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
error = `LiteLLM: ${err?.error?.message ?? 'Network Problem'}`;
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
|
||||||
|
return res;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const deleteLiteLLMModel = async (token: string = '', id: string) => {
|
||||||
|
let error = null;
|
||||||
|
|
||||||
|
const res = await fetch(`${LITELLM_API_BASE_URL}/model/delete`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...(token && { authorization: `Bearer ${token}` })
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
id: id
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(async (res) => {
|
||||||
|
if (!res.ok) throw await res.json();
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
error = `LiteLLM: ${err?.error?.message ?? 'Network Problem'}`;
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
|
||||||
|
return res;
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{#if ollamaVersion}
|
||||||
<hr class=" dark:border-gray-700" />
|
<hr class=" dark:border-gray-700" />
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -48,6 +49,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<hr class=" dark:border-gray-700" />
|
<hr class=" dark:border-gray-700" />
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,9 @@
|
||||||
let OPENAI_API_KEY = '';
|
let OPENAI_API_KEY = '';
|
||||||
let OPENAI_API_BASE_URL = '';
|
let OPENAI_API_BASE_URL = '';
|
||||||
|
|
||||||
|
let showOpenAI = false;
|
||||||
|
let showLiteLLM = false;
|
||||||
|
|
||||||
const updateOpenAIHandler = async () => {
|
const updateOpenAIHandler = async () => {
|
||||||
OPENAI_API_BASE_URL = await updateOpenAIUrl(localStorage.token, OPENAI_API_BASE_URL);
|
OPENAI_API_BASE_URL = await updateOpenAIUrl(localStorage.token, OPENAI_API_BASE_URL);
|
||||||
OPENAI_API_KEY = await updateOpenAIKey(localStorage.token, OPENAI_API_KEY);
|
OPENAI_API_KEY = await updateOpenAIKey(localStorage.token, OPENAI_API_KEY);
|
||||||
|
|
@ -45,7 +48,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<form
|
<form
|
||||||
class="flex flex-col h-full space-y-3 text-sm"
|
class="flex flex-col h-full justify-between text-sm"
|
||||||
on:submit|preventDefault={() => {
|
on:submit|preventDefault={() => {
|
||||||
updateOpenAIHandler();
|
updateOpenAIHandler();
|
||||||
dispatch('save');
|
dispatch('save');
|
||||||
|
|
@ -56,6 +59,59 @@
|
||||||
// });
|
// });
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<div class=" pr-1.5 overflow-y-scroll max-h-[21rem] space-y-3">
|
||||||
|
<div class=" space-y-3">
|
||||||
|
<div class="mt-2 space-y-2 pr-1.5">
|
||||||
|
<div class="flex justify-between items-center text-sm">
|
||||||
|
<div class=" font-medium">OpenAI API</div>
|
||||||
|
<button
|
||||||
|
class=" text-xs font-medium text-gray-500"
|
||||||
|
type="button"
|
||||||
|
on:click={() => {
|
||||||
|
showOpenAI = !showOpenAI;
|
||||||
|
}}>{showOpenAI ? 'Hide' : 'Show'}</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if showOpenAI}
|
||||||
|
<div>
|
||||||
|
<div class=" mb-2.5 text-sm font-medium">API Key</div>
|
||||||
|
<div class="flex w-full">
|
||||||
|
<div class="flex-1">
|
||||||
|
<input
|
||||||
|
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
|
||||||
|
placeholder="Enter OpenAI API Key"
|
||||||
|
bind:value={OPENAI_API_KEY}
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class=" mb-2.5 text-sm font-medium">API Base URL</div>
|
||||||
|
<div class="flex w-full">
|
||||||
|
<div class="flex-1">
|
||||||
|
<input
|
||||||
|
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
|
||||||
|
placeholder="Enter OpenAI API Base URL"
|
||||||
|
bind:value={OPENAI_API_BASE_URL}
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
|
||||||
|
WebUI will make requests to <span class=" text-gray-200"
|
||||||
|
>'{OPENAI_API_BASE_URL}/chat'</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class=" dark:border-gray-700" />
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div class=" mb-2.5 text-sm font-medium">Ollama API URL</div>
|
<div class=" mb-2.5 text-sm font-medium">Ollama API URL</div>
|
||||||
<div class="flex w-full">
|
<div class="flex w-full">
|
||||||
|
|
@ -99,40 +155,6 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr class=" dark:border-gray-700" />
|
|
||||||
|
|
||||||
<div class=" space-y-3">
|
|
||||||
<div>
|
|
||||||
<div class=" mb-2.5 text-sm font-medium">OpenAI API Key</div>
|
|
||||||
<div class="flex w-full">
|
|
||||||
<div class="flex-1">
|
|
||||||
<input
|
|
||||||
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
|
|
||||||
placeholder="Enter OpenAI API Key"
|
|
||||||
bind:value={OPENAI_API_KEY}
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class=" mb-2.5 text-sm font-medium">OpenAI API Base URL</div>
|
|
||||||
<div class="flex w-full">
|
|
||||||
<div class="flex-1">
|
|
||||||
<input
|
|
||||||
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
|
|
||||||
placeholder="Enter OpenAI API Base URL"
|
|
||||||
bind:value={OPENAI_API_BASE_URL}
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
|
|
||||||
WebUI will make requests to <span class=" text-gray-200">'{OPENAI_API_BASE_URL}/chat'</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex justify-end pt-3 text-sm font-medium">
|
<div class="flex justify-end pt-3 text-sm font-medium">
|
||||||
|
|
|
||||||
|
|
@ -2,14 +2,33 @@
|
||||||
import queue from 'async/queue';
|
import queue from 'async/queue';
|
||||||
import toast from 'svelte-french-toast';
|
import toast from 'svelte-french-toast';
|
||||||
|
|
||||||
import { createModel, deleteModel, pullModel } from '$lib/apis/ollama';
|
import { createModel, deleteModel, getOllamaVersion, pullModel } from '$lib/apis/ollama';
|
||||||
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
|
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
|
||||||
import { WEBUI_NAME, models, user } from '$lib/stores';
|
import { WEBUI_NAME, models, user } from '$lib/stores';
|
||||||
import { splitStream } from '$lib/utils';
|
import { splitStream } from '$lib/utils';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import { addLiteLLMModel, deleteLiteLLMModel, getLiteLLMModelInfo } from '$lib/apis/litellm';
|
||||||
|
|
||||||
export let getModels: Function;
|
export let getModels: Function;
|
||||||
|
|
||||||
|
let showLiteLLM = false;
|
||||||
|
let showLiteLLMParams = false;
|
||||||
|
|
||||||
|
let liteLLMModelInfo = [];
|
||||||
|
|
||||||
|
let liteLLMModel = '';
|
||||||
|
let liteLLMModelName = '';
|
||||||
|
let liteLLMAPIBase = '';
|
||||||
|
let liteLLMAPIKey = '';
|
||||||
|
let liteLLMRPM = '';
|
||||||
|
|
||||||
|
let deleteLiteLLMModelId = '';
|
||||||
|
|
||||||
|
$: liteLLMModelName = liteLLMModel;
|
||||||
|
|
||||||
// Models
|
// Models
|
||||||
|
let showExperimentalOllama = false;
|
||||||
|
let ollamaVersion = '';
|
||||||
const MAX_PARALLEL_DOWNLOADS = 3;
|
const MAX_PARALLEL_DOWNLOADS = 3;
|
||||||
const modelDownloadQueue = queue(
|
const modelDownloadQueue = queue(
|
||||||
(task: { modelName: string }, cb) =>
|
(task: { modelName: string }, cb) =>
|
||||||
|
|
@ -286,22 +305,82 @@
|
||||||
opts.callback({ success: true, modelName: opts.modelName });
|
opts.callback({ success: true, modelName: opts.modelName });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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
|
||||||
|
}).catch((error) => {
|
||||||
|
toast.error(error);
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res) {
|
||||||
|
if (res.message) {
|
||||||
|
toast.success(res.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
toast.error(`Model ${liteLLMModelName} already exists.`);
|
||||||
|
}
|
||||||
|
|
||||||
|
liteLLMModelName = '';
|
||||||
|
liteLLMModel = '';
|
||||||
|
liteLLMAPIBase = '';
|
||||||
|
liteLLMAPIKey = '';
|
||||||
|
liteLLMRPM = '';
|
||||||
|
|
||||||
|
liteLLMModelInfo = await getLiteLLMModelInfo(localStorage.token);
|
||||||
|
models.set(await getModels());
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteLiteLLMModelHandler = async () => {
|
||||||
|
const res = await deleteLiteLLMModel(localStorage.token, deleteLiteLLMModelId).catch(
|
||||||
|
(error) => {
|
||||||
|
toast.error(error);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (res) {
|
||||||
|
if (res.message) {
|
||||||
|
toast.success(res.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteLiteLLMModelId = '';
|
||||||
|
liteLLMModelInfo = await getLiteLLMModelInfo(localStorage.token);
|
||||||
|
models.set(await getModels());
|
||||||
|
};
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
ollamaVersion = await getOllamaVersion(localStorage.token).catch((error) => false);
|
||||||
|
liteLLMModelInfo = await getLiteLLMModelInfo(localStorage.token);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex flex-col h-full justify-between text-sm">
|
<div class="flex flex-col h-full justify-between text-sm">
|
||||||
<div class=" space-y-3 pr-1.5 overflow-y-scroll h-80">
|
<div class=" space-y-3 pr-1.5 overflow-y-scroll h-[23rem]">
|
||||||
|
{#if ollamaVersion}
|
||||||
|
<div class="space-y-2 pr-1.5">
|
||||||
<div>
|
<div>
|
||||||
<div class=" mb-2.5 text-sm font-medium">Pull a model from Ollama.com</div>
|
<div class=" mb-2 text-sm font-medium">Manage Ollama Models</div>
|
||||||
|
|
||||||
|
<div class=" mb-2 text-sm font-medium">Pull a model from Ollama.com</div>
|
||||||
<div class="flex w-full">
|
<div class="flex w-full">
|
||||||
<div class="flex-1 mr-2">
|
<div class="flex-1 mr-2">
|
||||||
<input
|
<input
|
||||||
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
|
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
|
||||||
placeholder="Enter model tag (e.g. mistral:7b)"
|
placeholder="Enter model tag (e.g. mistral:7b)"
|
||||||
bind:value={modelTag}
|
bind:value={modelTag}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
class="px-3 text-gray-100 bg-emerald-600 hover:bg-emerald-700 disabled:bg-gray-700 disabled:cursor-not-allowed rounded transition"
|
class="px-3 bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded transition"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
pullModelHandler();
|
pullModelHandler();
|
||||||
}}
|
}}
|
||||||
|
|
@ -379,14 +458,12 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr class=" dark:border-gray-700" />
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<div class=" mb-2.5 text-sm font-medium">Delete a model</div>
|
<div class=" mb-2 text-sm font-medium">Delete a model</div>
|
||||||
<div class="flex w-full">
|
<div class="flex w-full">
|
||||||
<div class="flex-1 mr-2">
|
<div class="flex-1 mr-2">
|
||||||
<select
|
<select
|
||||||
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
|
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
|
||||||
bind:value={deleteModelTag}
|
bind:value={deleteModelTag}
|
||||||
placeholder="Select a model"
|
placeholder="Select a model"
|
||||||
>
|
>
|
||||||
|
|
@ -401,7 +478,7 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
class="px-3 bg-red-700 hover:bg-red-800 text-gray-100 rounded transition"
|
class="px-3 bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded transition"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
deleteModelHandler();
|
deleteModelHandler();
|
||||||
}}
|
}}
|
||||||
|
|
@ -422,21 +499,27 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr class=" dark:border-gray-700" />
|
<div>
|
||||||
|
<div class="flex justify-between items-center text-xs">
|
||||||
|
<div class=" text-sm font-medium">Experimental</div>
|
||||||
|
<button
|
||||||
|
class=" text-xs font-medium text-gray-500"
|
||||||
|
type="button"
|
||||||
|
on:click={() => {
|
||||||
|
showExperimentalOllama = !showExperimentalOllama;
|
||||||
|
}}>{showExperimentalOllama ? 'Show' : 'Hide'}</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if showExperimentalOllama}
|
||||||
<form
|
<form
|
||||||
on:submit|preventDefault={() => {
|
on:submit|preventDefault={() => {
|
||||||
uploadModelHandler();
|
uploadModelHandler();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div class=" mb-2 flex w-full justify-between">
|
<div class=" mb-2 flex w-full justify-between">
|
||||||
<div class=" text-sm font-medium">
|
<div class=" text-sm font-medium">Upload a GGUF model</div>
|
||||||
Upload a GGUF model <a
|
|
||||||
class=" text-xs font-medium text-gray-500 underline"
|
|
||||||
href="https://github.com/jmorganca/ollama/blob/main/README.md#import-from-gguf"
|
|
||||||
target="_blank">(Experimental)</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="p-1 px-3 text-xs flex rounded transition"
|
class="p-1 px-3 text-xs flex rounded transition"
|
||||||
|
|
@ -475,7 +558,7 @@
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="w-full rounded text-left py-2 px-4 dark:text-gray-300 dark:bg-gray-800"
|
class="w-full rounded text-left py-2 px-4 dark:text-gray-300 dark:bg-gray-850"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
document.getElementById('model-upload-input').click();
|
document.getElementById('model-upload-input').click();
|
||||||
}}
|
}}
|
||||||
|
|
@ -490,7 +573,7 @@
|
||||||
{:else}
|
{:else}
|
||||||
<div class="flex-1 {modelFileUrl !== '' ? 'mr-2' : ''}">
|
<div class="flex-1 {modelFileUrl !== '' ? 'mr-2' : ''}">
|
||||||
<input
|
<input
|
||||||
class="w-full rounded text-left py-2 px-4 dark:text-gray-300 dark:bg-gray-800 outline-none {modelFileUrl !==
|
class="w-full rounded text-left py-2 px-4 dark:text-gray-300 dark:bg-gray-850 outline-none {modelFileUrl !==
|
||||||
''
|
''
|
||||||
? 'mr-2'
|
? 'mr-2'
|
||||||
: ''}"
|
: ''}"
|
||||||
|
|
@ -592,5 +675,253 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</form>
|
</form>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<hr class=" dark:border-gray-700 my-2" />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class=" space-y-3">
|
||||||
|
<div class="mt-2 space-y-3 pr-1.5">
|
||||||
|
<div>
|
||||||
|
<div class=" mb-2 text-sm font-medium">Manage LiteLLM Models</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center text-xs">
|
||||||
|
<div class=" text-sm font-medium">Add a model</div>
|
||||||
|
<button
|
||||||
|
class=" text-xs font-medium text-gray-500"
|
||||||
|
type="button"
|
||||||
|
on:click={() => {
|
||||||
|
showLiteLLMParams = !showLiteLLMParams;
|
||||||
|
}}>{showLiteLLMParams ? 'Advanced' : 'Default'}</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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 py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
|
||||||
|
placeholder="Enter LiteLLM Model (litellm_params.model)"
|
||||||
|
bind:value={liteLLMModel}
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="px-3 bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded 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"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if showLiteLLMParams}
|
||||||
|
<div>
|
||||||
|
<div class=" mb-1.5 text-sm font-medium">Model Name</div>
|
||||||
|
<div class="flex w-full">
|
||||||
|
<div class="flex-1">
|
||||||
|
<input
|
||||||
|
class="w-full rounded 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>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class=" mb-1.5 text-sm font-medium">API Base URL</div>
|
||||||
|
<div class="flex w-full">
|
||||||
|
<div class="flex-1">
|
||||||
|
<input
|
||||||
|
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
|
||||||
|
placeholder="Enter LiteLLM API Base URL (litellm_params.api_base)"
|
||||||
|
bind:value={liteLLMAPIBase}
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class=" mb-1.5 text-sm font-medium">API Key</div>
|
||||||
|
<div class="flex w-full">
|
||||||
|
<div class="flex-1">
|
||||||
|
<input
|
||||||
|
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
|
||||||
|
placeholder="Enter LiteLLM API Key (litellm_params.api_key)"
|
||||||
|
bind:value={liteLLMAPIKey}
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="mb-1.5 text-sm font-medium">API RPM</div>
|
||||||
|
<div class="flex w-full">
|
||||||
|
<div class="flex-1">
|
||||||
|
<input
|
||||||
|
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
|
||||||
|
placeholder="Enter LiteLLM API RPM (litellm_params.rpm)"
|
||||||
|
bind:value={liteLLMRPM}
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-2 text-xs text-gray-400 dark:text-gray-500">
|
||||||
|
Not sure what to add?
|
||||||
|
<a
|
||||||
|
class=" text-gray-300 font-medium"
|
||||||
|
href="https://litellm.vercel.app/docs/proxy/configs#quick-start"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Click here for help.
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class=" mb-2.5 text-sm font-medium">Delete a model</div>
|
||||||
|
<div class="flex w-full">
|
||||||
|
<div class="flex-1 mr-2">
|
||||||
|
<select
|
||||||
|
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
|
||||||
|
bind:value={deleteLiteLLMModelId}
|
||||||
|
placeholder="Select a model"
|
||||||
|
>
|
||||||
|
{#if !deleteLiteLLMModelId}
|
||||||
|
<option value="" disabled selected>Select a model</option>
|
||||||
|
{/if}
|
||||||
|
{#each liteLLMModelInfo as model}
|
||||||
|
<option value={model.model_info.id} class="bg-gray-100 dark:bg-gray-700"
|
||||||
|
>{model.model_name}</option
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="px-3 bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded transition"
|
||||||
|
on:click={() => {
|
||||||
|
deleteLiteLLMModelHandler();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="mt-2 space-y-3 pr-1.5">
|
||||||
|
<div>
|
||||||
|
<div class=" mb-2.5 text-sm font-medium">Add LiteLLM Model</div>
|
||||||
|
<div class="flex w-full mb-2">
|
||||||
|
<div class="flex-1">
|
||||||
|
<input
|
||||||
|
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
|
||||||
|
placeholder="Enter LiteLLM Model (e.g. ollama/mistral)"
|
||||||
|
bind:value={liteLLMModel}
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-between items-center text-sm">
|
||||||
|
<div class=" font-medium">Advanced Model Params</div>
|
||||||
|
<button
|
||||||
|
class=" text-xs font-medium text-gray-500"
|
||||||
|
type="button"
|
||||||
|
on:click={() => {
|
||||||
|
showLiteLLMParams = !showLiteLLMParams;
|
||||||
|
}}>{showLiteLLMParams ? 'Hide' : 'Show'}</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if showLiteLLMParams}
|
||||||
|
<div>
|
||||||
|
<div class=" mb-2.5 text-sm font-medium">LiteLLM API Key</div>
|
||||||
|
<div class="flex w-full">
|
||||||
|
<div class="flex-1">
|
||||||
|
<input
|
||||||
|
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
|
||||||
|
placeholder="Enter LiteLLM API Key (e.g. os.environ/AZURE_API_KEY_CA)"
|
||||||
|
bind:value={liteLLMAPIKey}
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class=" mb-2.5 text-sm font-medium">LiteLLM API Base URL</div>
|
||||||
|
<div class="flex w-full">
|
||||||
|
<div class="flex-1">
|
||||||
|
<input
|
||||||
|
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
|
||||||
|
placeholder="Enter LiteLLM API Base URL"
|
||||||
|
bind:value={liteLLMAPIBase}
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class=" mb-2.5 text-sm font-medium">LiteLLM API RPM</div>
|
||||||
|
<div class="flex w-full">
|
||||||
|
<div class="flex-1">
|
||||||
|
<input
|
||||||
|
class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
|
||||||
|
placeholder="Enter LiteLLM API RPM"
|
||||||
|
bind:value={liteLLMRPM}
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
|
||||||
|
Not sure what to add?
|
||||||
|
<a
|
||||||
|
class=" text-gray-300 font-medium"
|
||||||
|
href="https://litellm.vercel.app/docs/proxy/configs#quick-start"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Click here for help.
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue