Merge pull request #216 from ollama-webui/dev

feat: full backend support (including auth/rbac)

src/routes/(app)/modelfiles/+page.svelte

 <script lang="ts">
-	import { modelfiles, settings, user } from '$lib/stores';
-	import { onMount } from 'svelte';
 	import toast from 'svelte-french-toast';
+	import fileSaver from 'file-saver';
+	const { saveAs } = fileSaver;
 
+	import { onMount } from 'svelte';
+
+	import { modelfiles, settings, user } from '$lib/stores';
 	import { OLLAMA_API_BASE_URL } from '$lib/constants';
+	import { createModel, deleteModel } from '$lib/apis/ollama';
+	import {
+		createNewModelfile,
+		deleteModelfileByTagName,
+		getModelfiles
+	} from '$lib/apis/modelfiles';
+
+	let localModelfiles = [];
 
 	const deleteModelHandler = async (tagName) => {
 		let success = null;
-		const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/delete`, {
-			method: 'DELETE',
-			headers: {
-				'Content-Type': 'text/event-stream',
-				...($settings.authHeader && { Authorization: $settings.authHeader }),
-				...($user && { Authorization: `Bearer ${localStorage.token}` })
-			},
-			body: JSON.stringify({
-				name: tagName
-			})
-		})
-			.then(async (res) => {
-				if (!res.ok) throw await res.json();
-				return res.json();
-			})
-			.then((json) => {
-				console.log(json);
-				toast.success(`Deleted ${tagName}`);
-				success = true;
-				return json;
-			})
-			.catch((err) => {
-				console.log(err);
-				toast.error(err.error);
-				return null;
-			});
+
+		success = await deleteModel(
+			$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
+			localStorage.token,
+			tagName
+		);
+
+		if (success) {
+			toast.success(`Deleted ${tagName}`);
+		}
 
 		return success;
 	};
 
-	const deleteModelfilebyTagName = async (tagName) => {
+	const deleteModelfile = async (tagName) => {
 		await deleteModelHandler(tagName);
-		await modelfiles.set($modelfiles.filter((modelfile) => modelfile.tagName != tagName));
-		localStorage.setItem('modelfiles', JSON.stringify($modelfiles));
+		await deleteModelfileByTagName(localStorage.token, tagName);
+		await modelfiles.set(await getModelfiles(localStorage.token));
 	};
 
 	const shareModelfile = async (modelfile) => {
@@ -60,6 +55,21 @@
 			false
 		);
 	};
+
+	const saveModelfiles = async (modelfiles) => {
+		let blob = new Blob([JSON.stringify(modelfiles)], {
+			type: 'application/json'
+		});
+		saveAs(blob, `modelfiles-export-${Date.now()}.json`);
+	};
+
+	onMount(() => {
+		localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]');
+
+		if (localModelfiles) {
+			console.log(localModelfiles);
+		}
+	});
 </script>
 
 <div class="min-h-screen w-full flex justify-center dark:text-white">
@@ -167,7 +177,7 @@
 							class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
 							type="button"
 							on:click={() => {
-								deleteModelfilebyTagName(modelfile.tagName);
+								deleteModelfile(modelfile.tagName);
 							}}
 						>
 							<svg
@@ -189,6 +199,79 @@
 				</div>
 			{/each}
 
+			{#if localModelfiles.length > 0}
+				<hr class=" dark:border-gray-700 my-2.5" />
+
+				<div class=" flex justify-end space-x-4 w-full mb-3">
+					<div class=" self-center text-sm font-medium">
+						{localModelfiles.length} Local Modelfiles Detected
+					</div>
+
+					<div class="flex space-x-1">
+						<button
+							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) => {
+										return null;
+									});
+								}
+
+								saveModelfiles(localModelfiles);
+								localStorage.removeItem('modelfiles');
+								localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]');
+								await modelfiles.set(await getModelfiles(localStorage.token));
+							}}
+						>
+							<div class=" self-center mr-2 font-medium">Sync All</div>
+
+							<div class=" self-center">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 16 16"
+									fill="currentColor"
+									class="w-3.5 h-3.5"
+								>
+									<path
+										fill-rule="evenodd"
+										d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z"
+										clip-rule="evenodd"
+									/>
+								</svg>
+							</div>
+						</button>
+
+						<button
+							class="self-center w-fit text-sm p-1.5 border dark:border-gray-600 rounded-xl flex"
+							on:click={async () => {
+								saveModelfiles(localModelfiles);
+
+								localStorage.removeItem('modelfiles');
+								localModelfiles = JSON.parse(localStorage.getItem('modelfiles') ?? '[]');
+								await modelfiles.set(await getModelfiles(localStorage.token));
+							}}
+						>
+							<div class=" self-center">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									class="w-4 h-4"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+									/>
+								</svg>
+							</div>
+						</button>
+					</div>
+				</div>
+			{/if}
+
 			<div class=" my-16">
 				<div class=" text-2xl font-semibold mb-6">Made by OllamaHub Community</div>
 

src/routes/(app)/modelfiles/create/+page.svelte

@@ -8,6 +8,8 @@
 	import Advanced from '$lib/components/chat/Settings/Advanced.svelte';
 	import { splitStream } from '$lib/utils';
 	import { onMount, tick } from 'svelte';
+	import { createModel } from '$lib/apis/ollama';
+	import { createNewModelfile, getModelfileByTagName, getModelfiles } from '$lib/apis/modelfiles';
 
 	let loading = false;
 
@@ -93,11 +95,8 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 	};
 
 	const saveModelfile = async (modelfile) => {
-		await modelfiles.set([
-			...$modelfiles.filter((m) => m.tagName !== modelfile.tagName),
-			modelfile
-		]);
-		localStorage.setItem('modelfiles', JSON.stringify($modelfiles));
+		await createNewModelfile(localStorage.token, modelfile);
+		await modelfiles.set(await getModelfiles(localStorage.token));
 	};
 
 	const submitHandler = async () => {
@@ -112,7 +111,10 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 			return success;
 		}
 
-		if ($models.includes(tagName)) {
+		if (
+			$models.map((model) => model.name).includes(tagName) ||
+			(await getModelfileByTagName(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.`
 			);
