+page.svelte 12.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
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
					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
128
129
					top_p: $settings.top_p ?? undefined,
					num_ctx:  $settings.num_ctx ?? undefined
130
				},
131
				format: $settings.requestFormat ?? undefined,
132
				context:
Timothy J. Baek's avatar
Timothy J. Baek committed
133
134
135
					history.messages[parentId] !== null &&
					history.messages[parentId].parentId in history.messages
						? history.messages[history.messages[parentId].parentId]?.context ?? undefined
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
169
						: 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;
							}
170
171
						} else if ('detail' in data) {
							throw data;
172
173
174
175
176
177
178
179
180
						} else {
							responseMessage.done = true;
							responseMessage.context = data.context;
							messages = messages;
						}
					}
				}
			} catch (error) {
				console.log(error);
181
182
183
184
				if ('detail' in error) {
					toast.error(error.detail);
				}
				break;
185
186
187
188
189
190
			}

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

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

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

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

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

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

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

245
246
247
248
249
250
				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
251
						Authorization: `Bearer ${$settings.OPENAI_API_KEY}`
252
253
					},
					body: JSON.stringify({
Timothy J. Baek's avatar
Timothy J. Baek committed
254
						model: model,
255
						stream: true,
256
						messages: [
257
							$settings.system
258
259
								? {
										role: 'system',
Timothy J. Baek's avatar
Timothy J. Baek committed
260
										content: $settings.system
261
262
263
264
265
								  }
								: undefined,
							...messages
						]
							.filter((message) => message)
266
							.map((message) => ({ role: message.role, content: message.content })),
267
268
						temperature: $settings.temperature ?? undefined,
						top_p: $settings.top_p ?? undefined,
Anthony Cucci's avatar
Anthony Cucci committed
269
						num_ctx:  $settings.num_ctx ?? undefined,
270
						frequency_penalty: $settings.repeat_penalty ?? undefined
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
317
318
319
					})
				});

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

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

				stopResponseFlag = false;

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

				if (messages.length == 2) {
345
346
					window.history.replaceState(history.state, '', `/c/${$chatId}`);
					await setChatTitle($chatId, userPrompt);
347
348
349
				}
			}
		}
350
351
352
	};

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

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

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

			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
378
379

			prompt = '';
380
			files = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
381

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

401
402
403
404
			setTimeout(() => {
				window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
			}, 50);

Timothy J. Baek's avatar
Timothy J. Baek committed
405
			await sendPrompt(userPrompt, userMessageId);
Timothy J. Baek's avatar
Timothy J. Baek committed
406
407
408
		}
	};

409
410
411
412
413
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
	};

414
415
416
417
418
	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
419

420
421
			let userMessage = messages.at(-1);
			let userPrompt = userMessage.content;
422

Timothy J. Baek's avatar
Timothy J. Baek committed
423
			await sendPrompt(userPrompt, userMessage.id);
Timothy J. Baek's avatar
Timothy J. Baek committed
424
		}
425
	};
426

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

456
457
458
459
460
			if (res) {
				await setChatTitle(_chatId, res.response === '' ? 'New Chat' : res.response);
			}
		} else {
			await setChatTitle(_chatId, `${userPrompt}`);
461
462
463
464
		}
	};

	const setChatTitle = async (_chatId, _title) => {
465
466
		await $db.updateChatById(_chatId, { title: _title });
		if (_chatId === $chatId) {
467
			title = _title;
468
469
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
470
471
</script>

472
473
<svelte:window
	on:scroll={(e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
474
		autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40;
475
476
477
	}}
/>

478
479
480
481
482
<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
483
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
484

485
486
487
488
		<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
489

490
	<MessageInput bind:prompt bind:files bind:autoScroll {messages} {submitPrompt} {stopResponse} />
491
</div>