@@ -220,6 +262,7 @@ export class ImportManager {
${lora.version ? `
${lora.version}
` : ''}
${lora.baseModel ? `
${lora.baseModel}
` : ''}
+ ${sizeDisplay}
Weight: ${lora.weight || 1.0}
@@ -291,8 +334,6 @@ export class ImportManager {
return;
}
- console.log('Proceeding from details, missing LoRAs:', this.missingLoras.length);
-
// If we have missing LoRAs, go to location step
if (this.missingLoras.length > 0) {
this.proceedToLocation();
@@ -303,30 +344,61 @@ export class ImportManager {
}
async proceedToLocation() {
- // 先移除可能已有的样式
- this.removeInjectedStyles();
-
- // 添加强制CSS覆盖
- this.injectedStyles = document.createElement('style');
- this.injectedStyles.innerHTML = `
- #locationStep {
- display: block !important;
- opacity: 1 !important;
- visibility: visible !important;
- position: static !important;
- z-index: 10000 !important;
- width: auto !important;
- height: auto !important;
- overflow: visible !important;
- transform: none !important;
- }
- `;
- document.head.appendChild(this.injectedStyles);
- console.log('Added override CSS to force visibility');
+ // Show the location step with special handling
this.showStep('locationStep');
+ // Double-check after a short delay to ensure the step is visible
+ setTimeout(() => {
+ const locationStep = document.getElementById('locationStep');
+ if (locationStep.style.display !== 'block' ||
+ window.getComputedStyle(locationStep).display !== 'block') {
+ // Force display again
+ locationStep.style.display = 'block';
+
+ // If still not visible, try with injected style
+ if (window.getComputedStyle(locationStep).display !== 'block') {
+ this.injectedStyles = document.createElement('style');
+ this.injectedStyles.innerHTML = `
+ #locationStep {
+ display: block !important;
+ opacity: 1 !important;
+ visibility: visible !important;
+ }
+ `;
+ document.head.appendChild(this.injectedStyles);
+ }
+ }
+ }, 100);
+
try {
+ // Display missing LoRAs that will be downloaded
+ const missingLorasList = document.getElementById('missingLorasList');
+ if (missingLorasList && this.missingLoras.length > 0) {
+ // Calculate total size
+ const totalSize = this.missingLoras.reduce((sum, lora) => {
+ return sum + (lora.size ? parseInt(lora.size) : 0);
+ }, 0);
+
+ // Update total size display
+ const totalSizeDisplay = document.getElementById('totalDownloadSize');
+ if (totalSizeDisplay) {
+ totalSizeDisplay.textContent = this.formatFileSize(totalSize);
+ }
+
+ // Generate missing LoRAs list
+ missingLorasList.innerHTML = this.missingLoras.map(lora => {
+ const sizeDisplay = lora.size ? this.formatFileSize(lora.size) : 'Unknown size';
+
+ return `
+
+
${lora.name}
+
${sizeDisplay}
+
+ `;
+ }).join('');
+ }
+
// Fetch LoRA roots
const rootsResponse = await fetch('/api/lora-roots');
if (!rootsResponse.ok) {
@@ -365,6 +437,18 @@ export class ImportManager {
backToUpload() {
this.showStep('uploadStep');
+
+ // Reset file input to ensure it can trigger change events again
+ const fileInput = document.getElementById('recipeImageUpload');
+ if (fileInput) {
+ fileInput.value = '';
+ }
+
+ // Clear any previous error messages
+ const errorElement = document.getElementById('uploadError');
+ if (errorElement) {
+ errorElement.textContent = '';
+ }
}
backToDetails() {
@@ -397,7 +481,6 @@ export class ImportManager {
const result = await response.json();
if (result.success) {
// Handle successful save
- console.log(`Recipe saved with ID: ${result.recipe_id}`);
// Show success message for recipe save
showToast(`Recipe "${this.recipeName}" saved successfully`, 'success');
@@ -544,7 +627,6 @@ export class ImportManager {
if (loraRoot) loraRoot.addEventListener('change', this.updateTargetPath);
if (newFolder) newFolder.addEventListener('input', this.updateTargetPath);
- console.log('Initializing folder browser...');
// Update initial path
this.updateTargetPath();
}
@@ -588,36 +670,80 @@ export class ImportManager {
}
showStep(stepId) {
- // 隐藏所有步骤
+
+ // First, remove any injected styles to prevent conflicts
+ this.removeInjectedStyles();
+
+ // Hide all steps first
document.querySelectorAll('.import-step').forEach(step => {
step.style.display = 'none';
});
- // 显示目标步骤
+ // Show target step with a monitoring mechanism
const targetStep = document.getElementById(stepId);
if (targetStep) {
- // 强制显示目标步骤 - 使用 !important 覆盖任何其他CSS规则
- targetStep.setAttribute('style', 'display: block !important');
+ // Use direct style setting
+ targetStep.style.display = 'block';
- // 调试信息
- console.log(`Showing step: ${stepId}`);
- const rect = targetStep.getBoundingClientRect();
- console.log('Step dimensions:', {
- width: rect.width,
- height: rect.height,
- top: rect.top,
- left: rect.left,
- visible: rect.width > 0 && rect.height > 0
- });
+ // For the locationStep specifically, we need additional measures
+ if (stepId === 'locationStep') {
+ // Create a more persistent style to override any potential conflicts
+ this.injectedStyles = document.createElement('style');
+ this.injectedStyles.innerHTML = `
+ #locationStep {
+ display: block !important;
+ opacity: 1 !important;
+ visibility: visible !important;
+ }
+ `;
+ document.head.appendChild(this.injectedStyles);
+
+ // Force layout recalculation
+ targetStep.offsetHeight;
+
+ // Set up a monitor to ensure the step remains visible
+ setTimeout(() => {
+ if (targetStep.style.display !== 'block') {
+ targetStep.style.display = 'block';
+ }
+
+ // Check dimensions again after a short delay
+ const newRect = targetStep.getBoundingClientRect();
+ }, 50);
+ }
- // 强制重新计算布局
- targetStep.offsetHeight;
-
- // 滚动模态内容到顶部
+ // Scroll modal content to top
const modalContent = document.querySelector('#importModal .modal-content');
if (modalContent) {
modalContent.scrollTop = 0;
}
}
}
+
+ // Add a helper method to format file sizes
+ formatFileSize(bytes) {
+ if (!bytes || isNaN(bytes)) return '';
+
+ const sizes = ['B', 'KB', 'MB', 'GB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(1024));
+ return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i];
+ }
+
+ // Add this method to ensure the modal is fully visible and initialized
+ ensureModalVisible() {
+ const importModal = document.getElementById('importModal');
+ if (!importModal) {
+ console.error('Import modal element not found');
+ return false;
+ }
+
+ // Check if modal is actually visible
+ const modalDisplay = window.getComputedStyle(importModal).display;
+ if (modalDisplay !== 'block') {
+ console.error('Import modal is not visible, display: ' + modalDisplay);
+ return false;
+ }
+
+ return true;
+ }
}
\ No newline at end of file
diff --git a/templates/components/import_modal.html b/templates/components/import_modal.html
index 1151f7d3..3fb2db06 100644
--- a/templates/components/import_modal.html
+++ b/templates/components/import_modal.html
@@ -68,6 +68,17 @@
+
+
+
Missing LoRAs to Download
+
+ Total download size: Calculating...
+
+
+
+
+
+