${version.baseModel ? `
`;
}
+ // Early access badge (shown additionally with other badges)
+ let earlyAccessBadge = '';
+ if (isEarlyAccess) {
+ // Format the early access end date if available
+ let earlyAccessInfo = 'This LoRA requires early access payment to download.';
+ if (lora.earlyAccessEndsAt) {
+ try {
+ const endDate = new Date(lora.earlyAccessEndsAt);
+ const formattedDate = endDate.toLocaleDateString();
+ earlyAccessInfo += ` Early access ends on ${formattedDate}.`;
+ } catch (e) {
+ console.warn('Failed to format early access date', e);
+ }
+ }
+
+ earlyAccessBadge = `${version.baseModel}
` : ''}
+ ${earlyAccessBadge}
+ Early Access
+
`;
+ }
+
// Format size if available
const sizeDisplay = lora.size ?
`${earlyAccessInfo} Verify that you have purchased early access before downloading.
+ ${this.formatFileSize(lora.size)}
` : '';
return `
-
+
${lora.version ? `
${lora.name}
-${statusBadge}
+
+ ${statusBadge}
+ ${earlyAccessBadge}
+
${lora.version}
` : ''}
@@ -463,6 +483,41 @@ export class ImportManager {
}).join('');
}
+ // Check for early access loras and show warning if any exist
+ const earlyAccessLoras = this.recipeData.loras.filter(lora =>
+ lora.isEarlyAccess && !lora.existsLocally && !lora.isDeleted);
+ if (earlyAccessLoras.length > 0) {
+ // Show a warning about early access loras
+ const warningMessage = `
+
+
+
+ `;
+
+ // Show the warning message
+ const buttonsContainer = document.querySelector('#detailsStep .modal-actions');
+ if (buttonsContainer) {
+ // Remove existing warning if any
+ const existingWarning = document.getElementById('earlyAccessWarning');
+ if (existingWarning) {
+ existingWarning.remove();
+ }
+
+ // Add new warning
+ const warningContainer = document.createElement('div');
+ warningContainer.id = 'earlyAccessWarning';
+ warningContainer.innerHTML = warningMessage;
+ buttonsContainer.parentNode.insertBefore(warningContainer, buttonsContainer);
+ }
+ }
+
// Update Next button state based on missing LoRAs
this.updateNextButtonState();
}
@@ -581,6 +636,40 @@ export class ImportManager {
// Update missing LoRAs list to exclude deleted LoRAs
this.missingLoras = this.recipeData.loras.filter(lora =>
!lora.existsLocally && !lora.isDeleted);
+
+ // Check for early access loras and show warning if any exist
+ const earlyAccessLoras = this.missingLoras.filter(lora => lora.isEarlyAccess);
+ if (earlyAccessLoras.length > 0) {
+ // Show a warning about early access loras
+ const warningMessage = `
+
+
+ ${earlyAccessLoras.length} LoRA(s) require Early Access
+
+ These LoRAs require a payment to access. Download will fail if you haven't purchased access.
+ You may need to log in to your Civitai account in browser settings.
+
+
+
+
+ `;
+
+ // Show the warning message
+ const buttonsContainer = document.querySelector('#detailsStep .modal-actions');
+ if (buttonsContainer) {
+ // Remove existing warning if any
+ const existingWarning = document.getElementById('earlyAccessWarning');
+ if (existingWarning) {
+ existingWarning.remove();
+ }
+
+ // Add new warning
+ const warningContainer = document.createElement('div');
+ warningContainer.id = 'earlyAccessWarning';
+ warningContainer.innerHTML = warningMessage;
+ buttonsContainer.parentNode.insertBefore(warningContainer, buttonsContainer);
+ }
+ }
// If we have downloadable missing LoRAs, go to location step
if (this.missingLoras.length > 0) {
@@ -646,12 +735,22 @@ export class ImportManager {
missingLorasList.innerHTML = this.downloadableLoRAs.map(lora => {
const sizeDisplay = lora.size ? this.formatFileSize(lora.size) : 'Unknown size';
const baseModel = lora.baseModel ? `${lora.baseModel}` : '';
+ const isEarlyAccess = lora.isEarlyAccess;
+
+ // Early access badge
+ let earlyAccessBadge = '';
+ if (isEarlyAccess) {
+ earlyAccessBadge = `
+ Early Access
+ `;
+ }
return `
-
+
+ ${earlyAccessLoras.length} LoRA(s) require Early Access
+
+ These LoRAs require a payment to access. Download will fail if you haven't purchased access.
+ You may need to log in to your Civitai account in browser settings.
+
+
+
@@ -822,6 +921,8 @@ export class ImportManager {
const updateProgress = this.loadingManager.showDownloadProgress(this.downloadableLoRAs.length);
let completedDownloads = 0;
+ let failedDownloads = 0;
+ let earlyAccessFailures = 0;
let currentLoraProgress = 0;
// Set up progress tracking for current download
@@ -832,7 +933,7 @@ export class ImportManager {
currentLoraProgress = data.progress;
// Get current LoRA name
- const currentLora = this.downloadableLoRAs[completedDownloads];
+ const currentLora = this.downloadableLoRAs[completedDownloads + failedDownloads];
const loraName = currentLora ? currentLora.name : '';
// Update progress display
@@ -841,19 +942,19 @@ export class ImportManager {
// Add more detailed status messages based on progress
if (currentLoraProgress < 3) {
this.loadingManager.setStatus(
- `Preparing download for LoRA ${completedDownloads+1}/${this.downloadableLoRAs.length}`
+ `Preparing download for LoRA ${completedDownloads + failedDownloads + 1}/${this.downloadableLoRAs.length}`
);
} else if (currentLoraProgress === 3) {
this.loadingManager.setStatus(
- `Downloaded preview for LoRA ${completedDownloads+1}/${this.downloadableLoRAs.length}`
+ `Downloaded preview for LoRA ${completedDownloads + failedDownloads + 1}/${this.downloadableLoRAs.length}`
);
} else if (currentLoraProgress > 3 && currentLoraProgress < 100) {
this.loadingManager.setStatus(
- `Downloading LoRA ${completedDownloads+1}/${this.downloadableLoRAs.length}`
+ `Downloading LoRA ${completedDownloads + failedDownloads + 1}/${this.downloadableLoRAs.length}`
);
} else {
this.loadingManager.setStatus(
- `Finalizing LoRA ${completedDownloads+1}/${this.downloadableLoRAs.length}`
+ `Finalizing LoRA ${completedDownloads + failedDownloads + 1}/${this.downloadableLoRAs.length}`
);
}
}
@@ -884,6 +985,18 @@ export class ImportManager {
if (!response.ok) {
const errorText = await response.text();
console.error(`Failed to download LoRA ${lora.name}: ${errorText}`);
+
+ // Check if this is an early access error (status 401 is the key indicator)
+ if (response.status === 401 ||
+ (errorText.toLowerCase().includes('early access') ||
+ errorText.toLowerCase().includes('purchase'))) {
+ earlyAccessFailures++;
+ this.loadingManager.setStatus(
+ `Failed to download ${lora.name}: Early Access required`
+ );
+ }
+
+ failedDownloads++;
// Continue with next download
} else {
completedDownloads++;
@@ -891,7 +1004,7 @@ export class ImportManager {
// Update progress to show completion of current LoRA
updateProgress(100, completedDownloads, '');
- if (completedDownloads < this.downloadableLoRAs.length) {
+ if (completedDownloads + failedDownloads < this.downloadableLoRAs.length) {
this.loadingManager.setStatus(
`Completed ${completedDownloads}/${this.downloadableLoRAs.length} LoRAs. Starting next download...`
);
@@ -899,6 +1012,7 @@ export class ImportManager {
}
} catch (downloadError) {
console.error(`Error downloading LoRA ${lora.name}:`, downloadError);
+ failedDownloads++;
// Continue with next download
}
}
@@ -906,11 +1020,18 @@ export class ImportManager {
// Close WebSocket
ws.close();
- // Show final completion message
- if (completedDownloads === this.downloadableLoRAs.length) {
+ // Show appropriate completion message based on results
+ if (failedDownloads === 0) {
showToast(`All ${completedDownloads} LoRAs downloaded successfully`, 'success');
} else {
- showToast(`Downloaded ${completedDownloads} of ${this.downloadableLoRAs.length} LoRAs`, 'warning');
+ if (earlyAccessFailures > 0) {
+ showToast(
+ `Downloaded ${completedDownloads} of ${this.downloadableLoRAs.length} LoRAs. ${earlyAccessFailures} failed due to Early Access restrictions.`,
+ 'error'
+ );
+ } else {
+ showToast(`Downloaded ${completedDownloads} of ${this.downloadableLoRAs.length} LoRAs`, 'error');
+ }
}
}
diff --git a/static/js/utils/uiHelpers.js b/static/js/utils/uiHelpers.js
index 4d2a55aa..9c2a6dd1 100644
--- a/static/js/utils/uiHelpers.js
+++ b/static/js/utils/uiHelpers.js
@@ -6,11 +6,54 @@ export function showToast(message, type = 'info') {
const toast = document.createElement('div');
toast.className = `toast toast-${type}`;
toast.textContent = message;
- document.body.append(toast);
+
+ // Get or create toast container
+ let toastContainer = document.querySelector('.toast-container');
+ if (!toastContainer) {
+ toastContainer = document.createElement('div');
+ toastContainer.className = 'toast-container';
+ document.body.append(toastContainer);
+ }
+
+ toastContainer.append(toast);
+
+ // Calculate vertical position for stacked toasts
+ const existingToasts = Array.from(toastContainer.querySelectorAll('.toast'));
+ const toastIndex = existingToasts.indexOf(toast);
+ const topOffset = 20; // Base offset from top
+ const spacing = 10; // Space between toasts
+
+ // Set position based on existing toasts
+ toast.style.top = `${topOffset + (toastIndex * (toast.offsetHeight || 60 + spacing))}px`;
requestAnimationFrame(() => {
toast.classList.add('show');
- setTimeout(() => toast.remove(), 2300);
+
+ // Set timeout based on type
+ let timeout = 2000; // Default (info)
+ if (type === 'warning' || type === 'error') {
+ timeout = 5000;
+ }
+
+ setTimeout(() => {
+ toast.classList.remove('show');
+ toast.addEventListener('transitionend', () => {
+ toast.remove();
+
+ // Reposition remaining toasts
+ if (toastContainer) {
+ const remainingToasts = Array.from(toastContainer.querySelectorAll('.toast'));
+ remainingToasts.forEach((t, index) => {
+ t.style.top = `${topOffset + (index * (t.offsetHeight || 60 + spacing))}px`;
+ });
+
+ // Remove container if empty
+ if (remainingToasts.length === 0) {
+ toastContainer.remove();
+ }
+ }
+ });
+ }, timeout);
});
}
${lora.name}
${baseModel}
+ ${earlyAccessBadge}
${sizeDisplay}