@@ -128,18 +130,12 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 			Object.keys(categories).filter((category) => categories[category]).length > 0 &&
 			!$models.includes(tagName)
 		) {
-			const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/create`, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'text/event-stream',
-					...($settings.authHeader && { Authorization: $settings.authHeader }),
-					...($user && { Authorization: `Bearer ${localStorage.token}` })
-				},
-				body: JSON.stringify({
-					name: tagName,
-					modelfile: content
-				})
-			});
+			const res = await createModel(
+				$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
+				localStorage.token,
+				tagName,
+				content
+			);
 
 			if (res) {
 				const reader = res.body

src/routes/(app)/modelfiles/edit/+page.svelte

@@ -2,14 +2,20 @@
 	import { v4 as uuidv4 } from 'uuid';
 	import { toast } from 'svelte-french-toast';
 	import { goto } from '$app/navigation';
-	import { OLLAMA_API_BASE_URL } from '$lib/constants';
-	import { settings, db, user, config, modelfiles } from '$lib/stores';
 
-	import Advanced from '$lib/components/chat/Settings/Advanced.svelte';
-	import { splitStream } from '$lib/utils';
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 
+	import { settings, db, user, config, modelfiles } from '$lib/stores';
+
+	import { OLLAMA_API_BASE_URL } from '$lib/constants';
+	import { splitStream } from '$lib/utils';
+
+	import { createModel } from '$lib/apis/ollama';
+	import { getModelfiles, updateModelfileByTagName } from '$lib/apis/modelfiles';
+
+	import Advanced from '$lib/components/chat/Settings/Advanced.svelte';
+
 	let loading = false;
 
 	let filesInputElement;
@@ -78,17 +84,9 @@
 		}
 	});
 
-	const saveModelfile = async (modelfile) => {
-		await modelfiles.set(
-			$modelfiles.map((e) => {
-				if (e.tagName === modelfile.tagName) {
-					return modelfile;
-				} else {
-					return e;
-				}
-			})
-		);
-		localStorage.setItem('modelfiles', JSON.stringify($modelfiles));
+	const updateModelfile = async (modelfile) => {
+		await updateModelfileByTagName(localStorage.token, modelfile.tagName, modelfile);
+		await modelfiles.set(await getModelfiles(localStorage.token));
 	};
 
 	const updateHandler = async () => {
@@ -106,18 +104,12 @@
 			content !== '' &&
 			Object.keys(categories).filter((category) => categories[category]).length > 0
 		) {
-			const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/create`, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'text/event-stream',
-					...($settings.authHeader && { Authorization: $settings.authHeader }),
-					...($user && { Authorization: `Bearer ${localStorage.token}` })
-				},
-				body: JSON.stringify({
-					name: tagName,
-					modelfile: content
-				})
-			});
+			const res = await createModel(
+				$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
+				localStorage.token,
+				tagName,
+				content
+			);
 
 			if (res) {
 				const reader = res.body
@@ -178,7 +170,7 @@
 			}
 
 			if (success) {
-				await saveModelfile({
+				await updateModelfile({
 					tagName: tagName,
 					imageUrl: imageUrl,
 					title: title,

src/routes/+layout.svelte

@@ -2,56 +2,39 @@
 	import { onMount, tick } from 'svelte';
 	import { config, user } from '$lib/stores';
 	import { goto } from '$app/navigation';
-	import { WEBUI_API_BASE_URL } from '$lib/constants';
 	import toast, { Toaster } from 'svelte-french-toast';
 
+	import { getBackendConfig } from '$lib/apis';
+	import { getSessionUser } from '$lib/apis/auths';
+
 	import '../app.css';
 	import '../tailwind.css';
 	import 'tippy.js/dist/tippy.css';
+
 	let loaded = false;
 
 	onMount(async () => {
-		const resBackend = await fetch(`${WEBUI_API_BASE_URL}/`, {
-			method: 'GET',
-			headers: {
-				'Content-Type': 'application/json'
-			}
-		})
-			.then(async (res) => {
-				if (!res.ok) throw await res.json();
-				return res.json();
-			})
-			.catch((error) => {
-				console.log(error);
-				return null;
-			});
+		// Check Backend Status
+		const backendConfig = await getBackendConfig();
 
-		console.log(resBackend);
-		await config.set(resBackend);
+		if (backendConfig) {
+			// Save Backend Status to Store
+			await config.set(backendConfig);
+			console.log(backendConfig);
 
-		if ($config) {
-			if ($config.auth) {
+			if ($config) {
 				if (localStorage.token) {
-					const res = await fetch(`${WEBUI_API_BASE_URL}/auths`, {
-						method: 'GET',
-						headers: {
-							'Content-Type': 'application/json',
-							Authorization: `Bearer ${localStorage.token}`
-						}
-					})
-						.then(async (res) => {
-							if (!res.ok) throw await res.json();
-							return res.json();
-						})
-						.catch((error) => {
-							console.log(error);
-							toast.error(error.detail);
-							return null;
-						});
-
-					if (res) {
-						await user.set(res);
+					// Get Session User Info
+					const sessionUser = await getSessionUser(localStorage.token).catch((error) => {
+						toast.error(error);
+						return null;
+					});
+
+					if (sessionUser) {
+						// Save Session User to Store
+						await user.set(sessionUser);
 					} else {
+						// Redirect Invalid Session User to /auth Page
 						localStorage.removeItem('token');
 						await goto('/auth');
 					}
@@ -59,6 +42,9 @@
 					await goto('/auth');
 				}
 			}
+		} else {
+			// Redirect to /error when Backend Not Detected
+			await goto(`/error`);
 		}
 
 		await tick();
@@ -69,8 +55,9 @@
 <svelte:head>
 	<title>Ollama</title>
 </svelte:head>
-<Toaster />
 
-{#if $config !== undefined && loaded}
+{#if loaded}
 	<slot />
 {/if}
+
+<Toaster />

src/routes/auth/+page.svelte

 <script>
 	import { goto } from '$app/navigation';
+	import { userSignIn, userSignUp } from '$lib/apis/auths';
 	import { WEBUI_API_BASE_URL } from '$lib/constants';
 	import { config, user } from '$lib/stores';
 	import { onMount } from 'svelte';
@@ -12,76 +13,51 @@
 	let email = '';
 	let password = '';
 
-	const signInHandler = async () => {
-		const res = await fetch(`${WEBUI_API_BASE_URL}/auths/signin`, {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json'
-			},
-			body: JSON.stringify({
-				email: email,
-				password: password
-			})
-		})
-			.then(async (res) => {
-				if (!res.ok) throw await res.json();
-				return res.json();
-			})
-			.catch((error) => {
-				console.log(error);
-				toast.error(error.detail);
-				return null;
-			});
-
-		if (res) {
-			console.log(res);
+	const setSessionUser = async (sessionUser) => {
+		if (sessionUser) {
+			console.log(sessionUser);
 			toast.success(`You're now logged in.`);
-			localStorage.token = res.token;
-			await user.set(res);
+			localStorage.token = sessionUser.token;
+			await user.set(sessionUser);
 			goto('/');
 		}
 	};
 
+	const signInHandler = async () => {
+		const sessionUser = await userSignIn(email, password).catch((error) => {
+			toast.error(error);
+			return null;
+		});
+
+		await setSessionUser(sessionUser);
+	};
+
 	const signUpHandler = async () => {
-		const res = await fetch(`${WEBUI_API_BASE_URL}/auths/signup`, {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json'
-			},
-			body: JSON.stringify({
-				name: name,
-				email: email,
-				password: password
-			})
-		})
-			.then(async (res) => {
-				if (!res.ok) throw await res.json();
-				return res.json();
-			})
-			.catch((error) => {
-				console.log(error);
-				toast.error(error.detail);
-				return null;
-			});
-
-		if (res) {
-			console.log(res);
-			toast.success(`Account creation successful."`);
-			localStorage.token = res.token;
-			await user.set(res);
-			goto('/');
+		const sessionUser = await userSignUp(name, email, password).catch((error) => {
+			toast.error(error);
+			return null;
+		});
+
+		await setSessionUser(sessionUser);
+	};
+
+	const submitHandler = async () => {
+		if (mode === 'signin') {
+			await signInHandler();
+		} else {
+			await signUpHandler();
 		}
 	};
 
 	onMount(async () => {
-		if ($config === null || !$config.auth || ($config.auth && $user !== undefined)) {
+		if ($user !== undefined) {
 			await goto('/');
 		}
 		loaded = true;
 	});
 </script>
 
-{#if loaded && $config && $config.auth}
+{#if loaded}
 	<div class="fixed m-10 z-50">
 		<div class="flex space-x-2">
 			<div class=" self-center">
@@ -91,7 +67,7 @@
 	</div>
 
 	<div class=" bg-white min-h-screen w-full flex justify-center font-mona">
-		<div class="hidden lg:flex lg:flex-1 px-10 md:px-16 w-full bg-yellow-50 justify-center">
+		<!-- <div class="hidden lg:flex lg:flex-1 px-10 md:px-16 w-full bg-yellow-50 justify-center">
 			<div class=" my-auto pb-16 text-left">
 				<div>
 					<div class=" font-bold text-yellow-600 text-4xl">
@@ -103,66 +79,65 @@
 					</div>
 				</div>
 			</div>
-		</div>
+		</div> -->
 
-		<div class="w-full max-w-xl px-10 md:px-16 bg-white min-h-screen w-full flex flex-col">
+		<div class="w-full max-w-lg px-10 md:px-16 bg-white min-h-screen flex flex-col">
 			<div class=" my-auto pb-10 w-full">
 				<form
 					class=" flex flex-col justify-center"
 					on:submit|preventDefault={() => {
-						if (mode === 'signin') {
-							signInHandler();
-						} else {
-							signUpHandler();
-						}
+						submitHandler();
 					}}
 				>
-					<div class=" text-2xl md:text-3xl font-semibold">
+					<div class=" text-xl md:text-2xl font-bold">
 						{mode === 'signin' ? 'Sign in' : 'Sign up'} to Ollama Web UI
 					</div>
 
-					<hr class="my-8" />
-
-					<div class="flex flex-col space-y-4">
+					<div class="flex flex-col mt-4">
 						{#if mode === 'signup'}
 							<div>
-								<div class=" text-sm font-bold text-left mb-2">Name</div>
+								<div class=" text-sm font-semibold text-left mb-1">Name</div>
 								<input
 									bind:value={name}
 									type="text"
-									class=" border px-5 py-4 rounded-2xl w-full text-sm"
+									class=" border px-4 py-2.5 rounded-2xl w-full text-sm"
 									autocomplete="name"
+									placeholder="Enter Your Full Name"
 									required
 								/>
 							</div>
+
+							<hr class=" my-3" />
 						{/if}
 
-						<div>
-							<div class=" text-sm font-bold text-left mb-2">Email</div>
+						<div class="mb-2">
+							<div class=" text-sm font-semibold text-left mb-1">Email</div>
 							<input
 								bind:value={email}
 								type="email"
-								class=" border px-5 py-4 rounded-2xl w-full text-sm"
+								class=" border px-4 py-2.5 rounded-2xl w-full text-sm"
 								autocomplete="email"
+								placeholder="Enter Your Email"
 								required
 							/>
 						</div>
 
 						<div>
-							<div class=" text-sm font-bold text-left mb-2">Password</div>
+							<div class=" text-sm font-semibold text-left mb-1">Password</div>
 							<input
 								bind:value={password}
 								type="password"
-								class=" border px-5 py-4 rounded-2xl w-full text-sm"
+								class=" border px-4 py-2.5 rounded-2xl w-full text-sm"
+								placeholder="Enter Your Password"
 								autocomplete="current-password"
 								required
 							/>
 						</div>
 					</div>
 
-					<div class="mt-8">
+					<div class="mt-5">
 						<button
-							class=" bg-gray-900 hover:bg-gray-800 w-full rounded-full text-white font-semibold text-sm py-5 transition"
+							class=" bg-gray-900 hover:bg-gray-800 w-full rounded-full text-white font-semibold text-sm py-3 transition"
 							type="submit"
 						>
 							{mode === 'signin' ? 'Sign In' : 'Create Account'}

src/routes/error/+page.svelte

+<script>
+	import { goto } from '$app/navigation';
+	import { config } from '$lib/stores';
+	import { onMount } from 'svelte';
+
+	let loaded = false;
+
+	onMount(async () => {
+		if ($config) {
+			await goto('/');
+		}
+
+		loaded = true;
+	});
+</script>
+
+{#if loaded}
+	<div class="absolute w-full h-full flex z-50">
+		<div class="absolute rounded-xl w-full h-full backdrop-blur flex justify-center">
+			<div class="m-auto pb-44 flex flex-col justify-center">
+				<div class="max-w-md">
+					<div class="text-center text-2xl font-medium z-50">Ollama WebUI Backend Required</div>
+
+					<div class=" mt-4 text-center text-sm w-full">
+						Oops! You're using an unsupported method (frontend only). Please serve the WebUI from
+						the backend.
+
+						<br class=" " />
+						<br class=" " />
+						<a
+							class=" font-semibold underline"
+							href="https://github.com/ollama-webui/ollama-webui#how-to-install-"
+							target="_blank">See readme.md for instructions</a
+						>
+						or
+						<a class=" font-semibold underline" href="https://discord.gg/5rJgQTnV4s" target="_blank"
+							>join our Discord for help.</a
+						>
+					</div>
+
+					<div class=" mt-6 mx-auto relative group w-fit">
+						<button
+							class="relative z-20 flex px-5 py-2 rounded-full bg-gray-100 hover:bg-gray-200 transition font-medium text-sm"
+							on:click={() => {
+								location.href = '/';
+							}}
+						>
+							Check Again
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}