Models.svelte 40.6 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
refac  
Timothy J. Baek committed
25
	export let getModels: Function;
Timothy J. Baek's avatar
Timothy J. Baek committed
26

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?.meta.description ?? '';
			modelIsVisionCapable = model.custom_info?.meta.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

			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
264
				models.set(await getModels(localStorage.token));
Timothy J. Baek's avatar
Timothy J. Baek committed
265
			} 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
		modelTransferring = false;
		uploadProgress = null;

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
427
		models.set(await getModels());
Timothy J. Baek's avatar
Timothy J. Baek committed
428
429
430
	};

	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
		}

		deleteModelTag = '';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
442
		models.set(await getModels());
Timothy J. Baek's avatar
Timothy J. Baek committed
443
444
	};

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

		liteLLMModelInfo = await getLiteLLMModelInfo(localStorage.token);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
491
		models.set(await getModels());
492
493
494
	};

	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
		liteLLMModelInfo = await getLiteLLMModelInfo(localStorage.token);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
510
		models.set(await getModels());
511
512
	};

513
514
515
516
517
518
519
520
521
	const addModelInfoHandler = async () => {
		if (!selectedModelId) {
			return;
		}
		let model = $models.find((m) => m.id === selectedModelId);
		if (!model) {
			return;
		}
		// Remove any existing config
Timothy J. Baek's avatar
Timothy J. Baek committed
522
		modelConfig = modelConfig.filter((m) => !(m.id === selectedModelId));
523
		// Add new config
524
		modelConfig.push({
525
526
			id: selectedModelId,
			name: modelName,
527
528
			params: {},
			meta: {
529
530
531
				description: modelDescription,
				vision_capable: modelIsVisionCapable
			}
532
533
534
535
536
		});
		await updateModelConfig(localStorage.token, modelConfig);
		toast.success(
			$i18n.t('Model info for {{modelName}} added successfully', { modelName: selectedModelId })
		);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
537
		models.set(await getModels());
538
539
540
541
542
543
544
545
546
547
	};

	const deleteModelInfoHandler = async () => {
		if (!selectedModelId) {
			return;
		}
		let model = $models.find((m) => m.id === selectedModelId);
		if (!model) {
			return;
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
548
		modelConfig = modelConfig.filter((m) => !(m.id === selectedModelId));
549
550
551
552
		await updateModelConfig(localStorage.token, modelConfig);
		toast.success(
			$i18n.t('Model info for {{modelName}} deleted successfully', { modelName: selectedModelId })
		);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
553
		models.set(await getModels());
554
555
556
557
558
559
	};

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

560
	onMount(async () => {
561
562
563
564
565
566
		await Promise.all([
			(async () => {
				OLLAMA_URLS = await getOllamaUrls(localStorage.token).catch((error) => {
					toast.error(error);
					return [];
				});
567

568
569
570
571
572
573
574
575
576
577
578
579
580
581
				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);
			})()
		]);
582
	});
Timothy J. Baek's avatar
Timothy J. Baek committed
583
584
585
</script>

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

