+page.svelte 12.5 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
11
12
13
14
	import { config, user, settings, db, chats, chatId } from '$lib/stores';

	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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
20
	let selectedModels = [''];
21

Timothy J. Baek's avatar
Timothy J. Baek committed
22
	let title = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
23
	let prompt = '';
24
	let files = [];
25

26
	let messages = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
	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
43

44
	onMount(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
45
46
47
48
49
		await chatId.set(uuidv4());

		chatId.subscribe(async () => {
			await initNewChat();
		});
50
51
52
53
54
55
	});

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

56
57
	const initNewChat = async () => {
		console.log($chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
58

59
		autoScroll = true;
Timothy J. Baek's avatar
Timothy J. Baek committed
60

61
62
63
64
65
		title = '';
		messages = [];
		history = {
			messages: {},
			currentId: null
Timothy J. Baek's avatar
Timothy J. Baek committed
66
		};
67
		selectedModels = $settings.models ?? [''];
Timothy J. Baek's avatar
Timothy J. Baek committed
68
69
	};

70
71
72
73
	//////////////////////////
	// Ollama functions
	//////////////////////////

Timothy J. Baek's avatar
Timothy J. Baek committed
74
	const sendPrompt = async (userPrompt, parentId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
75
76
77
78
79
80
81
82
83
		await Promise.all(
			selectedModels.map(async (model) => {
				if (model.includes('gpt-')) {
					await sendPromptOpenAI(model, userPrompt, parentId);
				} else {
					await sendPromptOllama(model, userPrompt, parentId);
				}
			})
		);
84

85
		await chats.set(await $db.getChats());
86
87
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
88
	const sendPromptOllama = async (model, userPrompt, parentId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
89
		console.log('sendPromptOllama');
Timothy J. Baek's avatar
Timothy J. Baek committed
90
91
		let responseMessageId = uuidv4();

92
		let responseMessage = {
Timothy J. Baek's avatar
Timothy J. Baek committed
93
94
95
			parentId: parentId,
			id: responseMessageId,
			childrenIds: [],
96
			role: 'assistant',
Timothy J. Baek's avatar
Timothy J. Baek committed
97
98
			content: '',
			model: model
99
100
		};

Timothy J. Baek's avatar
Timothy J. Baek committed
101
102
103
104
105
106
107
108
109
		history.messages[responseMessageId] = responseMessage;
		history.currentId = responseMessageId;
		if (parentId !== null) {
			history.messages[parentId].childrenIds = [
				...history.messages[parentId].childrenIds,
				responseMessageId
			];
		}

110
111
		window.scrollTo({ top: document.body.scrollHeight });

112
		const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/generate`, {
113
114
			method: 'POST',
			headers: {
Timothy J. Baek's avatar
Timothy J. Baek committed
115
				'Content-Type': 'text/event-stream',
116
				...($settings.authHeader && { Authorization: $settings.authHeader }),
117
				...($user && { Authorization: `Bearer ${localStorage.token}` })
118
119
			},
			body: JSON.stringify({
Timothy J. Baek's avatar
Timothy J. Baek committed
120
				model: model,
121
				prompt: userPrompt,
122
				system: $settings.system ?? undefined,
123
				options: {
124
125
126
127
128
					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
129
				},
130
				format: $settings.requestFormat ?? undefined,
131
				context:
Timothy J. Baek's avatar
Timothy J. Baek committed
132
133
134
					history.messages[parentId] !== null &&
					history.messages[parentId].parentId in history.messages
						? history.messages[history.messages[parentId].parentId]?.context ?? undefined
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
						: undefined
			})
		});

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

		while (true) {
			const { value, done } = await reader.read();
			if (done || stopResponseFlag) {
				if (stopResponseFlag) {
					responseMessage.done = true;
					messages = messages;
				}

				break;
			}

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

				for (const line of lines) {
					if (line !== '') {
						console.log(line);
						let data = JSON.parse(line);
						if (data.done == false) {
							if (responseMessage.content == '' && data.response == '\n') {
								continue;
							} else {
								responseMessage.content += data.response;
								messages = messages;
							}
169
170
						} else if ('detail' in data) {
							throw data;
171
172
173
174
175
176
177
178
179
						} else {
							responseMessage.done = true;
							responseMessage.context = data.context;
							messages = messages;
						}
					}
				}
			} catch (error) {
				console.log(error);
180
181
182
183
				if ('detail' in error) {
					toast.error(error.detail);
				}
				break;
184
185
186
187
188
189
			}

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

190
			await $db.updateChatById($chatId, {
191
				title: title === '' ? 'New Chat' : title,
Timothy J. Baek's avatar
Timothy J. Baek committed
192
				models: selectedModels,
193
				system: $settings.system ?? undefined,
194
				options: {
195
196
197
198
199
					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
200
				},
Timothy J. Baek's avatar
Timothy J. Baek committed
201
				messages: messages,
202
				history: history
203
204
205
206
207
208
209
210
			});
		}

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

212
		if (messages.length == 2 && messages.at(1).content !== '') {
213
214
			window.history.replaceState(history.state, '', `/c/${$chatId}`);
			await generateChatTitle($chatId, userPrompt);
215
216
217
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
218
	const sendPromptOpenAI = async (model, userPrompt, parentId) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
219
		if ($settings.OPENAI_API_KEY) {
220
			if (models) {
221
222
				let responseMessageId = uuidv4();

223
				let responseMessage = {
224
225
226
					parentId: parentId,
					id: responseMessageId,
					childrenIds: [],
227
					role: 'assistant',
Timothy J. Baek's avatar
Timothy J. Baek committed
228
229
					content: '',
					model: model
230
231
				};

232
233
234
235
236
237
238
239
240
				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
241
242
				await tick();

243
244
245
246
247
248
				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
249
						Authorization: `Bearer ${$settings.OPENAI_API_KEY}`
250
251
					},
					body: JSON.stringify({
Timothy J. Baek's avatar
Timothy J. Baek committed
252
						model: model,
253
						stream: true,
254
						messages: [
255
							$settings.system
256
257
								? {
										role: 'system',
Timothy J. Baek's avatar
Timothy J. Baek committed
258
										content: $settings.system
259
260
261
262
263
								  }
								: undefined,
							...messages
						]
							.filter((message) => message)
264
							.map((message) => ({ role: message.role, content: message.content })),
265
266
267
						temperature: $settings.temperature ?? undefined,
						top_p: $settings.top_p ?? undefined,
						frequency_penalty: $settings.repeat_penalty ?? undefined
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
					})
				});

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

				while (true) {
					const { value, done } = await reader.read();
					if (done || stopResponseFlag) {
						if (stopResponseFlag) {
							responseMessage.done = true;
							messages = messages;
						}

						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 });
					}

317
					await $db.updateChatById($chatId, {
318
						title: title === '' ? 'New Chat' : title,
Timothy J. Baek's avatar
Timothy J. Baek committed
319
						models: selectedModels,
320
						system: $settings.system ?? undefined,
321
						options: {
322
323
324
325
326
							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
327
						},
Timothy J. Baek's avatar
Timothy J. Baek committed
328
						messages: messages,
329
						history: history
330
331
332
333
334
335
336
337
338
339
340
					});
				}

				stopResponseFlag = false;

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

				if (messages.length == 2) {
341
342
					window.history.replaceState(history.state, '', `/c/${$chatId}`);
					await setChatTitle($chatId, userPrompt);
343
344
345
				}
			}
		}
346
347
348
	};

	const submitPrompt = async (userPrompt) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
349
		console.log('submitPrompt');
350

Timothy J. Baek's avatar
Timothy J. Baek committed
351
		if (selectedModels.includes('')) {
Timothy J. Baek's avatar
Timothy J. Baek committed
352
			toast.error('Model not selected');
353
		} else if (messages.length != 0 && messages.at(-1).done != true) {
Timothy J. Baek's avatar
Timothy J. Baek committed
354
355
			console.log('wait');
		} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
356
357
			document.getElementById('chat-textarea').style.height = '';

Timothy J. Baek's avatar
Timothy J. Baek committed
358
359
360
361
362
363
			let userMessageId = uuidv4();
			let userMessage = {
				id: userMessageId,
				parentId: messages.length !== 0 ? messages.at(-1).id : null,
				childrenIds: [],
				role: 'user',
364
365
				content: userPrompt,
				files: files.length > 0 ? files : undefined
Timothy J. Baek's avatar
Timothy J. Baek committed
366
367
368
369
370
371
372
373
			};

			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
374
375

			prompt = '';
376
			files = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
377

378
			if (messages.length == 0) {
379
				await $db.createNewChat({
380
381
					id: $chatId,
					title: 'New Chat',
Timothy J. Baek's avatar
Timothy J. Baek committed
382
					models: selectedModels,
383
					system: $settings.system ?? undefined,
384
					options: {
385
386
387
388
389
						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
390
					},
Timothy J. Baek's avatar
Timothy J. Baek committed
391
					messages: messages,
392
					history: history
393
394
				});
			}
395

396
397
398
399
			setTimeout(() => {
				window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
			}, 50);

Timothy J. Baek's avatar
Timothy J. Baek committed
400
			await sendPrompt(userPrompt, userMessageId);
Timothy J. Baek's avatar
Timothy J. Baek committed
401
402
403
		}
	};

404
405
406
407
408
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
	};

409
410
411
412
413
	const regenerateResponse = async () => {
		console.log('regenerateResponse');
		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
414

415
416
			let userMessage = messages.at(-1);
			let userPrompt = userMessage.content;
417

Timothy J. Baek's avatar
Timothy J. Baek committed
418
			await sendPrompt(userPrompt, userMessage.id);
Timothy J. Baek's avatar
Timothy J. Baek committed
419
		}
420
	};
421

422
	const generateChatTitle = async (_chatId, userPrompt) => {
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
		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
				})
438
			})
439
440
441
442
443
444
445
446
447
448
449
				.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;
				});
450

451
452
453
454
455
			if (res) {
				await setChatTitle(_chatId, res.response === '' ? 'New Chat' : res.response);
			}
		} else {
			await setChatTitle(_chatId, `${userPrompt}`);
456
457
458
459
		}
	};

	const setChatTitle = async (_chatId, _title) => {
460
461
		await $db.updateChatById(_chatId, { title: _title });
		if (_chatId === $chatId) {
462
			title = _title;
463
464
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
465
466
</script>

467
468
<svelte:window
	on:scroll={(e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
469
		autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40;
470
471
472
	}}
/>

473
474
475
476
477
<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
478
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
479

480
481
482
483
		<div class=" h-full mt-10 mb-32 w-full flex flex-col">
			<Messages bind:history bind:messages bind:autoScroll {sendPrompt} {regenerateResponse} />
		</div>
	</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
484

485
	<MessageInput bind:prompt bind:files bind:autoScroll {messages} {submitPrompt} {stopResponse} />
486
</div>