`;
if (filename) {
html += `${filename}`;
}
@@ -317,35 +318,61 @@ class LinkerManagerDialog extends ComfyDialog {
html += ` [${sizeDisplay}]`;
}
if (secondaryText) {
- html += ` ${secondaryText}`;
+ html += ` ${secondaryText}`;
}
html += `
`;
return html;
}
- renderOnlineSearchResultCard({
- statusClass,
- title,
+ renderOnlineSearchResultCard({
+ statusClass,
+ title,
result,
filename,
secondaryText = '',
actionHtml = '',
topLineHtml = ''
}) {
- let html = ``;
+ let html = `
`;
+ return html;
+ }
+
+ renderProgressWithAction({
+ percent = 0,
+ leftText = '',
+ rightText = '',
+ actionClass = '',
+ actionText = '',
+ actionDataAttr = ''
+ } = {}) {
+ const safePercent = Math.max(0, Math.min(100, Number(percent) || 0));
+ const actionAttr = actionDataAttr ? ` ${actionDataAttr}` : '';
+ return `
+ `;
html += `${title}`;
if (topLineHtml) {
html += topLineHtml;
}
html += this.formatSearchResultMeta(result, { filename, secondaryText });
if (actionHtml) {
- html += `
`;
- return html;
- }
-
- buildContextMenuModelData(model = {}, fallbackName = '') {
+ html += `${actionHtml}
`;
+ html += `${actionHtml}
`;
}
- html += `
+
+ `;
+ }
+
+ buildContextMenuModelData(model = {}, fallbackName = '') {
const resolvedPath = model.path || model.resolved_path || '';
const filename = model.filename || fallbackName || resolvedPath.split(/[\/\\]/).pop() || '';
return {
@@ -397,19 +424,19 @@ class LinkerManagerDialog extends ComfyDialog {
if (perfectMatches.length > 0 && otherMatches.length > 0) {
const matchId = `more-matches-${missing.node_id}-${missing.widget_index}`;
- html += `
+
+
+
+
+
+
+ ${leftText}
+ ${rightText}
+
+ ${otherMatches.length} other match${otherMatches.length > 1 ? 'es' : ''} below 100%
`;
- html += ``;
- for (let mIdx = 0; mIdx < otherMatches.length; mIdx++) {
- const match = otherMatches[mIdx];
- const altBtnId = `resolve-alt-${missingIndex}-${missing.node_id}-${missing.widget_index}-${mIdx}`;
- const contextModel = this.buildContextMenuModelData(match.model || {}, match.filename || '');
- const modelData = encodeURIComponent(JSON.stringify(contextModel));
- html += `
`;
- html += this.getConfidenceBadge(match.confidence);
- html += `${match.filename || match.path?.split(/[/\\]/).pop()}`;
- html += ``;
- html += `
`;
- }
+ html += `${otherMatches.length} other match${otherMatches.length > 1 ? 'es' : ''} below 100%
`;
+ html += ``;
+ for (let mIdx = 0; mIdx < otherMatches.length; mIdx++) {
+ const match = otherMatches[mIdx];
+ const altBtnId = `resolve-alt-${missingIndex}-${missing.node_id}-${missing.widget_index}-${mIdx}`;
+ const contextModel = this.buildContextMenuModelData(match.model || {}, match.filename || '');
+ const modelData = encodeURIComponent(JSON.stringify(contextModel));
+ html += `
`;
}
} else if (missing.is_urn && !missing.civitai_info) {
@@ -692,7 +719,7 @@ class LinkerManagerDialog extends ComfyDialog {
`;
+ html += this.getConfidenceBadge(match.confidence);
+ html += `${match.filename || match.path?.split(/[/\\]/).pop()}`;
+ html += ``;
+ html += `
`;
+ }
html += `Loading...
-
+
@@ -719,7 +746,7 @@ class LinkerManagerDialog extends ComfyDialog {
Base Model ?
+
-
+
Clip Skip ?
-
+
Description ?
Trained Words ?
@@ -734,16 +761,16 @@ class LinkerManagerDialog extends ComfyDialog {
-
@@ -2158,26 +2169,20 @@ class LinkerManagerDialog extends ComfyDialog {
@@ -2271,21 +2276,9 @@ class LinkerManagerDialog extends ComfyDialog {
setActiveNav(targetId);
};
- const getVisibilityIcon = (visible) => visible
- ? `
-
- `
- : `
-
- `;
+ const getVisibilityIcon = (visible) => visible
+ ? getSvgIcon('eye')
+ : getSvgIcon('eyeOff');
const syncVisibilityToggle = (input, button) => {
if (!input || !button) return;
@@ -2446,7 +2439,7 @@ class LinkerManagerDialog extends ComfyDialog {
} catch (error) {
console.error('Model Linker: Error loading loaded models:', error);
if (this.contentElement) {
- this.contentElement.innerHTML = `
-
+
@@ -1115,23 +1142,13 @@ class LinkerManagerDialog extends ComfyDialog {
const civitaiLinkEl = dialog.querySelector('.ml-info-civitai-link');
if (civitaiLinkEl) {
if (data.url || data.version_url) {
- const url = data.version_url || data.url;
- civitaiLinkEl.innerHTML = `
-
-
- View on Civitai
-
- `;
+ const url = data.version_url || data.url;
+ civitaiLinkEl.innerHTML = `
+
+ ${getSvgIcon('civitai', 'currentColor', 'ml-info-civitai-logo')}
+ View on Civitai
+
+ `;
} else {
const searchName = data.model_name || data.modelName || 'Unknown';
civitaiLinkEl.innerHTML = `
@@ -2095,26 +2112,20 @@ class LinkerManagerDialog extends ComfyDialog {
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
Error: ${error.message}
`; + this.contentElement.innerHTML = `Error: ${error.message}
`; } } } @@ -2535,32 +2528,27 @@ class LinkerManagerDialog extends ComfyDialog {${total} Model${total > 1 ? 's' : ''} in Workflow
LoraManager / LoraLoaderV2 nodes distinguish active/inactive
-
-
-
-
-
-
-
-
- `;
+
+
+
+
+
+
+
+
+ `;
for (const [category, modelsObj] of Object.entries(byCategory)) {
const displayName = categoryDisplayNames[category] || category;
const hasActive = modelsObj.active.length > 0;
const hasInactive = modelsObj.inactive.length > 0;
- html += `
`;
-
- // Add category header
- html += `
- ${displayName.toUpperCase()}
-
`;
+ html += ``;
+
+ // Add category header
+ html += `
+ ${displayName.toUpperCase()}
+
`;
if (hasActive) {
const activeStr = modelsObj.active.map(m => {
@@ -2570,12 +2558,12 @@ class LinkerManagerDialog extends ComfyDialog {
return `<${displayName}:${name}:${strength}>`;
}).join(' ');
- html += `
-
- ● ACTIVE
-
-
- `;
+ html += `
+
+ ● ACTIVE
+
+
+ `;
for (const model of modelsObj.active) {
const fullName = model.name || model.original_path?.split(/[\/\\]/).pop() || 'Unknown';
@@ -2596,11 +2584,11 @@ class LinkerManagerDialog extends ComfyDialog {
}).join(' ');
html += `
-
`;
- html += '
- ○ INACTIVE
-
-
- `;
+
+ ○ INACTIVE
+
+
+ `;
for (const model of modelsObj.inactive) {
const fullName = model.name || model.original_path?.split(/[\/\\]/).pop() || 'Unknown';
@@ -2618,13 +2606,13 @@ class LinkerManagerDialog extends ComfyDialog {
const copySectionId = 'ml-copy-' + Date.now();
html += `
-
-
+ Copy all:
-
-
- ${allString}
-
-
+
`;
container.innerHTML = html;
@@ -3264,7 +3252,7 @@ class LinkerManagerDialog extends ComfyDialog {
this._analysisProgressToken = null;
console.error('Model Linker: Error loading workflow data:', error);
if (this.contentElement) {
- this.contentElement.innerHTML = `Copy all:
+
+
+ ${allString}
+
+ Error: ${error.message}
`; + this.contentElement.innerHTML = `Error: ${error.message}
`; } } } @@ -3439,21 +3427,14 @@ class LinkerManagerDialog extends ComfyDialog { // Show that download is in progress newProgressDiv.style.display = 'block'; - newProgressDiv.innerHTML = ` -
-
- `;
+ newProgressDiv.innerHTML = this.renderProgressWithAction({
+ percent: 0,
+ leftText: 'Downloading...',
+ rightText: '',
+ actionClass: 'cancel-download-btn ml-btn ml-btn-danger ml-btn-sm',
+ actionText: 'Cancel',
+ actionDataAttr: `data-download-id="${downloadId}"`
+ });
// Attach cancel handler
const cancelBtn = newProgressDiv.querySelector('.cancel-download-btn');
@@ -3522,7 +3503,7 @@ class LinkerManagerDialog extends ComfyDialog {
-
-
-
-
-
-
- Downloading...
-
- ';
+ html += '
`; // End columns
@@ -4305,25 +4286,17 @@ class LinkerManagerDialog extends ComfyDialog {
downloadBtn.disabled = true;
downloadBtn.textContent = 'Starting...';
}
- if (progressDiv) {
- progressDiv.style.display = 'block';
- // Show progress bar with cancel button immediately
- progressDiv.innerHTML = `
- ';
// Skip rendering if active tab is not "missing"
if (this.activeTab !== 'missing') {
@@ -3872,7 +3853,7 @@ class LinkerManagerDialog extends ComfyDialog {
}
// Progress container (for downloads)
- html += ``;
+ html += ``;
html += `
`; // End right column
html += `
-
- `;
- }
+ if (progressDiv) {
+ progressDiv.style.display = 'block';
+ // Show progress bar with cancel button immediately
+ progressDiv.innerHTML = this.renderProgressWithAction({
+ percent: 0,
+ leftText: 'Connecting...',
+ rightText: '',
+ actionClass: 'cancel-download-btn-pending ml-btn ml-btn-danger ml-btn-sm',
+ actionText: 'Cancel'
+ });
+ }
// Start download
const response = await api.fetchApi('/model_linker/download', {
@@ -4398,24 +4371,16 @@ class LinkerManagerDialog extends ComfyDialog {
const total = this.formatBytes(progress.total_size || 0);
const speed = progress.speed ? this.formatBytes(progress.speed) + '/s' : '';
- if (progressDiv) {
- progressDiv.innerHTML = `
-
-
-
-
-
-
-
- Connecting...
-
-
-
- `;
- // Attach cancel handler
+ if (progressDiv) {
+ progressDiv.innerHTML = this.renderProgressWithAction({
+ percent,
+ leftText: `${downloaded} / ${total} (${percent}%)`,
+ rightText: speed,
+ actionClass: 'cancel-download-btn ml-btn ml-btn-danger ml-btn-sm',
+ actionText: 'Cancel',
+ actionDataAttr: `data-download-id="${downloadId}"`
+ });
+ // Attach cancel handler
const cancelBtn = progressDiv.querySelector('.cancel-download-btn');
if (cancelBtn && !cancelBtn._hasListener) {
cancelBtn._hasListener = true;
@@ -4565,10 +4530,10 @@ class LinkerManagerDialog extends ComfyDialog {
searchBtn.disabled = true;
searchBtn.innerHTML = `${this.getSearchIconHtml()} Searching ${selectedSourceLabel}...`;
}
- if (resultsDiv) {
- resultsDiv.style.display = 'block';
- resultsDiv.innerHTML = `Searching ${selectedSourceLabel}...`;
- }
+ if (resultsDiv) {
+ resultsDiv.style.display = 'block';
+ resultsDiv.innerHTML = `Searching ${selectedSourceLabel}...`;
+ }
// For URNs, include model_id and version_id for direct download
const tokens = this.getStoredTokens();
@@ -4774,7 +4739,7 @@ class LinkerManagerDialog extends ComfyDialog {
return;
}
- let html = '
-
-
-
-
-
-
- ${downloaded} / ${total} (${percent}%)
- ${speed}
-
- ';
+ let html = '
';
if (state?.lastAttemptFound === false) {
const searchedLabel = (state.lastAttemptSources || []).map(source => this.getSearchSourceLabel(source)).join(', ');
@@ -4851,8 +4816,8 @@ class LinkerManagerDialog extends ComfyDialog {
const downloadFilename = missing.civitai_info?.expected_filename || civitaiResult.filename || civitaiResult.name;
// Build display name with version if available
const modelName = missing.civitai_info?.version_name ? `${missing.civitai_info.model_name} v${missing.civitai_info.version_name}` : (civitaiResult.name || 'Model');
- const topLineHtml = `
`;
+}
+
+/**
+ * Returns inline SVG markup by icon name.
+ * @param {string} name - Icon identifier
+ * @param {string} color - Stroke color placeholder value
+ * @param {string} className - Optional class name for the svg element
+ * @returns {string} SVG markup or empty string
+ */
+export function getSvgIcon(name, color = 'currentColor', className = '') {
+ const template = SVG_ICONS[name];
+ if (!template) return '';
+
+ let svg = template.replaceAll('{color}', color);
+ if (className) {
+ svg = svg.replace('
${civitaiResult.type || ''}
`;
- const actionHtml = ``;
+ const topLineHtml = ` ${civitaiResult.type || ''}
`;
+ const actionHtml = ``;
html += this.renderOnlineSearchResultCard({
statusClass: 'ml-status-warning',
title: 'Found on CivitAI',
@@ -4892,25 +4857,17 @@ class LinkerManagerDialog extends ComfyDialog {
btn.disabled = true;
btn.textContent = 'Starting...';
- if (progressDiv) {
- progressDiv.style.display = 'block';
- // Show progress bar with cancel button immediately
- progressDiv.innerHTML = `
-
-
- `;
- }
+ if (progressDiv) {
+ progressDiv.style.display = 'block';
+ // Show progress bar with cancel button immediately
+ progressDiv.innerHTML = this.renderProgressWithAction({
+ percent: 0,
+ leftText: 'Connecting...',
+ rightText: '',
+ actionClass: 'cancel-download-btn-pending ml-btn ml-btn-danger ml-btn-sm',
+ actionText: 'Cancel'
+ });
+ }
const response = await api.fetchApi('/model_linker/download', {
method: 'POST',
@@ -5588,10 +5545,20 @@ app.registerExtension({
setup: modelLinker.setup
});
-// Global helper functions for inline onclick handlers
-window.MLFilterSwitch = function(filter) {
- const filterBtn = document.getElementById('filter-' + filter);
- if (!filterBtn) return;
+// Global helper functions for inline onclick handlers
+window.MLToggleHidden = function(id, trigger, collapsedText, expandedText) {
+ const element = document.getElementById(id);
+ if (!element) return;
+
+ const isHidden = element.classList.toggle('ml-hidden');
+ if (trigger) {
+ trigger.textContent = isHidden ? collapsedText : expandedText;
+ }
+};
+
+window.MLFilterSwitch = function(filter) {
+ const filterBtn = document.getElementById('filter-' + filter);
+ if (!filterBtn) return;
// Update button states
document.querySelectorAll('.ml-btn-filter').forEach(b => b.classList.remove('active'));
diff --git a/web/utils/IconUtils.js b/web/utils/IconUtils.js
new file mode 100644
index 0000000..f8eb410
--- /dev/null
+++ b/web/utils/IconUtils.js
@@ -0,0 +1,61 @@
+// IconUtils.js - Utility for loading SVG icons
+import { app } from "../../../scripts/app.js";
+
+const SVG_ICONS = {
+ search: ``,
+ locate: ``,
+ eye: ``,
+ eyeOff: ``,
+ civitai: ``
+};
+
+/**
+ * Generates HTML string for an icon with standardized styling
+ * @param {Image} icon - The icon Image object (or null)
+ * @param {string} fallback - Fallback text/emoji if icon is not available (default: '')
+ * @param {number} size - Size of the icon in pixels (default: 14)
+ * @param {string} extraStyles - Additional CSS styles (default: 'vertical-align: middle;')
+ * @returns {string} HTML string for the icon or fallback
+ */
+export function getIconHtml(icon, fallback = '', size = 14, extraStyles = 'vertical-align: middle;') {
+ if (!icon) return fallback;
+ return `
-
-
-
-
-
-
- Connecting...
-
-