feat: Add support for remote video analysis and preview for recipe imports. see #420

py/routes/handlers/recipe_handlers.py

@@ -437,6 +437,7 @@ class RecipeManagementHandler:
                 name=payload["name"],
                 tags=payload["tags"],
                 metadata=payload["metadata"],
+                extension=payload.get("extension"),
             )
             return web.json_response(result.payload, status=result.status)
         except RecipeValidationError as exc:
@@ -625,6 +626,7 @@ class RecipeManagementHandler:
         name: Optional[str] = None
         tags: list[str] = []
         metadata: Optional[Dict[str, Any]] = None
+        extension: Optional[str] = None
 
         while True:
             field = await reader.next()
@@ -655,6 +657,8 @@ class RecipeManagementHandler:
                     metadata = json.loads(metadata_text)
                 except Exception:
                     metadata = {}
+            elif field.name == "extension":
+                extension = await field.text()
 
         return {
             "image_bytes": image_bytes,
@@ -662,6 +666,7 @@ class RecipeManagementHandler:
             "name": name,
             "tags": tags,
             "metadata": metadata,
+            "extension": extension,
         }
 
     def _parse_tags(self, tag_text: Optional[str]) -> list[str]:

py/services/recipes/analysis_service.py

@@ -13,6 +13,7 @@ import numpy as np
 from PIL import Image
 
 from ...utils.utils import calculate_recipe_fingerprint
+from ...utils.civitai_utils import rewrite_preview_url
 from .errors import (
     RecipeDownloadError,
     RecipeNotFoundError,
@@ -94,18 +95,39 @@ class RecipeAnalysisService:
         if civitai_client is None:
             raise RecipeServiceError("Civitai client unavailable")
 
-        temp_path = self._create_temp_path()
+        temp_path = None
         metadata: Optional[dict[str, Any]] = None
+        is_video = False
+        extension = ".jpg"  # Default
+
         try:
             civitai_match = re.match(r"https://civitai\.com/images/(\d+)", url)
             if civitai_match:
                 image_info = await civitai_client.get_image_info(civitai_match.group(1))
                 if not image_info:
                     raise RecipeDownloadError("Failed to fetch image information from Civitai")
+                
                 image_url = image_info.get("url")
                 if not image_url:
                     raise RecipeDownloadError("No image URL found in Civitai response")
+                
+                is_video = image_info.get("type") == "video"
+                
+                # Use optimized preview URLs if possible
+                rewritten_url, _ = rewrite_preview_url(image_url, media_type=image_info.get("type"))
+                if rewritten_url:
+                    image_url = rewritten_url
+
+                if is_video:
+                    # Extract extension from URL
+                    url_path = image_url.split('?')[0].split('#')[0]
+                    extension = os.path.splitext(url_path)[1].lower() or ".mp4"
+                else:
+                    extension = ".jpg"
+
+                temp_path = self._create_temp_path(suffix=extension)
                 await self._download_image(image_url, temp_path)
+                
                 metadata = image_info.get("meta") if "meta" in image_info else None
                 if (
                     isinstance(metadata, dict)
@@ -114,22 +136,31 @@ class RecipeAnalysisService:
                 ):
                     metadata = metadata["meta"]
             else:
+                # Basic extension detection for non-Civitai URLs
+                url_path = url.split('?')[0].split('#')[0]
+                extension = os.path.splitext(url_path)[1].lower()
+                if extension in [".mp4", ".webm"]:
+                    is_video = True
+                else:
+                    extension = ".jpg"
+                
+                temp_path = self._create_temp_path(suffix=extension)
                 await self._download_image(url, temp_path)
 
-            if metadata is None:
+            if metadata is None and not is_video:
                 metadata = self._exif_utils.extract_image_metadata(temp_path)
 
-            if not metadata:
-                return self._metadata_not_found_response(temp_path)
-
             return await self._parse_metadata(
-                metadata,
+                metadata or {},
                 recipe_scanner=recipe_scanner,
                 image_path=temp_path,
                 include_image_base64=True,
+                is_video=is_video,
+                extension=extension,
             )
         finally:
-            self._safe_cleanup(temp_path)
+            if temp_path:
+                self._safe_cleanup(temp_path)
 
     async def analyze_local_image(
         self,
@@ -198,12 +229,16 @@ class RecipeAnalysisService:
         recipe_scanner,
         image_path: Optional[str],
         include_image_base64: bool,
+        is_video: bool = False,
+        extension: str = ".jpg",
     ) -> AnalysisResult:
         parser = self._recipe_parser_factory.create_parser(metadata)
         if parser is None:
             payload = {"error": "No parser found for this image", "loras": []}
             if include_image_base64 and image_path:
                 payload["image_base64"] = self._encode_file(image_path)
+            payload["is_video"] = is_video
+            payload["extension"] = extension
             return AnalysisResult(payload)
 
         result = await parser.parse_metadata(metadata, recipe_scanner=recipe_scanner)
@@ -211,6 +246,9 @@ class RecipeAnalysisService:
         if include_image_base64 and image_path:
             result["image_base64"] = self._encode_file(image_path)
 
+        result["is_video"] = is_video
+        result["extension"] = extension
+
         if "error" in result and not result.get("loras"):
             return AnalysisResult(result)
 
@@ -241,8 +279,8 @@ class RecipeAnalysisService:
             temp_file.write(data)
             return temp_file.name
 
-    def _create_temp_path(self) -> str:
+    def _create_temp_path(self, suffix: str = ".jpg") -> str:
-        with tempfile.NamedTemporaryFile(delete=False, suffix=".jpg") as temp_file:
+        with tempfile.NamedTemporaryFile(delete=False, suffix=suffix) as temp_file:
             return temp_file.name
 
     def _safe_cleanup(self, path: Optional[str]) -> None:

static/css/components/import-modal.css

@@ -1,7 +1,8 @@
 /* Import Modal Styles */
 .import-step {
     margin: var(--space-2) 0;
-    transition: none !important; /* Disable any transitions that might affect display */
+    transition: none !important;
+    /* Disable any transitions that might affect display */
 }
 
 /* Import Mode Toggle */
@@ -107,7 +108,8 @@
     justify-content: center;
 }
 
