alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-25 15:15:44 -03:00
Code Issues Packages Projects Releases Wiki Activity

Refactor Lora and Recipe card event handling: replace copy functionality with direct send to ComfyUI workflow, update UI elements, and enhance sendLoraToWorkflow to support recipe syntax.

Browse Source
This commit is contained in:
Will Miao
2025-05-14 23:51:00 +08:00
parent 64a906ca5e
commit bf793d5b8b
3 changed files with 30 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
static/js/components/LoraCard.js
View File

@@ -51,14 +51,9 @@ function handleLoraCardEvent(event) {
return; return;
} }
if (event.target.closest('.fa-copy') || event.target.closest('.fa-paper-plane')) { if (event.target.closest('.fa-paper-plane')) {
event.stopPropagation(); event.stopPropagation();
const useSendButton = state.settings.useSendButton || true; sendLoraToComfyUI(card, event.shiftKey);
if (useSendButton) {
sendLoraToComfyUI(card, event.shiftKey);
} else {
copyLoraCode(card);
}
return; return;
} }
@@ -178,21 +173,13 @@ async function toggleFavorite(card) {
} }
} }
async function copyLoraCode(card) { // Function to send LoRA to ComfyUI workflow
const usageTips = JSON.parse(card.dataset.usage_tips || '{}');
const strength = usageTips.strength || 1;
const loraSyntax = `<lora:${card.dataset.file_name}:${strength}>`;
await copyToClipboard(loraSyntax, 'LoRA syntax copied');
}
// New function to send LoRA to ComfyUI workflow
async function sendLoraToComfyUI(card, replaceMode) { async function sendLoraToComfyUI(card, replaceMode) {
const usageTips = JSON.parse(card.dataset.usage_tips || '{}'); const usageTips = JSON.parse(card.dataset.usage_tips || '{}');
const strength = usageTips.strength || 1; const strength = usageTips.strength || 1;
const loraSyntax = `<lora:${card.dataset.file_name}:${strength}>`; const loraSyntax = `<lora:${card.dataset.file_name}:${strength}>`;
sendLoraToWorkflow(loraSyntax, replaceMode); sendLoraToWorkflow(loraSyntax, replaceMode, 'lora');
} }
export function createLoraCard(lora) { export function createLoraCard(lora) {
@@ -258,8 +245,6 @@ export function createLoraCard(lora) {
// Get favorite status from the lora data // Get favorite status from the lora data
const isFavorite = lora.favorite === true; const isFavorite = lora.favorite === true;
// Check if we're using send button instead of copy button
const useSendButton = state.settings.useSendButton || true;
card.innerHTML = ` card.innerHTML = `
<div class="card-preview ${shouldBlur ? 'blurred' : ''}"> <div class="card-preview ${shouldBlur ? 'blurred' : ''}">
@@ -285,8 +270,8 @@ export function createLoraCard(lora) {
title="${lora.from_civitai ? 'View on Civitai' : 'Not available from Civitai'}" title="${lora.from_civitai ? 'View on Civitai' : 'Not available from Civitai'}"
${!lora.from_civitai ? 'style="opacity: 0.5; cursor: not-allowed"' : ''}> ${!lora.from_civitai ? 'style="opacity: 0.5; cursor: not-allowed"' : ''}>
</i> </i>
<i class="${useSendButton ? 'fas fa-paper-plane' : 'fas fa-copy'}" <i class="fas fa-paper-plane"
title="${useSendButton ? 'Send to ComfyUI (Click: Append, Shift+Click: Replace)' : 'Copy LoRA Syntax'}"> title="Send to ComfyUI (Click: Append, Shift+Click: Replace)">
</i> </i>
<i class="fas fa-trash" <i class="fas fa-trash"
title="Delete Model"> title="Delete Model">

27
static/js/components/RecipeCard.js
View File

@@ -1,5 +1,5 @@
// Recipe Card Component // Recipe Card Component
import { showToast, copyToClipboard } from '../utils/uiHelpers.js'; import { showToast, copyToClipboard, sendLoraToWorkflow } from '../utils/uiHelpers.js';
import { modalManager } from '../managers/ModalManager.js'; import { modalManager } from '../managers/ModalManager.js';
import { getCurrentPageState } from '../state/index.js'; import { getCurrentPageState } from '../state/index.js';
@@ -52,7 +52,7 @@ class RecipeCard {
</div> </div>
<div class="card-actions"> <div class="card-actions">
<i class="fas fa-share-alt" title="Share Recipe"></i> <i class="fas fa-share-alt" title="Share Recipe"></i>
<i class="fas fa-copy" title="Copy Recipe Syntax"></i> <i class="fas fa-paper-plane" title="Send Recipe to Workflow (Click: Append, Shift+Click: Replace)"></i>
<i class="fas fa-trash" title="Delete Recipe"></i> <i class="fas fa-trash" title="Delete Recipe"></i>
</div> </div>
</div> </div>
@@ -94,10 +94,10 @@ class RecipeCard {
this.shareRecipe(); this.shareRecipe();
}); });
// Copy button click event - prevent propagation to card // Send button click event - prevent propagation to card
card.querySelector('.fa-copy')?.addEventListener('click', (e) => { card.querySelector('.fa-paper-plane')?.addEventListener('click', (e) => {
e.stopPropagation(); e.stopPropagation();
this.copyRecipeSyntax(); this.sendRecipeToWorkflow(e.shiftKey);
}); });
// Delete button click event - prevent propagation to card // Delete button click event - prevent propagation to card
@@ -108,33 +108,32 @@ class RecipeCard {
} }
} }
copyRecipeSyntax() { // Replace copyRecipeSyntax with sendRecipeToWorkflow
sendRecipeToWorkflow(replaceMode = false) {
try { try {
// Get recipe ID // Get recipe ID
const recipeId = this.recipe.id; const recipeId = this.recipe.id;
if (!recipeId) { if (!recipeId) {
showToast('Cannot copy recipe syntax: Missing recipe ID', 'error'); showToast('Cannot send recipe: Missing recipe ID', 'error');
return; return;
} }
// Fallback if button not found
fetch(`/api/recipe/${recipeId}/syntax`) fetch(`/api/recipe/${recipeId}/syntax`)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
if (data.success && data.syntax) { if (data.success && data.syntax) {
return copyToClipboard(data.syntax, 'Recipe syntax copied to clipboard'); return sendLoraToWorkflow(data.syntax, replaceMode, 'recipe');
} else { } else {
throw new Error(data.error || 'No syntax returned'); throw new Error(data.error || 'No syntax returned');
} }
}) })
.catch(err => { .catch(err => {
console.error('Failed to copy: ', err); console.error('Failed to send recipe to workflow: ', err);
showToast('Failed to copy recipe syntax', 'error'); showToast('Failed to send recipe to workflow', 'error');
}); });
} catch (error) { } catch (error) {
console.error('Error copying recipe syntax:', error); console.error('Error sending recipe to workflow:', error);
showToast('Error copying recipe syntax', 'error'); showToast('Error sending recipe to workflow', 'error');
} }
} }

