{#if ollamaVersion}

Manage Ollama Models

{#if OLLAMA_URLS.length > 1}

{/if}

Pull a model from Ollama.com

To access the available model names for downloading, click here.

{#if Object.keys(modelDownloadStatus).length > 0} {#each Object.keys(modelDownloadStatus) as model}

{model}

{modelDownloadStatus[model].pullProgress ?? 0}%

{modelDownloadStatus[model].digest}

{/each} {/if}

Delete a model

Experimental

{#if showExperimentalOllama}

{ uploadModelHandler(); }} >

Upload a GGUF model

{#if modelUploadMode === 'file'}

{ console.log(modelInputFile); }} accept=".gguf" required hidden />

{:else}

{/if}

{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')} {/if}

{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}

Modelfile Content

</div>
								</div>
							{/if}
							<div class=" mt-1 text-xs text-gray-400 dark:text-gray-500">
								To access the GGUF models available for downloading, <a
									class=" text-gray-500 dark:text-gray-300 font-medium underline"
									href="https://huggingface.co/models?search=gguf"
									target="_blank">click here.</a
								>
							</div>

{#if uploadProgress !== null}
								<div class="mt-2">
									<div class=" mb-2 text-xs">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: {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}
									</div>
								</div>
							{/if}
						</form>
					{/if}
				</div>
			</div>
			<hr class=" dark:border-gray-700 my-2" />
		{/if}

<div class=" space-y-3">
			<div class="mt-2 space-y-3 pr-1.5">
				<div>
					<div class=" mb-2 text-sm font-medium">Manage LiteLLM Models</div>

<div>
						<div class="flex justify-between items-center text-xs">
							<div class=" text-sm font-medium">Add a model</div>
							<button
								class=" text-xs font-medium text-gray-500"
								type="button"
								on:click={() => {
									showLiteLLMParams = !showLiteLLMParams;
								}}>{showLiteLLMParams ? 'Hide Additional Params' : 'Show Additional Params'}</button
							>
						</div>
					</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={() => {
									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"
									/>
								</svg>
							</button>
						</div>

{#if showLiteLLMParams}
							<div>
								<div class=" mb-1.5 text-sm font-medium">Model Name</div>
								<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>
								</div>
							</div>

<div class="mb-2 text-xs text-gray-400 dark:text-gray-500">
						Not sure what to add?
						<a
							class=" text-gray-300 font-medium underline"
							href="https://litellm.vercel.app/docs/proxy/configs#quick-start"
							target="_blank"
						>
							Click here for help.
						</a>
					</div>

<div>
						<div class=" mb-2.5 text-sm font-medium">Delete a model</div>
						<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={deleteLiteLLMModelId}
									placeholder="Select a model"
								>
									{#if !deleteLiteLLMModelId}
										<option value="" disabled selected>Select a model</option>
									{/if}
									{#each liteLLMModelInfo as model}
										<option value={model.model_info.id} class="bg-gray-100 dark:bg-gray-700"
											>{model.model_name}</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={() => {
									deleteLiteLLMModelHandler();
								}}
							>
								<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>
					</div>
				</div>
			</div>

<!-- <div class="mt-2 space-y-3 pr-1.5">
				<div>
					<div class=" mb-2.5 text-sm font-medium">Add LiteLLM Model</div>
					<div class="flex w-full mb-2">
						<div class="flex-1">
							<input
								class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
								placeholder="Enter LiteLLM Model (e.g. ollama/mistral)"
								bind:value={liteLLMModel}
								autocomplete="off"
							/>
						</div>
					</div>

<div class="flex justify-between items-center text-sm">
						<div class="  font-medium">Advanced Model Params</div>
						<button
							class=" text-xs font-medium text-gray-500"
							type="button"
							on:click={() => {
								showLiteLLMParams = !showLiteLLMParams;
							}}>{showLiteLLMParams ? 'Hide' : 'Show'}</button
						>
					</div>

{#if showLiteLLMParams}
						<div>
							<div class=" mb-2.5 text-sm font-medium">LiteLLM API Key</div>
							<div class="flex w-full">
								<div class="flex-1">
									<input
										class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
										placeholder="Enter LiteLLM API Key (e.g. os.environ/AZURE_API_KEY_CA)"
										bind:value={liteLLMAPIKey}
										autocomplete="off"
									/>
								</div>
							</div>
						</div>

<div>
							<div class=" mb-2.5 text-sm font-medium">LiteLLM API Base URL</div>
							<div class="flex w-full">
								<div class="flex-1">
									<input
										class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
										placeholder="Enter LiteLLM API Base URL"
										bind:value={liteLLMAPIBase}
										autocomplete="off"
									/>
								</div>
							</div>
						</div>

<div>
							<div class=" mb-2.5 text-sm font-medium">LiteLLM API RPM</div>
							<div class="flex w-full">
								<div class="flex-1">
									<input
										class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
										placeholder="Enter LiteLLM API RPM"
										bind:value={liteLLMRPM}
										autocomplete="off"
									/>
								</div>
							</div>
						</div>
					{/if}

<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
						Not sure what to add?
						<a
							class=" text-gray-300 font-medium underline"
							href="https://litellm.vercel.app/docs/proxy/configs#quick-start"
							target="_blank"
						>
							Click here for help.
						</a>
					</div>
				</div>
			</div> -->
		</div>
	</div>
</div>