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

5
6
7
	import {
		createModel,
		deleteModel,
Timothy J. Baek's avatar
Timothy J. Baek committed
8
		downloadModel,
9
10
		getOllamaUrls,
		getOllamaVersion,
Timothy J. Baek's avatar
Timothy J. Baek committed
11
		pullModel,
12
		cancelOllamaRequest,
Timothy J. Baek's avatar
Timothy J. Baek committed
13
		uploadModel
14
	} from '$lib/apis/ollama';
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';
19
	import { addLiteLLMModel, deleteLiteLLMModel, getLiteLLMModelInfo } from '$lib/apis/litellm';
20
	import { getModelConfig, type GlobalModelConfig, updateModelConfig } from '$lib/apis';
Timothy J. Baek's avatar
Timothy J. Baek committed
21
	import Tooltip from '$lib/components/common/Tooltip.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
22

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

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

27
28
	let showLiteLLM = false;
	let showLiteLLMParams = false;
29
	let modelUploadInputElement: HTMLInputElement;
30
31
32
33
34
35
36
	let liteLLMModelInfo = [];

	let liteLLMModel = '';
	let liteLLMModelName = '';
	let liteLLMAPIBase = '';
	let liteLLMAPIKey = '';
	let liteLLMRPM = '';
37
	let liteLLMMaxTokens = '';
38

39
	let deleteLiteLLMModelName = '';
40
41
42

	$: liteLLMModelName = liteLLMModel;

Timothy J. Baek's avatar
Timothy J. Baek committed
43
	// Models
44
45
46

	let OLLAMA_URLS = [];
	let selectedOllamaUrlIdx: string | null = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
47
48
49
50

	let updateModelId = null;
	let updateProgress = null;

51
52
	let showExperimentalOllama = false;
	let ollamaVersion = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
53
54
55
56
57
58
59
60
	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
61
	let modelInputFile: File[] | null = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
62
	let modelFileUrl = '';
Justin Hayes's avatar
Justin Hayes committed
63
	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
64
	let modelFileDigest = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
65

Timothy J. Baek's avatar
Timothy J. Baek committed
66
	let uploadProgress = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
67
	let uploadMessage = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
68
69
70

	let deleteModelTag = '';

