forked from open-webui/open-webui
feat: model whitelist
This commit is contained in:
Timothy J. Baek
parent
d40edc09e1
commit
219466374d
3 changed files with 80 additions and 83 deletions
|
|
@ -1,10 +1,15 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { getSignUpEnabledStatus, toggleSignUpEnabledStatus } from '$lib/apis/auths';
|
import { getSignUpEnabledStatus, toggleSignUpEnabledStatus } from '$lib/apis/auths';
|
||||||
import { getUserPermissions, updateUserPermissions } from '$lib/apis/users';
|
import { getUserPermissions, updateUserPermissions } from '$lib/apis/users';
|
||||||
|
import { models } from '$lib/stores';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
export let saveHandler: Function;
|
export let saveHandler: Function;
|
||||||
|
|
||||||
|
let whitelistEnabled = false;
|
||||||
|
let whitelistModels = [];
|
||||||
|
let selectedModelId = '';
|
||||||
|
|
||||||
let permissions = {
|
let permissions = {
|
||||||
chat: {
|
chat: {
|
||||||
deletion: true
|
deletion: true
|
||||||
|
|
@ -69,6 +74,80 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<hr class=" dark:border-gray-700 my-2" />
|
||||||
|
|
||||||
|
<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">Manage Models</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=" space-y-3">
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center text-xs">
|
||||||
|
<div class=" text-xs font-medium">Model Whitelisting</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class=" text-xs font-medium text-gray-500"
|
||||||
|
type="button"
|
||||||
|
on:click={() => {
|
||||||
|
whitelistEnabled = !whitelistEnabled;
|
||||||
|
}}>{whitelistEnabled ? 'On' : 'Off'}</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if whitelistEnabled}
|
||||||
|
<div>
|
||||||
|
<div class="flex justify-between items-center text-xs">
|
||||||
|
<div class=" text-xs font-medium">
|
||||||
|
{whitelistModels.length} Model(s) Whitelisted
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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={selectedModelId}
|
||||||
|
placeholder="Select a model"
|
||||||
|
>
|
||||||
|
<option value="" disabled selected>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
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="px-2.5 bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-900 dark:text-white rounded-lg transition"
|
||||||
|
on:click={() => {
|
||||||
|
if (!whitelistModels.includes(selectedModelId)) {
|
||||||
|
whitelistModels.push(selectedModelId);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
|
|
||||||
|
|
@ -912,88 +912,6 @@
|
||||||
{/if}
|
{/if}
|
||||||
</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 underline"
|
|
||||||
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>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -267,7 +267,7 @@
|
||||||
|
|
||||||
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
|
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
|
||||||
<div class=" flex flex-col justify-between w-full overflow-y-auto h-[100dvh]">
|
<div class=" flex flex-col justify-between w-full overflow-y-auto h-[100dvh]">
|
||||||
<div class="max-w-2xl mx-auto w-full px-3 p-3 md:px-0 h-full">
|
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10 h-full">
|
||||||
<div class=" flex flex-col h-full">
|
<div class=" flex flex-col h-full">
|
||||||
<div class="flex flex-col justify-between mb-2.5 gap-1">
|
<div class="flex flex-col justify-between mb-2.5 gap-1">
|
||||||
<div class="flex justify-between items-center gap-2">
|
<div class="flex justify-between items-center gap-2">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue