diff --git a/src/app.html b/src/app.html index 0020cbe9..ad1a35ff 100644 --- a/src/app.html +++ b/src/app.html @@ -17,7 +17,7 @@ // CSS vars (fallback for devices where env(safe-area-inset-*) misses // system bars or gesture areas). Re-runs on resize/visibility change // so rotation and keyboard transitions refresh the values. - (function () { + ;(function () { function apply() { try { var bridge = window.AndroidBridge diff --git a/src/lib/components/settings/ImageModelSelect.svelte b/src/lib/components/settings/ImageModelSelect.svelte index a0b850fb..cb3bdee3 100644 --- a/src/lib/components/settings/ImageModelSelect.svelte +++ b/src/lib/components/settings/ImageModelSelect.svelte @@ -113,7 +113,14 @@ {/if} {:else if filteredModels.length === 0} -

No models available

+
+

No models available

+ {#if showRefreshButton && onRefresh} + + {/if} +
{:else}
@@ -170,8 +177,8 @@
{#if showRefreshButton && onRefresh} - {/if}
diff --git a/src/lib/components/settings/tabs/images.svelte b/src/lib/components/settings/tabs/images.svelte index 45a213ba..8641e295 100644 --- a/src/lib/components/settings/tabs/images.svelte +++ b/src/lib/components/settings/tabs/images.svelte @@ -18,6 +18,13 @@ ComfyMode, type ImageModelInfo, } from '$lib/services/ai/image' + import { + validateApiWorkflow, + detectWorkflowFields, + fetchModelList, + clearComfyCacheForUrl, + } from '$lib/services/ai/image/providers/comfy' + import type { ComfyCustomWorkflow } from '$lib/services/ai/image/providers/types' import ImageModelSelect from '$lib/components/settings/ImageModelSelect.svelte' import type { ImageProfile, ImageProviderType, APIProfile } from '$lib/types' import * as Tabs from '$lib/components/ui/tabs' @@ -65,8 +72,28 @@ { value: 'comfyui', label: 'ComfyUI' }, ] const profileModes = [ + { value: ComfyMode.CustomWorkflow, label: 'Custom Workflow' }, { value: ComfyMode.BasicTxt2Img, label: 'Basic Text to Image' }, { value: ComfyMode.LoraTxt2Img, label: 'LoRA Text to Image' }, + { value: ComfyMode.UnetTxt2Img, label: 'UNet / Flux Text to Image' }, + ] as const + + const clipTypeItems = [ + { value: 'lumina2', label: 'Lumina 2' }, + { value: 'flux', label: 'Flux' }, + { value: 'sd3', label: 'SD3' }, + { value: 'stable_audio', label: 'Stable Audio' }, + { value: 'mochi', label: 'Mochi' }, + { value: 'ltxv', label: 'LTX Video' }, + { value: 'cosmos', label: 'Cosmos' }, + { value: 'wan', label: 'Wan' }, + { value: 'hidream', label: 'HiDream' }, + ] as const + const weightDtypeItems = [ + { value: 'default', label: 'default' }, + { value: 'fp8_e4m3fn', label: 'fp8_e4m3fn' }, + { value: 'fp8_e4m3fn_fast', label: 'fp8_e4m3fn_fast' }, + { value: 'fp8_e5m2', label: 'fp8_e5m2' }, ] as const // Tab state @@ -141,7 +168,50 @@ let profileLoraStrengthClip = $state(1.0) let availableLoras = $state([]) const { trigger: triggerAutoSave, flush: flushAutoSave } = createDebouncedSave(autoSaveProfile) - let loadingInEffect = false + + // Custom workflow state + let profileCustomWorkflow = $state(null) + // Holds parsed workflow data while the user resolves an ambiguous picker — not yet saved to profileCustomWorkflow + let pendingWorkflowData = $state<{ + workflow: ComfyCustomWorkflow['workflow'] + seedPath: string + outputNodeId: string + negativePromptPath: string | null + } | null>(null) + let workflowAmbiguousNodes = $state< + Array<{ + nodeId: string + title: string + path: string + textPreview: string + kSamplerSlot: string | null + }> + >([]) + let workflowPickerSelection = $state('') + let workflowError = $state(null) + let workflowFileName = $state(null) + + // Tracks the baseUrl active when the last cache population happened; used to + // detect URL changes and evict stale cache entries in comfy.ts. + let prevComfyBaseUrl: string | null = null + + // UNet mode specific state + let profileClipName = $state('') + let profileVaeName = $state('') + let profileClipType = $state('lumina2') + let profileWeightDtype = $state('default') + let availableClips = $state([]) + let availableVaes = $state([]) + let isLoadingUnetModels = $state(false) + const clipItems = $derived(availableClips.map((c) => ({ value: c, label: c }))) + const vaeItems = $derived(availableVaes.map((v) => ({ value: v, label: v }))) + + const needsWorkflow = $derived( + profileProviderType === 'comfyui' && + profileMode === ComfyMode.CustomWorkflow && + !profileCustomWorkflow, + ) + const canSaveProfile = $derived(!!profileName.trim() && !needsWorkflow) onDestroy(() => flushAutoSave()) @@ -246,6 +316,13 @@ let testImageResult = $state(null) let testError = $state(null) + $effect(() => { + // Clear stale test result when the profile changes + void testProfileId + testImageResult = null + testError = null + }) + // Derived supported sizes — computed once per reactive change, not twice per Autocomplete render const standardSizes = $derived(getSupportedSizes('standard')) const referenceSizes = $derived(getSupportedSizes('reference')) @@ -257,51 +334,60 @@ const loraItems = $derived(availableLoras.map((l) => ({ value: l, label: l }))) // Load models for the profile form when provider/apiKey change + let profileModelsReqId = 0 + async function loadProfileFormModels( providerType: ImageProviderType, apiKey: string, forceReload: boolean, ) { - if (isLoadingProfileModels) return + const baseUrl = profileBaseUrl || undefined + const reqId = ++profileModelsReqId isLoadingProfileModels = true profileModelsError = null try { - profileModels = await listImageModelsByProvider(providerType, apiKey, forceReload) + const models = await listImageModelsByProvider(providerType, apiKey, forceReload, baseUrl) + // Discard stale results if a newer request has already started. + if (reqId !== profileModelsReqId) return + profileModels = models } catch (error) { + if (reqId !== profileModelsReqId) return profileModelsError = error instanceof Error ? error.message : 'Failed to load models' } finally { - isLoadingProfileModels = false + if (reqId === profileModelsReqId) isLoadingProfileModels = false } } - // Reactively load models when provider or apiKey changes in profile form + // Reactively load models when provider, apiKey, or (for ComfyUI) baseUrl changes in profile form. + // No loadingInEffect guard — stale-result checks inside each loader discard superseded results; + // the registry cache deduplicates concurrent requests for the same endpoint. $effect(() => { if (editingProfileId && profileProviderType) { - if (loadingInEffect) return - loadingInEffect = true - - loadProfileFormModels(profileProviderType, profileApiKey, false).finally(() => { - loadingInEffect = false - }) + // Touch profileBaseUrl so Svelte tracks it; ComfyUI models depend on the endpoint. + void profileBaseUrl + loadProfileFormModels(profileProviderType, profileApiKey, false) if (profileProviderType === 'comfyui') { - loadSamplerInfo(profileBaseUrl) - loadLoras(profileBaseUrl) + loadSamplerInfo(profileBaseUrl || undefined) + loadLoras(profileBaseUrl || undefined) } } }) async function loadSamplerInfo(baseUrl?: string) { const info = await getComfySamplerInfo(baseUrl) + if ((profileBaseUrl || undefined) !== baseUrl) return profileSamplers = info.samplers.map((s) => ({ value: s, label: s })) profileSchedulers = info.schedulers.map((s) => ({ value: s, label: s })) } async function loadLoras(baseUrl?: string) { - availableLoras = await listLoras(baseUrl) + const loras = await listLoras(baseUrl) + if ((profileBaseUrl || undefined) !== baseUrl) return + availableLoras = loras } async function handleTestGenerate() { - if (!testProfileId || !testPrompt.trim()) return + if (isGeneratingTestImage || !testProfileId || !testPrompt.trim()) return const profile = settings.getImageProfile(testProfileId) if (!profile) return @@ -349,12 +435,21 @@ strengthClip: profileLoraStrengthClip ?? 1, } } + if (profileCustomWorkflow) { + opts.customWorkflow = profileCustomWorkflow + } + if (profileMode === ComfyMode.UnetTxt2Img) { + if (profileClipName) opts.clipName = profileClipName + if (profileVaeName) opts.vaeName = profileVaeName + if (profileClipType) opts.clipType = profileClipType + if (profileWeightDtype) opts.weightDtype = profileWeightDtype + } return opts } // Save current profile edits (called when collapsible closes) async function autoSaveProfile() { - if (isNewProfile || !editingProfileId || !profileName.trim()) return + if (isNewProfile || !editingProfileId || !canSaveProfile) return await settings.updateImageProfile(editingProfileId, { name: profileName.trim(), @@ -385,6 +480,11 @@ profileLoraName, profileLoraStrengthModel, profileLoraStrengthClip, + profileCustomWorkflow, + profileClipName, + profileVaeName, + profileClipType, + profileWeightDtype, ] // Skip the first run after startEditProfile populates the form if (suppressAutoSave) { @@ -419,6 +519,19 @@ profileSteps = 6 profilePositivePrompt = '' profileNegativePrompt = '' + prevComfyBaseUrl = null + profileCustomWorkflow = null + pendingWorkflowData = null + workflowAmbiguousNodes = [] + workflowPickerSelection = '' + workflowError = null + workflowFileName = null + profileClipName = '' + profileVaeName = '' + profileClipType = 'lumina2' + profileWeightDtype = 'default' + availableClips = [] + availableVaes = [] showApiKey = false showCopyDropdown = false openProfileIds.clear() @@ -434,6 +547,7 @@ profileName = profile.name profileProviderType = profile.providerType profileApiKey = profile.apiKey + prevComfyBaseUrl = null profileBaseUrl = profile.baseUrl || '' profileModel = profile.model || '' profileModels = [] @@ -447,6 +561,18 @@ profileSteps = Number(opts.step) || 6 profilePositivePrompt = (opts.positivePrompt as string) || '' profileNegativePrompt = (opts.negativePrompt as string) || '' + profileCustomWorkflow = (opts.customWorkflow as ComfyCustomWorkflow) || null + pendingWorkflowData = null + workflowFileName = profileCustomWorkflow ? 'Loaded from profile' : null + workflowAmbiguousNodes = [] + workflowPickerSelection = '' + workflowError = null + profileClipName = (opts.clipName as string) || '' + profileVaeName = (opts.vaeName as string) || '' + profileClipType = (opts.clipType as string) || 'lumina2' + profileWeightDtype = (opts.weightDtype as string) || 'default' + availableClips = [] + availableVaes = [] if (opts.lora) { const lora = opts.lora as any profileLoraName = lora.name || '' @@ -471,7 +597,7 @@ } async function handleSaveProfile() { - if (!profileName.trim()) return + if (!canSaveProfile) return await settings.addImageProfile({ name: profileName.trim(), @@ -506,6 +632,160 @@ openProfileIds.delete(profile.id) } } + + // --------------------------------------------------------------------------- + // Custom workflow handlers + // --------------------------------------------------------------------------- + + /** + * Called after a file is selected or JSON is pasted. + * Validates the JSON, runs detection, and either auto-confirms or shows the picker. + */ + function processWorkflowJson(json: unknown, filename: string) { + workflowError = null + workflowAmbiguousNodes = [] + workflowPickerSelection = '' + + const validationError = validateApiWorkflow(json) + if (validationError) { + workflowError = validationError + return + } + + const workflow = json as ComfyCustomWorkflow['workflow'] + const { positiveNodes, negativeNode, seedPath, outputNodeId, saveImageCount } = + detectWorkflowFields(workflow) + + if (positiveNodes.length === 0) { + workflowError = 'No CLIPTextEncode (positive) node found in workflow.' + return + } + if (!seedPath) { + workflowError = 'No KSampler or KSamplerAdvanced node found — cannot detect seed path.' + return + } + if (saveImageCount === 0) { + workflowError = 'No SaveImage node found in workflow.' + return + } + if (saveImageCount > 1) { + workflowError = `Workflow has ${saveImageCount} SaveImage nodes. Please keep exactly one SaveImage node.` + return + } + + workflowFileName = filename + + if (positiveNodes.length > 1) { + // Ambiguous — show picker. Store parsed data in pending state; do NOT write + // profileCustomWorkflow yet so the auto-save effect doesn't fire prematurely. + pendingWorkflowData = { + workflow, + seedPath, + outputNodeId: outputNodeId!, + negativePromptPath: negativeNode?.path ?? null, + } + workflowAmbiguousNodes = positiveNodes + workflowPickerSelection = positiveNodes[0].path + } else { + // Unambiguous — auto-confirm immediately + pendingWorkflowData = null + profileCustomWorkflow = { + workflow, + positivePromptPath: positiveNodes[0].path, + seedPath, + outputNodeId: outputNodeId!, + negativePromptPath: negativeNode?.path ?? null, + } + workflowAmbiguousNodes = [] + } + } + + function handleWorkflowFileInput(event: Event) { + const input = event.target as HTMLInputElement + const file = input.files?.[0] + if (!file) return + const reader = new FileReader() + reader.onload = () => { + try { + const json = JSON.parse(reader.result as string) + processWorkflowJson(json, file.name) + } catch { + workflowError = 'Invalid JSON file.' + } + } + reader.readAsText(file) + // Reset input so the same file can be re-selected after clearing + input.value = '' + } + + function confirmWorkflowPicker() { + if (!pendingWorkflowData || !workflowPickerSelection) return + profileCustomWorkflow = { ...pendingWorkflowData, positivePromptPath: workflowPickerSelection } + pendingWorkflowData = null + workflowAmbiguousNodes = [] + } + + function clearCustomWorkflow() { + profileCustomWorkflow = null + pendingWorkflowData = null + workflowAmbiguousNodes = [] + workflowPickerSelection = '' + workflowError = null + workflowFileName = null + } + + // --------------------------------------------------------------------------- + // UNet model loading + // --------------------------------------------------------------------------- + + let unetModelsReqId = 0 + + async function loadUnetModels() { + if (profileProviderType !== 'comfyui') return + const baseUrl = profileBaseUrl?.trim() || 'http://localhost:8188' + const reqId = ++unetModelsReqId + isLoadingUnetModels = true + try { + const [clips, vaes] = await Promise.all([ + fetchModelList(baseUrl, 'text_encoders', settings.apiSettings.llmTimeoutMs), + fetchModelList(baseUrl, 'vae', settings.apiSettings.llmTimeoutMs), + ]) + if (reqId !== unetModelsReqId) return + availableClips = clips + availableVaes = vaes + } finally { + if (reqId === unetModelsReqId) isLoadingUnetModels = false + } + } + + // Auto-load when switching to UNet mode + $effect(() => { + if (profileMode === ComfyMode.UnetTxt2Img && availableClips.length === 0) { + void loadUnetModels() + } + }) + + // Evict comfy.ts caches when the user changes the ComfyUI base URL so that + // the next generate/listModels call fetches fresh model lists. + // Also clear availableClips/Vaes so the auto-load effect can trigger a fresh fetch. + $effect(() => { + if (profileProviderType === 'comfyui') { + const currentUrl = profileBaseUrl.trim() || 'http://localhost:8188' + if (prevComfyBaseUrl !== null && prevComfyBaseUrl !== currentUrl) { + clearComfyCacheForUrl(prevComfyBaseUrl) + availableClips = [] + availableVaes = [] + } + prevComfyBaseUrl = currentUrl + } else { + if (prevComfyBaseUrl !== null) { + clearComfyCacheForUrl(prevComfyBaseUrl) + } + prevComfyBaseUrl = null + availableClips = [] + availableVaes = [] + } + })
@@ -545,9 +825,14 @@ {@render profileForm()} -
+ {#if needsWorkflow} +

+ Upload and confirm a workflow before saving. +

+ {/if} +
- @@ -1082,7 +1367,7 @@
{/if} -
+ {#snippet modelSelectContent()} {/if} -
+ {/snippet} + + {#if profileProviderType !== 'comfyui'} +
+ {@render modelSelectContent()} +
+ {/if} {#if profileProviderType === 'comfyui'}
@@ -1125,48 +1416,192 @@ placeholder="Select mode" />
-
- - s.value === profileSampler)} - onSelect={(v) => { - profileSampler = (v as { value: string }).value - }} - itemLabel={(s: { label: string }) => s.label} - itemValue={(s: { value: string }) => s.value} - placeholder="Select sampler" - /> -
-
- - s.value === profileScheduler)} - onSelect={(v) => { - profileScheduler = (v as { value: string }).value - }} - itemLabel={(s: { label: string }) => s.label} - itemValue={(s: { value: string }) => s.value} - placeholder="Select scheduler" - /> -
-
- - -
-
- - -
+ {#if profileMode !== ComfyMode.CustomWorkflow} +
+ {@render modelSelectContent()} +
+
+ + s.value === profileSampler)} + onSelect={(v) => { + profileSampler = (v as { value: string }).value + }} + itemLabel={(s: { label: string }) => s.label} + itemValue={(s: { value: string }) => s.value} + placeholder="Select sampler" + /> +
+
+ + s.value === profileScheduler)} + onSelect={(v) => { + profileScheduler = (v as { value: string }).value + }} + itemLabel={(s: { label: string }) => s.label} + itemValue={(s: { value: string }) => s.value} + placeholder="Select scheduler" + /> +
+
+ + +
+
+ + +
+ {/if}