Models.svelte 25.8 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
<script lang="ts">
Jannik Streidl's avatar
Jannik Streidl committed
2
	import { toast } from 'svelte-sonner';
Timothy J. Baek's avatar
Timothy J. Baek committed
3

4
5
6
	import {
		createModel,
		deleteModel,
Timothy J. Baek's avatar
Timothy J. Baek committed
7
		downloadModel,
8
9
		getOllamaUrls,
		getOllamaVersion,
Timothy J. Baek's avatar
Timothy J. Baek committed
10
		pullModel,
11
		cancelOllamaRequest,
Timothy J. Baek's avatar
Timothy J. Baek committed
12
		uploadModel
13
	} from '$lib/apis/ollama';
Timothy J. Baek's avatar
Timothy J. Baek committed
14

15
	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
16
	import { WEBUI_NAME, models, MODEL_DOWNLOAD_POOL, user, config } from '$lib/stores';
Timothy J. Baek's avatar
Timothy J. Baek committed
17
	import { splitStream } from '$lib/utils';
18
	import { onMount, getContext } from 'svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
19

Timothy J. Baek's avatar
Timothy J. Baek committed
20
	import Tooltip from '$lib/components/common/Tooltip.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
21
	import Spinner from '$lib/components/common/Spinner.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
22

23
24
	const i18n = getContext('i18n');

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
25
	export let getModels: Function;
Timothy J. Baek's avatar
Timothy J. Baek committed
26

27
	let modelUploadInputElement: HTMLInputElement;
28

Timothy J. Baek's avatar
Timothy J. Baek committed
29
	// Models
30
31
32

	let OLLAMA_URLS = [];
	let selectedOllamaUrlIdx: string | null = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
33
34
35
36

	let updateModelId = null;
	let updateProgress = null;

37
	let showExperimentalOllama = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
38
39

	let ollamaVersion = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
40
41
42
43
44
45
46
47
	const MAX_PARALLEL_DOWNLOADS = 3;

	let modelTransferring = false;
	let modelTag = '';
	let digest = '';
	let pullProgress = null;

	let modelUploadMode = 'file';
Timothy J. Baek's avatar
Timothy J. Baek committed
48
	let modelInputFile: File[] | null = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
49
	let modelFileUrl = '';
Justin Hayes's avatar
Justin Hayes committed
50
	let modelFileContent = `TEMPLATE """{{ .System }}\nUSER: {{ .Prompt }}\nASSISTANT: """\nPARAMETER num_ctx 4096\nPARAMETER stop "</s>"\nPARAMETER stop "USER:"\nPARAMETER stop "ASSISTANT:"`;
Timothy J. Baek's avatar
Timothy J. Baek committed
51
	let modelFileDigest = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
52

Timothy J. Baek's avatar
Timothy J. Baek committed
53
	let uploadProgress = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
54
	let uploadMessage = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
55
56
57

	let deleteModelTag = '';

Timothy J. Baek's avatar
Timothy J. Baek committed
58
59
60
	const updateModelsHandler = async () => {
		for (const model of $models.filter(
			(m) =>
Timothy J. Baek's avatar
Timothy J. Baek committed
61
62
63
64
65
				!(m?.preset ?? false) &&
				m.owned_by === 'ollama' &&
				(selectedOllamaUrlIdx === null
					? true
					: (m?.ollama?.urls ?? []).includes(selectedOllamaUrlIdx))
Timothy J. Baek's avatar
Timothy J. Baek committed
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
		)) {
			console.log(model);

			updateModelId = model.id;
			const res = await pullModel(localStorage.token, model.id, selectedOllamaUrlIdx).catch(
				(error) => {
					toast.error(error);
					return null;
				}
			);

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

				while (true) {
					try {
						const { value, done } = await reader.read();
						if (done) break;

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

						for (const line of lines) {
							if (line !== '') {
								let data = JSON.parse(line);

								console.log(data);
								if (data.error) {
									throw data.error;
								}
								if (data.detail) {
									throw data.detail;
								}
								if (data.status) {
									if (data.digest) {
										updateProgress = 0;
										if (data.completed) {
											updateProgress = Math.round((data.completed / data.total) * 1000) / 10;
										} else {
											updateProgress = 100;
										}
									} else {
										toast.success(data.status);
									}
								}
							}
						}
					} catch (error) {
						console.log(error);
					}
				}
			}
		}

		updateModelId = null;
		updateProgress = null;
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
126
	const pullModelHandler = async () => {
127
		const sanitizedModelTag = modelTag.trim().replace(/^ollama\s+(run|pull)\s+/, '');
Timothy J. Baek's avatar
Timothy J. Baek committed
128
129
		console.log($MODEL_DOWNLOAD_POOL);
		if ($MODEL_DOWNLOAD_POOL[sanitizedModelTag]) {
Ased Mammad's avatar
Ased Mammad committed
130
131
132
133
134
			toast.error(
				$i18n.t(`Model '{{modelTag}}' is already in queue for downloading.`, {
					modelTag: sanitizedModelTag
				})
			);
Timothy J. Baek's avatar
Timothy J. Baek committed
135
136
			return;
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
137
		if (Object.keys($MODEL_DOWNLOAD_POOL).length === MAX_PARALLEL_DOWNLOADS) {
Ased Mammad's avatar
Ased Mammad committed
138
139
140
			toast.error(
				$i18n.t('Maximum of 3 models can be downloaded simultaneously. Please try again later.')
			);
Timothy J. Baek's avatar
Timothy J. Baek committed
141
142
143
			return;
		}

Timothy J. Baek's avatar
Timothy J. Baek committed
144
145
146
147
148
149
150
151
152
153
		const res = await pullModel(localStorage.token, sanitizedModelTag, '0').catch((error) => {
			toast.error(error);
			return null;
		});

		if (res) {
			const reader = res.body
				.pipeThrough(new TextDecoderStream())
				.pipeThrough(splitStream('\n'))
				.getReader();
Timothy J. Baek's avatar
Timothy J. Baek committed
154

Timothy J. Baek's avatar
Timothy J. Baek committed
155
156
157
158
			while (true) {
				try {
					const { value, done } = await reader.read();
					if (done) break;
Timothy J. Baek's avatar
Timothy J. Baek committed
159

Timothy J. Baek's avatar
Timothy J. Baek committed
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
					let lines = value.split('\n');

					for (const line of lines) {
						if (line !== '') {
							let data = JSON.parse(line);
							console.log(data);
							if (data.error) {
								throw data.error;
							}
							if (data.detail) {
								throw data.detail;
							}

							if (data.id) {
								MODEL_DOWNLOAD_POOL.set({
									...$MODEL_DOWNLOAD_POOL,
									[sanitizedModelTag]: {
										...$MODEL_DOWNLOAD_POOL[sanitizedModelTag],
										requestId: data.id,
										reader,
										done: false
									}
								});
								console.log(data);
							}

							if (data.status) {
								if (data.digest) {
									let downloadProgress = 0;
									if (data.completed) {
										downloadProgress = Math.round((data.completed / data.total) * 1000) / 10;
									} else {
										downloadProgress = 100;
									}
Timothy J. Baek's avatar
Timothy J. Baek committed
194

Timothy J. Baek's avatar
Timothy J. Baek committed
195
196
197
198
199
200
201
202
203
204
									MODEL_DOWNLOAD_POOL.set({
										...$MODEL_DOWNLOAD_POOL,
										[sanitizedModelTag]: {
											...$MODEL_DOWNLOAD_POOL[sanitizedModelTag],
											pullProgress: downloadProgress,
											digest: data.digest
										}
									});
								} else {
									toast.success(data.status);
Timothy J. Baek's avatar
Timothy J. Baek committed
205

Timothy J. Baek's avatar
Timothy J. Baek committed
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
									MODEL_DOWNLOAD_POOL.set({
										...$MODEL_DOWNLOAD_POOL,
										[sanitizedModelTag]: {
											...$MODEL_DOWNLOAD_POOL[sanitizedModelTag],
											done: data.status === 'success'
										}
									});
								}
							}
						}
					}
				} catch (error) {
					console.log(error);
					if (typeof error !== 'string') {
						error = error.message;
					}
Timothy J. Baek's avatar
Timothy J. Baek committed
222

Timothy J. Baek's avatar
Timothy J. Baek committed
223
224
					toast.error(error);
					// opts.callback({ success: false, error, modelName: opts.modelName });
Timothy J. Baek's avatar
Timothy J. Baek committed
225
226
				}
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
227
228
229
230
231
232
233
234
235
236

			console.log($MODEL_DOWNLOAD_POOL[sanitizedModelTag]);

			if ($MODEL_DOWNLOAD_POOL[sanitizedModelTag].done) {
				toast.success(
					$i18n.t(`Model '{{modelName}}' has been successfully downloaded.`, {
						modelName: sanitizedModelTag
					})
				);

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
237
				models.set(await getModels(localStorage.token));
Timothy J. Baek's avatar
Timothy J. Baek committed
238
			} else {
Jannik Streidl's avatar
Jannik Streidl committed
239
				toast.error($i18n.t('Download canceled'));
Timothy J. Baek's avatar
Timothy J. Baek committed
240
241
242
243
244
245
246
247
			}

			delete $MODEL_DOWNLOAD_POOL[sanitizedModelTag];

			MODEL_DOWNLOAD_POOL.set({
				...$MODEL_DOWNLOAD_POOL
			});
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
248
249
250
251
252
253
254
255
256
257
258
259
260

		modelTag = '';
		modelTransferring = false;
	};

	const uploadModelHandler = async () => {
		modelTransferring = true;

		let uploaded = false;
		let fileResponse = null;
		let name = '';

		if (modelUploadMode === 'file') {
Timothy J. Baek's avatar
Timothy J. Baek committed
261
262
263
			const file = modelInputFile ? modelInputFile[0] : null;

			if (file) {
Timothy J. Baek's avatar
Timothy J. Baek committed
264
265
				uploadMessage = 'Uploading...';

Timothy J. Baek's avatar
Timothy J. Baek committed
266
				fileResponse = await uploadModel(localStorage.token, file, selectedOllamaUrlIdx).catch(
Timothy J. Baek's avatar
Timothy J. Baek committed
267
268
269
270
271
272
					(error) => {
						toast.error(error);
						return null;
					}
				);
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
273
		} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
274
			uploadProgress = 0;
Timothy J. Baek's avatar
Timothy J. Baek committed
275
276
277
278
279
280
281
282
			fileResponse = await downloadModel(
				localStorage.token,
				modelFileUrl,
				selectedOllamaUrlIdx
			).catch((error) => {
				toast.error(error);
				return null;
			});
Timothy J. Baek's avatar
Timothy J. Baek committed
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
		}

		if (fileResponse && fileResponse.ok) {
			const reader = fileResponse.body
				.pipeThrough(new TextDecoderStream())
				.pipeThrough(splitStream('\n'))
				.getReader();

			while (true) {
				const { value, done } = await reader.read();
				if (done) break;

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

					for (const line of lines) {
						if (line !== '') {
							let data = JSON.parse(line.replace(/^data: /, ''));

							if (data.progress) {
Timothy J. Baek's avatar
Timothy J. Baek committed
303
304
305
								if (uploadMessage) {
									uploadMessage = '';
								}
Timothy J. Baek's avatar
Timothy J. Baek committed
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
								uploadProgress = data.progress;
							}

							if (data.error) {
								throw data.error;
							}

							if (data.done) {
								modelFileDigest = data.blob;
								name = data.name;
								uploaded = true;
							}
						}
					}
				} catch (error) {
					console.log(error);
				}
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
324
325
326
		} else {
			const error = await fileResponse?.json();
			toast.error(error?.detail ?? error);
Timothy J. Baek's avatar
Timothy J. Baek committed
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
		}

		if (uploaded) {
			const res = await createModel(
				localStorage.token,
				`${name}:latest`,
				`FROM @${modelFileDigest}\n${modelFileContent}`
			);

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

				while (true) {
					const { value, done } = await reader.read();
					if (done) break;

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

						for (const line of lines) {
							if (line !== '') {
								console.log(line);
								let data = JSON.parse(line);
								console.log(data);

								if (data.error) {
									throw data.error;
								}
								if (data.detail) {
									throw data.detail;
								}

								if (data.status) {
									if (
										!data.digest &&
										!data.status.includes('writing') &&
										!data.status.includes('sha256')
									) {
										toast.success(data.status);
									} else {
										if (data.digest) {
											digest = data.digest;

											if (data.completed) {
												pullProgress = Math.round((data.completed / data.total) * 1000) / 10;
											} else {
												pullProgress = 100;
											}
										}
									}
								}
							}
						}
					} catch (error) {
						console.log(error);
						toast.error(error);
					}
				}
			}
		}

		modelFileUrl = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
392
393
394
395

		if (modelUploadInputElement) {
			modelUploadInputElement.value = '';
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
396
		modelInputFile = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
397
398
399
		modelTransferring = false;
		uploadProgress = null;

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
400
		models.set(await getModels());
Timothy J. Baek's avatar
Timothy J. Baek committed
401
402
403
	};

	const deleteModelHandler = async () => {
404
405
406
407
408
		const res = await deleteModel(localStorage.token, deleteModelTag, selectedOllamaUrlIdx).catch(
			(error) => {
				toast.error(error);
			}
		);
Timothy J. Baek's avatar
Timothy J. Baek committed
409
410

		if (res) {
Jannik Streidl's avatar
Jannik Streidl committed
411
			toast.success($i18n.t(`Deleted {{deleteModelTag}}`, { deleteModelTag }));
Timothy J. Baek's avatar
Timothy J. Baek committed
412
413
414
		}

		deleteModelTag = '';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
415
		models.set(await getModels());
Timothy J. Baek's avatar
Timothy J. Baek committed
416
417
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
418
419
420
421
	const cancelModelPullHandler = async (model: string) => {
		const { reader, requestId } = $MODEL_DOWNLOAD_POOL[model];
		if (reader) {
			await reader.cancel();
Timothy J. Baek's avatar
Timothy J. Baek committed
422

Timothy J. Baek's avatar
Timothy J. Baek committed
423
424
425
426
427
428
429
			await cancelOllamaRequest(localStorage.token, requestId);
			delete $MODEL_DOWNLOAD_POOL[model];
			MODEL_DOWNLOAD_POOL.set({
				...$MODEL_DOWNLOAD_POOL
			});
			await deleteModel(localStorage.token, model);
			toast.success(`${model} download has been canceled`);
Timothy J. Baek's avatar
Timothy J. Baek committed
430
431
		}
	};
432
433

	onMount(async () => {
434
435
436
437
438
439
		await Promise.all([
			(async () => {
				OLLAMA_URLS = await getOllamaUrls(localStorage.token).catch((error) => {
					toast.error(error);
					return [];
				});
440

441
442
443
444
445
446
447
448
				if (OLLAMA_URLS.length > 0) {
					selectedOllamaUrlIdx = 0;
				}
			})(),
			(async () => {
				ollamaVersion = await getOllamaVersion(localStorage.token).catch((error) => false);
			})()
		]);
449
	});
Timothy J. Baek's avatar
Timothy J. Baek committed
450
451
452
</script>

<div class="flex flex-col h-full justify-between text-sm">
Timothy J. Baek's avatar
Timothy J. Baek committed
453
	<div class=" space-y-3 pr-1.5 overflow-y-scroll h-[24rem]">
Timothy J. Baek's avatar
Timothy J. Baek committed
454
		{#if ollamaVersion !== null}
455
			<div class="space-y-2 pr-1.5">
456
				<div class="text-sm font-medium">{$i18n.t('Manage Ollama Models')}</div>
457

Timothy J. Baek's avatar
Timothy J. Baek committed
458
459
460
461
462
463
				{#if OLLAMA_URLS.length > 0}
					<div class="flex gap-2">
						<div class="flex-1 pb-1">
							<select
								class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
								bind:value={selectedOllamaUrlIdx}
464
								placeholder={$i18n.t('Select an Ollama instance')}
Timothy J. Baek's avatar
Timothy J. Baek committed
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
							>
								{#each OLLAMA_URLS as url, idx}
									<option value={idx} class="bg-gray-100 dark:bg-gray-700">{url}</option>
								{/each}
							</select>
						</div>

						<div>
							<div class="flex w-full justify-end">
								<Tooltip content="Update All Models" placement="top">
									<button
										class="p-2.5 flex gap-2 items-center bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
										on:click={() => {
											updateModelsHandler();
										}}
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 16 16"
											fill="currentColor"
											class="w-4 h-4"
										>
											<path
												d="M7 1a.75.75 0 0 1 .75.75V6h-1.5V1.75A.75.75 0 0 1 7 1ZM6.25 6v2.94L5.03 7.72a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l2.5-2.5a.75.75 0 1 0-1.06-1.06L7.75 8.94V6H10a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2.25Z"
											/>
											<path
												d="M4.268 14A2 2 0 0 0 6 15h6a2 2 0 0 0 2-2v-3a2 2 0 0 0-1-1.732V11a3 3 0 0 1-3 3H4.268Z"
											/>
										</svg>
									</button>
								</Tooltip>
							</div>
						</div>
498
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
499
500
501
502

					{#if updateModelId}
						Updating "{updateModelId}" {updateProgress ? `(${updateProgress}%)` : ''}
					{/if}
503
504
505
506
				{/if}

				<div class="space-y-2">
					<div>
507
						<div class=" mb-2 text-sm font-medium">{$i18n.t('Pull a model from Ollama.com')}</div>
508
509
510
511
						<div class="flex w-full">
							<div class="flex-1 mr-2">
								<input
									class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
Ased Mammad's avatar
Ased Mammad committed
512
513
514
									placeholder={$i18n.t('Enter model tag (e.g. {{modelTag}})', {
										modelTag: 'mistral:7b'
									})}
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
									bind:value={modelTag}
								/>
							</div>
							<button
								class="px-2.5 bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
								on:click={() => {
									pullModelHandler();
								}}
								disabled={modelTransferring}
							>
								{#if modelTransferring}
									<div class="self-center">
										<svg
											class=" w-4 h-4"
											viewBox="0 0 24 24"
											fill="currentColor"
											xmlns="http://www.w3.org/2000/svg"
532
533
										>
											<style>
534
535
536
537
												.spinner_ajPY {
													transform-origin: center;
													animation: spinner_AtaB 0.75s infinite linear;
												}
538

539
540
541
542
543
												@keyframes spinner_AtaB {
													100% {
														transform: rotate(360deg);
													}
												}
544
545
											</style>
											<path
546
547
												d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
												opacity=".25"
548
549
											/>
											<path
550
551
												d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
												class="spinner_ajPY"
552
553
											/>
										</svg>
554
555
									</div>
								{:else}
556
557
									<svg
										xmlns="http://www.w3.org/2000/svg"
558
559
560
										viewBox="0 0 16 16"
										fill="currentColor"
										class="w-4 h-4"
561
									>
562
563
564
565
566
567
568
569
570
571
572
573
										<path
											d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
										/>
										<path
											d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
										/>
									</svg>
								{/if}
							</button>
						</div>

						<div class="mt-2 mb-1 text-xs text-gray-400 dark:text-gray-500">
Ased Mammad's avatar
Ased Mammad committed
574
575
							{$i18n.t('To access the available model names for downloading,')}
							<a
576
577
								class=" text-gray-500 dark:text-gray-300 font-medium underline"
								href="https://ollama.com/library"
Ased Mammad's avatar
Ased Mammad committed
578
								target="_blank">{$i18n.t('click here.')}</a
579
580
581
							>
						</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
582
583
584
						{#if Object.keys($MODEL_DOWNLOAD_POOL).length > 0}
							{#each Object.keys($MODEL_DOWNLOAD_POOL) as model}
								{#if 'pullProgress' in $MODEL_DOWNLOAD_POOL[model]}
Timothy J. Baek's avatar
Timothy J. Baek committed
585
586
587
588
589
590
591
592
593
									<div class="flex flex-col">
										<div class="font-medium mb-1">{model}</div>
										<div class="">
											<div class="flex flex-row justify-between space-x-4 pr-2">
												<div class=" flex-1">
													<div
														class="dark:bg-gray-600 bg-gray-500 text-xs font-medium text-gray-100 text-center p-0.5 leading-none rounded-full"
														style="width: {Math.max(
															15,
Timothy J. Baek's avatar
Timothy J. Baek committed
594
															$MODEL_DOWNLOAD_POOL[model].pullProgress ?? 0
Timothy J. Baek's avatar
Timothy J. Baek committed
595
596
														)}%"
													>
Timothy J. Baek's avatar
Timothy J. Baek committed
597
														{$MODEL_DOWNLOAD_POOL[model].pullProgress ?? 0}%
Timothy J. Baek's avatar
Timothy J. Baek committed
598
599
600
													</div>
												</div>

601
												<Tooltip content={$i18n.t('Cancel')}>
Timothy J. Baek's avatar
Timothy J. Baek committed
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
													<button
														class="text-gray-800 dark:text-gray-100"
														on:click={() => {
															cancelModelPullHandler(model);
														}}
													>
														<svg
															class="w-4 h-4 text-gray-800 dark:text-white"
															aria-hidden="true"
															xmlns="http://www.w3.org/2000/svg"
															width="24"
															height="24"
															fill="currentColor"
															viewBox="0 0 24 24"
														>
															<path
																stroke="currentColor"
																stroke-linecap="round"
																stroke-linejoin="round"
																stroke-width="2"
																d="M6 18 17.94 6M18 18 6.06 6"
															/>
														</svg>
													</button>
												</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
627
											</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
628
											{#if 'digest' in $MODEL_DOWNLOAD_POOL[model]}
Timothy J. Baek's avatar
Timothy J. Baek committed
629
												<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
Timothy J. Baek's avatar
Timothy J. Baek committed
630
													{$MODEL_DOWNLOAD_POOL[model].digest}
Timothy J. Baek's avatar
Timothy J. Baek committed
631
632
												</div>
											{/if}
633
634
										</div>
									</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
635
								{/if}
636
637
638
639
640
							{/each}
						{/if}
					</div>

					<div>
Ased Mammad's avatar
Ased Mammad committed
641
						<div class=" mb-2 text-sm font-medium">{$i18n.t('Delete a model')}</div>
642
643
644
645
646
						<div class="flex w-full">
							<div class="flex-1 mr-2">
								<select
									class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
									bind:value={deleteModelTag}
Ased Mammad's avatar
Ased Mammad committed
647
									placeholder={$i18n.t('Select a model')}
648
649
								>
									{#if !deleteModelTag}
Ased Mammad's avatar
Ased Mammad committed
650
										<option value="" disabled selected>{$i18n.t('Select a model')}</option>
651
									{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
652
									{#each $models.filter((m) => !(m?.preset ?? false) && m.owned_by === 'ollama' && (selectedOllamaUrlIdx === null ? true : (m?.ollama?.urls ?? []).includes(selectedOllamaUrlIdx))) as model}
653
										<option value={model.name} class="bg-gray-100 dark:bg-gray-700"
Timothy J. Baek's avatar
Timothy J. Baek committed
654
655
656
657
											>{model.name +
												' (' +
												(model.ollama.size / 1024 ** 3).toFixed(1) +
												' GB)'}</option
658
659
660
661
662
663
664
665
666
667
										>
									{/each}
								</select>
							</div>
							<button
								class="px-2.5 bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
								on:click={() => {
									deleteModelHandler();
								}}
							>
668
669
670
671
672
673
674
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 16 16"
									fill="currentColor"
									class="w-4 h-4"
								>
									<path
675
676
677
										fill-rule="evenodd"
										d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
										clip-rule="evenodd"
678
679
									/>
								</svg>
680
							</button>
681
682
						</div>
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
683

684
685
					<div class="pt-1">
						<div class="flex justify-between items-center text-xs">
Ased Mammad's avatar
Ased Mammad committed
686
							<div class=" text-sm font-medium">{$i18n.t('Experimental')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
687
							<button
688
								class=" text-xs font-medium text-gray-500"
689
								type="button"
690
691
								on:click={() => {
									showExperimentalOllama = !showExperimentalOllama;
Ased Mammad's avatar
Ased Mammad committed
692
								}}>{showExperimentalOllama ? $i18n.t('Hide') : $i18n.t('Show')}</button
Timothy J. Baek's avatar
Timothy J. Baek committed
693
694
							>
						</div>
695
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
696

697
698
699
700
701
702
703
					{#if showExperimentalOllama}
						<form
							on:submit|preventDefault={() => {
								uploadModelHandler();
							}}
						>
							<div class=" mb-2 flex w-full justify-between">
Ased Mammad's avatar
Ased Mammad committed
704
								<div class="  text-sm font-medium">{$i18n.t('Upload a GGUF model')}</div>
705
706

								<button
707
708
709
710
711
712
713
714
715
									class="p-1 px-3 text-xs flex rounded transition"
									on:click={() => {
										if (modelUploadMode === 'file') {
											modelUploadMode = 'url';
										} else {
											modelUploadMode = 'file';
										}
									}}
									type="button"
Timothy J. Baek's avatar
Timothy J. Baek committed
716
								>
717
									{#if modelUploadMode === 'file'}
Ased Mammad's avatar
Ased Mammad committed
718
										<span class="ml-2 self-center">{$i18n.t('File Mode')}</span>
719
									{:else}
Ased Mammad's avatar
Ased Mammad committed
720
										<span class="ml-2 self-center">{$i18n.t('URL Mode')}</span>
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
									{/if}
								</button>
							</div>

							<div class="flex w-full mb-1.5">
								<div class="flex flex-col w-full">
									{#if modelUploadMode === 'file'}
										<div class="flex-1 {modelInputFile && modelInputFile.length > 0 ? 'mr-2' : ''}">
											<input
												id="model-upload-input"
												bind:this={modelUploadInputElement}
												type="file"
												bind:files={modelInputFile}
												on:change={() => {
													console.log(modelInputFile);
												}}
Timothy J. Baek's avatar
Timothy J. Baek committed
737
												accept=".gguf,.safetensors"
738
739
740
741
742
743
												required
												hidden
											/>

											<button
												type="button"
Timothy J. Baek's avatar
Timothy J. Baek committed
744
												class="w-full rounded-lg text-left py-2 px-4 bg-white dark:text-gray-300 dark:bg-gray-850"
Timothy J. Baek's avatar
Timothy J. Baek committed
745
746
747
												on:click={() => {
													modelUploadInputElement.click();
												}}
748
											>
749
750
751
												{#if modelInputFile && modelInputFile.length > 0}
													{modelInputFile[0].name}
												{:else}
Ased Mammad's avatar
Ased Mammad committed
752
													{$i18n.t('Click here to select')}
753
754
												{/if}
											</button>
755
756
										</div>
									{:else}
757
758
										<div class="flex-1 {modelFileUrl !== '' ? 'mr-2' : ''}">
											<input
Timothy J. Baek's avatar
Timothy J. Baek committed
759
												class="w-full rounded-lg text-left py-2 px-4 bg-white dark:text-gray-300 dark:bg-gray-850 outline-none {modelFileUrl !==
760
761
762
763
764
765
												''
													? 'mr-2'
													: ''}"
												type="url"
												required
												bind:value={modelFileUrl}
Ased Mammad's avatar
Ased Mammad committed
766
												placeholder={$i18n.t('Type Hugging Face Resolve (Download) URL')}
767
											/>
768
										</div>
769
									{/if}
770
								</div>
771

772
773
								{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}
									<button
Timothy J. Baek's avatar
Timothy J. Baek committed
774
										class="px-2.5 bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg disabled:cursor-not-allowed transition"
775
776
777
778
779
780
781
782
783
784
										type="submit"
										disabled={modelTransferring}
									>
										{#if modelTransferring}
											<div class="self-center">
												<svg
													class=" w-4 h-4"
													viewBox="0 0 24 24"
													fill="currentColor"
													xmlns="http://www.w3.org/2000/svg"
785
786
												>
													<style>
787
788
789
790
														.spinner_ajPY {
															transform-origin: center;
															animation: spinner_AtaB 0.75s infinite linear;
														}
791

792
793
794
795
796
														@keyframes spinner_AtaB {
															100% {
																transform: rotate(360deg);
															}
														}
797
798
													</style>
													<path
799
800
														d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
														opacity=".25"
801
802
													/>
													<path
803
804
														d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
														class="spinner_ajPY"
805
806
													/>
												</svg>
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
											</div>
										{:else}
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 16 16"
												fill="currentColor"
												class="w-4 h-4"
											>
												<path
													d="M7.25 10.25a.75.75 0 0 0 1.5 0V4.56l2.22 2.22a.75.75 0 1 0 1.06-1.06l-3.5-3.5a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 1.06 1.06l2.22-2.22v5.69Z"
												/>
												<path
													d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
												/>
											</svg>
										{/if}
									</button>
								{/if}
							</div>

							{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}
828
								<div>
829
									<div>
Ased Mammad's avatar
Ased Mammad committed
830
										<div class=" my-2.5 text-sm font-medium">{$i18n.t('Modelfile Content')}</div>
831
832
										<textarea
											bind:value={modelFileContent}
Timothy J. Baek's avatar
Timothy J. Baek committed
833
											class="w-full rounded-lg py-2 px-4 text-sm bg-gray-100 dark:text-gray-100 dark:bg-gray-850 outline-none resize-none"
834
835
836
											rows="6"
										/>
									</div>
837
								</div>
838
839
							{/if}
							<div class=" mt-1 text-xs text-gray-400 dark:text-gray-500">
Ased Mammad's avatar
Ased Mammad committed
840
841
								{$i18n.t('To access the GGUF models available for downloading,')}
								<a
842
843
									class=" text-gray-500 dark:text-gray-300 font-medium underline"
									href="https://huggingface.co/models?search=gguf"
Ased Mammad's avatar
Ased Mammad committed
844
									target="_blank">{$i18n.t('click here.')}</a
845
								>
Timothy J. Baek's avatar
Timothy J. Baek committed
846
							</div>
847

Timothy J. Baek's avatar
Timothy J. Baek committed
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
							{#if uploadMessage}
								<div class="mt-2">
									<div class=" mb-2 text-xs">{$i18n.t('Upload Progress')}</div>

									<div class="w-full rounded-full dark:bg-gray-800">
										<div
											class="dark:bg-gray-600 bg-gray-500 text-xs font-medium text-gray-100 text-center p-0.5 leading-none rounded-full"
											style="width: 100%"
										>
											{uploadMessage}
										</div>
									</div>
									<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
										{modelFileDigest}
									</div>
								</div>
							{:else if uploadProgress !== null}
865
								<div class="mt-2">
Ased Mammad's avatar
Ased Mammad committed
866
									<div class=" mb-2 text-xs">{$i18n.t('Upload Progress')}</div>
867

868
869
870
871
872
873
874
875
876
877
									<div class="w-full rounded-full dark:bg-gray-800">
										<div
											class="dark:bg-gray-600 bg-gray-500 text-xs font-medium text-gray-100 text-center p-0.5 leading-none rounded-full"
											style="width: {Math.max(15, uploadProgress ?? 0)}%"
										>
											{uploadProgress ?? 0}%
										</div>
									</div>
									<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
										{modelFileDigest}
878
879
									</div>
								</div>
880
881
882
883
							{/if}
						</form>
					{/if}
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
884
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
885
		{:else if ollamaVersion === false}
Timothy J. Baek's avatar
Timothy J. Baek committed
886
			<div>Ollama Not Detected</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
887
888
889
890
891
892
		{:else}
			<div class="flex h-full justify-center">
				<div class="my-auto">
					<Spinner className="size-6" />
				</div>
			</div>
893
		{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
894
	</div>
Ased Mammad's avatar
Ased Mammad committed
895
</div>