';
for (let i = 0; i < list.length; i++) {
const r = list[i];
const label = (r.resolved_model?.relative_path || r.resolved_model?.filename || r.resolved_path || '').toString();
const nodeLabel = r.node_label || r.node_type || (r.subgraph_id ? 'Subgraph' : 'Node');
const orig = (r.original_path || '').toString();
const rmId = `queue-remove-${i}`;
- html += `
`;
- html += `
${nodeLabel} #${r.node_id}
`;
- html += `
Original: ${orig}
`;
- html += `
Selected: ${label}
`;
- html += `
Remove
`;
+ html += `
`;
+ html += `
${nodeLabel} #${r.node_id}
`;
+ html += `
Original: ${orig}
`;
+ html += `
Selected: ${label}
`;
+ html += `
Remove
`;
}
- html += '
';
- this.queueList.innerHTML = html;
-
- // Wire remove buttons
- for (let i = 0; i < list.length; i++) {
- const rmId = `queue-remove-${i}`;
- const btn = this.queueList.querySelector(`#${rmId}`);
- if (btn) {
- btn.addEventListener('click', () => this.removeQueuedByIndex(i));
- }
- }
- }
-
- // Remove queued by index
- removeQueuedByIndex(i) {
- const list = Array.isArray(this.pendingResolutions) ? this.pendingResolutions : [];
- if (i < 0 || i >= list.length) return;
- const r = list[i];
- // Remove
- this.pendingResolutions.splice(i, 1);
- this.rebuildPendingIndex();
- // Update per-item selected bar
- const m = { node_id: r.node_id, widget_index: r.widget_index, subgraph_id: r.subgraph_id, is_top_level: r.is_top_level };
- this.updateSelectedBarForMissing?.(m);
- this.updateApplyPendingButton?.();
- this.updateQueuePanel();
- }
-
- // Clear all queued selections
- clearAllQueued() {
- this.pendingResolutions = [];
- this.pendingIndex = new Map();
- this.updateApplyPendingButton?.();
- this.updateQueuePanel();
- try {
- document.querySelectorAll('.model-linker-selected').forEach(el => { el.style.display = 'none'; el.innerHTML = ''; });
- } catch (e) { /* ignore */ }
- }
-
- // Update selected bar for a specific missing model slot
- updateSelectedBarForMissing(missing) {
- if (!missing) return;
- const nodeId = missing.node_id;
- const widgetIndex = missing.widget_index;
- const subgraphId = missing.subgraph_id || '';
- const isTopLevel = missing.is_top_level !== false;
- const key = `${nodeId}:${widgetIndex}:${subgraphId}:${isTopLevel ? 'T' : 'F'}`;
-
- const selectedBar = document.getElementById(`selected-bar-${nodeId}-${widgetIndex}`);
- if (!selectedBar) return;
-
- // Find selection for this slot
- let selection = null;
- let selectionIdx = -1;
- if (this.pendingIndex.has(key)) {
- const idx = this.pendingIndex.get(key);
- if (idx >= 0 && idx < this.pendingResolutions.length) {
- selection = this.pendingResolutions[idx];
- selectionIdx = idx;
- }
- }
-
- if (!selection) {
- selectedBar.style.display = 'none';
- selectedBar.innerHTML = '';
- return;
- }
-
- // Build selected bar content
- const label = selection.resolved_model?.relative_path || selection.resolved_model?.filename || selection.resolved_path || '';
- const resolveBtnId = `selected-remove-${nodeId}-${widgetIndex}`;
-
- selectedBar.innerHTML = `
`;
- selectedBar.innerHTML += `✓ Selected: `;
- selectedBar.innerHTML += `${label}`;
- selectedBar.innerHTML += `Remove `;
+ html += '
';
+ this.queueList.innerHTML = html;
+
+ // Wire remove buttons
+ for (let i = 0; i < list.length; i++) {
+ const rmId = `queue-remove-${i}`;
+ const btn = this.queueList.querySelector(`#${rmId}`);
+ if (btn) {
+ btn.addEventListener('click', () => this.removeQueuedByIndex(i));
+ }
+ }
+ }
+
+ // Remove queued by index
+ removeQueuedByIndex(i) {
+ const list = Array.isArray(this.pendingResolutions) ? this.pendingResolutions : [];
+ if (i < 0 || i >= list.length) return;
+ const r = list[i];
+ // Remove
+ this.pendingResolutions.splice(i, 1);
+ this.rebuildPendingIndex();
+ // Update per-item selected bar
+ const m = { node_id: r.node_id, widget_index: r.widget_index, subgraph_id: r.subgraph_id, is_top_level: r.is_top_level };
+ this.updateSelectedBarForMissing?.(m);
+ this.updateApplyPendingButton?.();
+ this.updateQueuePanel();
+ }
+
+ // Clear all queued selections
+ clearAllQueued() {
+ this.pendingResolutions = [];
+ this.pendingIndex = new Map();
+ this.updateApplyPendingButton?.();
+ this.updateQueuePanel();
+ try {
+ document.querySelectorAll('.model-linker-selected').forEach(el => { el.style.display = 'none'; el.innerHTML = ''; });
+ } catch (e) { /* ignore */ }
+ }
+
+ // Update selected bar for a specific missing model slot
+ updateSelectedBarForMissing(missing) {
+ if (!missing) return;
+ const nodeId = missing.node_id;
+ const widgetIndex = missing.widget_index;
+ const subgraphId = missing.subgraph_id || '';
+ const isTopLevel = missing.is_top_level !== false;
+ const key = `${nodeId}:${widgetIndex}:${subgraphId}:${isTopLevel ? 'T' : 'F'}`;
+
+ const selectedBar = document.getElementById(`selected-bar-${nodeId}-${widgetIndex}`);
+ if (!selectedBar) return;
+
+ // Find selection for this slot
+ let selection = null;
+ let selectionIdx = -1;
+ if (this.pendingIndex.has(key)) {
+ const idx = this.pendingIndex.get(key);
+ if (idx >= 0 && idx < this.pendingResolutions.length) {
+ selection = this.pendingResolutions[idx];
+ selectionIdx = idx;
+ }
+ }
+
+ if (!selection) {
+ selectedBar.style.display = 'none';
+ selectedBar.innerHTML = '';
+ return;
+ }
+
+ // Build selected bar content
+ const label = selection.resolved_model?.relative_path || selection.resolved_model?.filename || selection.resolved_path || '';
+ const resolveBtnId = `selected-remove-${nodeId}-${widgetIndex}`;
+
+ selectedBar.innerHTML = `
`;
+ selectedBar.innerHTML += `✓ Selected: `;
+ selectedBar.innerHTML += `${label}`;
+ selectedBar.innerHTML += `Remove `;
selectedBar.innerHTML += `
`;
- selectedBar.style.display = 'block';
-
- // Wire remove button - use key-based removal
- const removeBtn = selectedBar.querySelector(`#${resolveBtnId}`);
- if (removeBtn) {
- removeBtn.addEventListener('click', () => {
- this.removeQueuedByKey(key);
- });
- }
- }
-
- // Remove queued by key (more reliable than index)
- removeQueuedByKey(key) {
- if (!key || !this.pendingIndex.has(key)) return;
-
- // Find and remove the item with this key
- const idx = this.pendingIndex.get(key);
- if (idx >= 0 && idx < this.pendingResolutions.length) {
- const r = this.pendingResolutions[idx];
- // Update the selected bar before removing
- const m = { node_id: r.node_id, widget_index: r.widget_index, subgraph_id: r.subgraph_id, is_top_level: r.is_top_level };
-
- // Remove from array
- this.pendingResolutions.splice(idx, 1);
- this.rebuildPendingIndex();
- this.updateSelectedBarForMissing(m);
- this.updateApplyPendingButton?.();
- this.updateQueuePanel();
- }
- }
-
- // Rebuild pending index after modification
- rebuildPendingIndex() {
- this.pendingIndex = new Map();
- for (let i = 0; i < this.pendingResolutions.length; i++) {
- const r = this.pendingResolutions[i];
- const key = `${r.node_id}:${r.widget_index}:${r.subgraph_id || ''}:${r.is_top_level ? 'T' : 'F'}`;
- this.pendingIndex.set(key, i);
- }
- }
-
- // Collapse/expand queue panel
- toggleQueueCollapsed() {
- this.setQueueCollapsed(!this.queueCollapsed);
- }
-
- setQueueCollapsed(collapsed) {
- this.queueCollapsed = !!collapsed;
- if (!this.queueElement || !this.splitterElement) return;
- if (this.queueCollapsed) {
- this.queueElement.style.display = 'none';
- this.splitterElement.style.display = 'none';
- try { localStorage.setItem('model_linker_queue_collapsed', '1'); } catch (e) { }
- } else {
- this.queueElement.style.display = '';
- this.splitterElement.style.display = '';
- try { localStorage.setItem('model_linker_queue_collapsed', '0'); } catch (e) { }
- }
- this.updateQueuePanel();
- this.updateQueueToggleIcon();
- }
-
- updateQueueToggleIcon() {
- if (!this.queueToggleIcon) return;
- if (this.queueCollapsed) {
- this.queueToggleIcon.textContent = '⮞';
- this.queueToggleIcon.title = 'Expand queue';
- } else {
- this.queueToggleIcon.textContent = '⮜';
- this.queueToggleIcon.title = 'Collapse queue';
- }
- }
-
- // Begin split drag for resizable panels
- startSplitDrag(e) {
- try {
- if (!this.queueElement) return;
- const rect = this.queueElement.getBoundingClientRect();
- const body = document.getElementById('model-linker-body');
- const bodyRect = body ? body.getBoundingClientRect() : { width: window.innerWidth };
- this._splitDragging = true;
- this._splitStart = {
- x: e.clientX,
- startWidth: rect.width,
- containerWidth: bodyRect.width
- };
- this._prevUserSelect = document.body.style.userSelect;
- document.body.style.userSelect = 'none';
- this._onSplitMove = (ev) => this.onSplitDrag(ev);
- this._onSplitUp = () => this.endSplitDrag();
- document.addEventListener('mousemove', this._onSplitMove);
- document.addEventListener('mouseup', this._onSplitUp, { once: true });
- } catch (err) { /* ignore */ }
- }
-
- onSplitDrag(e) {
- if (!this._splitDragging || !this._splitStart || !this.queueElement) return;
- const dx = e.clientX - this._splitStart.x;
- let newW = this._splitStart.startWidth - dx;
- const minW = 240;
- const maxW = Math.max(minW, Math.floor(this._splitStart.containerWidth - 360));
- if (newW < minW) newW = minW;
- if (newW > maxW) newW = maxW;
- this.queueElement.style.width = `${Math.round(newW)}px`;
- }
-
- endSplitDrag() {
- if (!this._splitDragging) return;
- this._splitDragging = false;
- document.removeEventListener('mousemove', this._onSplitMove);
- try {
- const rect = this.queueElement.getBoundingClientRect();
- localStorage.setItem('model_linker_split_w', String(Math.round(rect.width)));
- } catch (e) { }
- try { document.body.style.userSelect = this._prevUserSelect || ''; } catch (e) { }
- }
-
- /**
- * Queue a resolution for later batch apply
- */
- queueResolution(missing, resolvedModel) {
- if (!resolvedModel) {
- this.showNotification('No model selected', 'error');
- return;
- }
-
- const resolution = {
- node_id: missing.node_id,
- widget_index: missing.widget_index,
- resolved_path: resolvedModel.path,
- category: missing.category,
- resolved_model: resolvedModel,
- original_path: missing.original_path,
- subgraph_id: missing.subgraph_id,
- is_top_level: missing.is_top_level,
- node_type: missing.node_type,
- node_label: missing.subgraph_name || missing.node_type
- };
-
- const key = `${resolution.node_id}:${resolution.widget_index}:${resolution.subgraph_id || ''}:${resolution.is_top_level ? 'T' : 'F'}`;
- if (this.pendingIndex.has(key)) {
- // replace existing selection for this slot
- const idx = this.pendingIndex.get(key);
- this.pendingResolutions[idx] = resolution;
- } else {
- this.pendingIndex.set(key, this.pendingResolutions.length);
- this.pendingResolutions.push(resolution);
- }
-
- // Update selected bar UI
- this.updateSelectedBarForMissing?.(missing);
- this.updateQueuePanel();
- this.updateApplyPendingButton();
- }
-
- /**
- * Apply all pending resolutions in batch
- */
- async applyPendingResolutions() {
- const list = this.pendingResolutions || [];
- if (!list.length) {
- this.showNotification('No selections queued', 'error');
- return;
- }
-
- try {
- const workflow = this.getCurrentWorkflow();
- if (!workflow) {
- this.showNotification('No workflow loaded', 'error');
- return;
- }
-
- const response = await api.fetchApi('/model_linker/resolve', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ workflow, resolutions: list })
- });
-
- if (!response.ok) throw new Error(`API error: ${response.status}`);
-
- const data = await response.json();
- if (data.success) {
- await this.updateWorkflowInComfyUI(data.workflow);
- this.showNotification(`✓ Linked ${list.length} selection${list.length>1?'s':''}`, 'success');
- // Clear queue and refresh analysis
- this.pendingResolutions = [];
- this.pendingIndex = new Map();
- this.updateApplyPendingButton();
- this.updateQueuePanel();
- await this.loadWorkflowData(data.workflow);
- } else {
- this.showNotification('Failed to apply selections: ' + (data.error || 'Unknown error'), 'error');
- }
- } catch (e) {
- console.error('Model Linker: applyPendingResolutions error', e);
- this.showNotification('Error applying selections: ' + e.message, 'error');
- }
- }
-
- updateApplyPendingButton() {
- if (!this.applyPendingBtn) return;
- const count = this.pendingResolutions?.length || 0;
- this.applyPendingBtn.textContent = `Apply Selected (${count})`;
- this.applyPendingBtn.disabled = count === 0;
- }
-
- createFooter() {
- // Store reference to download all button so we can update its text
- this.downloadAllButton = $el("button.ml-btn.ml-btn-download.ml-footer-btn", {
- onclick: () => this.handleDownloadAllClick()
- }, [
- $el("span.ml-btn-icon", { textContent: "☁" }),
- $el("span", { textContent: " Download All Missing" })
- ]);
-
- // Auto-resolve button (secondary style)
- this.autoResolveButton = $el("button.ml-btn.ml-btn-secondary.ml-footer-btn", {
- onclick: () => this.autoResolve100Percent()
- }, [
- $el("span.ml-btn-icon", { textContent: "🔗" }),
- $el("span", { textContent: " Auto-Link 100%" })
- ]);
-
- // Apply pending resolutions button
- this.applyPendingBtn = $el("button.ml-btn.ml-btn-primary.ml-footer-btn", {
- id: "apply-pending-resolutions",
- textContent: "Apply Selected (0)",
- onclick: () => this.applyPendingResolutions()
- });
-
- return $el("div.ml-footer", {
- style: {
- position: "sticky",
- bottom: "0",
- backgroundColor: "var(--ml-bg, #222)",
- backdropFilter: "blur(8px)",
- WebkitBackdropFilter: "blur(8px)"
- }
- }, [
+ selectedBar.style.display = 'block';
+
+ // Wire remove button - use key-based removal
+ const removeBtn = selectedBar.querySelector(`#${resolveBtnId}`);
+ if (removeBtn) {
+ removeBtn.addEventListener('click', () => {
+ this.removeQueuedByKey(key);
+ });
+ }
+ }
+
+ // Remove queued by key (more reliable than index)
+ removeQueuedByKey(key) {
+ if (!key || !this.pendingIndex.has(key)) return;
+
+ // Find and remove the item with this key
+ const idx = this.pendingIndex.get(key);
+ if (idx >= 0 && idx < this.pendingResolutions.length) {
+ const r = this.pendingResolutions[idx];
+ // Update the selected bar before removing
+ const m = { node_id: r.node_id, widget_index: r.widget_index, subgraph_id: r.subgraph_id, is_top_level: r.is_top_level };
+
+ // Remove from array
+ this.pendingResolutions.splice(idx, 1);
+ this.rebuildPendingIndex();
+ this.updateSelectedBarForMissing(m);
+ this.updateApplyPendingButton?.();
+ this.updateQueuePanel();
+ }
+ }
+
+ // Rebuild pending index after modification
+ rebuildPendingIndex() {
+ this.pendingIndex = new Map();
+ for (let i = 0; i < this.pendingResolutions.length; i++) {
+ const r = this.pendingResolutions[i];
+ const key = `${r.node_id}:${r.widget_index}:${r.subgraph_id || ''}:${r.is_top_level ? 'T' : 'F'}`;
+ this.pendingIndex.set(key, i);
+ }
+ }
+
+ // Collapse/expand queue panel
+ toggleQueueCollapsed() {
+ this.setQueueCollapsed(!this.queueCollapsed);
+ }
+
+ setQueueCollapsed(collapsed) {
+ this.queueCollapsed = !!collapsed;
+ if (!this.queueElement || !this.splitterElement) return;
+ if (this.queueCollapsed) {
+ this.queueElement.style.display = 'none';
+ this.splitterElement.style.display = 'none';
+ try { localStorage.setItem('model_linker_queue_collapsed', '1'); } catch (e) { }
+ } else {
+ this.queueElement.style.display = '';
+ this.splitterElement.style.display = '';
+ try { localStorage.setItem('model_linker_queue_collapsed', '0'); } catch (e) { }
+ }
+ this.updateQueuePanel();
+ this.updateQueueToggleIcon();
+ }
+
+ updateQueueToggleIcon() {
+ if (!this.queueToggleIcon) return;
+ if (this.queueCollapsed) {
+ this.queueToggleIcon.textContent = '⮞';
+ this.queueToggleIcon.title = 'Expand queue';
+ } else {
+ this.queueToggleIcon.textContent = '⮜';
+ this.queueToggleIcon.title = 'Collapse queue';
+ }
+ }
+
+ // Begin split drag for resizable panels
+ startSplitDrag(e) {
+ try {
+ if (!this.queueElement) return;
+ const rect = this.queueElement.getBoundingClientRect();
+ const body = document.getElementById('model-linker-body');
+ const bodyRect = body ? body.getBoundingClientRect() : { width: window.innerWidth };
+ this._splitDragging = true;
+ this._splitStart = {
+ x: e.clientX,
+ startWidth: rect.width,
+ containerWidth: bodyRect.width
+ };
+ this._prevUserSelect = document.body.style.userSelect;
+ document.body.style.userSelect = 'none';
+ this._onSplitMove = (ev) => this.onSplitDrag(ev);
+ this._onSplitUp = () => this.endSplitDrag();
+ document.addEventListener('mousemove', this._onSplitMove);
+ document.addEventListener('mouseup', this._onSplitUp, { once: true });
+ } catch (err) { /* ignore */ }
+ }
+
+ onSplitDrag(e) {
+ if (!this._splitDragging || !this._splitStart || !this.queueElement) return;
+ const dx = e.clientX - this._splitStart.x;
+ let newW = this._splitStart.startWidth - dx;
+ const minW = 240;
+ const maxW = Math.max(minW, Math.floor(this._splitStart.containerWidth - 360));
+ if (newW < minW) newW = minW;
+ if (newW > maxW) newW = maxW;
+ this.queueElement.style.width = `${Math.round(newW)}px`;
+ }
+
+ endSplitDrag() {
+ if (!this._splitDragging) return;
+ this._splitDragging = false;
+ document.removeEventListener('mousemove', this._onSplitMove);
+ try {
+ const rect = this.queueElement.getBoundingClientRect();
+ localStorage.setItem('model_linker_split_w', String(Math.round(rect.width)));
+ } catch (e) { }
+ try { document.body.style.userSelect = this._prevUserSelect || ''; } catch (e) { }
+ }
+
+ /**
+ * Queue a resolution for later batch apply
+ */
+ queueResolution(missing, resolvedModel) {
+ if (!resolvedModel) {
+ this.showNotification('No model selected', 'error');
+ return;
+ }
+
+ const resolution = {
+ node_id: missing.node_id,
+ widget_index: missing.widget_index,
+ resolved_path: resolvedModel.path,
+ category: missing.category,
+ resolved_model: resolvedModel,
+ original_path: missing.original_path,
+ subgraph_id: missing.subgraph_id,
+ is_top_level: missing.is_top_level,
+ node_type: missing.node_type,
+ node_label: missing.subgraph_name || missing.node_type
+ };
+
+ const key = `${resolution.node_id}:${resolution.widget_index}:${resolution.subgraph_id || ''}:${resolution.is_top_level ? 'T' : 'F'}`;
+ if (this.pendingIndex.has(key)) {
+ // replace existing selection for this slot
+ const idx = this.pendingIndex.get(key);
+ this.pendingResolutions[idx] = resolution;
+ } else {
+ this.pendingIndex.set(key, this.pendingResolutions.length);
+ this.pendingResolutions.push(resolution);
+ }
+
+ // Update selected bar UI
+ this.updateSelectedBarForMissing?.(missing);
+ this.updateQueuePanel();
+ this.updateApplyPendingButton();
+ }
+
+ /**
+ * Apply all pending resolutions in batch
+ */
+ async applyPendingResolutions() {
+ const list = this.pendingResolutions || [];
+ if (!list.length) {
+ this.showNotification('No selections queued', 'error');
+ return;
+ }
+
+ try {
+ const workflow = this.getCurrentWorkflow();
+ if (!workflow) {
+ this.showNotification('No workflow loaded', 'error');
+ return;
+ }
+
+ const response = await api.fetchApi('/model_linker/resolve', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ workflow, resolutions: list })
+ });
+
+ if (!response.ok) throw new Error(`API error: ${response.status}`);
+
+ const data = await response.json();
+ if (data.success) {
+ await this.updateWorkflowInComfyUI(data.workflow);
+ this.showNotification(`✓ Linked ${list.length} selection${list.length>1?'s':''}`, 'success');
+ // Clear queue and refresh analysis
+ this.pendingResolutions = [];
+ this.pendingIndex = new Map();
+ this.updateApplyPendingButton();
+ this.updateQueuePanel();
+ await this.loadWorkflowData(data.workflow);
+ } else {
+ this.showNotification('Failed to apply selections: ' + (data.error || 'Unknown error'), 'error');
+ }
+ } catch (e) {
+ console.error('Model Linker: applyPendingResolutions error', e);
+ this.showNotification('Error applying selections: ' + e.message, 'error');
+ }
+ }
+
+ updateApplyPendingButton() {
+ if (!this.applyPendingBtn) return;
+ const count = this.pendingResolutions?.length || 0;
+ this.applyPendingBtn.textContent = `Apply Selected (${count})`;
+ this.applyPendingBtn.disabled = count === 0;
+ }
+
+ createFooter() {
+ // Store reference to download all button so we can update its text
+ this.downloadAllButton = $el("button.ml-btn.ml-btn-download.ml-footer-btn", {
+ onclick: () => this.handleDownloadAllClick()
+ }, [
+ $el("span.ml-btn-icon", { textContent: "☁" }),
+ $el("span", { textContent: " Download All Missing" })
+ ]);
+
+ // Auto-resolve button (secondary style)
+ this.autoResolveButton = $el("button.ml-btn.ml-btn-secondary.ml-footer-btn", {
+ onclick: () => this.autoResolve100Percent()
+ }, [
+ $el("span.ml-btn-icon", { textContent: "🔗" }),
+ $el("span", { textContent: " Auto-Link 100%" })
+ ]);
+
+ // Apply pending resolutions button
+ this.applyPendingBtn = $el("button.ml-btn.ml-btn-primary.ml-footer-btn", {
+ id: "apply-pending-resolutions",
+ textContent: "Apply Selected (0)",
+ onclick: () => this.applyPendingResolutions()
+ });
+
+ return $el("div.ml-footer", {}, [
this.autoResolveButton,
this.applyPendingBtn,
this.downloadAllButton
- ]);
- }
-
- animateTabContentTransition() {
- if (!this.contentElement?.animate) return;
-
- try {
- this.contentElement.animate(
- [
- { opacity: 0.72, transform: 'translateY(7px)' },
- { opacity: 1, transform: 'translateY(0)' }
- ],
- {
- duration: 180,
- easing: 'cubic-bezier(0.2, 0.8, 0.2, 1)'
- }
- );
- } catch (error) {
- console.warn('Model Linker: tab content animation failed', error);
- }
- }
-
- /**
- * Handle click on Download All / Cancel All button
- */
- handleDownloadAllClick() {
- if (Object.keys(this.activeDownloads).length > 0) {
- // Cancel all active downloads
- this.cancelAllDownloads();
- } else {
- // Start downloading all missing
- this.downloadAllMissing();
- }
- }
-
- /**
- * Cancel all active downloads
- */
- async cancelAllDownloads() {
- const downloadIds = Object.keys(this.activeDownloads);
- if (downloadIds.length === 0) return;
-
- this.showNotification(`Cancelling ${downloadIds.length} download${downloadIds.length > 1 ? 's' : ''}...`, 'info');
-
- for (const downloadId of downloadIds) {
- try {
- await api.fetchApi(`/model_linker/cancel/${downloadId}`, {
- method: 'POST'
- });
- } catch (error) {
- console.error('Model Linker: Error cancelling download:', error);
- }
- }
- }
-
- /**
- * Update the Download All button state based on active downloads
- */
- updateDownloadAllButtonState() {
- if (!this.downloadAllButton) return;
-
- const activeCount = Object.keys(this.activeDownloads).length;
- if (activeCount > 0) {
- this.downloadAllButton.innerHTML = `
✕ Cancel All (${activeCount})`;
- this.downloadAllButton.classList.remove('ml-btn-download');
- this.downloadAllButton.classList.add('ml-btn-danger');
- } else {
- this.downloadAllButton.innerHTML = `
☁ Download All Missing`;
- this.downloadAllButton.classList.remove('ml-btn-danger');
- this.downloadAllButton.classList.add('ml-btn-download');
- }
- }
-
- async show(workflow = null) {
- this.backdrop.style.display = "none";
- this.element.style.display = "flex";
-
- // Update button state in case there are active downloads
- this.updateDownloadAllButtonState();
-
- // Ensure all models are loaded for dropdown
- await this.ensureCapabilitiesLoaded();
- await this.ensureAllModelsLoaded();
- await this.ensureDownloadDirectoriesLoaded();
-
- // Restore fullscreen state if enabled
- try {
- const fs = localStorage.getItem('model_linker_modal_fullscreen');
- if (fs === '1') this.setFullScreen(true);
- } catch (e) { }
-
- // Attach drag handle event listener (only once)
- this.attachDragHandleIfNeeded();
-
- this.activeTab = this.restoreActiveTab();
-
- if (this.activeTab === 'missing') {
- await this.loadWorkflowData(workflow);
- } else if (this.activeTab === 'loaded') {
- this.switchTab('loaded');
- } else {
- this.switchTab('options');
- }
- }
-
- // Attach drag handle event listeners
- attachDragHandleIfNeeded() {
- if (this._dragHandleAttached) return;
-
- const handle = document.getElementById('model-linker-drag-handle');
- if (!handle) return;
-
- const onMouseDown = (e) => {
- if (this.fullscreen) return; // no drag in fullscreen
- handle.style.cursor = 'grabbing';
- this.startDrag(e);
- };
- const onMouseUp = () => { handle.style.cursor = 'grab'; };
-
- handle.addEventListener('mousedown', onMouseDown);
- document.addEventListener('mouseup', onMouseUp, { once: true });
-
- this._dragHandleAttached = true;
- }
-
- close() {
- this._hidePreview?.();
- this.hideTooltip();
- this.backdrop.style.display = "none";
- this.element.style.display = "none";
- }
-
- /**
- * Load workflow data and display missing models
- */
- async loadWorkflowData(workflow = null) {
- if (!this.contentElement) return;
-
- // Show loading state
- try {
- // Use provided workflow, or get current workflow from ComfyUI
- if (!workflow) {
- workflow = this.getCurrentWorkflow();
- }
-
- if (!workflow) {
- this._analysisProgressToken = null;
- this.contentElement.innerHTML = '
No workflow loaded. Please load a workflow first.
';
- return;
- }
-
- const workflowSignature = this.getWorkflowSignature(workflow);
- if (
- workflowSignature &&
- this.cachedWorkflowSignature === workflowSignature &&
- this.cachedAnalysisData
- ) {
- this.displayMissingModels(this.contentElement, this.cachedAnalysisData);
- this.reconnectActiveDownloads();
- return;
- }
-
- const analysisId = `an-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
- this._analysisProgressToken = analysisId;
- this.contentElement.innerHTML = this.renderAnalysisProgress({
- status: 'starting',
- message: 'Starting analysis...',
- current: 0,
- total: 0
- });
-
- // Call analyze endpoint
- const progressPromise = this.pollAnalysisProgress(analysisId, analysisId);
- const response = await api.fetchApi('/model_linker/analyze', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ workflow, analysis_id: analysisId })
- });
- this._analysisProgressToken = null;
- await progressPromise;
-
- if (!response.ok) {
- throw new Error(`API error: ${response.status}`);
- }
-
- const data = await response.json();
- this.cachedWorkflowSignature = workflowSignature;
- this.cachedAnalysisData = data;
- this.searchResultCache.clear();
- this.displayMissingModels(this.contentElement, data);
-
- // Reconnect any active downloads to their new progress divs
- this.reconnectActiveDownloads();
-
- } catch (error) {
- this._analysisProgressToken = null;
- console.error('Model Linker: Error loading workflow data:', error);
- if (this.contentElement) {
- this.contentElement.innerHTML = `
Error: ${error.message}
`;
- }
- }
- }
-
- /**
- * Get current workflow from ComfyUI
- */
- getCurrentWorkflow() {
- // Try to get workflow from app
- if (app?.graph) {
- try {
- // Use ComfyUI's workflow serialization
- const workflow = app.graph.serialize();
- return workflow;
- } catch (e) {
- console.warn('Model Linker: Could not serialize workflow from graph:', e);
- }
- }
- return null;
- }
-
- /**
- * Locate and focus a node in the ComfyUI canvas
- */
- locateNodeInGraph(nodeId) {
- try {
- if (!app?.graph) {
- this.showNotification('Cannot locate node - graph not available', 'error');
- return;
- }
-
- // Find the node in the graph
- const node = app.graph.getNodeById(nodeId);
- if (!node) {
- this.showNotification(`Node #${nodeId} not found in graph`, 'error');
- return;
- }
-
- let locatedWithAnimation = false;
-
- // Focus on the node in the canvas with animated panning when possible
- if (app.canvas?.ds && app.canvas?.canvas) {
- locatedWithAnimation = this.animateCanvasToNode(node);
- }
-
- if (!locatedWithAnimation && app.graph._nodes && app.graph._nodes.get(nodeId)) {
- // Alternative method for older versions
- const canvasNode = app.graph._nodes.get(nodeId);
- if (canvasNode && canvasNode.setSelected && canvasNode.graph) {
- canvasNode.setSelected(true);
- // Scroll to node
- app.canvas.scrollToNode(canvasNode);
- }
- } else if (!locatedWithAnimation && app.ui && app.ui.nodeGraph && typeof app.ui.nodeGraph.scrollToNode === 'function') {
- // Alternative for other versions
- app.ui.nodeGraph.scrollToNode(node);
- } else if (!locatedWithAnimation && app.canvas && typeof app.canvas.centerOnNode === 'function') {
- // Final fallback for versions where animation path is unavailable
- app.canvas.centerOnNode(node);
- }
-
- // Also try to flash/select the node
- // Deselect all nodes first
- if (app.graph && app.graph.nodes) {
- app.graph.nodes.forEach(n => {
- if (n.selected) n.selected = false;
- });
- }
-
- // Select and highlight our node
- node.selected = true;
-
- this.showNotification(`Focused on Node #${nodeId} (${node.type})`, 'info');
- } catch (e) {
- console.error('Model Linker: Error locating node:', e);
- this.showNotification('Error locating node: ' + e.message, 'error');
- }
- }
-
- animateCanvasToNode(node) {
- const canvas = app?.canvas;
- const ds = canvas?.ds;
- const htmlCanvas = canvas?.canvas;
- if (!canvas || !ds || !htmlCanvas) return false;
-
- const rect = node.boundingRect || [node.pos?.[0] || 0, node.pos?.[1] || 0, node.size?.[0] || 0, node.size?.[1] || 0];
- const centerX = rect[0] + (rect[2] || 0) / 2;
- const centerY = rect[1] + (rect[3] || 0) / 2;
- const startScale = Number.isFinite(ds.scale) && ds.scale > 0 ? ds.scale : 1;
- const dpr = window.devicePixelRatio || 1;
- const canvasWidth = htmlCanvas.width || htmlCanvas.clientWidth || 0;
- const canvasHeight = htmlCanvas.height || htmlCanvas.clientHeight || 0;
-
- if (!canvasWidth || !canvasHeight) return false;
-
- const viewportWidth = canvasWidth / dpr;
- const viewportHeight = canvasHeight / dpr;
- const nodeWidth = Math.max(rect[2] || 0, 1);
- const nodeHeight = Math.max(rect[3] || 0, 1);
- const paddingX = 140;
- const paddingY = 96;
- const fitScaleX = viewportWidth / (nodeWidth + (paddingX * 2));
- const fitScaleY = viewportHeight / (nodeHeight + (paddingY * 2));
- const targetScale = Math.max(0.15, Math.min(1, fitScaleX, fitScaleY));
-
- const getCenteredOffset = (scale) => {
- const viewWidth = canvasWidth / (scale * dpr);
- const viewHeight = canvasHeight / (scale * dpr);
- return {
- x: -centerX + (viewWidth / 2),
- y: -centerY + (viewHeight / 2)
- };
- };
-
- const startOffset = {
- x: Number.isFinite(ds.offset?.[0]) ? ds.offset[0] : getCenteredOffset(startScale).x,
- y: Number.isFinite(ds.offset?.[1]) ? ds.offset[1] : getCenteredOffset(startScale).y
- };
- const targetOffset = getCenteredOffset(targetScale);
-
- if (this._locateAnimationFrame) {
- cancelAnimationFrame(this._locateAnimationFrame);
- this._locateAnimationFrame = null;
- }
-
- const durationMs = 380;
- const startTime = performance.now();
- const easeInOutCubic = (t) => t < 0.5
- ? 4 * t * t * t
- : 1 - Math.pow(-2 * t + 2, 3) / 2;
-
- const tick = (now) => {
- const progress = Math.min(1, (now - startTime) / durationMs);
- const eased = easeInOutCubic(progress);
-
- ds.scale = startScale + ((targetScale - startScale) * eased);
- ds.offset[0] = startOffset.x + ((targetOffset.x - startOffset.x) * eased);
- ds.offset[1] = startOffset.y + ((targetOffset.y - startOffset.y) * eased);
- canvas.setDirty?.(true, true);
- app.graph?.setDirtyCanvas?.(true, true);
-
- if (progress < 1) {
- this._locateAnimationFrame = requestAnimationFrame(tick);
- } else {
- this._locateAnimationFrame = null;
- }
- };
-
- this._locateAnimationFrame = requestAnimationFrame(tick);
- return true;
- }
-
- /**
- * Reconnect active downloads to their new progress div elements after UI refresh
- */
- reconnectActiveDownloads() {
- if (!this.contentElement) return;
-
- for (const [downloadId, info] of Object.entries(this.activeDownloads)) {
- const { missing } = info;
- if (!missing) continue;
-
- // Find the new progress div by ID
- const progressId = `download-progress-${missing.node_id}-${missing.widget_index}`;
- const newProgressDiv = this.contentElement.querySelector(`#${progressId}`);
- const newDownloadBtn = this.contentElement.querySelector(`#download-${missing.node_id}-${missing.widget_index}`);
-
- if (newProgressDiv) {
- // Update the reference
- info.progressDiv = newProgressDiv;
- info.downloadBtn = newDownloadBtn;
-
- // Show that download is in progress
- newProgressDiv.style.display = 'block';
- newProgressDiv.innerHTML = `
-
- `;
-
- // Attach cancel handler
- const cancelBtn = newProgressDiv.querySelector('.cancel-download-btn');
- if (cancelBtn) {
- cancelBtn.addEventListener('click', () => this.cancelDownload(downloadId));
- }
-
- // Update download button if exists
- if (newDownloadBtn) {
- newDownloadBtn.disabled = true;
- newDownloadBtn.textContent = 'Downloading...';
- }
- }
- }
- }
-
- /**
- * Display missing models in the dialog
- */
- displayMissingModels(container, data) {
- const missingModels = data.missing_models || [];
- const totalMissing = data.total_missing || 0;
- this.missingModels = missingModels;
-
- // Check if there are active downloads
- const activeCount = Object.keys(this.activeDownloads).length;
-
- // Check if any model has a 100% confidence match
- const hasAny100Match = missingModels.some(m =>
- (m.matches || []).some(match => match.confidence === 100)
- );
-
- // Show/hide Auto-Link button based on whether 100% matches exist
- if (this.autoResolveButton) {
- this.autoResolveButton.style.display = hasAny100Match ? 'inline-flex' : 'none';
- }
-
- // Hide download all button if no missing models
- if (this.downloadAllButton) {
- this.downloadAllButton.style.display = totalMissing > 0 ? 'inline-flex' : 'none';
- }
-
- if (totalMissing === 0 && activeCount === 0) {
- container.innerHTML = this.renderStatusMessage('All models are available! No missing models found.', 'success');
- return;
- }
-
- // If no missing models but downloads are active, show a waiting message
- if (totalMissing === 0 && activeCount > 0) {
- container.innerHTML = this.renderStatusMessage(
- `${activeCount} download${activeCount > 1 ? 's' : ''} in progress. Models will be auto-linked when complete.`,
- 'info'
- );
- return;
- }
-
- // Summary header with count
- let html = `
-
-
- ${totalMissing} Missing Model${totalMissing > 1 ? 's' : ''}
- Compact relinking and download view
-
-
- ${activeCount > 0 ? `${activeCount} downloading` : (hasAny100Match ? 'Auto-Link ready for exact matches' : 'Review matches or search online')}
-
-
- `;
- html += '
';
-
- // Skip rendering if active tab is not "missing"
- if (this.activeTab !== 'missing') {
- container.innerHTML = '';
- return;
- }
-
- // Sort missing models: those with 100% confidence matches first, then others
- const sortedMissingModels = missingModels.sort((a, b) => {
- const aMatches = a.matches || [];
- const bMatches = b.matches || [];
-
- // Filter to 70%+ confidence
- const aFiltered = aMatches.filter(m => m.confidence >= 70);
- const bFiltered = bMatches.filter(m => m.confidence >= 70);
-
- // Check if they have 100% matches
- const aHas100 = aFiltered.some(m => m.confidence === 100);
- const bHas100 = bFiltered.some(m => m.confidence === 100);
-
- // If one has 100% and the other doesn't, prioritize the one with 100%
- if (aHas100 && !bHas100) return -1;
- if (!aHas100 && bHas100) return 1;
-
- // If both have 100% or neither has 100%, sort by best confidence
- const aBestConf = aFiltered.length > 0 ? Math.max(...aFiltered.map(m => m.confidence)) : 0;
- const bBestConf = bFiltered.length > 0 ? Math.max(...bFiltered.map(m => m.confidence)) : 0;
-
- return bBestConf - aBestConf; // Higher confidence first
- });
-
- for (let mi = 0; mi < sortedMissingModels.length; mi++) {
- sortedMissingModels[mi].__displayIndex = mi;
- html += this.renderMissingModel(sortedMissingModels[mi], mi);
- }
-
- html += '
';
- container.innerHTML = html;
-
- // Attach event listeners for resolve buttons (use sorted order)
- // Note: We need to match the exact same logic as renderMissingModel to find which buttons were rendered
- sortedMissingModels.forEach((missing, missingIndex) => {
- this.wireLocalMatchButtons(container, missing, missingIndex);
-
- // Attach download button listener
- const downloadBtnId = `download-${missing.node_id}-${missing.widget_index}`;
- const downloadBtn = container.querySelector(`#${downloadBtnId}`);
- if (downloadBtn && missing.download_source) {
- downloadBtn.addEventListener('click', () => {
- this.downloadModel(missing);
- });
- }
-
- // Attach search button listener
- const searchBtnId = `search-${missing.node_id}-${missing.widget_index}`;
- const searchBtn = container.querySelector(`#${searchBtnId}`);
- if (searchBtn) {
- searchBtn.addEventListener('click', () => {
- this.searchOnline(missing);
- });
- }
-
- const sourceSelect = container.querySelector(`#search-source-select-${missing.node_id}-${missing.widget_index}`);
- if (sourceSelect) {
- sourceSelect.addEventListener('change', () => {
- this.setSearchSource(missing, sourceSelect.value, container);
- });
- this.syncSearchSourceUi(missing, container);
- }
-
- this.wireDownloadTargetAutocomplete(container, missing);
-
- // Wire locate chip (only for top-level nodes)
- const locateId = `locate-${missing.node_id}-${missing.widget_index}`;
- const locateBtn = container.querySelector(`#${locateId}`);
- if (locateBtn && missing.is_top_level !== false) {
- locateBtn.addEventListener('click', () => {
- this.locateNodeInGraph(missing.node_id);
- });
- }
-
- // Wire up all-models search + dropdown (combo-style)
- const comboId = `combo-${missing.node_id}-${missing.widget_index}`;
- const comboInput = container.querySelector(`#combo-input-${comboId}`);
- const comboList = container.querySelector(`#combo-list-${comboId}`);
- const comboRefresh = container.querySelector(`#combo-refresh-${comboId}`);
-
- if (comboList) {
- this.enableWheelScrollChaining(comboList);
- }
-
- const allModels = Array.isArray(this.allModels) ? this.allModels : [];
- const buildLabel = (m) => `${m.category ? m.category + ': ' : ''}${m.relative_path || m.filename || ''}`;
- const getFolder = (m) => m.path || m.base_directory || '';
-
- // Populate dropdown with filtered models
- const populateComboOptions = (filterText, highlightIdx = -1) => {
- if (!comboList) return;
- const f = (filterText || '').toLowerCase();
- const filtered = f
- ? allModels.filter(m => buildLabel(m).toLowerCase().includes(f))
- : allModels.slice(); // Copy to avoid mutation
-
- let html = '';
- for (let i = 0; i < filtered.length; i++) {
- const m = filtered[i];
- const label = buildLabel(m);
- const folder = getFolder(m);
- const isHighlighted = i === highlightIdx;
- const folderDisplay = folder ? folder.replace(/\\/g, '/').replace(/:/, '') : '';
- html += `
`;
- html += `
`;
- html += `${label}`;
- html += `
`;
- if (folderDisplay) {
- html += `
📁 ${folderDisplay}
`;
- }
- html += `
`;
- }
- comboList.innerHTML = html;
-
- // Add click listeners to options
- comboList.querySelectorAll('div[data-idx]').forEach(el => {
- el.addEventListener('click', () => {
- const idx = parseInt(el.dataset.idx, 10);
- if (!isNaN(idx) && idx >= 0 && idx < allModels.length) {
- const chosenModel = allModels[idx];
- if (chosenModel) {
- this.queueResolution(missing, chosenModel);
- }
- }
- });
- });
- };
-
- // Initial populate
- if (comboList) {
- populateComboOptions('');
- }
-
- // Filter input with debounce
- if (comboInput) {
- const debouncedFilter = this.debounce(() => {
- populateComboOptions(comboInput.value);
- }, 200);
- comboInput.addEventListener('input', debouncedFilter);
-
- // Show dropdown on focus
- comboInput.addEventListener('focus', () => {
- if (comboList) comboList.style.display = 'block';
- populateComboOptions(comboInput.value);
- });
-
- // Close on blur (with delay to allow click)
- comboInput.addEventListener('blur', () => {
- setTimeout(() => {
- if (comboList) comboList.style.display = 'none';
- }, 200);
- });
- }
-
- // Refresh button - reload all models
- if (comboRefresh) {
- comboRefresh.addEventListener('click', async () => {
- this.allModels = null; // Force reload
- await this.ensureAllModelsLoaded();
- populateComboOptions(comboInput?.value || '');
- });
- }
- });
- }
-
- /**
- * Render a single missing model entry
- */
- renderMissingModel(missing, missingIndex = 0) {
- const allMatches = missing.matches || [];
-
- // Filter out matches below 70% confidence threshold
- const filteredMatches = allMatches.filter(m => m.confidence >= 70);
- const hasMatches = filteredMatches.length > 0;
-
- // Calculate 100% matches upfront (needed for download section)
- const perfectMatches = filteredMatches.filter(m => m.confidence === 100);
- const otherMatches = filteredMatches.filter(m => m.confidence < 100 && m.confidence >= 70);
-
- // Format the missing filename for display
- const missingFilename = this.formatFilename(missing.original_path, 60);
-
- // Determine node info for the chip
- const isSubgraphNode = missing.node_type && missing.node_type.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i);
- let nodeLabel;
- if (missing.subgraph_name) {
- nodeLabel = missing.subgraph_name;
- } else if (isSubgraphNode) {
- nodeLabel = 'Subgraph';
- } else {
- nodeLabel = missing.node_type || 'Node';
- }
- const customNodeTitle = String(missing.node_title || '').trim();
- const hasCustomNodeTitle = customNodeTitle && customNodeTitle !== nodeLabel;
- const nodeChipText = this.escapeHtml(hasCustomNodeTitle
- ? `${nodeLabel} #${missing.node_id} · ${customNodeTitle}`
- : `${nodeLabel} #${missing.node_id}`);
-
- // Start card
- let html = `
`;
-
- // Card Header: Filename as headline + node chip
- html += ``;
-
- // Selected bar - shows if this slot has a queued selection (BELOW card header)
- const selectedBarId = `selected-bar-${missing.node_id}-${missing.widget_index}`;
- html += `
`;
-
- // Two-column layout
- html += `
`;
-
- // LEFT COLUMN: Local Matches
- html += `
`;
- html += `
Local Matches
`;
- html += `
`;
- html += this.renderLocalMatchesContent(missing, missingIndex);
- html += `
`;
-
- // Add all-models search picker - combo-style dropdown
- const comboId = `combo-${missing.node_id}-${missing.widget_index}`;
- html += `
`;
- html += `
`;
- html += `Model `;
- html += `⟳ `;
- html += `
`;
- html += `
`;
- html += `
`;
-
- html += `
`; // End left column
-
- // RIGHT COLUMN: Download Option
- html += `
`;
- html += `
Download
`;
-
- const filename = missing.original_path?.split('/').pop()?.split('\\').pop() || '';
- const downloadSource = missing.download_source;
- const urnDownloadId = `urn-download-${missing.node_id}-${missing.widget_index}`;
-
- if (perfectMatches.length > 0) {
- // Has perfect local match - download not needed
- html += `
`;
- html += `
`;
- html += this.getStatusBadge('Not needed', 'neutral');
- html += `Exact local match available `;
- html += `
`;
- html += `
`;
- } else if (downloadSource && downloadSource.url) {
- html += this.renderDownloadSourceSection(missing, downloadSource);
- } else if (missing.is_urn) {
- html += `
`;
- html += `
Resolving CivitAI download for this URN...
`;
- html += `
`;
- } else {
- // No known download - offer search
- html += `
`;
- const searchSourcesId = `search-sources-${missing.node_id}-${missing.widget_index}`;
- const searchSourceSelectId = `search-source-select-${missing.node_id}-${missing.widget_index}`;
- html += `
`;
- html += `
`;
- html += `${this.getSearchIconHtml()} Search`;
- html += ` `;
- html += `
`;
- html += `Source `;
- html += ``;
- html += `Everything `;
- html += `Local Database `;
- html += `HuggingFace `;
- html += `CivitAI `;
- if (this.isSourceAvailable('lora_manager_archive')) {
- html += `LoRA Manager Archive `;
- }
- html += ` `;
- html += `
`;
- html += `
`;
- html += this.renderDownloadTargetControls(missing, missing.category || 'checkpoints');
- html += `
`;
- html += `
`;
- }
-
- // Progress container (for downloads)
- html += `
`;
-
- html += `
`; // End right column
- html += `
`; // End columns
-
- html += `
`; // End card
- return html;
- }
-
- /**
- * Show a notification banner (similar to ComfyUI's "Reconnecting" banner)
- */
- showNotification(message, type = 'success') {
- // Build children array, filtering out nulls
- const children = [];
-
+ ]);
+ }
+
+ animateTabContentTransition() {
+ if (!this.contentElement?.animate) return;
+
+ try {
+ this.contentElement.animate(
+ [
+ { opacity: 0.72, transform: 'translateY(7px)' },
+ { opacity: 1, transform: 'translateY(0)' }
+ ],
+ {
+ duration: 180,
+ easing: 'cubic-bezier(0.2, 0.8, 0.2, 1)'
+ }
+ );
+ } catch (error) {
+ console.warn('Model Linker: tab content animation failed', error);
+ }
+ }
+
+ /**
+ * Handle click on Download All / Cancel All button
+ */
+ handleDownloadAllClick() {
+ if (Object.keys(this.activeDownloads).length > 0) {
+ // Cancel all active downloads
+ this.cancelAllDownloads();
+ } else {
+ // Start downloading all missing
+ this.downloadAllMissing();
+ }
+ }
+
+ /**
+ * Cancel all active downloads
+ */
+ async cancelAllDownloads() {
+ const downloadIds = Object.keys(this.activeDownloads);
+ if (downloadIds.length === 0) return;
+
+ this.showNotification(`Cancelling ${downloadIds.length} download${downloadIds.length > 1 ? 's' : ''}...`, 'info');
+
+ for (const downloadId of downloadIds) {
+ try {
+ await api.fetchApi(`/model_linker/cancel/${downloadId}`, {
+ method: 'POST'
+ });
+ } catch (error) {
+ console.error('Model Linker: Error cancelling download:', error);
+ }
+ }
+ }
+
+ /**
+ * Update the Download All button state based on active downloads
+ */
+ updateDownloadAllButtonState() {
+ if (!this.downloadAllButton) return;
+
+ const activeCount = Object.keys(this.activeDownloads).length;
+ if (activeCount > 0) {
+ this.downloadAllButton.innerHTML = `
✕ Cancel All (${activeCount})`;
+ this.downloadAllButton.classList.remove('ml-btn-download');
+ this.downloadAllButton.classList.add('ml-btn-danger');
+ } else {
+ this.downloadAllButton.innerHTML = `
☁ Download All Missing`;
+ this.downloadAllButton.classList.remove('ml-btn-danger');
+ this.downloadAllButton.classList.add('ml-btn-download');
+ }
+ }
+
+ async show(workflow = null) {
+ this.backdrop.style.display = "none";
+ this.element.style.display = "flex";
+
+ // Update button state in case there are active downloads
+ this.updateDownloadAllButtonState();
+
+ // Ensure all models are loaded for dropdown
+ await this.ensureCapabilitiesLoaded();
+ await this.ensureAllModelsLoaded();
+ await this.ensureDownloadDirectoriesLoaded();
+
+ // Restore fullscreen state if enabled
+ try {
+ const fs = localStorage.getItem('model_linker_modal_fullscreen');
+ if (fs === '1') this.setFullScreen(true);
+ } catch (e) { }
+
+ // Attach drag handle event listener (only once)
+ this.attachDragHandleIfNeeded();
+
+ this.activeTab = this.restoreActiveTab();
+
+ if (this.activeTab === 'missing') {
+ await this.loadWorkflowData(workflow);
+ } else if (this.activeTab === 'loaded') {
+ this.switchTab('loaded');
+ } else {
+ this.switchTab('options');
+ }
+ }
+
+ // Attach drag handle event listeners
+ attachDragHandleIfNeeded() {
+ if (this._dragHandleAttached) return;
+
+ const handle = document.getElementById('model-linker-drag-handle');
+ if (!handle) return;
+
+ const onMouseDown = (e) => {
+ if (this.fullscreen) return; // no drag in fullscreen
+ handle.style.cursor = 'grabbing';
+ this.startDrag(e);
+ };
+ const onMouseUp = () => { handle.style.cursor = 'grab'; };
+
+ handle.addEventListener('mousedown', onMouseDown);
+ document.addEventListener('mouseup', onMouseUp, { once: true });
+
+ this._dragHandleAttached = true;
+ }
+
+ close() {
+ this._hidePreview?.();
+ this.hideTooltip();
+ this.backdrop.style.display = "none";
+ this.element.style.display = "none";
+ }
+
+ /**
+ * Load workflow data and display missing models
+ */
+ async loadWorkflowData(workflow = null) {
+ if (!this.contentElement) return;
+
+ // Show loading state
+ try {
+ // Use provided workflow, or get current workflow from ComfyUI
+ if (!workflow) {
+ workflow = this.getCurrentWorkflow();
+ }
+
+ if (!workflow) {
+ this._analysisProgressToken = null;
+ this.contentElement.innerHTML = '
No workflow loaded. Please load a workflow first.
';
+ return;
+ }
+
+ const workflowSignature = this.getWorkflowSignature(workflow);
+ if (
+ workflowSignature &&
+ this.cachedWorkflowSignature === workflowSignature &&
+ this.cachedAnalysisData
+ ) {
+ this.displayMissingModels(this.contentElement, this.cachedAnalysisData);
+ this.reconnectActiveDownloads();
+ return;
+ }
+
+ const analysisId = `an-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+ this._analysisProgressToken = analysisId;
+ this.contentElement.innerHTML = this.renderAnalysisProgress({
+ status: 'starting',
+ message: 'Starting analysis...',
+ current: 0,
+ total: 0
+ });
+
+ // Call analyze endpoint
+ const progressPromise = this.pollAnalysisProgress(analysisId, analysisId);
+ const response = await api.fetchApi('/model_linker/analyze', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ workflow, analysis_id: analysisId })
+ });
+ this._analysisProgressToken = null;
+ await progressPromise;
+
+ if (!response.ok) {
+ throw new Error(`API error: ${response.status}`);
+ }
+
+ const data = await response.json();
+ this.cachedWorkflowSignature = workflowSignature;
+ this.cachedAnalysisData = data;
+ this.searchResultCache.clear();
+ this.displayMissingModels(this.contentElement, data);
+
+ // Reconnect any active downloads to their new progress divs
+ this.reconnectActiveDownloads();
+
+ } catch (error) {
+ this._analysisProgressToken = null;
+ console.error('Model Linker: Error loading workflow data:', error);
+ if (this.contentElement) {
+ this.contentElement.innerHTML = `
Error: ${error.message}
`;
+ }
+ }
+ }
+
+ /**
+ * Get current workflow from ComfyUI
+ */
+ getCurrentWorkflow() {
+ // Try to get workflow from app
+ if (app?.graph) {
+ try {
+ // Use ComfyUI's workflow serialization
+ const workflow = app.graph.serialize();
+ return workflow;
+ } catch (e) {
+ console.warn('Model Linker: Could not serialize workflow from graph:', e);
+ }
+ }
+ return null;
+ }
+
+ /**
+ * Locate and focus a node in the ComfyUI canvas
+ */
+ locateNodeInGraph(nodeId) {
+ try {
+ if (!app?.graph) {
+ this.showNotification('Cannot locate node - graph not available', 'error');
+ return;
+ }
+
+ // Find the node in the graph
+ const node = app.graph.getNodeById(nodeId);
+ if (!node) {
+ this.showNotification(`Node #${nodeId} not found in graph`, 'error');
+ return;
+ }
+
+ let locatedWithAnimation = false;
+
+ // Focus on the node in the canvas with animated panning when possible
+ if (app.canvas?.ds && app.canvas?.canvas) {
+ locatedWithAnimation = this.animateCanvasToNode(node);
+ }
+
+ if (!locatedWithAnimation && app.graph._nodes && app.graph._nodes.get(nodeId)) {
+ // Alternative method for older versions
+ const canvasNode = app.graph._nodes.get(nodeId);
+ if (canvasNode && canvasNode.setSelected && canvasNode.graph) {
+ canvasNode.setSelected(true);
+ // Scroll to node
+ app.canvas.scrollToNode(canvasNode);
+ }
+ } else if (!locatedWithAnimation && app.ui && app.ui.nodeGraph && typeof app.ui.nodeGraph.scrollToNode === 'function') {
+ // Alternative for other versions
+ app.ui.nodeGraph.scrollToNode(node);
+ } else if (!locatedWithAnimation && app.canvas && typeof app.canvas.centerOnNode === 'function') {
+ // Final fallback for versions where animation path is unavailable
+ app.canvas.centerOnNode(node);
+ }
+
+ // Also try to flash/select the node
+ // Deselect all nodes first
+ if (app.graph && app.graph.nodes) {
+ app.graph.nodes.forEach(n => {
+ if (n.selected) n.selected = false;
+ });
+ }
+
+ // Select and highlight our node
+ node.selected = true;
+
+ this.showNotification(`Focused on Node #${nodeId} (${node.type})`, 'info');
+ } catch (e) {
+ console.error('Model Linker: Error locating node:', e);
+ this.showNotification('Error locating node: ' + e.message, 'error');
+ }
+ }
+
+ animateCanvasToNode(node) {
+ const canvas = app?.canvas;
+ const ds = canvas?.ds;
+ const htmlCanvas = canvas?.canvas;
+ if (!canvas || !ds || !htmlCanvas) return false;
+
+ const rect = node.boundingRect || [node.pos?.[0] || 0, node.pos?.[1] || 0, node.size?.[0] || 0, node.size?.[1] || 0];
+ const centerX = rect[0] + (rect[2] || 0) / 2;
+ const centerY = rect[1] + (rect[3] || 0) / 2;
+ const startScale = Number.isFinite(ds.scale) && ds.scale > 0 ? ds.scale : 1;
+ const dpr = window.devicePixelRatio || 1;
+ const canvasWidth = htmlCanvas.width || htmlCanvas.clientWidth || 0;
+ const canvasHeight = htmlCanvas.height || htmlCanvas.clientHeight || 0;
+
+ if (!canvasWidth || !canvasHeight) return false;
+
+ const viewportWidth = canvasWidth / dpr;
+ const viewportHeight = canvasHeight / dpr;
+ const nodeWidth = Math.max(rect[2] || 0, 1);
+ const nodeHeight = Math.max(rect[3] || 0, 1);
+ const paddingX = 140;
+ const paddingY = 96;
+ const fitScaleX = viewportWidth / (nodeWidth + (paddingX * 2));
+ const fitScaleY = viewportHeight / (nodeHeight + (paddingY * 2));
+ const targetScale = Math.max(0.15, Math.min(1, fitScaleX, fitScaleY));
+
+ const getCenteredOffset = (scale) => {
+ const viewWidth = canvasWidth / (scale * dpr);
+ const viewHeight = canvasHeight / (scale * dpr);
+ return {
+ x: -centerX + (viewWidth / 2),
+ y: -centerY + (viewHeight / 2)
+ };
+ };
+
+ const startOffset = {
+ x: Number.isFinite(ds.offset?.[0]) ? ds.offset[0] : getCenteredOffset(startScale).x,
+ y: Number.isFinite(ds.offset?.[1]) ? ds.offset[1] : getCenteredOffset(startScale).y
+ };
+ const targetOffset = getCenteredOffset(targetScale);
+
+ if (this._locateAnimationFrame) {
+ cancelAnimationFrame(this._locateAnimationFrame);
+ this._locateAnimationFrame = null;
+ }
+
+ const durationMs = 380;
+ const startTime = performance.now();
+ const easeInOutCubic = (t) => t < 0.5
+ ? 4 * t * t * t
+ : 1 - Math.pow(-2 * t + 2, 3) / 2;
+
+ const tick = (now) => {
+ const progress = Math.min(1, (now - startTime) / durationMs);
+ const eased = easeInOutCubic(progress);
+
+ ds.scale = startScale + ((targetScale - startScale) * eased);
+ ds.offset[0] = startOffset.x + ((targetOffset.x - startOffset.x) * eased);
+ ds.offset[1] = startOffset.y + ((targetOffset.y - startOffset.y) * eased);
+ canvas.setDirty?.(true, true);
+ app.graph?.setDirtyCanvas?.(true, true);
+
+ if (progress < 1) {
+ this._locateAnimationFrame = requestAnimationFrame(tick);
+ } else {
+ this._locateAnimationFrame = null;
+ }
+ };
+
+ this._locateAnimationFrame = requestAnimationFrame(tick);
+ return true;
+ }
+
+ /**
+ * Reconnect active downloads to their new progress div elements after UI refresh
+ */
+ reconnectActiveDownloads() {
+ if (!this.contentElement) return;
+
+ for (const [downloadId, info] of Object.entries(this.activeDownloads)) {
+ const { missing } = info;
+ if (!missing) continue;
+
+ // Find the new progress div by ID
+ const progressId = `download-progress-${missing.node_id}-${missing.widget_index}`;
+ const newProgressDiv = this.contentElement.querySelector(`#${progressId}`);
+ const newDownloadBtn = this.contentElement.querySelector(`#download-${missing.node_id}-${missing.widget_index}`);
+
+ if (newProgressDiv) {
+ // Update the reference
+ info.progressDiv = newProgressDiv;
+ info.downloadBtn = newDownloadBtn;
+
+ // Show that download is in progress
+ newProgressDiv.style.display = 'block';
+ newProgressDiv.innerHTML = `
+
+ `;
+
+ // Attach cancel handler
+ const cancelBtn = newProgressDiv.querySelector('.cancel-download-btn');
+ if (cancelBtn) {
+ cancelBtn.addEventListener('click', () => this.cancelDownload(downloadId));
+ }
+
+ // Update download button if exists
+ if (newDownloadBtn) {
+ newDownloadBtn.disabled = true;
+ newDownloadBtn.textContent = 'Downloading...';
+ }
+ }
+ }
+ }
+
+ /**
+ * Display missing models in the dialog
+ */
+ displayMissingModels(container, data) {
+ const missingModels = data.missing_models || [];
+ const totalMissing = data.total_missing || 0;
+ this.missingModels = missingModels;
+
+ // Check if there are active downloads
+ const activeCount = Object.keys(this.activeDownloads).length;
+
+ // Check if any model has a 100% confidence match
+ const hasAny100Match = missingModels.some(m =>
+ (m.matches || []).some(match => match.confidence === 100)
+ );
+
+ // Show/hide Auto-Link button based on whether 100% matches exist
+ if (this.autoResolveButton) {
+ this.autoResolveButton.style.display = hasAny100Match ? 'inline-flex' : 'none';
+ }
+
+ // Hide download all button if no missing models
+ if (this.downloadAllButton) {
+ this.downloadAllButton.style.display = totalMissing > 0 ? 'inline-flex' : 'none';
+ }
+
+ if (totalMissing === 0 && activeCount === 0) {
+ container.innerHTML = this.renderStatusMessage('All models are available! No missing models found.', 'success');
+ return;
+ }
+
+ // If no missing models but downloads are active, show a waiting message
+ if (totalMissing === 0 && activeCount > 0) {
+ container.innerHTML = this.renderStatusMessage(
+ `${activeCount} download${activeCount > 1 ? 's' : ''} in progress. Models will be auto-linked when complete.`,
+ 'info'
+ );
+ return;
+ }
+
+ // Summary header with count
+ let html = `
+
+
+ ${totalMissing} Missing Model${totalMissing > 1 ? 's' : ''}
+ Compact relinking and download view
+
+
+ ${activeCount > 0 ? `${activeCount} downloading` : (hasAny100Match ? 'Auto-Link ready for exact matches' : 'Review matches or search online')}
+
+
+ `;
+ html += '
';
+
+ // Skip rendering if active tab is not "missing"
+ if (this.activeTab !== 'missing') {
+ container.innerHTML = '';
+ return;
+ }
+
+ // Sort missing models: those with 100% confidence matches first, then others
+ const sortedMissingModels = missingModels.sort((a, b) => {
+ const aMatches = a.matches || [];
+ const bMatches = b.matches || [];
+
+ // Filter to 70%+ confidence
+ const aFiltered = aMatches.filter(m => m.confidence >= 70);
+ const bFiltered = bMatches.filter(m => m.confidence >= 70);
+
+ // Check if they have 100% matches
+ const aHas100 = aFiltered.some(m => m.confidence === 100);
+ const bHas100 = bFiltered.some(m => m.confidence === 100);
+
+ // If one has 100% and the other doesn't, prioritize the one with 100%
+ if (aHas100 && !bHas100) return -1;
+ if (!aHas100 && bHas100) return 1;
+
+ // If both have 100% or neither has 100%, sort by best confidence
+ const aBestConf = aFiltered.length > 0 ? Math.max(...aFiltered.map(m => m.confidence)) : 0;
+ const bBestConf = bFiltered.length > 0 ? Math.max(...bFiltered.map(m => m.confidence)) : 0;
+
+ return bBestConf - aBestConf; // Higher confidence first
+ });
+
+ for (let mi = 0; mi < sortedMissingModels.length; mi++) {
+ sortedMissingModels[mi].__displayIndex = mi;
+ html += this.renderMissingModel(sortedMissingModels[mi], mi);
+ }
+
+ html += '
';
+ container.innerHTML = html;
+
+ // Attach event listeners for resolve buttons (use sorted order)
+ // Note: We need to match the exact same logic as renderMissingModel to find which buttons were rendered
+ sortedMissingModels.forEach((missing, missingIndex) => {
+ this.wireLocalMatchButtons(container, missing, missingIndex);
+
+ // Attach download button listener
+ const downloadBtnId = `download-${missing.node_id}-${missing.widget_index}`;
+ const downloadBtn = container.querySelector(`#${downloadBtnId}`);
+ if (downloadBtn && missing.download_source) {
+ downloadBtn.addEventListener('click', () => {
+ this.downloadModel(missing);
+ });
+ }
+
+ // Attach search button listener
+ const searchBtnId = `search-${missing.node_id}-${missing.widget_index}`;
+ const searchBtn = container.querySelector(`#${searchBtnId}`);
+ if (searchBtn) {
+ searchBtn.addEventListener('click', () => {
+ this.searchOnline(missing);
+ });
+ }
+
+ const sourceSelect = container.querySelector(`#search-source-select-${missing.node_id}-${missing.widget_index}`);
+ if (sourceSelect) {
+ sourceSelect.addEventListener('change', () => {
+ this.setSearchSource(missing, sourceSelect.value, container);
+ });
+ this.syncSearchSourceUi(missing, container);
+ }
+
+ this.wireDownloadTargetAutocomplete(container, missing);
+
+ // Wire locate chip (only for top-level nodes)
+ const locateId = `locate-${missing.node_id}-${missing.widget_index}`;
+ const locateBtn = container.querySelector(`#${locateId}`);
+ if (locateBtn && missing.is_top_level !== false) {
+ locateBtn.addEventListener('click', () => {
+ this.locateNodeInGraph(missing.node_id);
+ });
+ }
+
+ // Wire up all-models search + dropdown (combo-style)
+ const comboId = `combo-${missing.node_id}-${missing.widget_index}`;
+ const comboInput = container.querySelector(`#combo-input-${comboId}`);
+ const comboList = container.querySelector(`#combo-list-${comboId}`);
+ const comboRefresh = container.querySelector(`#combo-refresh-${comboId}`);
+
+ if (comboList) {
+ this.enableWheelScrollChaining(comboList);
+ }
+
+ const allModels = Array.isArray(this.allModels) ? this.allModels : [];
+ const buildLabel = (m) => `${m.category ? m.category + ': ' : ''}${m.relative_path || m.filename || ''}`;
+ const getFolder = (m) => m.path || m.base_directory || '';
+
+ // Populate dropdown with filtered models
+ const populateComboOptions = (filterText, highlightIdx = -1) => {
+ if (!comboList) return;
+ const f = (filterText || '').toLowerCase();
+ const filtered = f
+ ? allModels.filter(m => buildLabel(m).toLowerCase().includes(f))
+ : allModels.slice(); // Copy to avoid mutation
+
+ let html = '';
+ for (let i = 0; i < filtered.length; i++) {
+ const m = filtered[i];
+ const label = buildLabel(m);
+ const folder = getFolder(m);
+ const isHighlighted = i === highlightIdx;
+ const folderDisplay = folder ? folder.replace(/\\/g, '/').replace(/:/, '') : '';
+ html += `
`;
+ html += `
`;
+ html += `${label}`;
+ html += `
`;
+ if (folderDisplay) {
+ html += `
📁 ${folderDisplay}
`;
+ }
+ html += `
`;
+ }
+ comboList.innerHTML = html;
+
+ // Add click listeners to options
+ comboList.querySelectorAll('div[data-idx]').forEach(el => {
+ el.addEventListener('click', () => {
+ const idx = parseInt(el.dataset.idx, 10);
+ if (!isNaN(idx) && idx >= 0 && idx < allModels.length) {
+ const chosenModel = allModels[idx];
+ if (chosenModel) {
+ this.queueResolution(missing, chosenModel);
+ }
+ }
+ });
+ });
+ };
+
+ // Initial populate
+ if (comboList) {
+ populateComboOptions('');
+ }
+
+ // Filter input with debounce
+ if (comboInput) {
+ const debouncedFilter = this.debounce(() => {
+ populateComboOptions(comboInput.value);
+ }, 200);
+ comboInput.addEventListener('input', debouncedFilter);
+
+ // Show dropdown on focus
+ comboInput.addEventListener('focus', () => {
+ if (comboList) comboList.style.display = 'block';
+ populateComboOptions(comboInput.value);
+ });
+
+ // Close on blur (with delay to allow click)
+ comboInput.addEventListener('blur', () => {
+ setTimeout(() => {
+ if (comboList) comboList.style.display = 'none';
+ }, 200);
+ });
+ }
+
+ // Refresh button - reload all models
+ if (comboRefresh) {
+ comboRefresh.addEventListener('click', async () => {
+ this.allModels = null; // Force reload
+ await this.ensureAllModelsLoaded();
+ populateComboOptions(comboInput?.value || '');
+ });
+ }
+ });
+ }
+
+ /**
+ * Render a single missing model entry
+ */
+ renderMissingModel(missing, missingIndex = 0) {
+ const allMatches = missing.matches || [];
+
+ // Filter out matches below 70% confidence threshold
+ const filteredMatches = allMatches.filter(m => m.confidence >= 70);
+ const hasMatches = filteredMatches.length > 0;
+
+ // Calculate 100% matches upfront (needed for download section)
+ const perfectMatches = filteredMatches.filter(m => m.confidence === 100);
+ const otherMatches = filteredMatches.filter(m => m.confidence < 100 && m.confidence >= 70);
+
+ // Format the missing filename for display
+ const missingFilename = this.formatFilename(missing.original_path, 60);
+
+ // Determine node info for the chip
+ const isSubgraphNode = missing.node_type && missing.node_type.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i);
+ let nodeLabel;
+ if (missing.subgraph_name) {
+ nodeLabel = missing.subgraph_name;
+ } else if (isSubgraphNode) {
+ nodeLabel = 'Subgraph';
+ } else {
+ nodeLabel = missing.node_type || 'Node';
+ }
+ const customNodeTitle = String(missing.node_title || '').trim();
+ const hasCustomNodeTitle = customNodeTitle && customNodeTitle !== nodeLabel;
+ const nodeChipText = this.escapeHtml(hasCustomNodeTitle
+ ? `${nodeLabel} #${missing.node_id} · ${customNodeTitle}`
+ : `${nodeLabel} #${missing.node_id}`);
+
+ // Start card
+ let html = `
`;
+
+ // Card Header: Filename as headline + node chip
+ html += ``;
+
+ // Selected bar - shows if this slot has a queued selection (BELOW card header)
+ const selectedBarId = `selected-bar-${missing.node_id}-${missing.widget_index}`;
+ html += `
`;
+
+ // Two-column layout
+ html += `
`;
+
+ // LEFT COLUMN: Local Matches
+ html += `
`;
+ html += `
Local Matches
`;
+ html += `
`;
+ html += this.renderLocalMatchesContent(missing, missingIndex);
+ html += `
`;
+
+ // Add all-models search picker - combo-style dropdown
+ const comboId = `combo-${missing.node_id}-${missing.widget_index}`;
+ html += `
`;
+ html += `
`;
+ html += `Model `;
+ html += `⟳ `;
+ html += `
`;
+ html += `
`;
+ html += `
`;
+
+ html += `
`; // End left column
+
+ // RIGHT COLUMN: Download Option
+ html += `
`;
+ html += `
Download
`;
+
+ const filename = missing.original_path?.split('/').pop()?.split('\\').pop() || '';
+ const downloadSource = missing.download_source;
+ const urnDownloadId = `urn-download-${missing.node_id}-${missing.widget_index}`;
+
+ if (perfectMatches.length > 0) {
+ // Has perfect local match - download not needed
+ html += `
`;
+ html += `
`;
+ html += this.getStatusBadge('Not needed', 'neutral');
+ html += `Exact local match available `;
+ html += `
`;
+ html += `
`;
+ } else if (downloadSource && downloadSource.url) {
+ html += this.renderDownloadSourceSection(missing, downloadSource);
+ } else if (missing.is_urn) {
+ html += `
`;
+ html += `
Resolving CivitAI download for this URN...
`;
+ html += `
`;
+ } else {
+ // No known download - offer search
+ html += `
`;
+ const searchSourcesId = `search-sources-${missing.node_id}-${missing.widget_index}`;
+ const searchSourceSelectId = `search-source-select-${missing.node_id}-${missing.widget_index}`;
+ html += `
`;
+ html += `
`;
+ html += `${this.getSearchIconHtml()} Search`;
+ html += ` `;
+ html += `
`;
+ html += `Source `;
+ html += ``;
+ html += `Everything `;
+ html += `Local Database `;
+ html += `HuggingFace `;
+ html += `CivitAI `;
+ if (this.isSourceAvailable('lora_manager_archive')) {
+ html += `LoRA Manager Archive `;
+ }
+ html += ` `;
+ html += `
`;
+ html += `
`;
+ html += this.renderDownloadTargetControls(missing, missing.category || 'checkpoints');
+ html += `
`;
+ html += `
`;
+ }
+
+ // Progress container (for downloads)
+ html += `
`;
+
+ html += `
`; // End right column
+ html += `
`; // End columns
+
+ html += `
`; // End card
+ return html;
+ }
+
+ /**
+ * Show a notification banner (similar to ComfyUI's "Reconnecting" banner)
+ */
+ showNotification(message, type = 'success') {
+ // Build children array, filtering out nulls
+ const children = [];
+
if (type === 'success') {
children.push($el("span", {
textContent: "✓",
- style: {
- fontSize: "18px",
- fontWeight: "bold"
- }
+ className: "ml-notification-icon"
}));
} else if (type === 'error') {
children.push($el("span", {
textContent: "×",
- style: {
- fontSize: "18px",
- fontWeight: "bold"
- }
+ className: "ml-notification-icon"
}));
} else if (type === 'info') {
children.push($el("span", {
textContent: "ℹ",
- style: {
- fontSize: "18px",
- fontWeight: "bold"
- }
+ className: "ml-notification-icon"
}));
}
// Create notification banner
const notification = $el("div", {
- style: {
- position: "fixed",
- top: "0",
- left: "50%",
- transform: "translateX(-50%)",
- backgroundColor: type === 'success' ? '#28a745' : type === 'error' ? '#dc3545' : '#007acc',
- color: "#ffffff",
- padding: "12px 24px",
- borderRadius: "0 0 8px 8px",
- fontSize: "14px",
- fontWeight: "500",
- zIndex: "100000",
- boxShadow: "0 4px 12px rgba(0,0,0,0.4)",
- display: "flex",
- alignItems: "center",
- gap: "12px",
- minWidth: "300px",
- maxWidth: "600px",
- textAlign: "center",
- animation: "slideDown 0.3s ease"
- }
+ className: `ml-notification ml-notification--${type}`
}, [
...children,
$el("span", {
textContent: message
}),
$el("button", {
+ className: "ml-notification-close",
textContent: "×",
onclick: () => {
if (notification.parentNode) {
notification.style.opacity = "0";
notification.style.transform = "translateX(-50%) translateY(-100%)";
- setTimeout(() => {
- if (notification.parentNode) {
- notification.parentNode.removeChild(notification);
- }
- }, 300);
- }
- },
- style: {
- background: "none",
- border: "none",
- color: "#ffffff",
- fontSize: "20px",
- cursor: "pointer",
- padding: "0",
- marginLeft: "auto",
- opacity: "0.8",
- width: "24px",
- height: "24px",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- borderRadius: "4px"
+ setTimeout(() => {
+ if (notification.parentNode) {
+ notification.parentNode.removeChild(notification);
+ }
+ }, 300);
+ }
}
})
]);
-
- // Add CSS animation if not already added
- if (!document.getElementById('model-linker-notification-style')) {
- const style = $el("style", {
- id: 'model-linker-notification-style',
- textContent: `
- @keyframes slideDown {
- from {
- opacity: 0;
- transform: translateX(-50%) translateY(-100%);
- }
- to {
- opacity: 1;
- transform: translateX(-50%) translateY(0);
- }
- }
- `
- });
- document.head.appendChild(style);
- }
-
- document.body.appendChild(notification);
-
- // Auto-dismiss after 4 seconds for success, 6 seconds for errors
- const dismissTime = type === 'success' ? 4000 : 6000;
- setTimeout(() => {
- if (notification.parentNode) {
- notification.style.opacity = "0";
- notification.style.transform = "translateX(-50%) translateY(-100%)";
- setTimeout(() => {
- if (notification.parentNode) {
- notification.parentNode.removeChild(notification);
- }
- }, 300);
- }
- }, dismissTime);
- }
-
- /**
- * Resolve a model - resolves ALL nodes that reference this model
- */
- async resolveModel(missing, resolvedModel) {
- console.log('resolveModel called:', missing?.original_path, '->', resolvedModel?.filename);
-
- if (!resolvedModel) {
- this.showNotification('No resolved model selected', 'error');
- return;
- }
-
- try {
- const workflow = this.getCurrentWorkflow();
- if (!workflow) {
- this.showNotification('No workflow loaded', 'error');
- return;
- }
-
- // Resolve ALL nodes that need this model (all_node_refs contains deduplicated refs)
- const nodeRefs = missing.all_node_refs || [missing];
- console.log('nodeRefs count:', nodeRefs?.length, 'is_lora_v2:', nodeRefs?.[0]?.is_lora_v2);
-
- const resolutions = nodeRefs.map(ref => ({
- node_id: ref.node_id,
- widget_index: ref.widget_index,
- resolved_path: resolvedModel.path,
- category: ref.category,
- resolved_model: resolvedModel,
- subgraph_id: ref.subgraph_id,
- is_top_level: ref.is_top_level,
- is_lora_v2: ref.is_lora_v2,
- original_lora_name: ref.name || ref.original_path
- }));
-
- const response = await api.fetchApi('/model_linker/resolve', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- workflow,
- resolutions: resolutions
- })
- });
-
- if (!response.ok) {
- throw new Error(`API error: ${response.status}`);
- }
-
- const data = await response.json();
- console.log('Resolve response: success=', data.success, ' missing count:', data.workflow?.nodes?.length);
-
- if (data.success) {
- // Update workflow in ComfyUI
- await this.updateWorkflowInComfyUI(data.workflow);
-
- // Show success notification
- const modelName = resolvedModel.relative_path || resolvedModel.filename || 'model';
- const count = resolutions.length;
- const refText = count > 1 ? ` (${count} references)` : '';
- this.showNotification(`✓ Model linked successfully: ${modelName}${refText}`, 'success');
-
- // Reload dialog using the updated workflow from API response
- // This ensures we're analyzing the correct updated workflow
- await this.loadWorkflowData(data.workflow);
- } else {
- this.showNotification('Failed to resolve model: ' + (data.error || 'Unknown error'), 'error');
- }
-
- } catch (error) {
- console.error('Model Linker: Error resolving model:', error);
- this.showNotification('Error resolving model: ' + error.message, 'error');
- }
- }
-
- /**
- * Auto-resolve all 100% confidence matches
- * @returns {object|null} The updated workflow if successful, null otherwise
- */
- async autoResolve100Percent() {
- try {
- const workflow = this.getCurrentWorkflow();
- if (!workflow) {
- this.showNotification('No workflow loaded', 'error');
- return null;
- }
-
- // Analyze workflow first
- const analyzeResponse = await api.fetchApi('/model_linker/analyze', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ workflow })
- });
-
- if (!analyzeResponse.ok) {
- throw new Error(`API error: ${analyzeResponse.status}`);
- }
-
- const analyzeData = await analyzeResponse.json();
- const missingModels = analyzeData.missing_models || [];
-
- // Collect all 100% matches
- const resolutions = [];
- for (const missing of missingModels) {
- const matches = missing.matches || [];
- const perfectMatch = matches.find((m) => m.confidence === 100);
-
- if (perfectMatch && perfectMatch.model) {
- resolutions.push({
- node_id: missing.node_id,
- widget_index: missing.widget_index,
- resolved_path: perfectMatch.model.path,
- category: missing.category,
- resolved_model: perfectMatch.model,
- subgraph_id: missing.subgraph_id, // Include subgraph_id for subgraph nodes
- is_top_level: missing.is_top_level, // True for top-level nodes, False for nodes in subgraph definitions
- is_lora_v2: missing.is_lora_v2,
- original_lora_name: missing.name || missing.original_path
- });
- }
- }
-
- if (resolutions.length === 0) {
- this.showNotification('No 100% confidence matches found to auto-resolve.', 'error');
- return null;
- }
-
- // Apply resolutions
- const resolveResponse = await api.fetchApi('/model_linker/resolve', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- workflow,
- resolutions
- })
- });
-
- if (!resolveResponse.ok) {
- throw new Error(`API error: ${resolveResponse.status}`);
- }
-
- const resolveData = await resolveResponse.json();
-
- if (resolveData.success) {
- // Update workflow in ComfyUI
- await this.updateWorkflowInComfyUI(resolveData.workflow);
-
- // Show success notification
- this.showNotification(
- `✓ Successfully linked ${resolutions.length} model${resolutions.length > 1 ? 's' : ''}!`,
- 'success'
- );
-
- // Reload dialog using the updated workflow from API response (if dialog is visible)
- if (this.contentElement) {
- await this.loadWorkflowData(resolveData.workflow);
- }
-
- // Return the updated workflow for callers who need it
- return resolveData.workflow;
- } else {
- this.showNotification('Failed to resolve models: ' + (resolveData.error || 'Unknown error'), 'error');
- return null;
- }
-
- } catch (error) {
- console.error('Model Linker: Error auto-resolving:', error);
- this.showNotification('Error auto-resolving: ' + error.message, 'error');
- return null;
- }
- }
-
- /**
- * Download all missing models that have download sources but no 100% local match
- */
- async downloadAllMissing() {
- if (!this.contentElement) return;
-
- try {
- const workflow = this.getCurrentWorkflow();
- if (!workflow) {
- this.showNotification('No workflow loaded', 'error');
- return;
- }
-
- // Analyze workflow first
- const analyzeResponse = await api.fetchApi('/model_linker/analyze', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ workflow })
- });
-
- if (!analyzeResponse.ok) {
- throw new Error(`API error: ${analyzeResponse.status}`);
- }
-
- const analyzeData = await analyzeResponse.json();
- const missingModels = analyzeData.missing_models || [];
-
- // Collect models that need downloading:
- // - Have a download_source with valid URL
- // - Do NOT have any 100% confidence local matches
- const toDownload = [];
- for (const missing of missingModels) {
- const perfectMatches = (missing.matches || []).filter(m => m.confidence === 100);
-
- // Skip if has 100% local match or no download source
- if (perfectMatches.length > 0 || !missing.download_source?.url) {
- continue;
- }
-
- toDownload.push(missing);
- }
-
- if (toDownload.length === 0) {
- this.showNotification('No models available for download (all have local matches or no download URLs).', 'info');
- return;
- }
-
- // Start all downloads
- this.showNotification(`Starting ${toDownload.length} download${toDownload.length > 1 ? 's' : ''}...`, 'info');
-
- for (const missing of toDownload) {
- // Use downloadModel which handles progress tracking
- this.downloadModel(missing);
- }
-
- // Update button state to show Cancel All
- this.updateDownloadAllButtonState();
-
- } catch (error) {
- console.error('Model Linker: Error in downloadAllMissing:', error);
- this.showNotification('Error starting downloads: ' + error.message, 'error');
- }
- }
-
- /**
- * Auto-resolve a model after download completes
- * Reloads the workflow analysis and resolves if the downloaded model is found
- */
- async autoResolveAfterDownload(missing, downloadedFilename) {
- try {
- const workflow = this.getCurrentWorkflow();
- if (!workflow) {
- // Just reload the UI to show updated state
- await this.loadWorkflowData();
- return;
- }
-
- // Re-analyze workflow to find the newly downloaded model
- const analyzeResponse = await api.fetchApi('/model_linker/analyze', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ workflow })
- });
-
- if (!analyzeResponse.ok) {
- // Just reload UI
- await this.loadWorkflowData();
- return;
- }
-
- const analyzeData = await analyzeResponse.json();
- const missingModels = analyzeData.missing_models || [];
-
- // Find the missing model entry that matches our download by filename
- const targetMissing = missingModels.find(m => {
- const missingFilename = m.original_path?.split('/').pop()?.split('\\').pop() || '';
- return missingFilename.toLowerCase() === downloadedFilename.toLowerCase();
- });
-
- if (!targetMissing) {
- // Model no longer missing - already resolved or workflow changed
- await this.loadWorkflowData();
- return;
- }
-
- // Look for a 100% match with the downloaded filename
- const matches = targetMissing.matches || [];
- const perfectMatch = matches.find(m => {
- const matchFilename = m.filename || m.model?.filename || '';
- // Check for exact match or 100% confidence
- return m.confidence === 100 ||
- matchFilename.toLowerCase() === downloadedFilename.toLowerCase();
- });
-
- if (perfectMatch && perfectMatch.model) {
- // Auto-resolve ALL nodes that need this model
- // all_node_refs contains all nodes referencing this model (deduplicated)
- const nodeRefs = targetMissing.all_node_refs || [targetMissing];
- const resolutions = nodeRefs.map(ref => ({
- node_id: ref.node_id,
- widget_index: ref.widget_index,
- resolved_path: perfectMatch.model.path,
- category: ref.category,
- resolved_model: perfectMatch.model,
- subgraph_id: ref.subgraph_id,
- is_top_level: ref.is_top_level,
- is_lora_v2: ref.is_lora_v2,
- original_lora_name: ref.name || ref.original_path
- }));
-
- const resolveResponse = await api.fetchApi('/model_linker/resolve', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- workflow,
- resolutions: resolutions
- })
- });
-
- if (resolveResponse.ok) {
- const resolveData = await resolveResponse.json();
- if (resolveData.success) {
- await this.updateWorkflowInComfyUI(resolveData.workflow);
- const count = resolutions.length;
- this.showNotification(`✓ Auto-resolved: ${downloadedFilename} (${count} reference${count > 1 ? 's' : ''})`, 'success');
- await this.loadWorkflowData(resolveData.workflow);
- return;
- }
- }
- }
-
- // If we couldn't auto-resolve, just reload the UI
- await this.loadWorkflowData();
-
- } catch (error) {
- console.error('Model Linker: Error auto-resolving after download:', error);
- // Still reload UI even on error
- await this.loadWorkflowData();
- }
- }
-
- /**
- * Download a model from a known source
- */
- async downloadModel(missing) {
- const source = missing.download_source;
- if (!source || !source.url) {
- this.showNotification('No download URL available', 'error');
- return;
- }
-
- // Use filename from download source if available (may be different from original)
- const originalFilename = missing.original_path?.split('/').pop()?.split('\\').pop() || 'model.safetensors';
- const filename = source.filename || originalFilename;
- const targetSelection = this.getDownloadTargetSelection(missing, source.directory || missing.category || 'checkpoints');
- const category = targetSelection.category;
- const subfolder = targetSelection.subfolder;
- const progressId = `download-progress-${missing.node_id}-${missing.widget_index}`;
- const progressDiv = this.contentElement?.querySelector(`#${progressId}`);
- const downloadBtn = this.contentElement?.querySelector(`#download-${missing.node_id}-${missing.widget_index}`);
- const tokens = this.getStoredTokens();
-
- try {
- // Disable button and show progress with cancel button immediately
- if (downloadBtn) {
- downloadBtn.disabled = true;
- downloadBtn.textContent = 'Starting...';
- }
- if (progressDiv) {
- progressDiv.style.display = 'block';
- // Show progress bar with cancel button immediately
- progressDiv.innerHTML = `
-
- `;
- }
-
- // Start download
- const response = await api.fetchApi('/model_linker/download', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- url: source.url,
- filename: filename,
- category: category,
- subfolder: subfolder,
- hf_token: tokens.hf_token,
- civitai_key: tokens.civitai_key
- })
- });
-
- if (!response.ok) {
- throw new Error(`Download failed: ${response.status}`);
- }
-
- const data = await response.json();
- if (!data.success) {
- throw new Error(data.error || 'Download failed');
- }
-
- // Track download and poll for progress
- const downloadId = data.download_id;
- this.activeDownloads[downloadId] = { missing, progressDiv, downloadBtn };
-
- // Update the Download All button state
- this.updateDownloadAllButtonState();
-
- // Attach cancel handler to pending button (before polling replaces it)
- const pendingCancelBtn = progressDiv?.querySelector('.cancel-download-btn-pending');
- if (pendingCancelBtn) {
- pendingCancelBtn.addEventListener('click', () => this.cancelDownload(downloadId));
- }
-
- this.pollDownloadProgress(downloadId);
-
- } catch (error) {
- console.error('Model Linker: Download error:', error);
- if (progressDiv) {
- progressDiv.innerHTML = this.renderStatusMessage(error.message, 'error');
- }
- if (downloadBtn) {
- downloadBtn.disabled = false;
- downloadBtn.innerHTML = '
☁ Retry';
- }
- this.showNotification('Download failed: ' + error.message, 'error');
- }
- }
-
- /**
- * Poll download progress
- */
- async pollDownloadProgress(downloadId) {
- const info = this.activeDownloads[downloadId];
- if (!info) return;
-
- try {
- const response = await api.fetchApi(`/model_linker/progress/${downloadId}`);
- if (!response.ok) {
- throw new Error('Failed to get progress');
- }
-
- const progress = await response.json();
- const { progressDiv, downloadBtn, missing } = info;
-
- if (progress.status === 'downloading' || progress.status === 'starting') {
- const percent = progress.progress || 0;
- const downloaded = this.formatBytes(progress.downloaded || 0);
- const total = this.formatBytes(progress.total_size || 0);
- const speed = progress.speed ? this.formatBytes(progress.speed) + '/s' : '';
-
- if (progressDiv) {
- progressDiv.innerHTML = `
-
-
-
- ${downloaded} / ${total} (${percent}%)
- ${speed}
-
-
- `;
- // Attach cancel handler
- const cancelBtn = progressDiv.querySelector('.cancel-download-btn');
- if (cancelBtn && !cancelBtn._hasListener) {
- cancelBtn._hasListener = true;
- cancelBtn.addEventListener('click', () => this.cancelDownload(downloadId));
- }
- }
- if (downloadBtn) {
- downloadBtn.textContent = `${percent}%`;
- }
-
- // Continue polling
- setTimeout(() => this.pollDownloadProgress(downloadId), 1000);
-
- } else if (progress.status === 'completed') {
- if (progressDiv) {
- progressDiv.innerHTML = this.renderStatusMessage('Download complete! Auto-linking...', 'success');
- }
- if (downloadBtn) {
- downloadBtn.textContent = '✓ Done';
- downloadBtn.classList.add('ml-btn-primary');
- }
- delete this.activeDownloads[downloadId];
- this.updateDownloadAllButtonState();
- this.showNotification(`Downloaded: ${progress.filename}`, 'success');
-
- // Auto-resolve: Reload workflow data and try to resolve the downloaded model
- // Small delay to ensure file system is updated
- setTimeout(async () => {
- await this.autoResolveAfterDownload(missing, progress.filename);
- }, 500);
-
- } else if (progress.status === 'error') {
- if (progressDiv) {
- progressDiv.innerHTML = this.renderStatusMessage(progress.error || 'Download failed', 'error');
- }
- if (downloadBtn) {
- downloadBtn.disabled = false;
- downloadBtn.textContent = 'Retry';
- }
- delete this.activeDownloads[downloadId];
- this.updateDownloadAllButtonState();
-
- } else if (progress.status === 'cancelled') {
- if (progressDiv) {
- progressDiv.innerHTML = this.renderStatusMessage('Download cancelled - incomplete file removed', 'warning');
- }
- if (downloadBtn) {
- downloadBtn.disabled = false;
- downloadBtn.innerHTML = '
☁ Download';
- }
- delete this.activeDownloads[downloadId];
- this.updateDownloadAllButtonState();
- this.showNotification('Download cancelled', 'info');
-
- } else {
- // Unknown status, keep polling
- setTimeout(() => this.pollDownloadProgress(downloadId), 500);
- }
-
- } catch (error) {
- console.error('Model Linker: Progress poll error:', error);
- const info = this.activeDownloads[downloadId];
- // Update UI to show error state instead of just disappearing
- if (info) {
- const { progressDiv, downloadBtn } = info;
- if (progressDiv) {
- progressDiv.innerHTML = this.renderStatusMessage('Connection lost - download may have failed', 'error');
- }
- if (downloadBtn) {
- downloadBtn.disabled = false;
- downloadBtn.textContent = 'Retry';
- downloadBtn.style.background = '#4CAF50';
- }
- }
- delete this.activeDownloads[downloadId];
- this.updateDownloadAllButtonState();
- }
- }
-
- /**
- * Cancel an active download
- */
- async cancelDownload(downloadId) {
- try {
- const response = await api.fetchApi(`/model_linker/cancel/${downloadId}`, {
- method: 'POST'
- });
-
- if (!response.ok) {
- throw new Error('Failed to cancel download');
- }
-
- const info = this.activeDownloads[downloadId];
- if (info?.progressDiv) {
- info.progressDiv.innerHTML = this.renderStatusMessage('Cancelling download...', 'info');
- }
-
- } catch (error) {
- console.error('Model Linker: Cancel error:', error);
- this.showNotification('Failed to cancel download', 'error');
- }
- }
-
- /**
- * Search online for a model
- */
- async searchOnline(missing) {
- let filename = missing.original_path?.split('/').pop()?.split('\\').pop() || '';
- let category = missing.category || '';
- const state = this.getSearchState(missing);
- const selectedSource = state.selectedSource || 'all';
- const selectedSourceLabel = this.getSearchSourceLabel(selectedSource);
-
- // For URNs, use the CivitAI model name for searching instead of the URN itself
- // and pass the URN type as category (CivitAI expects specific type names)
- if (missing.is_urn) {
- if (missing.civitai_info?.model_name) {
- filename = missing.civitai_info.model_name;
- }
- // Pass URN type directly - CivitAPI expects types like 'Upscaler', 'Checkpoint'
- const urnType = missing.urn_type || '';
- if (urnType) {
- // Map URN types to CivitAI type names
- const typeMap = {
- 'checkpoint': 'Checkpoint',
- 'lora': 'LORA',
- 'vae': 'VAE',
- 'upscaler': 'Upscaler',
- 'upscale_model': 'Upscaler',
- 'embedding': 'TextualInversion',
- 'controlnet': 'Controlnet'
- };
- const civitaiType = typeMap[urnType.toLowerCase()];
- if (civitaiType) {
- category = civitaiType;
- }
- }
- }
-
- const isUrn = missing.is_urn || false;
- const resultsId = `search-results-${missing.node_id}-${missing.widget_index}`;
- const resultsDiv = this.contentElement?.querySelector(`#${resultsId}`);
- const searchBtn = this.contentElement?.querySelector(`#search-${missing.node_id}-${missing.widget_index}`);
-
- try {
- if (searchBtn) {
- searchBtn.disabled = true;
- searchBtn.innerHTML = `${this.getSearchIconHtml()} 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();
- const searchData = {
- filename,
- category,
- is_urn: isUrn,
- sources: [selectedSource],
- civitai_session_token: tokens.civitai_session_token,
- civitai_candidate_limit: tokens.civitai_candidate_limit,
- civitai_use_trpc_search: tokens.civitai_use_trpc_search,
- civitai_use_html_fallback: tokens.civitai_use_html_fallback,
- hf_token: tokens.hf_token,
- brave_search_api_key: tokens.brave_search_api_key,
- hf_use_api_search: tokens.hf_use_api_search,
- hf_use_comfy_org_fallback: tokens.hf_use_comfy_org_fallback,
- hf_use_brave_fallback: tokens.hf_use_brave_fallback
- };
- if (isUrn && missing.urn) {
- searchData.model_id = missing.urn.model_id;
- searchData.version_id = missing.urn.version_id;
- }
-
- console.log('Model Linker: Search request:', JSON.stringify(searchData));
-
- const response = await api.fetchApi('/model_linker/search', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(searchData)
- });
-
- if (!response.ok) {
- throw new Error(`Search failed: ${response.status}`);
- }
-
- const data = await response.json();
- console.log('Model Linker: Search response:', JSON.stringify(data));
- state.results = this.mergeSearchResults(state.results, data);
- state.lastAttemptSources = Array.isArray(data.searched_sources) ? data.searched_sources : [selectedSource];
- state.lastAttemptFound = this.hasSearchResults(data);
- if (data.civitai) {
- missing.civitai_search_result = {
- base_model: data.civitai.base_model,
- tags: data.civitai.tags || [],
- trained_words: data.civitai.trained_words || [],
- filename: data.civitai.filename,
- name: data.civitai.name,
- type: data.civitai.type
- };
- }
- this.displaySearchResults(missing, state, resultsDiv);
- this.applySearchResultSuggestion(missing);
-
- } catch (error) {
- console.error('Model Linker: Search error:', error);
- if (resultsDiv) {
- resultsDiv.innerHTML = this.renderStatusMessage(`Search failed: ${error.message}`, 'error');
- }
- } finally {
- if (searchBtn) {
- searchBtn.disabled = false;
- searchBtn.innerHTML = `${this.getSearchIconHtml()} Search Again`;
- }
- }
- }
-
- /**
- * Resolve URN asynchronously - fetch CivitAI info and update UI
- */
- async resolveUrnAsync(modelId, versionId, loadingElementId, modelUrl) {
- console.log('resolveUrnAsync called:', modelId, versionId);
- if (!modelId || !versionId) {
- console.log('resolveUrnAsync: missing modelId or versionId');
- return;
- }
-
- try {
- const tokens = this.getStoredTokens();
- const payload = {
- filename: modelId + '_' + versionId,
- category: '',
- is_urn: true,
- sources: ['civitai'],
- model_id: modelId,
- version_id: versionId,
- civitai_candidate_limit: tokens.civitai_candidate_limit
- };
- console.log('resolveUrnAsync payload:', JSON.stringify(payload));
-
- const response = await api.fetchApi('/model_linker/search', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(payload)
- });
-
- console.log('resolveUrnAsync response status:', response.status);
-
- if (response.ok) {
- const data = await response.json();
- const loadingEl = document.getElementById(loadingElementId);
- if (loadingEl && data.civitai) {
- const civitai = data.civitai;
- const label = civitai.name || civitai.filename || 'Model';
- const url = modelUrl || `https://civitai.com/models/${modelId}?modelVersionId=${versionId}`;
- loadingEl.innerHTML = `
${label} `;
- } else if (loadingEl) {
- loadingEl.textContent = 'Not found';
- loadingEl.style.color = 'var(--ml-text-muted)';
- }
-
- const downloadContainerId = loadingElementId.replace('urn-loading-', 'urn-download-');
- const downloadEl = document.getElementById(downloadContainerId);
- if (downloadEl && data.civitai) {
- const missing = this.missingModels.find(m =>
- `urn-download-${m.node_id}-${m.widget_index}` === downloadContainerId
- );
- if (missing) {
- missing.civitai_info = {
- model_name: data.civitai.name,
- version_name: data.civitai.version_name,
- expected_filename: data.civitai.filename,
- base_model: data.civitai.base_model,
- tags: data.civitai.tags || []
- };
- missing.download_source = {
- source: 'civitai',
- url: data.civitai.download_url,
- filename: data.civitai.filename,
- name: data.civitai.name,
- type: data.civitai.type,
- directory: missing.category || 'checkpoints',
- match_type: 'exact',
- size: data.civitai.size,
- model_id: data.civitai.model_id || modelId,
- version_id: data.civitai.version_id || versionId,
- model_url: data.civitai.url || `https://civitai.com/models/${modelId}?modelVersionId=${versionId}`,
- base_model: data.civitai.base_model,
- tags: data.civitai.tags || []
- };
- downloadEl.outerHTML = this.renderDownloadSourceSection(missing, missing.download_source);
-
- const refreshedBtn = this.contentElement?.querySelector(`#download-${missing.node_id}-${missing.widget_index}`);
- if (refreshedBtn) {
- refreshedBtn.addEventListener('click', () => {
- this.downloadModel(missing);
- });
- }
- if (this.contentElement) {
- this.wireDownloadTargetAutocomplete(this.contentElement, missing);
- }
- this.refreshUrnLocalMatches(missing);
- }
- } else if (downloadEl) {
- downloadEl.innerHTML = `
Unable to resolve direct download for this URN.
`;
- }
- } else {
- const loadingEl = document.getElementById(loadingElementId);
- if (loadingEl) {
- loadingEl.textContent = 'Error';
- loadingEl.style.color = '#f44336';
- }
- const downloadContainerId = loadingElementId.replace('urn-loading-', 'urn-download-');
- const downloadEl = document.getElementById(downloadContainerId);
- if (downloadEl) {
- downloadEl.innerHTML = `
Failed to resolve URN download.
`;
- }
- }
- } catch (error) {
- console.error('Model Linker: URN resolve error:', error);
- const loadingEl = document.getElementById(loadingElementId);
- if (loadingEl) {
- loadingEl.textContent = 'Error';
- loadingEl.style.color = '#f44336';
- }
- const downloadContainerId = loadingElementId.replace('urn-loading-', 'urn-download-');
- const downloadEl = document.getElementById(downloadContainerId);
- if (downloadEl) {
- downloadEl.innerHTML = `
Failed to resolve URN download.
`;
- }
- }
- }
-
- /**
- * Display search results
- */
- displaySearchResults(missing, state, container) {
- if (!container) return;
-
- const results = state?.results || {};
- const popular = results.popular;
- const modelListResult = results.model_list;
- const hfResult = results.huggingface ? (Array.isArray(results.huggingface) ? results.huggingface[0] : results.huggingface) : null;
- const civitaiResult = results.civitai ? (Array.isArray(results.civitai) ? results.civitai[0] : results.civitai) : null;
- const loraManagerArchiveResult = results.lora_manager_archive ? (Array.isArray(results.lora_manager_archive) ? results.lora_manager_archive[0] : results.lora_manager_archive) : null;
- const hasResults = popular || modelListResult || hfResult || civitaiResult || loraManagerArchiveResult;
-
- if (!hasResults) {
- const searchedLabel = (state?.lastAttemptSources || []).map(source => this.getSearchSourceLabel(source)).join(', ');
- container.innerHTML = this.renderStatusMessage(
- searchedLabel ? `No matches found in ${searchedLabel}.` : 'No matches found online for this model.',
- 'warning'
- );
- return;
- }
-
- let html = '
';
-
- if (state?.lastAttemptFound === false) {
- const searchedLabel = (state.lastAttemptSources || []).map(source => this.getSearchSourceLabel(source)).join(', ');
- html += this.renderStatusMessage(`No new matches found in ${searchedLabel}. Existing results are kept below.`, 'warning');
- }
-
- // Popular models result (highest priority)
- if (popular) {
- const popularFilename = popular.filename || missing.original_path?.split('/').pop()?.split('\\').pop() || '';
- const actionHtml = `
☁ Download`;
- html += this.renderOnlineSearchResultCard({
- statusClass: 'ml-status-success',
- title: 'Found in Popular Models',
- result: popular,
- filename: popularFilename,
- secondaryText: popular.name || '',
- actionHtml
- });
- }
-
- // Model list result (ComfyUI Manager database with fuzzy matching)
- if (modelListResult && modelListResult.url) {
- const matchType = modelListResult.match_type === 'exact' ? 'Exact match' : 'Similar model';
- const statusClass = modelListResult.match_type === 'exact' ? 'ml-status-success' : 'ml-status-info';
- const actionHtml = `
☁ Download`;
- html += this.renderOnlineSearchResultCard({
- statusClass,
- title: `${matchType} in Model Database`,
- result: modelListResult,
- filename: modelListResult.filename,
- secondaryText: modelListResult.name || '',
- actionHtml
- });
- }
-
- // HuggingFace result
- if (hfResult && hfResult.url) {
- const hfRepo = hfResult.repo_id || hfResult.repo || '';
- const hfModelUrl = hfRepo ? `https://huggingface.co/${hfRepo}` : this.getModelCardUrl(hfResult.url);
- let actionHtml = `
☁ Download`;
- if (hfModelUrl) {
- actionHtml += `
Open on HuggingFace `;
- }
- html += this.renderOnlineSearchResultCard({
- statusClass: 'ml-status-info',
- title: 'Found on HuggingFace',
- result: hfResult,
- filename: hfResult.filename,
- secondaryText: hfRepo,
- actionHtml
- });
- }
-
- // LoRA Manager archive result
- if (loraManagerArchiveResult && loraManagerArchiveResult.url) {
- const archiveFilename = loraManagerArchiveResult.filename || missing.original_path?.split('/').pop()?.split('\\').pop() || '';
- const actionHtml = loraManagerArchiveResult.download_url
- ? `
☁ Download`
- : '';
- html += this.renderOnlineSearchResultCard({
- statusClass: 'ml-status-info',
- title: 'Found in LoRA Manager Archive',
- result: loraManagerArchiveResult,
- filename: archiveFilename,
- secondaryText: loraManagerArchiveResult.version_name || loraManagerArchiveResult.name || '',
- actionHtml
- });
- }
-
- // CivitAI result
- if (civitaiResult && civitaiResult.download_url) {
- const modelUrl = civitaiResult.url || (civitaiResult.model_id ? `https://civitai.com/models/${civitaiResult.model_id}${civitaiResult.version_id ? `?modelVersionId=${civitaiResult.version_id}` : ''}` : '');
- // Use expected_filename from URN resolution, or fallback to civitaiResult filename
- 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 = `
${modelName} ${civitaiResult.type || ''}
`;
- const actionHtml = `
☁ Download`;
- html += this.renderOnlineSearchResultCard({
- statusClass: 'ml-status-warning',
- title: 'Found on CivitAI',
- result: civitaiResult,
- filename: downloadFilename,
- secondaryText: '',
- topLineHtml,
- actionHtml
- });
- }
-
- html += '
';
- container.innerHTML = html;
-
- // Attach download listeners
- const downloadBtns = container.querySelectorAll('.search-download-btn');
- downloadBtns.forEach(btn => {
- btn.addEventListener('click', () => {
- const url = btn.dataset.url;
- const filename = btn.dataset.filename;
- const category = btn.dataset.category;
- this.downloadFromSearch(missing, url, filename, category, btn);
- });
- });
- }
-
- /**
- * Download from search results
- */
- async downloadFromSearch(missing, url, filename, category, btn) {
- const progressId = `download-progress-${missing.node_id}-${missing.widget_index}`;
- const progressDiv = this.contentElement?.querySelector(`#${progressId}`);
- const tokens = this.getStoredTokens();
- const targetSelection = this.getDownloadTargetSelection(missing, category || missing.category || 'checkpoints');
-
- try {
- btn.disabled = true;
- btn.textContent = 'Starting...';
-
- if (progressDiv) {
- progressDiv.style.display = 'block';
- // Show progress bar with cancel button immediately
- progressDiv.innerHTML = `
-
- `;
- }
-
- const response = await api.fetchApi('/model_linker/download', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- url,
- filename,
- category: targetSelection.category,
- subfolder: targetSelection.subfolder,
- hf_token: tokens.hf_token,
- civitai_key: tokens.civitai_key
- })
- });
-
- if (!response.ok) {
- throw new Error(`Download failed: ${response.status}`);
- }
-
- const data = await response.json();
- if (!data.success) {
- throw new Error(data.error || 'Download failed');
- }
-
- // Track and poll
- const downloadId = data.download_id;
- this.activeDownloads[downloadId] = { missing, progressDiv, downloadBtn: btn };
-
- // Update the Download All button state
- this.updateDownloadAllButtonState();
-
- // Attach cancel handler to pending button (before polling replaces it)
- const pendingCancelBtn = progressDiv?.querySelector('.cancel-download-btn-pending');
- if (pendingCancelBtn) {
- pendingCancelBtn.addEventListener('click', () => this.cancelDownload(downloadId));
- }
-
- this.pollDownloadProgress(downloadId);
-
- } catch (error) {
- console.error('Model Linker: Download error:', error);
- if (progressDiv) {
- progressDiv.innerHTML = this.renderStatusMessage(error.message, 'error');
- }
- btn.disabled = false;
- btn.textContent = 'Retry';
- this.showNotification('Download failed: ' + error.message, 'error');
- }
- }
-
- /**
- * Format bytes to human readable string
- */
- formatBytes(bytes) {
- if (bytes === 0) return '0 B';
- const k = 1024;
- const sizes = ['B', 'KB', 'MB', 'GB'];
- const i = Math.floor(Math.log(bytes) / Math.log(k));
- return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
- }
-
- /**
- * Extract model card URL from a download URL
- * HuggingFace: https://huggingface.co/Owner/Repo/resolve/main/file.safetensors -> https://huggingface.co/Owner/Repo
- * CivitAI: https://civitai.com/api/download/models/123?type=Model -> https://civitai.com/models/123
- */
- getModelCardUrl(downloadUrl) {
- if (!downloadUrl) return null;
-
- try {
- // HuggingFace URLs
- if (downloadUrl.includes('huggingface.co')) {
- // Extract owner/repo from URL
- const match = downloadUrl.match(/huggingface\.co\/([^\/]+\/[^\/]+)/);
- if (match) {
- return `https://huggingface.co/${match[1]}`;
- }
- }
-
- // CivitAI URLs
- if (downloadUrl.includes('civitai.com')) {
- // Format: /api/download/models/123456 or /models/123456/...
- const modelIdMatch = downloadUrl.match(/models\/(\d+)/);
- if (modelIdMatch) {
- return `https://civitai.com/models/${modelIdMatch[1]}`;
- }
- }
- } catch (e) {
- console.error('Error parsing model card URL:', e);
- }
-
- return null;
- }
-
- /**
- * Update workflow in ComfyUI's UI/memory
- * Updates the current workflow in place instead of creating a new tab
- */
- async updateWorkflowInComfyUI(workflow) {
- if (!app || !app.graph) {
- console.warn('Model Linker: Could not update workflow - app or app.graph not available');
- return;
- }
-
- try {
- // Method 1: Try to directly update the current graph using configure
- // This is the most direct way to update in place
- if (app.graph && typeof app.graph.configure === 'function') {
- app.graph.configure(workflow);
- return;
- }
-
- // Method 2: Try deserialize to update the graph in place
- if (app.graph && typeof app.graph.deserialize === 'function') {
- app.graph.deserialize(workflow);
- return;
- }
-
- // Method 3: Use loadGraphData with explicit parameters to update current tab
- // The key is to NOT create a new workflow - pass null or undefined for the workflow parameter
- // clean=false means don't clear the graph first
- // restore_view=false means don't restore the viewport
- // workflow=null means update current workflow instead of creating new one
- if (app.loadGraphData) {
- // Try with null as 4th parameter first
- await app.loadGraphData(workflow, false, false, null);
- return;
- }
-
- console.warn('Model Linker: No method available to update workflow');
- } catch (error) {
- console.error('Model Linker: Error updating workflow in ComfyUI:', error);
- // Don't throw - allow the workflow update to continue even if UI update fails
- // The backend has already updated the workflow data
- }
- }
-}
-
-// Main extension class
-class ModelLinker {
- constructor() {
- this.linkerButton = null;
- this.buttonGroup = null;
- this.buttonId = "model-linker-button";
- this.dialog = null;
- this.isCheckingMissing = false; // Prevent multiple simultaneous checks
- this.lastCheckedWorkflow = null; // Track to avoid duplicate checks
- }
-
+
+ document.body.appendChild(notification);
+
+ // Auto-dismiss after 4 seconds for success, 6 seconds for errors
+ const dismissTime = type === 'success' ? 4000 : 6000;
+ setTimeout(() => {
+ if (notification.parentNode) {
+ notification.style.opacity = "0";
+ notification.style.transform = "translateX(-50%) translateY(-100%)";
+ setTimeout(() => {
+ if (notification.parentNode) {
+ notification.parentNode.removeChild(notification);
+ }
+ }, 300);
+ }
+ }, dismissTime);
+ }
+
+ /**
+ * Resolve a model - resolves ALL nodes that reference this model
+ */
+ async resolveModel(missing, resolvedModel) {
+ console.log('resolveModel called:', missing?.original_path, '->', resolvedModel?.filename);
+
+ if (!resolvedModel) {
+ this.showNotification('No resolved model selected', 'error');
+ return;
+ }
+
+ try {
+ const workflow = this.getCurrentWorkflow();
+ if (!workflow) {
+ this.showNotification('No workflow loaded', 'error');
+ return;
+ }
+
+ // Resolve ALL nodes that need this model (all_node_refs contains deduplicated refs)
+ const nodeRefs = missing.all_node_refs || [missing];
+ console.log('nodeRefs count:', nodeRefs?.length, 'is_lora_v2:', nodeRefs?.[0]?.is_lora_v2);
+
+ const resolutions = nodeRefs.map(ref => ({
+ node_id: ref.node_id,
+ widget_index: ref.widget_index,
+ resolved_path: resolvedModel.path,
+ category: ref.category,
+ resolved_model: resolvedModel,
+ subgraph_id: ref.subgraph_id,
+ is_top_level: ref.is_top_level,
+ is_lora_v2: ref.is_lora_v2,
+ original_lora_name: ref.name || ref.original_path
+ }));
+
+ const response = await api.fetchApi('/model_linker/resolve', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ workflow,
+ resolutions: resolutions
+ })
+ });
+
+ if (!response.ok) {
+ throw new Error(`API error: ${response.status}`);
+ }
+
+ const data = await response.json();
+ console.log('Resolve response: success=', data.success, ' missing count:', data.workflow?.nodes?.length);
+
+ if (data.success) {
+ // Update workflow in ComfyUI
+ await this.updateWorkflowInComfyUI(data.workflow);
+
+ // Show success notification
+ const modelName = resolvedModel.relative_path || resolvedModel.filename || 'model';
+ const count = resolutions.length;
+ const refText = count > 1 ? ` (${count} references)` : '';
+ this.showNotification(`✓ Model linked successfully: ${modelName}${refText}`, 'success');
+
+ // Reload dialog using the updated workflow from API response
+ // This ensures we're analyzing the correct updated workflow
+ await this.loadWorkflowData(data.workflow);
+ } else {
+ this.showNotification('Failed to resolve model: ' + (data.error || 'Unknown error'), 'error');
+ }
+
+ } catch (error) {
+ console.error('Model Linker: Error resolving model:', error);
+ this.showNotification('Error resolving model: ' + error.message, 'error');
+ }
+ }
+
+ /**
+ * Auto-resolve all 100% confidence matches
+ * @returns {object|null} The updated workflow if successful, null otherwise
+ */
+ async autoResolve100Percent() {
+ try {
+ const workflow = this.getCurrentWorkflow();
+ if (!workflow) {
+ this.showNotification('No workflow loaded', 'error');
+ return null;
+ }
+
+ // Analyze workflow first
+ const analyzeResponse = await api.fetchApi('/model_linker/analyze', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ workflow })
+ });
+
+ if (!analyzeResponse.ok) {
+ throw new Error(`API error: ${analyzeResponse.status}`);
+ }
+
+ const analyzeData = await analyzeResponse.json();
+ const missingModels = analyzeData.missing_models || [];
+
+ // Collect all 100% matches
+ const resolutions = [];
+ for (const missing of missingModels) {
+ const matches = missing.matches || [];
+ const perfectMatch = matches.find((m) => m.confidence === 100);
+
+ if (perfectMatch && perfectMatch.model) {
+ resolutions.push({
+ node_id: missing.node_id,
+ widget_index: missing.widget_index,
+ resolved_path: perfectMatch.model.path,
+ category: missing.category,
+ resolved_model: perfectMatch.model,
+ subgraph_id: missing.subgraph_id, // Include subgraph_id for subgraph nodes
+ is_top_level: missing.is_top_level, // True for top-level nodes, False for nodes in subgraph definitions
+ is_lora_v2: missing.is_lora_v2,
+ original_lora_name: missing.name || missing.original_path
+ });
+ }
+ }
+
+ if (resolutions.length === 0) {
+ this.showNotification('No 100% confidence matches found to auto-resolve.', 'error');
+ return null;
+ }
+
+ // Apply resolutions
+ const resolveResponse = await api.fetchApi('/model_linker/resolve', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ workflow,
+ resolutions
+ })
+ });
+
+ if (!resolveResponse.ok) {
+ throw new Error(`API error: ${resolveResponse.status}`);
+ }
+
+ const resolveData = await resolveResponse.json();
+
+ if (resolveData.success) {
+ // Update workflow in ComfyUI
+ await this.updateWorkflowInComfyUI(resolveData.workflow);
+
+ // Show success notification
+ this.showNotification(
+ `✓ Successfully linked ${resolutions.length} model${resolutions.length > 1 ? 's' : ''}!`,
+ 'success'
+ );
+
+ // Reload dialog using the updated workflow from API response (if dialog is visible)
+ if (this.contentElement) {
+ await this.loadWorkflowData(resolveData.workflow);
+ }
+
+ // Return the updated workflow for callers who need it
+ return resolveData.workflow;
+ } else {
+ this.showNotification('Failed to resolve models: ' + (resolveData.error || 'Unknown error'), 'error');
+ return null;
+ }
+
+ } catch (error) {
+ console.error('Model Linker: Error auto-resolving:', error);
+ this.showNotification('Error auto-resolving: ' + error.message, 'error');
+ return null;
+ }
+ }
+
+ /**
+ * Download all missing models that have download sources but no 100% local match
+ */
+ async downloadAllMissing() {
+ if (!this.contentElement) return;
+
+ try {
+ const workflow = this.getCurrentWorkflow();
+ if (!workflow) {
+ this.showNotification('No workflow loaded', 'error');
+ return;
+ }
+
+ // Analyze workflow first
+ const analyzeResponse = await api.fetchApi('/model_linker/analyze', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ workflow })
+ });
+
+ if (!analyzeResponse.ok) {
+ throw new Error(`API error: ${analyzeResponse.status}`);
+ }
+
+ const analyzeData = await analyzeResponse.json();
+ const missingModels = analyzeData.missing_models || [];
+
+ // Collect models that need downloading:
+ // - Have a download_source with valid URL
+ // - Do NOT have any 100% confidence local matches
+ const toDownload = [];
+ for (const missing of missingModels) {
+ const perfectMatches = (missing.matches || []).filter(m => m.confidence === 100);
+
+ // Skip if has 100% local match or no download source
+ if (perfectMatches.length > 0 || !missing.download_source?.url) {
+ continue;
+ }
+
+ toDownload.push(missing);
+ }
+
+ if (toDownload.length === 0) {
+ this.showNotification('No models available for download (all have local matches or no download URLs).', 'info');
+ return;
+ }
+
+ // Start all downloads
+ this.showNotification(`Starting ${toDownload.length} download${toDownload.length > 1 ? 's' : ''}...`, 'info');
+
+ for (const missing of toDownload) {
+ // Use downloadModel which handles progress tracking
+ this.downloadModel(missing);
+ }
+
+ // Update button state to show Cancel All
+ this.updateDownloadAllButtonState();
+
+ } catch (error) {
+ console.error('Model Linker: Error in downloadAllMissing:', error);
+ this.showNotification('Error starting downloads: ' + error.message, 'error');
+ }
+ }
+
+ /**
+ * Auto-resolve a model after download completes
+ * Reloads the workflow analysis and resolves if the downloaded model is found
+ */
+ async autoResolveAfterDownload(missing, downloadedFilename) {
+ try {
+ const workflow = this.getCurrentWorkflow();
+ if (!workflow) {
+ // Just reload the UI to show updated state
+ await this.loadWorkflowData();
+ return;
+ }
+
+ // Re-analyze workflow to find the newly downloaded model
+ const analyzeResponse = await api.fetchApi('/model_linker/analyze', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ workflow })
+ });
+
+ if (!analyzeResponse.ok) {
+ // Just reload UI
+ await this.loadWorkflowData();
+ return;
+ }
+
+ const analyzeData = await analyzeResponse.json();
+ const missingModels = analyzeData.missing_models || [];
+
+ // Find the missing model entry that matches our download by filename
+ const targetMissing = missingModels.find(m => {
+ const missingFilename = m.original_path?.split('/').pop()?.split('\\').pop() || '';
+ return missingFilename.toLowerCase() === downloadedFilename.toLowerCase();
+ });
+
+ if (!targetMissing) {
+ // Model no longer missing - already resolved or workflow changed
+ await this.loadWorkflowData();
+ return;
+ }
+
+ // Look for a 100% match with the downloaded filename
+ const matches = targetMissing.matches || [];
+ const perfectMatch = matches.find(m => {
+ const matchFilename = m.filename || m.model?.filename || '';
+ // Check for exact match or 100% confidence
+ return m.confidence === 100 ||
+ matchFilename.toLowerCase() === downloadedFilename.toLowerCase();
+ });
+
+ if (perfectMatch && perfectMatch.model) {
+ // Auto-resolve ALL nodes that need this model
+ // all_node_refs contains all nodes referencing this model (deduplicated)
+ const nodeRefs = targetMissing.all_node_refs || [targetMissing];
+ const resolutions = nodeRefs.map(ref => ({
+ node_id: ref.node_id,
+ widget_index: ref.widget_index,
+ resolved_path: perfectMatch.model.path,
+ category: ref.category,
+ resolved_model: perfectMatch.model,
+ subgraph_id: ref.subgraph_id,
+ is_top_level: ref.is_top_level,
+ is_lora_v2: ref.is_lora_v2,
+ original_lora_name: ref.name || ref.original_path
+ }));
+
+ const resolveResponse = await api.fetchApi('/model_linker/resolve', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ workflow,
+ resolutions: resolutions
+ })
+ });
+
+ if (resolveResponse.ok) {
+ const resolveData = await resolveResponse.json();
+ if (resolveData.success) {
+ await this.updateWorkflowInComfyUI(resolveData.workflow);
+ const count = resolutions.length;
+ this.showNotification(`✓ Auto-resolved: ${downloadedFilename} (${count} reference${count > 1 ? 's' : ''})`, 'success');
+ await this.loadWorkflowData(resolveData.workflow);
+ return;
+ }
+ }
+ }
+
+ // If we couldn't auto-resolve, just reload the UI
+ await this.loadWorkflowData();
+
+ } catch (error) {
+ console.error('Model Linker: Error auto-resolving after download:', error);
+ // Still reload UI even on error
+ await this.loadWorkflowData();
+ }
+ }
+
+ /**
+ * Download a model from a known source
+ */
+ async downloadModel(missing) {
+ const source = missing.download_source;
+ if (!source || !source.url) {
+ this.showNotification('No download URL available', 'error');
+ return;
+ }
+
+ // Use filename from download source if available (may be different from original)
+ const originalFilename = missing.original_path?.split('/').pop()?.split('\\').pop() || 'model.safetensors';
+ const filename = source.filename || originalFilename;
+ const targetSelection = this.getDownloadTargetSelection(missing, source.directory || missing.category || 'checkpoints');
+ const category = targetSelection.category;
+ const subfolder = targetSelection.subfolder;
+ const progressId = `download-progress-${missing.node_id}-${missing.widget_index}`;
+ const progressDiv = this.contentElement?.querySelector(`#${progressId}`);
+ const downloadBtn = this.contentElement?.querySelector(`#download-${missing.node_id}-${missing.widget_index}`);
+ const tokens = this.getStoredTokens();
+
+ try {
+ // Disable button and show progress with cancel button immediately
+ if (downloadBtn) {
+ downloadBtn.disabled = true;
+ downloadBtn.textContent = 'Starting...';
+ }
+ if (progressDiv) {
+ progressDiv.style.display = 'block';
+ // Show progress bar with cancel button immediately
+ progressDiv.innerHTML = `
+
+ `;
+ }
+
+ // Start download
+ const response = await api.fetchApi('/model_linker/download', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ url: source.url,
+ filename: filename,
+ category: category,
+ subfolder: subfolder,
+ hf_token: tokens.hf_token,
+ civitai_key: tokens.civitai_key
+ })
+ });
+
+ if (!response.ok) {
+ throw new Error(`Download failed: ${response.status}`);
+ }
+
+ const data = await response.json();
+ if (!data.success) {
+ throw new Error(data.error || 'Download failed');
+ }
+
+ // Track download and poll for progress
+ const downloadId = data.download_id;
+ this.activeDownloads[downloadId] = { missing, progressDiv, downloadBtn };
+
+ // Update the Download All button state
+ this.updateDownloadAllButtonState();
+
+ // Attach cancel handler to pending button (before polling replaces it)
+ const pendingCancelBtn = progressDiv?.querySelector('.cancel-download-btn-pending');
+ if (pendingCancelBtn) {
+ pendingCancelBtn.addEventListener('click', () => this.cancelDownload(downloadId));
+ }
+
+ this.pollDownloadProgress(downloadId);
+
+ } catch (error) {
+ console.error('Model Linker: Download error:', error);
+ if (progressDiv) {
+ progressDiv.innerHTML = this.renderStatusMessage(error.message, 'error');
+ }
+ if (downloadBtn) {
+ downloadBtn.disabled = false;
+ downloadBtn.innerHTML = '
☁ Retry';
+ }
+ this.showNotification('Download failed: ' + error.message, 'error');
+ }
+ }
+
+ /**
+ * Poll download progress
+ */
+ async pollDownloadProgress(downloadId) {
+ const info = this.activeDownloads[downloadId];
+ if (!info) return;
+
+ try {
+ const response = await api.fetchApi(`/model_linker/progress/${downloadId}`);
+ if (!response.ok) {
+ throw new Error('Failed to get progress');
+ }
+
+ const progress = await response.json();
+ const { progressDiv, downloadBtn, missing } = info;
+
+ if (progress.status === 'downloading' || progress.status === 'starting') {
+ const percent = progress.progress || 0;
+ const downloaded = this.formatBytes(progress.downloaded || 0);
+ const total = this.formatBytes(progress.total_size || 0);
+ const speed = progress.speed ? this.formatBytes(progress.speed) + '/s' : '';
+
+ if (progressDiv) {
+ progressDiv.innerHTML = `
+
+
+
+ ${downloaded} / ${total} (${percent}%)
+ ${speed}
+
+
+ `;
+ // Attach cancel handler
+ const cancelBtn = progressDiv.querySelector('.cancel-download-btn');
+ if (cancelBtn && !cancelBtn._hasListener) {
+ cancelBtn._hasListener = true;
+ cancelBtn.addEventListener('click', () => this.cancelDownload(downloadId));
+ }
+ }
+ if (downloadBtn) {
+ downloadBtn.textContent = `${percent}%`;
+ }
+
+ // Continue polling
+ setTimeout(() => this.pollDownloadProgress(downloadId), 1000);
+
+ } else if (progress.status === 'completed') {
+ if (progressDiv) {
+ progressDiv.innerHTML = this.renderStatusMessage('Download complete! Auto-linking...', 'success');
+ }
+ if (downloadBtn) {
+ downloadBtn.textContent = '✓ Done';
+ downloadBtn.classList.add('ml-btn-primary');
+ }
+ delete this.activeDownloads[downloadId];
+ this.updateDownloadAllButtonState();
+ this.showNotification(`Downloaded: ${progress.filename}`, 'success');
+
+ // Auto-resolve: Reload workflow data and try to resolve the downloaded model
+ // Small delay to ensure file system is updated
+ setTimeout(async () => {
+ await this.autoResolveAfterDownload(missing, progress.filename);
+ }, 500);
+
+ } else if (progress.status === 'error') {
+ if (progressDiv) {
+ progressDiv.innerHTML = this.renderStatusMessage(progress.error || 'Download failed', 'error');
+ }
+ if (downloadBtn) {
+ downloadBtn.disabled = false;
+ downloadBtn.textContent = 'Retry';
+ }
+ delete this.activeDownloads[downloadId];
+ this.updateDownloadAllButtonState();
+
+ } else if (progress.status === 'cancelled') {
+ if (progressDiv) {
+ progressDiv.innerHTML = this.renderStatusMessage('Download cancelled - incomplete file removed', 'warning');
+ }
+ if (downloadBtn) {
+ downloadBtn.disabled = false;
+ downloadBtn.innerHTML = '
☁ Download';
+ }
+ delete this.activeDownloads[downloadId];
+ this.updateDownloadAllButtonState();
+ this.showNotification('Download cancelled', 'info');
+
+ } else {
+ // Unknown status, keep polling
+ setTimeout(() => this.pollDownloadProgress(downloadId), 500);
+ }
+
+ } catch (error) {
+ console.error('Model Linker: Progress poll error:', error);
+ const info = this.activeDownloads[downloadId];
+ // Update UI to show error state instead of just disappearing
+ if (info) {
+ const { progressDiv, downloadBtn } = info;
+ if (progressDiv) {
+ progressDiv.innerHTML = this.renderStatusMessage('Connection lost - download may have failed', 'error');
+ }
+ if (downloadBtn) {
+ downloadBtn.disabled = false;
+ downloadBtn.textContent = 'Retry';
+ downloadBtn.style.background = '#4CAF50';
+ }
+ }
+ delete this.activeDownloads[downloadId];
+ this.updateDownloadAllButtonState();
+ }
+ }
+
+ /**
+ * Cancel an active download
+ */
+ async cancelDownload(downloadId) {
+ try {
+ const response = await api.fetchApi(`/model_linker/cancel/${downloadId}`, {
+ method: 'POST'
+ });
+
+ if (!response.ok) {
+ throw new Error('Failed to cancel download');
+ }
+
+ const info = this.activeDownloads[downloadId];
+ if (info?.progressDiv) {
+ info.progressDiv.innerHTML = this.renderStatusMessage('Cancelling download...', 'info');
+ }
+
+ } catch (error) {
+ console.error('Model Linker: Cancel error:', error);
+ this.showNotification('Failed to cancel download', 'error');
+ }
+ }
+
+ /**
+ * Search online for a model
+ */
+ async searchOnline(missing) {
+ let filename = missing.original_path?.split('/').pop()?.split('\\').pop() || '';
+ let category = missing.category || '';
+ const state = this.getSearchState(missing);
+ const selectedSource = state.selectedSource || 'all';
+ const selectedSourceLabel = this.getSearchSourceLabel(selectedSource);
+
+ // For URNs, use the CivitAI model name for searching instead of the URN itself
+ // and pass the URN type as category (CivitAI expects specific type names)
+ if (missing.is_urn) {
+ if (missing.civitai_info?.model_name) {
+ filename = missing.civitai_info.model_name;
+ }
+ // Pass URN type directly - CivitAPI expects types like 'Upscaler', 'Checkpoint'
+ const urnType = missing.urn_type || '';
+ if (urnType) {
+ // Map URN types to CivitAI type names
+ const typeMap = {
+ 'checkpoint': 'Checkpoint',
+ 'lora': 'LORA',
+ 'vae': 'VAE',
+ 'upscaler': 'Upscaler',
+ 'upscale_model': 'Upscaler',
+ 'embedding': 'TextualInversion',
+ 'controlnet': 'Controlnet'
+ };
+ const civitaiType = typeMap[urnType.toLowerCase()];
+ if (civitaiType) {
+ category = civitaiType;
+ }
+ }
+ }
+
+ const isUrn = missing.is_urn || false;
+ const resultsId = `search-results-${missing.node_id}-${missing.widget_index}`;
+ const resultsDiv = this.contentElement?.querySelector(`#${resultsId}`);
+ const searchBtn = this.contentElement?.querySelector(`#search-${missing.node_id}-${missing.widget_index}`);
+
+ try {
+ if (searchBtn) {
+ searchBtn.disabled = true;
+ searchBtn.innerHTML = `${this.getSearchIconHtml()} 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();
+ const searchData = {
+ filename,
+ category,
+ is_urn: isUrn,
+ sources: [selectedSource],
+ civitai_session_token: tokens.civitai_session_token,
+ civitai_candidate_limit: tokens.civitai_candidate_limit,
+ civitai_use_trpc_search: tokens.civitai_use_trpc_search,
+ civitai_use_html_fallback: tokens.civitai_use_html_fallback,
+ hf_token: tokens.hf_token,
+ brave_search_api_key: tokens.brave_search_api_key,
+ hf_use_api_search: tokens.hf_use_api_search,
+ hf_use_comfy_org_fallback: tokens.hf_use_comfy_org_fallback,
+ hf_use_brave_fallback: tokens.hf_use_brave_fallback
+ };
+ if (isUrn && missing.urn) {
+ searchData.model_id = missing.urn.model_id;
+ searchData.version_id = missing.urn.version_id;
+ }
+
+ console.log('Model Linker: Search request:', JSON.stringify(searchData));
+
+ const response = await api.fetchApi('/model_linker/search', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(searchData)
+ });
+
+ if (!response.ok) {
+ throw new Error(`Search failed: ${response.status}`);
+ }
+
+ const data = await response.json();
+ console.log('Model Linker: Search response:', JSON.stringify(data));
+ state.results = this.mergeSearchResults(state.results, data);
+ state.lastAttemptSources = Array.isArray(data.searched_sources) ? data.searched_sources : [selectedSource];
+ state.lastAttemptFound = this.hasSearchResults(data);
+ if (data.civitai) {
+ missing.civitai_search_result = {
+ base_model: data.civitai.base_model,
+ tags: data.civitai.tags || [],
+ trained_words: data.civitai.trained_words || [],
+ filename: data.civitai.filename,
+ name: data.civitai.name,
+ type: data.civitai.type
+ };
+ }
+ this.displaySearchResults(missing, state, resultsDiv);
+ this.applySearchResultSuggestion(missing);
+
+ } catch (error) {
+ console.error('Model Linker: Search error:', error);
+ if (resultsDiv) {
+ resultsDiv.innerHTML = this.renderStatusMessage(`Search failed: ${error.message}`, 'error');
+ }
+ } finally {
+ if (searchBtn) {
+ searchBtn.disabled = false;
+ searchBtn.innerHTML = `${this.getSearchIconHtml()} Search Again`;
+ }
+ }
+ }
+
+ /**
+ * Resolve URN asynchronously - fetch CivitAI info and update UI
+ */
+ async resolveUrnAsync(modelId, versionId, loadingElementId, modelUrl) {
+ console.log('resolveUrnAsync called:', modelId, versionId);
+ if (!modelId || !versionId) {
+ console.log('resolveUrnAsync: missing modelId or versionId');
+ return;
+ }
+
+ try {
+ const tokens = this.getStoredTokens();
+ const payload = {
+ filename: modelId + '_' + versionId,
+ category: '',
+ is_urn: true,
+ sources: ['civitai'],
+ model_id: modelId,
+ version_id: versionId,
+ civitai_candidate_limit: tokens.civitai_candidate_limit
+ };
+ console.log('resolveUrnAsync payload:', JSON.stringify(payload));
+
+ const response = await api.fetchApi('/model_linker/search', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(payload)
+ });
+
+ console.log('resolveUrnAsync response status:', response.status);
+
+ if (response.ok) {
+ const data = await response.json();
+ const loadingEl = document.getElementById(loadingElementId);
+ if (loadingEl && data.civitai) {
+ const civitai = data.civitai;
+ const label = civitai.name || civitai.filename || 'Model';
+ const url = modelUrl || `https://civitai.com/models/${modelId}?modelVersionId=${versionId}`;
+ loadingEl.innerHTML = `
${label} `;
+ } else if (loadingEl) {
+ loadingEl.textContent = 'Not found';
+ loadingEl.style.color = 'var(--ml-text-muted)';
+ }
+
+ const downloadContainerId = loadingElementId.replace('urn-loading-', 'urn-download-');
+ const downloadEl = document.getElementById(downloadContainerId);
+ if (downloadEl && data.civitai) {
+ const missing = this.missingModels.find(m =>
+ `urn-download-${m.node_id}-${m.widget_index}` === downloadContainerId
+ );
+ if (missing) {
+ missing.civitai_info = {
+ model_name: data.civitai.name,
+ version_name: data.civitai.version_name,
+ expected_filename: data.civitai.filename,
+ base_model: data.civitai.base_model,
+ tags: data.civitai.tags || []
+ };
+ missing.download_source = {
+ source: 'civitai',
+ url: data.civitai.download_url,
+ filename: data.civitai.filename,
+ name: data.civitai.name,
+ type: data.civitai.type,
+ directory: missing.category || 'checkpoints',
+ match_type: 'exact',
+ size: data.civitai.size,
+ model_id: data.civitai.model_id || modelId,
+ version_id: data.civitai.version_id || versionId,
+ model_url: data.civitai.url || `https://civitai.com/models/${modelId}?modelVersionId=${versionId}`,
+ base_model: data.civitai.base_model,
+ tags: data.civitai.tags || []
+ };
+ downloadEl.outerHTML = this.renderDownloadSourceSection(missing, missing.download_source);
+
+ const refreshedBtn = this.contentElement?.querySelector(`#download-${missing.node_id}-${missing.widget_index}`);
+ if (refreshedBtn) {
+ refreshedBtn.addEventListener('click', () => {
+ this.downloadModel(missing);
+ });
+ }
+ if (this.contentElement) {
+ this.wireDownloadTargetAutocomplete(this.contentElement, missing);
+ }
+ this.refreshUrnLocalMatches(missing);
+ }
+ } else if (downloadEl) {
+ downloadEl.innerHTML = `
Unable to resolve direct download for this URN.
`;
+ }
+ } else {
+ const loadingEl = document.getElementById(loadingElementId);
+ if (loadingEl) {
+ loadingEl.textContent = 'Error';
+ loadingEl.style.color = '#f44336';
+ }
+ const downloadContainerId = loadingElementId.replace('urn-loading-', 'urn-download-');
+ const downloadEl = document.getElementById(downloadContainerId);
+ if (downloadEl) {
+ downloadEl.innerHTML = `
Failed to resolve URN download.
`;
+ }
+ }
+ } catch (error) {
+ console.error('Model Linker: URN resolve error:', error);
+ const loadingEl = document.getElementById(loadingElementId);
+ if (loadingEl) {
+ loadingEl.textContent = 'Error';
+ loadingEl.style.color = '#f44336';
+ }
+ const downloadContainerId = loadingElementId.replace('urn-loading-', 'urn-download-');
+ const downloadEl = document.getElementById(downloadContainerId);
+ if (downloadEl) {
+ downloadEl.innerHTML = `
Failed to resolve URN download.
`;
+ }
+ }
+ }
+
+ /**
+ * Display search results
+ */
+ displaySearchResults(missing, state, container) {
+ if (!container) return;
+
+ const results = state?.results || {};
+ const popular = results.popular;
+ const modelListResult = results.model_list;
+ const hfResult = results.huggingface ? (Array.isArray(results.huggingface) ? results.huggingface[0] : results.huggingface) : null;
+ const civitaiResult = results.civitai ? (Array.isArray(results.civitai) ? results.civitai[0] : results.civitai) : null;
+ const loraManagerArchiveResult = results.lora_manager_archive ? (Array.isArray(results.lora_manager_archive) ? results.lora_manager_archive[0] : results.lora_manager_archive) : null;
+ const hasResults = popular || modelListResult || hfResult || civitaiResult || loraManagerArchiveResult;
+
+ if (!hasResults) {
+ const searchedLabel = (state?.lastAttemptSources || []).map(source => this.getSearchSourceLabel(source)).join(', ');
+ container.innerHTML = this.renderStatusMessage(
+ searchedLabel ? `No matches found in ${searchedLabel}.` : 'No matches found online for this model.',
+ 'warning'
+ );
+ return;
+ }
+
+ let html = '
';
+
+ if (state?.lastAttemptFound === false) {
+ const searchedLabel = (state.lastAttemptSources || []).map(source => this.getSearchSourceLabel(source)).join(', ');
+ html += this.renderStatusMessage(`No new matches found in ${searchedLabel}. Existing results are kept below.`, 'warning');
+ }
+
+ // Popular models result (highest priority)
+ if (popular) {
+ const popularFilename = popular.filename || missing.original_path?.split('/').pop()?.split('\\').pop() || '';
+ const actionHtml = `
☁ Download`;
+ html += this.renderOnlineSearchResultCard({
+ statusClass: 'ml-status-success',
+ title: 'Found in Popular Models',
+ result: popular,
+ filename: popularFilename,
+ secondaryText: popular.name || '',
+ actionHtml
+ });
+ }
+
+ // Model list result (ComfyUI Manager database with fuzzy matching)
+ if (modelListResult && modelListResult.url) {
+ const matchType = modelListResult.match_type === 'exact' ? 'Exact match' : 'Similar model';
+ const statusClass = modelListResult.match_type === 'exact' ? 'ml-status-success' : 'ml-status-info';
+ const actionHtml = `
☁ Download`;
+ html += this.renderOnlineSearchResultCard({
+ statusClass,
+ title: `${matchType} in Model Database`,
+ result: modelListResult,
+ filename: modelListResult.filename,
+ secondaryText: modelListResult.name || '',
+ actionHtml
+ });
+ }
+
+ // HuggingFace result
+ if (hfResult && hfResult.url) {
+ const hfRepo = hfResult.repo_id || hfResult.repo || '';
+ const hfModelUrl = hfRepo ? `https://huggingface.co/${hfRepo}` : this.getModelCardUrl(hfResult.url);
+ let actionHtml = `
☁ Download`;
+ if (hfModelUrl) {
+ actionHtml += `
Open on HuggingFace `;
+ }
+ html += this.renderOnlineSearchResultCard({
+ statusClass: 'ml-status-info',
+ title: 'Found on HuggingFace',
+ result: hfResult,
+ filename: hfResult.filename,
+ secondaryText: hfRepo,
+ actionHtml
+ });
+ }
+
+ // LoRA Manager archive result
+ if (loraManagerArchiveResult && loraManagerArchiveResult.url) {
+ const archiveFilename = loraManagerArchiveResult.filename || missing.original_path?.split('/').pop()?.split('\\').pop() || '';
+ const actionHtml = loraManagerArchiveResult.download_url
+ ? `
☁ Download`
+ : '';
+ html += this.renderOnlineSearchResultCard({
+ statusClass: 'ml-status-info',
+ title: 'Found in LoRA Manager Archive',
+ result: loraManagerArchiveResult,
+ filename: archiveFilename,
+ secondaryText: loraManagerArchiveResult.version_name || loraManagerArchiveResult.name || '',
+ actionHtml
+ });
+ }
+
+ // CivitAI result
+ if (civitaiResult && civitaiResult.download_url) {
+ const modelUrl = civitaiResult.url || (civitaiResult.model_id ? `https://civitai.com/models/${civitaiResult.model_id}${civitaiResult.version_id ? `?modelVersionId=${civitaiResult.version_id}` : ''}` : '');
+ // Use expected_filename from URN resolution, or fallback to civitaiResult filename
+ 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 = `
${modelName} ${civitaiResult.type || ''}
`;
+ const actionHtml = `
☁ Download`;
+ html += this.renderOnlineSearchResultCard({
+ statusClass: 'ml-status-warning',
+ title: 'Found on CivitAI',
+ result: civitaiResult,
+ filename: downloadFilename,
+ secondaryText: '',
+ topLineHtml,
+ actionHtml
+ });
+ }
+
+ html += '
';
+ container.innerHTML = html;
+
+ // Attach download listeners
+ const downloadBtns = container.querySelectorAll('.search-download-btn');
+ downloadBtns.forEach(btn => {
+ btn.addEventListener('click', () => {
+ const url = btn.dataset.url;
+ const filename = btn.dataset.filename;
+ const category = btn.dataset.category;
+ this.downloadFromSearch(missing, url, filename, category, btn);
+ });
+ });
+ }
+
+ /**
+ * Download from search results
+ */
+ async downloadFromSearch(missing, url, filename, category, btn) {
+ const progressId = `download-progress-${missing.node_id}-${missing.widget_index}`;
+ const progressDiv = this.contentElement?.querySelector(`#${progressId}`);
+ const tokens = this.getStoredTokens();
+ const targetSelection = this.getDownloadTargetSelection(missing, category || missing.category || 'checkpoints');
+
+ try {
+ btn.disabled = true;
+ btn.textContent = 'Starting...';
+
+ if (progressDiv) {
+ progressDiv.style.display = 'block';
+ // Show progress bar with cancel button immediately
+ progressDiv.innerHTML = `
+
+ `;
+ }
+
+ const response = await api.fetchApi('/model_linker/download', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ url,
+ filename,
+ category: targetSelection.category,
+ subfolder: targetSelection.subfolder,
+ hf_token: tokens.hf_token,
+ civitai_key: tokens.civitai_key
+ })
+ });
+
+ if (!response.ok) {
+ throw new Error(`Download failed: ${response.status}`);
+ }
+
+ const data = await response.json();
+ if (!data.success) {
+ throw new Error(data.error || 'Download failed');
+ }
+
+ // Track and poll
+ const downloadId = data.download_id;
+ this.activeDownloads[downloadId] = { missing, progressDiv, downloadBtn: btn };
+
+ // Update the Download All button state
+ this.updateDownloadAllButtonState();
+
+ // Attach cancel handler to pending button (before polling replaces it)
+ const pendingCancelBtn = progressDiv?.querySelector('.cancel-download-btn-pending');
+ if (pendingCancelBtn) {
+ pendingCancelBtn.addEventListener('click', () => this.cancelDownload(downloadId));
+ }
+
+ this.pollDownloadProgress(downloadId);
+
+ } catch (error) {
+ console.error('Model Linker: Download error:', error);
+ if (progressDiv) {
+ progressDiv.innerHTML = this.renderStatusMessage(error.message, 'error');
+ }
+ btn.disabled = false;
+ btn.textContent = 'Retry';
+ this.showNotification('Download failed: ' + error.message, 'error');
+ }
+ }
+
+ /**
+ * Format bytes to human readable string
+ */
+ formatBytes(bytes) {
+ if (bytes === 0) return '0 B';
+ const k = 1024;
+ const sizes = ['B', 'KB', 'MB', 'GB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+ }
+
+ /**
+ * Extract model card URL from a download URL
+ * HuggingFace: https://huggingface.co/Owner/Repo/resolve/main/file.safetensors -> https://huggingface.co/Owner/Repo
+ * CivitAI: https://civitai.com/api/download/models/123?type=Model -> https://civitai.com/models/123
+ */
+ getModelCardUrl(downloadUrl) {
+ if (!downloadUrl) return null;
+
+ try {
+ // HuggingFace URLs
+ if (downloadUrl.includes('huggingface.co')) {
+ // Extract owner/repo from URL
+ const match = downloadUrl.match(/huggingface\.co\/([^\/]+\/[^\/]+)/);
+ if (match) {
+ return `https://huggingface.co/${match[1]}`;
+ }
+ }
+
+ // CivitAI URLs
+ if (downloadUrl.includes('civitai.com')) {
+ // Format: /api/download/models/123456 or /models/123456/...
+ const modelIdMatch = downloadUrl.match(/models\/(\d+)/);
+ if (modelIdMatch) {
+ return `https://civitai.com/models/${modelIdMatch[1]}`;
+ }
+ }
+ } catch (e) {
+ console.error('Error parsing model card URL:', e);
+ }
+
+ return null;
+ }
+
+ /**
+ * Update workflow in ComfyUI's UI/memory
+ * Updates the current workflow in place instead of creating a new tab
+ */
+ async updateWorkflowInComfyUI(workflow) {
+ if (!app || !app.graph) {
+ console.warn('Model Linker: Could not update workflow - app or app.graph not available');
+ return;
+ }
+
+ try {
+ // Method 1: Try to directly update the current graph using configure
+ // This is the most direct way to update in place
+ if (app.graph && typeof app.graph.configure === 'function') {
+ app.graph.configure(workflow);
+ return;
+ }
+
+ // Method 2: Try deserialize to update the graph in place
+ if (app.graph && typeof app.graph.deserialize === 'function') {
+ app.graph.deserialize(workflow);
+ return;
+ }
+
+ // Method 3: Use loadGraphData with explicit parameters to update current tab
+ // The key is to NOT create a new workflow - pass null or undefined for the workflow parameter
+ // clean=false means don't clear the graph first
+ // restore_view=false means don't restore the viewport
+ // workflow=null means update current workflow instead of creating new one
+ if (app.loadGraphData) {
+ // Try with null as 4th parameter first
+ await app.loadGraphData(workflow, false, false, null);
+ return;
+ }
+
+ console.warn('Model Linker: No method available to update workflow');
+ } catch (error) {
+ console.error('Model Linker: Error updating workflow in ComfyUI:', error);
+ // Don't throw - allow the workflow update to continue even if UI update fails
+ // The backend has already updated the workflow data
+ }
+ }
+}
+
+// Main extension class
+class ModelLinker {
+ constructor() {
+ this.linkerButton = null;
+ this.buttonGroup = null;
+ this.buttonId = "model-linker-button";
+ this.dialog = null;
+ this.isCheckingMissing = false; // Prevent multiple simultaneous checks
+ this.lastCheckedWorkflow = null; // Track to avoid duplicate checks
+ }
+
setup = async () => {
+ loadStylesWhenNeeded();
+
// Remove any existing button
this.removeExistingButton();
-
- // Create dialog instance
- if (!this.dialog) {
- this.dialog = new LinkerManagerDialog();
- window.modelLinkerDialog = this.dialog;
- }
-
- // Register keyboard shortcut (Ctrl+Shift+L)
- document.addEventListener('keydown', (e) => {
- if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'l') {
- e.preventDefault();
- this.openLinkerManager();
- }
- });
-
- // Listen for workflow load events to auto-check for missing models
- this.setupAutoOpenOnMissingModels();
-
- // Try to use new ComfyUI button system (like ComfyUI Manager does)
- try {
- // Dynamic imports for ComfyUI's button components
- const { ComfyButtonGroup } = await import("../../../scripts/ui/components/buttonGroup.js");
- const { ComfyButton } = await import("../../../scripts/ui/components/button.js");
-
- // Create button group with Model Linker button
- this.buttonGroup = new ComfyButtonGroup(
- new ComfyButton({
- icon: "link-variant",
- action: () => this.openLinkerManager(),
- tooltip: "Model Linker - Resolve missing models (Ctrl+Shift+L)",
- content: "Model Linker",
- classList: "comfyui-button comfyui-menu-mobile-collapse"
- }).element
- );
-
- // Insert before settings group in the menu
- app.menu?.settingsGroup.element.before(this.buttonGroup.element);
- } catch (e) {
- // Fallback for older ComfyUI versions without the new button system
- console.log('Model Linker: New button system not available, using floating button fallback.');
- this.createFloatingButton();
- }
- }
-
- /**
- * Setup auto-open functionality when workflow is loaded with missing models
- */
- setupAutoOpenOnMissingModels() {
- // Watch for ComfyUI's Missing Models popup and inject our button
- this.setupMissingModelsPopupObserver();
-
- console.log('Model Linker: Missing models popup button injection enabled');
- }
-
- /**
- * Setup MutationObserver to detect ComfyUI's Missing Models popup and inject our button
- */
- setupMissingModelsPopupObserver() {
- const observer = new MutationObserver((mutations) => {
- for (const mutation of mutations) {
- for (const node of mutation.addedNodes) {
- if (node.nodeType === Node.ELEMENT_NODE) {
- this.checkAndInjectButton(node);
- }
- }
- }
- });
-
- // Observe the entire document for added nodes
- observer.observe(document.body, {
- childList: true,
- subtree: true
- });
- }
-
- /**
- * Check if a node is the Missing Models popup and inject our buttons
- */
- checkAndInjectButton(node) {
- // Look for the Missing Models popup by finding elements with "Missing Models" text
- const findMissingModelsDialog = (element) => {
- // Check if this element or its children contain "Missing Models" heading
- const headings = element.querySelectorAll ? element.querySelectorAll('h2, h3, [class*="title"], [class*="header"]') : [];
- for (const heading of headings) {
- if (heading.textContent?.includes('Missing Models')) {
- return element;
- }
- }
- // Also check text content directly
- if (element.textContent?.includes('Missing Models') &&
- element.textContent?.includes('following models were not found')) {
- return element;
- }
- return null;
- };
-
- const dialog = findMissingModelsDialog(node);
- if (!dialog) return;
-
- // Check if we already injected buttons
- if (dialog.querySelector('#model-linker-btn-container')) return;
-
- // Find a suitable place to inject the button
- const injectButtons = () => {
- // Common button style
- const btnStyle = `
- padding: 6px 12px;
- color: white;
- border: none;
- border-radius: 6px;
- cursor: pointer;
- font-size: 12px;
- font-weight: 600;
- transition: all 0.2s ease;
- white-space: nowrap;
- `;
-
+
+ // Create dialog instance
+ if (!this.dialog) {
+ this.dialog = new LinkerManagerDialog();
+ window.modelLinkerDialog = this.dialog;
+ }
+
+ // Register keyboard shortcut (Ctrl+Shift+L)
+ document.addEventListener('keydown', (e) => {
+ if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'l') {
+ e.preventDefault();
+ this.openLinkerManager();
+ }
+ });
+
+ // Listen for workflow load events to auto-check for missing models
+ this.setupAutoOpenOnMissingModels();
+
+ // Try to use new ComfyUI button system (like ComfyUI Manager does)
+ try {
+ // Dynamic imports for ComfyUI's button components
+ const { ComfyButtonGroup } = await import("../../../scripts/ui/components/buttonGroup.js");
+ const { ComfyButton } = await import("../../../scripts/ui/components/button.js");
+
+ // Create button group with Model Linker button
+ this.buttonGroup = new ComfyButtonGroup(
+ new ComfyButton({
+ icon: "link-variant",
+ action: () => this.openLinkerManager(),
+ tooltip: "Model Linker - Resolve missing models (Ctrl+Shift+L)",
+ content: "Model Linker",
+ classList: "comfyui-button comfyui-menu-mobile-collapse"
+ }).element
+ );
+
+ // Insert before settings group in the menu
+ app.menu?.settingsGroup.element.before(this.buttonGroup.element);
+ } catch (e) {
+ // Fallback for older ComfyUI versions without the new button system
+ console.log('Model Linker: New button system not available, using floating button fallback.');
+ this.createFloatingButton();
+ }
+ }
+
+ /**
+ * Setup auto-open functionality when workflow is loaded with missing models
+ */
+ setupAutoOpenOnMissingModels() {
+ // Watch for ComfyUI's Missing Models popup and inject our button
+ this.setupMissingModelsPopupObserver();
+
+ console.log('Model Linker: Missing models popup button injection enabled');
+ }
+
+ /**
+ * Setup MutationObserver to detect ComfyUI's Missing Models popup and inject our button
+ */
+ setupMissingModelsPopupObserver() {
+ const observer = new MutationObserver((mutations) => {
+ for (const mutation of mutations) {
+ for (const node of mutation.addedNodes) {
+ if (node.nodeType === Node.ELEMENT_NODE) {
+ this.checkAndInjectButton(node);
+ }
+ }
+ }
+ });
+
+ // Observe the entire document for added nodes
+ observer.observe(document.body, {
+ childList: true,
+ subtree: true
+ });
+ }
+
+ /**
+ * Check if a node is the Missing Models popup and inject our buttons
+ */
+ checkAndInjectButton(node) {
+ // Look for the Missing Models popup by finding elements with "Missing Models" text
+ const findMissingModelsDialog = (element) => {
+ // Check if this element or its children contain "Missing Models" heading
+ const headings = element.querySelectorAll ? element.querySelectorAll('h2, h3, [class*="title"], [class*="header"]') : [];
+ for (const heading of headings) {
+ if (heading.textContent?.includes('Missing Models')) {
+ return element;
+ }
+ }
+ // Also check text content directly
+ if (element.textContent?.includes('Missing Models') &&
+ element.textContent?.includes('following models were not found')) {
+ return element;
+ }
+ return null;
+ };
+
+ const dialog = findMissingModelsDialog(node);
+ if (!dialog) return;
+
+ // Check if we already injected buttons
+ if (dialog.querySelector('#model-linker-btn-container')) return;
+
+ // Find a suitable place to inject the button
+ const injectButtons = () => {
// Auto-resolve button (green)
const autoResolveBtn = document.createElement('button');
autoResolveBtn.id = 'model-linker-btn-container'; // Use this ID to prevent duplicate injection
+ autoResolveBtn.className = 'ml-popup-auto-resolve-btn';
autoResolveBtn.textContent = '🔗 Auto-resolve 100%';
autoResolveBtn.title = 'Automatically link models with 100% confidence matches';
- autoResolveBtn.style.cssText = btnStyle + `background: #4CAF50;`;
-
- autoResolveBtn.addEventListener('mouseenter', () => {
- autoResolveBtn.style.background = '#45a049';
- });
- autoResolveBtn.addEventListener('mouseleave', () => {
- autoResolveBtn.style.background = '#4CAF50';
- });
autoResolveBtn.addEventListener('click', async () => {
await this.handleAutoResolveInPopup(dialog, autoResolveBtn);
});
-
- // Find the "Don't show this again" checkbox row and add button next to it
- const checkbox = dialog.querySelector('input[type="checkbox"]');
- if (checkbox) {
+
+ // Find the "Don't show this again" checkbox row and add button next to it
+ const checkbox = dialog.querySelector('input[type="checkbox"]');
+ if (checkbox) {
const checkboxRow = checkbox.closest('label') || checkbox.parentElement;
if (checkboxRow && checkboxRow.parentElement) {
// Make the parent a flex container to align checkbox and button
- checkboxRow.parentElement.style.cssText = `
- display: flex;
- align-items: center;
- gap: 16px;
- padding: 0 16px;
- margin-bottom: 8px;
- `;
+ checkboxRow.parentElement.classList.add('ml-popup-inline-actions');
// Insert button at the beginning (left side)
checkboxRow.parentElement.insertBefore(autoResolveBtn, checkboxRow);
return;
- }
- }
-
- // Fallback: Find the list of models and insert before it
- const modelList = dialog.querySelector('[style*="overflow"]') ||
- dialog.querySelector('[class*="list"]') ||
- dialog.querySelector('[class*="content"]');
-
+ }
+ }
+
+ // Fallback: Find the list of models and insert before it
+ const modelList = dialog.querySelector('[style*="overflow"]') ||
+ dialog.querySelector('[class*="list"]') ||
+ dialog.querySelector('[class*="content"]');
+
if (modelList) {
// Create a wrapper and insert before the model list
const wrapper = document.createElement('div');
- wrapper.style.cssText = 'display: flex; justify-content: flex-end; padding: 0 16px; margin-bottom: 8px;';
+ wrapper.className = 'ml-popup-actions-wrap';
wrapper.appendChild(autoResolveBtn);
modelList.parentElement?.insertBefore(wrapper, modelList);
} else {
- // Find after the description text
- const allElements = dialog.querySelectorAll('*');
- for (const el of allElements) {
- if (el.textContent?.includes('following models were not found') &&
- el.children.length === 0) {
- el.parentElement?.insertBefore(btnContainer, el.nextSibling);
- break;
- }
- }
- }
-
- console.log('Model Linker: Injected buttons into Missing Models popup');
- };
-
- // Small delay to ensure popup is fully rendered
- setTimeout(injectButtons, 100);
- }
-
- /**
- * Handle auto-resolve in the popup - resolve 100% matches and open Model Linker for remaining
- */
- async handleAutoResolveInPopup(dialog, button) {
- button.textContent = '⏳ Resolving...';
- button.disabled = true;
-
- // Close the popup first
- const closeBtn = dialog.querySelector('button[class*="close"]') ||
- dialog.querySelector('svg')?.closest('button') ||
- Array.from(dialog.querySelectorAll('button')).find(b =>
- b.textContent === '×' || b.innerHTML.includes('×') || b.innerHTML.includes('close'));
-
- if (closeBtn) {
- closeBtn.click();
- }
-
- // Small delay to let popup close
- await new Promise(r => setTimeout(r, 200));
-
-// Create dialog if needed
- if (!this.dialog) {
- this.dialog = new LinkerManagerDialog();
- window.modelLinkerDialog = this.dialog;
- }
-
- // Run auto-resolve for 100% matches - returns the updated workflow
- const updatedWorkflow = await this.dialog.autoResolve100Percent();
-
- // Always open Model Linker to show remaining unresolved models
- // Pass the updated workflow if available to avoid race condition
- this.dialog.show(updatedWorkflow || null);
- }
-
- /**
- * Mark resolved model items in the popup as linked (green) and hide download buttons
- */
- removeResolvedFromPopup(dialog, resolvedFilenames) {
- console.log('Model Linker: Looking for resolved filenames:', resolvedFilenames);
-
- // Strategy: For each filename, find text nodes containing it,
- // then find the nearest Download button and mark that row
- for (const filename of resolvedFilenames) {
- // Get all text in the dialog and find elements containing our filename
- const walker = document.createTreeWalker(
- dialog,
- NodeFilter.SHOW_TEXT,
- null,
- false
- );
-
- let node;
- while (node = walker.nextNode()) {
- if (node.textContent?.toLowerCase().includes(filename)) {
- // Found text containing filename - now find parent with Download button
- let parent = node.parentElement;
- let attempts = 0;
-
- while (parent && parent !== dialog && attempts < 10) {
- // Look for Download button at this level
- const downloadBtn = Array.from(parent.querySelectorAll('button'))
- .find(btn => btn.textContent?.includes('Download') &&
- !btn.id?.includes('model-linker'));
-
- if (downloadBtn) {
- console.log('Model Linker: Found entry for', filename);
- this.markEntryAsResolved(parent, downloadBtn);
- break;
- }
-
- parent = parent.parentElement;
- attempts++;
- }
-
- // Only process first match for this filename
- break;
- }
- }
- }
- }
-
- /**
- * Mark a model entry as resolved with visual feedback
- */
- markEntryAsResolved(container, downloadBtn) {
- // Already marked?
- if (container.dataset.resolved === 'true') return;
- container.dataset.resolved = 'true';
-
- console.log('Model Linker: Marking entry as resolved', container);
-
- // Add green background/styling to the container
- container.style.transition = 'all 0.3s ease';
- container.style.background = 'rgba(76, 175, 80, 0.2)';
- container.style.borderRadius = '6px';
- container.style.border = '1px solid #4CAF50';
-
- // Hide the Download button and replace with badge
- if (downloadBtn) {
- // Create badge
+ // Find after the description text
+ const allElements = dialog.querySelectorAll('*');
+ for (const el of allElements) {
+ if (el.textContent?.includes('following models were not found') &&
+ el.children.length === 0) {
+ el.parentElement?.insertBefore(btnContainer, el.nextSibling);
+ break;
+ }
+ }
+ }
+
+ console.log('Model Linker: Injected buttons into Missing Models popup');
+ };
+
+ // Small delay to ensure popup is fully rendered
+ setTimeout(injectButtons, 100);
+ }
+
+ /**
+ * Handle auto-resolve in the popup - resolve 100% matches and open Model Linker for remaining
+ */
+ async handleAutoResolveInPopup(dialog, button) {
+ button.textContent = '⏳ Resolving...';
+ button.disabled = true;
+
+ // Close the popup first
+ const closeBtn = dialog.querySelector('button[class*="close"]') ||
+ dialog.querySelector('svg')?.closest('button') ||
+ Array.from(dialog.querySelectorAll('button')).find(b =>
+ b.textContent === '×' || b.innerHTML.includes('×') || b.innerHTML.includes('close'));
+
+ if (closeBtn) {
+ closeBtn.click();
+ }
+
+ // Small delay to let popup close
+ await new Promise(r => setTimeout(r, 200));
+
+// Create dialog if needed
+ if (!this.dialog) {
+ this.dialog = new LinkerManagerDialog();
+ window.modelLinkerDialog = this.dialog;
+ }
+
+ // Run auto-resolve for 100% matches - returns the updated workflow
+ const updatedWorkflow = await this.dialog.autoResolve100Percent();
+
+ // Always open Model Linker to show remaining unresolved models
+ // Pass the updated workflow if available to avoid race condition
+ this.dialog.show(updatedWorkflow || null);
+ }
+
+ /**
+ * Mark resolved model items in the popup as linked (green) and hide download buttons
+ */
+ removeResolvedFromPopup(dialog, resolvedFilenames) {
+ console.log('Model Linker: Looking for resolved filenames:', resolvedFilenames);
+
+ // Strategy: For each filename, find text nodes containing it,
+ // then find the nearest Download button and mark that row
+ for (const filename of resolvedFilenames) {
+ // Get all text in the dialog and find elements containing our filename
+ const walker = document.createTreeWalker(
+ dialog,
+ NodeFilter.SHOW_TEXT,
+ null,
+ false
+ );
+
+ let node;
+ while (node = walker.nextNode()) {
+ if (node.textContent?.toLowerCase().includes(filename)) {
+ // Found text containing filename - now find parent with Download button
+ let parent = node.parentElement;
+ let attempts = 0;
+
+ while (parent && parent !== dialog && attempts < 10) {
+ // Look for Download button at this level
+ const downloadBtn = Array.from(parent.querySelectorAll('button'))
+ .find(btn => btn.textContent?.includes('Download') &&
+ !btn.id?.includes('model-linker'));
+
+ if (downloadBtn) {
+ console.log('Model Linker: Found entry for', filename);
+ this.markEntryAsResolved(parent, downloadBtn);
+ break;
+ }
+
+ parent = parent.parentElement;
+ attempts++;
+ }
+
+ // Only process first match for this filename
+ break;
+ }
+ }
+ }
+ }
+
+ /**
+ * Mark a model entry as resolved with visual feedback
+ */
+ markEntryAsResolved(container, downloadBtn) {
+ // Already marked?
+ if (container.dataset.resolved === 'true') return;
+ container.dataset.resolved = 'true';
+
+ console.log('Model Linker: Marking entry as resolved', container);
+
+ // Add green background/styling to the container
+ container.classList.add('ml-resolved-entry');
+
+ // Hide the Download button and replace with badge
+ if (downloadBtn) {
+ // Create badge
const badge = document.createElement('span');
+ badge.className = 'ml-resolved-badge';
badge.textContent = '✓ Linked';
- badge.style.cssText = `
- display: inline-flex;
- align-items: center;
- padding: 4px 12px;
- background: #4CAF50;
- color: white;
- border-radius: 4px;
- font-size: 12px;
- font-weight: 600;
- `;
-
- // Replace download button with badge
- downloadBtn.style.display = 'none';
- downloadBtn.parentElement?.insertBefore(badge, downloadBtn);
- }
-
- // Find and hide Copy URL button
- const allBtns = container.querySelectorAll('button');
- for (const btn of allBtns) {
- if (btn.textContent?.includes('Copy URL')) {
- btn.style.display = 'none';
- }
- }
- }
-
- /**
- * Count remaining model items in the popup
- */
- countRemainingItems(dialog) {
- // Count elements that look like model entries (have Download buttons)
- const downloadButtons = dialog.querySelectorAll('button');
- let count = 0;
- for (const btn of downloadButtons) {
- if (btn.textContent?.includes('Download') && !btn.id?.includes('model-linker')) {
- count++;
- }
- }
- return count;
- }
-
- /**
- * Update nodes directly in the graph without triggering a full workflow reload
- * This prevents the Missing Models popup from closing
- */
- updateNodesDirectly(resolutions) {
- if (!app?.graph) {
- console.warn('Model Linker: Cannot update nodes - graph not available');
- return;
- }
-
- for (const resolution of resolutions) {
- const nodeId = resolution.node_id;
- const widgetIndex = resolution.widget_index;
- const resolvedPath = resolution.resolved_path;
-
- // Find the node in the graph
- const node = app.graph.getNodeById(nodeId);
- if (!node) {
- console.warn(`Model Linker: Node ${nodeId} not found in graph`);
- continue;
- }
-
- // Update the widget value
- if (node.widgets && node.widgets[widgetIndex]) {
- const widget = node.widgets[widgetIndex];
- widget.value = resolvedPath;
-
- // Trigger widget callback if it exists
- if (widget.callback) {
- widget.callback(resolvedPath, app.graph, node, null, null);
- }
-
- console.log(`Model Linker: Updated node ${nodeId} widget ${widgetIndex} to ${resolvedPath}`);
- } else if (node.widgets_values) {
- // Fallback: update widgets_values array directly
- node.widgets_values[widgetIndex] = resolvedPath;
- console.log(`Model Linker: Updated node ${nodeId} widgets_values[${widgetIndex}] to ${resolvedPath}`);
- }
-
- // Mark node as dirty to trigger redraw
- if (node.setDirtyCanvas) {
- node.setDirtyCanvas(true, true);
- }
- }
-
- // Trigger canvas redraw
- if (app.graph.setDirtyCanvas) {
- app.graph.setDirtyCanvas(true, true);
- }
- }
-
- /**
- * Check if auto-open is enabled in user settings
- */
- isAutoOpenEnabled() {
- return localStorage.getItem('modelLinker.autoOpenOnMissing') !== 'false';
- }
-
- /**
- * Set auto-open preference
- */
- setAutoOpenEnabled(enabled) {
- localStorage.setItem('modelLinker.autoOpenOnMissing', enabled ? 'true' : 'false');
- }
-
- /**
- * Check for missing models and auto-open dialog if any are found
- */
- async checkAndOpenForMissingModels() {
- // Check if auto-open is enabled
- if (!this.isAutoOpenEnabled()) {
- return;
- }
-
- // Prevent multiple simultaneous checks
- if (this.isCheckingMissing) {
- return;
- }
-
- this.isCheckingMissing = true;
-
- try {
- // Small delay to let workflow fully load
- await new Promise(r => setTimeout(r, 500));
-
- // Get current workflow
- const workflow = app?.graph?.serialize();
- if (!workflow) {
- return;
- }
-
- // Create a simple hash to detect if workflow changed
- const workflowHash = JSON.stringify(workflow.nodes?.map(n => n.type + ':' + JSON.stringify(n.widgets_values || [])));
-
- // Skip if we already checked this exact workflow
- if (this.lastCheckedWorkflow === workflowHash) {
- return;
- }
- this.lastCheckedWorkflow = workflowHash;
-
- // Call analyze endpoint to check for missing models
- const response = await api.fetchApi('/model_linker/analyze', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ workflow })
- });
-
- if (!response.ok) {
- console.warn('Model Linker: Failed to analyze workflow for missing models');
- return;
- }
-
- const data = await response.json();
-
- // Auto-open dialog if there are missing models
- if (data.total_missing > 0) {
- console.log(`Model Linker: Found ${data.total_missing} missing model(s), opening dialog...`);
- this.openLinkerManager();
- }
-
- } catch (error) {
- console.error('Model Linker: Error checking for missing models:', error);
- } finally {
- this.isCheckingMissing = false;
- }
- }
-
- removeExistingButton() {
- // Remove any existing button by ID
- const existingButton = document.getElementById(this.buttonId);
- if (existingButton) {
- existingButton.remove();
- }
-
- // Remove button group if it exists
- if (this.buttonGroup?.element?.parentNode) {
- this.buttonGroup.element.remove();
- this.buttonGroup = null;
- }
-
- // Also remove the stored reference if it exists
- if (this.linkerButton && this.linkerButton.parentNode) {
- this.linkerButton.remove();
- this.linkerButton = null;
- }
- }
-
- createFloatingButton() {
- // Create a floating button as fallback for legacy ComfyUI versions
- this.linkerButton = $el("button", {
- id: this.buttonId,
- textContent: "🔗 Model Linker",
- title: "Open Model Linker to resolve missing models (Ctrl+Shift+L)",
+
+ // Replace download button with badge
+ downloadBtn.style.display = 'none';
+ downloadBtn.parentElement?.insertBefore(badge, downloadBtn);
+ }
+
+ // Find and hide Copy URL button
+ const allBtns = container.querySelectorAll('button');
+ for (const btn of allBtns) {
+ if (btn.textContent?.includes('Copy URL')) {
+ btn.style.display = 'none';
+ }
+ }
+ }
+
+ /**
+ * Count remaining model items in the popup
+ */
+ countRemainingItems(dialog) {
+ // Count elements that look like model entries (have Download buttons)
+ const downloadButtons = dialog.querySelectorAll('button');
+ let count = 0;
+ for (const btn of downloadButtons) {
+ if (btn.textContent?.includes('Download') && !btn.id?.includes('model-linker')) {
+ count++;
+ }
+ }
+ return count;
+ }
+
+ /**
+ * Update nodes directly in the graph without triggering a full workflow reload
+ * This prevents the Missing Models popup from closing
+ */
+ updateNodesDirectly(resolutions) {
+ if (!app?.graph) {
+ console.warn('Model Linker: Cannot update nodes - graph not available');
+ return;
+ }
+
+ for (const resolution of resolutions) {
+ const nodeId = resolution.node_id;
+ const widgetIndex = resolution.widget_index;
+ const resolvedPath = resolution.resolved_path;
+
+ // Find the node in the graph
+ const node = app.graph.getNodeById(nodeId);
+ if (!node) {
+ console.warn(`Model Linker: Node ${nodeId} not found in graph`);
+ continue;
+ }
+
+ // Update the widget value
+ if (node.widgets && node.widgets[widgetIndex]) {
+ const widget = node.widgets[widgetIndex];
+ widget.value = resolvedPath;
+
+ // Trigger widget callback if it exists
+ if (widget.callback) {
+ widget.callback(resolvedPath, app.graph, node, null, null);
+ }
+
+ console.log(`Model Linker: Updated node ${nodeId} widget ${widgetIndex} to ${resolvedPath}`);
+ } else if (node.widgets_values) {
+ // Fallback: update widgets_values array directly
+ node.widgets_values[widgetIndex] = resolvedPath;
+ console.log(`Model Linker: Updated node ${nodeId} widgets_values[${widgetIndex}] to ${resolvedPath}`);
+ }
+
+ // Mark node as dirty to trigger redraw
+ if (node.setDirtyCanvas) {
+ node.setDirtyCanvas(true, true);
+ }
+ }
+
+ // Trigger canvas redraw
+ if (app.graph.setDirtyCanvas) {
+ app.graph.setDirtyCanvas(true, true);
+ }
+ }
+
+ /**
+ * Check if auto-open is enabled in user settings
+ */
+ isAutoOpenEnabled() {
+ return localStorage.getItem('modelLinker.autoOpenOnMissing') !== 'false';
+ }
+
+ /**
+ * Set auto-open preference
+ */
+ setAutoOpenEnabled(enabled) {
+ localStorage.setItem('modelLinker.autoOpenOnMissing', enabled ? 'true' : 'false');
+ }
+
+ /**
+ * Check for missing models and auto-open dialog if any are found
+ */
+ async checkAndOpenForMissingModels() {
+ // Check if auto-open is enabled
+ if (!this.isAutoOpenEnabled()) {
+ return;
+ }
+
+ // Prevent multiple simultaneous checks
+ if (this.isCheckingMissing) {
+ return;
+ }
+
+ this.isCheckingMissing = true;
+
+ try {
+ // Small delay to let workflow fully load
+ await new Promise(r => setTimeout(r, 500));
+
+ // Get current workflow
+ const workflow = app?.graph?.serialize();
+ if (!workflow) {
+ return;
+ }
+
+ // Create a simple hash to detect if workflow changed
+ const workflowHash = JSON.stringify(workflow.nodes?.map(n => n.type + ':' + JSON.stringify(n.widgets_values || [])));
+
+ // Skip if we already checked this exact workflow
+ if (this.lastCheckedWorkflow === workflowHash) {
+ return;
+ }
+ this.lastCheckedWorkflow = workflowHash;
+
+ // Call analyze endpoint to check for missing models
+ const response = await api.fetchApi('/model_linker/analyze', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ workflow })
+ });
+
+ if (!response.ok) {
+ console.warn('Model Linker: Failed to analyze workflow for missing models');
+ return;
+ }
+
+ const data = await response.json();
+
+ // Auto-open dialog if there are missing models
+ if (data.total_missing > 0) {
+ console.log(`Model Linker: Found ${data.total_missing} missing model(s), opening dialog...`);
+ this.openLinkerManager();
+ }
+
+ } catch (error) {
+ console.error('Model Linker: Error checking for missing models:', error);
+ } finally {
+ this.isCheckingMissing = false;
+ }
+ }
+
+ removeExistingButton() {
+ // Remove any existing button by ID
+ const existingButton = document.getElementById(this.buttonId);
+ if (existingButton) {
+ existingButton.remove();
+ }
+
+ // Remove button group if it exists
+ if (this.buttonGroup?.element?.parentNode) {
+ this.buttonGroup.element.remove();
+ this.buttonGroup = null;
+ }
+
+ // Also remove the stored reference if it exists
+ if (this.linkerButton && this.linkerButton.parentNode) {
+ this.linkerButton.remove();
+ this.linkerButton = null;
+ }
+ }
+
+ createFloatingButton() {
+ // Create a floating button as fallback for legacy ComfyUI versions
+ this.linkerButton = $el("button", {
+ id: this.buttonId,
+ textContent: "🔗 Model Linker",
+ title: "Open Model Linker to resolve missing models (Ctrl+Shift+L)",
onclick: () => {
this.openLinkerManager();
},
- style: {
- position: "fixed",
- top: "10px",
- right: "10px",
- zIndex: "10000",
- backgroundColor: "var(--comfy-input-bg, #353535)",
- color: "var(--input-text, #ffffff)",
- border: "2px solid var(--primary-color, #007acc)",
- padding: "8px 16px",
- borderRadius: "6px",
- cursor: "pointer",
- fontSize: "14px",
- fontWeight: "600",
- boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
- transition: "all 0.2s ease",
- whiteSpace: "nowrap"
- }
- });
-
- // Add hover effects
- this.linkerButton.addEventListener("mouseenter", () => {
- this.linkerButton.style.backgroundColor = "var(--primary-color, #007acc)";
- this.linkerButton.style.transform = "scale(1.05)";
- });
-
- this.linkerButton.addEventListener("mouseleave", () => {
- this.linkerButton.style.backgroundColor = "var(--comfy-input-bg, #353535)";
- this.linkerButton.style.transform = "scale(1)";
+ className: "model-linker-floating-button"
});
document.body.appendChild(this.linkerButton);
}
-
- openLinkerManager() {
- try {
- if (!this.dialog) {
- this.dialog = new LinkerManagerDialog();
- window.modelLinkerDialog = this.dialog;
- }
- this.dialog.show();
- } catch (error) {
- console.error("🔗 Model Linker: Error creating/showing dialog:", error);
- alert("Error opening Model Linker: " + error.message);
- }
- }
-
- static switchFilter(filter) {
- document.querySelectorAll('.ml-btn-filter').forEach(b => b.classList.remove('active'));
- document.getElementById('filter-' + filter).classList.add('active');
-
- document.querySelectorAll('.ml-model-section').forEach(s => {
- const hasActive = s.dataset.mlActive === 'true';
- const hasInactive = s.dataset.mlInactive === 'true';
-
- if (filter === 'all') {
- s.style.display = 'block';
- } else if (filter === 'active') {
- s.style.display = hasActive ? 'block' : 'none';
- } else if (filter === 'inactive') {
- s.style.display = hasInactive ? 'block' : 'none';
- }
- });
-
- const copySection = document.querySelector('[id^="ml-copy-"]');
- if (copySection) {
- const codeEl = copySection.querySelector('code');
- const labelEl = copySection.querySelector('div');
-
- if (filter === 'all') {
- codeEl.textContent = copySection.dataset.mlAll;
- labelEl.textContent = 'Copy all:';
- } else if (filter === 'active') {
- codeEl.textContent = copySection.dataset.mlActive;
- labelEl.textContent = 'Copy active:';
- } else if (filter === 'inactive') {
- codeEl.textContent = copySection.dataset.mlInactive;
- labelEl.textContent = 'Copy inactive:';
- }
- }
- }
-
- static copyToClipboard(text, btn) {
- navigator.clipboard.writeText(text).then(() => {
- const orig = btn.textContent;
- btn.textContent = '✓';
- setTimeout(() => btn.textContent = orig, 1500);
- });
- }
-
- static copyFromCode(sectionId, btn) {
- const section = document.getElementById(sectionId);
- const codeEl = section.querySelector('code');
- navigator.clipboard.writeText(codeEl.textContent).then(() => {
- const orig = btn.textContent;
- btn.textContent = '✓ Copied!';
- setTimeout(() => btn.textContent = orig, 1500);
- });
- }
-}
-
-const modelLinker = new ModelLinker();
-
-// Register the extension
-app.registerExtension({
- name: "Model Linker",
- setup: modelLinker.setup
-});
-
-// Global helper functions for inline onclick handlers
-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'));
- filterBtn.classList.add('active');
-
- // Filter model sections
- document.querySelectorAll('.ml-model-section').forEach(s => {
- const hasActive = s.getAttribute('data-ml-active') === 'true';
- const hasInactive = s.getAttribute('data-ml-inactive') === 'true';
-
- // Get child divs: category header, active section, inactive section
- const childDivs = Array.from(s.children).filter(c => c.tagName === 'DIV');
- const activeSection = childDivs[1];
- const inactiveSection = childDivs[2];
-
- if (filter === 'all') {
- s.style.display = 'block';
- if (activeSection) activeSection.style.display = 'block';
- if (inactiveSection) inactiveSection.style.display = 'block';
- } else if (filter === 'active') {
- s.style.display = hasActive ? 'block' : 'none';
- if (activeSection) activeSection.style.display = hasActive ? 'block' : 'none';
- if (inactiveSection) inactiveSection.style.display = 'none';
- } else if (filter === 'inactive') {
- s.style.display = hasInactive ? 'block' : 'none';
- if (activeSection) activeSection.style.display = 'none';
- if (inactiveSection) inactiveSection.style.display = hasInactive ? 'block' : 'none';
- }
- });
-
- const copySection = document.querySelector('[id^="ml-copy-"]');
- if (copySection) {
- const codeEl = copySection.querySelector('code');
- const labelEl = copySection.querySelector('div');
-
- if (filter === 'all') {
- codeEl.textContent = copySection.dataset.mlAll;
- labelEl.textContent = 'Copy all:';
- } else if (filter === 'active') {
- codeEl.textContent = copySection.dataset.mlActive;
- labelEl.textContent = 'Copy active:';
- } else if (filter === 'inactive') {
- codeEl.textContent = copySection.dataset.mlInactive;
- labelEl.textContent = 'Copy inactive:';
- }
- }
-};
-
-window.MLCopy = function(text, btn) {
- navigator.clipboard.writeText(text).then(() => {
- const orig = btn.textContent;
- btn.textContent = '✓';
- setTimeout(() => btn.textContent = orig, 1500);
- });
-};
-
-window.MLCopyCode = function(sectionId, btn) {
- const section = document.getElementById(sectionId);
- const codeEl = section.querySelector('code');
- navigator.clipboard.writeText(codeEl.textContent).then(() => {
- const orig = btn.textContent;
- btn.textContent = '✓ Copied!';
- setTimeout(() => btn.textContent = orig, 1500);
- });
-};
-
-window.MLOpenContextMenu = function(event, element) {
- event.preventDefault();
- event.stopPropagation();
-
- try {
- const modelData = element.getAttribute('data-model');
- if (!modelData) return;
-
- const model = JSON.parse(decodeURIComponent(modelData));
-
- // Get dialog instance
- const dialog = window.modelLinkerDialog;
- if (dialog && dialog.showContextMenu) {
- dialog.showContextMenu(event.clientX, event.clientY, model);
- }
- } catch (e) {
- console.error('Model Linker: Error opening context menu:', e);
- }
-};
-
+
+ openLinkerManager() {
+ try {
+ if (!this.dialog) {
+ this.dialog = new LinkerManagerDialog();
+ window.modelLinkerDialog = this.dialog;
+ }
+ this.dialog.show();
+ } catch (error) {
+ console.error("🔗 Model Linker: Error creating/showing dialog:", error);
+ alert("Error opening Model Linker: " + error.message);
+ }
+ }
+
+ static switchFilter(filter) {
+ document.querySelectorAll('.ml-btn-filter').forEach(b => b.classList.remove('active'));
+ document.getElementById('filter-' + filter).classList.add('active');
+
+ document.querySelectorAll('.ml-model-section').forEach(s => {
+ const hasActive = s.dataset.mlActive === 'true';
+ const hasInactive = s.dataset.mlInactive === 'true';
+
+ if (filter === 'all') {
+ s.style.display = 'block';
+ } else if (filter === 'active') {
+ s.style.display = hasActive ? 'block' : 'none';
+ } else if (filter === 'inactive') {
+ s.style.display = hasInactive ? 'block' : 'none';
+ }
+ });
+
+ const copySection = document.querySelector('[id^="ml-copy-"]');
+ if (copySection) {
+ const codeEl = copySection.querySelector('code');
+ const labelEl = copySection.querySelector('div');
+
+ if (filter === 'all') {
+ codeEl.textContent = copySection.dataset.mlAll;
+ labelEl.textContent = 'Copy all:';
+ } else if (filter === 'active') {
+ codeEl.textContent = copySection.dataset.mlActive;
+ labelEl.textContent = 'Copy active:';
+ } else if (filter === 'inactive') {
+ codeEl.textContent = copySection.dataset.mlInactive;
+ labelEl.textContent = 'Copy inactive:';
+ }
+ }
+ }
+
+ static copyToClipboard(text, btn) {
+ navigator.clipboard.writeText(text).then(() => {
+ const orig = btn.textContent;
+ btn.textContent = '✓';
+ setTimeout(() => btn.textContent = orig, 1500);
+ });
+ }
+
+ static copyFromCode(sectionId, btn) {
+ const section = document.getElementById(sectionId);
+ const codeEl = section.querySelector('code');
+ navigator.clipboard.writeText(codeEl.textContent).then(() => {
+ const orig = btn.textContent;
+ btn.textContent = '✓ Copied!';
+ setTimeout(() => btn.textContent = orig, 1500);
+ });
+ }
+}
+
+const modelLinker = new ModelLinker();
+
+// Register the extension
+app.registerExtension({
+ name: "Model Linker",
+ setup: modelLinker.setup
+});
+
+// Global helper functions for inline onclick handlers
+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'));
+ filterBtn.classList.add('active');
+
+ // Filter model sections
+ document.querySelectorAll('.ml-model-section').forEach(s => {
+ const hasActive = s.getAttribute('data-ml-active') === 'true';
+ const hasInactive = s.getAttribute('data-ml-inactive') === 'true';
+
+ // Get child divs: category header, active section, inactive section
+ const childDivs = Array.from(s.children).filter(c => c.tagName === 'DIV');
+ const activeSection = childDivs[1];
+ const inactiveSection = childDivs[2];
+
+ if (filter === 'all') {
+ s.style.display = 'block';
+ if (activeSection) activeSection.style.display = 'block';
+ if (inactiveSection) inactiveSection.style.display = 'block';
+ } else if (filter === 'active') {
+ s.style.display = hasActive ? 'block' : 'none';
+ if (activeSection) activeSection.style.display = hasActive ? 'block' : 'none';
+ if (inactiveSection) inactiveSection.style.display = 'none';
+ } else if (filter === 'inactive') {
+ s.style.display = hasInactive ? 'block' : 'none';
+ if (activeSection) activeSection.style.display = 'none';
+ if (inactiveSection) inactiveSection.style.display = hasInactive ? 'block' : 'none';
+ }
+ });
+
+ const copySection = document.querySelector('[id^="ml-copy-"]');
+ if (copySection) {
+ const codeEl = copySection.querySelector('code');
+ const labelEl = copySection.querySelector('div');
+
+ if (filter === 'all') {
+ codeEl.textContent = copySection.dataset.mlAll;
+ labelEl.textContent = 'Copy all:';
+ } else if (filter === 'active') {
+ codeEl.textContent = copySection.dataset.mlActive;
+ labelEl.textContent = 'Copy active:';
+ } else if (filter === 'inactive') {
+ codeEl.textContent = copySection.dataset.mlInactive;
+ labelEl.textContent = 'Copy inactive:';
+ }
+ }
+};
+
+window.MLCopy = function(text, btn) {
+ navigator.clipboard.writeText(text).then(() => {
+ const orig = btn.textContent;
+ btn.textContent = '✓';
+ setTimeout(() => btn.textContent = orig, 1500);
+ });
+};
+
+window.MLCopyCode = function(sectionId, btn) {
+ const section = document.getElementById(sectionId);
+ const codeEl = section.querySelector('code');
+ navigator.clipboard.writeText(codeEl.textContent).then(() => {
+ const orig = btn.textContent;
+ btn.textContent = '✓ Copied!';
+ setTimeout(() => btn.textContent = orig, 1500);
+ });
+};
+
+window.MLOpenContextMenu = function(event, element) {
+ event.preventDefault();
+ event.stopPropagation();
+
+ try {
+ const modelData = element.getAttribute('data-model');
+ if (!modelData) return;
+
+ const model = JSON.parse(decodeURIComponent(modelData));
+
+ // Get dialog instance
+ const dialog = window.modelLinkerDialog;
+ if (dialog && dialog.showContextMenu) {
+ dialog.showContextMenu(event.clientX, event.clientY, model);
+ }
+ } catch (e) {
+ console.error('Model Linker: Error opening context menu:', e);
+ }
+};
+
+
diff --git a/web/utils/css-loader.js b/web/utils/css-loader.js
index 10c789a..418122a 100644
--- a/web/utils/css-loader.js
+++ b/web/utils/css-loader.js
@@ -17,7 +17,9 @@ export function loadAllStyles() {
// Load all CSS files using getUrl for proper path resolution
const cssFiles = [
- './css/css-variables.css', // CSS Custom Properties - MUST BE FIRST!
+ './css/css-variables.css',
+ './css/linker-shell.css',
+ './css/linker-main.css',
];
cssFiles.forEach(file => {