General.svelte 10.5 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
<script lang="ts">
Jannik Streidl's avatar
Jannik Streidl committed
2
	import { toast } from 'svelte-sonner';
Timothy J. Baek's avatar
Timothy J. Baek committed
3
	import { createEventDispatcher, onMount } from 'svelte';
4
	import { theme, setTheme } from '../../../stores/index';
Timothy J. Baek's avatar
Timothy J. Baek committed
5
6
7
	const dispatch = createEventDispatcher();

	import { models, user } from '$lib/stores';
8
 
Timothy J. Baek's avatar
Timothy J. Baek committed
9
10
	import AdvancedParams from './Advanced/AdvancedParams.svelte';

Timothy J. Baek's avatar
Timothy J. Baek committed
11
12
13
14
15
	export let saveSettings: Function;
	export let getModels: Function;

	// General
	let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light'];
16
17
18
	let selectedTheme = 'system';
	let actualTheme: string;
	$: actualTheme = $theme;
Timothy J. Baek's avatar
Timothy J. Baek committed
19
20
21
	let notificationEnabled = false;
	let system = '';

Timothy J. Baek's avatar
Timothy J. Baek committed
22
	let showAdvanced = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
23

24
25
26
27
28
	function applyTheme(theme: string) { // only apply visually
        let themeToApply = theme;
        if (theme === 'system') {
            themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        }
29

30
31
32
33
34
35
36
        themes
            .filter((e) => e !== themeToApply)
            .forEach((e) => {
                e.split(' ').forEach((e) => {
                    document.documentElement.classList.remove(e);
                });
            });
37

38
39
40
        themeToApply.split(' ').forEach((e) => {
            document.documentElement.classList.add(e);
        });
41
42

		console.log(theme)
43
    }
44

