feat(recipe): add Create As Recipe from example images with import dedup check (#945)

static/js/components/shared/showcase/MediaUtils.js

@@ -135,6 +135,39 @@ export function initLazyLoading(container) {
     lazyElements.forEach(element => observer.observe(element));
 }
 
+/**
+ * Check which Create As Recipe buttons correspond to already-imported
+ * images and disable them.
+ */
+async function checkImportedRecipes(container) {
+    const recipeButtons = container.querySelectorAll('.create-recipe-btn');
+    if (!recipeButtons.length) return;
+
+    const imageIds = [];
+    recipeButtons.forEach(btn => {
+        const id = btn.dataset.imageId;
+        if (id) imageIds.push(id);
+    });
+    if (!imageIds.length) return;
+
+    try {
+        const response = await fetch(`/api/lm/recipes/check-image-exists?image_ids=${imageIds.join(',')}`);
+        const data = await response.json();
+        if (!data.success || !data.results) return;
+        recipeButtons.forEach(btn => {
+            const id = btn.dataset.imageId;
+            if (id && data.results[id]?.in_library) {
+                btn.disabled = true;
+                btn.title = 'Already imported as recipe';
+                btn.classList.add('disabled');
+            }
+        });
+    } catch (err) {
+        console.error('Failed to check imported recipes:', err);
+    }
+}
+
+
 /**
  * Get the actual rendered rectangle of a media element with object-fit: contain
  * @param {HTMLElement} mediaElement - The img or video element
@@ -471,6 +504,70 @@ export function initMediaControlHandlers(container) {
         });
     });
     
+    // Create As Recipe buttons
+    const recipeButtons = container.querySelectorAll('.create-recipe-btn');
+    recipeButtons.forEach(btn => {
+        btn.addEventListener('click', async function(e) {
+            e.stopPropagation();
+            
+            const imageMetaRaw = this.dataset.imageMeta;
+            const imageUrl = this.dataset.imageUrl;
+            const imageNsfw = this.dataset.imageNsfw;
+            const localPath = this.dataset.localPath || '';
+            const showcaseSection = this.closest('.showcase-section');
+            const modelHash = showcaseSection ? showcaseSection.dataset.modelHash : '';
+            const modelName = showcaseSection ? showcaseSection.dataset.modelName : '';
+            const modelType = showcaseSection ? showcaseSection.dataset.modelType : '';
+            
+            if (!imageMetaRaw || !modelHash) {
+                showToast('toast.recipes.createMissingData', {}, 'error');
+                return;
+            }
+            
+            // Show loading state
+            const originalHtml = this.innerHTML;
+            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+            this.disabled = true;
+            
+            try {
+                const imageMeta = JSON.parse(decodeURIComponent(imageMetaRaw));
+                
+                const response = await fetch('/api/lm/recipes/create-from-example', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        image_data: {
+                            meta: imageMeta,
+                            url: imageUrl,
+                            nsfwLevel: imageNsfw ? parseInt(imageNsfw, 10) : undefined,
+                        },
+                        model_hash: modelHash,
+                        model_name: modelName || modelHash,
+                        model_type: modelType,
+                        local_image_path: localPath,
+                    }),
+                });
+                
+                const result = await response.json();
+                
+                if (result.success && result.recipe_id) {
+                    showToast('toast.recipes.created', { recipeId: result.recipe_id }, 'success');
+                } else {
+                    showToast('toast.recipes.createFailed', { error: result.error || 'Unknown error' }, 'error');
+                }
+            } catch (error) {
+                console.error('Failed to create recipe:', error);
+                showToast('toast.recipes.createError', { message: error.message }, 'error');
+            } finally {
+                this.innerHTML = originalHtml;
+                this.disabled = false;
+            }
+        });
+    });
+    
+    // Check which images are already imported as recipes → disable button
+    checkImportedRecipes(container);
+    
     // Initialize set preview buttons
     initSetPreviewHandlers(container);
 

static/js/components/shared/showcase/ShowcaseView.js

@@ -183,6 +183,9 @@ function renderMediaItem(img, index, exampleFiles) {
         Math.min(maxHeightPercent, aspectRatio)
     );
     
+    // Extract CivitAI image ID from CDN URL for import status check
+    const cdnImageId = (img.url || '').match(/\/(\d+)\.(?:jpeg|jpg|png|webp|gif)(?:\?|#|$)/)?.[1] || '';
+
     // Check if media should be blurred
     const nsfwLevel = img.nsfwLevel !== undefined ? img.nsfwLevel : 0;
     const matureBlurThreshold = getMatureBlurThreshold(state.settings);
@@ -224,12 +227,25 @@ function renderMediaItem(img, index, exampleFiles) {
     // Determine if this is a custom image (has id property)
     const isCustomImage = Boolean(typeof img.id === 'string' && img.id);
     
+    const hasGenMeta = img.hasMeta || (img.meta && (img.meta.prompt || img.meta.seed || img.meta.resources));
+
     // Create the media control buttons HTML
     const mediaControlsHtml = `
         <div class="media-controls">
             <button class="media-control-btn set-preview-btn" title="Set as preview">
                 <i class="fas fa-image"></i>
             </button>
+            ${hasGenMeta ? `
+            <button class="media-control-btn create-recipe-btn"
+                    title="Create As Recipe"
+                    data-image-meta="${encodeURIComponent(JSON.stringify(img.meta || {}))}"
+                    data-image-url="${img.url || ''}"
+                    data-image-nsfw="${img.nsfwLevel ?? ''}"
+                    data-image-id="${cdnImageId}"
+                    data-local-path="${localFile ? localFile.path : ''}">
+                <i class="fas fa-book-open"></i>
+            </button>
+            ` : ''}
             <button class="media-control-btn set-nsfw-btn" 
                     title="Set content rating"
                     data-media-index="${index}"