TBNilles/SparkyUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(model-manager): base-model multi-select filter on CivitAI browse

Browse Source 
Add a checkbox dropdown to filter the CivitAI catalog by one or more base
models (SD 1.5, SDXL, Pony, Illustrious, Flux, etc.), mapped to the API's
`baseModels` array param. Backend search accepts comma-separated
base_models; button shows the selected count with a Clear action.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
TBNilles
2026-06-07 16:37:33 -04:00
parent 505f212c4d
commit 15e0dc3772
6 changed files with 86 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
model-manager/app/static/style.css
+21
View File
@@ -219,6 +219,27 @@ code { background: var(--bg-3); padding: 1px 5px; border-radius: 4px; font-size:
.check { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text); white-space: nowrap; }
.check input { width: auto; }
/* multi-select dropdown (base model) */
.multi-dd { position: relative; }
.multi-btn { white-space: nowrap; }
.multi-panel {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
background: var(--bg-2); border: 1px solid var(--border);
border-radius: 8px; padding: 8px; min-width: 200px;
max-height: 320px; overflow-y: auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px;
box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.multi-panel[hidden] { display: none; }
.multi-panel-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 2px; }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12px; padding: 2px 4px; }
.multi-opt {
display: flex; align-items: center; gap: 6px; margin: 0;
color: var(--text); font-size: 13px; padding: 4px 6px; border-radius: 6px; cursor: pointer;
}
.multi-opt:hover { background: var(--bg-3); }
.multi-opt input { width: auto; }
.browse-grid {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));