+page.svelte 15.7 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

53
	onMount(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
54
55
56
57
58
		await chatId.set(uuidv4());

		chatId.subscribe(async () => {
			await initNewChat();
		});
59
60
61
62
63
64
	});

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

65
66
	const initNewChat = async () => {
		console.log($chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
67

68
		autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
69

70
71
72
73
74
		title = '';
		messages = [];
		history = {
			messages: {},
			currentId: null
Timothy J. Baek's avatar
Timothy J. Baek committed
75
		};
76
77
78
		selectedModels = $page.url.searchParams.get('models')
			? $page.url.searchParams.get('models')?.split(',')
			: $settings.models ?? [''];
Timothy J. Baek's avatar
Timothy J. Baek committed
79
80
	};

81
82
83
84
	//////////////////////////
	// Ollama functions
	//////////////////////////

Timothy J. Baek's avatar
Timothy J. Baek committed
85
	const sendPrompt = async (userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
86
87
88
		await Promise.all(
			selectedModels.map(async (model) => {
				if (model.includes('gpt-')) {
Timothy J. Baek's avatar
Timothy J. Baek committed
89
					await sendPromptOpenAI(model, userPrompt, parentId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
90
				} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
91
					await sendPromptOllama(model, userPrompt, parentId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
92
93
94
				}
			})
		);
95

96
		await chats.set(await $db.getChats());
97
98
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
99
	const sendPromptOllama = async (model, userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
100
		console.log('sendPromptOllama');
Timothy J. Baek's avatar
Timothy J. Baek committed
101
102
		let responseMessageId = uuidv4();

103
		let responseMessage = {
Timothy J. Baek's avatar
Timothy J. Baek committed
104
105
106
			parentId: parentId,
			id: responseMessageId,
			childrenIds: [],
107
			role: 'assistant',
Timothy J. Baek's avatar
Timothy J. Baek committed
108
109
			content: '',
			model: model
110
111
		};

Timothy J. Baek's avatar
Timothy J. Baek committed
112
113
114
115
116
117
118
119
120
		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
121
		await tick();
122

Timothy J. Baek's avatar
Timothy J. Baek committed
123
		window.scrollTo({ top: document.body.scrollHeight });
124

Timothy J. Baek's avatar
Timothy J. Baek committed
125
		// const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/generate`, {
Timothy J. Baek's avatar
Timothy J. Baek committed
126
127
128
129
130
131
132
133
		// 	method: 'POST',
		// 	headers: {
		// 		'Content-Type': 'text/event-stream',
		// 		...($settings.authHeader && { Authorization: $settings.authHeader }),
		// 		...($user && { Authorization: `Bearer ${localStorage.token}` })
		// 	},
		// 	body: JSON.stringify({
		// 		model: model,
Timothy J. Baek's avatar
Timothy J. Baek committed
134
135
		// 		prompt: userPrompt,
		// 		system: $settings.system ?? undefined,
Timothy J. Baek's avatar
Timothy J. Baek committed
136
137
138
139
140
141
142
143
144
		// 		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 ?? {})
		// 		},
Timothy J. Baek's avatar
Timothy J. Baek committed
145
146
147
148
149
150
		// 		format: $settings.requestFormat ?? undefined,
		// 		context:
		// 			history.messages[parentId] !== null &&
		// 			history.messages[parentId].parentId in history.messages
		// 				? history.messages[history.messages[parentId].parentId]?.context ?? undefined
		// 				: undefined
Timothy J. Baek's avatar
Timothy J. Baek committed
151
152
153
		// 	})
		// });

Timothy J. Baek's avatar
Timothy J. Baek committed
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
		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)
					.map((message) => ({ role: message.role, content: message.content })),
				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
			})
		});

187
188
189
190
191
192
193
		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
