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

feat(download): support multi-precision file selection for CivitAI model downloads (#956)

Browse Source
This commit is contained in:
Will Miao
2026-06-02 15:41:42 +08:00
parent df67bd396a
commit 7e5e3b1ec7
14 changed files with 350 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
static/css/components/modal/download-modal.css
View File

@@ -502,4 +502,170 @@
opacity: 0.5;
pointer-events: none;
user-select: none;
}
/* File Count Badge on Version Items */
.file-select-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 10px;
background: oklch(var(--lora-accent) / 0.18);
color: var(--lora-accent);
font-size: inherit;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid oklch(var(--lora-accent) / 0.35);
user-select: none;
box-shadow: 0 1px 2px oklch(var(--lora-accent) / 0.1);
}
.file-select-badge:hover {
background: oklch(var(--lora-accent) / 0.3);
border-color: var(--lora-accent);
transform: scale(1.05);
box-shadow: 0 2px 6px oklch(var(--lora-accent) / 0.2);
}
.file-select-badge:active {
transform: scale(0.98);
}
.file-select-badge i {
font-size: 0.9em;
}
.file-select-badge .badge-arrow {
margin-left: 2px;
font-size: 0.65em;
opacity: 0.7;
}
/* File Selection Step */
.file-selection-header {
margin-bottom: var(--space-3);
}
.file-selection-header h3 {
margin: 0 0 4px 0;
font-size: 1.1em;
color: var(--text-color);
}
.file-selection-version-name {
font-size: 0.9em;
color: var(--text-color);
opacity: 0.7;
}
.file-selection-list {
max-height: 360px;
overflow-y: auto;
margin: var(--space-2) 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.file-option {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-sm);
cursor: pointer;
transition: all 0.2s ease;
background: var(--bg-color);
}
.file-option:hover {
border-color: var(--lora-accent);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.file-option.selected {
border: 2px solid var(--lora-accent);
background: oklch(var(--lora-accent) / 0.05);
}
.file-option-radio {
flex-shrink: 0;
}
.file-option-radio input[type="radio"] {
width: 16px;
height: 16px;
accent-color: var(--lora-accent);
cursor: pointer;
}
.file-option-info {
flex: 1;
min-width: 0;
}
.file-option-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 4px;
}
.file-tag {
display: inline-block;
padding: 2px 7px;
border-radius: 4px;
font-size: 0.8em;
font-weight: 500;
line-height: 1.4;
}
.file-tag.format {
background: oklch(var(--lora-accent) / 0.1);
color: var(--lora-accent);
}
.file-tag.fp {
background: oklch(0.6 0.15 250 / 0.1);
color: oklch(0.55 0.15 250);
}
.file-tag.size {
background: oklch(0.55 0.1 160 / 0.1);
color: oklch(0.5 0.12 160);
}
.file-option-name {
font-size: 0.8em;
color: var(--text-color);
opacity: 0.6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
.file-option-size {
font-size: 0.9em;
color: var(--text-color);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* Dark theme adjustments */
[data-theme="dark"] .file-option {
background: var(--lora-surface);
}
[data-theme="dark"] .file-tag.fp {
background: oklch(0.55 0.12 250 / 0.15);
color: oklch(0.7 0.12 250);
}
[data-theme="dark"] .file-tag.size {
background: oklch(0.5 0.08 160 / 0.15);
color: oklch(0.65 0.08 160);
}

5
static/js/api/baseModelApi.js
View File

@@ -909,7 +909,7 @@ export class BaseModelApiClient {
}
}
async downloadModel(modelId, versionId, modelRoot, relativePath, useDefaultPaths = false, downloadId, source = null) {
async downloadModel(modelId, versionId, modelRoot, relativePath, useDefaultPaths = false, downloadId, source = null, fileParams = null) {
try {
const response = await fetch(DOWNLOAD_ENDPOINTS.download, {
method: 'POST',
@@ -921,7 +921,8 @@ export class BaseModelApiClient {
relative_path: relativePath,
use_default_paths: useDefaultPaths,
download_id: downloadId,
...(source ? { source } : {})
...(source ? { source } : {}),
...(fileParams ? { file_params: fileParams } : {})
})
});

119
static/js/managers/DownloadManager.js
View File

@@ -33,6 +33,8 @@ export class DownloadManager {
this.handleStartDownload = this.startDownload.bind(this);
this.handleBackToUrl = this.backToUrl.bind(this);
this.handleBackToVersions = this.backToVersions.bind(this);
this.handleBackToVersionFromFiles = this.backToVersionFromFiles.bind(this);
this.handleConfirmFileSelection = this.confirmFileSelection.bind(this);
this.handleCloseModal = this.closeModal.bind(this);
this.handleToggleDefaultPath = this.toggleDefaultPath.bind(this);
}
@@ -80,6 +82,10 @@ export class DownloadManager {
document.getElementById('backToVersionsBtn').addEventListener('click', this.handleBackToVersions);
document.getElementById('closeDownloadModal').addEventListener('click', this.handleCloseModal);
// File selection step buttons
document.getElementById('backToVersionFromFilesBtn').addEventListener('click', this.handleBackToVersionFromFiles);
document.getElementById('confirmFileSelection').addEventListener('click', this.handleConfirmFileSelection);
// Default path toggle handler
document.getElementById('useDefaultPath').addEventListener('change', this.handleToggleDefaultPath);
}
@@ -129,6 +135,7 @@ export class DownloadManager {
this.modelId = null;
this.modelVersionId = null;
this.source = null;
this.selectedFile = null;
this.selectedFolder = '';
@@ -247,9 +254,12 @@ export class DownloadManager {
const firstImage = version.images?.find(img => !img.url.endsWith('.mp4'));
const thumbnailUrl = firstImage ? firstImage.url : '/loras_static/images/no-preview.png';
// Count model-type files per version
const modelFiles = (version.files || []).filter(f => f.type === 'Model');
const primaryFile = modelFiles.find(f => f.primary) || modelFiles[0] || {};
const fileSize = version.modelSizeKB ?
(version.modelSizeKB / 1024).toFixed(2) :
(version.files[0]?.sizeKB / 1024).toFixed(2);
((primaryFile.sizeKB || 0) / 1024).toFixed(2);
const existsLocally = version.existsLocally;
const hasBeenDownloaded = version.hasBeenDownloaded && !existsLocally;
@@ -282,6 +292,12 @@ export class DownloadManager {
</div>`;
}
const fileBadge = modelFiles.length > 1 && !existsLocally
? `<span class="file-select-badge" data-version-id="${version.id}">
<i class="fas fa-th-list"></i> ${modelFiles.length} ${translate('modals.download.fileSelection.files')} <i class="fas fa-chevron-right badge-arrow"></i>
</span>`
: '';
return `
<div class="version-item ${this.currentVersion?.id === version.id ? 'selected' : ''}
${existsLocally ? 'exists-locally' : ''}
@@ -302,14 +318,23 @@ export class DownloadManager {
<div class="version-meta">
<span><i class="fas fa-calendar"></i> ${new Date(version.createdAt).toLocaleDateString()}</span>
<span><i class="fas fa-file-archive"></i> ${fileSize} MB</span>
${fileBadge}
</div>
</div>
</div>
`;
}).join('');
// Add click handlers for version selection
// Add click handlers for version selection and file badge
versionList.addEventListener('click', (event) => {
const badge = event.target.closest('.file-select-badge');
if (badge) {
event.stopPropagation();
const versionId = badge.dataset.versionId;
this.selectVersion(versionId);
this.showFileSelectionStep(versionId);
return;
}
const versionItem = event.target.closest('.version-item');
if (versionItem) {
this.selectVersion(versionItem.dataset.versionId);
@@ -352,6 +377,80 @@ export class DownloadManager {
}
}
showFileSelectionStep(versionId) {
const version = this.versions.find(v => v.id.toString() === versionId.toString());
if (!version) return;
this.currentVersion = version;
const modelFiles = (version.files || []).filter(f => f.type === 'Model');
document.getElementById('versionStep').style.display = 'none';
document.getElementById('fileSelectionStep').style.display = 'block';
const nameEl = document.getElementById('fileSelectionVersionName');
if (nameEl) {
nameEl.textContent = `${version.name} · ${version.baseModel || ''}`;
}
const container = document.getElementById('fileSelectionList');
container.innerHTML = modelFiles.map(file => {
const meta = file.metadata || {};
const sizeGB = file.sizeKB ? (file.sizeKB / (1024 * 1024)).toFixed(2) : '--';
const isSelected = this.selectedFile?.id === file.id;
const tags = [];
if (meta.size) tags.push(`<span class="file-tag size">${meta.size}</span>`);
if (meta.format) tags.push(`<span class="file-tag format">${meta.format}</span>`);
if (meta.fp) tags.push(`<span class="file-tag fp">${meta.fp}</span>`);
const fileName = file.name || '';
return `
<div class="file-option ${isSelected ? 'selected' : ''}" data-file-id="${file.id}">
<div class="file-option-radio">
<input type="radio" name="fileSelection" value="${file.id}" ${isSelected ? 'checked' : ''}>
</div>
<div class="file-option-info">
<div class="file-option-tags">
${tags.join(' ')}
</div>
<div class="file-option-name">${fileName}</div>
</div>
<div class="file-option-size">${sizeGB} GB</div>
</div>
`;
}).join('');
container.querySelectorAll('.file-option').forEach(el => {
el.addEventListener('click', () => {
container.querySelectorAll('.file-option').forEach(o => o.classList.remove('selected'));
el.classList.add('selected');
const radio = el.querySelector('input[type="radio"]');
if (radio) radio.checked = true;
});
});
}
confirmFileSelection() {
const selectedRadio = document.querySelector('#fileSelectionList input[type="radio"]:checked');
if (!selectedRadio) return;
const version = this.currentVersion;
if (!version) return;
const modelFiles = (version.files || []).filter(f => f.type === 'Model');
this.selectedFile = modelFiles.find(f => f.id.toString() === selectedRadio.value);
document.getElementById('fileSelectionStep').style.display = 'none';
document.getElementById('locationStep').style.display = 'block';
this.proceedToLocationContent();
}
backToVersionFromFiles() {
document.getElementById('fileSelectionStep').style.display = 'none';
document.getElementById('versionStep').style.display = 'block';
}
async proceedToLocation() {
if (!this.currentVersion) {
showToast('toast.loras.pleaseSelectVersion', {}, 'error');
@@ -366,6 +465,10 @@ export class DownloadManager {
document.getElementById('versionStep').style.display = 'none';
document.getElementById('locationStep').style.display = 'block';
await this.proceedToLocationContent();
}
async proceedToLocationContent() {
try {
// Fetch model roots
@@ -450,6 +553,7 @@ export class DownloadManager {
targetFolder = '',
useDefaultPaths = false,
source = null,
fileParams = null,
closeModal = false,
}) {
const config = this.apiClient?.apiConfig?.config;
@@ -513,7 +617,8 @@ export class DownloadManager {
targetFolder,
useDefaultPaths,
downloadId,
source
source,
fileParams
);
if (response?.skipped) {
@@ -632,6 +737,13 @@ export class DownloadManager {
} else {
targetFolder = this.folderTreeManager.getSelectedPath();
}
const fileParams = this.selectedFile ? {
type: 'Model',
format: this.selectedFile.metadata?.format || 'SafeTensor',
size: this.selectedFile.metadata?.size || 'full',
fp: this.selectedFile.metadata?.fp,
} : null;
return this.executeDownloadWithProgress({
modelId: this.modelId,
versionId: this.currentVersion.id,
@@ -640,6 +752,7 @@ export class DownloadManager {
targetFolder,
useDefaultPaths,
source: this.source,
fileParams,
closeModal: true,
});
}