Use responsive grid for templates dialog (#2791)

2026-04-28 10:12:11 +00:00 · 2025-03-01 15:08:41 -07:00
parent 09ab14ac81
commit e58fab92d1
12 changed files with 280 additions and 126 deletions
--- a/src/constants/coreTemplates.ts
+++ b/src/constants/coreTemplates.ts
@@ -7,12 +7,14 @@ export const CORE_TEMPLATES = [
      {
        name: 'default',
        mediaType: 'image',
-        mediaSubtype: 'webp'
+        mediaSubtype: 'webp',
+        description: 'Generate images from text descriptions.'
      },
      {
        name: 'image2image',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Transform existing images using text prompts.',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/img2img/'
      },
@@ -20,12 +22,14 @@ export const CORE_TEMPLATES = [
        name: 'lora',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Apply LoRA models for specialized styles or subjects.',
        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/lora/'
      },
      {
        name: 'inpaint_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Edit specific parts of images seamlessly.',
        thumbnailVariant: 'compareSlider',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/inpaint/'
@@ -34,6 +38,7 @@ export const CORE_TEMPLATES = [
        name: 'inpain_model_outpainting',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Extend images beyond their original boundaries.',
        thumbnailVariant: 'compareSlider',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/inpaint/#outpainting'
@@ -42,6 +47,7 @@ export const CORE_TEMPLATES = [
        name: 'embedding_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Use textual inversion for consistent styles',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/textual_inversion_embeddings/'
      },
@@ -49,12 +55,14 @@ export const CORE_TEMPLATES = [
        name: 'gligen_textbox_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Specify the location and size of objects.',
        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/gligen/'
      },
      {
        name: 'lora_multiple',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Combine multiple LoRA models for unique results.',
        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/lora/'
      }
    ]
@@ -68,6 +76,7 @@ export const CORE_TEMPLATES = [
        name: 'flux_dev_checkpoint_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Create images using Flux development models.',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#flux-dev-1'
      },
@@ -75,6 +84,7 @@ export const CORE_TEMPLATES = [
        name: 'flux_schnell',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Generate images quickly with Flux Schnell.',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#flux-schnell-1'
      },
@@ -82,6 +92,7 @@ export const CORE_TEMPLATES = [
        name: 'flux_fill_inpaint_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Fill in missing parts of images.',
        thumbnailVariant: 'compareSlider',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#fill-inpainting-model'
@@ -90,6 +101,7 @@ export const CORE_TEMPLATES = [
        name: 'flux_fill_outpaint_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Extend images using Flux outpainting.',
        thumbnailVariant: 'compareSlider',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#fill-inpainting-model'
@@ -98,6 +110,7 @@ export const CORE_TEMPLATES = [
        name: 'flux_canny_model_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Generate images from edge detection.',
        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#canny-and-depth'
@@ -106,6 +119,7 @@ export const CORE_TEMPLATES = [
        name: 'flux_depth_lora_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Create images with depth-aware LoRA.',
        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#canny-and-depth'
@@ -114,6 +128,8 @@ export const CORE_TEMPLATES = [
        name: 'flux_redux_model_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description:
+          'Transfer style from a reference image to guide image generation with Flux.',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/flux/#redux'
      }
@@ -128,6 +144,7 @@ export const CORE_TEMPLATES = [
        name: 'controlnet_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Control image generation with reference images.',
        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/controlnet/'
@@ -136,6 +153,7 @@ export const CORE_TEMPLATES = [
        name: '2_pass_pose_worship',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Generate images from pose references.',
        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/controlnet/#pose-controlnet'
@@ -144,6 +162,7 @@ export const CORE_TEMPLATES = [
        name: 'depth_controlnet',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Create images with depth-aware generation.',
        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/controlnet/#t2i-adapter-vs-controlnets'
@@ -152,6 +171,7 @@ export const CORE_TEMPLATES = [
        name: 'depth_t2i_adapter',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Quickly generate depth-aware images with a T2I adapter.',
        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/controlnet/#t2i-adapter-vs-controlnets'
@@ -160,6 +180,7 @@ export const CORE_TEMPLATES = [
        name: 'mixing_controlnets',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Combine multiple ControlNet models together.',
        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/controlnet/#mixing-controlnets'
@@ -175,6 +196,7 @@ export const CORE_TEMPLATES = [
        name: 'hiresfix_latent_workflow',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Enhance image quality in latent space.',
        thumbnailVariant: 'zoomHover',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/2_pass_txt2img/'
@@ -183,6 +205,7 @@ export const CORE_TEMPLATES = [
        name: 'esrgan_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Use upscale models to enhance image quality.',
        thumbnailVariant: 'zoomHover',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/upscale_models/'
@@ -191,6 +214,7 @@ export const CORE_TEMPLATES = [
        name: 'hiresfix_esrgan_workflow',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Use upscale models during intermediate steps.',
        thumbnailVariant: 'zoomHover',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/2_pass_txt2img/#non-latent-upscaling'
@@ -199,6 +223,7 @@ export const CORE_TEMPLATES = [
        name: 'latent_upscale_different_prompt_model',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Upscale and change prompt across passes',
        thumbnailVariant: 'zoomHover',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/2_pass_txt2img/#more-examples'
@@ -210,28 +235,34 @@ export const CORE_TEMPLATES = [
    title: 'Video',
    type: 'video',
    templates: [
-      {
-        name: 'ltxv_image_to_video',
-        mediaType: 'image',
-        mediaSubtype: 'webp',
-        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/ltxv/'
-      },
      {
        name: 'ltxv_text_to_video',
        mediaType: 'image',
        mediaSubtype: 'webp',
-        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/ltxv/'
+        description: 'Generate videos from text descriptions.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/ltxv/#text-to-video'
+      },
+      {
+        name: 'ltxv_image_to_video',
+        mediaType: 'image',
+        mediaSubtype: 'webp',
+        description: 'Convert still images into videos.',
+        tutorialUrl:
+          'https://comfyanonymous.github.io/ComfyUI_examples/ltxv/#image-to-video'
      },
      {
        name: 'mochi_text_to_video_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Create videos with Mochi model.',
        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/mochi/'
      },
      {
        name: 'hunyuan_video_text_to_video',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Generate videos using Hunyuan model.',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/hunyuan_video/'
      },
@@ -239,6 +270,7 @@ export const CORE_TEMPLATES = [
        name: 'image_to_video',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Transform images into animated videos.',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/video/#image-to-video'
      },
@@ -246,6 +278,8 @@ export const CORE_TEMPLATES = [
        name: 'txt_to_image_to_video',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description:
+          'Generate images from text and then convert them into videos.',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/video/#image-to-video'
      }
@@ -260,6 +294,7 @@ export const CORE_TEMPLATES = [
        name: 'sd3.5_simple_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Generate images with SD 3.5.',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/sd3/#sd35'
      },
@@ -267,6 +302,8 @@ export const CORE_TEMPLATES = [
        name: 'sd3.5_large_canny_controlnet_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description:
+          'Use edge detection to guide image generation with SD 3.5.',
        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/sd3/#sd35-controlnets'
@@ -275,6 +312,7 @@ export const CORE_TEMPLATES = [
        name: 'sd3.5_large_depth',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Create depth-aware images with SD 3.5.',
        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/sd3/#sd35-controlnets'
@@ -283,6 +321,8 @@ export const CORE_TEMPLATES = [
        name: 'sd3.5_large_blur',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description:
+          'Generate images from blurred reference images with SD 3.5.',
        thumbnailVariant: 'hoverDissolve',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/sd3/#sd35-controlnets'
@@ -298,18 +338,22 @@ export const CORE_TEMPLATES = [
        name: 'sdxl_simple_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Create high-quality images with SDXL.',
        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/sdxl/'
      },
      {
        name: 'sdxl_refiner_prompt_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Enhance SDXL outputs with refiners.',
        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/sdxl/'
      },
      {
        name: 'sdxl_revision_text_prompts',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description:
+          'Transfer concepts from reference images to guide image generation with SDXL.',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/sdxl/#revision'
      },
@@ -317,6 +361,8 @@ export const CORE_TEMPLATES = [
        name: 'sdxl_revision_zero_positive',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description:
+          'Add text prompts alongside reference images to guide image generation with SDXL.',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/sdxl/#revision'
      },
@@ -324,6 +370,7 @@ export const CORE_TEMPLATES = [
        name: 'sdxlturbo_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Generate images in a single step with SDXL Turbo.',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/sdturbo/'
      }
@@ -338,6 +385,7 @@ export const CORE_TEMPLATES = [
        name: 'area_composition',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Control image composition with areas.',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/area_composition/'
      },
@@ -345,6 +393,7 @@ export const CORE_TEMPLATES = [
        name: 'area_composition_reversed',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Reverse area composition workflow.',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/area_composition/'
      },
@@ -352,6 +401,7 @@ export const CORE_TEMPLATES = [
        name: 'area_composition_square_area_for_subject',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Create consistent subject placement.',
        tutorialUrl:
          'https://comfyanonymous.github.io/ComfyUI_examples/area_composition/#increasing-consistency-of-images-with-area-composition'
      }
@@ -366,6 +416,7 @@ export const CORE_TEMPLATES = [
        name: 'stable_zero123_example',
        mediaType: 'image',
        mediaSubtype: 'webp',
+        description: 'Generate 3D views from single images.',
        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/3d/'
      }
    ]
@@ -379,6 +430,7 @@ export const CORE_TEMPLATES = [
        name: 'stable_audio_example',
        mediaType: 'audio',
        mediaSubtype: 'flac',
+        description: 'Generate audio from text descriptions.',
        tutorialUrl: 'https://comfyanonymous.github.io/ComfyUI_examples/audio/'
      }
    ]