1.10.16 (#2771)

Co-authored-by: bymyself <cbyrne@comfy.org> Co-authored-by: github-actions <github-actions@github.com>
2026-03-09 15:10:17 +00:00 · 2025-02-28 14:11:14 -05:00
parent e106fded37
commit 24e560bb2d
82 changed files with 1662 additions and 106 deletions
--- a/src/components/templates/TemplateWorkflowCard.vue
+++ b/src/components/templates/TemplateWorkflowCard.vue
@@ -1,38 +1,45 @@
 <template>
-  <Card :data-testid="`template-workflow-${template.name}`" class="w-64">
+  <Card
+    ref="cardRef"
+    :data-testid="`template-workflow-${template.name}`"
+    class="w-64 group"
+  >
    <template #header>
-      <div class="flex items-center justify-center">
-        <div class="relative overflow-hidden rounded-t-lg cursor-pointer">
+      <div
+        class="flex items-center justify-center cursor-pointer"
+        @click="$emit('loadWorkflow', template.name)"
+      >
+        <div class="relative overflow-hidden rounded-t-lg">
          <template v-if="template.mediaType === 'audio'">
-            <div class="w-64 h-64 flex items-center justify-center p-4 z-20">
-              <audio
-                controls
-                class="w-full relative z-20"
-                :src="thumbnailSrc"
-                @error="imageError = true"
-                @click.stop
-              />
-            </div>
+            <AudioThumbnail :src="baseThumbnailSrc" />
+          </template>
+          <template v-else-if="template.thumbnailVariant === 'compareSlider'">
+            <CompareSliderThumbnail
+              :base-image-src="baseThumbnailSrc"
+              :overlay-image-src="overlayThumbnailSrc"
+              :alt="title"
+              :is-hovered="isHovered"
+            />
+          </template>
+          <template v-else-if="template.thumbnailVariant === 'hoverDissolve'">
+            <HoverDissolveThumbnail
+              :base-image-src="baseThumbnailSrc"
+              :overlay-image-src="overlayThumbnailSrc"
+              :alt="title"
+              :is-hovered="isHovered"
+            />
          </template>
          <template v-else>
-            <img
-              v-if="!imageError"
-              :src="thumbnailSrc"
+            <DefaultThumbnail
+              :src="baseThumbnailSrc"
              :alt="title"
-              class="w-64 h-64 rounded-t-lg object-cover thumbnail"
-              @error="imageError = true"
+              :hover-zoom="
+                template.thumbnailVariant === 'zoomHover'
+                  ? UPSCALE_ZOOM_SCALE
+                  : DEFAULT_ZOOM_SCALE
+              "
            />
-            <div v-else class="w-64 h-64 content-center text-center">
-              <i class="pi pi-file" style="font-size: 4rem"></i>
-            </div>
          </template>
-          <a @click="$emit('loadWorkflow', template.name)">
-            <div
-              class="absolute top-0 left-0 w-64 h-64 overflow-hidden opacity-0 transition duration-300 ease-in-out hover:opacity-100 bg-opacity-50 bg-black flex items-center justify-center z-10"
-            >
-              <i class="pi pi-play-circle" style="color: white"></i>
-            </div>
-          </a>
          <ProgressSpinner
            v-if="loading"
            class="absolute inset-0 z-1 w-3/12 h-full"
@@ -41,7 +48,9 @@
      </div>
    </template>
    <template #subtitle>
-      <div class="text-center">
+      <div
+        class="text-center py-2 opacity-85 group-hover:opacity-100 transition-opacity"
+      >
        {{ title }}
      </div>
    </template>
@@ -49,14 +58,22 @@
 </template>

 <script setup lang="ts">
+import { useElementHover } from '@vueuse/core'
 import Card from 'primevue/card'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'

+import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue'
+import CompareSliderThumbnail from '@/components/templates/thumbnails/CompareSliderThumbnail.vue'
+import DefaultThumbnail from '@/components/templates/thumbnails/DefaultThumbnail.vue'
+import HoverDissolveThumbnail from '@/components/templates/thumbnails/HoverDissolveThumbnail.vue'
 import { TemplateInfo } from '@/types/workflowTemplateTypes'
 import { normalizeI18nKey } from '@/utils/formatUtil'

+const UPSCALE_ZOOM_SCALE = 38 // for upscale templates, exaggerate the hover zoom
+const DEFAULT_ZOOM_SCALE = 6
+
 const { sourceModule, categoryTitle, loading, template } = defineProps<{
  sourceModule: string
  categoryTitle: string
@@ -66,13 +83,23 @@ const { sourceModule, categoryTitle, loading, template } = defineProps<{

 const { t } = useI18n()

-const imageError = ref(false)
+const cardRef = ref<HTMLElement | null>(null)
+const isHovered = useElementHover(cardRef)

 const thumbnailSrc = computed(() =>
  sourceModule === 'default'
-    ? `/templates/${template.name}.${template.mediaSubtype}`
-    : `/api/workflow_templates/${sourceModule}/${template.name}.${template.mediaSubtype}`
+    ? `/templates/${template.name}`
+    : `/api/workflow_templates/${sourceModule}/${template.name}`
 )
+
+const baseThumbnailSrc = computed(
+  () => `${thumbnailSrc.value}-1.${template.mediaSubtype}`
+)
+
+const overlayThumbnailSrc = computed(
+  () => `${thumbnailSrc.value}-2.${template.mediaSubtype}`
+)
+
 const title = computed(() => {
  return sourceModule === 'default'
    ? t(
--- a/src/components/templates/thumbnails/AudioThumbnail.vue
+++ b/src/components/templates/thumbnails/AudioThumbnail.vue
@@ -0,0 +1,15 @@
+<template>
+  <BaseThumbnail>
+    <div class="w-64 h-64 flex items-center justify-center p-4">
+      <audio controls class="w-full relative" :src="src" @click.stop />
+    </div>
+  </BaseThumbnail>
+</template>
+
+<script setup lang="ts">
+import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
+
+defineProps<{
+  src: string
+}>()
+</script>
--- a/src/components/templates/thumbnails/BaseThumbnail.vue
+++ b/src/components/templates/thumbnails/BaseThumbnail.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="relative w-64 h-64 rounded-t-lg overflow-hidden select-none">
+    <div v-if="!error" ref="contentRef">
+      <slot />
+    </div>
+    <div
+      v-else
+      class="w-full h-full flex items-center justify-center bg-surface-card"
+    >
+      <i class="pi pi-file text-4xl text-surface-600" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+import { onMounted, ref } from 'vue'
+
+const error = ref(false)
+const contentRef = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+  const images = Array.from(contentRef.value?.getElementsByTagName('img') ?? [])
+  images.forEach((img) => {
+    useEventListener(img, 'error', () => {
+      error.value = true
+    })
+  })
+})
+</script>
--- a/src/components/templates/thumbnails/CompareSliderThumbnail.vue
+++ b/src/components/templates/thumbnails/CompareSliderThumbnail.vue
@@ -0,0 +1,51 @@
+<template>
+  <BaseThumbnail>
+    <img :src="baseImageSrc" :alt="alt" class="w-full h-full object-cover" />
+    <div ref="containerRef" class="absolute inset-0">
+      <img
+        :src="overlayImageSrc"
+        :alt="alt"
+        class="w-full h-full object-cover"
+        :style="{
+          clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`
+        }"
+      />
+      <div
+        class="absolute inset-y-0 w-0.5 bg-white/30 backdrop-blur-sm z-10 pointer-events-none"
+        :style="{
+          left: `${sliderPosition}%`
+        }"
+      />
+    </div>
+  </BaseThumbnail>
+</template>
+
+<script setup lang="ts">
+import { useMouseInElement } from '@vueuse/core'
+import { ref, watch } from 'vue'
+
+import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
+
+const { isHovered } = defineProps<{
+  baseImageSrc: string
+  overlayImageSrc: string
+  alt: string
+  isHovered?: boolean
+}>()
+
+const sliderPosition = ref(21)
+const containerRef = ref<HTMLElement | null>(null)
+
+const { elementX, elementWidth, isOutside } = useMouseInElement(containerRef)
+
+// Update slider position based on mouse position when hovered
+watch(
+  [() => isHovered, elementX, elementWidth, isOutside],
+  ([isHovered, x, width, outside]) => {
+    if (!isHovered) return
+    if (!outside) {
+      sliderPosition.value = (x / width) * 100
+    }
+  }
+)
+</script>
--- a/src/components/templates/thumbnails/DefaultThumbnail.vue
+++ b/src/components/templates/thumbnails/DefaultThumbnail.vue
@@ -0,0 +1,37 @@
+<template>
+  <BaseThumbnail>
+    <div ref="containerRef" class="overflow-hidden">
+      <img
+        :src="src"
+        :alt="alt"
+        draggable="false"
+        class="w-64 h-64 object-cover transform-gpu transition-transform duration-300 ease-out"
+        :style="
+          isHovered ? { transform: `scale(${1 + hoverZoom / 100})` } : undefined
+        "
+      />
+    </div>
+  </BaseThumbnail>
+</template>
+
+<script setup lang="ts">
+import { useElementHover } from '@vueuse/core'
+import { ref } from 'vue'
+
+import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
+
+const { hoverZoom = 8 } = defineProps<{
+  src: string
+  alt: string
+  hoverZoom?: number
+}>()
+
+const containerRef = ref<HTMLElement | null>(null)
+const isHovered = useElementHover(containerRef)
+</script>
+
+<style scoped>
+img {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>
--- a/src/components/templates/thumbnails/HoverDissolveThumbnail.vue
+++ b/src/components/templates/thumbnails/HoverDissolveThumbnail.vue
@@ -0,0 +1,30 @@
+<template>
+  <BaseThumbnail>
+    <div class="relative w-full h-full">
+      <img
+        :src="baseImageSrc"
+        :alt="alt"
+        draggable="false"
+        class="absolute inset-0 w-64 h-64 object-cover"
+      />
+      <img
+        :src="overlayImageSrc"
+        :alt="alt"
+        draggable="false"
+        class="absolute inset-0 w-64 h-64 object-cover transition-opacity duration-300"
+        :class="{ 'opacity-100': isHovered, 'opacity-0': !isHovered }"
+      />
+    </div>
+  </BaseThumbnail>
+</template>
+
+<script setup lang="ts">
+import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
+
+defineProps<{
+  baseImageSrc: string
+  overlayImageSrc: string
+  alt: string
+  isHovered: boolean
+}>()
+</script>
--- a/src/constants/coreTemplates.ts
+++ b/src/constants/coreTemplates.ts
@@ -7,52 +7,54 @@ export const CORE_TEMPLATES = [
      {
        name: 'default',
        mediaType: 'image',
-        mediaSubtype: 'png'
+        mediaSubtype: 'webp'
      },
      {
        name: 'image2image',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/img2img/'
      },
      {
        name: 'lora',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/lora/'
      },
      {
        name: 'inpaint_example',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'compareSlider',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/inpaint/'
      },
      {
        name: 'inpain_model_outpainting',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'compareSlider',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/inpaint/#outpainting'
      },
      {
        name: 'embedding_example',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/textual_inversion_embeddings/'
      },
      {
        name: 'gligen_textbox_example',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/gligen/'
      },
      {
        name: 'lora_multiple',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/lora/'
      }
    ]
@@ -65,51 +67,55 @@ export const CORE_TEMPLATES = [
      {
        name: 'flux_dev_checkpoint_example',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#flux-dev-1'
      },
      {
        name: 'flux_schnell',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#flux-schnell-1'
      },
      {
        name: 'flux_fill_inpaint_example',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'compareSlider',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#fill-inpainting-model'
      },
      {
        name: 'flux_fill_outpaint_example',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'compareSlider',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#fill-inpainting-model'
      },
      {
        name: 'flux_canny_model_example',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'hoverDissolve',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#canny-and-depth'
+      },
+      {
+        name: 'flux_depth_lora_example',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#canny-and-depth'
      },
      {
        name: 'flux_redux_model_example',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#redux'
-      },
-      {
-        name: 'flux_depth_lora_example',
-        mediaType: 'image',
-        mediaSubtype: 'png',
-        tutorialUrl:
-          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#canny-and-depth'
      }
    ]
  },
@@ -121,35 +127,40 @@ export const CORE_TEMPLATES = [
      {
        name: 'controlnet_example',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/controlnet/'
      },
      {
        name: '2_pass_pose_worship',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/controlnet/#pose-controlnet'
      },
      {
        name: 'depth_controlnet',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/controlnet/#t2i-adapter-vs-controlnets'
      },
      {
        name: 'depth_t2i_adapter',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/controlnet/#t2i-adapter-vs-controlnets'
      },
      {
        name: 'mixing_controlnets',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/controlnet/#mixing-controlnets'
      }
@@ -161,30 +172,34 @@ export const CORE_TEMPLATES = [
    type: 'image',
    templates: [
      {
-        name: 'upscale',
+        name: 'hiresfix_latent_workflow',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'zoomHover',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/2_pass_txt2img/'
      },
      {
        name: 'esrgan_example',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'zoomHover',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/upscale_models/'
      },
      {
        name: 'hiresfix_esrgan_workflow',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'zoomHover',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/2_pass_txt2img/#non-latent-upscaling'
      },
      {
        name: 'latent_upscale_different_prompt_model',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'zoomHover',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/2_pass_txt2img/#more-examples'
      }
@@ -195,20 +210,6 @@ export const CORE_TEMPLATES = [
    title: 'Video',
    type: 'video',
    templates: [
-      {
-        name: 'image_to_video',
-        mediaType: 'image',
-        mediaSubtype: 'webp',
-        tutorialUrl:
-          'https://comfyanonymous.github.io/ComfyUI_examples/video/#image-to-video'
-      },
-      {
-        name: 'txt_to_image_to_video',
-        mediaType: 'image',
-        mediaSubtype: 'webp',
-        tutorialUrl:
-          'https://comfyanonymous.github.io/ComfyUI_examples/video/#image-to-video'
-      },
      {
        name: 'ltxv_image_to_video',
        mediaType: 'image',
@@ -233,6 +234,20 @@ export const CORE_TEMPLATES = [
        mediaSubtype: 'webp',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/hunyuan_video/'
+      },
+      {
+        name: 'image_to_video',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/video/#image-to-video'
+      },
+      {
+        name: 'txt_to_image_to_video',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/video/#image-to-video'
      }
    ]
  },
@@ -244,28 +259,31 @@ export const CORE_TEMPLATES = [
      {
        name: 'sd3.5_simple_example',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/sd3/#sd35'
      },
      {
        name: 'sd3.5_large_canny_controlnet_example',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/sd3/#sd35-controlnets'
      },
      {
        name: 'sd3.5_large_depth',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/sd3/#sd35-controlnets'
      },
      {
        name: 'sd3.5_large_blur',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
+        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/sd3/#sd35-controlnets'
      }
@@ -279,33 +297,33 @@ export const CORE_TEMPLATES = [
      {
        name: 'sdxl_simple_example',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/sdxl/'
      },
      {
        name: 'sdxl_refiner_prompt_example',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/sdxl/'
      },
      {
        name: 'sdxl_revision_text_prompts',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/sdxl/#revision'
      },
      {
        name: 'sdxl_revision_zero_positive',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/sdxl/#revision'
      },
      {
        name: 'sdxlturbo_example',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/sdturbo/'
      }
@@ -319,21 +337,21 @@ export const CORE_TEMPLATES = [
      {
        name: 'area_composition',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/area_composition/'
      },
      {
        name: 'area_composition_reversed',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/area_composition/'
      },
      {
        name: 'area_composition_square_area_for_subject',
        mediaType: 'image',
-        mediaSubtype: 'png',
+        mediaSubtype: 'webp',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/area_composition/#increasing-consistency-of-images-with-area-composition'
      }
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -393,9 +393,8 @@
        "mixing_controlnets": "Mixing ControlNets"
      },
      "Upscaling": {
-        "upscale": "Upscale",
        "esrgan_example": "ESRGAN",
-        "hiresfix_latent_workflow": "HiresFix Latent Workflow",
+        "hiresfix_latent_workflow": "Upscale",
        "hiresfix_esrgan_workflow": "HiresFix ESRGAN Workflow",
        "latent_upscale_different_prompt_model": "Latent Upscale Different Prompt Model"
      },
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -820,8 +820,7 @@
        "esrgan_example": "ESRGAN",
        "hiresfix_esrgan_workflow": "Flux de Travail ESRGAN HiresFix",
        "hiresfix_latent_workflow": "Flux de Travail Latent HiresFix",
-        "latent_upscale_different_prompt_model": "Modèle d'Agrandissement Latent Différent Prompt",
-        "upscale": "Agrandissement"
+        "latent_upscale_different_prompt_model": "Modèle d'Agrandissement Latent Différent Prompt"
      },
      "Video": {
        "hunyuan_video_text_to_video": "Texte à Vidéo Hunyuan",
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -820,8 +820,7 @@
        "esrgan_example": "ESRGAN",
        "hiresfix_esrgan_workflow": "HiresFix ESRGANワークフロー",
        "hiresfix_latent_workflow": "HiresFix Latentワークフロー",
-        "latent_upscale_different_prompt_model": "Latent Upscale異なるプロンプトモデル",
-        "upscale": "アップスケール"
+        "latent_upscale_different_prompt_model": "Latent Upscale異なるプロンプトモデル"
      },
      "Video": {
        "hunyuan_video_text_to_video": "Hunyuanビデオテキストからビデオへ",
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -813,8 +813,7 @@
        "esrgan_example": "ESRGAN",
        "hiresfix_esrgan_workflow": "HiresFix ESRGAN 워크플로우",
        "hiresfix_latent_workflow": "HiresFix Latent 워크플로우",
-        "latent_upscale_different_prompt_model": "Latent Upscale 다른 프롬프트 모델",
-        "upscale": "업스케일"
+        "latent_upscale_different_prompt_model": "Latent Upscale 다른 프롬프트 모델"
      },
      "Video": {
        "hunyuan_video_text_to_video": "텍스트 -> 비디오 (Hunyuan Video)",
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -820,8 +820,7 @@
        "esrgan_example": "ESRGAN",
        "hiresfix_esrgan_workflow": "HiresFix ESRGAN Workflow",
        "hiresfix_latent_workflow": "HiresFix Latent Workflow",
-        "latent_upscale_different_prompt_model": "Latent Upscale Different Prompt Model",
-        "upscale": "Увеличение"
+        "latent_upscale_different_prompt_model": "Latent Upscale Different Prompt Model"
      },
      "Video": {
        "hunyuan_video_text_to_video": "Hunyuan Video Text to Video",
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -820,8 +820,7 @@
        "esrgan_example": "ESRGAN",
        "hiresfix_esrgan_workflow": "HiresFix ESRGAN工作流",
        "hiresfix_latent_workflow": "HiresFix潜在工作流",
-        "latent_upscale_different_prompt_model": "潜在升级不同提示模型",
-        "upscale": "升级"
+        "latent_upscale_different_prompt_model": "潜在升级不同提示模型"
      },
      "Video": {
        "hunyuan_video_text_to_video": "Hunyuan视频文本到视频",
--- a/src/types/workflowTemplateTypes.ts
+++ b/src/types/workflowTemplateTypes.ts
@@ -3,6 +3,7 @@ export interface TemplateInfo {
  tutorialUrl?: string
  mediaType: string
  mediaSubtype: string
+  thumbnailVariant?: string
 }

 export interface WorkflowTemplates {