${this.escapeHtml(targetPath)}${this.escapeHtml(targetPath)}${this.escapeHtml(renderTemplatePreview(getTemplateInputValue(categoryKey)))}`;
}
};
const syncAllTemplateControls = () => {
pathTemplateCategories.forEach(category => syncTemplateControl(category.key));
};
const getDefaultRootContextPath = (select) => {
if (!select) return '';
const category = this.normalizeDownloadCategory(select.dataset.rootCategory || '');
const selectedValue = String(select.value || '').trim();
if (selectedValue) return selectedValue;
const directDownloadRoot = this.downloadDirectories?.[category] || '';
if (directDownloadRoot) return directDownloadRoot;
const rootOptions = this.downloadRootDirectories?.[category];
return Array.isArray(rootOptions) && rootOptions.length ? rootOptions[0] : '';
};
const getDefaultRootContextModel = (select) => {
const path = getDefaultRootContextPath(select);
if (!path) return null;
const category = this.normalizeDownloadCategory(select.dataset.rootCategory || '');
const label = select.closest('.mr-options-template-row')?.querySelector('.mr-options-label')?.textContent?.trim()
|| this.getCategoryDisplayName(category);
return {
context_scope: 'download_root',
name: label,
path,
resolved_path: path,
folder_path: path,
download_directory: path,
category,
open_folder_label: 'Open Root Folder'
};
};
const syncDefaultRootContextTarget = (select) => {
if (!select) return;
const contextModel = getDefaultRootContextModel(select);
const tooltip = contextModel
? `Right-click to open ${contextModel.name}`
: 'No root folder available';
this.setDownloadFolderContextTarget(select, contextModel, tooltip);
this.setDownloadFolderContextTarget(select.closest('.mr-options-template-row'), contextModel, tooltip);
};
const setTemplateControlValue = (categoryKey, template) => {
const select = templatePresetInputs.find(input => input.dataset.templateCategory === categoryKey);
const custom = templateCustomInputs.find(input => input.dataset.templateCategory === categoryKey);
if (!select) return false;
const normalizedTemplate = this.normalizeDownloadPathValue(template);
select.value = pathTemplatePresetValues.has(normalizedTemplate)
? normalizedTemplate
: 'custom';
if (custom) {
custom.value = normalizedTemplate;
}
syncTemplateControl(categoryKey);
return true;
};
const setTemplateDetectStatus = (text, mode = '') => {
if (!templateDetectStatus) return;
templateDetectStatus.textContent = text;
templateDetectStatus.classList.remove('is-valid', 'is-invalid', 'is-pending');
if (mode) templateDetectStatus.classList.add(mode);
};
const applyDetectedPathTemplates = async () => {
if (!detectTemplatesBtn) return;
detectTemplatesBtn.disabled = true;
setTemplateDetectStatus('Scanning existing model folders...', 'is-pending');
try {
const data = await this.fetchJson('/model_resolver/path-template-suggestions?force=1', {}, 'Detect path templates');
const categories = data?.categories && typeof data.categories === 'object'
? data.categories
: {};
let appliedCount = 0;
let inspectedCount = 0;
pathTemplateCategories.forEach((category) => {
const suggestion = categories[category.key];
if (!suggestion) return;
if (Number(suggestion.model_count || 0) > 0) {
inspectedCount += 1;
}
if (suggestion.apply && setTemplateControlValue(category.key, suggestion.template || '')) {
appliedCount += 1;
}
});
let mappingCount = 0;
const detectedMappings = data?.base_model_path_mappings || {};
if (
baseModelMappingsContainer &&
detectedMappings &&
typeof detectedMappings === 'object' &&
!Array.isArray(detectedMappings)
) {
const currentMappings = collectBaseModelPathMappings();
Object.entries(detectedMappings).forEach(([source, target]) => {
const sourceKey = String(source || '').trim();
const targetValue = String(target || '').trim();
if (sourceKey && targetValue && !currentMappings[sourceKey]) {
currentMappings[sourceKey] = targetValue;
mappingCount += 1;
}
});
if (mappingCount > 0) {
renderBaseModelMappingRows(currentMappings);
}
}
if (appliedCount > 0 || mappingCount > 0) {
syncAllTemplateControls();
setStatus('You have unsaved changes.', 'is-dirty');
const mappingText = mappingCount
? ` Added ${mappingCount} base-model mapping${mappingCount === 1 ? '' : 's'}.`
: '';
setTemplateDetectStatus(
appliedCount > 0
? `Detected ${appliedCount} template preset${appliedCount === 1 ? '' : 's'} from ${inspectedCount} model type${inspectedCount === 1 ? '' : 's'}.${mappingText}`
: `Detected ${mappingCount} base-model mapping${mappingCount === 1 ? '' : 's'} from existing folders.`,
'is-valid'
);
this.showNotification('Path templates detected. Review and save options.', 'success');
} else {
setTemplateDetectStatus(
'No confident folder pattern found. Existing template settings were not changed.',
'is-invalid'
);
this.showNotification('No confident path template pattern found.', 'info');
}
} catch (error) {
console.error('Model Resolver: path template detection error:', error);
setTemplateDetectStatus(error.message || 'Template detection failed.', 'is-invalid');
this.showNotification('Path template detection failed', 'error');
} finally {
detectTemplatesBtn.disabled = false;
}
};
templatePresetInputs.forEach(input => {
input.addEventListener('change', () => syncTemplateControl(input.dataset.templateCategory));
});
templateCustomInputs.forEach(input => {
input.addEventListener('input', () => syncTemplateControl(input.dataset.templateCategory));
});
renderBaseModelMappingRows(tokens.base_model_path_mappings || {});
if (typeof this.ensureBaseModelsLoaded === 'function') {
this.ensureBaseModelsLoaded()
.then(() => {
refreshBaseModelMappingOptions();
})
.catch((error) => {
console.warn('Model Resolver: could not load base models for mapping options', error);
});
}
if (addBaseModelMappingBtn) {
addBaseModelMappingBtn.addEventListener('click', () => {
addBaseModelMappingRow('', '');
setStatus('You have unsaved changes.', 'is-dirty');
});
}
syncAllTemplateControls();
const populateDefaultRootSelects = async () => {
const roots = await this.ensureDownloadRootDirectoriesLoaded();
await this.ensureDownloadDirectoriesLoaded();
defaultRootSelectInputs.forEach((select) => {
const category = this.normalizeDownloadCategory(select.dataset.rootCategory || '');
const currentValue = select.value || select.dataset.currentValue || '';
const categoryRoots = Array.isArray(roots?.[category]) ? roots[category] : [];
const options = [
{ value: '', label: 'Auto' },
...categoryRoots.map(path => ({ value: path, label: path }))
];
if (currentValue && !options.some(option => option.value === currentValue)) {
options.push({ value: currentValue, label: `${currentValue} (not currently detected)` });
}
select.innerHTML = options
.map(option => ``)
.join('');
syncDefaultRootContextTarget(select);
});
};
populateDefaultRootSelects();
loadMetadataBuildCapabilities();
setStatus('Saved only on this machine.');
setVisibleSection('mr-options-section-sources');
trackedInputs.forEach((input) => {
const eventName = input.type === 'checkbox' || input.tagName === 'SELECT' ? 'change' : 'input';
input.addEventListener(eventName, () => {
setStatus('You have unsaved changes.', 'is-dirty');
});
});
defaultRootSelectInputs.forEach((select) => {
select.addEventListener('change', () => {
syncDefaultRootContextTarget(select);
});
});
this.bindTooltips(this.contentElement);
navButtons.forEach((btn) => {
btn.addEventListener('click', () => {
const targetId = btn.dataset.target;
if (!targetId) return;
setVisibleSection(targetId);
if (targetId === 'mr-options-section-local-db') {
loadModelListStatus(false);
loadBaseModelsStatus(false);
} else if (targetId === 'mr-options-section-hf') {
loadHfIndexStatus();
}
});
});
if (modelListCheckBtn) {
modelListCheckBtn.addEventListener('click', () => {
loadModelListStatus(true);
});
}
if (modelListUpdateBtn) {
modelListUpdateBtn.addEventListener('click', () => {
updateModelList();
});
}
if (baseModelsCheckBtn) {
baseModelsCheckBtn.addEventListener('click', () => {
loadBaseModelsStatus(true);
});
}
if (baseModelsUpdateBtn) {
baseModelsUpdateBtn.addEventListener('click', () => {
updateBaseModels();
});
}
if (hfIndexRefreshBtn) {
hfIndexRefreshBtn.addEventListener('click', () => {
refreshHfIndex();
});
}
if (exportFrontendLogsBtn) {
exportFrontendLogsBtn.addEventListener('click', () => {
exportFrontendLogs();
});
}
if (exportBackendLogsBtn) {
exportBackendLogsBtn.addEventListener('click', () => {
exportBackendLogs();
});
}
if (clearAllCacheBtn) {
clearAllCacheBtn.addEventListener('click', () => {
clearAllCachesFromOptions();
});
}
if (addDependencyNodeBtn) {
addDependencyNodeBtn.addEventListener('click', () => {
if (typeof window.ModelResolver?.addWorkflowDependencyMarkerNode !== 'function') {
this.showNotification('Could not add Model Resolver opener node.', 'error');
return;
}
window.ModelResolver.addWorkflowDependencyMarkerNode();
});
}
if (metadataSizeAuditBtn) {
metadataSizeAuditBtn.addEventListener('click', () => {
runMetadataSizeAudit();
});
}
if (metadataSizeCollapseToggle) {
metadataSizeCollapseToggle.addEventListener('click', () => {
setMetadataSizeControlsCollapsed(!this.metadataSizeControlsCollapsed);
});
}
if (metadataBuildCollapseToggle) {
metadataBuildCollapseToggle.addEventListener('click', () => {
setMetadataBuildControlsCollapsed(!this.metadataBuildControlsCollapsed);
});
}
if (metadataBuildStartBtn) {
metadataBuildStartBtn.addEventListener('click', () => {
runMetadataBuild();
});
}
if (metadataBuildCancelBtn) {
metadataBuildCancelBtn.addEventListener('click', () => {
cancelMetadataBuild();
});
}
metadataBuildTabButtons.forEach((button) => {
button.addEventListener('click', () => {
setMetadataBuildTab(button.dataset.buildTab || 'progress');
});
});
if (metadataBuildResults) {
metadataBuildResults.addEventListener('click', (event) => {
const filterToggle = event.target?.closest?.('[data-metadata-history-filter-toggle]');
if (filterToggle) {
event.preventDefault();
event.stopPropagation();
setMetadataBuildHistoryFilterMenuOpen(!this.metadataBuildHistoryFilterMenuOpen);
return;
}
const filterOption = event.target?.closest?.('[data-metadata-history-filter-option]');
if (filterOption) {
event.preventDefault();
event.stopPropagation();
const nextFilter = filterOption.dataset.metadataHistoryFilterOption || 'all';
applyMetadataBuildHistoryFilter(nextFilter);
setMetadataBuildHistoryFilterMenuOpen(false);
return;
}
const showMoreButton = event.target?.closest?.('[data-metadata-history-show-more]');
if (showMoreButton) {
event.preventDefault();
event.stopPropagation();
this.metadataBuildHistoryVisibleLimit = Math.max(
metadataBuildHistoryPageSize,
Number(this.metadataBuildHistoryVisibleLimit || metadataBuildHistoryPageSize)
) + metadataBuildHistoryPageSize;
renderMetadataBuildResults(undefined);
}
});
}
this.contentElement.addEventListener('click', (event) => {
if (!this.metadataBuildHistoryFilterMenuOpen) return;
if (event.target?.closest?.('.mr-options-history-action-filter-wrap')) return;
setMetadataBuildHistoryFilterMenuOpen(false);
});
if (metadataBuildResults) {
metadataBuildResults.addEventListener('keydown', (event) => {
if (event.key !== 'Escape' || !this.metadataBuildHistoryFilterMenuOpen) return;
event.preventDefault();
setMetadataBuildHistoryFilterMenuOpen(false);
});
}
if (metadataBuildWorkerInput) {
metadataBuildWorkerInput.addEventListener('change', () => {
metadataBuildWorkerInput.dataset.userEdited = 'true';
const workerCount = normalizeMetadataBuildWorkerCount();
if (metadataBuildWorkersEl && !this.metadataBuildProgressId) {
metadataBuildWorkersEl.textContent = workerCount.toLocaleString();
}
});
}
if (metadataBuildModeSelect) {
metadataBuildModeSelect.addEventListener('change', () => {
metadataBuildModeSelect.dataset.userEdited = 'true';
updateMetadataBuildModeHint();
});
}
if (detectTemplatesBtn) {
detectTemplatesBtn.addEventListener('click', () => {
applyDetectedPathTemplates();
});
}
if (aria2CheckBtn) {
aria2CheckBtn.addEventListener('click', () => {
checkAria2Status({ useUnsavedPath: true });
});
}
if (aria2InstallBtn) {
aria2InstallBtn.addEventListener('click', () => {
installAria2();
});
}
if (aria2StopBtn) {
aria2StopBtn.addEventListener('click', () => {
if (aria2StopBtn.dataset.action === 'start') {
startAria2();
} else {
stopAria2();
}
});
}
if (aria2cPathInput) {
aria2cPathInput.addEventListener('input', () => {
renderAria2Summary({
backend: downloadBackendInput?.value || tokens.download_backend,
configured_path: aria2cPathInput.value
});
setAria2Status('');
});
}
if (downloadBackendInput) {
downloadBackendInput.addEventListener('change', () => {
const backend = this.normalizeDownloadBackend(downloadBackendInput.value);
syncAria2OptionsVisibility();
if (backend === 'aria2') {
checkAria2Status({ useUnsavedPath: true });
}
});
}
syncAria2OptionsVisibility();
if (this.normalizeDownloadBackend(tokens.download_backend) === 'aria2') {
checkAria2Status({ useUnsavedPath: false });
}
const credentialChecks = [
{
input: civitaiSessionInput,
button: civitaiSessionCheckBtn,
statusEl: civitaiSessionCheckStatus,
endpoint: '/model_resolver/civitai/session-token/check',
payloadKey: 'civitai_session_token',
missingText: 'Paste token first'
},
{
input: civitaiInput,
button: civitaiKeyCheckBtn,
statusEl: civitaiKeyCheckStatus,
endpoint: '/model_resolver/civitai/api-key/check',
payloadKey: 'civitai_key',
missingText: 'Paste API key first'
},
{
input: hfInput,
button: hfTokenCheckBtn,
statusEl: hfTokenCheckStatus,
endpoint: '/model_resolver/huggingface/token/check',
payloadKey: 'hf_token',
missingText: 'Paste token first'
},
{
input: braveInput,
button: braveKeyCheckBtn,
statusEl: braveKeyCheckStatus,
endpoint: '/model_resolver/brave/api-key/check',
payloadKey: 'brave_search_api_key',
missingText: 'Paste API key first'
}
];
credentialChecks.forEach((config) => {
if (!config.button) return;
config.button.addEventListener('click', () => {
checkCredential(config);
});
});
loadModelListStatus(false);
loadBaseModelsStatus(false);
loadHfIndexStatus();
if (saveBtn) {
saveBtn.addEventListener('click', async () => {
const civitaiCandidateLimitRaw = parseInt(civitaiLimitInput?.value || `${tokens.civitai_candidate_limit}`, 10);
const civitaiCandidateLimit = Number.isFinite(civitaiCandidateLimitRaw)
? Math.min(20, Math.max(1, civitaiCandidateLimitRaw))
: 5;
// Collect source-enabled flags
const sourceEnabled = {};
if (sourceEnabledInputs.length && !sourceEnabledInputs.some(input => input.checked)) {
const localInput = sourceEnabledInputs.find(input => input.dataset.source === 'local');
if (localInput) localInput.checked = true;
}
sourceEnabledInputs.forEach((input) => {
const key = input.dataset.storageKey;
if (key) {
sourceEnabled[key] = input.checked;
}
});
const downloadPathTemplates = {};
pathTemplateCategories.forEach(category => {
downloadPathTemplates[category.key] = this.normalizeDownloadPathValue(
getTemplateInputValue(category.key)
);
});
const baseModelPathMappings = collectBaseModelPathMappings();
const downloadBackend = this.normalizeDownloadBackend(downloadBackendInput?.value || tokens.download_backend);
const downloadPathMode = this.normalizeDownloadPathMode(downloadPathModeInput?.value || tokens.download_path_mode);
const defaultRootSettings = {};
defaultRootSelectInputs.forEach((select) => {
const settingKey = select.dataset.settingKey;
if (settingKey) {
defaultRootSettings[settingKey] = select.value || '';
}
});
const newSettings = {
civitai_key: civitaiInput?.value || '',
civitai_session_token: civitaiSessionInput?.value || '',
civitai_use_trpc_search: Boolean(civitaiUseTrpcSearchInput?.checked),
civitai_use_api_search: Boolean(civitaiUseApiSearchInput?.checked),
civitai_use_html_fallback: Boolean(civitaiUseHtmlFallbackInput?.checked),
civitai_candidate_limit: civitaiCandidateLimit,
hf_token: hfInput?.value || '',
hf_use_api_search: Boolean(hfUseApiSearchInput?.checked),
hf_use_comfy_org_fallback: Boolean(hfUseComfyOrgFallbackInput?.checked),
hf_use_brave_fallback: Boolean(hfUseBraveFallbackInput?.checked),
auto_fill_base_model: Boolean(autoFillBaseModelInput?.checked),
auto_fill_subfolder: Boolean(autoFillSubfolderInput?.checked),
auto_refresh_comfy_models_after_apply: Boolean(autoRefreshComfyModelsInput?.checked),
auto_open_on_missing: Boolean(autoOpenOnMissingInput?.checked),
workflow_hash_metadata_enabled: Boolean(workflowHashMetadataInput?.checked),
workflow_dependency_marker_enabled: Boolean(workflowDependencyMarkerInput?.checked),
download_backend: downloadBackend,
aria2c_path: aria2cPathInput?.value?.trim() || '',
aria2_auto_stop_daemon: Boolean(aria2AutoStopInput?.checked),
download_sound_enabled: Boolean(downloadSoundInput?.checked),
download_path_mode: downloadPathMode,
download_path_templates: downloadPathTemplates,
base_model_path_mappings: baseModelPathMappings,
...defaultRootSettings,
frontend_logs_enabled: Boolean(frontendLogsEnabledInput?.checked),
backend_logs_enabled: Boolean(backendLogsEnabledInput?.checked),
frontend_log_level: normalizeLogLevel(frontendLogLevelInput?.value || tokens.frontend_log_level),
backend_log_level: normalizeLogLevel(backendLogLevelInput?.value || tokens.backend_log_level),
brave_search_api_key: braveInput?.value || '',
search_source_enabled: sourceEnabled,
};
// 1. Write to safeStorage (fast local cache)
for (const opt of SETTINGS_MAP) {
const val = newSettings[opt.serverKey];
if (opt.type === 'boolean' || opt.type === 'frontendLogsEnabled' || opt.type === 'backendLogsEnabled') {
safeStorage.setItem(opt.localKey, val ? 'true' : 'false');
} else if (opt.type === 'json') {
safeStorage.setItem(opt.localKey, JSON.stringify(val));
} else {
safeStorage.setItem(opt.localKey, String(val ?? ''));
}
}
defaultRootSelectInputs.forEach((select) => {
const storageKey = select.dataset.storageKey;
if (storageKey) {
safeStorage.setItem(storageKey, select.value || '');
}
});
Object.entries(sourceEnabled).forEach(([key, val]) => {
safeStorage.setItem(key, val ? 'true' : 'false');
});
if (civitaiLimitInput) civitaiLimitInput.value = `${civitaiCandidateLimit}`;
this.applyFrontendLoggingPreference(newSettings.frontend_logs_enabled, newSettings.frontend_log_level);
// 2. Persist to server (survives new browsers / profiles)
try {
setStatus('Saving…', '');
await this.fetchJson('/model_resolver/settings', {
method: 'POST',
body: JSON.stringify(newSettings)
}, 'Save settings');
setStatus('Saved on this machine (all browsers).', 'is-saved');
this.showNotification('Options saved', 'success');
} catch (err) {
console.warn('Model Resolver: could not save settings to server, kept locally only.', err);
setStatus('Saved locally only (server write failed).', 'is-saved');
this.showNotification('Options saved locally only', 'warning');
}
this.downloadRootDirectories = null;
this.downloadSubfolders?.clear();
await this.clearSearchCaches();
});
}
},
normalizeDownloadBackend(value = '') {
const backend = String(value || '').trim().toLowerCase();
return backend === 'aria2' ? 'aria2' : 'python';
},
getStoredTokens() {
const tokens = {};
for (const opt of SETTINGS_MAP) {
const raw = safeStorage.getItem(opt.localKey);
if (opt.type === 'boolean') {
tokens[opt.serverKey] = raw === null ? opt.default : raw !== 'false';
} else if (opt.type === 'json') {
try {
tokens[opt.serverKey] = raw ? JSON.parse(raw) : opt.default;
} catch (_e) {
tokens[opt.serverKey] = opt.default;
}
} else if (opt.type === 'backend') {
tokens[opt.serverKey] = this.normalizeDownloadBackend(raw || opt.default);
} else if (opt.type === 'pathMode') {
tokens[opt.serverKey] = this.normalizeDownloadPathMode(raw || opt.default);
} else if (opt.type === 'frontendLogsEnabled') {
tokens[opt.serverKey] = raw === null ? (frontendLogger.enabled !== false) : raw !== 'false';
} else if (opt.type === 'backendLogsEnabled') {
tokens[opt.serverKey] = raw === null ? true : raw !== 'false';
} else if (opt.type === 'candidateLimit') {
const limit = parseInt(raw || String(opt.default), 10);
tokens[opt.serverKey] = Number.isFinite(limit) ? Math.min(20, Math.max(1, limit)) : opt.default;
} else {
tokens[opt.serverKey] = raw || opt.default;
}
}
tokens.search_source_enabled = this.getSearchSourceEnabledMap();
return {
...tokens,
...this.getDefaultRootSettings()
};
},
applyFrontendLoggingPreference(enabled = true, levelName = 'ERROR') {
frontendLogger.setEnabled(Boolean(enabled));
frontendLogger.setGlobalAndModuleLevel(frontendLogger.normalizeLevel(levelName));
},
/**
* Fetch settings saved on the server and sync them into localStorage.
* Call this once when the dialog initialises so every browser gets the
* same tokens without the user having to re-enter them.
*/
async loadSettingsFromServer() {
try {
const data = await this.fetchJson('/model_resolver/settings', { silent: true }, 'Load settings from server');
if (!data || typeof data !== 'object') {
const tokens = this.getStoredTokens();
this.applyFrontendLoggingPreference(tokens.frontend_logs_enabled, tokens.frontend_log_level);
return;
}
let settingsObj = data;
if (data.schema && Array.isArray(data.schema)) {
SETTINGS_MAP.length = 0;
SETTINGS_MAP.push(...data.schema);
settingsObj = data.settings || {};
}
for (const opt of SETTINGS_MAP) {
const serverValue = settingsObj[opt.serverKey];
if (serverValue === undefined) continue;
if (opt.type === 'boolean' || opt.type === 'frontendLogsEnabled' || opt.type === 'backendLogsEnabled') {
safeStorage.setItem(opt.localKey, serverValue ? 'true' : 'false');
} else if (opt.type === 'json') {
safeStorage.setItem(opt.localKey, JSON.stringify(serverValue || {}));
} else if (opt.type === 'backend') {
safeStorage.setItem(opt.localKey, this.normalizeDownloadBackend(serverValue));
} else if (opt.type === 'pathMode') {
safeStorage.setItem(opt.localKey, this.normalizeDownloadPathMode(serverValue));
} else {
if (serverValue !== null && serverValue !== '') {
safeStorage.setItem(opt.localKey, String(serverValue));
}
}
}
this.getDefaultRootCategoryDefinitions().forEach((item) => {
if (settingsObj[item.settingKey] !== undefined) {
safeStorage.setItem(item.storageKey, String(settingsObj[item.settingKey] || ''));
}
});
// Source-enabled flags stored as a nested object
if (settingsObj.search_source_enabled && typeof settingsObj.search_source_enabled === 'object') {
Object.entries(settingsObj.search_source_enabled).forEach(([key, val]) => {
if (key) safeStorage.setItem(key, val ? 'true' : 'false');
});
}
const tokens = this.getStoredTokens();
this.applyFrontendLoggingPreference(tokens.frontend_logs_enabled, tokens.frontend_log_level);
} catch (err) {
console.warn('Model Resolver: could not load settings from server, using localStorage only.', err);
const tokens = this.getStoredTokens();
this.applyFrontendLoggingPreference(tokens.frontend_logs_enabled, tokens.frontend_log_level);
}
}
};