{#if config}

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

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

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

{#if config.enabled}

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

{/if}

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

{#if (config?.IMAGE_GENERATION_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('_', ':')}

{$i18n.t('Additional Parameters')}

</div>
							</div>
						</div>
					</div>
				{:else if config?.IMAGE_GENERATION_ENGINE === 'comfyui'}
					<div class="">
						<div class=" mb-2 text-sm font-medium">{$i18n.t('ComfyUI Base URL')}</div>
						<div class="flex w-full">
							<div class="flex-1 mr-2">
								<input
									class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
									placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
									bind:value={config.COMFYUI_BASE_URL}
								/>
							</div>
							<button
								class="px-2.5 bg-gray-50 hover:bg-gray-100 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
								type="button"
								aria-label="verify connection"
								on:click={async () => {
									await updateConfigHandler();
									const res = await verifyConfigUrl(localStorage.token).catch((error) => {
										toast.error(`${error}`);
										return null;
									});

if (res) {
										toast.success($i18n.t('Server connection verified'));
									}
								}}
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 20 20"
									fill="currentColor"
									class="w-4 h-4"
								>
									<path
										fill-rule="evenodd"
										d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
										clip-rule="evenodd"
									/>
								</svg>
							</button>
						</div>
					</div>

<div class="">
						<div class=" mb-2 text-sm font-medium">{$i18n.t('ComfyUI API Key')}</div>
						<div class="flex w-full">
							<div class="flex-1 mr-2">
								<SensitiveInput
									placeholder={$i18n.t('sk-1234')}
									bind:value={config.COMFYUI_API_KEY}
									required={false}
								/>
							</div>
						</div>
					</div>

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

{#if config.COMFYUI_WORKFLOW}
							<Textarea
								class="w-full rounded-lg mb-1 py-2 px-4 text-xs bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden disabled:text-gray-600 resize-none"
								rows="10"
								bind:value={config.COMFYUI_WORKFLOW}
								required
							/>
						{/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_WORKFLOW = e.target.result;
											e.target.value = null;
										};

reader.readAsText(file);
									}}
								/>

<button
									class="w-full text-sm font-medium py-2 bg-transparent hover:bg-gray-50 border border-dashed border-gray-50 dark:border-gray-850 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_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 requiredWorkflowNodes as node}
									<div class="flex w-full items-center">
										<div class="shrink-0">
											<div
												class=" capitalize line-clamp-1 font-medium px-3 py-1 w-20 text-center bg-green-500/10 text-green-700 dark:text-green-200"
											>
												{node.type}{node.type === 'prompt' ? '*' : ''}
											</div>
										</div>
										<div class="">
											<Tooltip content={$i18n.t('Input Key (e.g. text, unet_name, steps)')}>
												<input
													class="py-1 px-3 w-24 text-xs text-center bg-transparent outline-hidden border-r border-gray-50 dark:border-gray-850"
													placeholder={$i18n.t('Key')}
													bind:value={node.key}
													required
												/>
											</Tooltip>
										</div>

<div class="mt-2 text-xs text-right text-gray-400 dark:text-gray-500">
								{$i18n.t('*Prompt node ID(s) are required for image generation')}
							</div>
						</div>
					{/if}
				{:else if config?.IMAGE_GENERATION_ENGINE === 'openai'}
					<div>
						<div class=" mb-2 text-sm font-medium">{$i18n.t('OpenAI API Config')}</div>
						<div class="flex w-full">
							<div class="flex-1 mr-2">
								<input
									class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
									placeholder={$i18n.t('API Base URL')}
									bind:value={config.IMAGES_OPENAI_API_BASE_URL}
									required
								/>
							</div>
						</div>
					</div>

<div>
						<div class=" mb-2 text-sm font-medium">{$i18n.t('API Version')}</div>
						<div class="flex w-full">
							<div class="flex-1 mr-2">
								<input
									class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
									placeholder={$i18n.t('API Version')}
									bind:value={config.IMAGES_OPENAI_API_VERSION}
								/>
							</div>
						</div>
					</div>
				{:else if config?.IMAGE_GENERATION_ENGINE === 'gemini'}
					<div>
						<div class=" mb-1.5 text-sm font-medium">{$i18n.t('Gemini API Config')}</div>

{#if config?.ENABLE_IMAGE_GENERATION}
				<hr class=" border-gray-100 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-hidden"
											bind:value={config.IMAGE_GENERATION_MODEL}
											placeholder={$i18n.t('Select a model')}
											required
										/>

<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-hidden"
									placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
									bind:value={config.IMAGE_SIZE}
									required
								/>
							</Tooltip>
						</div>
					</div>
				</div>

{#if ['comfyui', 'automatic1111', ''].includes(config?.IMAGE_GENERATION_ENGINE)}
					<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-hidden"
										placeholder={$i18n.t('Enter Number of Steps (e.g. 50)')}
										bind:value={config.IMAGE_STEPS}
										required
									/>
								</Tooltip>
							</div>
						</div>
					</div>
				{/if}
			{/if}
		{/if}
	</div>

<div class="flex justify-end pt-3 text-sm font-medium">
		<button
			class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full 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">
					<Spinner />
				</div>
			{/if}
		</button>
	</div>
</form>