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

Add functionality to open example images folder for models

Browse Source
This commit is contained in:
Will Miao
2025-05-30 09:42:36 +08:00
parent bf8e121a10
commit 09832141d0
8 changed files with 138 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
static/js/components/CheckpointCard.js
View File

@@ -1,4 +1,4 @@
import { showToast, copyToClipboard } from '../utils/uiHelpers.js';
import { showToast, copyToClipboard, openExampleImagesFolder } from '../utils/uiHelpers.js';
import { state } from '../state/index.js';
import { showCheckpointModal } from './checkpointModal/index.js';
import { NSFW_LEVELS } from '../utils/constants.js';
@@ -115,8 +115,8 @@ export function createCheckpointCard(checkpoint) {
<span class="model-name">${checkpoint.model_name}</span>
</div>
<div class="card-actions">
<i class="fas fa-image"
title="Replace Preview Image">
<i class="fas fa-folder-open"
title="Open Example Images Folder">
</i>
</div>
</div>
@@ -272,6 +272,12 @@ export function createCheckpointCard(checkpoint) {
replaceCheckpointPreview(checkpoint.file_path);
});
// Open example images folder button click event
card.querySelector('.fa-folder-open')?.addEventListener('click', e => {
e.stopPropagation();
openExampleImagesFolder(checkpoint.sha256);
});
// Add autoplayOnHover handlers for video elements if needed
const videoElement = card.querySelector('video');
if (videoElement && autoplayOnHover) {

14
static/js/components/ContextMenu/CheckpointContextMenu.js
View File

@@ -1,6 +1,6 @@
import { BaseContextMenu } from './BaseContextMenu.js';
import { refreshSingleCheckpointMetadata, saveModelMetadata } from '../../api/checkpointApi.js';
import { showToast, getNSFWLevelName } from '../../utils/uiHelpers.js';
import { refreshSingleCheckpointMetadata, saveModelMetadata, replaceCheckpointPreview } from '../../api/checkpointApi.js';
import { showToast, getNSFWLevelName, openExampleImagesFolder } from '../../utils/uiHelpers.js';
import { NSFW_LEVELS } from '../../utils/constants.js';
import { getStorageItem } from '../../utils/storageHelpers.js';
import { showExcludeModal } from '../../utils/modalUtils.js';
@@ -23,10 +23,12 @@ export class CheckpointContextMenu extends BaseContextMenu {
this.currentCard.click();
break;
case 'preview':
// Replace checkpoint preview
if (this.currentCard.querySelector('.fa-image')) {
this.currentCard.querySelector('.fa-image').click();
}
// Open example images folder instead of replacing preview
openExampleImagesFolder(this.currentCard.dataset.sha256);
break;
case 'replace-preview':
// Add new action for replacing preview images
replaceCheckpointPreview(this.currentCard.dataset.filepath);
break;
case 'civitai':
// Open civitai page

11
static/js/components/ContextMenu/LoraContextMenu.js
View File

@@ -1,6 +1,6 @@
import { BaseContextMenu } from './BaseContextMenu.js';
import { refreshSingleLoraMetadata, saveModelMetadata } from '../../api/loraApi.js';
import { showToast, getNSFWLevelName, copyToClipboard, sendLoraToWorkflow } from '../../utils/uiHelpers.js';
import { refreshSingleLoraMetadata, saveModelMetadata, replacePreview } from '../../api/loraApi.js';
import { showToast, getNSFWLevelName, copyToClipboard, sendLoraToWorkflow, openExampleImagesFolder } from '../../utils/uiHelpers.js';
import { NSFW_LEVELS } from '../../utils/constants.js';
import { getStorageItem } from '../../utils/storageHelpers.js';
import { showExcludeModal, showDeleteModal } from '../../utils/modalUtils.js';
@@ -47,7 +47,12 @@ export class LoraContextMenu extends BaseContextMenu {
this.sendLoraToWorkflow(true);
break;
case 'preview':
this.currentCard.querySelector('.fa-image')?.click();
// Open example images folder instead of showing preview image dialog
openExampleImagesFolder(this.currentCard.dataset.sha256);
break;
case 'replace-preview':
// Add a new action for replacing preview images
replacePreview(this.currentCard.dataset.filepath);
break;
case 'delete':
// Call showDeleteModal directly instead of clicking the trash button

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

@@ -1,4 +1,4 @@
import { showToast, openCivitai, copyToClipboard, sendLoraToWorkflow } from '../utils/uiHelpers.js';
import { showToast, openCivitai, copyToClipboard, sendLoraToWorkflow, openExampleImagesFolder } from '../utils/uiHelpers.js';
import { state } from '../state/index.js';
import { showLoraModal } from './loraModal/index.js';
import { bulkManager } from '../managers/BulkManager.js';
@@ -69,6 +69,12 @@ function handleLoraCardEvent(event) {
return;
}
if (event.target.closest('.fa-folder-open')) {
event.stopPropagation();
openExampleImagesFolder(card.dataset.sha256);
return;
}
// If no specific element was clicked, handle the card click (show modal or toggle selection)
if (state.bulkMode) {
// Toggle selection using the bulk manager
@@ -300,14 +306,14 @@ export function createLoraCard(lora) {
<span class="model-name">${lora.model_name}</span>
</div>
<div class="card-actions">
<i class="fas fa-image"
title="Replace Preview Image">
<i class="fas fa-folder-open"
title="Open Example Images Folder">
</i>
</div>
</div>
</div>
`;
// Add a special class for virtual scroll positioning if needed
if (state.virtualScroller) {
card.classList.add('virtual-scroll-item');