Models.svelte 25.5 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

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

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

26
	let modelUploadInputElement: HTMLInputElement;
27

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

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

	let updateModelId = null;
	let updateProgress = null;

36
37
	let showExperimentalOllama = false;
	let ollamaVersion = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
38
39
40
41
42
43
44
45
	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
46
	let modelInputFile: File[] | null = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
47
	let modelFileUrl = '';
Justin Hayes's avatar
Justin Hayes committed
48
	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
49
	let modelFileDigest = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
50

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

	let deleteModelTag = '';

Timothy J. Baek's avatar
Timothy J. Baek committed
56
57
58
	const updateModelsHandler = async () => {
		for (const model of $models.filter(
			(m) =>
Timothy J. Baek's avatar
Timothy J. Baek committed
59
60
61
62
63
				!(m?.preset ?? false) &&
				m.owned_by === 'ollama' &&
				(selectedOllamaUrlIdx === null
					? true
					: (m?.ollama?.urls ?? []).includes(selectedOllamaUrlIdx))
Timothy J. Baek's avatar
Timothy J. Baek committed
64
65
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
		)) {
			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
124
	const pullModelHandler = async () => {
125
		const sanitizedModelTag = modelTag.trim().replace(/^ollama\s+(run|pull)\s+/, '');
Timothy J. Baek's avatar
Timothy J. Baek committed
126
127
		console.log($MODEL_DOWNLOAD_POOL);
		if ($MODEL_DOWNLOAD_POOL[sanitizedModelTag]) {
Ased Mammad's avatar
Ased Mammad committed
128
129
130
131
132
			toast.error(
				$i18n.t(`Model '{{modelTag}}' is already in queue for downloading.`, {
					modelTag: sanitizedModelTag
				})
			);
Timothy J. Baek's avatar
Timothy J. Baek committed
133
134
			return;
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
135
		if (Object.keys($MODEL_DOWNLOAD_POOL).length === MAX_PARALLEL_DOWNLOADS) {
Ased Mammad's avatar
Ased Mammad committed
136
137
138
			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
139
140
141
			return;
		}

Timothy J. Baek's avatar
Timothy J. Baek committed
142
143
144
145
146
147
148
149
150
151
		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
152

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

Timothy J. Baek's avatar
Timothy J. Baek committed
158
159
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
					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
192

Timothy J. Baek's avatar
Timothy J. Baek committed
193
194
195
196
197
198
199
200
201
202
									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
203

Timothy J. Baek's avatar
Timothy J. Baek committed
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
									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
220

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

			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
235
				models.set(await getModels(localStorage.token));
Timothy J. Baek's avatar
Timothy J. Baek committed
236
			} else {
Jannik Streidl's avatar
Jannik Streidl committed
237
				toast.error($i18n.t('Download canceled'));
Timothy J. Baek's avatar
Timothy J. Baek committed
238
239
240
241
242
243
244
245
			}

			delete $MODEL_DOWNLOAD_POOL[sanitizedModelTag];

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

		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
259
260
261
			const file = modelInputFile ? modelInputFile[0] : null;

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

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

		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
301
302
303
								if (uploadMessage) {
									uploadMessage = '';
								}
Timothy J. Baek's avatar
Timothy J. Baek committed
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
								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
322
323
324
		} else {
			const error = await fileResponse?.json();
			toast.error(error?.detail ?? error);
Timothy J. Baek's avatar
Timothy J. Baek committed
325
326
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
		}

		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
390
391
392
393

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

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

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

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
416
417
418
419
	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
420

Timothy J. Baek's avatar
Timothy J. Baek committed
421
422
423
424
425
426
427
			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
428
429
		}
	};
