+layout.svelte 8.77 KB
Newer Older
1
<script lang="ts">
Timothy J. Baek's avatar
Timothy J. Baek committed
2
	import toast from 'svelte-french-toast';
3
	import { openDB, deleteDB } from 'idb';
Timothy J. Baek's avatar
Timothy J. Baek committed
4
	import { onMount, tick } from 'svelte';
5
6
	import { goto } from '$app/navigation';

7
8
9
	import fileSaver from 'file-saver';
	const { saveAs } = fileSaver;

10
	import { getOllamaModels, getOllamaVersion } from '$lib/apis/ollama';
11
12
	import { getModelfiles } from '$lib/apis/modelfiles';

Timothy J. Baek's avatar
Timothy J. Baek committed
13
	import { getOpenAIModels } from '$lib/apis/openai';
Timothy J. Baek's avatar
Timothy J. Baek committed
14

Timothy J. Baek's avatar
Timothy J. Baek committed
15
16
17
	import { user, showSettings, settings, models, modelfiles } from '$lib/stores';
	import { OLLAMA_API_BASE_URL, REQUIRED_OLLAMA_VERSION, WEBUI_API_BASE_URL } from '$lib/constants';

Timothy J. Baek's avatar
Timothy J. Baek committed
18
19
	import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
	import Sidebar from '$lib/components/layout/Sidebar.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
20
	import { checkVersion } from '$lib/utils';
Timothy J. Baek's avatar
Timothy J. Baek committed
21

Timothy J. Baek's avatar
Timothy J. Baek committed
22
	let ollamaVersion = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
23
	let loaded = false;
24

25
26
27
	let DB = null;
	let localDBChats = [];

28
29
	const getModels = async () => {
		let models = [];
30
		models.push(
Timothy J. Baek's avatar
Timothy J. Baek committed
31
32
33
34
35
36
37
			...(await getOllamaModels(
				$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
				localStorage.token
			).catch((error) => {
				toast.error(error);
				return [];
			}))
38
39
40
41
42
43
44
		);
		// If OpenAI API Key exists
		if ($settings.OPENAI_API_KEY) {
			const openAIModels = await getOpenAIModels(
				$settings.OPENAI_API_BASE_URL ?? 'https://api.openai.com/v1',
				$settings.OPENAI_API_KEY
			).catch((error) => {
45
				console.log(error);
46
				toast.error(error);
47
48
49
				return null;
			});

50
			models.push(...(openAIModels ? [{ name: 'hr' }, ...openAIModels] : []));
51
52
53
54
		}
		return models;
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
55
56
57
58
59
60
	const setOllamaVersion = async (version: string = '') => {
		if (version === '') {
			version = await getOllamaVersion(
				$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL,
				localStorage.token
			).catch((error) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
61
				return '';
Timothy J. Baek's avatar
Timothy J. Baek committed
62
63
			});
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
64
65
66
67
68
69

		ollamaVersion = version;

		console.log(ollamaVersion);
		if (checkVersion(REQUIRED_OLLAMA_VERSION, ollamaVersion)) {
			toast.error(`Ollama Version: ${ollamaVersion !== '' ? ollamaVersion : 'Not Detected'}`);
Timothy J. Baek's avatar
Timothy J. Baek committed
70
71
72
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
73
	onMount(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
74
		if ($user === undefined) {
Timothy J. Baek's avatar
Timothy J. Baek committed
75
			await goto('/auth');
Timothy J. Baek's avatar
Timothy J. Baek committed
76
		} else if (['user', 'admin'].includes($user.role)) {
77
78
79
			try {
				// Check if IndexedDB exists
				DB = await openDB('Chats', 1);
80

81
82
83
				if (DB) {
					const chats = await DB.getAllFromIndex('chats', 'timestamp');
					localDBChats = chats.map((item, idx) => chats[chats.length - 1 - idx]);
84

85
86
87
88
89
90
					if (localDBChats.length === 0) {
						await deleteDB('Chats');
					}

					console.log('localdb', localDBChats);
				}
91

92
93
94
95
96
				console.log(DB);
			} catch (error) {
				// IndexedDB Not Found
				console.log('IDB Not Found');
			}
97
98

			console.log();
Timothy J. Baek's avatar
Timothy J. Baek committed
99
			await settings.set(JSON.parse(localStorage.getItem('settings') ?? '{}'));
100
101
			await modelfiles.set(await getModelfiles(localStorage.token));
			console.log($modelfiles);
Timothy J. Baek's avatar
Timothy J. Baek committed
102

Timothy J. Baek's avatar
Timothy J. Baek committed
103
104
			modelfiles.subscribe(async () => {
				// should fetch models
105
				await models.set(await getModels());
Timothy J. Baek's avatar
Timothy J. Baek committed
106
			});
107

Timothy J. Baek's avatar
Timothy J. Baek committed
108
109
110
			await setOllamaVersion();
			await tick();
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
111

Timothy J. Baek's avatar
Timothy J. Baek committed
112
113
		loaded = true;
	});
114
115
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
116
{#if loaded}
Timothy J. Baek's avatar
Timothy J. Baek committed
117
	<div class="app relative">
118
		{#if !['user', 'admin'].includes($user.role)}
119
			<div class="fixed w-full h-full flex z-50">
120
				<div
Timothy J. Baek's avatar
Timothy J. Baek committed
121
					class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
				>
					<div class="m-auto pb-44 flex flex-col justify-center">
						<div class="max-w-md">
							<div class="text-center dark:text-white text-2xl font-medium z-50">
								Account Activation Pending<br /> Contact Admin for WebUI Access
							</div>

							<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
								Your account status is currently pending activation. To access the WebUI, please
								reach out to the administrator. Admins can manage user statuses from the Admin
								Panel.
							</div>

							<div class=" mt-6 mx-auto relative group w-fit">
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
137
									class="relative z-20 flex px-5 py-2 rounded-full bg-white border border-gray-100 dark:border-none hover:bg-gray-100 transition font-medium text-sm"
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
									on:click={async () => {
										location.href = '/';
									}}
								>
									Check Again
								</button>

								<button
									class="text-xs text-center w-full mt-2 text-gray-400 underline"
									on:click={async () => {
										localStorage.removeItem('token');
										location.href = '/auth';
									}}>Sign Out</button
								>
							</div>
						</div>
					</div>
				</div>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
157
		{:else if checkVersion(REQUIRED_OLLAMA_VERSION, ollamaVersion ?? '0')}
158
			<div class="fixed w-full h-full flex z-50">
Timothy J. Baek's avatar
Timothy J. Baek committed
159
				<div
Timothy J. Baek's avatar
Timothy J. Baek committed
160
					class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
Timothy J. Baek's avatar
Timothy J. Baek committed
161
				>
162
163
164
165
166
167
168
169
170
171
172
173
					<div class="m-auto pb-44 flex flex-col justify-center">
						<div class="max-w-md">
							<div class="text-center dark:text-white text-2xl font-medium z-50">
								Connection Issue or Update Needed
							</div>

							<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
								Oops! It seems like your Ollama needs a little attention. <br
									class=" hidden sm:flex"
								/>We've detected either a connection hiccup or observed that you're using an older
								version. Ensure you're on the latest Ollama version
								<br class=" hidden sm:flex" />(version
Timothy J. Baek's avatar
Timothy J. Baek committed
174
175
								<span class=" dark:text-white font-medium">{REQUIRED_OLLAMA_VERSION} or higher</span
								>) or check your connection.
176
177
178
179
							</div>

							<div class=" mt-6 mx-auto relative group w-fit">
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
180
									class="relative z-20 flex px-5 py-2 rounded-full bg-white border border-gray-100 dark:border-none hover:bg-gray-100 transition font-medium text-sm"
181
									on:click={async () => {
182
183
										location.href = '/';
										// await setOllamaVersion();
184
185
186
187
188
189
190
191
									}}
								>
									Check Again
								</button>

								<button
									class="text-xs text-center w-full mt-2 text-gray-400 underline"
									on:click={async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
192
										await setOllamaVersion(REQUIRED_OLLAMA_VERSION);
193
									}}>Close</button
194
195
196
197
198
199
200
201
202
								>
							</div>
						</div>
					</div>
				</div>
			</div>
		{:else if localDBChats.length > 0}
			<div class="fixed w-full h-full flex z-50">
				<div
Timothy J. Baek's avatar
Timothy J. Baek committed
203
					class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
204
205
206
207
208
209
210
211
212
213
214
				>
					<div class="m-auto pb-44 flex flex-col justify-center">
						<div class="max-w-md">
							<div class="text-center dark:text-white text-2xl font-medium z-50">
								Important Update<br /> Action Required for Chat Log Storage
							</div>

							<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
								Saving chat logs directly to your browser's storage is no longer supported. Please
								take a moment to download and delete your chat logs by clicking the button below.
								Don't worry, you can easily re-import your chat logs to the backend through <span
Timothy J. Baek's avatar
Timothy J. Baek committed
215
									class="font-semibold dark:text-white">Settings > Chats > Import Chats</span
216
217
218
219
220
221
								>. This ensures that your valuable conversations are securely saved to your backend
								database. Thank you!
							</div>

							<div class=" mt-6 mx-auto relative group w-fit">
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
222
									class="relative z-20 flex px-5 py-2 rounded-full bg-white border border-gray-100 dark:border-none hover:bg-gray-100 transition font-medium text-sm"
223
224
225
226
227
228
229
230
									on:click={async () => {
										let blob = new Blob([JSON.stringify(localDBChats)], {
											type: 'application/json'
										});
										saveAs(blob, `chat-export-${Date.now()}.json`);

										const tx = DB.transaction('chats', 'readwrite');
										await Promise.all([tx.store.clear(), tx.done]);
231
										await deleteDB('Chats');
232
233
234
235
236
237
238
239
240
241
242
243

										localDBChats = [];
									}}
								>
									Download & Delete
								</button>

								<button
									class="text-xs text-center w-full mt-2 text-gray-400 underline"
									on:click={async () => {
										localDBChats = [];
									}}>Close</button
244
245
								>
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
246
247
248
249
250
251
						</div>
					</div>
				</div>
			</div>
		{/if}

252
253
254
255
256
257
258
259
		<div
			class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-800 min-h-screen overflow-auto flex flex-row"
		>
			<Sidebar />
			<SettingsModal bind:show={$showSettings} />
			<slot />
		</div>
	</div>
260
{/if}
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304

<style>
	.loading {
		display: inline-block;
		clip-path: inset(0 1ch 0 0);
		animation: l 1s steps(3) infinite;
		letter-spacing: -0.5px;
	}

	@keyframes l {
		to {
			clip-path: inset(0 -1ch 0 0);
		}
	}

	pre[class*='language-'] {
		position: relative;
		overflow: auto;

		/* make space  */
		margin: 5px 0;
		padding: 1.75rem 0 1.75rem 1rem;
		border-radius: 10px;
	}

	pre[class*='language-'] button {
		position: absolute;
		top: 5px;
		right: 5px;

		font-size: 0.9rem;
		padding: 0.15rem;
		background-color: #828282;

		border: ridge 1px #7b7b7c;
		border-radius: 5px;
		text-shadow: #c4c4c4 0 0 2px;
	}

	pre[class*='language-'] button:hover {
		cursor: pointer;
		background-color: #bcbabb;
	}
</style>