-.recipe-image img {
+.recipe-image img,
+.recipe-preview-video {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
@@ -512,14 +514,17 @@
 
 /* Prevent layout shift with scrollbar */
 .modal-content {
-    overflow-y: scroll; /* Always show scrollbar */
+    overflow-y: scroll;
-    scrollbar-gutter: stable; /* Reserve space for scrollbar */
+    /* Always show scrollbar */
+    scrollbar-gutter: stable;
+    /* Reserve space for scrollbar */
 }
 
 /* For browsers that don't support scrollbar-gutter */
 @supports not (scrollbar-gutter: stable) {
     .modal-content {
-        padding-right: calc(var(--space-2) + var(--scrollbar-width)); /* Add extra padding for scrollbar */
+        padding-right: calc(var(--space-2) + var(--scrollbar-width));
+        /* Add extra padding for scrollbar */
     }
 }
 
@@ -586,7 +591,8 @@
 
 /* Remove the old warning-message styles that were causing layout issues */
 .warning-message {
-    display: none; /* Hide the old style */
+    display: none;
+    /* Hide the old style */
 }
 
 /* Update deleted badge to be more prominent */
@@ -613,7 +619,8 @@
     color: var(--lora-error);
     font-size: 0.9em;
     margin-top: 8px;
-    min-height: 20px; /* Ensure there's always space for the error message */
+    min-height: 20px;
+    /* Ensure there's always space for the error message */
     font-weight: 500;
 }
 
@@ -662,8 +669,15 @@
 }
 
 @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(-10px); }
