+page.svelte 15.8 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
<script lang="ts">
2
	import { v4 as uuidv4 } from 'uuid';
Timothy J. Baek's avatar
Timothy J. Baek committed
3
4
	import toast from 'svelte-french-toast';

5
	import { OLLAMA_API_BASE_URL } from '$lib/constants';
6
	import { onMount, tick } from 'svelte';
7
8
	import { splitStream } from '$lib/utils';
	import { goto } from '$app/navigation';
Timothy J. Baek's avatar
Timothy J. Baek committed
9

10
	import { config, modelfiles, user, settings, db, chats, chatId } from '$lib/stores';
11
12
13
14

	import MessageInput from '$lib/components/chat/MessageInput.svelte';
	import Messages from '$lib/components/chat/Messages.svelte';
	import ModelSelector from '$lib/components/chat/ModelSelector.svelte';
15
	import Navbar from '$lib/components/layout/Navbar.svelte';
16
	import { page } from '$app/stores';
17

18
19
	let stopResponseFlag = false;
	let autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
20

Timothy J. Baek's avatar
Timothy J. Baek committed
21
	let selectedModels = [''];
22
23
24
25
26
27
	let selectedModelfile = null;
	$: selectedModelfile =
		selectedModels.length === 1 &&
		$modelfiles.filter((modelfile) => modelfile.tagName === selectedModels[0]).length > 0
			? $modelfiles.filter((modelfile) => modelfile.tagName === selectedModels[0])[0]
			: null;
28

Timothy J. Baek's avatar
Timothy J. Baek committed
29
	let title = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
30
	let prompt = '';
31
	let files = [];
32

33
	let messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
	let history = {
		messages: {},
		currentId: null
	};

	$: if (history.currentId !== null) {
		let _messages = [];

		let currentMessage = history.messages[history.currentId];
		while (currentMessage !== null) {
			_messages.unshift({ ...currentMessage });
			currentMessage =
				currentMessage.parentId !== null ? history.messages[currentMessage.parentId] : null;
		}
		messages = _messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
49
50
	} else {
		messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
51
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
52

Timothy J. Baek's avatar
Timothy J. Baek committed
53
54
55
56
	$: if (files) {
		console.log(files);
	}

57
	onMount(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
58
59
60
61
62
		await chatId.set(uuidv4());

		chatId.subscribe(async () => {
			await initNewChat();
		});
63
64
65
66
67
68
	});

	//////////////////////////
	// Web functions
	//////////////////////////

