General.svelte 12.8 KB
Newer Older
1
2
<script lang="ts">
	import { getDocs } from '$lib/apis/documents';
3
	import {
Timothy J. Baek's avatar
Timothy J. Baek committed
4
5
		getRAGConfig,
		updateRAGConfig,
6
		getQuerySettings,
7
		scanDocs,
Timothy J. Baek's avatar
Timothy J. Baek committed
8
		updateQuerySettings,
9
10
11
		resetVectorDB,
		getEmbeddingModel,
		updateEmbeddingModel
12
	} from '$lib/apis/rag';
Timothy J. Baek's avatar
Timothy J. Baek committed
13

14
	import { documents } from '$lib/stores';
15
	import { onMount, getContext } from 'svelte';
Jannik Streidl's avatar
Jannik Streidl committed
16
	import { toast } from 'svelte-sonner';
17

18
19
	import Tooltip from '$lib/components/common/Tooltip.svelte';

20
21
	const i18n = getContext('i18n');

22
	export let saveHandler: Function;
Timothy J. Baek's avatar
Timothy J. Baek committed
23
24

	let loading = false;
25
	let loading1 = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
26

Timothy J. Baek's avatar
Timothy J. Baek committed
27
28
	let showResetConfirm = false;

Timothy J. Baek's avatar
Timothy J. Baek committed
29
30
	let chunkSize = 0;
	let chunkOverlap = 0;
Timothy J. Baek's avatar
Timothy J. Baek committed
31
	let pdfExtractImages = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
32

33
34
35
36
	let querySettings = {
		template: '',
		k: 4
	};
37

38
	let embeddingModel = {
Self Denial's avatar
Self Denial committed
39
		embedding_model: ''
40
41
	};

42
	const scanHandler = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
43
		loading = true;
44
		const res = await scanDocs(localStorage.token);
Timothy J. Baek's avatar
Timothy J. Baek committed
45
		loading = false;
46
47
48

		if (res) {
			await documents.set(await getDocs(localStorage.token));
49
			toast.success($i18n.t('Scan complete!'));
50
51
52
		}
	};

53
	const embeddingModelUpdateHandler = async () => {
54
55
56
57
58
59
60
		if ((embeddingModel.embedding_model.split("/").length -1) > 1) {
			toast.error($i18n.t('Model filesystem path detected. Model shortname is required for update, cannot continue.', ));
			return;
		}

		console.log('Update embedding model attempt:', embeddingModel.embedding_model);

61
62
63
64
65
66
		loading1 = true;
		const res = await updateEmbeddingModel(localStorage.token, embeddingModel);
		loading1 = false;

		if (res) {
			console.log('embeddingModelUpdateHandler:', res);
67
68
69
70
71
72
73
			if (res.status === true) {
				toast.success(
					$i18n.t('Model {{embedding_model}} update complete!', res),
					{
						duration: 1000 * 10,
					}
				);
74
			} else {
75
76
77
78
79
80
				toast.error(
					$i18n.t('Model {{embedding_model}} update failed or not required!', res),
                                        {
						duration: 1000 * 10,
                                        }
				);
81
82
83
84
			}
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
85
	const submitHandler = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
86
87
88
89
90
91
92
		const res = await updateRAGConfig(localStorage.token, {
			pdf_extract_images: pdfExtractImages,
			chunk: {
				chunk_overlap: chunkOverlap,
				chunk_size: chunkSize
			}
		});
93
		querySettings = await updateQuerySettings(localStorage.token, querySettings);
Timothy J. Baek's avatar
Timothy J. Baek committed
94
95
96
	};

	onMount(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
97
		const res = await getRAGConfig(localStorage.token);
Timothy J. Baek's avatar
Timothy J. Baek committed
98
99

		if (res) {
Timothy J. Baek's avatar
Timothy J. Baek committed
100
101
102
103
			pdfExtractImages = res.pdf_extract_images;

			chunkSize = res.chunk.chunk_size;
			chunkOverlap = res.chunk.chunk_overlap;
Timothy J. Baek's avatar
Timothy J. Baek committed
104
		}
105

106
107
		embeddingModel = await getEmbeddingModel(localStorage.token);

108
		querySettings = await getQuerySettings(localStorage.token);
Timothy J. Baek's avatar
Timothy J. Baek committed
109
	});
110
111
112
113
114
</script>

<form
	class="flex flex-col h-full justify-between space-y-3 text-sm"
	on:submit|preventDefault={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
115
		submitHandler();
116
117
118
119
120
		saveHandler();
	}}
>
	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
		<div>
121
			<div class=" mb-2 text-sm font-medium">{$i18n.t('General Settings')}</div>
122
123

			<div class="  flex w-full justify-between">
