+page.svelte 12.4 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 () => {
44
45
		console.log();
		await initNewChat();
46
47
48
49
50
51
	});

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

52
53
	const initNewChat = async () => {
		await chatId.set(uuidv4());
Timothy J. Baek's avatar
Timothy J. Baek committed
54

55
		console.log($chatId);
Timothy J. Baek's avatar
Timothy J. Baek committed
56

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

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

68
69
70
71
	//////////////////////////
	// Ollama functions
	//////////////////////////

Timothy J. Baek's avatar
Timothy J. Baek committed
72
	const sendPrompt = async (userPrompt, parentId) => {
73
74
		await chats.set(await $db.getAllFromIndex('chats', 'timestamp'));

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
86

		await chats.set(await $db.getAllFromIndex('chats', 'timestamp'));

Timothy J. Baek's avatar
Timothy J. Baek committed
87
		console.log(history);
88
89
	};

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

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

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

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

113
		const res = await fetch(`${$settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/generate`, {
114
115
			method: 'POST',
			headers: {
Timothy J. Baek's avatar
Timothy J. Baek committed
116
				'Content-Type': 'text/event-stream',
117
				...($settings.authHeader && { Authorization: $settings.authHeader }),
118
				...($user && { Authorization: `Bearer ${localStorage.token}` })
119
120
			},
			body: JSON.stringify({
Timothy J. Baek's avatar
Timothy J. Baek committed
121
				model: model,
122
				prompt: userPrompt,
123
				system: $settings.system ?? undefined,
124
				options: {
125
126
127
128
129
					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
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
192
			await $db.put('chats', {
				id: $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
201
					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
202
				},
Timothy J. Baek's avatar
Timothy J. Baek committed
203
				messages: messages,
204
205
				history: history,
				timestamp: Date.now()
206
207
208
209
210
211
212
213
			});
		}

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

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

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

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

235
236
237
238
239
240
241
242
243
				history.messages[responseMessageId] = responseMessage;
				history.currentId = responseMessageId;
				if (parentId !== null) {
					history.messages[parentId].childrenIds = [
						...history.messages[parentId].childrenIds,
						responseMessageId
					];
				}

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

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

318
319
					await $db.put('chats', {
						id: $chatId,
320
						title: title === '' ? 'New Chat' : title,
Timothy J. Baek's avatar
Timothy J. Baek committed
321
322
						models: selectedModels,

323
						system: $settings.system ?? undefined,
324
						options: {
325
326
327
328
329
							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
330
						},
Timothy J. Baek's avatar
Timothy J. Baek committed
331
						messages: messages,
332
333
						history: history,
						timestamp: Date.now()
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
347
					window.history.replaceState(history.state, '', `/c/${$chatId}`);

					await setChatTitle($chatId, userPrompt);
348
349
350
				}
			}
		}
351
352
353
	};

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
			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
379
380
381

			prompt = '';

382
			if (messages.length == 0) {
383
384
385
				await $db.put('chats', {
					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
393
						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
394
					},
Timothy J. Baek's avatar
Timothy J. Baek committed
395
					messages: messages,
396
397
					history: history,
					timestamp: Date.now()
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
428
	const generateChatTitle = async (_chatId, userPrompt) => {
		console.log('generateChatTitle');
429

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

		if (res) {
456
457
458
459
460
			await setChatTitle(_chatId, res.response === '' ? 'New Chat' : res.response);
		}
	};

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

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

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

483
484
485
486
		<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
487

488
489
	<MessageInput bind:prompt bind:autoScroll {messages} {submitPrompt} {stopResponse} />
</div>