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

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

{#if updateModelId}

Updating "{updateModelId}" {updateProgress ? `(${updateProgress}%)` : ""}

{/if} {#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")}

</div>

<div class="flex self-start">
							<Tooltip
								content={$i18n.t("Create Model")}
								placement="top"
							>
								<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 ||
										createModelName.trim() === "" ||
										createModelObject.trim() === ""}
								>
									<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>
							</Tooltip>
						</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-sm 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-hidden {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 !== "")}
								<Tooltip
									content={$i18n.t("Upload Model")}
									placement="top"
								>
									<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={modelLoading}
									>
										{#if modelLoading}
											<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>
								</Tooltip>
							{/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-hidden 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: 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}
							<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>
	</div>
{:else if ollamaModels === null}
	<div class="flex justify-center items-center w-full h-full text-xs py-3">
		{$i18n.t("Failed to fetch models")}
	</div>
{:else}
	<div class="flex justify-center items-center w-full h-full py-3">
		<Spinner className="size-5" />
	</div>
{/if}