ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-11 20:05:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

enh: gemini flash image generation support

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-11-05 01:59:16 -05:00
parent 72900cd686
commit 8d34fcb586
4 changed files with 517 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
backend/open_webui/config.py
View file

@ -3279,6 +3279,12 @@ IMAGES_GEMINI_API_KEY = PersistentConfig(
os.getenv("IMAGES_GEMINI_API_KEY", GEMINI_API_KEY),
)
IMAGES_GEMINI_ENDPOINT_METHOD = PersistentConfig(
"IMAGES_GEMINI_ENDPOINT_METHOD",
"image_generation.gemini.endpoint_method",
os.getenv("IMAGES_GEMINI_ENDPOINT_METHOD", ""),
)
IMAGE_SIZE = PersistentConfig(
"IMAGE_SIZE", "image_generation.size", os.getenv("IMAGE_SIZE", "512x512")
)

7
backend/open_webui/main.py
View file

@ -162,6 +162,7 @@ from open_webui.config import (
IMAGES_OPENAI_API_KEY,
IMAGES_GEMINI_API_BASE_URL,
IMAGES_GEMINI_API_KEY,
IMAGES_GEMINI_ENDPOINT_METHOD,
# Audio
AUDIO_STT_ENGINE,
AUDIO_STT_MODEL,
@ -1075,6 +1076,8 @@ app.state.config.IMAGES_OPENAI_API_KEY = IMAGES_OPENAI_API_KEY
app.state.config.IMAGES_GEMINI_API_BASE_URL = IMAGES_GEMINI_API_BASE_URL
app.state.config.IMAGES_GEMINI_API_KEY = IMAGES_GEMINI_API_KEY
app.state.config.IMAGES_GEMINI_ENDPOINT_METHOD = IMAGES_GEMINI_ENDPOINT_METHOD
app.state.config.AUTOMATIC1111_BASE_URL = AUTOMATIC1111_BASE_URL
app.state.config.AUTOMATIC1111_API_AUTH = AUTOMATIC1111_API_AUTH
@ -1111,7 +1114,9 @@ app.state.config.AUDIO_STT_AZURE_MAX_SPEAKERS = AUDIO_STT_AZURE_MAX_SPEAKERS
app.state.config.AUDIO_STT_MISTRAL_API_KEY = AUDIO_STT_MISTRAL_API_KEY
app.state.config.AUDIO_STT_MISTRAL_API_BASE_URL = AUDIO_STT_MISTRAL_API_BASE_URL
app.state.config.AUDIO_STT_MISTRAL_USE_CHAT_COMPLETIONS = AUDIO_STT_MISTRAL_USE_CHAT_COMPLETIONS
app.state.config.AUDIO_STT_MISTRAL_USE_CHAT_COMPLETIONS = (
AUDIO_STT_MISTRAL_USE_CHAT_COMPLETIONS
)
app.state.config.TTS_ENGINE = AUDIO_TTS_ENGINE

91
backend/open_webui/routers/images.py
View file

@ -97,33 +97,37 @@ def get_image_model(request):
class ImagesConfig(BaseModel):
ENABLE_IMAGE_GENERATION: bool
IMAGE_GENERATION_ENGINE: str
ENABLE_IMAGE_PROMPT_GENERATION: bool
IMAGE_GENERATION_ENGINE: str
IMAGE_GENERATION_MODEL: str
IMAGE_SIZE: str
IMAGE_STEPS: int
IMAGE_SIZE: Optional[str]
IMAGE_STEPS: Optional[int]
IMAGES_OPENAI_API_BASE_URL: str
IMAGES_OPENAI_API_KEY: str
IMAGES_OPENAI_API_VERSION: str
AUTOMATIC1111_BASE_URL: str
AUTOMATIC1111_API_AUTH: str
AUTOMATIC1111_PARAMS: Optional[dict | str]
COMFYUI_BASE_URL: str
COMFYUI_API_KEY: str
COMFYUI_WORKFLOW: str
COMFYUI_WORKFLOW_NODES: list[dict]
IMAGES_GEMINI_API_BASE_URL: str
IMAGES_GEMINI_API_KEY: str
IMAGES_GEMINI_ENDPOINT_METHOD: str
@router.get("/config", response_model=ImagesConfig)
async def get_config(request: Request, user=Depends(get_admin_user)):
return {
"ENABLE_IMAGE_GENERATION": request.app.state.config.ENABLE_IMAGE_GENERATION,
"IMAGE_GENERATION_ENGINE": request.app.state.config.IMAGE_GENERATION_ENGINE,
"ENABLE_IMAGE_PROMPT_GENERATION": request.app.state.config.ENABLE_IMAGE_PROMPT_GENERATION,
"IMAGE_GENERATION_ENGINE": request.app.state.config.IMAGE_GENERATION_ENGINE,
"IMAGE_GENERATION_MODEL": request.app.state.config.IMAGE_GENERATION_MODEL,
"IMAGE_SIZE": request.app.state.config.IMAGE_SIZE,
"IMAGE_STEPS": request.app.state.config.IMAGE_STEPS,
@ -139,6 +143,7 @@ async def get_config(request: Request, user=Depends(get_admin_user)):
"COMFYUI_WORKFLOW_NODES": request.app.state.config.COMFYUI_WORKFLOW_NODES,
"IMAGES_GEMINI_API_BASE_URL": request.app.state.config.IMAGES_GEMINI_API_BASE_URL,
"IMAGES_GEMINI_API_KEY": request.app.state.config.IMAGES_GEMINI_API_KEY,
"IMAGES_GEMINI_ENDPOINT_METHOD": request.app.state.config.IMAGES_GEMINI_ENDPOINT_METHOD,
}
@ -146,12 +151,12 @@ async def get_config(request: Request, user=Depends(get_admin_user)):
async def update_config(
request: Request, form_data: ImagesConfig, user=Depends(get_admin_user)
):
request.app.state.config.IMAGE_GENERATION_ENGINE = form_data.IMAGE_GENERATION_ENGINE
request.app.state.config.ENABLE_IMAGE_GENERATION = form_data.ENABLE_IMAGE_GENERATION
request.app.state.config.ENABLE_IMAGE_PROMPT_GENERATION = (
form_data.ENABLE_IMAGE_PROMPT_GENERATION
)
request.app.state.config.IMAGE_GENERATION_ENGINE = form_data.IMAGE_GENERATION_ENGINE
set_image_model(request, form_data.IMAGE_GENERATION_MODEL)
if (
form_data.IMAGE_SIZE == "auto"
@ -165,7 +170,11 @@ async def update_config(
)
pattern = r"^\d+x\d+$"
if form_data.IMAGE_SIZE == "auto" or re.match(pattern, form_data.IMAGE_SIZE):
if (
form_data.IMAGE_SIZE == "auto"
or form_data.IMAGE_SIZE == ""
or re.match(pattern, form_data.IMAGE_SIZE)
):
request.app.state.config.IMAGE_SIZE = form_data.IMAGE_SIZE
else:
raise HTTPException(
@ -202,11 +211,14 @@ async def update_config(
form_data.IMAGES_GEMINI_API_BASE_URL
)
request.app.state.config.IMAGES_GEMINI_API_KEY = form_data.IMAGES_GEMINI_API_KEY
request.app.state.config.IMAGES_GEMINI_ENDPOINT_METHOD = (
form_data.IMAGES_GEMINI_ENDPOINT_METHOD
)
return {
"ENABLE_IMAGE_GENERATION": request.app.state.config.ENABLE_IMAGE_GENERATION,
"IMAGE_GENERATION_ENGINE": request.app.state.config.IMAGE_GENERATION_ENGINE,
"ENABLE_IMAGE_PROMPT_GENERATION": request.app.state.config.ENABLE_IMAGE_PROMPT_GENERATION,
"IMAGE_GENERATION_ENGINE": request.app.state.config.IMAGE_GENERATION_ENGINE,
"IMAGE_GENERATION_MODEL": request.app.state.config.IMAGE_GENERATION_MODEL,
"IMAGE_SIZE": request.app.state.config.IMAGE_SIZE,
"IMAGE_STEPS": request.app.state.config.IMAGE_STEPS,
@ -222,6 +234,7 @@ async def update_config(
"COMFYUI_WORKFLOW_NODES": request.app.state.config.COMFYUI_WORKFLOW_NODES,
"IMAGES_GEMINI_API_BASE_URL": request.app.state.config.IMAGES_GEMINI_API_BASE_URL,
"IMAGES_GEMINI_API_KEY": request.app.state.config.IMAGES_GEMINI_API_KEY,
"IMAGES_GEMINI_ENDPOINT_METHOD": request.app.state.config.IMAGES_GEMINI_ENDPOINT_METHOD,
}
@ -365,9 +378,7 @@ GenerateImageForm = CreateImageForm # Alias for backward compatibility
def get_image_data(data: str, headers=None):
try:
# if data url
if data.startswith("http"):
if data.startswith("http://") or data.startswith("https://"):
if headers:
r = requests.get(data, headers=headers)
else:
@ -495,22 +506,37 @@ async def image_generations(
return images
elif request.app.state.config.IMAGE_GENERATION_ENGINE == "gemini":
headers = {}
headers["Content-Type"] = "application/json"
headers["x-goog-api-key"] = request.app.state.config.IMAGES_GEMINI_API_KEY
data = {
"instances": {"prompt": form_data.prompt},
"parameters": {
"sampleCount": form_data.n,
"outputOptions": {"mimeType": "image/png"},
},
headers = {
"Content-Type": "application/json",
"x-goog-api-key": request.app.state.config.IMAGES_GEMINI_API_KEY,
}
data = {}
if (
request.app.state.config.IMAGES_GEMINI_ENDPOINT_METHOD == ""
or request.app.state.config.IMAGES_GEMINI_ENDPOINT_METHOD == "predict"
):
model = f"{model}:predict"
data = {
"instances": {"prompt": form_data.prompt},
"parameters": {
"sampleCount": form_data.n,
"outputOptions": {"mimeType": "image/png"},
},
}
elif (
request.app.state.config.IMAGES_GEMINI_ENDPOINT_METHOD
== "generateContent"
):
model = f"{model}:generateContent"
data = {"contents": [{"parts": [{"text": form_data.prompt}]}]}
# Use asyncio.to_thread for the requests.post call
r = await asyncio.to_thread(
requests.post,
url=f"{request.app.state.config.IMAGES_GEMINI_API_BASE_URL}/models/{model}:predict",
url=f"{request.app.state.config.IMAGES_GEMINI_API_BASE_URL}/models/{model}",
json=data,
headers=headers,
)
@ -519,10 +545,25 @@ async def image_generations(
res = r.json()
images = []
for image in res["predictions"]:
image_data, content_type = get_image_data(image["bytesBase64Encoded"])
url = upload_image(request, image_data, content_type, data, user)
images.append({"url": url})
if model.endswith(":predict"):
for image in res["predictions"]:
image_data, content_type = get_image_data(
image["bytesBase64Encoded"]
)
url = upload_image(request, image_data, content_type, data, user)
images.append({"url": url})
elif model.endswith(":generateContent"):
for image in res["candidates"]:
for part in image["content"]["parts"]:
if part.get("inlineData", {}).get("data"):
image_data, content_type = get_image_data(
part["inlineData"]["data"]
)
url = upload_image(
request, image_data, content_type, data, user
)
images.append({"url": url})
return images

514
src/lib/components/admin/Settings/Images.svelte
View file

@ -201,8 +201,8 @@
<div class=" space-y-3 overflow-y-scroll scrollbar-hidden pr-2">
{#if config}
<div>
<div>
<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Create Image')}</div>
<div class="mb-3">
<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('General')}</div>
<hr class=" border-gray-100 dark:border-gray-850 my-2" />
@ -217,8 +217,82 @@
<Switch bind:state={config.ENABLE_IMAGE_GENERATION} />
</div>
</div>
</div>
<div class="mb-3">
<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Create Image')}</div>
<hr class=" border-gray-100 dark:border-gray-850 my-2" />
{#if config.ENABLE_IMAGE_GENERATION}
<div class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2">
<div class="">
{$i18n.t('Model')}
</div>
</div>
<Tooltip content={$i18n.t('Enter Model ID')} placement="top-start">
<input
list="model-list"
class=" text-right text-sm bg-transparent outline-hidden max-w-full w-72"
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 class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2">
<div class="">
{$i18n.t('Image Size')}
</div>
</div>
<Tooltip content={$i18n.t('Enter Image Size (e.g. 512x512)')} placement="top-start">
<input
class=" text-right text-sm bg-transparent outline-hidden max-w-full w-72"
placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
bind:value={config.IMAGE_SIZE}
/>
</Tooltip>
</div>
</div>
{#if ['comfyui', 'automatic1111', ''].includes(config?.IMAGE_GENERATION_ENGINE)}
<div class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2">
<div class="">
{$i18n.t('Steps')}
</div>
</div>
<Tooltip
content={$i18n.t('Enter Number of Steps (e.g. 50)')}
placement="top-start"
>
<input
class=" text-right text-sm bg-transparent outline-hidden"
placeholder={$i18n.t('Enter Number of Steps (e.g. 50)')}
bind:value={config.IMAGE_STEPS}
required
/>
</Tooltip>
</div>
</div>
{/if}
<div class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2">
@ -253,77 +327,6 @@
</div>
</div>
{#if config.ENABLE_IMAGE_GENERATION}
<div class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2">
<div class="">
{$i18n.t('Default Model')}
</div>
</div>
<Tooltip content={$i18n.t('Enter Model ID')} placement="top-start">
<input
list="model-list"
class=" rounded-lg text-right text-sm bg-transparent 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 class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2">
<div class="">
{$i18n.t('Image Size')}
</div>
</div>
<Tooltip content={$i18n.t('Enter Image Size (e.g. 512x512)')} placement="top-start">
<input
class=" rounded-lg text-right text-sm bg-transparent outline-hidden"
placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
bind:value={config.IMAGE_SIZE}
required
/>
</Tooltip>
</div>
</div>
{#if ['comfyui', 'automatic1111', ''].includes(config?.IMAGE_GENERATION_ENGINE)}
<div class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2">
<div class="">
{$i18n.t('Steps')}
</div>
</div>
<Tooltip
content={$i18n.t('Enter Number of Steps (e.g. 50)')}
placement="top-start"
>
<input
class=" rounded-lg text-right text-sm bg-transparent outline-hidden"
placeholder={$i18n.t('Enter Number of Steps (e.g. 50)')}
bind:value={config.IMAGE_STEPS}
required
/>
</Tooltip>
</div>
</div>
{/if}
{/if}
{#if config?.IMAGE_GENERATION_ENGINE === 'openai'}
<div class="mb-2.5">
<div class="flex w-full justify-between items-center">
@ -403,7 +406,7 @@
/>
</div>
<button
class=" rounded-lg transition"
class=" transition"
type="button"
aria-label="verify connection"
on:click={async () => {
@ -491,7 +494,7 @@
<div class="mt-1.5 flex w-full">
<div class="flex-1 mr-2">
<Textarea
className="w-full rounded-lg py-2 px-3 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
className="rounded-lg w-full py-2 px-3 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
bind:value={config.AUTOMATIC1111_PARAMS}
placeholder={$i18n.t('Enter additional parameters in JSON format')}
minSize={100}
@ -747,6 +750,367 @@
</div>
</div>
</div>
<div class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2">
<div class="">
{$i18n.t('Gemini Endpoint Method')}
</div>
</div>
<select
class=" dark:bg-gray-900 w-fit pr-8 cursor-pointer rounded-sm px-2 text-xs bg-transparent outline-hidden text-right"
bind:value={config.IMAGES_GEMINI_ENDPOINT_METHOD}
placeholder={$i18n.t('Select Method')}
>
<option value="predict">predict</option>
<option value="generateContent">generateContent</option>
</select>
</div>
</div>
{/if}
</div>
<div class="mb-3">
<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Edit Image')}</div>
<hr class=" border-gray-100 dark:border-gray-850 my-2" />
<div class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2">
<div class="">
{$i18n.t('Image Edit Engine')}
</div>
</div>
<select
class=" dark:bg-gray-900 w-fit pr-8 cursor-pointer rounded-sm px-2 text-xs bg-transparent outline-hidden text-right"
bind:value={config.IMAGE_EDIT_ENGINE}
placeholder={$i18n.t('Select Engine')}
>
<option value="openai">{$i18n.t('Default (Open AI)')}</option>
<option value="comfyui">{$i18n.t('ComfyUI')}</option>
<option value="comfyui">{$i18n.t('Gemini')}</option>
</select>
</div>
</div>
{#if config.ENABLE_IMAGE_EDIT}
<div class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2">
<div class="">
{$i18n.t('Model')}
</div>
</div>
<Tooltip content={$i18n.t('Enter Model ID')} placement="top-start">
<input
list="model-list"
class="text-right text-sm bg-transparent outline-hidden"
bind:value={config.IMAGE_EDIT_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 class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2">
<div class="">
{$i18n.t('Image Size')}
</div>
</div>
<Tooltip content={$i18n.t('Enter Image Size (e.g. 512x512)')} placement="top-start">
<input
class="text-right text-sm bg-transparent outline-hidden max-w-full w-72"
placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
bind:value={config.IMAGE_EDIT_SIZE}
/>
</Tooltip>
</div>
</div>
{/if}
{#if config?.IMAGE_EDIT_ENGINE === 'openai'}
<div class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2 shrink-0">
<div class="">
{$i18n.t('OpenAI API Base URL')}
</div>
</div>
<div class="flex w-full">
<div class="flex-1">
<input
class="w-full text-sm bg-transparent outline-hidden text-right"
placeholder={$i18n.t('API Base URL')}
bind:value={config.IMAGES_EDIT_OPENAI_API_BASE_URL}
/>
</div>
</div>
</div>
</div>
<div class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2 shrink-0">
<div class="">
{$i18n.t('OpenAI API Key')}
</div>
</div>
<div class="flex w-full">
<div class="flex-1">
<SensitiveInput
inputClassName="text-right w-full"
placeholder={$i18n.t('API Key')}
bind:value={config.IMAGES_EDIT_OPENAI_API_KEY}
required={false}
/>
</div>
</div>
</div>
</div>
<div class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2 shrink-0">
<div class="">
{$i18n.t('OpenAI API Version')}
</div>
</div>
<div class="flex w-full">
<div class="flex-1">
<input
class="w-full text-sm bg-transparent outline-hidden text-right"
placeholder={$i18n.t('API Version')}
bind:value={config.IMAGES_EDIT_OPENAI_API_VERSION}
/>
</div>
</div>
</div>
</div>
{:else if config?.IMAGE_EDIT_ENGINE === 'comfyui'}
<div class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2 shrink-0">
<div class="">
{$i18n.t('ComfyUI Base URL')}
</div>
</div>
<div class="flex w-full">
<div class="flex-1 mr-2">
<input
class="w-full text-sm bg-transparent outline-hidden text-right"
placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
bind:value={config.COMFYUI_BASE_URL}
/>
</div>
<button
class=" 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>
<div class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2 shrink-0">
<div class="">
{$i18n.t('ComfyUI API Key')}
</div>
</div>
<div class="flex w-full">
<div class="flex-1">
<SensitiveInput
inputClassName="text-right w-full"
placeholder={$i18n.t('sk-1234')}
bind:value={config.COMFYUI_API_KEY}
required={false}
/>
</div>
</div>
</div>
</div>
<div class="mb-2.5">
<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);
}}
/>
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2 shrink-0">
<div class="">
{$i18n.t('ComfyUI Workflow')}
</div>
</div>
<div class="flex w-full">
<div class="flex-1 mr-2 justify-end flex gap-1">
{#if config.COMFYUI_WORKFLOW}
<button
class="text-xs text-gray-700 dark:text-gray-400 underline"
type="button"
aria-label={$i18n.t('Edit workflow.json content')}
on:click={() => {
// open code editor modal
showComfyUIWorkflowEditor = true;
}}
>
{$i18n.t('Edit')}
</button>
{/if}
<Tooltip content={$i18n.t('Click here to upload a workflow.json file.')}>
<button
class="text-xs text-gray-700 dark:text-gray-400 underline"
type="button"
aria-label={$i18n.t('Click here to upload a workflow.json file.')}
on:click={() => {
document.getElementById('upload-comfyui-workflow-input')?.click();
}}
>
{$i18n.t('Upload')}
</button>
</Tooltip>
</div>
</div>
</div>
<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
<CodeEditorModal
bind:show={showComfyUIWorkflowEditor}
value={config.COMFYUI_WORKFLOW}
lang="json"
onChange={(e) => {
config.COMFYUI_WORKFLOW = e;
}}
onSave={() => {
console.log('Saved');
}}
/>
<!-- {#if config.COMFYUI_WORKFLOW}
<Textarea
class="w-full rounded-lg my-1 py-2 px-3 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} -->
{$i18n.t('Make sure to export a workflow.json file as API format from ComfyUI.')}
</div>
</div>
{#if config.COMFYUI_WORKFLOW}
<div class="mb-2.5">
<div class="flex w-full justify-between items-center">
<div class="text-xs pr-2 shrink-0">
<div class="">
{$i18n.t('ComfyUI Workflow Nodes')}
</div>
</div>
</div>
<div class="mt-1 text-xs flex flex-col gap-1.5">
{#each requiredWorkflowNodes as node}
<div class="flex w-full flex-col">
<div class="shrink-0">
<div class=" capitalize line-clamp-1 w-20 text-gray-400 dark:text-gray-500">
{node.type}{node.type === 'prompt' ? '*' : ''}
</div>
</div>
<div class="flex mt-0.5 items-center">
<div class="">
<Tooltip content={$i18n.t('Input Key (e.g. text, unet_name, steps)')}>
<input
class="py-1 w-24 text-xs bg-transparent outline-hidden"
placeholder={$i18n.t('Key')}
bind:value={node.key}
required
/>
</Tooltip>
</div>
<div class="px-2 text-gray-400 dark:text-gray-500">:</div>
<div class="w-full">
<Tooltip
content={$i18n.t('Comma separated Node Ids (e.g. 1 or 1,2)')}
placement="top-start"
>
<input
class="w-full py-1 text-xs bg-transparent outline-hidden"
placeholder={$i18n.t('Node Ids')}
bind:value={node.node_ids}
/>
</Tooltip>
</div>
</div>
</div>
{/each}
</div>
<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
{$i18n.t('*Prompt node ID(s) are required for image generation')}
</div>
</div>
{/if}
{/if}
</div>
</div>