SettingsModal.svelte 24.2 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
<script lang="ts">
Timothy J. Baek's avatar
Timothy J. Baek committed
2
	import sha256 from 'js-sha256';
Timothy J. Baek's avatar
Timothy J. Baek committed
3
	import Modal from '../common/Modal.svelte';
4

5
	import { API_BASE_URL as BUILD_TIME_API_BASE_URL } from '$lib/constants';
6
7
	import toast from 'svelte-french-toast';

Timothy J. Baek's avatar
Timothy J. Baek committed
8
	export let show = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
9
	export let saveSettings: Function;
10
11
	export let getModelTags: Function;

12
13
14
	let selectedTab = 'general';

	// General
15
	let API_BASE_URL = BUILD_TIME_API_BASE_URL;
Timothy J. Baek's avatar
Timothy J. Baek committed
16
	let system = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
17
	let theme = 'dark';
Timothy J. Baek's avatar
Timothy J. Baek committed
18

19
	// Models
20
21
22
	let modelTag = '';
	let deleteModelTag = '';
	let digest = '';
23
24
25
	let pullProgress = null;

	// Advanced
26
	let seed = 0;
27
	let temperature = 0.8;
28
29
30
	let repeat_penalty = 1.1;
	let top_k = 40;
	let top_p = 0.9;
31

Timothy J. Baek's avatar
Timothy J. Baek committed
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
	// Addons
	let gravatarEmail = '';
	let OPENAI_API_KEY = '';

	function getGravatarURL(email) {
		// Trim leading and trailing whitespace from
		// an email address and force all characters
		// to lower case
		const address = String(email).trim().toLowerCase();

		// Create a SHA256 hash of the final string
		const hash = sha256(address);

		// Grab the actual image URL
		return `https://www.gravatar.com/avatar/${hash}`;
	}

49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
	const splitStream = (splitOn) => {
		let buffer = '';
		return new TransformStream({
			transform(chunk, controller) {
				buffer += chunk;
				const parts = buffer.split(splitOn);
				parts.slice(0, -1).forEach((part) => controller.enqueue(part));
				buffer = parts[parts.length - 1];
			},
			flush(controller) {
				if (buffer) controller.enqueue(buffer);
			}
		});
	};

64
	const checkOllamaConnection = async () => {
65
66
67
		if (API_BASE_URL === '') {
			API_BASE_URL = BUILD_TIME_API_BASE_URL;
		}
68
69
70
71
		const res = await getModelTags(API_BASE_URL);

		if (res) {
			toast.success('Server connection verified');
72
73
74
			saveSettings({
				API_BASE_URL: API_BASE_URL
			});
75
76
77
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
78
79
80
81
82
83
84
85
86
87
88
89
90
	const toggleTheme = async () => {
		if (theme === 'dark') {
			theme = 'light';
		} else {
			theme = 'dark';
		}

		localStorage.theme = theme;

		document.documentElement.classList.remove(theme === 'dark' ? 'light' : 'dark');
		document.documentElement.classList.add(theme);
	};

91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
	const pullModelHandler = async () => {
		const res = await fetch(`${API_BASE_URL}/pull`, {
			method: 'POST',
			headers: {
				'Content-Type': 'text/event-stream'
			},
			body: JSON.stringify({
				name: modelTag
			})
		});

		const reader = res.body
			.pipeThrough(new TextDecoderStream())
			.pipeThrough(splitStream('\n'))
			.getReader();

		while (true) {
			const { value, done } = await reader.read();
			if (done) break;

			try {
				let lines = value.split('\n');

				for (const line of lines) {
					if (line !== '') {
						console.log(line);
						let data = JSON.parse(line);
						console.log(data);

						if (data.error) {
							throw data.error;
						}
						if (data.status) {
							if (!data.status.includes('downloading')) {
								toast.success(data.status);
							} else {
								digest = data.digest;
								if (data.completed) {
									pullProgress = Math.round((data.completed / data.total) * 1000) / 10;
								} else {
									pullProgress = 100;
								}
							}
						}
					}
				}
			} catch (error) {
				console.log(error);
				toast.error(error);
			}
		}

		modelTag = '';
		await getModelTags();
	};

	const deleteModelHandler = async () => {
		const res = await fetch(`${API_BASE_URL}/delete`, {
			method: 'DELETE',
			headers: {
				'Content-Type': 'text/event-stream'
			},
			body: JSON.stringify({
				name: deleteModelTag
			})
		});

		const reader = res.body
			.pipeThrough(new TextDecoderStream())
			.pipeThrough(splitStream('\n'))
			.getReader();

		while (true) {
			const { value, done } = await reader.read();
			if (done) break;

			try {
				let lines = value.split('\n');

				for (const line of lines) {
					if (line !== '' && line !== 'null') {
						console.log(line);
						let data = JSON.parse(line);
						console.log(data);

						if (data.error) {
							throw data.error;
						}
						if (data.status) {
						}
					} else {
						toast.success(`Deleted ${deleteModelTag}`);
					}
				}
			} catch (error) {
				console.log(error);
				toast.error(error);
			}
		}

		deleteModelTag = '';
		await getModelTags();
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
194

Timothy J. Baek's avatar
Timothy J. Baek committed
195
196
	$: if (show) {
		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
197
198
		console.log(settings);

Timothy J. Baek's avatar
Timothy J. Baek committed
199
		theme = localStorage.theme ?? 'dark';
200
		API_BASE_URL = settings.API_BASE_URL ?? BUILD_TIME_API_BASE_URL;
Timothy J. Baek's avatar
Timothy J. Baek committed
201
		system = settings.system ?? '';
202
203

		seed = settings.seed ?? 0;
Timothy J. Baek's avatar
Timothy J. Baek committed
204
		temperature = settings.temperature ?? 0.8;
205
206
207
		repeat_penalty = settings.repeat_penalty ?? 1.1;
		top_k = settings.top_k ?? 40;
		top_p = settings.top_p ?? 0.9;
Timothy J. Baek's avatar
Timothy J. Baek committed
208
209
210

		OPENAI_API_KEY = settings.OPENAI_API_KEY ?? '';
		gravatarEmail = settings.gravatarEmail ?? '';
Timothy J. Baek's avatar
Timothy J. Baek committed
211
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
212
213
214
</script>

<Modal bind:show>
Timothy J. Baek's avatar
Timothy J. Baek committed
215
216
	<div class="rounded-lg dark:bg-gray-900">
		<div class=" flex justify-between dark:text-gray-300 px-5 py-4">
Timothy J. Baek's avatar
Timothy J. Baek committed
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
			<div class=" text-lg font-medium self-center">Settings</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>
Timothy J. Baek's avatar
Timothy J. Baek committed
236
		<hr class=" dark:border-gray-800" />
Timothy J. Baek's avatar
Timothy J. Baek committed
237

Timothy J. Baek's avatar
Timothy J. Baek committed
238
239
		<div class="flex flex-col md:flex-row w-full p-4 md:space-x-4">
			<div
Timothy J. Baek's avatar
Timothy J. Baek committed
240
				class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-40 dark:text-gray-200 text-xs text-left mb-3 md:mb-0"
Timothy J. Baek's avatar
Timothy J. Baek committed
241
242
			>
				<button
243
					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
Timothy J. Baek's avatar
Timothy J. Baek committed
244
					'general'
Timothy J. Baek's avatar
Timothy J. Baek committed
245
246
						? 'bg-gray-200 dark:bg-gray-700'
						: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
Timothy J. Baek's avatar
Timothy J. Baek committed
247
					on:click={() => {
248
						selectedTab = 'general';
Timothy J. Baek's avatar
Timothy J. Baek committed
249
					}}
Timothy J. Baek's avatar
Timothy J. Baek committed
250
				>
Timothy J. Baek's avatar
Timothy J. Baek committed
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
					<div class=" self-center mr-2">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							class="w-4 h-4"
						>
							<path
								fill-rule="evenodd"
								d="M8.34 1.804A1 1 0 019.32 1h1.36a1 1 0 01.98.804l.295 1.473c.497.144.971.342 1.416.587l1.25-.834a1 1 0 011.262.125l.962.962a1 1 0 01.125 1.262l-.834 1.25c.245.445.443.919.587 1.416l1.473.294a1 1 0 01.804.98v1.361a1 1 0 01-.804.98l-1.473.295a6.95 6.95 0 01-.587 1.416l.834 1.25a1 1 0 01-.125 1.262l-.962.962a1 1 0 01-1.262.125l-1.25-.834a6.953 6.953 0 01-1.416.587l-.294 1.473a1 1 0 01-.98.804H9.32a1 1 0 01-.98-.804l-.295-1.473a6.957 6.957 0 01-1.416-.587l-1.25.834a1 1 0 01-1.262-.125l-.962-.962a1 1 0 01-.125-1.262l.834-1.25a6.957 6.957 0 01-.587-1.416l-1.473-.294A1 1 0 011 10.68V9.32a1 1 0 01.804-.98l1.473-.295c.144-.497.342-.971.587-1.416l-.834-1.25a1 1 0 01.125-1.262l.962-.962A1 1 0 015.38 3.03l1.25.834a6.957 6.957 0 011.416-.587l.294-1.473zM13 10a3 3 0 11-6 0 3 3 0 016 0z"
								clip-rule="evenodd"
							/>
						</svg>
					</div>
					<div class=" self-center">General</div>
				</button>

Timothy J. Baek's avatar
Timothy J. Baek committed
268
				<button
269
270
					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
					'advanced'
Timothy J. Baek's avatar
Timothy J. Baek committed
271
272
						? 'bg-gray-200 dark:bg-gray-700'
						: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
					on:click={() => {
						selectedTab = 'advanced';
					}}
				>
					<div class=" self-center mr-2">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							class="w-4 h-4"
						>
							<path
								d="M17 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM17 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM3.75 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zM4.5 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM10 11a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 11zM10.75 2.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM10 6a2 2 0 100 4 2 2 0 000-4zM3.75 10a2 2 0 100 4 2 2 0 000-4zM16.25 10a2 2 0 100 4 2 2 0 000-4z"
							/>
						</svg>
					</div>
					<div class=" self-center">Advanced</div>
				</button>

				<button
					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
Timothy J. Baek's avatar
Timothy J. Baek committed
294
					'models'
Timothy J. Baek's avatar
Timothy J. Baek committed
295
296
						? 'bg-gray-200 dark:bg-gray-700'
						: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
Timothy J. Baek's avatar
Timothy J. Baek committed
297
					on:click={() => {
298
						selectedTab = 'models';
Timothy J. Baek's avatar
Timothy J. Baek committed
299
300
					}}
				>
Timothy J. Baek's avatar
Timothy J. Baek committed
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
					<div class=" self-center mr-2">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							class="w-4 h-4"
						>
							<path
								fill-rule="evenodd"
								d="M10 1c3.866 0 7 1.79 7 4s-3.134 4-7 4-7-1.79-7-4 3.134-4 7-4zm5.694 8.13c.464-.264.91-.583 1.306-.952V10c0 2.21-3.134 4-7 4s-7-1.79-7-4V8.178c.396.37.842.688 1.306.953C5.838 10.006 7.854 10.5 10 10.5s4.162-.494 5.694-1.37zM3 13.179V15c0 2.21 3.134 4 7 4s7-1.79 7-4v-1.822c-.396.37-.842.688-1.306.953-1.532.875-3.548 1.369-5.694 1.369s-4.162-.494-5.694-1.37A7.009 7.009 0 013 13.179z"
								clip-rule="evenodd"
							/>
						</svg>
					</div>
					<div class=" self-center">Models</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
316
				</button>
317
318

				<button
319
320
					class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
					'addons'
Timothy J. Baek's avatar
Timothy J. Baek committed
321
322
						? 'bg-gray-200 dark:bg-gray-700'
						: ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
323
					on:click={() => {
324
						selectedTab = 'addons';
325
326
327
328
329
330
331
332
333
334
335
336
337
338
					}}
				>
					<div class=" self-center mr-2">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							class="w-4 h-4"
						>
							<path
								d="M12 4.467c0-.405.262-.75.559-1.027.276-.257.441-.584.441-.94 0-.828-.895-1.5-2-1.5s-2 .672-2 1.5c0 .362.171.694.456.953.29.265.544.6.544.994a.968.968 0 01-1.024.974 39.655 39.655 0 01-3.014-.306.75.75 0 00-.847.847c.14.993.242 1.999.306 3.014A.968.968 0 014.447 10c-.393 0-.729-.253-.994-.544C3.194 9.17 2.862 9 2.5 9 1.672 9 1 9.895 1 11s.672 2 1.5 2c.356 0 .683-.165.94-.441.276-.297.622-.559 1.027-.559a.997.997 0 011.004 1.03 39.747 39.747 0 01-.319 3.734.75.75 0 00.64.842c1.05.146 2.111.252 3.184.318A.97.97 0 0010 16.948c0-.394-.254-.73-.545-.995C9.171 15.693 9 15.362 9 15c0-.828.895-1.5 2-1.5s2 .672 2 1.5c0 .356-.165.683-.441.94-.297.276-.559.622-.559 1.027a.998.998 0 001.03 1.005c1.337-.05 2.659-.162 3.961-.337a.75.75 0 00.644-.644c.175-1.302.288-2.624.337-3.961A.998.998 0 0016.967 12c-.405 0-.75.262-1.027.559-.257.276-.584.441-.94.441-.828 0-1.5-.895-1.5-2s.672-2 1.5-2c.362 0 .694.17.953.455.265.291.601.545.995.545a.97.97 0 00.976-1.024 41.159 41.159 0 00-.318-3.184.75.75 0 00-.842-.64c-1.228.164-2.473.271-3.734.319A.997.997 0 0112 4.467z"
							/>
						</svg>
					</div>
339
					<div class=" self-center">Add-ons</div>
340
				</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
341
			</div>
342
			<div class="flex-1 md:min-h-[300px]">
343
				{#if selectedTab === 'general'}
Timothy J. Baek's avatar
Timothy J. Baek committed
344
					<div class="flex flex-col space-y-3">
Timothy J. Baek's avatar
Timothy J. Baek committed
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
						<div>
							<div class=" py-1 flex w-full justify-between">
								<div class=" self-center text-sm font-medium">Theme</div>

								<button
									class="p-1 px-3 text-xs flex rounded transition"
									on:click={() => {
										toggleTheme();
									}}
								>
									{#if theme === 'dark'}
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20"
											fill="currentColor"
											class="w-4 h-4"
										>
											<path
												fill-rule="evenodd"
												d="M7.455 2.004a.75.75 0 01.26.77 7 7 0 009.958 7.967.75.75 0 011.067.853A8.5 8.5 0 116.647 1.921a.75.75 0 01.808.083z"
												clip-rule="evenodd"
											/>
										</svg>

										<span class="ml-2 self-center"> Dark </span>
									{:else}
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20"
											fill="currentColor"
											class="w-4 h-4 self-center"
										>
											<path
												d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
											/>
										</svg>
										<span class="ml-2 self-center"> Light </span>
									{/if}
								</button>
							</div>
						</div>

						<hr class=" dark:border-gray-700" />
388
389
390
391
392
						<div>
							<div class=" mb-2.5 text-sm font-medium">Ollama Server URL</div>
							<div class="flex w-full">
								<div class="flex-1 mr-2">
									<input
Timothy J. Baek's avatar
Timothy J. Baek committed
393
										class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
394
395
396
397
398
										placeholder="Enter URL (e.g. http://localhost:11434/api)"
										bind:value={API_BASE_URL}
									/>
								</div>
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
399
									class="px-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 rounded transition"
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
									on:click={() => {
										checkOllamaConnection();
									}}
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 20 20"
										fill="currentColor"
										class="w-4 h-4"
									>
										<path
											fill-rule="evenodd"
											d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
											clip-rule="evenodd"
										/>
									</svg>
								</button>
							</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
419
							<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
420
								Trouble accessing Ollama? <a
Timothy J. Baek's avatar
Timothy J. Baek committed
421
									class=" text-gray-500 dark:text-gray-300 font-medium"
422
423
424
425
426
427
428
429
									href="https://github.com/ollama-webui/ollama-webui#troubleshooting"
									target="_blank"
								>
									Click here for help.
								</a>
							</div>
						</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
430
						<hr class=" dark:border-gray-700" />
431

Timothy J. Baek's avatar
Timothy J. Baek committed
432
						<div>
433
434
435
							<div class=" mb-2.5 text-sm font-medium">System Prompt</div>
							<textarea
								bind:value={system}
Timothy J. Baek's avatar
Timothy J. Baek committed
436
								class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
437
								rows="4"
Timothy J. Baek's avatar
Timothy J. Baek committed
438
439
							/>
						</div>
440

Timothy J. Baek's avatar
Timothy J. Baek committed
441
442
						<div class="flex justify-end pt-3 text-sm font-medium">
							<button
Timothy J. Baek's avatar
Timothy J. Baek committed
443
								class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
Timothy J. Baek's avatar
Timothy J. Baek committed
444
								on:click={() => {
445
446
447
448
									saveSettings({
										API_BASE_URL: API_BASE_URL === '' ? BUILD_TIME_API_BASE_URL : API_BASE_URL,
										system: system !== '' ? system : undefined
									});
Timothy J. Baek's avatar
Timothy J. Baek committed
449
450
451
452
453
454
455
									show = false;
								}}
							>
								Save
							</button>
						</div>
					</div>
456
457
				{:else if selectedTab === 'models'}
					<div class="flex flex-col space-y-3 text-sm mb-10">
458
459
460
461
462
						<div>
							<div class=" mb-2.5 text-sm font-medium">Pull a model</div>
							<div class="flex w-full">
								<div class="flex-1 mr-2">
									<input
Timothy J. Baek's avatar
Timothy J. Baek committed
463
										class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
464
465
466
467
468
										placeholder="Enter model tag (e.g. mistral:7b)"
										bind:value={modelTag}
									/>
								</div>
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
469
									class="px-3 text-gray-100 bg-emerald-600 hover:bg-emerald-700 rounded transition"
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
									on:click={() => {
										pullModelHandler();
									}}
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 20 20"
										fill="currentColor"
										class="w-4 h-4"
									>
										<path
											d="M10.75 2.75a.75.75 0 00-1.5 0v8.614L6.295 8.235a.75.75 0 10-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V2.75z"
										/>
										<path
											d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z"
										/>
									</svg>
								</button>
							</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
490
							<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
491
								To access the available model names for downloading, <a
Timothy J. Baek's avatar
Timothy J. Baek committed
492
									class=" text-gray-500 dark:text-gray-300 font-medium"
493
									href="https://ollama.ai/library"
494
495
									target="_blank">click here.</a
								>
496
497
							</div>

498
							{#if pullProgress !== null}
499
500
								<div class="mt-2">
									<div class=" mb-2 text-xs">Pull Progress</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
501
									<div class="w-full rounded-full dark:bg-gray-800">
502
										<div
Timothy J. Baek's avatar
Timothy J. Baek committed
503
											class="dark:bg-gray-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
504
											style="width: {Math.max(15, pullProgress ?? 0)}%"
505
										>
506
											{pullProgress ?? 0}%
507
508
										</div>
									</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
509
									<div class="mt-1 text-xs dark:text-gray-700" style="font-size: 0.5rem;">
510
511
512
513
514
										{digest}
									</div>
								</div>
							{/if}
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
515
						<hr class=" dark:border-gray-700" />
516

Timothy J. Baek's avatar
Timothy J. Baek committed
517
						<div>
518
519
520
521
							<div class=" mb-2.5 text-sm font-medium">Delete a model</div>
							<div class="flex w-full">
								<div class="flex-1 mr-2">
									<input
Timothy J. Baek's avatar
Timothy J. Baek committed
522
										class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
523
524
525
526
527
										placeholder="Enter model tag (e.g. mistral:7b)"
										bind:value={deleteModelTag}
									/>
								</div>
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
528
									class="px-3 bg-red-700 hover:bg-red-800 text-gray-100 rounded transition"
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
									on:click={() => {
										deleteModelHandler();
									}}
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 20 20"
										fill="currentColor"
										class="w-4 h-4"
									>
										<path
											fill-rule="evenodd"
											d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z"
											clip-rule="evenodd"
										/>
									</svg>
								</button>
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
547
548
						</div>
					</div>
549
550
				{:else if selectedTab === 'advanced'}
					<div class="flex flex-col h-full justify-between space-y-3 text-sm">
551
552
553
554
555
556
						<div class=" space-y-3">
							<div>
								<div class=" mb-2.5 text-sm font-medium">Seed</div>
								<div class="flex w-full">
									<div class="flex-1">
										<input
Timothy J. Baek's avatar
Timothy J. Baek committed
557
											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
558
559
560
561
562
563
564
565
566
567
											type="number"
											placeholder="Enter Seed"
											bind:value={seed}
											autocomplete="off"
											min="0"
										/>
									</div>
								</div>
							</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
568
							<hr class=" dark:border-gray-700" />
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583

							<div>
								<label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
									<div>Temperature</div>
									<div>
										{temperature}
									</div></label
								>
								<input
									id="steps-range"
									type="range"
									min="0"
									max="1"
									bind:value={temperature}
									step="0.05"
Timothy J. Baek's avatar
Timothy J. Baek committed
584
									class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
								/>
							</div>

							<div>
								<label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
									<div>Repeat Penalty</div>
									<div>
										{repeat_penalty}
									</div></label
								>
								<input
									id="steps-range"
									type="range"
									min="0"
									max="2"
									bind:value={repeat_penalty}
									step="0.05"
Timothy J. Baek's avatar
Timothy J. Baek committed
602
									class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
								/>
							</div>

							<div>
								<label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
									<div>Top K</div>
									<div>
										{top_k}
									</div></label
								>
								<input
									id="steps-range"
									type="range"
									min="0"
									max="100"
									bind:value={top_k}
									step="0.5"
Timothy J. Baek's avatar
Timothy J. Baek committed
620
									class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
								/>
							</div>

							<div>
								<label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
									<div>Top P</div>
									<div>
										{top_p}
									</div></label
								>
								<input
									id="steps-range"
									type="range"
									min="0"
									max="1"
									bind:value={top_p}
									step="0.05"
Timothy J. Baek's avatar
Timothy J. Baek committed
638
									class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
639
640
								/>
							</div>
641
642
643
644
						</div>

						<div class="flex justify-end pt-3 text-sm font-medium">
							<button
Timothy J. Baek's avatar
Timothy J. Baek committed
645
								class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
646
647
								on:click={() => {
									saveSettings({
648
649
650
651
652
										seed: (seed !== 0 ? seed : undefined) ?? undefined,
										temperature: temperature !== 0.8 ? temperature : undefined,
										repeat_penalty: repeat_penalty !== 1.1 ? repeat_penalty : undefined,
										top_k: top_k !== 40 ? top_k : undefined,
										top_p: top_p !== 0.9 ? top_p : undefined
653
654
655
656
657
658
659
660
									});
									show = false;
								}}
							>
								Save
							</button>
						</div>
					</div>
661
				{:else if selectedTab === 'addons'}
Timothy J. Baek's avatar
Timothy J. Baek committed
662
663
664
665
666
667
668
669
670
671
672
					<form
						class="flex flex-col h-full justify-between space-y-3 text-sm"
						on:submit|preventDefault={() => {
							saveSettings({
								gravatarEmail: gravatarEmail !== '' ? gravatarEmail : undefined,
								gravatarUrl: gravatarEmail !== '' ? getGravatarURL(gravatarEmail) : undefined,
								OPENAI_API_KEY: OPENAI_API_KEY !== '' ? OPENAI_API_KEY : undefined
							});
							show = false;
						}}
					>
673
						<div class=" space-y-3">
Timothy J. Baek's avatar
Timothy J. Baek committed
674
675
676
677
678
679
680
							<div>
								<div class=" mb-2.5 text-sm font-medium">
									Gravatar Email <span class=" text-gray-400 text-sm">(optional)</span>
								</div>
								<div class="flex w-full">
									<div class="flex-1">
										<input
Timothy J. Baek's avatar
Timothy J. Baek committed
681
											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
Timothy J. Baek's avatar
Timothy J. Baek committed
682
683
684
685
686
687
688
											placeholder="Enter Your Email"
											bind:value={gravatarEmail}
											autocomplete="off"
											type="email"
										/>
									</div>
								</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
689
								<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
Timothy J. Baek's avatar
Timothy J. Baek committed
690
									Changes user profile image to match your <a
Timothy J. Baek's avatar
Timothy J. Baek committed
691
										class=" text-gray-500 dark:text-gray-300 font-medium"
Timothy J. Baek's avatar
Timothy J. Baek committed
692
693
694
695
696
697
										href="https://gravatar.com/"
										target="_blank">Gravatar.</a
									>
								</div>
							</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
698
							<hr class=" dark:border-gray-700" />
699
700
701
702
703
704
705
							<div>
								<div class=" mb-2.5 text-sm font-medium">
									OpenAI API Key <span class=" text-gray-400 text-sm">(optional)</span>
								</div>
								<div class="flex w-full">
									<div class="flex-1">
										<input
Timothy J. Baek's avatar
Timothy J. Baek committed
706
											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
707
708
709
710
711
712
											placeholder="Enter OpenAI API Key"
											bind:value={OPENAI_API_KEY}
											autocomplete="off"
										/>
									</div>
								</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
713
								<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
714
715
716
717
718
719
720
									Adds optional support for 'gpt-*' models available.
								</div>
							</div>
						</div>

						<div class="flex justify-end pt-3 text-sm font-medium">
							<button
Timothy J. Baek's avatar
Timothy J. Baek committed
721
								class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
Timothy J. Baek's avatar
Timothy J. Baek committed
722
								type="submit"
723
724
725
726
							>
								Save
							</button>
						</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
727
					</form>
Timothy J. Baek's avatar
Timothy J. Baek committed
728
729
				{/if}
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
730
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
731
732
	</div>
</Modal>
733
734
735
736
737
738
739
740
741

<style>
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		/* display: none; <- Crashes Chrome on hover */
		-webkit-appearance: none;
		margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
	}

742
743
744
745
746
747
748
749
750
	.tabs::-webkit-scrollbar {
		display: none; /* for Chrome, Safari and Opera */
	}

	.tabs {
		-ms-overflow-style: none; /* IE and Edge */
		scrollbar-width: none; /* Firefox */
	}

751
752
753
754
	input[type='number'] {
		-moz-appearance: textfield; /* Firefox */
	}
</style>