124
125
126
				<div class=" self-center text-xs font-medium">
					{$i18n.t('Scan for documents from {{path}}', { path: '/data/docs' })}
				</div>
127
128

				<button
Timothy J. Baek's avatar
Timothy J. Baek committed
129
130
131
					class=" self-center text-xs p-1 px-3 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 rounded flex flex-row space-x-1 items-center {loading
						? ' cursor-not-allowed'
						: ''}"
132
133
134
135
136
					on:click={() => {
						scanHandler();
						console.log('check');
					}}
					type="button"
Timothy J. Baek's avatar
Timothy J. Baek committed
137
					disabled={loading}
138
				>
139
					<div class="self-center font-medium">{$i18n.t('Scan')}</div>
140

Timothy J. Baek's avatar
Timothy J. Baek committed
141
					<!-- <svg
142
143
144
145
146
147
148
149
150
151
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 16 16"
						fill="currentColor"
						class="w-3 h-3"
					>
						<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"
						/>
Timothy J. Baek's avatar
Timothy J. Baek committed
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
					</svg> -->

					{#if loading}
						<div class="ml-3 self-center">
							<svg
								class=" w-3 h-3"
								viewBox="0 0 24 24"
								fill="currentColor"
								xmlns="http://www.w3.org/2000/svg"
								><style>
									.spinner_ajPY {
										transform-origin: center;
										animation: spinner_AtaB 0.75s infinite linear;
									}
									@keyframes spinner_AtaB {
										100% {
											transform: rotate(360deg);
										}
									}
								</style><path
									d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
									opacity=".25"
								/><path
									d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
									class="spinner_ajPY"
								/></svg
							>
						</div>
					{/if}
181
				</button>
182
183
			</div>

184
		</div>
185

186
		<hr class=" dark:border-gray-700" />
187

188
189
190
191
192
		<div>
			<div class="  flex w-full justify-between">
				<Tooltip content={
					$i18n.t('Embedding model: {{embedding_model}}', embeddingModel)
				}>
193

194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
					<div class=" self-center text-xs font-medium">
						{$i18n.t('Update embedding model {{embedding_model}}', { embedding_model: embeddingModel.embedding_model.slice(-40) })}
					</div>
				</Tooltip>

				<Tooltip content={
					$i18n.t('Understand that updating or changing your embedding model requires reset of the vector database and re-import of all documents. You have been warned!')
				}>

					<button
						class=" self-center text-xs p-1 px-3 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 rounded flex flex-row space-x-1 items-center {loading1
							? ' cursor-not-allowed'
							: ''}"
						on:click={() => {
							embeddingModelUpdateHandler(embeddingModel);
						}}
						type="button"
						disabled={loading1}
					>
						<div class="self-center font-medium">{$i18n.t('Update')}</div>

						{#if loading1}
							<div class="ml-3 self-center">
								<svg
									class=" w-3 h-3"
									viewBox="0 0 24 24"
									fill="currentColor"
									xmlns="http://www.w3.org/2000/svg"
									><style>
										.spinner_ajPY {
											transform-origin: center;
											animation: spinner_AtaB 0.75s infinite linear;
226
										}
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
										@keyframes spinner_AtaB {
											100% {
												transform: rotate(360deg);
											}
										}
									</style><path
										d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
										opacity=".25"
									/><path
										d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
										class="spinner_ajPY"
									/></svg
								>
							</div>
						{/if}
					</button>
				</Tooltip>
244
245
			</div>
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
246
247
248
249

		<hr class=" dark:border-gray-700" />

		<div class=" ">
250
			<div class=" text-sm font-medium">{$i18n.t('Chunk Params')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
251
252
253

			<div class=" flex">
				<div class="  flex w-full justify-between">
254
					<div class="self-center text-xs font-medium min-w-fit">{$i18n.t('Chunk Size')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
255
256
257
258
259

					<div class="self-center p-3">
						<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="number"
Ased Mammad's avatar
Ased Mammad committed
260
							placeholder={$i18n.t('Enter Chunk Size')}
Timothy J. Baek's avatar
Timothy J. Baek committed
261
262
263
264
265
266
267
268
							bind:value={chunkSize}
							autocomplete="off"
							min="0"
						/>
					</div>
				</div>

				<div class="flex w-full">
269
					<div class=" self-center text-xs font-medium min-w-fit">{$i18n.t('Chunk Overlap')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
270
271
272
273
274

					<div class="self-center p-3">
						<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="number"
Ased Mammad's avatar
Ased Mammad committed
275
							placeholder={$i18n.t('Enter Chunk Overlap')}
Timothy J. Baek's avatar
Timothy J. Baek committed
276
277
278
279
280
281
282
							bind:value={chunkOverlap}
							autocomplete="off"
							min="0"
						/>
					</div>
				</div>
			</div>
283
284

			<div>
285
286
287
288
289
290
291
292
293
294
295
296
297
				<div class="flex justify-between items-center text-xs">
					<div class=" text-xs font-medium">{$i18n.t('PDF Extract Images (OCR)')}</div>

					<button
						class=" text-xs font-medium text-gray-500"
						type="button"
						on:click={() => {
							pdfExtractImages = !pdfExtractImages;
						}}>{pdfExtractImages ? $i18n.t('On') : $i18n.t('Off')}</button
					>
				</div>
			</div>
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
298

299
		<div>
Ased Mammad's avatar
Ased Mammad committed
300
			<div class=" text-sm font-medium">{$i18n.t('Query Params')}</div>
301
302
303

			<div class=" flex">
				<div class="  flex w-full justify-between">
Ased Mammad's avatar
Ased Mammad committed
304
					<div class="self-center text-xs font-medium flex-1">{$i18n.t('Top K')}</div>
305
306
307
308
309

					<div class="self-center p-3">
						<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="number"
Ased Mammad's avatar
Ased Mammad committed
310
							placeholder={$i18n.t('Enter Top K')}
311
312
313
314
315
316
317
318
							bind:value={querySettings.k}
							autocomplete="off"
							min="0"
						/>
					</div>
				</div>

				<!-- <div class="flex w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
319
320
321
322
323
324
325
326
327
328
329
330
331
						<div class=" self-center text-xs font-medium min-w-fit">Chunk Overlap</div>
	
						<div class="self-center p-3">
							<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="number"
								placeholder="Enter Chunk Overlap"
								bind:value={chunkOverlap}
								autocomplete="off"
								min="0"
							/>
						</div>
					</div> -->
332
333
			</div>

334
			<div>
335
				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('RAG Template')}</div>
336
				<textarea
337
					bind:value={querySettings.template}
338
339
340
341
					class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
					rows="4"
				/>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
342
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
343
344
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
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436

		<hr class=" dark:border-gray-700" />

		{#if showResetConfirm}
			<div class="flex justify-between rounded-md items-center py-2 px-3.5 w-full transition">
				<div class="flex items-center space-x-3">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 16 16"
						fill="currentColor"
						class="w-4 h-4"
					>
						<path d="M2 3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3Z" />
						<path
							fill-rule="evenodd"
							d="M13 6H3v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V6ZM5.72 7.47a.75.75 0 0 1 1.06 0L8 8.69l1.22-1.22a.75.75 0 1 1 1.06 1.06L9.06 9.75l1.22 1.22a.75.75 0 1 1-1.06 1.06L8 10.81l-1.22 1.22a.75.75 0 0 1-1.06-1.06l1.22-1.22-1.22-1.22a.75.75 0 0 1 0-1.06Z"
							clip-rule="evenodd"
						/>
					</svg>
					<span>{$i18n.t('Are you sure?')}</span>
				</div>

				<div class="flex space-x-1.5 items-center">
					<button
						class="hover:text-white transition"
						on:click={() => {
							const res = resetVectorDB(localStorage.token).catch((error) => {
								toast.error(error);
								return null;
							});

							if (res) {
								toast.success($i18n.t('Success'));
							}

							showResetConfirm = false;
						}}
					>
						<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="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
								clip-rule="evenodd"
							/>
						</svg>
					</button>
					<button
						class="hover:text-white transition"
						on:click={() => {
							showResetConfirm = false;
						}}
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							class="w-4 h-4"
						>
							<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>
			</div>
		{:else}
			<button
				class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
				on:click={() => {
					showResetConfirm = true;
				}}
			>
				<div class=" self-center mr-3">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 16 16"
						fill="currentColor"
						class="w-4 h-4"
					>
						<path
							fill-rule="evenodd"
							d="M3.5 2A1.5 1.5 0 0 0 2 3.5v9A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 12.5 4H9.621a1.5 1.5 0 0 1-1.06-.44L7.439 2.44A1.5 1.5 0 0 0 6.38 2H3.5Zm6.75 7.75a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0 0 1.5h4.5Z"
							clip-rule="evenodd"
						/>
					</svg>
				</div>
				<div class=" self-center text-sm font-medium">{$i18n.t('Reset Vector Storage')}</div>
			</button>
		{/if}
437
438
	</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
439
	<div class="flex justify-end pt-3 text-sm font-medium">
440
441
442
443
		<button
			class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
			type="submit"
		>
Jannik Streidl's avatar
Jannik Streidl committed
444
			{$i18n.t('Save')}
445
		</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
446
	</div>
447
</form>