194
195
196
			if (done || stopResponseFlag || _chatId !== $chatId) {
				responseMessage.done = true;
				messages = messages;
197
198
199
200
201
202
203
204
205
206
				break;
			}

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

				for (const line of lines) {
					if (line !== '') {
						console.log(line);
						let data = JSON.parse(line);
Timothy J. Baek's avatar
Timothy J. Baek committed
207
208
209
210
211

						if ('detail' in data) {
							throw data;
						}

212
						if (data.done == false) {
Timothy J. Baek's avatar
Timothy J. Baek committed
213
							if (responseMessage.content == '' && data.message.content == '\n') {
214
215
								continue;
							} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
216
								responseMessage.content += data.message.content;
217
218
219
220
								messages = messages;
							}
						} else {
							responseMessage.done = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
221
222
223
224
225
226
227
228
							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
							};
229
230
231
232
233
234
							messages = messages;
						}
					}
				}
			} catch (error) {
				console.log(error);
235
236
237
238
				if ('detail' in error) {
					toast.error(error.detail);
				}
				break;
239
240
241
242
243
244
			}

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

Timothy J. Baek's avatar
Timothy J. Baek committed
245
			await $db.updateChatById(_chatId, {
246
				title: title === '' ? 'New Chat' : title,
Timothy J. Baek's avatar
Timothy J. Baek committed
247
				models: selectedModels,
248
				system: $settings.system ?? undefined,
249
				options: {
250
251
252
253
					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
254
					top_p: $settings.top_p ?? undefined,
255
256
					num_ctx: $settings.num_ctx ?? undefined,
					...($settings.options ?? {})
257
				},
Timothy J. Baek's avatar
Timothy J. Baek committed
258
				messages: messages,
259
				history: history
260
261
262
263
264
265
266
267
			});
		}

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

269
		if (messages.length == 2 && messages.at(1).content !== '') {
Timothy J. Baek's avatar
Timothy J. Baek committed
270
271
			window.history.replaceState(history.state, '', `/c/${_chatId}`);
			await generateChatTitle(_chatId, userPrompt);
272
273
274
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
275
	const sendPromptOpenAI = async (model, userPrompt, parentId, _chatId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
276
		if ($settings.OPENAI_API_KEY) {
277
			if (models) {
278
279
				let responseMessageId = uuidv4();

280
				let responseMessage = {
281
282
283
					parentId: parentId,
					id: responseMessageId,
					childrenIds: [],
284
					role: 'assistant',
Timothy J. Baek's avatar
Timothy J. Baek committed
285
286
					content: '',
					model: model
287
288
				};

289
290
291
292
293
294
295
296
297
				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
298
299
				await tick();

300
301
302
303
304
305
				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
306
						Authorization: `Bearer ${$settings.OPENAI_API_KEY}`
307
308
					},
					body: JSON.stringify({
Timothy J. Baek's avatar
Timothy J. Baek committed
309
						model: model,
310
						stream: true,
311
						messages: [
312
							$settings.system
313
314
								? {
										role: 'system',
Timothy J. Baek's avatar
Timothy J. Baek committed
315
										content: $settings.system
316
317
318
319
320
								  }
								: undefined,
							...messages
						]
							.filter((message) => message)
321
							.map((message) => ({ role: message.role, content: message.content })),
322
323
						temperature: $settings.temperature ?? undefined,
						top_p: $settings.top_p ?? undefined,
324
						num_ctx: $settings.num_ctx ?? undefined,
325
						frequency_penalty: $settings.repeat_penalty ?? undefined
326
327
328
329
330
331
332
333
334
335
					})
				});

				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
336
337
338
					if (done || stopResponseFlag || _chatId !== $chatId) {
						responseMessage.done = true;
						messages = messages;
339
340
341
342
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
						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
372
					await $db.updateChatById(_chatId, {
373
						title: title === '' ? 'New Chat' : title,
Timothy J. Baek's avatar
Timothy J. Baek committed
374
						models: selectedModels,
375
						system: $settings.system ?? undefined,
376
						options: {
377
378
379
380
							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
381
							top_p: $settings.top_p ?? undefined,
382
383
							num_ctx: $settings.num_ctx ?? undefined,
							...($settings.options ?? {})
384
						},
Timothy J. Baek's avatar
Timothy J. Baek committed
385
						messages: messages,
386
						history: history
387
388
389
390
391
392
393
394
395
396
397
					});
				}

				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
398
399
					window.history.replaceState(history.state, '', `/c/${_chatId}`);
					await setChatTitle(_chatId, userPrompt);
400
401
402
				}
			}
		}
