import { app } from "../../scripts/app.js"; const extension = { name: "lora-manager.widget", }; app.registerExtension(extension); const config = { newTab: true, newWindow: { width: 1200, height: 800, } }; const createWidget = ({ className, text, tooltip, includeIcon, svgMarkup }) => { const button = document.createElement('button'); button.className = className; button.setAttribute('aria-label', tooltip); button.title = tooltip; if (includeIcon && svgMarkup) { const iconContainer = document.createElement('span'); iconContainer.innerHTML = svgMarkup; iconContainer.style.display = 'flex'; iconContainer.style.alignItems = 'center'; iconContainer.style.justifyContent = 'center'; iconContainer.style.width = '20px'; iconContainer.style.height = '16px'; button.appendChild(iconContainer); } const textNode = document.createTextNode(text); button.appendChild(textNode); button.addEventListener('click', onClick); return button; }; const onClick = (e) => { const loraManagerUrl = `${window.location.origin}/loras`; // Check if Shift key is pressed to determine how to open if (e.shiftKey) { // Open in new window const { width, height } = config.newWindow; const windowFeatures = `width=${width},height=${height},resizable=yes,scrollbars=yes,status=yes`; window.open(loraManagerUrl, '_blank', windowFeatures); } else { // Default behavior: open in new tab window.open(loraManagerUrl, '_blank'); } }; const addWidgetMenuRight = (menuRight) => { let buttonGroup = menuRight.querySelector('.comfyui-button-group'); if (!buttonGroup) { buttonGroup = document.createElement('div'); buttonGroup.className = 'comfyui-button-group'; menuRight.appendChild(buttonGroup); } const loraManagerButton = createWidget({ className: 'comfyui-button comfyui-menu-mobile-collapse primary', text: '', tooltip: 'Launch Lora Manager (Shift+Click to open in new window)', includeIcon: true, svgMarkup: getLoraManagerIcon(), }); buttonGroup.appendChild(loraManagerButton); }; const addWidgetMenu = (menu) => { const resetViewButton = menu.querySelector('#comfy-reset-view-button'); if (!resetViewButton) { return; } const loraManagerButton = createWidget({ className: 'comfy-lora-manager-button', text: 'Lora Manager', tooltip: 'Launch Lora Manager (Shift+Click to open in new window)', includeIcon: false, }); resetViewButton.insertAdjacentElement('afterend', loraManagerButton); }; const addWidget = (selector, callback) => { const observer = new MutationObserver((mutations, obs) => { const element = document.querySelector(selector); if (element) { callback(element); obs.disconnect(); } }); observer.observe(document.body, { childList: true, subtree: true }); }; const initializeWidgets = () => { addWidget('.comfyui-menu-right', addWidgetMenuRight); addWidget('.comfy-menu', addWidgetMenu); }; // Fetch version info from the API const fetchVersionInfo = async () => { try { const response = await fetch('/api/version-info'); const data = await response.json(); if (data.success) { return data.version; } return ''; } catch (error) { console.error('Error fetching version info:', error); return ''; } }; // Register about badge with version info const registerAboutBadge = async () => { let version = await fetchVersionInfo(); const label = version ? `LoRA-Manager v${version}` : 'LoRA-Manager'; app.registerExtension({ name: 'LoraManager.AboutBadge', aboutPageBadges: [ { label: label, url: 'https://github.com/willmiao/ComfyUI-Lora-Manager', icon: 'pi pi-tags' } ] }); }; // Initialize everything const initialize = () => { initializeWidgets(); registerAboutBadge(); }; const getLoraManagerIcon = () => { return ` `; }; initialize();