69
70
	const initNewChat = async () => {
		console.log($chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
71

72
		autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
73

74
75
76
77
78
		title = '';
		messages = [];
		history = {
			messages: {},
			currentId: null
Timothy J. Baek's avatar
Timothy J. Baek committed
79
		};
80
81
82
		selectedModels = $page.url.searchParams.get('models')
			? $page.url.searchParams.get('models')?.split(',')
			: $settings.models ?? [''];
83
84
85
86
87
88
89

		let _settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
		console.log(_settings);
		settings.set({
			...$settings,
			..._settings
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
90
91
	};

92
93
94
95
	//////////////////////////
	// Ollama functions
	//////////////////////////

Timothy J. Baek's avatar
Timothy J. Baek committed
96
	const sendPrompt = async (userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
97
98
99
		await Promise.all(
			selectedModels.map(async (model) => {
				if (model.includes('gpt-')) {
Timothy J. Baek's avatar
Timothy J. Baek committed
100
					await sendPromptOpenAI(model, userPrompt, parentId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
101
				} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
102
					await sendPromptOllama(model, userPrompt, parentId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
103
104
105
				}
			})
		);
106

107
		await chats.set(await $db.getChats());
108
109
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
110
	const sendPromptOllama = async (model, userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
111
		console.log('sendPromptOllama');
Timothy J. Baek's avatar
Timothy J. Baek committed
112
		let responseMessageId = uuidv4();
113
		let responseMessage = {
Timothy J. Baek's avatar
Timothy J. Baek committed
114
115
116
			parentId: parentId,
			id: responseMessageId,
			childrenIds: [],
117
			role: 'assistant',
Timothy J. Baek's avatar
Timothy J. Baek committed
118
119
			content: '',
			model: model
120
121
		};

Timothy J. Baek's avatar
Timothy J. Baek committed
122
123
124
125
126
127
128
129
130
		history.messages[responseMessageId] = responseMessage;
		history.currentId = responseMessageId;
		if (parentId !== null) {
			history.messages[parentId].childrenIds = [
				...history.messages[parentId].childrenIds,
				responseMessageId
			];
		}

Timothy J. Baek's avatar
Timothy J. Baek committed
131
132
		await tick();
		window.scrollTo({ top: document.body.scrollHeight });
133

Timothy J. Baek's avatar
Timothy J. Baek committed
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
		const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/chat`, {
			method: 'POST',
			headers: {
				'Content-Type': 'text/event-stream',
				...($settings.authHeader && { Authorization: $settings.authHeader }),
				...($user && { Authorization: `Bearer ${localStorage.token}` })
			},
			body: JSON.stringify({
				model: model,
				messages: [
					$settings.system
						? {
								role: 'system',
								content: $settings.system
						  }
						: undefined,
					...messages
				]
					.filter((message) => message)
Timothy J. Baek's avatar
Timothy J. Baek committed
153
154
155
156
157
158
159
160
161
					.map((message) => ({
						role: message.role,
						content: message.content,
						...(message.files && {
							images: message.files
								.filter((file) => file.type === 'image')
								.map((file) => file.url.slice(file.url.indexOf(',') + 1))
						})
					})),
Timothy J. Baek's avatar
Timothy J. Baek committed
162
163
164
165
166
167
168
169
170
171
172
				options: {
					seed: $settings.seed ?? undefined,
					temperature: $settings.temperature ?? undefined,
					repeat_penalty: $settings.repeat_penalty ?? undefined,
					top_k: $settings.top_k ?? undefined,
					top_p: $settings.top_p ?? undefined,
					num_ctx: $settings.num_ctx ?? undefined,
					...($settings.options ?? {})
				},
				format: $settings.requestFormat ?? undefined
			})
173
174
175
		}).catch((err) => {
			console.log(err);
			return null;
Timothy J. Baek's avatar
Timothy J. Baek committed
176
177
		});

178
		if (res && res.ok) {
Rohit Das's avatar
Rohit Das committed
179
180
181
182
183
184
185
186
187
188
189
190
			const reader = res.body
				.pipeThrough(new TextDecoderStream())
				.pipeThrough(splitStream('\n'))
				.getReader();

			while (true) {
				const { value, done } = await reader.read();
				if (done || stopResponseFlag || _chatId !== $chatId) {
					responseMessage.done = true;
					messages = messages;
					break;
				}
191

Rohit Das's avatar
Rohit Das committed
192
193
				try {
					let lines = value.split('\n');
194

Rohit Das's avatar
Rohit Das committed
195
196
197
198
					for (const line of lines) {
						if (line !== '') {
							console.log(line);
							let data = JSON.parse(line);
Timothy J. Baek's avatar
Timothy J. Baek committed
199

Rohit Das's avatar
Rohit Das committed
200
201
202
							if ('detail' in data) {
								throw data;
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
203

Rohit Das's avatar
Rohit Das committed
204
205
206
207
208
209
210
							if (data.done == false) {
								if (responseMessage.content == '' && data.message.content == '\n') {
									continue;
								} else {
									responseMessage.content += data.message.content;
									messages = messages;
								}
211
							} else {
Rohit Das's avatar
Rohit Das committed
212
213
214
215
216
217
218
219
220
								responseMessage.done = true;
								responseMessage.context = data.context ?? null;
								responseMessage.info = {
									total_duration: data.total_duration,
									prompt_eval_count: data.prompt_eval_count,
									prompt_eval_duration: data.prompt_eval_duration,
									eval_count: data.eval_count,
									eval_duration: data.eval_duration
								};
221
222
223
224
								messages = messages;
							}
						}
					}
Rohit Das's avatar
Rohit Das committed
225
226
227
228
229
230
				} catch (error) {
					console.log(error);
					if ('detail' in error) {
						toast.error(error.detail);
					}
					break;
231
				}
Rohit Das's avatar
Rohit Das committed
232
233
234

				if (autoScroll) {
					window.scrollTo({ top: document.body.scrollHeight });
235
				}
236

Rohit Das's avatar
Rohit Das committed
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
				await $db.updateChatById(_chatId, {
					title: title === '' ? 'New Chat' : title,
					models: selectedModels,
					system: $settings.system ?? undefined,
					options: {
						seed: $settings.seed ?? undefined,
						temperature: $settings.temperature ?? undefined,
						repeat_penalty: $settings.repeat_penalty ?? undefined,
						top_k: $settings.top_k ?? undefined,
						top_p: $settings.top_p ?? undefined,
						num_ctx: $settings.num_ctx ?? undefined,
						...($settings.options ?? {})
					},
					messages: messages,
					history: history
				});
253
			}
254
255
256
		} else {
			if (res !== null) {
				const error = await res.json();
257
				console.log(error);
258
259
				if ('detail' in error) {
					toast.error(error.detail);
260
					responseMessage.content = error.detail;
261
262
				} else {
					toast.error(error.error);
263
					responseMessage.content = error.error;
264
				}
265
266
			} else {
				toast.error(`Uh-oh! There was an issue connecting to Ollama.`);
267
				responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
268
269
			}

270
271
272
273
			responseMessage.error = true;
			responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
			responseMessage.done = true;
			messages = messages;
274
275
276
277
278
279
280
		}

		stopResponseFlag = false;
		await tick();
		if (autoScroll) {
			window.scrollTo({ top: document.body.scrollHeight });
		}
281

282
		if (messages.length == 2 && messages.at(1).content !== '') {
Timothy J. Baek's avatar
Timothy J. Baek committed
283
284
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
			await generateChatTitle(_chatId, userPrompt);
285
286
287
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
288
	const sendPromptOpenAI = async (model, userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
289
		if ($settings.OPENAI_API_KEY) {
290
			if (models) {
291
292
				let responseMessageId = uuidv4();

293
				let responseMessage = {
294
295
296
					parentId: parentId,
					id: responseMessageId,
					childrenIds: [],
297
					role: 'assistant',
Timothy J. Baek's avatar
Timothy J. Baek committed
298
299
					content: '',
					model: model
300
301
				};

302
303
304
305
306
307
308
309
310
				history.messages[responseMessageId] = responseMessage;
				history.currentId = responseMessageId;
				if (parentId !== null) {
					history.messages[parentId].childrenIds = [
						...history.messages[parentId].childrenIds,
						responseMessageId
					];
				}

Timothy J. Baek's avatar
Timothy J. Baek committed
311
312
				await tick();

313
314
315
316
317
318
				window.scrollTo({ top: document.body.scrollHeight });

				const res = await fetch(`https://api.openai.com/v1/chat/completions`, {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json',
Timothy J. Baek's avatar
Timothy J. Baek committed
319
						Authorization: `Bearer ${$settings.OPENAI_API_KEY}`
320
321
					},
					body: JSON.stringify({
Timothy J. Baek's avatar
Timothy J. Baek committed
322
						model: model,
323
						stream: true,
324
						messages: [
325
							$settings.system
326
327
								? {
										role: 'system',
Timothy J. Baek's avatar
Timothy J. Baek committed
328
										content: $settings.system
329
330
331
332
333
								  }
								: undefined,
							...messages
						]
							.filter((message) => message)
334
							.map((message) => ({ role: message.role, content: message.content })),
335
336
						temperature: $settings.temperature ?? undefined,
						top_p: $settings.top_p ?? undefined,
337
						num_ctx: $settings.num_ctx ?? undefined,
338
						frequency_penalty: $settings.repeat_penalty ?? undefined
339
340
341
342
343
344
345
346
347
348
					})
				});

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

				while (true) {
					const { value, done } = await reader.read();
Timothy J. Baek's avatar
Timothy J. Baek committed
349
350
351
					if (done || stopResponseFlag || _chatId !== $chatId) {
						responseMessage.done = true;
						messages = messages;
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
						break;
					}

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

						for (const line of lines) {
							if (line !== '') {
								console.log(line);
								if (line === 'data: [DONE]') {
									responseMessage.done = true;
									messages = messages;
								} else {
									let data = JSON.parse(line.replace(/^data: /, ''));
									console.log(data);

									if (responseMessage.content == '' && data.choices[0].delta.content == '\n') {
										continue;
									} else {
										responseMessage.content += data.choices[0].delta.content ?? '';
										messages = messages;
									}
								}
							}
						}
					} catch (error) {
						console.log(error);
					}

					if (autoScroll) {
						window.scrollTo({ top: document.body.scrollHeight });
					}

Timothy J. Baek's avatar
Timothy J. Baek committed
385
					await $db.updateChatById(_chatId, {
386
						title: title === '' ? 'New Chat' : title,
Timothy J. Baek's avatar
Timothy J. Baek committed
387
						models: selectedModels,
388
						system: $settings.system ?? undefined,
389
						options: {
390
391
392
393
							seed: $settings.seed ?? undefined,
							temperature: $settings.temperature ?? undefined,
							repeat_penalty: $settings.repeat_penalty ?? undefined,
							top_k: $settings.top_k ?? undefined,
Anthony Cucci's avatar
Anthony Cucci committed
394
							top_p: $settings.top_p ?? undefined,
395
396
							num_ctx: $settings.num_ctx ?? undefined,
							...($settings.options ?? {})
397
						},
Timothy J. Baek's avatar
Timothy J. Baek committed
398
						messages: messages,
399
						history: history
400
401
402
403
404
405
406
407
408
409
410
					});
				}

				stopResponseFlag = false;

				await tick();
				if (autoScroll) {
					window.scrollTo({ top: document.body.scrollHeight });
				}

				if (messages.length == 2) {
Timothy J. Baek's avatar
Timothy J. Baek committed
411
412
					window.history.replaceState(history.state, '', `/c/${_chatId}`);
					await setChatTitle(_chatId, userPrompt);
413
414
415
				}
			}
		}
