mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-09-21 11:11:26 -03:00
Will Miao
726fc178f1
- Bind R=refresh, F=fetch metadata, D=download in PageControls via eventManager (plain letters only, skipped while typing or when a modal is open); triggers reuse the buttons' existing click handlers - Show key-hint chips on the refresh/fetch/download/bulk toolbar buttons; convert the bulk chip to a semantic <kbd> - Redesign shortcut hints as a neutral theme-adaptive keycap: --shortcut-* variables in base.css now derive from --text-muted with a bottom-edge shadow, shared by the toolbar chips, the header search cue, the help-modal cheat sheet, and onboarding key hints - Add shared isTypingContext() helper to uiHelpers - Add an Actions group (R/F/D) to the Shortcuts cheat-sheet tab Verified with vitest (926 passing, incl. 6 new shortcut cases) and a sandboxed E2E run in real Chrome (light/dark rendering, hover state, '?' opening the Shortcuts tab, clean console)
269 lines
16 KiB
HTML
269 lines
16 KiB
HTML
<!-- Help Modal -->
|
|
<div id="helpModal" class="modal">
|
|
<div class="modal-content help-modal">
|
|
<button class="close" onclick="modalManager.closeModal('helpModal')">×</button>
|
|
<div class="help-header">
|
|
<h2>{{ t('help.title') }}</h2>
|
|
</div>
|
|
|
|
<div class="help-tabs">
|
|
<button class="tab-btn active" data-tab="getting-started">{{ t('help.tabs.gettingStarted') }}</button>
|
|
<button class="tab-btn" data-tab="update-vlogs">{{ t('help.tabs.updateVlogs') }}</button>
|
|
<button class="tab-btn" data-tab="documentation">{{ t('help.tabs.documentation') }}</button>
|
|
<button class="tab-btn" data-tab="shortcuts">{{ t('help.tabs.shortcuts') }}</button>
|
|
</div>
|
|
|
|
<div class="help-content">
|
|
<!-- Getting Started Tab -->
|
|
<div class="tab-pane active" id="getting-started">
|
|
<h3>{{ t('help.gettingStarted.title') }}</h3>
|
|
<div class="video-container">
|
|
<div class="video-thumbnail" data-video-id="hvKw31YpE-U">
|
|
<img src="/loras_static/images/video-thumbnails/getting-started.jpg" alt="Getting Started with LoRA Manager">
|
|
<div class="video-play-overlay">
|
|
<a href="https://www.youtube.com/watch?v=hvKw31YpE-U" target="_blank" class="external-link-btn">
|
|
<i class="fas fa-external-link-alt"></i>
|
|
<span>Watch on YouTube</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="help-text">
|
|
<h4>Key Features:</h4>
|
|
<ul>
|
|
<li><strong>Seamless Integration:</strong> One-click workflow integration with ComfyUI</li>
|
|
<li><strong>Visual Management:</strong> Organize and manage all your LoRA models with an intuitive interface</li>
|
|
<li><strong>Automatic Metadata:</strong> Fetch previews, trigger words, and details automatically</li>
|
|
<li><strong>Civitai Integration:</strong> Direct downloads with full API support</li>
|
|
<li><strong>Offline Preview Storage:</strong> Store and manage model examples locally</li>
|
|
<li><strong>Advanced Controls:</strong> Trigger word toggles and customizable loader node</li>
|
|
<li><strong>Recipe System:</strong> Create, save and share your perfect combinations</li>
|
|
</ul>
|
|
</div>
|
|
<div class="help-actions">
|
|
<button id="replayTutorialBtn" class="replay-tutorial-btn">
|
|
<i class="fas fa-graduation-cap"></i>
|
|
<span>{{ t('help.gettingStarted.replayTutorial') }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Update Vlogs Tab -->
|
|
<div class="tab-pane" id="update-vlogs">
|
|
<h3>
|
|
{{ t('help.updateVlogs.title') }}
|
|
<span class="update-date-badge">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
Apr 28, 2025
|
|
</span>
|
|
</h3>
|
|
<div class="video-list">
|
|
<div class="video-item">
|
|
<div class="video-container">
|
|
<div class="video-thumbnail" data-video-id="videoseries?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj">
|
|
<img src="/loras_static/images/video-thumbnails/updates-playlist.jpg" alt="LoRA Manager Updates Playlist">
|
|
<div class="video-play-overlay">
|
|
<a href="https://www.youtube.com/playlist?list=PLU2fMdHNl8ohz1u7Ke3ooOuMbU5Y4sgoj" target="_blank" class="external-link-btn">
|
|
<i class="fas fa-external-link-alt"></i>
|
|
<span>{{ t('help.updateVlogs.watchOnYouTube') }}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="video-info">
|
|
<h4>{{ t('help.updateVlogs.playlistTitle') }}</h4>
|
|
<p>{{ t('help.updateVlogs.playlistDescription') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Documentation Tab -->
|
|
<div class="tab-pane" id="documentation">
|
|
<h3>{{ t('help.documentation.title') }}</h3>
|
|
|
|
<div class="docs-section">
|
|
<h4><i class="fas fa-book"></i> {{ t('help.documentation.general') }}</h4>
|
|
<ul class="docs-links">
|
|
<li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki" target="_blank">Wiki Home</a></li>
|
|
<li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/blob/main/README.md" target="_blank">README</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="docs-section">
|
|
<h4><i class="fas fa-tools"></i> {{ t('help.documentation.troubleshooting') }}</h4>
|
|
<ul class="docs-links">
|
|
<li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/FAQ-(Frequently-Asked-Questions)" target="_blank">FAQ (Frequently Asked Questions)</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="docs-section">
|
|
<h4><i class="fas fa-layer-group"></i> {{ t('help.documentation.modelManagement') }}</h4>
|
|
<ul class="docs-links">
|
|
<li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/Example-Images" target="_blank">Example Images (WIP)</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="docs-section">
|
|
<h4><i class="fas fa-book-open"></i> {{ t('help.documentation.recipes') }}</h4>
|
|
<ul class="docs-links">
|
|
<li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/Recipes-Feature-Tutorial-%E2%80%93-ComfyUI-LoRA-Manager" target="_blank">Recipes Tutorial</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="docs-section">
|
|
<h4><i class="fas fa-cog"></i> {{ t('help.documentation.settings') }}</h4>
|
|
<ul class="docs-links">
|
|
<li><a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/Configuration" target="_blank">Configuration Options (WIP)</a></li>
|
|
<li>
|
|
<a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/Priority-Tags-Configuration-Guide" target="_blank">
|
|
Priority Tags Configuration Guide
|
|
<span class="new-content-badge inline">{{ t('help.documentation.newBadge') }}</span>
|
|
<li>
|
|
<a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/AI-Provider-Setup" target="_blank">
|
|
AI Provider Setup
|
|
<span class="new-content-badge inline">{{ t('help.documentation.newBadge') }}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="docs-section">
|
|
<h4>
|
|
<i class="fas fa-puzzle-piece"></i> {{ t('help.documentation.extensions') }}
|
|
<span class="new-content-badge">{{ t('help.documentation.newBadge') }}</span>
|
|
</h4>
|
|
<ul class="docs-links">
|
|
<li>
|
|
<a href="https://github.com/willmiao/ComfyUI-Lora-Manager/wiki/LoRA-Manager-Civitai-Extension-(Chrome-Extension)" target="_blank">
|
|
LM Civitai Extension
|
|
<span class="new-content-badge inline">{{ t('help.documentation.newBadge') }}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Shortcuts Tab -->
|
|
<div class="tab-pane" id="shortcuts">
|
|
<h3>{{ t('help.shortcuts.title') }}</h3>
|
|
|
|
<div class="shortcuts-section">
|
|
<h4><i class="fas fa-keyboard"></i> {{ t('help.shortcuts.groups.general') }}</h4>
|
|
<ul class="shortcuts-list">
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>Ctrl</kbd><span class="shortcut-sep">/</span><kbd>Cmd</kbd><span class="shortcut-sep">+</span><kbd>F</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.focusSearch') }}</span>
|
|
</li>
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>Esc</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.closeModal') }}</span>
|
|
</li>
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>?</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.openShortcuts') }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="shortcuts-section">
|
|
<h4><i class="fas fa-bolt"></i> {{ t('help.shortcuts.groups.actions') }}</h4>
|
|
<ul class="shortcuts-list">
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>R</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.refresh') }}</span>
|
|
</li>
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>F</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.fetchMetadata') }}</span>
|
|
</li>
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>D</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.downloadModel') }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="shortcuts-section">
|
|
<h4><i class="fas fa-object-group"></i> {{ t('help.shortcuts.groups.selection') }}</h4>
|
|
<ul class="shortcuts-list">
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>B</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.toggleBulkMode') }}</span>
|
|
</li>
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>Ctrl</kbd><span class="shortcut-sep">/</span><kbd>Cmd</kbd><span class="shortcut-sep">+</span><kbd>A</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.selectAll') }}</span>
|
|
</li>
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>Shift</kbd><span class="shortcut-sep">+</span><kbd>{{ t('help.shortcuts.keys.click') }}</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.rangeSelect') }}</span>
|
|
</li>
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>{{ t('help.shortcuts.keys.drag') }}</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.marqueeSelect') }}</span>
|
|
</li>
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>Esc</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.exitBulkMode') }}</span>
|
|
</li>
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>{{ t('help.shortcuts.keys.rightClick') }}</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.bulkActions') }}</span>
|
|
</li>
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>{{ t('help.shortcuts.keys.rightClick') }}</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.globalActions') }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="shortcuts-section">
|
|
<h4><i class="fas fa-arrows-alt-v"></i> {{ t('help.shortcuts.groups.navigation') }}</h4>
|
|
<ul class="shortcuts-list">
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>PageUp</kbd><span class="shortcut-sep">/</span><kbd>PageDown</kbd><span class="shortcut-sep">/</span><kbd>Home</kbd><span class="shortcut-sep">/</span><kbd>End</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.scrollPages') }}</span>
|
|
</li>
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>Alt</kbd><span class="shortcut-sep">+</span><kbd>{{ t('help.shortcuts.keys.letter') }}</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.jumpAlphabet') }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="shortcuts-section">
|
|
<h4><i class="fas fa-window-restore"></i> {{ t('help.shortcuts.groups.modelModal') }}</h4>
|
|
<ul class="shortcuts-list">
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>←</kbd><span class="shortcut-sep">/</span><kbd>→</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.prevNext') }}</span>
|
|
</li>
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>Delete</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.deleteEntry') }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="shortcuts-section">
|
|
<h4><i class="fas fa-images"></i> {{ t('help.shortcuts.groups.mediaViewer') }}</h4>
|
|
<ul class="shortcuts-list">
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>←</kbd><span class="shortcut-sep">/</span><kbd>→</kbd><span class="shortcut-sep">/</span><kbd>[</kbd><span class="shortcut-sep">/</span><kbd>]</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.cycleMedia') }}</span>
|
|
</li>
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>{{ t('help.shortcuts.keys.swipe') }}</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.swipeTouch') }}</span>
|
|
</li>
|
|
<li>
|
|
<span class="shortcut-keys"><kbd>Esc</kbd></span>
|
|
<span class="shortcut-description">{{ t('help.shortcuts.entries.closeViewer') }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|