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

Enhance LoRA and Recipe templates by adding request context to template rendering. Update JavaScript to initialize search managers with context-specific options and improve header navigation with dynamic search placeholders. Refactor header component for better context awareness in search functionality.

Browse Source
This commit is contained in:
Will Miao
2025-03-17 10:11:50 +08:00
parent b0a8b0cc6f
commit 1034282161
8 changed files with 631 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
templates/components/header.html
View File

@@ -7,21 +7,21 @@
</a>
</div>
<nav class="main-nav">
<a href="/loras" class="nav-item {% if current_page == 'loras' %}active{% endif %}">
<a href="/loras" class="nav-item" id="lorasNavItem">
<i class="fas fa-layer-group"></i> LoRAs
</a>
<a href="/loras/recipes" class="nav-item {% if current_page == 'recipes' %}active{% endif %}">
<a href="/loras/recipes" class="nav-item" id="recipesNavItem">
<i class="fas fa-book-open"></i> Recipes
</a>
<a href="/checkpoints" class="nav-item {% if current_page == 'checkpoints' %}active{% endif %}">
<a href="/checkpoints" class="nav-item" id="checkpointsNavItem">
<i class="fas fa-check-circle"></i> Checkpoints
</a>
</nav>
<!-- Add search container to header -->
<!-- Context-aware search container -->
<div class="header-search">
<div class="search-container">
<input type="text" id="searchInput" placeholder="Search models..." />
<input type="text" id="searchInput" placeholder="Search..." />
<i class="fas fa-search search-icon"></i>
<button class="search-options-toggle" id="searchOptionsToggle" title="Search Options">
<i class="fas fa-sliders-h"></i>
@@ -55,7 +55,7 @@
</div>
</header>
<!-- Add search options panel -->
<!-- Add search options panel with context-aware options -->
<div id="searchOptionsPanel" class="search-options-panel hidden">
<div class="options-header">
<h3>Search Options</h3>
@@ -67,8 +67,15 @@
<h4>Search In:</h4>
<div class="search-option-tags">
<div class="search-option-tag active" data-option="filename">Filename</div>
{% if request.path == '/loras' or request.path == '/loras/recipes' %}
<div class="search-option-tag active" data-option="tags">Tags</div>
<div class="search-option-tag active" data-option="modelname">Model Name</div>
{% endif %}
<div class="search-option-tag active" data-option="modelname">
{% if request.path == '/loras/recipes' %}Recipe Name{% elif request.path == '/checkpoints' %}Checkpoint Name{% else %}Model Name{% endif %}
</div>
{% if request.path == '/loras/recipes' %}
<div class="search-option-tag active" data-option="loras">Included LoRAs</div>
{% endif %}
</div>
</div>
<div class="options-section">
@@ -108,4 +115,46 @@
Clear All Filters
</button>
</div>
</div>
</div>
<!-- Add this script at the end of the header component -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Get the current path from the URL
const currentPath = window.location.pathname;
// Update search placeholder based on current path
const searchInput = document.getElementById('searchInput');
if (searchInput) {
if (currentPath === '/loras') {
searchInput.placeholder = 'Search LoRAs...';
} else if (currentPath === '/loras/recipes') {
searchInput.placeholder = 'Search recipes...';
} else if (currentPath === '/checkpoints') {
searchInput.placeholder = 'Search checkpoints...';
} else {
searchInput.placeholder = 'Search...';
}
}
// Update active nav item
const lorasNavItem = document.getElementById('lorasNavItem');
const recipesNavItem = document.getElementById('recipesNavItem');
const checkpointsNavItem = document.getElementById('checkpointsNavItem');
const lorasIndicator = document.getElementById('lorasIndicator');
const recipesIndicator = document.getElementById('recipesIndicator');
const checkpointsIndicator = document.getElementById('checkpointsIndicator');
if (currentPath === '/loras') {
lorasNavItem.classList.add('active');
lorasIndicator.style.display = 'block';
} else if (currentPath === '/loras/recipes') {
recipesNavItem.classList.add('active');
recipesIndicator.style.display = 'block';
} else if (currentPath === '/checkpoints') {
checkpointsNavItem.classList.add('active');
checkpointsIndicator.style.display = 'block';
}
});
</script>