416
417
418
	};

	const submitPrompt = async (userPrompt) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
419
420
		const _chatId = JSON.parse(JSON.stringify($chatId));
		console.log('submitPrompt', _chatId);
421

Timothy J. Baek's avatar
Timothy J. Baek committed
422
		if (selectedModels.includes('')) {
Timothy J. Baek's avatar
Timothy J. Baek committed
423
			toast.error('Model not selected');
424
		} else if (messages.length != 0 && messages.at(-1).done != true) {
Timothy J. Baek's avatar
Timothy J. Baek committed
425
426
			console.log('wait');
		} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
427
428
			document.getElementById('chat-textarea').style.height = '';

Timothy J. Baek's avatar
Timothy J. Baek committed
429
430
431
432
433
434
			let userMessageId = uuidv4();
			let userMessage = {
				id: userMessageId,
				parentId: messages.length !== 0 ? messages.at(-1).id : null,
				childrenIds: [],
				role: 'user',
435
436
				content: userPrompt,
				files: files.length > 0 ? files : undefined
Timothy J. Baek's avatar
Timothy J. Baek committed
437
438
439
440
441
442
443
444
			};

			if (messages.length !== 0) {
				history.messages[messages.at(-1).id].childrenIds.push(userMessageId);
			}

			history.messages[userMessageId] = userMessage;
			history.currentId = userMessageId;
