OpenWebUI/open-webui-custom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac: images

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2025-11-04 13:30:59 -05:00
parent 939521b75d
commit 8e5690aab4
8 changed files with 279 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
src/lib/components/admin/Settings/Images.svelte
View File

@@ -24,47 +24,8 @@
let loading = false;
let config = null;
let imageGenerationConfig = null;
let models = null;
let samplers = [
'DPM++ 2M',
'DPM++ SDE',
'DPM++ 2M SDE',
'DPM++ 2M SDE Heun',
'DPM++ 2S a',
'DPM++ 3M SDE',
'Euler a',
'Euler',
'LMS',
'Heun',
'DPM2',
'DPM2 a',
'DPM fast',
'DPM adaptive',
'Restart',
'DDIM',
'DDIM CFG++',
'PLMS',
'UniPC'
];
let schedulers = [
'Automatic',
'Uniform',
'Karras',
'Exponential',
'Polyexponential',
'SGM Uniform',
'KL Optimal',
'Align Your Steps',
'Simple',
'Normal',
'DDIM',
'Beta'
];
let config = null;
let requiredWorkflowNodes = [
{
@@ -141,16 +102,16 @@
const saveHandler = async () => {
loading = true;
if (config?.comfyui?.COMFYUI_WORKFLOW) {
if (!validateJSON(config.comfyui.COMFYUI_WORKFLOW)) {
if (config?.COMFYUI_WORKFLOW) {
if (!validateJSON(config?.COMFYUI_WORKFLOW)) {
toast.error($i18n.t('Invalid JSON format for ComfyUI Workflow.'));
loading = false;
return;
}
}
if (config?.comfyui?.COMFYUI_WORKFLOW) {
config.comfyui.COMFYUI_WORKFLOW_NODES = requiredWorkflowNodes.map((node) => {
if (config?.COMFYUI_WORKFLOW) {
config.COMFYUI_WORKFLOW_NODES = requiredWorkflowNodes.map((node) => {
return {
type: node.type,
key: node.key,
@@ -166,13 +127,8 @@
return null;
});
await updateImageGenerationConfig(localStorage.token, imageGenerationConfig).catch((error) => {
toast.error(`${error}`);
loading = false;
return null;
});
getModels();
dispatch('save');
loading = false;
};
@@ -188,25 +144,20 @@
config = res;
}
if (config.enabled) {
if (config.ENABLE_IMAGE_GENERATION) {
getModels();
}
if (config.comfyui.COMFYUI_WORKFLOW) {
if (config.COMFYUI_WORKFLOW) {
try {
config.comfyui.COMFYUI_WORKFLOW = JSON.stringify(
JSON.parse(config.comfyui.COMFYUI_WORKFLOW),
null,
2
);
config.COMFYUI_WORKFLOW = JSON.stringify(JSON.parse(config.COMFYUI_WORKFLOW), null, 2);
} catch (e) {
console.error(e);
}
}
requiredWorkflowNodes = requiredWorkflowNodes.map((node) => {
const n = config.comfyui.COMFYUI_WORKFLOW_NODES.find((n) => n.type === node.type) ?? node;
const n = config.COMFYUI_WORKFLOW_NODES.find((n) => n.type === node.type) ?? node;
console.debug(n);
return {
@@ -215,15 +166,6 @@
node_ids: typeof n.node_ids === 'string' ? n.node_ids : n.node_ids.join(',')
};
});
const imageConfigRes = await getImageGenerationConfig(localStorage.token).catch((error) => {
toast.error(`${error}`);
return null;
});
if (imageConfigRes) {
imageGenerationConfig = imageConfigRes;
}
}
});
</script>
@@ -235,9 +177,11 @@
}}
>
<div class=" space-y-3 overflow-y-scroll scrollbar-hidden pr-2">
{#if config && imageGenerationConfig}
{#if config}
<div>
<div class=" mb-1 text-sm font-medium">{$i18n.t('Image Settings')}</div>
<div class=" mb-2.5 text-base font-medium">{$i18n.t('Create Image')}</div>
<hr class=" border-gray-100 dark:border-gray-850 my-2" />
<div>
<div class=" py-1 flex w-full justify-between">
@@ -247,29 +191,35 @@
<div class="px-1">
<Switch
bind:state={config.enabled}
bind:state={config.ENABLE_IMAGE_GENERATION}
on:change={(e) => {
const enabled = e.detail;
if (enabled) {
if (
config.engine === 'automatic1111' &&
config.automatic1111.AUTOMATIC1111_BASE_URL === ''
config.IMAGE_GENERATION_ENGINE === 'automatic1111' &&
config.AUTOMATIC1111_BASE_URL === ''
) {
toast.error($i18n.t('AUTOMATIC1111 Base URL is required.'));
config.enabled = false;
config.ENABLE_IMAGE_GENERATION = false;
} else if (
config.engine === 'comfyui' &&
config.comfyui.COMFYUI_BASE_URL === ''
config.IMAGE_GENERATION_ENGINE === 'comfyui' &&
config.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 === '') {
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.enabled = false;
} else if (config.engine === 'gemini' && config.gemini.GEMINI_API_KEY === '') {
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.enabled = false;
config.ENABLE_IMAGE_GENERATION = false;
}
}
@@ -284,7 +234,7 @@
<div class=" py-1 flex w-full justify-between">
<div class=" self-center text-xs font-medium">{$i18n.t('Image Prompt Generation')}</div>
<div class="px-1">
<Switch bind:state={config.prompt_generation} />
<Switch bind:state={config.ENABLE_IMAGE_PROMPT_GENERATION} />
</div>
</div>
{/if}
@@ -294,7 +244,7 @@
<div class="flex items-center relative">
<select
class=" dark:bg-gray-900 w-fit pr-8 cursor-pointer rounded-sm px-2 p-1 text-xs bg-transparent outline-hidden text-right"
bind:value={config.engine}
bind:value={config.IMAGE_GENERATION_ENGINE}
placeholder={$i18n.t('Select Engine')}
on:change={async () => {
updateConfigHandler();
@@ -311,7 +261,7 @@
<hr class=" border-gray-100 dark:border-gray-850" />
<div class="flex flex-col gap-2">
{#if (config?.engine ?? 'automatic1111') === 'automatic1111'}
{#if (config?.IMAGE_GENERATION_ENGINE ?? 'automatic1111') === 'automatic1111'}
<div>
<div class=" mb-2 text-sm font-medium">{$i18n.t('AUTOMATIC1111 Base URL')}</div>
<div class="flex w-full">
@@ -319,12 +269,13 @@
<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.automatic1111.AUTOMATIC1111_BASE_URL}
bind:value={config.AUTOMATIC1111_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) => {
@@ -370,7 +321,7 @@
</div>
<SensitiveInput
placeholder={$i18n.t('Enter api auth string (e.g. username:password)')}
bind:value={config.automatic1111.AUTOMATIC1111_API_AUTH}
bind:value={config.AUTOMATIC1111_API_AUTH}
required={false}
/>
@@ -388,66 +339,22 @@
</div>
</div>
<!---Sampler-->
<div>
<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Sampler')}</div>
<div class="flex w-full">
<div class="flex-1 mr-2">
<Tooltip content={$i18n.t('Enter Sampler (e.g. Euler a)')} placement="top-start">
<input
list="sampler-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"
placeholder={$i18n.t('Enter Sampler (e.g. Euler a)')}
bind:value={config.automatic1111.AUTOMATIC1111_SAMPLER}
<div class="mb-1 text-xs text-gray-400 dark:text-gray-500">
<div class="w-full">
<div class=" mb-1.5 text-xs font-medium">{$i18n.t('Additional Parameters')}</div>
<div class="flex w-full">
<div class="flex-1">
<Textarea
className="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.AUTOMATIC1111_PARAMS}
placeholder={$i18n.t('Enter additional parameters in JSON format')}
minSize={100}
/>
<datalist id="sampler-list">
{#each samplers ?? [] as sampler}
<option value={sampler}>{sampler}</option>
{/each}
</datalist>
</Tooltip>
</div>
</div>
</div>
</div>
<!---Scheduler-->
<div>
<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Scheduler')}</div>
<div class="flex w-full">
<div class="flex-1 mr-2">
<Tooltip content={$i18n.t('Enter Scheduler (e.g. Karras)')} placement="top-start">
<input
list="scheduler-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"
placeholder={$i18n.t('Enter Scheduler (e.g. Karras)')}
bind:value={config.automatic1111.AUTOMATIC1111_SCHEDULER}
/>
<datalist id="scheduler-list">
{#each schedulers ?? [] as scheduler}
<option value={scheduler}>{scheduler}</option>
{/each}
</datalist>
</Tooltip>
</div>
</div>
</div>
<!---CFG scale-->
<div>
<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set CFG Scale')}</div>
<div class="flex w-full">
<div class="flex-1 mr-2">
<Tooltip content={$i18n.t('Enter CFG Scale (e.g. 7.0)')} 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 CFG Scale (e.g. 7.0)')}
bind:value={config.automatic1111.AUTOMATIC1111_CFG_SCALE}
/>
</Tooltip>
</div>
</div>
</div>
{:else if config?.engine === 'comfyui'}
{: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">
@@ -455,12 +362,13 @@
<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.COMFYUI_BASE_URL}
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) => {
@@ -495,7 +403,7 @@
<div class="flex-1 mr-2">
<SensitiveInput
placeholder={$i18n.t('sk-1234')}
bind:value={config.comfyui.COMFYUI_API_KEY}
bind:value={config.COMFYUI_API_KEY}
required={false}
/>
</div>
@@ -505,11 +413,11 @@
<div class="">
<div class=" mb-2 text-sm font-medium">{$i18n.t('ComfyUI Workflow')}</div>
{#if config.comfyui.COMFYUI_WORKFLOW}
{#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.COMFYUI_WORKFLOW}
bind:value={config.COMFYUI_WORKFLOW}
required
/>
{/if}
@@ -526,7 +434,7 @@
const reader = new FileReader();
reader.onload = (e) => {
config.comfyui.COMFYUI_WORKFLOW = e.target.result;
config.COMFYUI_WORKFLOW = e.target.result;
e.target.value = null;
};
@@ -551,7 +459,7 @@
</div>
</div>
{#if config.comfyui.COMFYUI_WORKFLOW}
{#if config.COMFYUI_WORKFLOW}
<div class="">
<div class=" mb-2 text-sm font-medium">{$i18n.t('ComfyUI Workflow Nodes')}</div>
@@ -597,7 +505,7 @@
</div>
</div>
{/if}
{:else if config?.engine === 'openai'}
{: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">
@@ -605,7 +513,7 @@
<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.openai.OPENAI_API_BASE_URL}
bind:value={config.IMAGES_OPENAI_API_BASE_URL}
required
/>
</div>
@@ -618,7 +526,7 @@
<div class="flex-1 mr-2">
<SensitiveInput
placeholder={$i18n.t('API Key')}
bind:value={config.openai.OPENAI_API_KEY}
bind:value={config.IMAGES_OPENAI_API_KEY}
required
/>
</div>
@@ -632,12 +540,12 @@
<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.openai.OPENAI_API_VERSION}
bind:value={config.IMAGES_OPENAI_API_VERSION}
/>
</div>
</div>
</div>
{:else if config?.engine === 'gemini'}
{:else if config?.IMAGE_GENERATION_ENGINE === 'gemini'}
<div>
<div class=" mb-1.5 text-sm font-medium">{$i18n.t('Gemini API Config')}</div>
@@ -645,20 +553,20 @@
<input
class="flex-1 w-full text-sm bg-transparent outline-none"
placeholder={$i18n.t('API Base URL')}
bind:value={config.gemini.GEMINI_API_BASE_URL}
bind:value={config.IMAGES_GEMINI_API_BASE_URL}
required
/>
<SensitiveInput
placeholder={$i18n.t('API Key')}
bind:value={config.gemini.GEMINI_API_KEY}
bind:value={config.IMAGES_GEMINI_API_KEY}
/>
</div>
</div>
{/if}
</div>
{#if config?.enabled}
{#if config?.ENABLE_IMAGE_GENERATION}
<hr class=" border-gray-100 dark:border-gray-850" />
<div>
@@ -671,7 +579,7 @@
<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={imageGenerationConfig.MODEL}
bind:value={config.IMAGE_GENERATION_MODEL}
placeholder={$i18n.t('Select a model')}
required
/>
@@ -696,7 +604,7 @@
<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={imageGenerationConfig.IMAGE_SIZE}
bind:value={config.IMAGE_SIZE}
required
/>
</Tooltip>
@@ -704,7 +612,7 @@
</div>
</div>
{#if ['comfyui', 'automatic1111', ''].includes(config?.engine)}
{#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">
@@ -713,7 +621,7 @@
<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={imageGenerationConfig.IMAGE_STEPS}
bind:value={config.IMAGE_STEPS}
required
/>
</Tooltip>