{#if ollamaEnabled} {#if ollamaVersion !== null}

{$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($MODEL_DOWNLOAD_POOL).length > 0} {#each Object.keys($MODEL_DOWNLOAD_POOL) as model} {#if 'pullProgress' in $MODEL_DOWNLOAD_POOL[model]}

{model}

{$MODEL_DOWNLOAD_POOL[model].pullProgress ?? 0}%

{#if 'digest' in $MODEL_DOWNLOAD_POOL[model]}

{$MODEL_DOWNLOAD_POOL[model].digest}

{/if}

{/if} {/each} {/if}

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

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

"\nPARAMETER stop "USER:"\nPARAMETER stop "ASSISTANT:"`}
										disabled={createModelLoading}
									/>
								</div>

<div class="flex self-start">
									<button
										class="px-2.5 py-2.5 bg-gray-50 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition disabled:cursor-not-allowed"
										on:click={() => {
											createModelHandler();
										}}
										disabled={createModelLoading}
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 16 16"
											fill="currentColor"
											class="size-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>
									</button>
								</div>
							</div>

{#if createModelDigest !== ''}
								<div class="flex flex-col mt-1">
									<div class="font-medium mb-1">{createModelTag}</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, createModelPullProgress ?? 0)}%"
												>
													{createModelPullProgress ?? 0}%
												</div>
											</div>
										</div>
										{#if createModelDigest}
											<div class="mt-1 text-xs dark:text-gray-500" style="font-size: 0.5rem;">
												{createModelDigest}
											</div>
										{/if}
									</div>
								</div>
							{/if}
						</div>

<div class="pt-1">
							<div class="flex justify-between items-center text-xs">
								<div class=" text-sm font-medium">{$i18n.t('Experimental')}</div>
								<button
									class=" text-xs font-medium text-gray-500"
									type="button"
									on:click={() => {
										showExperimentalOllama = !showExperimentalOllama;
									}}>{showExperimentalOllama ? $i18n.t('Hide') : $i18n.t('Show')}</button
								>
							</div>
						</div>

{#if showExperimentalOllama}
							<form
								on:submit|preventDefault={() => {
									uploadModelHandler();
								}}
							>
								<div class=" mb-2 flex w-full justify-between">
									<div class="  text-sm font-medium">{$i18n.t('Upload a GGUF model')}</div>

<button
										class="p-1 px-3 text-xs flex rounded transition"
										on:click={() => {
											if (modelUploadMode === 'file') {
												modelUploadMode = 'url';
											} else {
												modelUploadMode = 'file';
											}
										}}
										type="button"
									>
										{#if modelUploadMode === 'file'}
											<span class="ml-2 self-center">{$i18n.t('File Mode')}</span>
										{:else}
											<span class="ml-2 self-center">{$i18n.t('URL Mode')}</span>
										{/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);
													}}
													accept=".gguf,.safetensors"
													required
													hidden
												/>

<button
													type="button"
													class="w-full rounded-lg text-left py-2 px-4 bg-gray-50 dark:text-gray-300 dark:bg-gray-850"
													on:click={() => {
														modelUploadInputElement.click();
													}}
												>
													{#if modelInputFile && modelInputFile.length > 0}
														{modelInputFile[0].name}
													{:else}
														{$i18n.t('Click here to select')}
													{/if}
												</button>
											</div>
										{:else}
											<div class="flex-1 {modelFileUrl !== '' ? 'mr-2' : ''}">
												<input
													class="w-full rounded-lg text-left py-2 px-4 bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none {modelFileUrl !==
													''
														? 'mr-2'
														: ''}"
													type="url"
													required
													bind:value={modelFileUrl}
													placeholder={$i18n.t('Type Hugging Face Resolve (Download) URL')}
												/>
											</div>
										{/if}
									</div>

{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}
										<button
											class="px-2.5 bg-gray-50 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"
											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"
													>
														<style>
															.spinner_ajPY {
																transform-origin: center;
																animation: spinner_AtaB 0.75s infinite linear;
															}

@keyframes spinner_AtaB {
																100% {
																	transform: rotate(360deg);
																}
															}
														</style>
														<path
															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"
														/>
														<path
															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"
														/>
													</svg>
												</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 !== '')}
									<div>
										<div>
											<div class=" my-2.5 text-sm font-medium">{$i18n.t('Modelfile Content')}</div>
											<textarea
												bind:value={modelFileContent}
												class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-100 dark:bg-gray-850 outline-none resize-none"
												rows="6"
											/>
										</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 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: {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>
			{:else if ollamaVersion === false}
				<div>Ollama Not Detected</div>
			{:else}
				<div class="flex h-full justify-center">
					<div class="my-auto">
						<Spinner className="size-6" />
					</div>
				</div>
			{/if}
		{:else if ollamaEnabled === false}
			<div>{$i18n.t('Ollama API is disabled')}</div>
		{:else}
			<div class="flex h-full justify-center">
				<div class="my-auto">
					<Spinner className="size-6" />
				</div>
			</div>
		{/if}
	</div>
</div>