Timothy J. Baek's avatar
Timothy J. Baek committed
445

Timothy J. Baek's avatar
Timothy J. Baek committed
446
447
			await tick();
			if (messages.length == 1) {
448
				await $db.createNewChat({
Timothy J. Baek's avatar
Timothy J. Baek committed
449
					id: _chatId,
450
					title: 'New Chat',
Timothy J. Baek's avatar
Timothy J. Baek committed
451
					models: selectedModels,
452
					system: $settings.system ?? undefined,
453
					options: {
454
455
456
457
						seed: $settings.seed ?? undefined,
						temperature: $settings.temperature ?? undefined,
						repeat_penalty: $settings.repeat_penalty ?? undefined,
						top_k: $settings.top_k ?? undefined,
Anthony Cucci's avatar
Anthony Cucci committed
458
						top_p: $settings.top_p ?? undefined,
459
460
						num_ctx: $settings.num_ctx ?? undefined,
						...($settings.options ?? {})
461
					},
Timothy J. Baek's avatar
Timothy J. Baek committed
462
					messages: messages,
463
					history: history
464
465
				});
			}
466

Timothy J. Baek's avatar
Timothy J. Baek committed
467
468
469
			prompt = '';
			files = [];

470
471
472
473
			setTimeout(() => {
				window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
			}, 50);

