refac: styling

2024-05-14 20:16:22 -10:00
parent a57a01a598
commit c45bb64de7
16 changed files with 1707 additions and 228 deletions
@@ -0,0 +1,183 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+	import fileSaver from 'file-saver';
+	const { saveAs } = fileSaver;
+
+	import { onMount, getContext } from 'svelte';
+
+	import { WEBUI_NAME, modelfiles, settings, showSidebar, user } from '$lib/stores';
+	import { createModel, deleteModel } from '$lib/apis/ollama';
+	import {
+		createNewModelfile,
+		deleteModelfileByTagName,
+		getModelfiles
+	} from '$lib/apis/modelfiles';
+	import { goto } from '$app/navigation';
+	import MenuLines from '$lib/components/icons/MenuLines.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Modelfiles from '$lib/components/workspace/Modelfiles.svelte';
+	import Prompts from '$lib/components/workspace/Prompts.svelte';
+	import Documents from '$lib/components/workspace/Documents.svelte';
+	import Playground from '$lib/components/workspace/Playground.svelte';
+
+	const i18n = getContext('i18n');
+
+	let tab = '';
+
+	let localModelfiles = [];
+	let importFiles;
+	let modelfilesImportInputElement: HTMLInputElement;
+
+	const deleteModelHandler = async (tagName) => {
+		let success = null;
+
+		success = await deleteModel(localStorage.token, tagName).catch((err) => {
+			toast.error(err);
+			return null;
+		});
+
+		if (success) {
+			toast.success($i18n.t(`Deleted {{tagName}}`, { tagName }));
+		}
+
+		return success;
+	};
+
+	const deleteModelfile = async (tagName) => {
+		await deleteModelHandler(tagName);
+		await deleteModelfileByTagName(localStorage.token, tagName);
+		await modelfiles.set(await getModelfiles(localStorage.token));
+	};
+
+	const shareModelfile = async (modelfile) => {
+		toast.success($i18n.t('Redirecting you to OpenWebUI Community'));
+
+		const url = 'https://openwebui.com';
+
+		const tab = await window.open(`${url}/modelfiles/create`, '_blank');
+		window.addEventListener(
+			'message',
+			(event) => {
+				if (event.origin !== url) return;
+				if (event.data === 'loaded') {
+					tab.postMessage(JSON.stringify(modelfile), '*');
+				}
+			},
+			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>
+
+<svelte:head>
+	<title>
+		{$i18n.t('Workspace')} | {$WEBUI_NAME}
+	</title>
+</svelte:head>
+
+<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">
+		<div class=" mx-auto w-full h-full">
+			<div class="w-full h-full">
+				<div class=" flex flex-col justify-center">
+					<div class=" px-4 pt-3 mb-1.5">
+						<div class=" flex items-center">
+							<div
+								class="{$showSidebar
+									? 'md:hidden'
+									: ''} mr-1 self-start flex flex-none items-center"
+							>
+								<button
+									id="sidebar-toggle-button"
+									class="cursor-pointer p-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
+									on:click={() => {
+										showSidebar.set(!$showSidebar);
+									}}
+								>
+									<div class=" m-auto self-center">
+										<MenuLines />
+									</div>
+								</button>
+							</div>
+							<div class="flex items-center text-xl font-semibold">{$i18n.t('Workspace')}</div>
+						</div>
+					</div>
+
+					<div class="px-4 mb-1">
+						<div
+							class="flex scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-xl bg-transparent/10 p-1"
+						>
+							<button
+								class="min-w-fit rounded-lg p-1.5 px-3 {tab === ''
+									? 'bg-gray-50 dark:bg-gray-850'
+									: ''} transition"
+								type="button"
+								on:click={() => {
+									tab = '';
+								}}>Modelfiles</button
+							>
+
+							<button
+								class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'prompts'
+									? 'bg-gray-50 dark:bg-gray-850'
+									: ''} transition"
+								type="button"
+								on:click={() => {
+									tab = 'prompts';
+								}}>Prompts</button
+							>
+
+							<button
+								class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'documents'
+									? 'bg-gray-50 dark:bg-gray-850'
+									: ''} transition"
+								type="button"
+								on:click={() => {
+									tab = 'documents';
+								}}>Documents</button
+							>
+
+							<button
+								class="min-w-fit rounded-lg p-1.5 px-3 {tab === 'playground'
+									? 'bg-gray-50 dark:bg-gray-850'
+									: ''} transition"
+								type="button"
+								on:click={() => {
+									tab = 'playground';
+								}}>Playground</button
+							>
+						</div>
+					</div>
+
+					<hr class=" my-2 dark:border-gray-850" />
+
+					<div class=" py-1 px-5 min-h-full">
+						{#if tab === ''}
+							<Modelfiles />
+						{:else if tab === 'prompts'}
+							<Prompts />
+						{:else if tab === 'documents'}
+							<Documents />
+						{:else if tab === 'playground'}
+							<Playground />
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>