+    from {
-    to { opacity: 1; transform: translateY(0); }
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .duplicate-warning {
@@ -779,6 +793,7 @@
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
     -webkit-box-orient: vertical;
 }
 

static/js/managers/import/DownloadManager.js

@@ -66,6 +66,10 @@ export class DownloadManager {
                     completeMetadata.checkpoint = checkpointMetadata;
                 }
 
+                if (this.importManager.recipeData && this.importManager.recipeData.extension) {
+                    formData.append('extension', this.importManager.recipeData.extension);
+                }
+
                 // Add source_path to metadata to track where the recipe was imported from
                 if (this.importManager.importMode === 'url') {
                     const urlInput = document.getElementById('imageUrlInput');
@@ -211,7 +215,7 @@ export class DownloadManager {
             currentLoraProgress = 0;
 
             // Initial status update for new LoRA
-            this.importManager.loadingManager.setStatus(translate('recipes.controls.import.startingDownload', { current: i+1, total: this.importManager.downloadableLoRAs.length }, `Starting download for LoRA ${i+1}/${this.importManager.downloadableLoRAs.length}`));
+            this.importManager.loadingManager.setStatus(translate('recipes.controls.import.startingDownload', { current: i + 1, total: this.importManager.downloadableLoRAs.length }, `Starting download for LoRA ${i + 1}/${this.importManager.downloadableLoRAs.length}`));
             updateProgress(0, completedDownloads, lora.name);
 
             try {

static/js/managers/import/RecipeDataManager.js

@@ -26,8 +26,8 @@ export class RecipeDataManager {
                 this.updateTagsDisplay();
             }
         } else if (this.importManager.recipeData &&
-                  this.importManager.recipeData.gen_params && 
+            this.importManager.recipeData.gen_params &&
-                  this.importManager.recipeData.gen_params.prompt) {
+            this.importManager.recipeData.gen_params.prompt) {
             // Use the first 10 words from the prompt as the default recipe name
             const promptWords = this.importManager.recipeData.gen_params.prompt.split(' ');
             const truncatedPrompt = promptWords.slice(0, 10).join(' ');
@@ -36,7 +36,7 @@ export class RecipeDataManager {
 
             // Set up click handler to select all text for easy editing
             if (!recipeName.hasSelectAllHandler) {
-                recipeName.addEventListener('click', function() {
+                recipeName.addEventListener('click', function () {
                     this.select();
                 });
                 recipeName.hasSelectAllHandler = true;
@@ -50,7 +50,7 @@ export class RecipeDataManager {
 
         // Always set up click handler for easy editing if not already set
         if (!recipeName.hasSelectAllHandler) {
-            recipeName.addEventListener('click', function() {
+            recipeName.addEventListener('click', function () {
                 this.select();
             });
             recipeName.hasSelectAllHandler = true;
@@ -67,13 +67,24 @@ export class RecipeDataManager {
                 };
                 reader.readAsDataURL(this.importManager.recipeImage);
             } else if (this.importManager.recipeData && this.importManager.recipeData.image_base64) {
-                // For URL mode - use the base64 image data returned from the backend
+                // For URL mode - use the base64 data returned from the backend
-                imagePreview.innerHTML = `<img src="data:image/jpeg;base64,${this.importManager.recipeData.image_base64}" alt="${translate('recipes.controls.import.recipePreviewAlt', {}, 'Recipe preview')}">`;
+                if (this.importManager.recipeData.is_video) {
+                    const mimeType = this.importManager.recipeData.extension === '.webm' ? 'video/webm' : 'video/mp4';
+                    imagePreview.innerHTML = `<video src="data:${mimeType};base64,${this.importManager.recipeData.image_base64}" controls autoplay loop muted class="recipe-preview-video"></video>`;
+                } else {
+                    imagePreview.innerHTML = `<img src="data:image/jpeg;base64,${this.importManager.recipeData.image_base64}" alt="${translate('recipes.controls.import.recipePreviewAlt', {}, 'Recipe preview')}">`;
+                }
             } else if (this.importManager.importMode === 'url') {
                 // Fallback for URL mode if no base64 data
                 const urlInput = document.getElementById('imageUrlInput');
                 if (urlInput && urlInput.value) {
-                    imagePreview.innerHTML = `<img src="${urlInput.value}" alt="${translate('recipes.controls.import.recipePreviewAlt', {}, 'Recipe preview')}" crossorigin="anonymous">`;
+                    const url = urlInput.value.toLowerCase();
+                    if (url.endsWith('.mp4') || url.endsWith('.webm')) {
+                        const mimeType = url.endsWith('.webm') ? 'video/webm' : 'video/mp4';
+                        imagePreview.innerHTML = `<video src="${urlInput.value}" controls autoplay loop muted class="recipe-preview-video"></video>`;
+                    } else {
+                        imagePreview.innerHTML = `<img src="${urlInput.value}" alt="${translate('recipes.controls.import.recipePreviewAlt', {}, 'Recipe preview')}" crossorigin="anonymous">`;
+                    }
                 }
             }
         }

tests/services/test_recipe_services.py

@@ -95,7 +95,7 @@ async def test_analyze_remote_image_download_failure_cleans_temp(tmp_path, monke
 
     temp_path = tmp_path / "temp.jpg"
 
-    def create_temp_path():
+    def create_temp_path(suffix=".jpg"):
         temp_path.write_bytes(b"")
         return str(temp_path)
 
@@ -401,3 +401,55 @@ async def test_save_recipe_from_widget_allows_empty_lora(tmp_path):
     assert stored["loras"] == []
     assert stored["title"] == "recipe"
     assert scanner.added and scanner.added[0]["loras"] == []
+
+
+@pytest.mark.asyncio
+async def test_analyze_remote_video(tmp_path):
+    exif_utils = DummyExifUtils()
+
+    class DummyFactory:
+        def create_parser(self, metadata):
+            async def parse_metadata(m, recipe_scanner):
+                return {"loras": []}
+            return SimpleNamespace(parse_metadata=parse_metadata)
+
+    async def downloader_factory():
+        class Downloader:
+            async def download_file(self, url, path, use_auth=False):
+                Path(path).write_bytes(b"video-content")
+                return True, "success"
+
+        return Downloader()
+
+    service = RecipeAnalysisService(
+        exif_utils=exif_utils,
+        recipe_parser_factory=DummyFactory(),
+        downloader_factory=downloader_factory,
+        metadata_collector=None,
+        metadata_processor_cls=None,
+        metadata_registry_cls=None,
+        standalone_mode=False,
+        logger=logging.getLogger("test"),
+    )
+
+    class DummyClient:
+        async def get_image_info(self, image_id):
+            return {
+                "url": "https://civitai.com/video.mp4",
+                "type": "video",
+                "meta": {"prompt": "video prompt"},
+            }
+
+    class DummyScanner:
+        async def find_recipes_by_fingerprint(self, fingerprint):
+            return []
+
+    result = await service.analyze_remote_image(
+        url="https://civitai.com/images/123",
+        recipe_scanner=DummyScanner(),
+        civitai_client=DummyClient(),
+    )
+
+    assert result.payload["is_video"] is True
+    assert result.payload["extension"] == ".mp4"
+    assert result.payload["image_base64"] is not None