403
404
405
	};

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

Timothy J. Baek's avatar
Timothy J. Baek committed
409
		if (selectedModels.includes('')) {
Timothy J. Baek's avatar
Timothy J. Baek committed
410
			toast.error('Model not selected');
411
		} else if (messages.length != 0 && messages.at(-1).done != true) {
Timothy J. Baek's avatar
Timothy J. Baek committed
412
413
			console.log('wait');
		} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
414
415
			document.getElementById('chat-textarea').style.height = '';

Timothy J. Baek's avatar
Timothy J. Baek committed
416
417
418
419
420
421
			let userMessageId = uuidv4();
			let userMessage = {
				id: userMessageId,
				parentId: messages.length !== 0 ? messages.at(-1).id : null,
				childrenIds: [],
				role: 'user',
422
423
				content: userPrompt,
				files: files.length > 0 ? files : undefined
Timothy J. Baek's avatar
Timothy J. Baek committed
424
425
426
427
428
429
430
431
			};

			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
432

Timothy J. Baek's avatar
Timothy J. Baek committed
433
434
			await tick();
			if (messages.length == 1) {
435
				await $db.createNewChat({
Timothy J. Baek's avatar
Timothy J. Baek committed
436
					id: _chatId,
437
					title: 'New Chat',
Timothy J. Baek's avatar
Timothy J. Baek committed
438
					models: selectedModels,
439
					system: $settings.system ?? undefined,
440
					options: {
441
442
443
444
						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
445
						top_p: $settings.top_p ?? undefined,
446
447
						num_ctx: $settings.num_ctx ?? undefined,
						...($settings.options ?? {})
448
					},
Timothy J. Baek's avatar
Timothy J. Baek committed
449
					messages: messages,
450
					history: history
451
452
				});
			}
453

Timothy J. Baek's avatar
Timothy J. Baek committed
454
455
456
			prompt = '';
			files = [];

457
458
459
460
			setTimeout(() => {
				window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
			}, 50);

Timothy J. Baek's avatar
Timothy J. Baek committed
461
			await sendPrompt(userPrompt, userMessageId, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
462
463
464
		}
	};

465
466
467
468
469
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
	};

470
	const regenerateResponse = async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
471
472
473
		const _chatId = JSON.parse(JSON.stringify($chatId));
		console.log('regenerateResponse', _chatId);

474
475
476
		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
477

478
479
			let userMessage = messages.at(-1);
			let userPrompt = userMessage.content;
480

Timothy J. Baek's avatar
Timothy J. Baek committed
481
			await sendPrompt(userPrompt, userMessage.id, _chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
482
		}
483
	};
484

485
	const generateChatTitle = async (_chatId, userPrompt) => {
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
		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
				})
501
			})
502
503
504
505
506
507
508
509
510
511
512
				.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;
				});
513

514
515
516
517
518
			if (res) {
				await setChatTitle(_chatId, res.response === '' ? 'New Chat' : res.response);
			}
		} else {
			await setChatTitle(_chatId, `${userPrompt}`);
519
520
521
522
		}
	};

	const setChatTitle = async (_chatId, _title) => {
523
524
		await $db.updateChatById(_chatId, { title: _title });
		if (_chatId === $chatId) {
525
			title = _title;
526
527
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
528
529
</script>

530
531
<svelte:window
	on:scroll={(e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
532
		autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40;
533
534
535
	}}
/>

536
537
538
539
540
<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
541
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
542

543
		<div class=" h-full mt-10 mb-32 w-full flex flex-col">
544
545
546
547
548
549
550
551
552
			<Messages
				{selectedModels}
				{selectedModelfile}
				bind:history
				bind:messages
				bind:autoScroll
				{sendPrompt}
				{regenerateResponse}
			/>
553
554
		</div>
	</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
555

556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
	<MessageInput
		bind:prompt
		bind:files
		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}
	/>
582
</div>