feat(search): add multi-token regex and wildcard support (#211)

* feat(search): add multi-token regex and wildcard support

* feat(ui): add layout toggle button in Model Manager header

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)
-            return web.Response(body=image_data.getvalue(), content_type="image/webp")
+            # Determine content type from the actual file
+            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
-                        if preview_image_url:
-                            utils.print_debug(f"Save preview image to {abs_image_path}")
-                            utils.save_model_preview_image(abs_model_path, preview_image_url)
+                        preview_url = preview_url_list[0] if preview_url_list else None
+                        if preview_url:
+                            utils.print_debug(f"Save preview to {abs_model_path}")
+                            utils.save_model_preview(abs_model_path, preview_url)
 
                         description = model_info.get("description", None)
                         if description:

py/manager.py

@@ -131,23 +131,16 @@ class ModelManager:
             basename = os.path.splitext(filename)[0] if is_file else filename
             extension = os.path.splitext(filename)[1] if is_file else ""
 
-            if is_file and extension not in folder_paths.supported_pt_extensions:
+            model_preview = None
+            if is_file:
+                preview_name = utils.get_model_preview_name(entry.path)
+                preview_ext = f".{preview_name.split('.')[-1]}"
+                model_preview = f"/model-manager/preview/{folder}/{path_index}/{relative_path.replace(extension, preview_ext)}"
+
+            if not os.path.exists(entry.path):
+                utils.print_error(f"{entry.path} is not file or directory.")
                 return None
 
-            preview_type = "image"
-            preview_ext = ".webp"
-            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()
             return {
                 "type": folder,
@@ -157,36 +150,45 @@ class ModelManager:
                 "extension": extension,
                 "pathIndex": path_index,
                 "sizeBytes": stat.st_size if is_file else 0,
-                "preview": model_preview if is_file else None,
-                "previewType": preview_type,
+                "preview": model_preview,
                 "createdAt": round(stat.st_ctime_ns / 1000000),
                 "updatedAt": round(stat.st_mtime_ns / 1000000),
             }
 
         def get_all_files_entry(directory: str):
             entries: list[os.DirEntry[str]] = []
+            if not os.path.exists(directory):
+                return []
             with os.scandir(directory) as it:
                 for entry in it:
-                    # Skip hidden files
-                    if not include_hidden_files:
-                        if entry.name.startswith("."):
-                            continue
-                    entries.append(entry)
-                    if entry.is_dir():
+                    if not include_hidden_files and entry.name.startswith("."):
+                        continue
+                    
+                    if entry.is_file():
+                        extension = os.path.splitext(entry.name)[1]
+                        if extension in folder_paths.supported_pt_extensions:
+                            entries.append(entry)
+                    else:
+                        entries.append(entry)
                         entries.extend(get_all_files_entry(entry.path))
             return entries
 
+        BATCH_SIZE = 200
+        MAX_WORKERS = min(4, os.cpu_count() or 1)
+        
         for path_index, base_path in enumerate(folders):
             if not os.path.exists(base_path):
                 continue
             file_entries = get_all_files_entry(base_path)
-            with ThreadPoolExecutor() as executor:
-                futures = {executor.submit(get_file_info, entry, base_path, path_index): entry for entry in file_entries}
-                for future in as_completed(futures):
-                    file_info = future.result()
-                    if file_info is None:
-                        continue
-                    result.append(file_info)
+            
+            for i in range(0, len(file_entries), BATCH_SIZE):
+                batch = file_entries[i:i + BATCH_SIZE]
+                with ThreadPoolExecutor(max_workers=MAX_WORKERS) as executor:
+                    futures = {executor.submit(get_file_info, entry, base_path, path_index): entry for entry in batch}
+                    for future in as_completed(futures):
+                        file_info = future.result()
+                        if file_info is not None:
+                            result.append(file_info)
 
         return result
 
@@ -211,10 +213,11 @@ class ModelManager:
 
         if "previewFile" in model_data:
             previewFile = model_data["previewFile"]
-            if type(previewFile) is str and previewFile == "undefined":
-                utils.remove_model_preview_image(model_path)
-            else:
-                utils.save_model_preview_image(model_path, previewFile)
+            # Always remove existing preview files first in case the file extension has changed
+            utils.remove_model_preview(model_path)
+            # Nothing else to do if the preview file was being removed
+            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 +239,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,25 @@ 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']
+
+# Preview extensions in priority order (videos first, then images)
+PREVIEW_EXTENSIONS = ['.webm', '.mp4', '.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)
@@ -27,7 +46,7 @@ def print_warning(msg, *args, **kwargs):
 
 
 def print_error(msg, *args, **kwargs):
-    logging.error(f"[{config.extension_tag}] {msg}", *args, **kwargs)
+    logging.error(f"[{config.extension_tag}][ERROR] {msg}", *args, **kwargs)
     logging.debug(traceback.format_exc())
 
 
@@ -252,95 +271,145 @@ def get_model_metadata(filename: str):
         return {}
 
 
-def get_model_all_images(model_path: str):
+def _check_preview_variants(base_dirname: str, basename: str, extensions: list[str]) -> list[str]:
+    """Check for preview files with given extensions and return found files"""
+    found = []
+    for ext in extensions:
+        # Direct match (basename.ext)
+        preview_file = f"{basename}{ext}"
+        if os.path.isfile(join_path(base_dirname, preview_file)):
+            found.append(preview_file)
+        
+        # Preview variant (basename.preview.ext)
+        preview_file = f"{basename}.preview{ext}"
+        if os.path.isfile(join_path(base_dirname, preview_file)):
+            found.append(preview_file)
+    return found
+
+
+def _get_preview_path(model_path: str, extension: str) -> str:
+    """Generate preview file path with given extension"""
+    basename = os.path.splitext(model_path)[0]
+    return f"{basename}{extension}"
+
+
+def get_model_all_previews(model_path: str) -> list[str]:
+    """Get all preview files for a model"""
     base_dirname = os.path.dirname(model_path)
-    files = search_files(base_dirname)
-    files = folder_paths.filter_files_content_types(files, ["image"])
-
     basename = os.path.splitext(os.path.basename(model_path))[0]
-    output: list[str] = []
-    for file in files:
-        file_basename = os.path.splitext(file)[0]
-        if file_basename == basename:
-            output.append(file)
-        if file_basename == f"{basename}.preview":
-            output.append(file)
-    return output
+    return _check_preview_variants(base_dirname, basename, PREVIEW_EXTENSIONS)
 
 
-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]
-
-    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):
+def get_model_preview_name(model_path: str) -> str:
+    """Get the first available preview file or 'no-preview.png' if none found"""
     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:
-        file_basename = os.path.splitext(file)[0]
-        if file_basename == basename:
-            output.append(file)
-        if file_basename == f"{basename}.preview":
-            output.append(file)
-    return output
+    
+    for ext in PREVIEW_EXTENSIONS:
+        # Check direct match first
+        preview_name = f"{basename}{ext}"
+        if os.path.isfile(join_path(base_dirname, preview_name)):
+            return preview_name
+        
+        # Check preview variant
+        preview_name = f"{basename}.preview{ext}"
+        if os.path.isfile(join_path(base_dirname, preview_name)):
+            return preview_name
+    
+    return "no-preview.png"
 
 
 from PIL import Image
 from io import BytesIO
 
 
-def remove_model_preview_image(model_path: str):
-    basename = os.path.splitext(model_path)[0]
-    preview_path = f"{basename}.webp"
-    if os.path.exists(preview_path):
-        os.remove(preview_path)
+def remove_model_preview(model_path: str):
+    """Remove all preview files for a model"""
+    base_dirname = os.path.dirname(model_path)
+    basename = os.path.splitext(os.path.basename(model_path))[0]
+    
+    previews = _check_preview_variants(base_dirname, basename, PREVIEW_EXTENSIONS)
+    for preview in previews:
+        preview_path = join_path(base_dirname, preview)
+        if os.path.exists(preview_path):
+            os.remove(preview_path)
 
 
-def save_model_preview_image(model_path: str, image_file_or_url: Any, platform: Optional[str] = None):
-    basename = os.path.splitext(model_path)[0]
-    preview_path = f"{basename}.webp"
-    # Download image file if it is url
-    if type(image_file_or_url) is str:
-        image_url = image_file_or_url
+def save_model_preview(model_path: str, file_or_url: Any, platform: Optional[str] = None):
+    """Save a preview file for a model. Images -> WebP, videos -> original format"""
+    
+    # Download file if it is a URL
+    if type(file_or_url) is str:
+        url = file_or_url
 
         try:
-            image_response = requests.get(image_url)
-            image_response.raise_for_status()
-
-            image = Image.open(BytesIO(image_response.content))
-            image.save(preview_path, "WEBP")
+            response = requests.get(url)
+            response.raise_for_status()
+            
+            # Determine content type from response headers or URL extension
+            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) or '.mp4'
+                preview_path = _get_preview_path(model_path, ext)
+                with open(preview_path, 'wb') as f:
+                    f.write(content)
+            else:
+                # Default to image processing for unknown or image types
+                preview_path = _get_preview_path(model_path, ".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
-        image_file = image_file_or_url
+        file_obj = file_or_url
 
-        if not isinstance(image_file, web.FileField):
-            raise RuntimeError("Invalid image file")
+        if not isinstance(file_obj, web.FileField):
+            raise RuntimeError("Invalid file")
 
-        content_type: str = image_file.content_type
-        if not content_type.startswith("image/"):
-            if platform == "huggingface":
-                # huggingface previewFile content_type='text/plain',  not startswith("image/")
-                return
-            else:
-                raise RuntimeError(f"FileTypeError: expected image, got {content_type}")
-        image = Image.open(image_file.file)
-        image.save(preview_path, "WEBP")
+        content_type: str = file_obj.content_type
+        filename: str = getattr(file_obj, 'filename', '')
+        
+        if content_type.startswith("video/"):
+            # Save video in original format for now, consider transcoding to webm to follow the pattern for images converting to webp
+            ext = os.path.splitext(filename.lower())[1] or '.mp4'
+            preview_path = _get_preview_path(model_path, 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 = _get_preview_path(model_path, ".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 +467,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]

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-model-manager"
 description = "Manage models: browsing, download and delete."
-version = "2.7.0"
+version = "2.8.3"
 license = { file = "LICENSE" }
 dependencies = ["markdownify"]
 

src/App.vue

@@ -80,8 +80,25 @@ onMounted(() => {
     })
   }
 
+  const toggleLayout = () => {
+    // flip the flat setting
+    const newValue = !config.flat.value
+    config.flat.value = newValue
+
+    // persist so it survives reloads
+    app.ui?.settings.setSettingValue('ModelManager.UI.Flat', newValue)
+
+    // close the current dialog (because it is keepAlive)
+    dialog.closeAll()
+
+    // reopen with the new layout
+    openManagerDialog()
+  }
+
   const openManagerDialog = () => {
     const { cardWidth, gutter, aspect, flat } = config
+    // choose icon depending on current layout
+    const layoutIcon = flat.value ? 'pi pi-folder-open' : 'pi pi-th-large'
 
     if (firstOpenManager.value) {
       models.refresh(true)
@@ -99,6 +116,14 @@ onMounted(() => {
           icon: 'mdi mdi-folder-search-outline text-lg',
           command: openModelScanning,
         },
+        {
+          key: 'toggle-layout',
+          icon: layoutIcon,
+          command: toggleLayout,
+          tooltip: flat.value
+            ? t('switchToFolderView')
+            : t('switchToFlatView'),
+        },
         {
           key: 'refresh',
           icon: 'pi pi-refresh',

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/DialogManager.vue

@@ -225,17 +225,33 @@ const list = computed(() => {
     return !item.isFolder
   })
 
-  const filterList = pureModels.filter((model) => {
-    const showAllModel = currentType.value === allType
+function buildRegex(raw: string): RegExp {
+  try {
+    // Escape regex specials, then restore * wildcards as .*
+    const escaped = raw
+      .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+      .replace(/\\\*/g, '.*')
+    return new RegExp(escaped, 'i') // case-insensitive
+  } catch (e) {
+    return new RegExp(raw, 'i')
+  }
+}
 
-    const matchType = showAllModel || model.type === currentType.value
+const filterList = pureModels.filter((model) => {
+  const showAllModel = currentType.value === allType
+  const matchType = showAllModel || model.type === currentType.value
 
-    const filter = searchContent.value?.toLowerCase() ?? ''
-    const matchSubFolder = model.subFolder.toLowerCase().includes(filter)
-    const matchName = model.basename.toLowerCase().includes(filter)
+  const rawFilter = searchContent.value ?? ''
+  const tokens = rawFilter.split(/\s+/).filter(Boolean)
+  const regexes = tokens.map(buildRegex)
 
-    return matchType && (matchSubFolder || matchName)
-  })
+  // Require every token to match either the folder or the name
+  const matchesAll = regexes.every((re) =>
+    re.test(model.subFolder) || re.test(model.basename)
+  )
+  
+  return matchType && matchesAll
+})
 
   let sortStrategy: (a: Model, b: Model) => number = () => 0
   switch (sortOrder.value) {
@@ -262,6 +278,7 @@ const list = computed(() => {
   })
 })
 
+
 const contentStyle = computed(() => ({
   gridTemplateColumns: `repeat(auto-fit, ${cardSize.value.width}px)`,
   gap: `${gutter}px`,

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
-            class="h-full w-full object-cover"
-            playsinline
-            autoplay
-            loop
-            disablepictureinpicture
-            preload="none"
-          >
-            <source :src="preview" />
-          </video>
+          <PreviewVideo :src="preview" />
         </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">
-          <video
-            class="h-full w-full object-cover"
-            playsinline
-            autoplay
-            loop
-            disablepictureinpicture
-            preload="none"
-          >
-            <source :src="preview" />
-          </video>
+        <div
+          v-if="
+            preview &&
+            isVideoUrl(
+              preview,
+              currentType === 'local' ? localContentType : undefined,
+            )
+          "
+          class="h-full w-full p-1 hover:p-0"
+        >
+          <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))
+}