Timothy J. Baek's avatar
Timothy J. Baek committed
474
			await sendPrompt(userPrompt, userMessageId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
475
476
477
		}
	};

478
479
480
481
482
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
	};

483
	const regenerateResponse = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
484
485
486
		const _chatId = JSON.parse(JSON.stringify($chatId));
		console.log('regenerateResponse', _chatId);

487
488
489
		if (messages.length != 0 && messages.at(-1).done == true) {
			messages.splice(messages.length - 1, 1);
			messages = messages;
Timothy J. Baek's avatar
Timothy J. Baek committed
490

491
492
			let userMessage = messages.at(-1);
			let userPrompt = userMessage.content;
493

Timothy J. Baek's avatar
Timothy J. Baek committed
494
			await sendPrompt(userPrompt, userMessage.id, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
495
		}
496
	};
497

498
	const generateChatTitle = async (_chatId, userPrompt) => {
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
		if ($settings.titleAutoGenerate ?? true) {
			console.log('generateChatTitle');

			const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/generate`, {
				method: 'POST',
				headers: {
					'Content-Type': 'text/event-stream',
					...($settings.authHeader && { Authorization: $settings.authHeader }),
					...($user && { Authorization: `Bearer ${localStorage.token}` })
				},
				body: JSON.stringify({
					model: selectedModels[0],
					prompt: `Generate a brief 3-5 word title for this question, excluding the term 'title.' Then, please reply with only the title: ${userPrompt}`,
					stream: false
				})
514
			})
515
516
517
518
519
520
521
522
523
524
525
				.then(async (res) => {
					if (!res.ok) throw await res.json();
					return res.json();
				})
				.catch((error) => {
					if ('detail' in error) {
						toast.error(error.detail);
					}
					console.log(error);
					return null;
				});
526

527
528
529
530
531
			if (res) {
				await setChatTitle(_chatId, res.response === '' ? 'New Chat' : res.response);
			}
		} else {
			await setChatTitle(_chatId, `${userPrompt}`);
532
533
534
535
		}
	};

	const setChatTitle = async (_chatId, _title) => {
536
537
		await $db.updateChatById(_chatId, { title: _title });
		if (_chatId === $chatId) {
538
			title = _title;
539
540
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
541
542
</script>

543
544
<svelte:window
	on:scroll={(e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
545
		autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40;
546
547
548
	}}
/>

549
550
551
552
553
<Navbar {title} />
<div class="min-h-screen w-full flex justify-center">
	<div class=" py-2.5 flex flex-col justify-between w-full">
		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">
			<ModelSelector bind:selectedModels disabled={messages.length > 0} />
Timothy J. Baek's avatar
Timothy J. Baek committed
554
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
555

556
		<div class=" h-full mt-10 mb-32 w-full flex flex-col">
557
558
559
560
561
562
			<Messages
				{selectedModels}
				{selectedModelfile}
				bind:history
				bind:messages
				bind:autoScroll
Timothy J. Baek's avatar
Timothy J. Baek committed
563
				bottomPadding={files.length > 0}
564
565
566
				{sendPrompt}
				{regenerateResponse}
			/>
567
568
		</div>
	</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
569

570
571
	<MessageInput
		bind:files
Timothy J. Baek's avatar
Timothy J. Baek committed
572
		bind:prompt
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
		bind:autoScroll
		suggestionPrompts={selectedModelfile?.suggestionPrompts ?? [
			{
				title: ['Help me study', 'vocabulary for a college entrance exam'],
				content: `Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option.`
			},
			{
				title: ['Give me ideas', `for what to do with my kids' art`],
				content: `What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter.`
			},
			{
				title: ['Tell me a fun fact', 'about the Roman Empire'],
				content: 'Tell me a random fun fact about the Roman Empire'
			},
			{
				title: ['Show me a code snippet', `of a website's sticky header`],
				content: `Show me a code snippet of a website's sticky header in CSS and JavaScript.`
			}
		]}
		{messages}
		{submitPrompt}
		{stopResponse}
	/>
596
</div>