Timothy J. Baek's avatar
Timothy J. Baek committed
591
592
593
594
595
596
				{#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}
597
								placeholder={$i18n.t('Select an Ollama instance')}
Timothy J. Baek's avatar
Timothy J. Baek committed
598
599
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
625
626
627
628
629
630
							>
								{#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>
631
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
632
633
634
635

					{#if updateModelId}
						Updating "{updateModelId}" {updateProgress ? `(${updateProgress}%)` : ''}
					{/if}
636
637
638
639
				{/if}

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

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

Timothy J. Baek's avatar
Timothy J. Baek committed
715
716
717
						{#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
718
719
720
721
722
723
724
725
726
									<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
727
															$MODEL_DOWNLOAD_POOL[model].pullProgress ?? 0
Timothy J. Baek's avatar
Timothy J. Baek committed
728
729
														)}%"
													>
Timothy J. Baek's avatar
Timothy J. Baek committed
730
														{$MODEL_DOWNLOAD_POOL[model].pullProgress ?? 0}%
Timothy J. Baek's avatar
Timothy J. Baek committed
731
732
733
													</div>
												</div>

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

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

817
818
					<div class="pt-1">
						<div class="flex justify-between items-center text-xs">
Ased Mammad's avatar
Ased Mammad committed
819
							<div class=" text-sm font-medium">{$i18n.t('Experimental')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
820
							<button
821
								class=" text-xs font-medium text-gray-500"
822
								type="button"
823
824
								on:click={() => {
									showExperimentalOllama = !showExperimentalOllama;
Ased Mammad's avatar
Ased Mammad committed
825
								}}>{showExperimentalOllama ? $i18n.t('Hide') : $i18n.t('Show')}</button
Timothy J. Baek's avatar
Timothy J. Baek committed
826
827
							>
						</div>
828
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
829

830
831
832
833
834
835
836
					{#if showExperimentalOllama}
						<form
							on:submit|preventDefault={() => {
								uploadModelHandler();
							}}
						>
							<div class=" mb-2 flex w-full justify-between">
Ased Mammad's avatar
Ased Mammad committed
837
								<div class="  text-sm font-medium">{$i18n.t('Upload a GGUF model')}</div>
838
839

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

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

905
906
								{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}
									<button
Timothy J. Baek's avatar
Timothy J. Baek committed
907
										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"
908
909
910
911
912
913
914
915
916
917
										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"
918
919
												>
													<style>
920
921
922
923
														.spinner_ajPY {
															transform-origin: center;
															animation: spinner_AtaB 0.75s infinite linear;
														}
924

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

Timothy J. Baek's avatar
Timothy J. Baek committed
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
							{#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}
998
								<div class="mt-2">
Ased Mammad's avatar
Ased Mammad committed
999
									<div class=" mb-2 text-xs">{$i18n.t('Upload Progress')}</div>
1000

1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
									<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}
1011
1012
									</div>
								</div>
1013
1014
1015
1016
							{/if}
						</form>
					{/if}
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1017
			</div>
1018
1019
			<hr class=" dark:border-gray-700 my-2" />
		{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
1020

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

1038
1039
1040
					{#if showLiteLLM}
						<div>
							<div class="flex justify-between items-center text-xs">
Ased Mammad's avatar
Ased Mammad committed
1041
								<div class=" text-sm font-medium">{$i18n.t('Add a model')}</div>
1042
1043
1044
1045
1046
1047
								<button
									class=" text-xs font-medium text-gray-500"
									type="button"
									on:click={() => {
										showLiteLLMParams = !showLiteLLMParams;
									}}
Ased Mammad's avatar
Ased Mammad committed
1048
1049
1050
									>{showLiteLLMParams
										? $i18n.t('Hide Additional Params')
										: $i18n.t('Show Additional Params')}</button
1051
								>
1052
							</div>
1053
						</div>
1054

1055
1056
1057
1058
1059
						<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
1060
										placeholder={$i18n.t('Enter LiteLLM Model (litellm_params.model)')}
1061
1062
										bind:value={liteLLMModel}
										autocomplete="off"
1063
									/>
1064
								</div>
1065

1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
								<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"
1080
										/>
1081
1082
									</svg>
								</button>
1083
1084
							</div>

1085
1086
							{#if showLiteLLMParams}
								<div>
1087
									<div class=" mb-1.5 text-sm font-medium">{$i18n.t('Model Name')}</div>
1088
1089
1090
1091
1092
1093
1094
1095
1096
									<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>
1097
1098
1099
									</div>
								</div>

1100
								<div>
Ased Mammad's avatar
Ased Mammad committed
1101
									<div class=" mb-1.5 text-sm font-medium">{$i18n.t('API Base URL')}</div>
1102
1103
1104
1105
									<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
1106
1107
1108
												placeholder={$i18n.t(
													'Enter LiteLLM API Base URL (litellm_params.api_base)'
												)}
1109
1110
1111
1112
												bind:value={liteLLMAPIBase}
												autocomplete="off"
											/>
										</div>
1113
1114
1115
									</div>
								</div>

1116
								<div>
Ased Mammad's avatar
Ased Mammad committed
1117
									<div class=" mb-1.5 text-sm font-medium">{$i18n.t('API Key')}</div>
1118
1119
1120
1121
									<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
1122
												placeholder={$i18n.t('Enter LiteLLM API Key (litellm_params.api_key)')}
1123
1124
1125
1126
												bind:value={liteLLMAPIKey}
												autocomplete="off"
											/>
										</div>
1127
1128
									</div>
								</div>
1129

1130
								<div>
Ased Mammad's avatar
Ased Mammad committed
1131
									<div class="mb-1.5 text-sm font-medium">{$i18n.t('API RPM')}</div>
1132
1133
1134
1135
									<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
1136
												placeholder={$i18n.t('Enter LiteLLM API RPM (litellm_params.rpm)')}
1137
1138
1139
1140
												bind:value={liteLLMRPM}
												autocomplete="off"
											/>
										</div>
1141
1142
									</div>
								</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1143

1144
								<div>
Ased Mammad's avatar
Ased Mammad committed
1145
									<div class="mb-1.5 text-sm font-medium">{$i18n.t('Max Tokens')}</div>
1146
1147
1148
1149
									<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
1150
												placeholder={$i18n.t('Enter Max Tokens (litellm_params.max_tokens)')}
1151
1152
1153
1154
1155
1156
												bind:value={liteLLMMaxTokens}
												type="number"
												min="1"
												autocomplete="off"
											/>
										</div>
1157
									</div>
1158
								</div>
1159
							{/if}
1160
1161
						</div>

1162
						<div class="mb-2 text-xs text-gray-400 dark:text-gray-500">
Ased Mammad's avatar
Ased Mammad committed
1163
							{$i18n.t('Not sure what to add?')}
1164
1165
1166
1167
1168
							<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
1169
								{$i18n.t('Click here for help.')}
1170
							</a>
1171
1172
1173
						</div>

						<div>
Ased Mammad's avatar
Ased Mammad committed
1174
							<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Delete a model')}</div>
1175
							<div class="flex w-full">
1176
1177
1178
								<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"
1179
										bind:value={deleteLiteLLMModelName}
Ased Mammad's avatar
Ased Mammad committed
1180
										placeholder={$i18n.t('Select a model')}
1181
									>
1182
										{#if !deleteLiteLLMModelName}
Ased Mammad's avatar
Ased Mammad committed
1183
											<option value="" disabled selected>{$i18n.t('Select a model')}</option>
1184
1185
										{/if}
										{#each liteLLMModelInfo as model}
1186
											<option value={model.model_name} class="bg-gray-100 dark:bg-gray-700"
1187
1188
1189
1190
												>{model.model_name}</option
											>
										{/each}
									</select>
1191
								</div>
1192
1193
1194
1195
1196
								<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();
									}}
1197
								>
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
									<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>
1211
1212
1213
							</div>
						</div>
					{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
1214
1215
				</div>
			</div>
1216
1217
1218
1219
1220
1221
1222
1223
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
			<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
1258
													model.custom_info?.name ? ' - ' + model.custom_info?.name : ''
1259
1260
1261
1262
1263
1264
1265
1266
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
												}`}</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>
1356
		</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
1357
	</div>
Ased Mammad's avatar
Ased Mammad committed
1358
</div>