nodes/Nuked88-ComfyUI-N-Sidebar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🟢 assets_downloader.html for added base model filter dropdowns

Browse Source 
🛠️ assets_downloader.jsb -> integrated base model filter into search logic
🛠️ assets_downloader.jsb -> updated event handling for new filters
🛠️ assets_downloader.css -> adjusted width for base model filter element
🔴 pyproject.toml for version bump to 1.6.2
This commit is contained in:
Nuked88
2025-05-26 20:59:48 +02:00
parent 6961609640
commit 7ffc3e9e2a
4 changed files with 98 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/panels/assets_downloader/assets_downloader.html
+68
View File
@@ -37,6 +37,60 @@
<option value="Other">Other</option> <option value="Other">Other</option>
</select> </select>
<!-- Base Model Filter -->
<select id="baseModelFilter" data-placeholder="Base Model(s)" multiple data-multi-select>
<option value="Aura Flow">Aura Flow</option>
<option value="CogVideoX">CogVideoX</option>
<option value="Flux .1 D">Flux .1 D</option>
<option value="Flux .1 S">Flux .1 S</option>
<option value="HiDream">HiDream</option>
<option value="Hunyuan 1">Hunyuan 1</option>
<option value="Hunyuan Video">Hunyuan Video</option>
<option value="Illustrious">Illustrious</option>
<option value="Kolors">Kolors</option>
<option value="LTXV">LTXV</option>
<option value="Lumina">Lumina</option>
<option value="Mochi">Mochi</option>
<option value="NoobAI">NoobAI</option>
<option value="ODOR">ODOR</option>
<option value="Open AI">Open AI</option>
<option value="Other">Other</option>
<option value="PixArt Σ">PixArt Σ</option>
<option value="PixArt α">PixArt α</option>
<option value="Playground v2">Playground v2</option>
<option value="Pony">Pony</option>
<option value="SD 1.4">SD 1.4</option>
<option value="SD 1.5">SD 1.5</option>
<option value="SD 1.5 Hyper">SD 1.5 Hyper</option>
<option value="SD 1.5 LCM">SD 1.5 LCM</option>
<option value="SD 2.0">SD 2.0</option>
<option value="SD 2.0 768">SD 2.0 768</option>
<option value="SD 2.1">SD 2.1</option>
<option value="SD 2.1 768">SD 2.1 768</option>
<option value="SD 2.1 Unclip">SD 2.1 Unclip</option>
<option value="SD 3">SD 3</option>
<option value="SD 3.5">SD 3.5</option>
<option value="SD 3.5 Large">SD 3.5 Large</option>
<option value="SD 3.5 Large Turbo">SD 3.5 Large Turbo</option>
<option value="SD 3.5 Medium">SD 3.5 Medium</option>
<option value="SDXL 0.9">SDXL 0.9</option>
<option value="SDXL 1.0">SDXL 1.0</option>
<option value="SDXL 1.0 LCM">SDXL 1.0 LCM</option>
<option value="SDXL Distilled">SDXL Distilled</option>
<option value="SDXL Hyper">SDXL Hyper</option>
<option value="SDXL Lightning">SDXL Lightning</option>
<option value="SDXL Turbo">SDXL Turbo</option>
<option value="SVD">SVD</option>
<option value="SVD XT">SVD XT</option>
<option value="Stable Cascade">Stable Cascade</option>
<option value="WAN Video">WAN Video</option>
<option value="Wan Video 1.3B t2v">Wan Video 1.3B t2v</option>
<option value="Wan Video 14B i2v 480p">Wan Video 14B i2v 480p</option>
<option value="Wan Video 14B i2v 720p">Wan Video 14B i2v 720p</option>
<option value="Wan Video 14B t2v">Wan Video 14B t2v</option>
<option value="Other">Other</option>
</select>
<!-- Sort Option --> <!-- Sort Option -->
<select id="sortOption" onchange="assets_downloader.searchT()"> <select id="sortOption" onchange="assets_downloader.searchT()">
<option value="">Sort By</option> <option value="">Sort By</option>
@@ -113,6 +167,20 @@
<option value="Other">Other</option> <option value="Other">Other</option>
</select> </select>
<!-- Base Model Filter -->
<select id="baseModelFilterLibrary" data-placeholder="Base Model(s)" multiple data-library-multi-select>
<option value="SD 1.4">SD 1.4</option>
<option value="SD 1.5">SD 1.5</option>
<option value="SD 2.0">SD 2.0</option>
<option value="SD 2.0 768">SD 2.0 768</option>
<option value="SD 2.1">SD 2.1</option>
<option value="SD 2.1 768">SD 2.1 768</option>
<option value="SD 2.1 Unclip">SD 2.1 Unclip</option>
<option value="SDXL 0.9">SDXL 0.9</option>
<option value="SDXL 1.0">SDXL 1.0</option>
<option value="Other">Other</option>
</select>
<!-- Sort Option --> <!-- Sort Option -->
<select id="sortOptionLibrary" onchange="assets_downloader.searchInLibrary()"> <select id="sortOptionLibrary" onchange="assets_downloader.searchInLibrary()">
<option value="">Sort By</option> <option value="">Sort By</option>
app/panels/assets_downloader/assets_downloader.jsb
+26 -8
View File
@@ -622,9 +622,13 @@ setupWebSocket();
// Get search query and filters // Get search query and filters
const query = document.getElementById('searchTemplateInput').value; const query = document.getElementById('searchTemplateInput').value;
const nsfwFilter = Array.from(document.getElementById('nsfwFilter').selectedOptions).map(option => option.value); const nsfwFilter = Array.from(document.getElementById('nsfwFilter').selectedOptions).map(option => option.value);
const multiSelectElement = document.getElementById('typeFilter'); const typeMultiSelectElement = document.getElementById('typeFilter');
const hiddenInputs = multiSelectElement.querySelectorAll('input[type="hidden"]'); const typeHiddenInputs = typeMultiSelectElement.querySelectorAll('input[type="hidden"]');
const typeFilter = Array.from(hiddenInputs).map(input => input.value); const typeFilter = Array.from(typeHiddenInputs).map(input => input.value);
const baseModelMultiSelectElement = document.getElementById('baseModelFilter');
const baseModelHiddenInputs = baseModelMultiSelectElement.querySelectorAll('input[type="hidden"]');
const baseModelFilter = Array.from(baseModelHiddenInputs).map(input => input.value);
const sortOption = document.getElementById('sortOption').value; const sortOption = document.getElementById('sortOption').value;
const periodOption = document.getElementById('periodOption').value; const periodOption = document.getElementById('periodOption').value;
@@ -648,6 +652,11 @@ setupWebSocket();
typeFilter.forEach(type => params.append("types", type)); typeFilter.forEach(type => params.append("types", type));
} }
// Add base model filter
if (baseModelFilter.length > 0) {
baseModelFilter.forEach(model => params.append("baseModels", model));
}
// Add sort option // Add sort option
if (sortOption) { if (sortOption) {
params.append("sort", sortOption); params.append("sort", sortOption);
@@ -842,9 +851,14 @@ setupWebSocket();
const nsfwFilter = document.getElementById('nsfwFilterLibrary').value; const nsfwFilter = document.getElementById('nsfwFilterLibrary').value;
// Filtro tipo (multi-select) // Filtro tipo (multi-select)
const multiSelectElement = document.getElementById('typeFilterLibrary'); const typeMultiSelectElement = document.getElementById('typeFilterLibrary');
const hiddenInputs = multiSelectElement.querySelectorAll('input[type="hidden"]'); const typeHiddenInputs = typeMultiSelectElement.querySelectorAll('input[type="hidden"]');
const selectedTypes = Array.from(hiddenInputs).map(option => option.value.toLowerCase()); const selectedTypes = Array.from(typeHiddenInputs).map(option => option.value.toLowerCase());
// Filtro baseModels (multi-select)
const baseModelMultiSelectElement = document.getElementById('baseModelFilterLibrary');
const baseModelHiddenInputs = baseModelMultiSelectElement.querySelectorAll('input[type="hidden"]');
const selectedBaseModels = Array.from(baseModelHiddenInputs).map(option => option.value.toLowerCase());
// Opzione di ordinamento // Opzione di ordinamento
const sortOption = document.getElementById('sortOptionLibrary').value; const sortOption = document.getElementById('sortOptionLibrary').value;
@@ -859,6 +873,7 @@ setupWebSocket();
const cardNSFW = card.querySelector('input[name="nsfw"]').value; const cardNSFW = card.querySelector('input[name="nsfw"]').value;
const cardTypes = Array.from(card.querySelectorAll('.main-stripe .sub-stripe div')).map(el => el.innerText.toLowerCase()); const cardTypes = Array.from(card.querySelectorAll('.main-stripe .sub-stripe div')).map(el => el.innerText.toLowerCase());
const cardBaseModel = card.querySelector('.main-stripe .sub-stripe div:nth-child(3)').innerText.toLowerCase();
// Filtra per testo (searchQuery) // Filtra per testo (searchQuery)
let matchesSearch = searchQuery === "" || cardTitle.includes(searchQuery); let matchesSearch = searchQuery === "" || cardTitle.includes(searchQuery);
@@ -869,8 +884,11 @@ setupWebSocket();
// Filtra per tipo (se selezionati) // Filtra per tipo (se selezionati)
let matchesType = selectedTypes.length === 0 || selectedTypes.some(type => cardTypes.includes(type)); let matchesType = selectedTypes.length === 0 || selectedTypes.some(type => cardTypes.includes(type));
// Filtra per baseModel (se selezionati)
let matchesBaseModel = selectedBaseModels.length === 0 || selectedBaseModels.includes(cardBaseModel);
// Mostra o nascondi la card in base ai filtri // Mostra o nascondi la card in base ai filtri
if (matchesSearch && matchesNSFW && matchesType) { if (matchesSearch && matchesNSFW && matchesType && matchesBaseModel) {
card.style.display = "block"; card.style.display = "block";
} else { } else {
card.style.display = "none"; card.style.display = "none";
@@ -1169,7 +1187,7 @@ setupWebSocket();
} }
} }
document.querySelectorAll('[data-multi-select]').forEach(select => new MultiSelect(select, { onChange: debouncedSearchType })); document.querySelectorAll('[data-multi-select]').forEach(select => new MultiSelect(select, { onChange: debouncedSearchT }));
document.querySelectorAll('[data-library-multi-select]').forEach(select => new MultiSelect(select, { onChange: debouncedSearchInLibrary })); document.querySelectorAll('[data-library-multi-select]').forEach(select => new MultiSelect(select, { onChange: debouncedSearchInLibrary }));
return { return {
app/panels/assets_downloader/style.css
+3 -1
View File
@@ -305,7 +305,9 @@ padding-bottom: 150px;
} }
#baseModelFilter{
width: 157px !important;
}
#t1, #t2{ #t1, #t2{
display: none; display: none;
} }
pyproject.toml
+1 -1
View File
@@ -1,7 +1,7 @@
[project] [project]
name = "comfyui-n-sidebar" name = "comfyui-n-sidebar"
description = "A simple sidebar for ComfyUI." description = "A simple sidebar for ComfyUI."
version = "1.6.1" version = "1.6.2"
license = { file = "LICENSE" } license = { file = "LICENSE" }
[project.urls] [project.urls]