refactor(import): Implement DownloadManager, FolderBrowser, ImageProcessor, and RecipeDataManager for enhanced recipe import functionality

- Added DownloadManager to handle saving recipes and downloading missing LoRAs.
- Introduced FolderBrowser for selecting LoRA root directories and managing folder navigation.
- Created ImageProcessor for handling image uploads and URL inputs for recipe analysis.
- Developed RecipeDataManager to manage recipe details, including metadata and LoRA information.
- Implemented ImportStepManager to control the flow of the import process and manage UI steps.
- Added utility function for formatting file sizes for better user experience.

static/js/managers/import/ImageProcessor.js

@@ -0,0 +1,206 @@
+import { showToast } from '../../utils/uiHelpers.js';
+
+export class ImageProcessor {
+    constructor(importManager) {
+        this.importManager = importManager;
+    }
+
+    handleFileUpload(event) {
+        const file = event.target.files[0];
+        const errorElement = document.getElementById('uploadError');
+        
+        if (!file) return;
+        
+        // Validate file type
+        if (!file.type.match('image.*')) {
+            errorElement.textContent = 'Please select an image file';
+            return;
+        }
+        
+        // Reset error
+        errorElement.textContent = '';
+        this.importManager.recipeImage = file;
+        
+        // Auto-proceed to next step if file is selected
+        this.importManager.uploadAndAnalyzeImage();
+    }
+
+    async handleUrlInput() {
+        const urlInput = document.getElementById('imageUrlInput');
+        const errorElement = document.getElementById('urlError');
+        const input = urlInput.value.trim();
+        
+        // Validate input
+        if (!input) {
+            errorElement.textContent = 'Please enter a URL or file path';
+            return;
+        }
+        
+        // Reset error
+        errorElement.textContent = '';
+        
+        // Show loading indicator
+        this.importManager.loadingManager.showSimpleLoading('Processing input...');
+        
+        try {
+            // Check if it's a URL or a local file path
+            if (input.startsWith('http://') || input.startsWith('https://')) {
+                // Handle as URL
+                await this.analyzeImageFromUrl(input);
+            } else {
+                // Handle as local file path
+                await this.analyzeImageFromLocalPath(input);
+            }
+        } catch (error) {
+            errorElement.textContent = error.message || 'Failed to process input';
+        } finally {
+            this.importManager.loadingManager.hide();
+        }
+    }
+
+    async analyzeImageFromUrl(url) {
+        try {
+            // Call the API with URL data
+            const response = await fetch('/api/recipes/analyze-image', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ url: url })
+            });
+            
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || 'Failed to analyze image from URL');
+            }
+            
+            // Get recipe data from response
+            this.importManager.recipeData = await response.json();
+            
+            // Check if we have an error message
+            if (this.importManager.recipeData.error) {
+                throw new Error(this.importManager.recipeData.error);
+            }
+            
+            // Check if we have valid recipe data
+            if (!this.importManager.recipeData || 
+                !this.importManager.recipeData.loras || 
+                this.importManager.recipeData.loras.length === 0) {
+                throw new Error('No LoRA information found in this image');
+            }
+            
+            // Find missing LoRAs
+            this.importManager.missingLoras = this.importManager.recipeData.loras.filter(
+                lora => !lora.existsLocally
+            );
+            
+            // Proceed to recipe details step
+            this.importManager.showRecipeDetailsStep();
+            
+        } catch (error) {
+            console.error('Error analyzing URL:', error);
+            throw error;
+        }
+    }
+
+    async analyzeImageFromLocalPath(path) {
+        try {
+            // Call the API with local path data
+            const response = await fetch('/api/recipes/analyze-local-image', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ path: path })
+            });
+            
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || 'Failed to load image from local path');
+            }
+            
+            // Get recipe data from response
+            this.importManager.recipeData = await response.json();
+            
+            // Check if we have an error message
+            if (this.importManager.recipeData.error) {
+                throw new Error(this.importManager.recipeData.error);
+            }
+            
+            // Check if we have valid recipe data
+            if (!this.importManager.recipeData || 
+                !this.importManager.recipeData.loras || 
+                this.importManager.recipeData.loras.length === 0) {
+                throw new Error('No LoRA information found in this image');
+            }
+            
+            // Find missing LoRAs
+            this.importManager.missingLoras = this.importManager.recipeData.loras.filter(
+                lora => !lora.existsLocally
+            );
+            
+            // Proceed to recipe details step
+            this.importManager.showRecipeDetailsStep();
+            
+        } catch (error) {
+            console.error('Error analyzing local path:', error);
+            throw error;
+        }
+    }
+
+    async uploadAndAnalyzeImage() {
+        if (!this.importManager.recipeImage) {
+            showToast('Please select an image first', 'error');
+            return;
+        }
+        
+        try {
+            this.importManager.loadingManager.showSimpleLoading('Analyzing image metadata...');
+            
+            // Create form data for upload
+            const formData = new FormData();
+            formData.append('image', this.importManager.recipeImage);
+            
+            // Upload image for analysis
+            const response = await fetch('/api/recipes/analyze-image', {
+                method: 'POST',
+                body: formData
+            });
+             
+            // Get recipe data from response
+            this.importManager.recipeData = await response.json();
+
+            console.log('Recipe data:', this.importManager.recipeData);
+            
+            // Check if we have an error message
+            if (this.importManager.recipeData.error) {
+                throw new Error(this.importManager.recipeData.error);
+            }
+            
+            // Check if we have valid recipe data
+            if (!this.importManager.recipeData || 
+                !this.importManager.recipeData.loras || 
+                this.importManager.recipeData.loras.length === 0) {
+                throw new Error('No LoRA information found in this image');
+            }
+            
+            // Store generation parameters if available
+            if (this.importManager.recipeData.gen_params) {
+                console.log('Generation parameters found:', this.importManager.recipeData.gen_params);
+            }
+            
+            // Find missing LoRAs
+            this.importManager.missingLoras = this.importManager.recipeData.loras.filter(
+                lora => !lora.existsLocally
+            );
+            
+            // Proceed to recipe details step
+            this.importManager.showRecipeDetailsStep();
+            
+        } catch (error) {
+            document.getElementById('uploadError').textContent = error.message;
+        } finally {
+            this.importManager.loadingManager.hide();
+        }
+    }
+}