mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-12 04:15:25 +00:00
enh: gemini flash image generation support
This commit is contained in:
Timothy Jaeryang Baek
parent
72900cd686
commit
8d34fcb586
4 changed files with 517 additions and 101 deletions
|
|
@ -3279,6 +3279,12 @@ IMAGES_GEMINI_API_KEY = PersistentConfig(
|
||||||
os.getenv("IMAGES_GEMINI_API_KEY", GEMINI_API_KEY),
|
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 = PersistentConfig(
|
||||||
"IMAGE_SIZE", "image_generation.size", os.getenv("IMAGE_SIZE", "512x512")
|
"IMAGE_SIZE", "image_generation.size", os.getenv("IMAGE_SIZE", "512x512")
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -162,6 +162,7 @@ from open_webui.config import (
|
||||||
IMAGES_OPENAI_API_KEY,
|
IMAGES_OPENAI_API_KEY,
|
||||||
IMAGES_GEMINI_API_BASE_URL,
|
IMAGES_GEMINI_API_BASE_URL,
|
||||||
IMAGES_GEMINI_API_KEY,
|
IMAGES_GEMINI_API_KEY,
|
||||||
|
IMAGES_GEMINI_ENDPOINT_METHOD,
|
||||||
# Audio
|
# Audio
|
||||||
AUDIO_STT_ENGINE,
|
AUDIO_STT_ENGINE,
|
||||||
AUDIO_STT_MODEL,
|
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_BASE_URL = IMAGES_GEMINI_API_BASE_URL
|
||||||
app.state.config.IMAGES_GEMINI_API_KEY = IMAGES_GEMINI_API_KEY
|
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_BASE_URL = AUTOMATIC1111_BASE_URL
|
||||||
app.state.config.AUTOMATIC1111_API_AUTH = AUTOMATIC1111_API_AUTH
|
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_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_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
|
app.state.config.TTS_ENGINE = AUDIO_TTS_ENGINE
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -97,33 +97,37 @@ def get_image_model(request):
|
||||||
|
|
||||||
class ImagesConfig(BaseModel):
|
class ImagesConfig(BaseModel):
|
||||||
ENABLE_IMAGE_GENERATION: bool
|
ENABLE_IMAGE_GENERATION: bool
|
||||||
IMAGE_GENERATION_ENGINE: str
|
|
||||||
ENABLE_IMAGE_PROMPT_GENERATION: bool
|
ENABLE_IMAGE_PROMPT_GENERATION: bool
|
||||||
|
|
||||||
|
IMAGE_GENERATION_ENGINE: str
|
||||||
IMAGE_GENERATION_MODEL: str
|
IMAGE_GENERATION_MODEL: str
|
||||||
IMAGE_SIZE: str
|
IMAGE_SIZE: Optional[str]
|
||||||
IMAGE_STEPS: int
|
IMAGE_STEPS: Optional[int]
|
||||||
|
|
||||||
IMAGES_OPENAI_API_BASE_URL: str
|
IMAGES_OPENAI_API_BASE_URL: str
|
||||||
IMAGES_OPENAI_API_KEY: str
|
IMAGES_OPENAI_API_KEY: str
|
||||||
IMAGES_OPENAI_API_VERSION: str
|
IMAGES_OPENAI_API_VERSION: str
|
||||||
|
|
||||||
AUTOMATIC1111_BASE_URL: str
|
AUTOMATIC1111_BASE_URL: str
|
||||||
AUTOMATIC1111_API_AUTH: str
|
AUTOMATIC1111_API_AUTH: str
|
||||||
AUTOMATIC1111_PARAMS: Optional[dict | str]
|
AUTOMATIC1111_PARAMS: Optional[dict | str]
|
||||||
|
|
||||||
COMFYUI_BASE_URL: str
|
COMFYUI_BASE_URL: str
|
||||||
COMFYUI_API_KEY: str
|
COMFYUI_API_KEY: str
|
||||||
COMFYUI_WORKFLOW: str
|
COMFYUI_WORKFLOW: str
|
||||||
COMFYUI_WORKFLOW_NODES: list[dict]
|
COMFYUI_WORKFLOW_NODES: list[dict]
|
||||||
|
|
||||||
IMAGES_GEMINI_API_BASE_URL: str
|
IMAGES_GEMINI_API_BASE_URL: str
|
||||||
IMAGES_GEMINI_API_KEY: str
|
IMAGES_GEMINI_API_KEY: str
|
||||||
|
IMAGES_GEMINI_ENDPOINT_METHOD: str
|
||||||
|
|
||||||
|
|
||||||
@router.get("/config", response_model=ImagesConfig)
|
@router.get("/config", response_model=ImagesConfig)
|
||||||
async def get_config(request: Request, user=Depends(get_admin_user)):
|
async def get_config(request: Request, user=Depends(get_admin_user)):
|
||||||
return {
|
return {
|
||||||
"ENABLE_IMAGE_GENERATION": request.app.state.config.ENABLE_IMAGE_GENERATION,
|
"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,
|
"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_GENERATION_MODEL": request.app.state.config.IMAGE_GENERATION_MODEL,
|
||||||
"IMAGE_SIZE": request.app.state.config.IMAGE_SIZE,
|
"IMAGE_SIZE": request.app.state.config.IMAGE_SIZE,
|
||||||
"IMAGE_STEPS": request.app.state.config.IMAGE_STEPS,
|
"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,
|
"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_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_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(
|
async def update_config(
|
||||||
request: Request, form_data: ImagesConfig, user=Depends(get_admin_user)
|
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_GENERATION = form_data.ENABLE_IMAGE_GENERATION
|
||||||
request.app.state.config.ENABLE_IMAGE_PROMPT_GENERATION = (
|
request.app.state.config.ENABLE_IMAGE_PROMPT_GENERATION = (
|
||||||
form_data.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)
|
set_image_model(request, form_data.IMAGE_GENERATION_MODEL)
|
||||||
if (
|
if (
|
||||||
form_data.IMAGE_SIZE == "auto"
|
form_data.IMAGE_SIZE == "auto"
|
||||||
|
|
@ -165,7 +170,11 @@ async def update_config(
|
||||||
)
|
)
|
||||||
|
|
||||||
pattern = r"^\d+x\d+$"
|
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
|
request.app.state.config.IMAGE_SIZE = form_data.IMAGE_SIZE
|
||||||
else:
|
else:
|
||||||
raise HTTPException(
|
raise HTTPException(
|
||||||
|
|
@ -202,11 +211,14 @@ async def update_config(
|
||||||
form_data.IMAGES_GEMINI_API_BASE_URL
|
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_API_KEY = form_data.IMAGES_GEMINI_API_KEY
|
||||||
|
request.app.state.config.IMAGES_GEMINI_ENDPOINT_METHOD = (
|
||||||
|
form_data.IMAGES_GEMINI_ENDPOINT_METHOD
|
||||||
|
)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
"ENABLE_IMAGE_GENERATION": request.app.state.config.ENABLE_IMAGE_GENERATION,
|
"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,
|
"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_GENERATION_MODEL": request.app.state.config.IMAGE_GENERATION_MODEL,
|
||||||
"IMAGE_SIZE": request.app.state.config.IMAGE_SIZE,
|
"IMAGE_SIZE": request.app.state.config.IMAGE_SIZE,
|
||||||
"IMAGE_STEPS": request.app.state.config.IMAGE_STEPS,
|
"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,
|
"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_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_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):
|
def get_image_data(data: str, headers=None):
|
||||||
try:
|
try:
|
||||||
# if data url
|
if data.startswith("http://") or data.startswith("https://"):
|
||||||
|
|
||||||
if data.startswith("http"):
|
|
||||||
if headers:
|
if headers:
|
||||||
r = requests.get(data, headers=headers)
|
r = requests.get(data, headers=headers)
|
||||||
else:
|
else:
|
||||||
|
|
@ -495,10 +506,18 @@ async def image_generations(
|
||||||
return images
|
return images
|
||||||
|
|
||||||
elif request.app.state.config.IMAGE_GENERATION_ENGINE == "gemini":
|
elif request.app.state.config.IMAGE_GENERATION_ENGINE == "gemini":
|
||||||
headers = {}
|
headers = {
|
||||||
headers["Content-Type"] = "application/json"
|
"Content-Type": "application/json",
|
||||||
headers["x-goog-api-key"] = request.app.state.config.IMAGES_GEMINI_API_KEY
|
"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 = {
|
data = {
|
||||||
"instances": {"prompt": form_data.prompt},
|
"instances": {"prompt": form_data.prompt},
|
||||||
"parameters": {
|
"parameters": {
|
||||||
|
|
@ -507,10 +526,17 @@ async def image_generations(
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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
|
# Use asyncio.to_thread for the requests.post call
|
||||||
r = await asyncio.to_thread(
|
r = await asyncio.to_thread(
|
||||||
requests.post,
|
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,
|
json=data,
|
||||||
headers=headers,
|
headers=headers,
|
||||||
)
|
)
|
||||||
|
|
@ -519,10 +545,25 @@ async def image_generations(
|
||||||
res = r.json()
|
res = r.json()
|
||||||
|
|
||||||
images = []
|
images = []
|
||||||
|
|
||||||
|
if model.endswith(":predict"):
|
||||||
for image in res["predictions"]:
|
for image in res["predictions"]:
|
||||||
image_data, content_type = get_image_data(image["bytesBase64Encoded"])
|
image_data, content_type = get_image_data(
|
||||||
|
image["bytesBase64Encoded"]
|
||||||
|
)
|
||||||
url = upload_image(request, image_data, content_type, data, user)
|
url = upload_image(request, image_data, content_type, data, user)
|
||||||
images.append({"url": url})
|
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
|
return images
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -201,8 +201,8 @@
|
||||||
<div class=" space-y-3 overflow-y-scroll scrollbar-hidden pr-2">
|
<div class=" space-y-3 overflow-y-scroll scrollbar-hidden pr-2">
|
||||||
{#if config}
|
{#if config}
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div class="mb-3">
|
||||||
<div class=" mt-0.5 mb-2.5 text-base font-medium">{$i18n.t('Create Image')}</div>
|
<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" />
|
<hr class=" border-gray-100 dark:border-gray-850 my-2" />
|
||||||
|
|
||||||
|
|
@ -217,8 +217,82 @@
|
||||||
<Switch bind:state={config.ENABLE_IMAGE_GENERATION} />
|
<Switch bind:state={config.ENABLE_IMAGE_GENERATION} />
|
||||||
</div>
|
</div>
|
||||||
</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}
|
{#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="mb-2.5">
|
||||||
<div class="flex w-full justify-between items-center">
|
<div class="flex w-full justify-between items-center">
|
||||||
<div class="text-xs pr-2">
|
<div class="text-xs pr-2">
|
||||||
|
|
@ -253,77 +327,6 @@
|
||||||
</div>
|
</div>
|
||||||
</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'}
|
{#if config?.IMAGE_GENERATION_ENGINE === 'openai'}
|
||||||
<div class="mb-2.5">
|
<div class="mb-2.5">
|
||||||
<div class="flex w-full justify-between items-center">
|
<div class="flex w-full justify-between items-center">
|
||||||
|
|
@ -403,7 +406,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
class=" rounded-lg transition"
|
class=" transition"
|
||||||
type="button"
|
type="button"
|
||||||
aria-label="verify connection"
|
aria-label="verify connection"
|
||||||
on:click={async () => {
|
on:click={async () => {
|
||||||
|
|
@ -491,7 +494,7 @@
|
||||||
<div class="mt-1.5 flex w-full">
|
<div class="mt-1.5 flex w-full">
|
||||||
<div class="flex-1 mr-2">
|
<div class="flex-1 mr-2">
|
||||||
<Textarea
|
<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}
|
bind:value={config.AUTOMATIC1111_PARAMS}
|
||||||
placeholder={$i18n.t('Enter additional parameters in JSON format')}
|
placeholder={$i18n.t('Enter additional parameters in JSON format')}
|
||||||
minSize={100}
|
minSize={100}
|
||||||
|
|
@ -747,6 +750,367 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue