add support for video previews (#197)

* add support for video previews

* fix two cases where video previews did not show

py/download.py

@@ -326,7 +326,7 @@ class ModelDownload:
 
         try:
             preview_file = task_data.pop("previewFile", None)
-            utils.save_model_preview_image(task_path, preview_file, download_platform)
+            utils.save_model_preview(task_path, preview_file, download_platform)
             self.set_task_content(task_id, task_data)
             task_status = TaskStatus(
                 taskId=task_id,

py/information.py

@@ -355,23 +355,17 @@ class Information:
         @routes.get("/model-manager/preview/{type}/{index}/{filename:.*}")
         async def read_model_preview(request):
             """
-            Get the file stream of the specified image.
+            Get the file stream of the specified preview
             If the file does not exist, no-preview.png is returned.
 
             :param type: The type of the model. eg.checkpoints, loras, vae, etc.
             :param index: The index of the model folders.
-            :param filename: The filename of the image.
+            :param filename: The filename of the preview.
             """
             model_type = request.match_info.get("type", None)
             index = int(request.match_info.get("index", None))
             filename = request.match_info.get("filename", None)
 
-            content_type = utils.resolve_file_content_type(filename)
-
-            if content_type == "video":
-                abs_path = utils.get_full_path(model_type, index, filename)
-                return web.FileResponse(abs_path)
-
             extension_uri = config.extension_uri
 
             try:
@@ -388,8 +382,16 @@ class Information:
             if not os.path.isfile(abs_path):
                 abs_path = utils.join_path(extension_uri, "assets", "no-preview.png")
 
-            image_data = self.get_image_preview_data(abs_path)
+            # Determine content type from the actual file
-            return web.Response(body=image_data.getvalue(), content_type="image/webp")
+            content_type = utils.resolve_file_content_type(abs_path)
+
+            if content_type == "video":
+                # Serve video files directly
+                return web.FileResponse(abs_path)
+            else:
+                # Serve image files (WebP or fallback images)
+                image_data = self.get_image_preview_data(abs_path)
+                return web.Response(body=image_data.getvalue(), content_type="image/webp")
 
         @routes.get("/model-manager/preview/download/{filename}")
         async def read_download_preview(request):
@@ -546,10 +548,10 @@ class Information:
                         model_info = CivitaiModelSearcher().search_by_hash(hash_value)
 
                         preview_url_list = model_info.get("preview", [])
-                        preview_image_url = preview_url_list[0] if preview_url_list else None
+                        preview_url = preview_url_list[0] if preview_url_list else None
-                        if preview_image_url:
+                        if preview_url:
-                            utils.print_debug(f"Save preview image to {abs_image_path}")
+                            utils.print_debug(f"Save preview to {abs_model_path}")
-                            utils.save_model_preview_image(abs_model_path, preview_image_url)
+                            utils.save_model_preview(abs_model_path, preview_url)
 
                         description = model_info.get("description", None)
                         if description:

py/manager.py

@@ -134,18 +134,8 @@ class ModelManager:
             if is_file and extension not in folder_paths.supported_pt_extensions:
                 return None
 
-            preview_type = "image"
+            preview_name = utils.get_model_preview_name(entry.path)
-            preview_ext = ".webp"
+            preview_ext = f".{preview_name.split('.')[-1]}"
-            preview_images = utils.get_model_all_images(entry.path)
-            if len(preview_images) > 0:
-                preview_type = "image"
-                preview_ext = ".webp"
-            else:
-                preview_videos = utils.get_model_all_videos(entry.path)
-                if len(preview_videos) > 0:
-                    preview_type = "video"
-                    preview_ext = f".{preview_videos[0].split('.')[-1]}"
-
             model_preview = f"/model-manager/preview/{folder}/{path_index}/{relative_path.replace(extension, preview_ext)}"
 
             stat = entry.stat()
@@ -158,7 +148,6 @@ class ModelManager:
                 "pathIndex": path_index,
                 "sizeBytes": stat.st_size if is_file else 0,
                 "preview": model_preview if is_file else None,
-                "previewType": preview_type,
                 "createdAt": round(stat.st_ctime_ns / 1000000),
                 "updatedAt": round(stat.st_mtime_ns / 1000000),
             }
@@ -211,10 +200,11 @@ class ModelManager:
 
         if "previewFile" in model_data:
             previewFile = model_data["previewFile"]
-            if type(previewFile) is str and previewFile == "undefined":
+            # Always remove existing preview files first in case the file extension has changed
-                utils.remove_model_preview_image(model_path)
+            utils.remove_model_preview(model_path)
-            else:
+            # Nothing else to do if the preview file was being removed
-                utils.save_model_preview_image(model_path, previewFile)
+            if not (type(previewFile) is str and previewFile == "undefined"):
+                utils.save_model_preview(model_path, previewFile)
 
         if "description" in model_data:
             description = model_data["description"]
@@ -236,7 +226,7 @@ class ModelManager:
         model_dirname = os.path.dirname(model_path)
         os.remove(model_path)
 
-        model_previews = utils.get_model_all_images(model_path)
+        model_previews = utils.get_model_all_previews(model_path)
         for preview in model_previews:
             os.remove(utils.join_path(model_dirname, preview))
 

py/utils.py

@@ -17,6 +17,22 @@ from aiohttp import web
 from typing import Any, Optional
 from . import config
 
+# Media file extensions
+VIDEO_EXTENSIONS = ['.mp4', '.webm', '.mov', '.avi', '.mkv', '.flv', '.wmv', '.m4v', '.ogv']
+IMAGE_EXTENSIONS = ['.webp', '.png', '.jpg', '.jpeg', '.gif', '.bmp']
+
+# Content type mappings
+VIDEO_CONTENT_TYPE_MAP = {
+    'video/mp4': '.mp4',
+    'video/webm': '.webm',
+    'video/quicktime': '.mov',
+    'video/x-msvideo': '.avi',
+    'video/x-matroska': '.mkv',
+    'video/x-flv': '.flv',
+    'video/x-ms-wmv': '.wmv',
+    'video/ogg': '.ogv',
+}
+
 
 def print_info(msg, *args, **kwargs):
     logging.info(f"[{config.extension_tag}] {msg}", *args, **kwargs)
@@ -252,10 +268,10 @@ def get_model_metadata(filename: str):
         return {}
 
 
-def get_model_all_images(model_path: str):
+def get_model_all_previews(model_path: str):
     base_dirname = os.path.dirname(model_path)
     files = search_files(base_dirname)
-    files = folder_paths.filter_files_content_types(files, ["image"])
+    files = folder_paths.filter_files_content_types(files, ["video", "image"])
 
     basename = os.path.splitext(os.path.basename(model_path))[0]
     output: list[str] = []
@@ -269,78 +285,135 @@ def get_model_all_images(model_path: str):
 
 
 def get_model_preview_name(model_path: str):
-    images = get_model_all_images(model_path)
+    """
-    basename = os.path.splitext(os.path.basename(model_path))[0]
+    Get the preview file name for a model. Checks for images and videos in all supported formats.
-
+    Returns the first available preview file or 'no-preview.png' if none found.
-    for image in images:
+    """
-        image_name = os.path.splitext(image)[0]
-        image_ext = os.path.splitext(image)[1]
-        if image_name == basename and image_ext.lower() == ".webp":
-            return image
-
-    return images[0] if len(images) > 0 else "no-preview.png"
-
-
-def get_model_all_videos(model_path: str):
     base_dirname = os.path.dirname(model_path)
-    files = search_files(base_dirname)
-    files = folder_paths.filter_files_content_types(files, ["video"])
-
     basename = os.path.splitext(os.path.basename(model_path))[0]
-    output: list[str] = []
+    
-    for file in files:
+    # Prefer previews with these extensions in this order
-        file_basename = os.path.splitext(file)[0]
+    preview_extensions = ['.webm', '.mp4', '.webp']
-        if file_basename == basename:
+    for ext in preview_extensions:
-            output.append(file)
+        preview_name = f"{basename}{ext}"
-        if file_basename == f"{basename}.preview":
+        if os.path.exists(join_path(base_dirname, preview_name)):
-            output.append(file)
+            return preview_name
-    return output
+    
+    # Fallback to any available preview files
+    all_previews = get_model_all_previews(model_path)
+    return all_previews[0] if len(all_previews) > 0 else "no-preview.png"
 
 
 from PIL import Image
 from io import BytesIO
 
 
-def remove_model_preview_image(model_path: str):
+def remove_model_preview(model_path: str):
+    """
+    Remove preview files for a model.
+    """
     basename = os.path.splitext(model_path)[0]
-    preview_path = f"{basename}.webp"
+    base_dirname = os.path.dirname(model_path)
-    if os.path.exists(preview_path):
+    
-        os.remove(preview_path)
+    # Remove all preview files
+    for ext in VIDEO_EXTENSIONS + IMAGE_EXTENSIONS:
+        preview_path = f"{basename}{ext}"
+        if os.path.exists(preview_path):
+            os.remove(preview_path)
+    
+    # Also check for .preview variants
+    files = search_files(base_dirname)
+    model_name = os.path.splitext(os.path.basename(model_path))[0]
+    for file in files:
+        if file.startswith(f"{model_name}.preview"):
+            file_path = join_path(base_dirname, file)
+            if os.path.exists(file_path):
+                os.remove(file_path)
 
 
-def save_model_preview_image(model_path: str, image_file_or_url: Any, platform: Optional[str] = None):
+def save_model_preview(model_path: str, file_or_url: Any, platform: Optional[str] = None):
+    """
+    Save a preview file for a model.
+    Images are converted to WebP, videos are saved in their original format.
+    """
     basename = os.path.splitext(model_path)[0]
-    preview_path = f"{basename}.webp"
+    
-    # Download image file if it is url
+    # Download file if it is a URL
-    if type(image_file_or_url) is str:
+    if type(file_or_url) is str:
-        image_url = image_file_or_url
+        url = file_or_url
 
         try:
-            image_response = requests.get(image_url)
+            response = requests.get(url)
-            image_response.raise_for_status()
+            response.raise_for_status()
-
+            
-            image = Image.open(BytesIO(image_response.content))
+            # Determine content type from response headers or URL extension
-            image.save(preview_path, "WEBP")
+            content_type = response.headers.get('content-type', '')
+            if not content_type:
+                # Fallback to URL extension detection
+                content_type = resolve_file_content_type(url) or ''
+            
+            content = response.content
+            
+            if content_type.startswith("video/"):
+                # Save video in original format
+                # Try to get extension from URL or content-type
+                ext = _get_video_extension_from_url(url) or _get_extension_from_content_type(content_type)
+                if not ext:
+                    ext = '.mp4'  # Default fallback
+                preview_path = f"{basename}{ext}"
+                with open(preview_path, 'wb') as f:
+                    f.write(content)
+            else:
+                # Default to image processing for unknown or image types
+                preview_path = f"{basename}.webp"
+                image = Image.open(BytesIO(content))
+                image.save(preview_path, "WEBP")
 
         except Exception as e:
-            print_error(f"Failed to download image: {e}")
+            print_error(f"Failed to download preview: {e}")
 
+    # Handle uploaded file
     else:
-        # Assert image as file
+        file_obj = file_or_url
-        image_file = image_file_or_url
 
-        if not isinstance(image_file, web.FileField):
+        if not isinstance(file_obj, web.FileField):
-            raise RuntimeError("Invalid image file")
+            raise RuntimeError("Invalid file")
 
-        content_type: str = image_file.content_type
+        content_type: str = file_obj.content_type
-        if not content_type.startswith("image/"):
+        filename: str = getattr(file_obj, 'filename', '')
-            if platform == "huggingface":
+        
-                # huggingface previewFile content_type='text/plain',  not startswith("image/")
+        if content_type.startswith("video/"):
-                return
+            # Save video in original format for now, consider transcoding to webm to follow the pattern for images converting to webp
-            else:
+            ext = os.path.splitext(filename.lower())[1]
-                raise RuntimeError(f"FileTypeError: expected image, got {content_type}")
+            if not ext:
-        image = Image.open(image_file.file)
+                ext = '.mp4'  # Default fallback
-        image.save(preview_path, "WEBP")
+            preview_path = f"{basename}{ext}"
+            file_obj.file.seek(0)
+            content = file_obj.file.read()
+            with open(preview_path, 'wb') as f:
+                f.write(content)
+        elif content_type.startswith("image/"):
+            # Convert image to webp
+            preview_path = f"{basename}.webp"
+            image = Image.open(file_obj.file)
+            image.save(preview_path, "WEBP")
+        else:
+            raise RuntimeError(f"FileTypeError: expected image or video, got {content_type}")
+
+
+def _get_video_extension_from_url(url: str) -> Optional[str]:
+    """Extract video extension from URL."""
+    from urllib.parse import urlparse
+    path = urlparse(url).path.lower()
+    for ext in VIDEO_EXTENSIONS:
+        if path.endswith(ext):
+            return ext
+    return None
+
+
+def _get_extension_from_content_type(content_type: str) -> Optional[str]:
+    """Map content-type to file extension."""
+    return VIDEO_CONTENT_TYPE_MAP.get(content_type.lower())
 
 
 def get_model_all_descriptions(model_path: str):
@@ -398,7 +471,7 @@ def rename_model(model_path: str, new_model_path: str):
     shutil.move(model_path, new_model_path)
 
     # move preview
-    previews = get_model_all_images(model_path)
+    previews = get_model_all_previews(model_path)
     for preview in previews:
         preview_path = join_path(model_dirname, preview)
         preview_name = os.path.splitext(preview)[0]

src/components/DialogDownload.vue

@@ -20,7 +20,10 @@
           >
             <div class="flex gap-4 overflow-hidden whitespace-nowrap">
               <div class="h-18 preview-aspect">
-                <img :src="item.preview" />
+                <div v-if="isVideoUrl(item.preview)" class="h-full w-full">
+                  <PreviewVideo :src="item.preview" />
+                </div>
+                <img v-else :src="item.preview" />
               </div>
 
               <div class="flex flex-1 flex-col gap-3 overflow-hidden">
@@ -72,11 +75,13 @@
 
 <script setup lang="ts">
 import DialogCreateTask from 'components/DialogCreateTask.vue'
+import PreviewVideo from 'components/PreviewVideo.vue'
 import ResponseScroll from 'components/ResponseScroll.vue'
 import { useContainerQueries } from 'hooks/container'
 import { useDialog } from 'hooks/dialog'
 import { useDownload } from 'hooks/download'
 import Button from 'primevue/button'
+import { isVideoUrl } from 'utils/media'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 

src/components/ModelCard.vue

@@ -25,19 +25,10 @@
           </svg>
         </div>
         <div
-          v-else-if="model.previewType === 'video'"
+          v-else-if="isVideoUrl(preview)"
           class="h-full w-full p-1 hover:p-0"
         >
-          <video
+          <PreviewVideo :src="preview" />
-            class="h-full w-full object-cover"
-            playsinline
-            autoplay
-            loop
-            disablepictureinpicture
-            preload="none"
-          >
-            <source :src="preview" />
-          </video>
         </div>
         <div v-else class="h-full w-full p-1 hover:p-0">
           <img class="h-full w-full rounded-lg object-cover" :src="preview" />
@@ -81,8 +72,10 @@
 
 <script setup lang="ts">
 import { useElementSize } from '@vueuse/core'
+import PreviewVideo from 'components/PreviewVideo.vue'
 import { useModelNodeAction } from 'hooks/model'
 import { BaseModel } from 'types/typings'
+import { isVideoUrl } from 'utils/media'
 import { computed, ref } from 'vue'
 
 interface Props {

src/components/ModelPreview.vue

@@ -5,17 +5,17 @@
         class="relative mx-auto w-full overflow-hidden rounded-lg preview-aspect"
         :style="$sm({ width: `${cardWidth}px` })"
       >
-        <div v-if="previewType === 'video'" class="h-full w-full p-1 hover:p-0">
+        <div
-          <video
+          v-if="
-            class="h-full w-full object-cover"
+            preview &&
-            playsinline
+            isVideoUrl(
-            autoplay
+              preview,
-            loop
+              currentType === 'local' ? localContentType : undefined,
-            disablepictureinpicture
+            )
-            preload="none"
+          "
-          >
+          class="h-full w-full p-1 hover:p-0"
-            <source :src="preview" />
+        >
-          </video>
+          <PreviewVideo :src="preview" />
         </div>
 
         <ResponseImage
@@ -48,7 +48,14 @@
           }"
         >
           <template #item="slotProps">
+            <div
+              v-if="isVideoUrl(slotProps.data)"
+              class="h-full w-full p-1 hover:p-0"
+            >
+              <PreviewVideo :src="slotProps.data" />
+            </div>
             <ResponseImage
+              v-else
               :src="slotProps.data"
               :error="noPreviewContent"
             ></ResponseImage>
@@ -98,6 +105,7 @@
 </template>
 
 <script setup lang="ts">
+import PreviewVideo from 'components/PreviewVideo.vue'
 import ResponseFileUpload from 'components/ResponseFileUpload.vue'
 import ResponseImage from 'components/ResponseImage.vue'
 import ResponseInput from 'components/ResponseInput.vue'
@@ -106,13 +114,13 @@ import { useContainerQueries } from 'hooks/container'
 import { useModelPreview } from 'hooks/model'
 import Button from 'primevue/button'
 import Carousel from 'primevue/carousel'
+import { isVideoUrl } from 'utils/media'
 
 const editable = defineModel<boolean>('editable')
 const { cardWidth } = useConfig()
 
 const {
   preview,
-  previewType,
   typeOptions,
   currentType,
   defaultContent,
@@ -120,6 +128,7 @@ const {
   networkContent,
   updateLocalContent,
   noPreviewContent,
+  localContentType,
 } = useModelPreview()
 
 const { $sm, $xl } = useContainerQueries()

src/components/PreviewVideo.vue

@@ -0,0 +1,25 @@
+<template>
+  <video
+    class="h-full w-full object-cover"
+    playsinline
+    autoplay
+    loop
+    muted
+    disablepictureinpicture
+    :preload="preload"
+  >
+    <source :src="src" type="video/mp4" />
+    <source :src="src" type="video/webm" />
+  </video>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  src: string
+  preload?: 'none' | 'metadata' | 'auto'
+}
+
+withDefaults(defineProps<Props>(), {
+  preload: 'metadata',
+})
+</script>

src/components/ResponseFileUpload.vue

@@ -46,7 +46,7 @@ const handleDropFile = (event: DragEvent) => {
 const handleClick = (event: MouseEvent) => {
   const input = document.createElement('input')
   input.type = 'file'
-  input.accept = 'image/*'
+  input.accept = 'image/*,video/*'
   input.onchange = () => {
     const files = input.files
     if (files) {

src/hooks/explorer.ts

@@ -46,7 +46,6 @@ export const useModelExplorer = () => {
       description: '',
       metadata: {},
       preview: '',
-      previewType: 'image',
       type: folder ?? '',
       isFolder: true,
       children: [],

src/hooks/model.ts

@@ -553,9 +553,11 @@ export const useModelPreviewEditor = (formInstance: ModelFormInstance) => {
    * Local file url
    */
   const localContent = ref<string>()
+  const localContentType = ref<string>()
   const updateLocalContent = async (event: SelectEvent) => {
     const { files } = event
     localContent.value = files[0].objectURL
+    localContentType.value = files[0].type
   }
 
   /**
@@ -587,16 +589,13 @@ export const useModelPreviewEditor = (formInstance: ModelFormInstance) => {
     return content
   })
 
-  const previewType = computed(() => {
-    return model.value.previewType
-  })
-
   onMounted(() => {
     registerReset(() => {
       currentType.value = 'default'
       defaultContentPage.value = 0
       networkContent.value = undefined
       localContent.value = undefined
+      localContentType.value = undefined
     })
 
     registerSubmit((data) => {
@@ -606,7 +605,6 @@ export const useModelPreviewEditor = (formInstance: ModelFormInstance) => {
 
   const result = {
     preview,
-    previewType,
     typeOptions,
     currentType,
     // default value
@@ -616,6 +614,7 @@ export const useModelPreviewEditor = (formInstance: ModelFormInstance) => {
     networkContent,
     // local file
     localContent,
+    localContentType,
     updateLocalContent,
     // no preview
     noPreviewContent,

src/types/typings.d.ts

@@ -11,7 +11,6 @@ export interface BaseModel {
   pathIndex: number
   isFolder: boolean
   preview: string | string[]
-  previewType: string
   description: string
   metadata: Record<string, string>
 }

src/utils/media.ts

@@ -0,0 +1,53 @@
+/**
+ * Media file utility functions
+ */
+
+const VIDEO_EXTENSIONS = [
+  '.mp4',
+  '.webm',
+  '.mov',
+  '.avi',
+  '.mkv',
+  '.flv',
+  '.wmv',
+  '.m4v',
+  '.ogv',
+]
+
+const VIDEO_HOST_PATTERNS = [
+  '/video', // Civitai video URLs often end with /video
+  'type=video', // URLs with video type parameter
+  'format=video', // URLs with video format parameter
+  'video.civitai.com', // Civitai video domain
+]
+
+/**
+ * Detect if a URL points to a video based on extension or URL patterns
+ * @param url - The URL to check
+ * @param localContentType - Optional MIME type for local files
+ */
+export const isVideoUrl = (url: string, localContentType?: string): boolean => {
+  if (!url) return false
+
+  // For local files with known MIME type
+  if (localContentType && localContentType.startsWith('video/')) {
+    return true
+  }
+
+  const urlLower = url.toLowerCase()
+
+  // First check if URL ends with a video extension
+  for (const ext of VIDEO_EXTENSIONS) {
+    if (urlLower.endsWith(ext)) {
+      return true
+    }
+  }
+
+  // Check if URL contains a video extension anywhere (for complex URLs like Civitai)
+  if (VIDEO_EXTENSIONS.some((ext) => urlLower.includes(ext))) {
+    return true
+  }
+
+  // Check for specific video hosting patterns
+  return VIDEO_HOST_PATTERNS.some((pattern) => urlLower.includes(pattern))
+}