Model Management
Configure and deploy AI models across providers
{/* API Keys Settings Button */}
{/* Backdrop */}
{/* Civitai Input Section (only when provider is civitai) */}
{provider === 'civitai' && (
)}
{/* Body */}
{/* Toast notification */}
{toast ? (
);
}
setApiKeysExpanded(false)}/>
{/* Modal */}
)}
{/* Controls */}
{/* Modal Header */}
API Keys
Optional - for gated HuggingFace and Civitai models
{/* HuggingFace Token */}
{apiKeysStatus.huggingface?.configured && (
{apiKeysStatus.huggingface.source === 'environment' ? 'ENV' : 'Stored'}
)}
{apiKeysStatus.huggingface?.configured ? (
) : (
{/* Civitai API Key */}
{apiKeysStatus.civitai?.configured && (
{apiKeysStatus.civitai.source === 'environment' ? 'ENV' : 'Stored'}
)}
{apiKeysStatus.civitai?.configured ? (
) : (
{/* Modal Footer */}
HuggingFace Token
For FLUX, SVD XT 1.1, gated models
β
{apiKeysStatus.huggingface.masked}
{apiKeysStatus.huggingface.source !== 'environment' && ()}
setApiKeyInput(prev => ({ ...prev, huggingface: e.target.value }))} placeholder="hf_xxxxxxxxxxxxxxxxxx" className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm font-mono outline-none focus:border-white/30 transition-all placeholder:text-white/20"/>
Get token from huggingface.co β
)}
Civitai API Key
For NSFW and restricted downloads
β
{apiKeysStatus.civitai.masked}
{apiKeysStatus.civitai.source !== 'environment' && ()}
setApiKeyInput(prev => ({ ...prev, civitai: e.target.value }))} placeholder="xxxxxxxxxxxxxxxxxxxxxxxx" className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm font-mono outline-none focus:border-white/30 transition-all placeholder:text-white/20"/>
Get API key from civitai.com β
)}
Keys are stored locally and never sent to external servers except for authentication. Environment variables (HF_TOKEN, CIVITAI_API_KEY) take precedence over stored keys.
{['chat', 'multimodal', 'image', 'edit', 'video', 'enhance', 'lora', 'addons'].map((t) => ())}
{providersError ?
{providersError}
: null}
setBaseUrl(e.target.value)} placeholder={modelType === 'chat' ? 'http://localhost:11434' : 'http://localhost:8188'} className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm font-medium outline-none focus:border-white/30 focus:bg-white/10 transition-all placeholder:text-white/30"/>
Optional. Leave empty to use default configuration.
{/* Search Bar */}
{/* Search Results */}
{civitaiResults.length > 0 && (
)}
{/* Manual Version ID Input */}
{/* Recommended Models Info */}
setCivitaiQuery(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && searchCivitai()} placeholder={`Search ${modelType === 'video' ? 'video' : 'image'} models on Civitai...`} className="flex-1 bg-white/5 border border-cyan-500/20 rounded-xl px-4 py-3 text-sm font-medium outline-none focus:border-cyan-500/40 focus:bg-white/10 transition-all placeholder:text-white/30"/>
{civitaiSearchError && (
β οΈ {civitaiSearchError}
)}
Search Results ({civitaiResults.length} models)
{civitaiTotalPages > 1 && (
Page {civitaiPage} of {civitaiTotalPages}
)}
{civitaiResults.map((model) => (
{/* Thumbnail */}
)}
{model.link && (
View on Civitai β
)}
))}
{model.thumbnail ? (
) : (
{/* Info */}
πΌοΈ
)}
{model.nsfw && (
NSFW
)}
{model.name}
by {model.creator}
β¬οΈ {model.downloads >= 1000 ? `${(model.downloads / 1000).toFixed(1)}K` : model.downloads}
β {model.rating.toFixed(1)}
({model.ratingCount})
{model.tags.length > 0 && (
{model.tags.slice(0, 3).map((tag) => (
{tag}
))}
)}
{/* Version selector and install */}
{model.versions.length > 0 && (
setCivitaiVersionId(e.target.value)} placeholder="e.g., 128713 (from Civitai model URL)" className="w-full bg-white/5 border border-blue-500/20 rounded-xl px-4 py-3 text-sm font-medium outline-none focus:border-blue-500/40 focus:bg-white/10 transition-all placeholder:text-white/30"/>
Enter a version ID from any Civitai model URL (e.g., civitai.com/models/128713)
β Recommended {modelType === 'image' ? 'Image' : 'Video'} Models from Civitai
Click "Install" on any model below to download directly from Civitai. Models are installed to your ComfyUI models folder.
{/* Error messages - hide for Civitai since it's download-only */}
{installedError && provider !== 'civitai' ? (
) : null}
{catalogError && !supportedForSelection.length ? (
) : null}
{/* Models table */}
{/* Avatar & Identity Section (Add-ons tab only) */}
{modelType === 'addons' && (
{avatarModelsError ? (
)}
{/* Quick-install preset buttons */}
{/* Progress bar */}
{avatarDownloadStatus.total_models > 0 && (
)}
{/* Per-model status rows */}
)}
{/* Model list */}
)}
{/* LoRA Models Section (LoRA tab only β additive, Golden Rule 1.0) */}
{modelType === 'lora' && (
{loraError ? (
Some models are hidden. Enable Spice Mode in Settings to see all available LoRAs.
)}
{/* Install progress (mirrors Add-ons progress bar) */}
{loraDownloadStatus && (loraDownloadStatus.running || loraDownloadStatus.finished) && (
)}
{loraDownloadStatus.running && loraDownloadStatus.current_model && ()}
{/* Installed LoRAs */}
{loraInstalled.length > 0 && (
)}
{/* Registry LoRAs */}
)}
{installedError.includes('Ollama') || installedError.includes('11434')
? 'Ollama Not Running'
: 'Configuration Required'}
{installedError.includes('Ollama') || installedError.includes('11434')
? 'Ollama is not reachable. Start Ollama or switch to a different provider tab. ComfyUI models and Add-ons still work normally.'
: installedError.includes('LLM_BASE_URL')
? 'Configure LLM_BASE_URL environment variable to use OpenAI-compatible (vLLM) provider. Or switch to a different provider.'
: installedError}
Backend catalog unavailable
Using fallback model list. Configure /model-catalog endpoint for enhanced functionality.
Available Models
{(() => {
const isRemoteProvider = ['openai', 'claude', 'watsonx'].includes(provider);
if (installedLoading)
return 'Loadingβ¦';
if (provider === 'civitai') {
return `π§ͺ ${supportedForSelection.length} Recommended Models`;
}
if (isRemoteProvider) {
return `${supportedForSelection.length} API Models`;
}
return `${installed.length} Installed${supportedForSelection.length ? ` Β· ${supportedForSelection.length} Available` : ''}`;
})()}
{merged.length === 0 ? (
{statusLabel}
{row.recommended ? (
);
}))}
{provider === 'civitai' ? (
) : ('No models found. Try changing provider/base URL and refresh.')}
) : (merged.map((row) => {
const statusKind = row.status === 'installed'
? 'ok'
: row.status === 'missing'
? 'warn'
: 'muted';
const statusLabel = row.status === 'installed'
? 'Installed'
: row.status === 'missing'
? 'Available'
: 'Custom';
// Only allow downloads for local providers (Ollama, ComfyUI, Civitai)
// Remote API providers (OpenAI, Claude, Watsonx, openai_compat) don't support local installation
const isLocalProvider = provider === 'ollama' || provider === 'comfyui' || provider === 'civitai';
const canDownload = row.status === 'missing' && isLocalProvider;
const canDelete = (row.status === 'installed' || row.status === 'installed_unsupported') && isLocalProvider && !row.protected;
const isCivitai = provider === 'civitai';
return (π§ͺ Civitai Download
Enter a Civitai version ID above to download models.
Find models at civitai.com
β Recommended
) : null}
{row.recommended_nsfw && props.nsfwMode ? (
π₯ NSFW Pick
) : null}
{row.nsfw ? (
πΆοΈ Adult
) : null}
{isCivitai && row.civitai_version_id ? (
v{row.civitai_version_id}
) : null}
{row.protected && (row.status === 'installed' || row.status === 'installed_unsupported') ? (
π Default
) : null}
{row.label}
{row.id}
{row.description ? ({row.description}
) : null}
{/* Pack metadata - shows file count, required nodes, and hints */}
{row.install?.files && row.install.files.length > 1 ? (
Pack: {row.install.files.length} files
) : null}
{row.install?.requires_custom_nodes && row.install.requires_custom_nodes.length > 0 ? (
Requires:{" "}
{row.install.requires_custom_nodes.join(", ")}
) : null}
{row.install?.hint ? (
{row.install.hint}
) : null}
{isCivitai && row.civitai_url ? (
View on Civitai β
) : null}
{canDownload ? () : null}
{canDelete ? (deleteConfirm === row.id ? (
) : ()) : null}
Avatar & Identity Models
Persona
{avatarModelsLoading ? (
Loading...
) : (
{avatarModels.filter(m => m.installed).length} / {avatarModels.length} Installed
)}
Could not load avatar models: {avatarModelsError}
) : (<>
{/* Feature readiness dashboard */}
{Object.keys(avatarFeatures).length > 0 && (Feature Readiness
{Object.entries(avatarFeatures).map(([featId, feat]) => (
))}
{feat.ready ? (
{feat.label}
{feat.description}
{!feat.ready && feat.required_missing.length > 0 && (
Missing: {feat.required_missing.join(', ')}
)}
{feat.ready && !feat.recommended_installed && feat.recommended_note && (
Tip: {feat.recommended_note}
)}
Existing personas and avatars work without any of these models. These enable optional enhanced features only.
Quick Install:
Basic = InsightFace + InstantID (portraits + outfits, ~4.3 GB). Full = all 9 models (~9.5 GB, + face swap, random faces).
{/* Download progress panel (visible during active download) */}
{avatarDownloadStatus && (avatarDownloadStatus.running || avatarDownloadStatus.finished) && (
{avatarDownloadStatus.running && ()}
{avatarDownloadStatus.finished && (
{Math.round(avatarDownloadStatus.elapsed)}s
{avatarDownloadStatus.downloaded_bytes > 0 && (<> | {formatBytes(avatarDownloadStatus.downloaded_bytes)})}
{(avatarDownloadStatus.results || []).map((r) => (
{/* Dismiss when finished */}
{avatarDownloadStatus.finished && ()}
{r.status === 'installed' ? (
))}
{/* Currently downloading indicator */}
{avatarDownloadStatus.running && avatarDownloadStatus.current_model && (
{avatarModels.find(m => m.id === avatarDownloadStatus.current_model)?.name || avatarDownloadStatus.current_model}
downloading...
)}
{avatarModels.map((m) => {
const statusKind = m.installed ? 'ok' : 'warn';
const statusLabel = m.installed ? 'Installed' : 'Not Installed';
// Basic pack models are tagged as "Recommended" β minimum needed for Avatar to work
const BASIC_PACK_IDS = new Set(['insightface-antelopev2', 'instantid-ip-adapter', 'instantid-controlnet']);
const isRecommended = BASIC_PACK_IDS.has(m.id);
// Feature labels from used_by
const FEATURE_LABELS = {
photo_variations: { label: 'Portraits', color: 'purple' },
outfit_generation: { label: 'Outfits', color: 'indigo' },
face_swap: { label: 'Face Swap', color: 'cyan' },
random_faces: { label: 'Random Faces', color: 'pink' },
};
return (
{statusLabel}
{m.is_default && (
{m.license}
)}
{m.commercial_use_ok === true && (
);
})}
{avatarModels.length === 0 && !avatarModelsLoading && (
)}
Core
)}
{isRecommended && (
Recommended
)}
{m.license && (
Commercial OK
)}
{m.commercial_use_ok === false && (
Non-Commercial
)}
{m.name}
{m.id}
{m.description && ({m.description}
)}
{m.requires && m.requires.length > 0 && (
Requires: {m.requires.join(', ')}
)}
{/* Feature tags: which features this model enables */}
{m.used_by && m.used_by.length > 0 && (
Enables:
{m.used_by.map((ub) => {
const fl = FEATURE_LABELS[ub.feature];
if (!fl)
return null;
const isRequired = ub.role === 'required';
return (
{fl.label}{!isRequired ? ' (opt)' : ''}
);
})}
)}
{m.homepage && (
Info
)}
{/* Install button β only for not-installed models with a download URL */}
{!m.installed && m.download_url && ()}
{/* Uninstall button β only for installed models */}
{m.installed && (avatarDeleteConfirm === m.id ? (
) : ())}
No avatar models registered. Check backend configuration.
)}
LoRA Models
Lightweight Adapters
{loraLoading ? (
Loading...
) : (
{loraInstalled.length} Installed / {loraRegistry.length} Available
)}
Could not load LoRA models: {loraError}
) : (<>
{/* Info banner */}
LoRA (Low-Rank Adaptation) models are lightweight adapters that modify checkpoint behavior without replacing the base model.
Perfect for GPUs with less than 12 GB VRAM. Click Install to add a LoRA to your models/comfy/loras/ directory.
{!props.nsfwMode && (
{loraDownloadStatus.running && ()}
{loraDownloadStatus.finished &&
{loraDownloadStatus.total_models > 0 && (
Installing: {loraRegistry.find((l) => l.id === loraDownloadStatus.current_model)?.name || loraDownloadStatus.current_model}
)}
{loraDownloadStatus.finished && ()}
Installed LoRAs
{loraInstalled.map((l) => (
{loraRegistry.map((lora) => {
const isInstalled = loraInstalled.some((i) => i.id === lora.id);
return (
);
})}
{loraRegistry.length === 0 && !loraLoading && (
)}
{isInstalled ? (<> Installed) : (<> Available)}
{lora.base}
{lora.recommended ? (
β Recommended
) : null}
{lora.recommended_nsfw && props.nsfwMode ? (
π₯ NSFW Pick
) : null}
{lora.gated ? (
πΆοΈ Adult
) : null}
{lora.size_mb > 0 && ({lora.size_mb} MB
)}
{lora.name}
{lora.filename}
{lora.description && ({lora.description}
)}
{lora.trigger_words && lora.trigger_words.length > 0 && (
Trigger words:
{lora.trigger_words.map((tw) => (
{tw}
))}
)}
{lora.model_url && (
View
)}
{/* Install button β not installed, has download URL */}
{!isInstalled && lora.download_url && ()}
{/* Delete button β installed models */}
{isInstalled && (loraDeleteConfirm === lora.id ? (
) : ())}
No LoRA models available. Check backend configuration.
)}
{toast.includes('Successfully') || toast.includes('installed') ? (
) : null}
{toast}
{installBusy && (
Large models may take several minutes...
)}