Timothy J. Baek's avatar
Timothy J. Baek committed
45
46
47
48
49
50
51
52
53
54
55
56
57
	const toggleNotification = async () => {
		const permission = await Notification.requestPermission();

		if (permission === 'granted') {
			notificationEnabled = !notificationEnabled;
			saveSettings({ notificationEnabled: notificationEnabled });
		} else {
			toast.error(
				'Response notifications cannot be activated as the website permissions have been denied. Please visit your browser settings to grant the necessary access.'
			);
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
58
59
60
	// Advanced
	let requestFormat = '';
	let keepAlive = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
61

Timothy J. Baek's avatar
Timothy J. Baek committed
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
	let options = {
		// Advanced
		seed: 0,
		temperature: '',
		repeat_penalty: '',
		repeat_last_n: '',
		mirostat: '',
		mirostat_eta: '',
		mirostat_tau: '',
		top_k: '',
		top_p: '',
		stop: '',
		tfs_z: '',
		num_ctx: '',
		num_predict: ''
Timothy J. Baek's avatar
Timothy J. Baek committed
77
78
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
79
80
81
82
83
	const toggleRequestFormat = async () => {
		if (requestFormat === '') {
			requestFormat = 'json';
		} else {
			requestFormat = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
84
85
		}

Timothy J. Baek's avatar
Timothy J. Baek committed
86
87
88
89
		saveSettings({ requestFormat: requestFormat !== '' ? requestFormat : undefined });
	};

	onMount(async () => {
90
91
92
		selectedTheme = localStorage.getItem('theme') ?? 'system';
		applyTheme(selectedTheme);

Timothy J. Baek's avatar
Timothy J. Baek committed
93
94
95
96
		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');

		notificationEnabled = settings.notificationEnabled ?? false;
		system = settings.system ?? '';
Timothy J. Baek's avatar
Timothy J. Baek committed
97
98
99
100
101
102
103
104
105
106
107
108

		requestFormat = settings.requestFormat ?? '';
		keepAlive = settings.keepAlive ?? null;

		options.seed = settings.seed ?? 0;
		options.temperature = settings.temperature ?? '';
		options.repeat_penalty = settings.repeat_penalty ?? '';
		options.top_k = settings.top_k ?? '';
		options.top_p = settings.top_p ?? '';
		options.num_ctx = settings.num_ctx ?? '';
		options = { ...options, ...settings.options };
		options.stop = (settings?.options?.stop ?? []).join(',');
Timothy J. Baek's avatar
Timothy J. Baek committed
109
	});
110
111
112
113
114
115
116

	function handleThemeChange(newTheme: string) {
        selectedTheme = newTheme;
        setTheme(newTheme); // Update the store
        localStorage.setItem('theme', newTheme); // Persist the theme selection
        applyTheme(newTheme); // Apply the selected theme
    }
Timothy J. Baek's avatar
Timothy J. Baek committed
117
118
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
119
<div class="flex flex-col h-full justify-between text-sm">
Timothy J. Baek's avatar
Timothy J. Baek committed
120
	<div class="  pr-1.5 overflow-y-scroll max-h-[20.5rem]">
Timothy J. Baek's avatar
Timothy J. Baek committed
121
122
123
124
125
126
127
		<div class="">
			<div class=" mb-1 text-sm font-medium">WebUI Settings</div>

			<div class=" py-0.5 flex w-full justify-between">
				<div class=" self-center text-xs font-medium">Theme</div>
				<div class="flex items-center relative">
					<div class=" absolute right-16">
128
						{#if actualTheme === 'dark'}
Timothy J. Baek's avatar
Timothy J. Baek committed
129
130
131
132
133
134
135
136
137
138
139
140
							<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>
141
						{:else if actualTheme === 'light'}
Timothy J. Baek's avatar
Timothy J. Baek committed
142
143
144
145
146
147
148
149
150
151
152
153
							<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>
						{/if}
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
154

Timothy J. Baek's avatar
Timothy J. Baek committed
155
156
					<select
						class="w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
157
						bind:value={selectedTheme}
Timothy J. Baek's avatar
Timothy J. Baek committed
158
						placeholder="Select a theme"
159
						on:change="{() => handleThemeChange(selectedTheme)}"
Timothy J. Baek's avatar
Timothy J. Baek committed
160
					>
161
						<option value="system">System</option>
Timothy J. Baek's avatar
Timothy J. Baek committed
162
163
164
165
166
167
						<option value="dark">Dark</option>
						<option value="light">Light</option>
						<option value="rose-pine dark">Rosé Pine</option>
						<option value="rose-pine-dawn light">Rosé Pine Dawn</option>
					</select>
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
168
169
			</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
170
171
172
			<div>
				<div class=" py-0.5 flex w-full justify-between">
					<div class=" self-center text-xs font-medium">Notification</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
173

Timothy J. Baek's avatar
Timothy J. Baek committed
174
175
176
177
178
179
180
181
182
183
184
185
186
187
					<button
						class="p-1 px-3 text-xs flex rounded transition"
						on:click={() => {
							toggleNotification();
						}}
						type="button"
					>
						{#if notificationEnabled === true}
							<span class="ml-2 self-center">On</span>
						{:else}
							<span class="ml-2 self-center">Off</span>
						{/if}
					</button>
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
188
189
190
			</div>
		</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
191
192
		<hr class=" dark:border-gray-700 my-3" />

Timothy J. Baek's avatar
Timothy J. Baek committed
193
		<div>
Timothy J. Baek's avatar
Timothy J. Baek committed
194
195
196
			<div class=" my-2.5 text-sm font-medium">System Prompt</div>
			<textarea
				bind:value={system}
Timothy J. Baek's avatar
Timothy J. Baek committed
197
				class="w-full rounded-lg p-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none resize-none"
Timothy J. Baek's avatar
Timothy J. Baek committed
198
199
200
201
202
203
204
				rows="4"
			/>
		</div>

		<div class="mt-2 space-y-3 pr-1.5">
			<div class="flex justify-between items-center text-sm">
				<div class="  font-medium">Advanced Parameters</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
205
				<button
Timothy J. Baek's avatar
Timothy J. Baek committed
206
207
					class=" text-xs font-medium text-gray-500"
					type="button"
Timothy J. Baek's avatar
Timothy J. Baek committed
208
					on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
209
210
						showAdvanced = !showAdvanced;
					}}>{showAdvanced ? 'Hide' : 'Show'}</button
Timothy J. Baek's avatar
Timothy J. Baek committed
211
212
213
				>
			</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
			{#if showAdvanced}
				<AdvancedParams bind:options />
				<hr class=" dark:border-gray-700" />

				<div class=" py-1 w-full justify-between">
					<div class="flex w-full justify-between">
						<div class=" self-center text-xs font-medium">Keep Alive</div>

						<button
							class="p-1 px-3 text-xs flex rounded transition"
							type="button"
							on:click={() => {
								keepAlive = keepAlive === null ? '5m' : null;
							}}
						>
							{#if keepAlive === null}
								<span class="ml-2 self-center"> Default </span>
							{:else}
								<span class="ml-2 self-center"> Custom </span>
							{/if}
						</button>
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
236

Timothy J. Baek's avatar
Timothy J. Baek committed
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
					{#if keepAlive !== null}
						<div class="flex mt-1 space-x-2">
							<input
								class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
								type="text"
								placeholder={`e.g.) "30s","10m". Valid time units are "s", "m", "h".`}
								bind:value={keepAlive}
							/>
						</div>
					{/if}
				</div>

				<div>
					<div class=" py-1 flex w-full justify-between">
						<div class=" self-center text-sm font-medium">Request Mode</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
252

Timothy J. Baek's avatar
Timothy J. Baek committed
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
						<button
							class="p-1 px-3 text-xs flex rounded transition"
							on:click={() => {
								toggleRequestFormat();
							}}
						>
							{#if requestFormat === ''}
								<span class="ml-2 self-center"> Default </span>
							{:else if requestFormat === 'json'}
								<!-- <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"> JSON </span>
							{/if}
						</button>
					</div>
				</div>
			{/if}
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
279
280
281
282
283
284
285
	</div>

	<div class="flex justify-end pt-3 text-sm font-medium">
		<button
			class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
			on:click={() => {
				saveSettings({
Timothy J. Baek's avatar
Timothy J. Baek committed
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
					system: system !== '' ? system : undefined,
					options: {
						seed: (options.seed !== 0 ? options.seed : undefined) ?? undefined,
						stop: options.stop !== '' ? options.stop.split(',').filter((e) => e) : undefined,
						temperature: options.temperature !== '' ? options.temperature : undefined,
						repeat_penalty: options.repeat_penalty !== '' ? options.repeat_penalty : undefined,
						repeat_last_n: options.repeat_last_n !== '' ? options.repeat_last_n : undefined,
						mirostat: options.mirostat !== '' ? options.mirostat : undefined,
						mirostat_eta: options.mirostat_eta !== '' ? options.mirostat_eta : undefined,
						mirostat_tau: options.mirostat_tau !== '' ? options.mirostat_tau : undefined,
						top_k: options.top_k !== '' ? options.top_k : undefined,
						top_p: options.top_p !== '' ? options.top_p : undefined,
						tfs_z: options.tfs_z !== '' ? options.tfs_z : undefined,
						num_ctx: options.num_ctx !== '' ? options.num_ctx : undefined,
						num_predict: options.num_predict !== '' ? options.num_predict : undefined
					},
					keepAlive: keepAlive ? (isNaN(keepAlive) ? keepAlive : parseInt(keepAlive)) : undefined
Timothy J. Baek's avatar
Timothy J. Baek committed
303
304
305
306
307
308
309
310
				});
				dispatch('save');
			}}
		>
			Save
		</button>
	</div>
</div>