71
72
73
74
75
76
77
78
79
80
81
82
	// Model configuration
	let modelConfig: GlobalModelConfig;
	let showModelInfo = false;
	let selectedModelId = '';
	let modelName = '';
	let modelDescription = '';
	let modelIsVisionCapable = false;

	const onModelInfoIdChange = () => {
		const model = $models.find((m) => m.id === selectedModelId);
		if (model) {
			modelName = model.custom_info?.name ?? model.name;
83
84
			modelDescription = model.custom_info?.params.description ?? '';
			modelIsVisionCapable = model.custom_info?.params.vision_capable ?? false;
85
86
87
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
	const updateModelsHandler = async () => {
		for (const model of $models.filter(
			(m) =>
				m.size != null &&
				(selectedOllamaUrlIdx === null ? true : (m?.urls ?? []).includes(selectedOllamaUrlIdx))
		)) {
			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
153
	const pullModelHandler = async () => {
154
		const sanitizedModelTag = modelTag.trim().replace(/^ollama\s+(run|pull)\s+/, '');
Timothy J. Baek's avatar
Timothy J. Baek committed
155
156
		console.log($MODEL_DOWNLOAD_POOL);
		if ($MODEL_DOWNLOAD_POOL[sanitizedModelTag]) {
Ased Mammad's avatar
Ased Mammad committed
157
158
159
160
161
			toast.error(
				$i18n.t(`Model '{{modelTag}}' is already in queue for downloading.`, {
					modelTag: sanitizedModelTag
				})
			);
Timothy J. Baek's avatar
Timothy J. Baek committed
162
163
			return;
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
164
		if (Object.keys($MODEL_DOWNLOAD_POOL).length === MAX_PARALLEL_DOWNLOADS) {
Ased Mammad's avatar
Ased Mammad committed
165
166
167
			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
168
169
170
			return;
		}

Timothy J. Baek's avatar
Timothy J. Baek committed
171
172
173
174
175
176
177
178
179
180
		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
181

Timothy J. Baek's avatar
Timothy J. Baek committed
182
183
184
185
			while (true) {
				try {
					const { value, done } = await reader.read();
					if (done) break;
Timothy J. Baek's avatar
Timothy J. Baek committed
186

Timothy J. Baek's avatar
Timothy J. Baek committed
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
					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
221

Timothy J. Baek's avatar
Timothy J. Baek committed
222
223
224
225
226
227
228
229
230
231
									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
232

Timothy J. Baek's avatar
Timothy J. Baek committed
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
									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
249

Timothy J. Baek's avatar
Timothy J. Baek committed
250
251
					toast.error(error);
					// opts.callback({ success: false, error, modelName: opts.modelName });
Timothy J. Baek's avatar
Timothy J. Baek committed
252
253
				}
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
254
255
256
257
258
259
260
261
262
263
264
265

			console.log($MODEL_DOWNLOAD_POOL[sanitizedModelTag]);

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

				models.set(await getModels(localStorage.token));
			} else {
Jannik Streidl's avatar
Jannik Streidl committed
266
				toast.error($i18n.t('Download canceled'));
Timothy J. Baek's avatar
Timothy J. Baek committed
267
268
269
270
271
272
273
274
			}

			delete $MODEL_DOWNLOAD_POOL[sanitizedModelTag];

			MODEL_DOWNLOAD_POOL.set({
				...$MODEL_DOWNLOAD_POOL
			});
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
275
276
277
278
279
280
281
282
283
284
285
286
287

		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
288
289
290
			const file = modelInputFile ? modelInputFile[0] : null;

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

Timothy J. Baek's avatar
Timothy J. Baek committed
293
				fileResponse = await uploadModel(localStorage.token, file, selectedOllamaUrlIdx).catch(
Timothy J. Baek's avatar
Timothy J. Baek committed
294
295
296
297
298
299
					(error) => {
						toast.error(error);
						return null;
					}
				);
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
300
		} else {
Timothy J. Baek's avatar
Timothy J. Baek committed
301
			uploadProgress = 0;
Timothy J. Baek's avatar
Timothy J. Baek committed
302
303
304
305
306
307
308
309
			fileResponse = await downloadModel(
				localStorage.token,
				modelFileUrl,
				selectedOllamaUrlIdx
			).catch((error) => {
				toast.error(error);
				return null;
			});
Timothy J. Baek's avatar
Timothy J. Baek committed
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
		}

		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
330
331
332
								if (uploadMessage) {
									uploadMessage = '';
								}
Timothy J. Baek's avatar
Timothy J. Baek committed
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
								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
351
352
353
		} else {
			const error = await fileResponse?.json();
			toast.error(error?.detail ?? error);
Timothy J. Baek's avatar
Timothy J. Baek committed
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
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
		}

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

		if (modelUploadInputElement) {
			modelUploadInputElement.value = '';
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
423
		modelInputFile = null;
Timothy J. Baek's avatar
Timothy J. Baek committed
424
425
426
427
428
429
430
		modelTransferring = false;
		uploadProgress = null;

		models.set(await getModels());
	};

	const deleteModelHandler = async () => {
431
432
433
434
435
		const res = await deleteModel(localStorage.token, deleteModelTag, selectedOllamaUrlIdx).catch(
			(error) => {
				toast.error(error);
			}
		);
Timothy J. Baek's avatar
Timothy J. Baek committed
436
437

		if (res) {
Jannik Streidl's avatar
Jannik Streidl committed
438
			toast.success($i18n.t(`Deleted {{deleteModelTag}}`, { deleteModelTag }));
Timothy J. Baek's avatar
Timothy J. Baek committed
439
440
441
442
443
444
		}

		deleteModelTag = '';
		models.set(await getModels());
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
445
446
447
448
	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
449

Timothy J. Baek's avatar
Timothy J. Baek committed
450
451
452
453
454
455
456
			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
457
458
		}
	};
459
460
461
462
463
464
465
466

	const addLiteLLMModelHandler = async () => {
		if (!liteLLMModelInfo.find((info) => info.model_name === liteLLMModelName)) {
			const res = await addLiteLLMModel(localStorage.token, {
				name: liteLLMModelName,
				model: liteLLMModel,
				api_base: liteLLMAPIBase,
				api_key: liteLLMAPIKey,
467
468
				rpm: liteLLMRPM,
				max_tokens: liteLLMMaxTokens
469
470
471
472
473
474
475
476
477
478
479
			}).catch((error) => {
				toast.error(error);
				return null;
			});

			if (res) {
				if (res.message) {
					toast.success(res.message);
				}
			}
		} else {
Ased Mammad's avatar
Ased Mammad committed
480
			toast.error($i18n.t(`Model {{modelName}} already exists.`, { modelName: liteLLMModelName }));
481
482
483
484
485
486
487
		}

		liteLLMModelName = '';
		liteLLMModel = '';
		liteLLMAPIBase = '';
		liteLLMAPIKey = '';
		liteLLMRPM = '';
Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
488
		liteLLMMaxTokens = '';
489
490
491
492
493
494

		liteLLMModelInfo = await getLiteLLMModelInfo(localStorage.token);
		models.set(await getModels());
	};

	const deleteLiteLLMModelHandler = async () => {
495
		const res = await deleteLiteLLMModel(localStorage.token, deleteLiteLLMModelName).catch(
496
497
498
499
500
501
502
503
504
505
506
507
			(error) => {
				toast.error(error);
				return null;
			}
		);

		if (res) {
			if (res.message) {
				toast.success(res.message);
			}
		}

508
		deleteLiteLLMModelName = '';
509
510
511
512
		liteLLMModelInfo = await getLiteLLMModelInfo(localStorage.token);
		models.set(await getModels());
	};

513
514
515
516
517
518
519
520
521
522
523
	const addModelInfoHandler = async () => {
		if (!selectedModelId) {
			return;
		}
		let model = $models.find((m) => m.id === selectedModelId);
		if (!model) {
			return;
		}
		const modelSource =
			'details' in model ? 'ollama' : model.source === 'LiteLLM' ? 'litellm' : 'openai';
		// Remove any existing config
524
525
526
		modelConfig = modelConfig.filter(
			(m) => !(m.id === selectedModelId && m.source === modelSource)
		);
527
		// Add new config
528
		modelConfig.push({
529
530
			id: selectedModelId,
			name: modelName,
531
532
533
534
535
			source: modelSource,
			params: {
				description: modelDescription,
				vision_capable: modelIsVisionCapable
			}
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
		});
		await updateModelConfig(localStorage.token, modelConfig);
		toast.success(
			$i18n.t('Model info for {{modelName}} added successfully', { modelName: selectedModelId })
		);
		models.set(await getModels());
	};

	const deleteModelInfoHandler = async () => {
		if (!selectedModelId) {
			return;
		}
		let model = $models.find((m) => m.id === selectedModelId);
		if (!model) {
			return;
		}
		const modelSource =
			'details' in model ? 'ollama' : model.source === 'LiteLLM' ? 'litellm' : 'openai';
554
555
556
		modelConfig = modelConfig.filter(
			(m) => !(m.id === selectedModelId && m.source === modelSource)
		);
557
558
559
560
		await updateModelConfig(localStorage.token, modelConfig);
		toast.success(
			$i18n.t('Model info for {{modelName}} deleted successfully', { modelName: selectedModelId })
		);
561
		models.set(await getModels());
562
563
564
565
566
567
	};

	const toggleIsVisionCapable = () => {
		modelIsVisionCapable = !modelIsVisionCapable;
	};

568
	onMount(async () => {
569
570
571
572
573
574
		await Promise.all([
			(async () => {
				OLLAMA_URLS = await getOllamaUrls(localStorage.token).catch((error) => {
					toast.error(error);
					return [];
				});
575

576
577
578
579
580
581
582
583
584
585
586
587
588
589
				if (OLLAMA_URLS.length > 0) {
					selectedOllamaUrlIdx = 0;
				}
			})(),
			(async () => {
				liteLLMModelInfo = await getLiteLLMModelInfo(localStorage.token);
			})(),
			(async () => {
				modelConfig = await getModelConfig(localStorage.token);
			})(),
			(async () => {
				ollamaVersion = await getOllamaVersion(localStorage.token).catch((error) => false);
			})()
		]);
590
	});
Timothy J. Baek's avatar
Timothy J. Baek committed
591
592
593
</script>

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

Timothy J. Baek's avatar
Timothy J. Baek committed
599
600
601
602
603
604
				{#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}
605
								placeholder={$i18n.t('Select an Ollama instance')}
Timothy J. Baek's avatar
Timothy J. Baek committed
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
							>
								{#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>
639
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
640
641
642
643

					{#if updateModelId}
						Updating "{updateModelId}" {updateProgress ? `(${updateProgress}%)` : ''}
					{/if}
644
645
646
647
				{/if}

				<div class="space-y-2">
					<div>
648
						<div class=" mb-2 text-sm font-medium">{$i18n.t('Pull a model from Ollama.com')}</div>
649
650
651
652
						<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
653
654
655
									placeholder={$i18n.t('Enter model tag (e.g. {{modelTag}})', {
										modelTag: 'mistral:7b'
									})}
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
									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"
673
674
										>
											<style>
675
676
677
678
												.spinner_ajPY {
													transform-origin: center;
													animation: spinner_AtaB 0.75s infinite linear;
												}
679

680
681
682
683
684
												@keyframes spinner_AtaB {
													100% {
														transform: rotate(360deg);
													}
												}
685
686
											</style>
											<path
687
688
												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"
689
690
											/>
											<path
691
692
												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"
693
694
											/>
										</svg>
695
696
									</div>
								{:else}
697
698
									<svg
										xmlns="http://www.w3.org/2000/svg"
699
700
701
										viewBox="0 0 16 16"
										fill="currentColor"
										class="w-4 h-4"
702
									>
703
704
705
706
707
708
709
710
711
712
713
714
										<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
715
716
							{$i18n.t('To access the available model names for downloading,')}
							<a
717
718
								class=" text-gray-500 dark:text-gray-300 font-medium underline"
								href="https://ollama.com/library"
Ased Mammad's avatar
Ased Mammad committed
719
								target="_blank">{$i18n.t('click here.')}</a
720
721
722
							>
						</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
723
724
725
						{#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
726
727
728
729
730
731
732
733
734
									<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
735
															$MODEL_DOWNLOAD_POOL[model].pullProgress ?? 0
Timothy J. Baek's avatar
Timothy J. Baek committed
736
737
														)}%"
													>
Timothy J. Baek's avatar
Timothy J. Baek committed
738
														{$MODEL_DOWNLOAD_POOL[model].pullProgress ?? 0}%
Timothy J. Baek's avatar
Timothy J. Baek committed
739
740
741
													</div>
												</div>

742
												<Tooltip content={$i18n.t('Cancel')}>
Timothy J. Baek's avatar
Timothy J. Baek committed
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
													<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
768
											</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
769
											{#if 'digest' in $MODEL_DOWNLOAD_POOL[model]}
Timothy J. Baek's avatar
Timothy J. Baek committed
770
												<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
Timothy J. Baek's avatar
Timothy J. Baek committed
771
													{$MODEL_DOWNLOAD_POOL[model].digest}
Timothy J. Baek's avatar
Timothy J. Baek committed
772
773
												</div>
											{/if}
774
775
										</div>
									</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
776
								{/if}
777
778
779
780
781
							{/each}
						{/if}
					</div>

					<div>
Ased Mammad's avatar
Ased Mammad committed
782
						<div class=" mb-2 text-sm font-medium">{$i18n.t('Delete a model')}</div>
783
784
785
786
787
						<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
788
									placeholder={$i18n.t('Select a model')}
789
790
								>
									{#if !deleteModelTag}
Ased Mammad's avatar
Ased Mammad committed
791
										<option value="" disabled selected>{$i18n.t('Select a model')}</option>
792
									{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
793
									{#each $models.filter((m) => m.size != null && (selectedOllamaUrlIdx === null ? true : (m?.urls ?? []).includes(selectedOllamaUrlIdx))) as model}
794
										<option value={model.name} class="bg-gray-100 dark:bg-gray-700"
795
											>{(model.custom_info?.name ?? model.name) +
796
797
798
												' (' +
												(model.size / 1024 ** 3).toFixed(1) +
												' GB)'}</option
799
800
801
802
803
804
805
806
807
808
										>
									{/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();
								}}
							>
809
810
811
812
813
814
815
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 16 16"
									fill="currentColor"
									class="w-4 h-4"
								>
									<path
816
817
818
										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"
819
820
									/>
								</svg>
821
							</button>
822
823
						</div>
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
824

825
826
					<div class="pt-1">
						<div class="flex justify-between items-center text-xs">
Ased Mammad's avatar
Ased Mammad committed
827
							<div class=" text-sm font-medium">{$i18n.t('Experimental')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
828
							<button
829
								class=" text-xs font-medium text-gray-500"
830
								type="button"
831
832
								on:click={() => {
									showExperimentalOllama = !showExperimentalOllama;
Ased Mammad's avatar
Ased Mammad committed
833
								}}>{showExperimentalOllama ? $i18n.t('Hide') : $i18n.t('Show')}</button
Timothy J. Baek's avatar
Timothy J. Baek committed
834
835
							>
						</div>
836
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
837

838
839
840
841
842
843
844
					{#if showExperimentalOllama}
						<form
							on:submit|preventDefault={() => {
								uploadModelHandler();
							}}
						>
							<div class=" mb-2 flex w-full justify-between">
Ased Mammad's avatar
Ased Mammad committed
845
								<div class="  text-sm font-medium">{$i18n.t('Upload a GGUF model')}</div>
846
847

								<button
848
849
850
851
852
853
854
855
856
									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
857
								>
858
									{#if modelUploadMode === 'file'}
Ased Mammad's avatar
Ased Mammad committed
859
										<span class="ml-2 self-center">{$i18n.t('File Mode')}</span>
860
									{:else}
Ased Mammad's avatar
Ased Mammad committed
861
										<span class="ml-2 self-center">{$i18n.t('URL Mode')}</span>
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
									{/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
878
												accept=".gguf,.safetensors"
879
880
881
882
883
884
												required
												hidden
											/>

											<button
												type="button"
Timothy J. Baek's avatar
Timothy J. Baek committed
885
												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
886
887
888
												on:click={() => {
													modelUploadInputElement.click();
												}}
889
											>
890
891
892
												{#if modelInputFile && modelInputFile.length > 0}
													{modelInputFile[0].name}
												{:else}
Ased Mammad's avatar
Ased Mammad committed
893
													{$i18n.t('Click here to select')}
894
895
												{/if}
											</button>
896
897
										</div>
									{:else}
898
899
										<div class="flex-1 {modelFileUrl !== '' ? 'mr-2' : ''}">
											<input
Timothy J. Baek's avatar
Timothy J. Baek committed
900
												class="w-full rounded-lg text-left py-2 px-4 bg-white dark:text-gray-300 dark:bg-gray-850 outline-none {modelFileUrl !==
901
902
903
904
905
906
												''
													? 'mr-2'
													: ''}"
												type="url"
												required
												bind:value={modelFileUrl}
Ased Mammad's avatar
Ased Mammad committed
907
												placeholder={$i18n.t('Type Hugging Face Resolve (Download) URL')}
908
											/>
909
										</div>
910
									{/if}
911
								</div>
912

913
914
								{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}
									<button
Timothy J. Baek's avatar
Timothy J. Baek committed
915
										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"
916
917
918
919
920
921
922
923
924
925
										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"
926
927
												>
													<style>
928
929
930
931
														.spinner_ajPY {
															transform-origin: center;
															animation: spinner_AtaB 0.75s infinite linear;
														}
932

933
934
935
936
937
														@keyframes spinner_AtaB {
															100% {
																transform: rotate(360deg);
															}
														}
938
939
													</style>
													<path
940
941
														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"
942
943
													/>
													<path
944
945
														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"
946
947
													/>
												</svg>
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
											</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 !== '')}
969
								<div>
970
									<div>
Ased Mammad's avatar
Ased Mammad committed
971
										<div class=" my-2.5 text-sm font-medium">{$i18n.t('Modelfile Content')}</div>
972
973
										<textarea
											bind:value={modelFileContent}
Timothy J. Baek's avatar
Timothy J. Baek committed
974
											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"
975
976
977
											rows="6"
										/>
									</div>
978
								</div>
979
980
							{/if}
							<div class=" mt-1 text-xs text-gray-400 dark:text-gray-500">
Ased Mammad's avatar
Ased Mammad committed
981
982
								{$i18n.t('To access the GGUF models available for downloading,')}
								<a
983
984
									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
985
									target="_blank">{$i18n.t('click here.')}</a
986
								>
Timothy J. Baek's avatar
Timothy J. Baek committed
987
							</div>
988

Timothy J. Baek's avatar
Timothy J. Baek committed
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
							{#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}
1006
								<div class="mt-2">
Ased Mammad's avatar
Ased Mammad committed
1007
									<div class=" mb-2 text-xs">{$i18n.t('Upload Progress')}</div>
1008

1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
									<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}
1019
1020
									</div>
								</div>
1021
1022
1023
1024
							{/if}
						</form>
					{/if}
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1025
			</div>
1026
1027
			<hr class=" dark:border-gray-700 my-2" />
		{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
1028

1029
		<!--TODO: Hide LiteLLM options when ENABLE_LITELLM=false-->
1030
1031
		<div class=" space-y-3">
			<div class="mt-2 space-y-3 pr-1.5">
Timothy J. Baek's avatar
Timothy J. Baek committed
1032
				<div>
1033
					<div class="mb-2">
1034
						<div class="flex justify-between items-center text-xs">
1035
							<div class=" text-sm font-medium">{$i18n.t('Manage LiteLLM Models')}</div>
1036
1037
1038
1039
							<button
								class=" text-xs font-medium text-gray-500"
								type="button"
								on:click={() => {
1040
									showLiteLLM = !showLiteLLM;
1041
								}}>{showLiteLLM ? $i18n.t('Hide') : $i18n.t('Show')}</button
1042
1043
1044
1045
							>
						</div>
					</div>

1046
1047
1048
					{#if showLiteLLM}
						<div>
							<div class="flex justify-between items-center text-xs">
Ased Mammad's avatar
Ased Mammad committed
1049
								<div class=" text-sm font-medium">{$i18n.t('Add a model')}</div>
1050
1051
1052
1053
1054
1055
								<button
									class=" text-xs font-medium text-gray-500"
									type="button"
									on:click={() => {
										showLiteLLMParams = !showLiteLLMParams;
									}}
Ased Mammad's avatar
Ased Mammad committed
1056
1057
1058
									>{showLiteLLMParams
										? $i18n.t('Hide Additional Params')
										: $i18n.t('Show Additional Params')}</button
1059
								>
1060
							</div>
1061
						</div>
1062

1063
1064
1065
1066
1067
						<div class="my-2 space-y-2">
							<div class="flex w-full mb-1.5">
								<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
1068
										placeholder={$i18n.t('Enter LiteLLM Model (litellm_params.model)')}
1069
1070
										bind:value={liteLLMModel}
										autocomplete="off"
1071
									/>
1072
								</div>
1073

1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
								<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={() => {
										addLiteLLMModelHandler();
									}}
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 16 16"
										fill="currentColor"
										class="w-4 h-4"
									>
										<path
											d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
1088
										/>
1089
1090
									</svg>
								</button>
1091
1092
							</div>

1093
1094
							{#if showLiteLLMParams}
								<div>
1095
									<div class=" mb-1.5 text-sm font-medium">{$i18n.t('Model Name')}</div>
1096
1097
1098
1099
1100
1101
1102
1103
1104
									<div class="flex w-full">
										<div class="flex-1">
											<input
												class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
												placeholder="Enter Model Name (model_name)"
												bind:value={liteLLMModelName}
												autocomplete="off"
											/>
										</div>
1105
1106
1107
									</div>
								</div>

1108
								<div>
Ased Mammad's avatar
Ased Mammad committed
1109
									<div class=" mb-1.5 text-sm font-medium">{$i18n.t('API Base URL')}</div>
1110
1111
1112
1113
									<div class="flex w-full">
										<div class="flex-1">
											<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
1114
1115
1116
												placeholder={$i18n.t(
													'Enter LiteLLM API Base URL (litellm_params.api_base)'
												)}
1117
1118
1119
1120
												bind:value={liteLLMAPIBase}
												autocomplete="off"
											/>
										</div>
1121
1122
1123
									</div>
								</div>

1124
								<div>
Ased Mammad's avatar
Ased Mammad committed
1125
									<div class=" mb-1.5 text-sm font-medium">{$i18n.t('API Key')}</div>
1126
1127
1128
1129
									<div class="flex w-full">
										<div class="flex-1">
											<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
1130
												placeholder={$i18n.t('Enter LiteLLM API Key (litellm_params.api_key)')}
1131
1132
1133
1134
												bind:value={liteLLMAPIKey}
												autocomplete="off"
											/>
										</div>
1135
1136
									</div>
								</div>
1137

1138
								<div>
Ased Mammad's avatar
Ased Mammad committed
1139
									<div class="mb-1.5 text-sm font-medium">{$i18n.t('API RPM')}</div>
1140
1141
1142
1143
									<div class="flex w-full">
										<div class="flex-1">
											<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
1144
												placeholder={$i18n.t('Enter LiteLLM API RPM (litellm_params.rpm)')}
1145
1146
1147
1148
												bind:value={liteLLMRPM}
												autocomplete="off"
											/>
										</div>
1149
1150
									</div>
								</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1151

1152
								<div>
Ased Mammad's avatar
Ased Mammad committed
1153
									<div class="mb-1.5 text-sm font-medium">{$i18n.t('Max Tokens')}</div>
1154
1155
1156
1157
									<div class="flex w-full">
										<div class="flex-1">
											<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
1158
												placeholder={$i18n.t('Enter Max Tokens (litellm_params.max_tokens)')}
1159
1160
1161
1162
1163
1164
												bind:value={liteLLMMaxTokens}
												type="number"
												min="1"
												autocomplete="off"
											/>
										</div>
1165
									</div>
1166
								</div>
1167
							{/if}
1168
1169
						</div>

1170
						<div class="mb-2 text-xs text-gray-400 dark:text-gray-500">
Ased Mammad's avatar
Ased Mammad committed
1171
							{$i18n.t('Not sure what to add?')}
1172
1173
1174
1175
1176
							<a
								class=" text-gray-300 font-medium underline"
								href="https://litellm.vercel.app/docs/proxy/configs#quick-start"
								target="_blank"
							>
Ased Mammad's avatar
Ased Mammad committed
1177
								{$i18n.t('Click here for help.')}
1178
							</a>
1179
1180
1181
						</div>

						<div>
Ased Mammad's avatar
Ased Mammad committed
1182
							<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Delete a model')}</div>
1183
							<div class="flex w-full">
1184
1185
1186
								<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"
1187
										bind:value={deleteLiteLLMModelName}
Ased Mammad's avatar
Ased Mammad committed
1188
										placeholder={$i18n.t('Select a model')}
1189
									>
1190
										{#if !deleteLiteLLMModelName}
Ased Mammad's avatar
Ased Mammad committed
1191
											<option value="" disabled selected>{$i18n.t('Select a model')}</option>
1192
1193
										{/if}
										{#each liteLLMModelInfo as model}
1194
											<option value={model.model_name} class="bg-gray-100 dark:bg-gray-700"
1195
1196
1197
1198
												>{model.model_name}</option
											>
										{/each}
									</select>
1199
								</div>
1200
1201
1202
1203
1204
								<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={() => {
										deleteLiteLLMModelHandler();
									}}
1205
								>
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 16 16"
										fill="currentColor"
										class="w-4 h-4"
									>
										<path
											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"
										/>
									</svg>
								</button>
1219
1220
1221
							</div>
						</div>
					{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
1222
1223
				</div>
			</div>
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
			<hr class=" dark:border-gray-700 my-2" />
		</div>

		<div class=" space-y-3">
			<div class="mt-2 space-y-3 pr-1.5">
				<div>
					<div class="mb-2">
						<div class="flex justify-between items-center text-xs">
							<div class=" text-sm font-medium">{$i18n.t('Manage Model Information')}</div>
							<button
								class=" text-xs font-medium text-gray-500"
								type="button"
								on:click={() => {
									showModelInfo = !showModelInfo;
								}}>{showModelInfo ? $i18n.t('Hide') : $i18n.t('Show')}</button
							>
						</div>
					</div>

					{#if showModelInfo}
						<div>
							<div class="flex justify-between items-center text-xs">
								<div class=" text-sm font-medium">{$i18n.t('Current Models')}</div>
							</div>

							<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={selectedModelId}
										on:change={onModelInfoIdChange}
									>
										{#if !selectedModelId}
											<option value="" disabled selected>{$i18n.t('Select a model')}</option>
										{/if}
										{#each $models as model}
											<option value={model.id} class="bg-gray-100 dark:bg-gray-700"
												>{'details' in model
													? 'Ollama'
													: model.source === 'LiteLLM'
													? 'LiteLLM'
													: 'OpenAI'}: {model.name}{`${
Jun Siang Cheah's avatar
Jun Siang Cheah committed
1266
													model.custom_info?.name ? ' - ' + model.custom_info?.name : ''
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
1363
												}`}</option
											>
										{/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={() => {
										deleteModelInfoHandler();
									}}
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 16 16"
										fill="currentColor"
										class="w-4 h-4"
									>
										<path
											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"
										/>
									</svg>
								</button>
							</div>

							{#if selectedModelId}
								<div>
									<div class=" mb-1.5 text-sm font-medium">{$i18n.t('Model Display Name')}</div>
									<div class="flex w-full mb-1.5">
										<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"
												placeholder={$i18n.t('Enter Model Display Name')}
												bind:value={modelName}
												autocomplete="off"
											/>
										</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={() => {
												addModelInfoHandler();
											}}
										>
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 16 16"
												fill="currentColor"
												class="w-4 h-4"
											>
												<path
													d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
												/>
											</svg>
										</button>
									</div>
								</div>

								<div>
									<div class=" mb-1.5 text-sm font-medium">{$i18n.t('Model Description')}</div>

									<div class="flex w-full">
										<div class="flex-1">
											<textarea
												class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg -mb-1"
												rows="2"
												bind:value={modelDescription}
											/>
										</div>
									</div>
								</div>

								<div class="py-0.5 flex w-full justify-between">
									<div class=" self-center text-sm font-medium">
										{$i18n.t('Is Model Vision Capable')}
									</div>

									<button
										class="p-1 px-3sm flex rounded transition"
										on:click={() => {
											toggleIsVisionCapable();
										}}
										type="button"
									>
										{#if modelIsVisionCapable === true}
											<span class="ml-2 self-center">{$i18n.t('Yes')}</span>
										{:else}
											<span class="ml-2 self-center">{$i18n.t('No')}</span>
										{/if}
									</button>
								</div>
							{/if}
						</div>
					{/if}
				</div>
			</div>
1364
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1365
	</div>
Ased Mammad's avatar
Ased Mammad committed
1366
</div>