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

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

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

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

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

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

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

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

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

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

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

				stopResponseFlag = false;

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

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

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

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

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

			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
381
382

			prompt = '';
383
			files = [];
Timothy J. Baek's avatar
Timothy J. Baek committed
384

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

405
406
407
408
			setTimeout(() => {
				window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
			}, 50);

Timothy J. Baek's avatar
Timothy J. Baek committed
409
			await sendPrompt(userPrompt, userMessageId);
Timothy J. Baek's avatar
Timothy J. Baek committed
410
411
412
		}
	};

413
414
415
416
417
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
	};

418
419
420
421
422
	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
423

424
425
			let userMessage = messages.at(-1);
			let userPrompt = userMessage.content;
426

Timothy J. Baek's avatar
Timothy J. Baek committed
427
			await sendPrompt(userPrompt, userMessage.id);
Timothy J. Baek's avatar
Timothy J. Baek committed
428
		}
429
	};
430

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

460
461
462
463
464
			if (res) {
				await setChatTitle(_chatId, res.response === '' ? 'New Chat' : res.response);
			}
		} else {
			await setChatTitle(_chatId, `${userPrompt}`);
465
466
467
468
		}
	};

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

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

482
483
484
485
486
<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
487
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
488

489
490
491
492
		<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
493

494
	<MessageInput bind:prompt bind:files bind:autoScroll {messages} {submitPrompt} {stopResponse} />
495
</div>