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

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

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

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

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

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

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

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

69
70
71
72
	//////////////////////////
	// Ollama functions
	//////////////////////////

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

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

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

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

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

108
109
		window.scrollTo({ top: document.body.scrollHeight });

110
		const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/generate`, {
111
112
			method: 'POST',
			headers: {
Timothy J. Baek's avatar
Timothy J. Baek committed
113
				'Content-Type': 'text/event-stream',
114
				...($settings.authHeader && { Authorization: $settings.authHeader }),
115
				...($user && { Authorization: `Bearer ${localStorage.token}` })
116
117
			},
			body: JSON.stringify({
Timothy J. Baek's avatar
Timothy J. Baek committed
118
				model: model,
119
				prompt: userPrompt,
120
				system: $settings.system ?? undefined,
121
				options: {
122
123
124
125
126
					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
127
				},
128
				format: $settings.requestFormat ?? undefined,
129
				context:
Timothy J. Baek's avatar
Timothy J. Baek committed
130
131
132
					history.messages[parentId] !== null &&
					history.messages[parentId].parentId in history.messages
						? history.messages[history.messages[parentId].parentId]?.context ?? undefined
133
134
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
						: 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;
							}
167
168
						} else if ('detail' in data) {
							throw data;
169
170
171
172
173
174
175
176
177
						} else {
							responseMessage.done = true;
							responseMessage.context = data.context;
							messages = messages;
						}
					}
				}
			} catch (error) {
				console.log(error);
178
179
180
181
				if ('detail' in error) {
					toast.error(error.detail);
				}
				break;
182
183
184
185
186
187
			}

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

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

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

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

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

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

230
231
232
233
234
235
236
237
238
				history.messages[responseMessageId] = responseMessage;
				history.currentId = responseMessageId;
				if (parentId !== null) {
					history.messages[parentId].childrenIds = [
						...history.messages[parentId].childrenIds,
						responseMessageId
					];
				}

239
240
241
242
243
244
245
246
247
				window.scrollTo({ top: document.body.scrollHeight });

				const res = await fetch(`https://api.openai.com/v1/chat/completions`, {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json',
						Authorization: `Bearer ${settings.OPENAI_API_KEY}`
					},
					body: JSON.stringify({
Timothy J. Baek's avatar
Timothy J. Baek committed
248
						model: model,
249
						stream: true,
250
						messages: [
251
							$settings.system
252
253
254
255
256
257
258
259
								? {
										role: 'system',
										content: settings.system
								  }
								: undefined,
							...messages
						]
							.filter((message) => message)
260
							.map((message) => ({ role: message.role, content: message.content })),
261
262
263
						temperature: $settings.temperature ?? undefined,
						top_p: $settings.top_p ?? undefined,
						frequency_penalty: $settings.repeat_penalty ?? undefined
264
265
266
267
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
					})
				});

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

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

				stopResponseFlag = false;

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

				if (messages.length == 2) {
337
338
					window.history.replaceState(history.state, '', `/c/${$chatId}`);
					await setChatTitle($chatId, userPrompt);
339
340
341
				}
			}
		}
342
343
344
	};

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

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

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

			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
369
370
371

			prompt = '';

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

390
391
392
393
			setTimeout(() => {
				window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
			}, 50);

Timothy J. Baek's avatar
Timothy J. Baek committed
394
			await sendPrompt(userPrompt, userMessageId);
Timothy J. Baek's avatar
Timothy J. Baek committed
395
396
397
		}
	};

398
399
400
401
402
	const stopResponse = () => {
		stopResponseFlag = true;
		console.log('stopResponse');
	};

403
404
405
406
407
	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
408

409
410
			let userMessage = messages.at(-1);
			let userPrompt = userMessage.content;
411

Timothy J. Baek's avatar
Timothy J. Baek committed
412
			await sendPrompt(userPrompt, userMessage.id);
Timothy J. Baek's avatar
Timothy J. Baek committed
413
		}
414
	};
415

416
417
	const generateChatTitle = async (_chatId, userPrompt) => {
		console.log('generateChatTitle');
418

419
		const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/generate`, {
420
421
			method: 'POST',
			headers: {
Timothy J. Baek's avatar
Timothy J. Baek committed
422
				'Content-Type': 'text/event-stream',
423
				...($settings.authHeader && { Authorization: $settings.authHeader }),
424
				...($user && { Authorization: `Bearer ${localStorage.token}` })
425
426
			},
			body: JSON.stringify({
Timothy J. Baek's avatar
Timothy J. Baek committed
427
				model: selectedModels[0],
428
				prompt: `Generate a brief 3-5 word title for this question, excluding the term 'title.' Then, please reply with only the title: ${userPrompt}`,
429
430
431
432
433
434
435
436
				stream: false
			})
		})
			.then(async (res) => {
				if (!res.ok) throw await res.json();
				return res.json();
			})
			.catch((error) => {
437
438
439
				if ('detail' in error) {
					toast.error(error.detail);
				}
440
441
442
443
444
				console.log(error);
				return null;
			});

		if (res) {
445
446
447
448
449
			await setChatTitle(_chatId, res.response === '' ? 'New Chat' : res.response);
		}
	};

	const setChatTitle = async (_chatId, _title) => {
450
451
		await $db.updateChatById(_chatId, { title: _title });
		if (_chatId === $chatId) {
452
			title = _title;
453
454
		}
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
455
456
</script>

457
458
<svelte:window
	on:scroll={(e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
459
		autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40;
460
461
462
	}}
/>

463
464
465
466
467
<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
468
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
469

470
471
472
473
		<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
474

475
476
	<MessageInput bind:prompt bind:autoScroll {messages} {submitPrompt} {stopResponse} />
</div>