ComfyUI-Lora-Manager/templates/components/modals/help_modal.html

<!-- Help Modal -->
<div id="helpModal" class="modal" data-help-content-version="2026-09-03">
    <div class="modal-content help-modal">
        <button class="close" onclick="modalManager.closeModal('helpModal')">&times;</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>
                        <span class="new-content-badge">{{ t('help.newContentBadge') }}</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>&larr;</kbd><span class="shortcut-sep">/</span><kbd>&rarr;</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>&larr;</kbd><span class="shortcut-sep">/</span><kbd>&rarr;</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>