430
431

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

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
456
457
458
459
460
461
				{#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}
462
								placeholder={$i18n.t('Select an Ollama instance')}
Timothy J. Baek's avatar
Timothy J. Baek committed
463
464
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
							>
								{#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>
496
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
497
498
499
500

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

				<div class="space-y-2">
					<div>
505
						<div class=" mb-2 text-sm font-medium">{$i18n.t('Pull a model from Ollama.com')}</div>
506
507
508
509
						<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
510
511
512
									placeholder={$i18n.t('Enter model tag (e.g. {{modelTag}})', {
										modelTag: 'mistral:7b'
									})}
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
									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"
530
531
										>
											<style>
532
533
534
535
												.spinner_ajPY {
													transform-origin: center;
													animation: spinner_AtaB 0.75s infinite linear;
												}
536

537
538
539
540
541
												@keyframes spinner_AtaB {
													100% {
														transform: rotate(360deg);
													}
												}
542
543
											</style>
											<path
544
545
												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"
546
547
											/>
											<path
548
549
												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"
550
551
											/>
										</svg>
552
553
									</div>
								{:else}
554
555
									<svg
										xmlns="http://www.w3.org/2000/svg"
556
557
558
										viewBox="0 0 16 16"
										fill="currentColor"
										class="w-4 h-4"
559
									>
560
561
562
563
564
565
566
567
568
569
570
571
										<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
572
573
							{$i18n.t('To access the available model names for downloading,')}
							<a
574
575
								class=" text-gray-500 dark:text-gray-300 font-medium underline"
								href="https://ollama.com/library"
Ased Mammad's avatar
Ased Mammad committed
576
								target="_blank">{$i18n.t('click here.')}</a
577
578
579
							>
						</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
580
581
582
						{#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
583
584
585
586
587
588
589
590
591
									<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
592
															$MODEL_DOWNLOAD_POOL[model].pullProgress ?? 0
Timothy J. Baek's avatar
Timothy J. Baek committed
593
594
														)}%"
													>
Timothy J. Baek's avatar
Timothy J. Baek committed
595
														{$MODEL_DOWNLOAD_POOL[model].pullProgress ?? 0}%
Timothy J. Baek's avatar
Timothy J. Baek committed
596
597
598
													</div>
												</div>

599
												<Tooltip content={$i18n.t('Cancel')}>
Timothy J. Baek's avatar
Timothy J. Baek committed
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
													<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
625
											</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
626
											{#if 'digest' in $MODEL_DOWNLOAD_POOL[model]}
Timothy J. Baek's avatar
Timothy J. Baek committed
627
												<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
Timothy J. Baek's avatar
Timothy J. Baek committed
628
													{$MODEL_DOWNLOAD_POOL[model].digest}
Timothy J. Baek's avatar
Timothy J. Baek committed
629
630
												</div>
											{/if}
631
632
										</div>
									</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
633
								{/if}
634
635
636
637
638
							{/each}
						{/if}
					</div>

					<div>
Ased Mammad's avatar
Ased Mammad committed
639
						<div class=" mb-2 text-sm font-medium">{$i18n.t('Delete a model')}</div>
640
641
642
643
644
						<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
645
									placeholder={$i18n.t('Select a model')}
646
647
								>
									{#if !deleteModelTag}
Ased Mammad's avatar
Ased Mammad committed
648
										<option value="" disabled selected>{$i18n.t('Select a model')}</option>
649
									{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
650
									{#each $models.filter((m) => !(m?.preset ?? false) && m.owned_by === 'ollama' && (selectedOllamaUrlIdx === null ? true : (m?.ollama?.urls ?? []).includes(selectedOllamaUrlIdx))) as model}
651
										<option value={model.name} class="bg-gray-100 dark:bg-gray-700"
Timothy J. Baek's avatar
Timothy J. Baek committed
652
653
654
655
											>{model.name +
												' (' +
												(model.ollama.size / 1024 ** 3).toFixed(1) +
												' GB)'}</option
656
657
658
659
660
661
662
663
664
665
										>
									{/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();
								}}
							>
666
667
668
669
670
671
672
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 16 16"
									fill="currentColor"
									class="w-4 h-4"
								>
									<path
673
674
675
										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"
676
677
									/>
								</svg>
678
							</button>
679
680
						</div>
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
681

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

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

								<button
705
706
707
708
709
710
711
712
713
									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
714
								>
715
									{#if modelUploadMode === 'file'}
Ased Mammad's avatar
Ased Mammad committed
716
										<span class="ml-2 self-center">{$i18n.t('File Mode')}</span>
717
									{:else}
Ased Mammad's avatar
Ased Mammad committed
718
										<span class="ml-2 self-center">{$i18n.t('URL Mode')}</span>
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
									{/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
735
												accept=".gguf,.safetensors"
736
737
738
739
740
741
												required
												hidden
											/>

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

770
771
								{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}
									<button
Timothy J. Baek's avatar
Timothy J. Baek committed
772
										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"
773
774
775
776
777
778
779
780
781
782
										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"
783
784
												>
													<style>
785
786
787
788
														.spinner_ajPY {
															transform-origin: center;
															animation: spinner_AtaB 0.75s infinite linear;
														}
789

790
791
792
793
794
														@keyframes spinner_AtaB {
															100% {
																transform: rotate(360deg);
															}
														}
795
796
													</style>
													<path
797
798
														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"
799
800
													/>
													<path
801
802
														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"
803
804
													/>
												</svg>
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
											</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 !== '')}
826
								<div>
827
									<div>
Ased Mammad's avatar
Ased Mammad committed
828
										<div class=" my-2.5 text-sm font-medium">{$i18n.t('Modelfile Content')}</div>
829
830
										<textarea
											bind:value={modelFileContent}
Timothy J. Baek's avatar
Timothy J. Baek committed
831
											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"
832
833
834
											rows="6"
										/>
									</div>
835
								</div>
836
837
							{/if}
							<div class=" mt-1 text-xs text-gray-400 dark:text-gray-500">
Ased Mammad's avatar
Ased Mammad committed
838
839
								{$i18n.t('To access the GGUF models available for downloading,')}
								<a
840
841
									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
842
									target="_blank">{$i18n.t('click here.')}</a
843
								>
Timothy J. Baek's avatar
Timothy J. Baek committed
844
							</div>
845

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

866
867
868
869
870
871
872
873
874
875
									<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}
876
877
									</div>
								</div>
878
879
880
881
							{/if}
						</form>
					{/if}
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
882
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
883
884
		{:else}
			<div>Ollama Not Detected</div>
885
		{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
886
	</div>
Ased Mammad's avatar
Ased Mammad committed
887
</div>