{#if ollamaVersion}

{$i18n.t('Manage Ollama Models')}

{#if OLLAMA_URLS.length > 0}

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

{$i18n.t('Pull a model from Ollama.com')}

{$i18n.t('To access the available model names for downloading,')} {$i18n.t('click here.')}

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

{model}

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

{modelDownloadStatus[model].digest}

{/each} {/if}

{$i18n.t('Delete a model')}

{$i18n.t('Experimental')}

{#if showExperimentalOllama}

{ uploadModelHandler(); }} >

{$i18n.t('Upload a GGUF model')}

{#if modelUploadMode === 'file'}

{ console.log(modelInputFile); }} accept=".gguf,.safetensors" 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 !== '')}

{$i18n.t('Modelfile Content')}

</div>
								</div>
							{/if}
							<div class=" mt-1 text-xs text-gray-400 dark:text-gray-500">
								{$i18n.t('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">{$i18n.t('click here.')}</a
								>
							</div>

{#if uploadProgress !== null}
								<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: {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">
						<div class="flex justify-between items-center text-xs">
							<div class=" text-sm font-medium">{$i18n.t('Manage LiteLLM Models')}</div>
							<button
								class=" text-xs font-medium text-gray-500"
								type="button"
								on:click={() => {
									showLiteLLM = !showLiteLLM;
								}}>{showLiteLLM ? $i18n.t('Hide') : $i18n.t('Show')}</button
							>
						</div>
					</div>

{#if showLiteLLM}
						<div>
							<div class="flex justify-between items-center text-xs">
								<div class=" text-sm font-medium">{$i18n.t('Add a model')}</div>
								<button
									class=" text-xs font-medium text-gray-500"
									type="button"
									on:click={() => {
										showLiteLLMParams = !showLiteLLMParams;
									}}
									>{showLiteLLMParams
										? $i18n.t('Hide Additional Params')
										: $i18n.t('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">{$i18n.t('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>
									<div class="mb-1.5 text-sm font-medium">{$i18n.t('Max Tokens')}</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={$i18n.t('Enter Max Tokens (litellm_params.max_tokens)')}
												bind:value={liteLLMMaxTokens}
												type="number"
												min="1"
												autocomplete="off"
											/>
										</div>
									</div>
								</div>
							{/if}
						</div>

<div class="mb-2 text-xs text-gray-400 dark:text-gray-500">
							{$i18n.t('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"
							>
								{$i18n.t('Click here for help.')}
							</a>
						</div>

<div>
							<div class=" mb-2.5 text-sm font-medium">{$i18n.t('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={$i18n.t('Select a model')}
									>
										{#if !deleteLiteLLMModelId}
											<option value="" disabled selected>{$i18n.t('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>
					{/if}
				</div>
			</div>
		</div>
	</div>
</div>