alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -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;
}
if (event.target.closest('.fa-copy') || event.target.closest('.fa-paper-plane')) {
if (event.target.closest('.fa-paper-plane')) {
event.stopPropagation();
const useSendButton = state.settings.useSendButton || true;
if (useSendButton) {
sendLoraToComfyUI(card, event.shiftKey);
} else {
copyLoraCode(card);
}
sendLoraToComfyUI(card, event.shiftKey);
return;
}
@@ -178,21 +173,13 @@ async function toggleFavorite(card) {
}
}
async function copyLoraCode(card) {
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
// Function to send LoRA to ComfyUI workflow
async function sendLoraToComfyUI(card, replaceMode) {
const usageTips = JSON.parse(card.dataset.usage_tips || '{}');
const strength = usageTips.strength || 1;
const loraSyntax = `<lora:${card.dataset.file_name}:${strength}>`;
sendLoraToWorkflow(loraSyntax, replaceMode);
sendLoraToWorkflow(loraSyntax, replaceMode, 'lora');
}
export function createLoraCard(lora) {
@@ -258,8 +245,6 @@ export function createLoraCard(lora) {
// Get favorite status from the lora data
const isFavorite = lora.favorite === true;
// Check if we're using send button instead of copy button
const useSendButton = state.settings.useSendButton || true;
card.innerHTML = `
<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'}"
${!lora.from_civitai ? 'style="opacity: 0.5; cursor: not-allowed"' : ''}>
</i>
<i class="${useSendButton ? 'fas fa-paper-plane' : 'fas fa-copy'}"
title="${useSendButton ? 'Send to ComfyUI (Click: Append, Shift+Click: Replace)' : 'Copy LoRA Syntax'}">
<i class="fas fa-paper-plane"
title="Send to ComfyUI (Click: Append, Shift+Click: Replace)">
</i>
<i class="fas fa-trash"
title="Delete Model">

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

@@ -1,5 +1,5 @@
// 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 { getCurrentPageState } from '../state/index.js';
@@ -52,7 +52,7 @@ class RecipeCard {
</div>
<div class="card-actions">
<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>
</div>
</div>
@@ -94,10 +94,10 @@ class RecipeCard {
this.shareRecipe();
});
// Copy button click event - prevent propagation to card
card.querySelector('.fa-copy')?.addEventListener('click', (e) => {
// Send button click event - prevent propagation to card
card.querySelector('.fa-paper-plane')?.addEventListener('click', (e) => {
e.stopPropagation();
this.copyRecipeSyntax();
this.sendRecipeToWorkflow(e.shiftKey);
});
// Delete button click event - prevent propagation to card
@@ -108,33 +108,32 @@ class RecipeCard {
}
}
copyRecipeSyntax() {
// Replace copyRecipeSyntax with sendRecipeToWorkflow
sendRecipeToWorkflow(replaceMode = false) {
try {
// Get recipe ID
const recipeId = this.recipe.id;
if (!recipeId) {
showToast('Cannot copy recipe syntax: Missing recipe ID', 'error');
showToast('Cannot send recipe: Missing recipe ID', 'error');
return;
}
// Fallback if button not found
fetch(`/api/recipe/${recipeId}/syntax`)
.then(response => response.json())
.then(data => {
if (data.success && data.syntax) {
return copyToClipboard(data.syntax, 'Recipe syntax copied to clipboard');
return sendLoraToWorkflow(data.syntax, replaceMode, 'recipe');
} else {
throw new Error(data.error || 'No syntax returned');
}
})
.catch(err => {
console.error('Failed to copy: ', err);
showToast('Failed to copy recipe syntax', 'error');
console.error('Failed to send recipe to workflow: ', err);
showToast('Failed to send recipe to workflow', 'error');
});
} catch (error) {
console.error('Error copying recipe syntax:', error);
showToast('Error copying recipe syntax', 'error');
console.error('Error sending recipe to workflow:', 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
* @param {string} loraSyntax - The LoRA syntax to send
* @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
*/
export async function sendLoraToWorkflow(loraSyntax, replaceMode = false) {
export async function sendLoraToWorkflow(loraSyntax, replaceMode = false, syntaxType = 'lora') {
try {
// Get the current workflow from localStorage
const workflowData = localStorage.getItem('workflow');
@@ -402,15 +403,20 @@ export async function sendLoraToWorkflow(loraSyntax, replaceMode = false) {
const result = await response.json();
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;
} 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;
}
} catch (error) {
console.error('Failed to send LoRA to workflow:', error);
showToast('Failed to send LoRA to workflow', 'error');
console.error('Failed to send to workflow:', error);
showToast(`Failed to send ${syntaxType === 'recipe' ? 'recipe' : 'LoRA'} to workflow`, 'error');
return false;
}
}