enh: reintroduce model management to models settings

2025-01-20 22:39:00 -08:00
parent 59c349de00
commit af48f346f1
6 changed files with 1167 additions and 1017 deletions
@@ -113,7 +113,7 @@
 	<div>
 		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
 			<div class=" text-lg font-medium self-center font-primary">
-				{$i18n.t('Configure Models')}
+				{$i18n.t('Settings')}
 			</div>
 			<button
 				class="self-center"
@@ -0,0 +1,26 @@
+<script>
+	import { getContext, onMount } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import ManageOllama from './ManageOllama.svelte';
+
+	export let ollamaConfig = null;
+
+	let selectedUrlIdx = 0;
+</script>
+
+{#if ollamaConfig}
+	<div class="flex-1 mb-2.5 pr-1.5 rounded-lg bg-gray-50 dark:text-gray-300 dark:bg-gray-850">
+		<select
+			class="w-full py-2 px-4 text-sm outline-none bg-transparent"
+			bind:value={selectedUrlIdx}
+			placeholder={$i18n.t('Select an Ollama instance')}
+		>
+			{#each ollamaConfig.OLLAMA_BASE_URLS as url, idx}
+				<option value={idx}>{url}</option>
+			{/each}
+		</select>
+	</div>
+
+	<ManageOllama urlIdx={selectedUrlIdx} />
+{/if}
@@ -0,0 +1,110 @@
+<script>
+	import { toast } from 'svelte-sonner';
+
+	import { createEventDispatcher, getContext, onMount } from 'svelte';
+	const i18n = getContext('i18n');
+	const dispatch = createEventDispatcher();
+
+	import { user } from '$lib/stores';
+
+	import Modal from '$lib/components/common/Modal.svelte';
+	import ManageOllama from './Manage/ManageOllama.svelte';
+	import { getOllamaConfig } from '$lib/apis/ollama';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import ManageMultipleOllama from './Manage/ManageMultipleOllama.svelte';
+
+	export let show = false;
+
+	let selected = null;
+	let ollamaConfig = null;
+
+	onMount(async () => {
+		if ($user.role === 'admin') {
+			await Promise.all([
+				(async () => {
+					ollamaConfig = await getOllamaConfig(localStorage.token);
+				})()
+			]);
+
+			if (ollamaConfig) {
+				selected = 'ollama';
+				return;
+			}
+
+			selected = '';
+		}
+	});
+</script>
+
+<Modal size="sm" bind:show>
+	<div>
+		<div class=" flex justify-between dark:text-gray-100 px-5 pt-4">
+			<div class=" text-lg font-medium self-center font-primary">
+				{$i18n.t('Manage Models')}
+			</div>
+			<button
+				class="self-center"
+				on:click={() => {
+					show = false;
+				}}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="w-5 h-5"
+				>
+					<path
+						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+					/>
+				</svg>
+			</button>
+		</div>
+
+		<div class="flex flex-col md:flex-row w-full px-3 pb-4 md:space-x-4 dark:text-gray-200">
+			<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
+				{#if selected === ''}
+					<div class=" py-5 text-gray-400 text-xs">
+						<div>
+							{$i18n.t('No inference engine with management support found')}
+						</div>
+					</div>
+				{:else if selected !== null}
+					<div class=" flex w-full flex-col">
+						<div
+							class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent dark:text-gray-200"
+						>
+							<button
+								class="min-w-fit rounded-full p-1.5 {selected === 'ollama'
+									? ''
+									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
+								on:click={() => {
+									selected = 'ollama';
+								}}>{$i18n.t('Ollama')}</button
+							>
+
+							<!-- <button
+								class="min-w-fit rounded-full p-1.5 {selected === 'llamacpp'
+									? ''
+									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
+								on:click={() => {
+									selected = 'llamacpp';
+								}}>{$i18n.t('Llama.cpp')}</button
+							> -->
+						</div>
+
+						<div class=" px-1.5 py-1">
+							{#if selected === 'ollama'}
+								<ManageMultipleOllama {ollamaConfig} />
+							{/if}
+						</div>
+					</div>
+				{:else}
+					<div class=" py-5">
+						<Spinner />
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+</Modal>