{#if config && imageGenerationConfig}

{$i18n.t('Image Settings')}

{$i18n.t('Image Generation (Experimental)')}

{ const enabled = e.detail; if (enabled) { if ( config.engine === 'automatic1111' && config.automatic1111.AUTOMATIC1111_BASE_URL === '' ) { toast.error($i18n.t('AUTOMATIC1111 Base URL is required.')); config.enabled = false; } else if ( config.engine === 'comfyui' && config.comfyui.COMFYUI_BASE_URL === '' ) { toast.error($i18n.t('ComfyUI Base URL is required.')); config.enabled = false; } else if (config.engine === 'openai' && config.openai.OPENAI_API_KEY === '') { toast.error($i18n.t('OpenAI API Key is required.')); config.enabled = false; } } updateConfigHandler(); }} />

{$i18n.t('Image Generation Engine')}

{#if (config?.engine ?? 'automatic1111') === 'automatic1111'}

{$i18n.t('AUTOMATIC1111 Base URL')}

{$i18n.t('Include `--api` flag when running stable-diffusion-webui')} {$i18n.t('(e.g. `sh webui.sh --api`)')}

{$i18n.t('AUTOMATIC1111 Api Auth String')}

{$i18n.t('Include `--api-auth` flag when running stable-diffusion-webui')} {$i18n .t('(e.g. `sh webui.sh --api --api-auth username_password`)') .replace('_', ':')}

{:else if config?.engine === 'comfyui'}

{$i18n.t('ComfyUI Base URL')}

{$i18n.t('ComfyUI Workflow')}

{#if config.comfyui.COMFYUI_WORKFLOW}

{/if}

<div class="flex w-full">
							<div class="flex-1">
								<input
									id="upload-comfyui-workflow-input"
									hidden
									type="file"
									accept=".json"
									on:change={(e) => {
										const file = e.target.files[0];
										const reader = new FileReader();

reader.onload = (e) => {
											config.comfyui.COMFYUI_WORKFLOW = e.target.result;
											updateConfigHandler();

e.target.value = null;
										};

reader.readAsText(file);
									}}
								/>

<button
									class="w-full text-sm font-medium py-2 bg-transparent hover:bg-gray-100 border border-dashed dark:border-gray-800 dark:hover:bg-gray-850 text-center rounded-xl"
									type="button"
									on:click={() => {
										document.getElementById('upload-comfyui-workflow-input')?.click();
									}}
								>
									{$i18n.t('Click here to upload a workflow.json file.')}
								</button>
							</div>
						</div>

<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
							{$i18n.t('Make sure to export a workflow.json file as API format from ComfyUI.')}
						</div>
					</div>

{#if config.comfyui.COMFYUI_WORKFLOW}
						<div class="">
							<div class=" mb-2 text-sm font-medium">{$i18n.t('ComfyUI Workflow Nodes')}</div>

<div class="text-xs flex flex-col gap-1.5">
								{#each workflowNodes as node}
									<div class="flex w-full items-center border dark:border-gray-850 rounded-lg">
										<div class="flex-shrink-0">
											<div
												class=" capitalize line-clamp-1 font-medium px-3 py-1 w-20 text-center rounded-l-lg bg-green-500/10 text-green-700 dark:text-green-200"
											>
												{node.type}
											</div>
										</div>
										<div class="">
											<Tooltip content="Input Key (e.g. text, unet_name, steps)">
												<input
													class="py-1 px-3 w-24 text-xs text-center bg-transparent outline-none border-r dark:border-gray-850"
													placeholder="Key"
													bind:value={node.key}
												/>
											</Tooltip>
										</div>

<div class="w-full">
											<Tooltip
												content="Comma separated Node Ids (e.g. 1,2,3)"
												placement="top-start"
											>
												<input
													class="w-full py-1 px-4 rounded-r-lg text-xs bg-transparent outline-none"
													placeholder="Node Ids"
													bind:value={node.node_ids}
												/>
											</Tooltip>
										</div>
									</div>
								{/each}
							</div>
						</div>
					{/if}
				{:else if config?.engine === 'openai'}
					<div>
						<div class=" mb-1.5 text-sm font-medium">{$i18n.t('OpenAI API Config')}</div>

{#if config?.enabled}
				<hr class=" dark:border-gray-850" />

<div>
					<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Default Model')}</div>
					<div class="flex w-full">
						<div class="flex-1 mr-2">
							<div class="flex w-full">
								<div class="flex-1">
									<Tooltip content={$i18n.t('Enter Model ID')} placement="top-start">
										<input
											list="model-list"
											class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
											bind:value={imageGenerationConfig.MODEL}
											placeholder="Select a model"
										/>

<datalist id="model-list">
											{#each models ?? [] as model}
												<option value={model.id}>{model.name}</option>
											{/each}
										</datalist>
									</Tooltip>
								</div>
							</div>
						</div>
					</div>
				</div>

<div>
					<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Image Size')}</div>
					<div class="flex w-full">
						<div class="flex-1 mr-2">
							<Tooltip content={$i18n.t('Enter Image Size (e.g. 512x512)')} placement="top-start">
								<input
									class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
									placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
									bind:value={imageGenerationConfig.IMAGE_SIZE}
								/>
							</Tooltip>
						</div>
					</div>
				</div>

<div>
					<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Steps')}</div>
					<div class="flex w-full">
						<div class="flex-1 mr-2">
							<Tooltip content={$i18n.t('Enter Number of Steps (e.g. 50)')} placement="top-start">
								<input
									class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
									placeholder={$i18n.t('Enter Number of Steps (e.g. 50)')}
									bind:value={imageGenerationConfig.IMAGE_STEPS}
								/>
							</Tooltip>
						</div>
					</div>
				</div>
			{/if}
		{/if}
	</div>

<div class="flex justify-end pt-3 text-sm font-medium">
		<button
			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg flex flex-row space-x-1 items-center {loading
				? ' cursor-not-allowed'
				: ''}"
			type="submit"
			disabled={loading}
		>
			{$i18n.t('Save')}

{#if loading}
				<div class="ml-2 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>
			{/if}
		</button>
	</div>
</form>