16
static/js/utils/uiHelpers.js
View File

@@ -357,9 +357,10 @@ export function getNSFWLevelName(level) {
* Sends LoRA syntax to the active ComfyUI workflow * Sends LoRA syntax to the active ComfyUI workflow
* @param {string} loraSyntax - The LoRA syntax to send * @param {string} loraSyntax - The LoRA syntax to send
* @param {boolean} replaceMode - Whether to replace existing LoRAs (true) or append (false) * @param {boolean} replaceMode - Whether to replace existing LoRAs (true) or append (false)
* @param {string} syntaxType - The type of syntax ('lora' or 'recipe')
* @returns {Promise<boolean>} - Whether the operation was successful * @returns {Promise<boolean>} - Whether the operation was successful
*/ */
export async function sendLoraToWorkflow(loraSyntax, replaceMode = false) { export async function sendLoraToWorkflow(loraSyntax, replaceMode = false, syntaxType = 'lora') {
try { try {
// Get the current workflow from localStorage // Get the current workflow from localStorage
const workflowData = localStorage.getItem('workflow'); const workflowData = localStorage.getItem('workflow');
@@ -402,15 +403,20 @@ export async function sendLoraToWorkflow(loraSyntax, replaceMode = false) {
const result = await response.json(); const result = await response.json();
if (result.success) { if (result.success) {
showToast(`LoRA ${replaceMode ? 'replaced' : 'added'} to workflow`, 'success'); // Use different toast messages based on syntax type
if (syntaxType === 'recipe') {
showToast(`Recipe ${replaceMode ? 'replaced' : 'added'} to workflow`, 'success');
} else {
showToast(`LoRA ${replaceMode ? 'replaced' : 'added'} to workflow`, 'success');
}
return true; return true;
} else { } else {
showToast(result.error || 'Failed to send LoRA to workflow', 'error'); showToast(result.error || `Failed to send ${syntaxType === 'recipe' ? 'recipe' : 'LoRA'} to workflow`, 'error');
return false; return false;
} }
} catch (error) { } catch (error) {
console.error('Failed to send LoRA to workflow:', error); console.error('Failed to send to workflow:', error);
showToast('Failed to send LoRA to workflow', 'error'); showToast(`Failed to send ${syntaxType === 'recipe' ? 'recipe' : 'LoRA'} to workflow`, 'error');
return false; return false;
} }
} }