${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.normalizeDownloadPathTemplate(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 resp = await api.fetchApi('/model_resolver/path-template-suggestions?force=1');
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
const data = await resp.json();
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) {
if (appliedCount > 0 && downloadPathModeInput) {
downloadPathModeInput.value = 'template';
}
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();
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 (clearAllCacheBtn) {
clearAllCacheBtn.addEventListener('click', () => {
clearAllCachesFromOptions();
});
}
if (detectTemplatesBtn) {
detectTemplatesBtn.addEventListener('click', () => {
applyDetectedPathTemplates();
});
}
if (civitaiSessionCheckBtn) {
civitaiSessionCheckBtn.addEventListener('click', () => {
checkCredential({
input: civitaiSessionInput,
button: civitaiSessionCheckBtn,
statusEl: civitaiSessionCheckStatus,
endpoint: '/model_resolver/civitai/session-token/check',
payloadKey: 'civitai_session_token',
missingText: 'Paste token first'
});
});
}
if (civitaiKeyCheckBtn) {
civitaiKeyCheckBtn.addEventListener('click', () => {
checkCredential({
input: civitaiInput,
button: civitaiKeyCheckBtn,
statusEl: civitaiKeyCheckStatus,
endpoint: '/model_resolver/civitai/api-key/check',
payloadKey: 'civitai_key',
missingText: 'Paste API key first'
});
});
}
if (hfTokenCheckBtn) {
hfTokenCheckBtn.addEventListener('click', () => {
checkCredential({
input: hfInput,
button: hfTokenCheckBtn,
statusEl: hfTokenCheckStatus,
endpoint: '/model_resolver/huggingface/token/check',
payloadKey: 'hf_token',
missingText: 'Paste token first'
});
});
}
if (braveKeyCheckBtn) {
braveKeyCheckBtn.addEventListener('click', () => {
checkCredential({
input: braveInput,
button: braveKeyCheckBtn,
statusEl: braveKeyCheckStatus,
endpoint: '/model_resolver/brave/api-key/check',
payloadKey: 'brave_search_api_key',
missingText: 'Paste API key first'
});
});
}
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.normalizeDownloadPathTemplate(
getTemplateInputValue(category.key)
);
});
const baseModelPathMappings = collectBaseModelPathMappings();
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_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),
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 localStorage (fast local cache)
localStorage.setItem('ModelResolver.civitaiApiKey', newSettings.civitai_key);
localStorage.setItem('ModelResolver.civitaiSessionToken', newSettings.civitai_session_token);
localStorage.setItem('ModelResolver.civitaiUseTrpcSearch', newSettings.civitai_use_trpc_search ? 'true' : 'false');
localStorage.setItem('ModelResolver.civitaiUseHtmlFallback', newSettings.civitai_use_html_fallback ? 'true' : 'false');
localStorage.setItem('ModelResolver.huggingFaceToken', newSettings.hf_token);
localStorage.setItem('ModelResolver.braveSearchApiKey', newSettings.brave_search_api_key);
localStorage.setItem('ModelResolver.hfUseApiSearch', newSettings.hf_use_api_search ? 'true' : 'false');
localStorage.setItem('ModelResolver.hfUseComfyOrgFallback', newSettings.hf_use_comfy_org_fallback ? 'true' : 'false');
localStorage.setItem('ModelResolver.hfUseBraveFallback', newSettings.hf_use_brave_fallback ? 'true' : 'false');
localStorage.setItem('ModelResolver.autoFillBaseModel', newSettings.auto_fill_base_model ? 'true' : 'false');
localStorage.setItem('ModelResolver.autoFillSubfolder', newSettings.auto_fill_subfolder ? 'true' : 'false');
localStorage.setItem('ModelResolver.downloadPathMode', newSettings.download_path_mode);
localStorage.setItem('ModelResolver.downloadPathTemplates', JSON.stringify(newSettings.download_path_templates));
localStorage.setItem('ModelResolver.baseModelPathMappings', JSON.stringify(newSettings.base_model_path_mappings));
defaultRootSelectInputs.forEach((select) => {
const storageKey = select.dataset.storageKey;
if (storageKey) {
localStorage.setItem(storageKey, select.value || '');
}
});
localStorage.setItem('ModelResolver.frontendLogsEnabled', newSettings.frontend_logs_enabled ? 'true' : 'false');
localStorage.setItem('ModelResolver.backendLogsEnabled', newSettings.backend_logs_enabled ? 'true' : 'false');
localStorage.setItem('ModelResolver.frontendLogLevel', newSettings.frontend_log_level);
localStorage.setItem('ModelResolver.backendLogLevel', newSettings.backend_log_level);
localStorage.setItem('ModelResolver.civitaiCandidateLimit', `${civitaiCandidateLimit}`);
Object.entries(sourceEnabled).forEach(([key, val]) => {
localStorage.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…', '');
const resp = await api.fetchApi('/model_resolver/settings', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(newSettings),
});
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
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();
});
}
}
};