import { app } from "../../scripts/app.js"; const BUTTON_TOOLTIP = "Launch LoRA Manager (Shift+Click opens in new window)"; const LORA_MANAGER_PATH = "/loras"; const NEW_WINDOW_FEATURES = "width=1200,height=800,resizable=yes,scrollbars=yes,status=yes"; const openLoraManager = (event) => { const url = `${window.location.origin}${LORA_MANAGER_PATH}`; if (event.shiftKey) { window.open(url, "_blank", NEW_WINDOW_FEATURES); return; } window.open(url, "_blank"); }; const fetchVersionInfo = async () => { try { const response = await fetch("/api/lm/version-info"); const data = await response.json(); if (data.success) { return data.version; } } catch (error) { console.error("LoRA Manager: error fetching version info:", error); } return ""; }; const createAboutBadge = (version) => { const label = version ? `LoRA Manager v${version}` : "LoRA Manager"; return { label, url: "https://github.com/willmiao/ComfyUI-Lora-Manager", icon: "pi pi-tags", }; }; app.registerExtension({ name: "LoraManager.TopMenu", actionBarButtons: [ { icon: "icon-[mdi--alpha-l-box] size-4", tooltip: BUTTON_TOOLTIP, onClick: openLoraManager } ], aboutPageBadges: [createAboutBadge()], async setup() { const version = await fetchVersionInfo(); this.aboutPageBadges = [createAboutBadge(version)]; const injectStyles = () => { const styleId = 'lm-top-menu-button-styles'; if (document.getElementById(styleId)) return; const style = document.createElement('style'); style.id = styleId; style.textContent = ` button[aria-label="Launch LoRA Manager (Shift+Click opens in new window)"].lm-top-menu-button { transition: all 0.2s ease; border: 1px solid transparent; } button[aria-label="Launch LoRA Manager (Shift+Click opens in new window)"].lm-top-menu-button:hover { background-color: var(--primary-hover-bg) !important; } `; document.head.appendChild(style); }; injectStyles(); const replaceButtonIcon = () => { const buttons = document.querySelectorAll('button[aria-label="Launch LoRA Manager (Shift+Click opens in new window)"]'); buttons.forEach(button => { button.classList.add('lm-top-menu-button'); button.innerHTML = getLoraManagerIcon(); button.style.borderRadius = '4px'; button.style.padding = '6px'; button.style.backgroundColor = 'var(--primary-bg)'; const svg = button.querySelector('svg'); if (svg) { svg.style.width = '20px'; svg.style.height = '20px'; } }); if (buttons.length === 0) { requestAnimationFrame(replaceButtonIcon); } }; requestAnimationFrame(replaceButtonIcon); }, }); const getLoraManagerIcon = () => { return ` `; };