Add recipe syntax endpoint and update RecipeCard and RecipeModal for syntax fetching

- Introduced a new API endpoint to retrieve recipe syntax for LoRAs, allowing for better integration with the frontend.
- Updated RecipeCard to fetch recipe syntax from the backend instead of generating it locally.
- Modified RecipeModal to store the recipe ID and fetch syntax when the copy button is clicked, improving user experience.
- Enhanced error handling for fetching recipe syntax to provide clearer feedback to users.

static/js/components/RecipeCard.js

@@ -96,22 +96,24 @@ class RecipeCard {
     
     copyRecipeSyntax() {
         try {
-            // Generate recipe syntax in the format <lora:file_name:strength> separated by spaces
-            const loras = this.recipe.loras || [];
-            if (loras.length === 0) {
-                showToast('No LoRAs in this recipe to copy', 'warning');
+            // Get recipe ID
+            const recipeId = this.recipe.id;
+            if (!recipeId) {
+                showToast('Cannot copy recipe syntax: Missing recipe ID', 'error');
                 return;
             }
+
             
-            const syntax = loras.map(lora => {
-                // Use file_name if available, otherwise use empty placeholder
-                const fileName = lora.file_name || '[missing-lora]';
-                const strength = lora.strength || 1.0;
-                return `<lora:${fileName}:${strength}>`;
-            }).join(' ');
-            
-            // Copy to clipboard
-            navigator.clipboard.writeText(syntax)
+            // Fallback if button not found
+            fetch(`/api/recipe/${recipeId}/syntax`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success && data.syntax) {
+                        return navigator.clipboard.writeText(data.syntax);
+                    } else {
+                        throw new Error(data.error || 'No syntax returned');
+                    }
+                })
                 .then(() => {
                     showToast('Recipe syntax copied to clipboard', 'success');
                 })

static/js/components/RecipeModal.js

@@ -41,6 +41,9 @@ class RecipeModal {
             modalTitle.textContent = recipe.title || 'Recipe Details';
         }
         
+        // Store the recipe ID for copy syntax API call
+        this.recipeId = recipe.id;
+        
         // Set recipe tags if they exist
         const tagsCompactElement = document.getElementById('recipeTagsCompact');
         const tagsTooltipContent = document.getElementById('recipeTagsTooltipContent');
@@ -265,10 +268,8 @@ class RecipeModal {
                 `;
             }).join('');
             
-            // Generate recipe syntax for copy button
-            this.recipeLorasSyntax = recipe.loras.map(lora => 
-                `<lora:${lora.file_name}:${lora.strength || 1.0}>`
-            ).join(' ');
+            // Generate recipe syntax for copy button (this is now a placeholder, actual syntax will be fetched from the API)
+            this.recipeLorasSyntax = '';
             
         } else if (lorasListElement) {
             lorasListElement.innerHTML = '<div class="no-loras">No LoRAs associated with this recipe</div>';
@@ -301,11 +302,42 @@ class RecipeModal {
         
         if (copyRecipeSyntaxBtn) {
             copyRecipeSyntaxBtn.addEventListener('click', () => {
-                this.copyToClipboard(this.recipeLorasSyntax, 'Recipe syntax copied to clipboard');
+                // Use backend API to get recipe syntax
+                this.fetchAndCopyRecipeSyntax();
             });
         }
     }
     
+    // Fetch recipe syntax from backend and copy to clipboard
+    async fetchAndCopyRecipeSyntax() {
+        if (!this.recipeId) {
+            showToast('No recipe ID available', 'error');
+            return;
+        }
+        
+        try {
+            // Fetch recipe syntax from backend
+            const response = await fetch(`/api/recipe/${this.recipeId}/syntax`);
+            
+            if (!response.ok) {
+                throw new Error(`Failed to get recipe syntax: ${response.statusText}`);
+            }
+            
+            const data = await response.json();
+            
+            if (data.success && data.syntax) {
+                // Copy to clipboard
+                await navigator.clipboard.writeText(data.syntax);
+                showToast('Recipe syntax copied to clipboard', 'success');
+            } else {
+                throw new Error(data.error || 'No syntax returned from server');
+            }
+        } catch (error) {
+            console.error('Error fetching recipe syntax:', error);
+            showToast(`Error copying recipe syntax: ${error.message}`, 'error');
+        }
+    }
+    
     // Helper method to copy text to clipboard
     copyToClipboard(text, successMessage) {
         navigator.clipboard.writeText(text).then(() => {

static/js/managers/ImportManager.js

@@ -399,7 +399,7 @@ export class ImportManager {
                 }
             }
         }
-        
+
         // Update LoRA count information
         const totalLoras = this.recipeData.loras.length;
         const existingLoras = this.recipeData.loras.filter(lora => lora.existsLocally).length;
@@ -549,33 +549,24 @@ export class ImportManager {
                 <div class="warning-icon"><i class="fas fa-exclamation-triangle"></i></div>
                 <div class="warning-content">
                     <div class="warning-title">${deletedLoras} LoRA(s) have been deleted from Civitai</div>
-                    <div class="warning-text">These LoRAs cannot be downloaded. If you continue, they will be removed from the recipe.</div>
+                    <div class="warning-text">These LoRAs cannot be downloaded. If you continue, they will remain in the recipe but won't be included when used.</div>
                 </div>
             `;
             
             // Insert before the buttons container
             buttonsContainer.parentNode.insertBefore(warningContainer, buttonsContainer);
+        }
             
-            // Update next button text to be more clear
-            nextButton.textContent = 'Continue Without Deleted LoRAs';
+        // If we have missing LoRAs (not deleted), show "Download Missing LoRAs"
+        // Otherwise show "Save Recipe"
+        const missingNotDeleted = this.recipeData.loras.filter(
+            lora => !lora.existsLocally && !lora.isDeleted
+        ).length;
+        
+        if (missingNotDeleted > 0) {
+            nextButton.textContent = 'Download Missing LoRAs';
         } else {
-            // Remove warning if no deleted LoRAs
-            const warningMsg = document.getElementById('deletedLorasWarning');
-            if (warningMsg) {
-                warningMsg.remove();
-            }
-            
-            // If we have missing LoRAs (not deleted), show "Download Missing LoRAs"
-            // Otherwise show "Save Recipe"
-            const missingNotDeleted = this.recipeData.loras.filter(
-                lora => !lora.existsLocally && !lora.isDeleted
-            ).length;
-            
-            if (missingNotDeleted > 0) {
-                nextButton.textContent = 'Download Missing LoRAs';
-            } else {
-                nextButton.textContent = 'Save Recipe';
-            }
+            nextButton.textContent = 'Save Recipe';
         }
     }