From 26a4f678568623be67cf4ce5051108ab1f5ffc7f Mon Sep 17 00:00:00 2001
From: bezo97 <bezozo97@gmail.com>
Date: Mon, 23 Dec 2024 22:41:02 +0100
Subject: [PATCH 01/13] Setup new TemplateWorkflowsContent layout: - Show
 selection list for custom_nodes that contain workflow templates - Put item
 cards in carousel - Use getWorkflowTemplates() to fetch items

---
 .../templates/TemplateWorkflowsContent.vue    | 132 +++++++++++++-----
 src/scripts/api.ts                            |  11 ++
 2 files changed, 107 insertions(+), 36 deletions(-)

diff --git a/src/components/templates/TemplateWorkflowsContent.vue b/src/components/templates/TemplateWorkflowsContent.vue
index 75a5af5299..9b404ce1f8 100644
--- a/src/components/templates/TemplateWorkflowsContent.vue
+++ b/src/components/templates/TemplateWorkflowsContent.vue
@@ -1,57 +1,100 @@
 <template>
-  <div
-    class="flex flex-wrap content-around justify-around gap-4 mt-4"
-    data-testid="template-workflows-content"
-  >
-    <div
-      v-for="template in templates"
-      :key="template"
-      :data-testid="`template-workflow-${template}`"
+  <div class="flex">
+    <Listbox v-model="selectedTab" :options="tabs" optionLabel="title" />
+    <Carousel
+      class="carousel"
+      :value="selectedTab.templates"
+      :numVisible="4"
+      :numScroll="3"
+      :key="selectedTab.id"
     >
-      <Card>
-        <template #header>
-          <div
-            class="relative overflow-hidden rounded-lg cursor-pointer"
-            @click="loadWorkflow(template)"
-          >
-            <img
-              :src="`templates/${template}.jpg`"
-              class="w-64 h-64 rounded-lg object-cover"
-            />
-            <a>
+      <template #item="slotProps">
+        <Card>
+          <template #header>
+            <div class="flex center justify-center">
               <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"
+                class="relative overflow-hidden rounded-lg cursor-pointer w-64 h-64"
+                @click="loadWorkflow(slotProps.data)"
               >
-                <i class="pi pi-play-circle"></i>
+                <img
+                  :src="`templates/${slotProps.data}.jpg`"
+                  class="w-64 h-64 rounded-lg object-cover thumbnail"
+                />
+                <a>
+                  <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"
+                  >
+                    <i class="pi pi-play-circle" style="color: white"></i>
+                  </div>
+                </a>
+                <ProgressSpinner
+                  v-if="loading === slotProps.data"
+                  class="absolute inset-0 z-1 w-3/12 h-full"
+                />
               </div>
-            </a>
-            <ProgressSpinner
-              v-if="loading === template"
-              class="absolute inset-0 z-1 w-3/12 h-full"
-            />
-          </div>
-        </template>
-        <template #subtitle>{{
-          $t(`templateWorkflows.template.${template}`)
-        }}</template>
-      </Card>
-    </div>
+            </div>
+          </template>
+          <template #subtitle>{{ slotProps.data }}</template>
+        </Card>
+      </template>
+    </Carousel>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useDialogStore } from '@/stores/dialogStore'
+import Carousel from 'primevue/carousel'
+import Listbox from 'primevue/listbox'
 import Card from 'primevue/card'
 import ProgressSpinner from 'primevue/progressspinner'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { app } from '@/scripts/app'
 import { api } from '@/scripts/api'
 import { useI18n } from 'vue-i18n'
+import toast from 'primevue/toast'
 const { t } = useI18n()
 
-const templates = ['default', 'image2image', 'upscale', 'flux_schnell']
 const loading = ref<string | null>(null)
 
+interface WorkflowTemplatesTab {
+  id: string
+  title: string
+  templates: string[]
+}
+
+//These default templates are provided by the frontend
+const comfyUITemplates = {
+  id: 'default',
+  title: 'ComfyUI',
+  templates: ['default', 'image2image', 'upscale', 'flux_schnell']
+}
+
+const tabs = ref<WorkflowTemplatesTab[]>([comfyUITemplates])
+
+const selectedTab = ref<WorkflowTemplatesTab>(comfyUITemplates)
+
+onMounted(async () => {
+  try {
+    const workflowTemplates = await api.getWorkflowTemplates()
+    tabs.value = [
+      comfyUITemplates,
+      ...Object.entries(workflowTemplates).map(([key, value]) => ({
+        id: key,
+        title: key,
+        templates: value
+      }))
+    ]
+  } catch (error) {
+    console.error('Error fetching workflow templates:', error)
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'Failed to fetch workflow templates',
+      life: 5000
+    })
+  }
+})
+
 const loadWorkflow = async (id: string) => {
   loading.value = id
   const json = await fetch(api.fileURL(`templates/${id}.json`)).then((r) =>
@@ -62,7 +105,7 @@ const loadWorkflow = async (id: string) => {
     json,
     true,
     true,
-    t(`templateWorkflows.template.${id}`)
+    t(`templateWorkflows.template.${id}`, id)
   )
 
   return false
@@ -78,4 +121,21 @@ const loadWorkflow = async (id: string) => {
 :deep(.p-card-subtitle) {
   text-align: center;
 }
+
+.carousel {
+  width: 1300px;
+}
+
+/* Fallback graphics for workflows that don't have an image. */
+img.thumbnail::before {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var(--comfy-menu-secondary-bg);
+  color: var(--fg-color);
+  content: '🗎';
+  text-align: center;
+  align-content: center;
+  font-size: 64px;
+}
 </style>
diff --git a/src/scripts/api.ts b/src/scripts/api.ts
index 686372481c..5b5fe857ed 100644
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -397,6 +397,17 @@ export class ComfyApi extends EventTarget {
     return await resp.json()
   }
 
+  /**
+   * Gets the available workflow templates from custom nodes.
+   * @returns A map of custom_node names and associated template workflow names.
+   */
+  async getWorkflowTemplates(): Promise<{
+    [customNodesName: string]: string[]
+  }> {
+    const res = await this.fetchApi('/workflow_templates')
+    return await res.json()
+  }
+
   /**
    * Gets a list of embedding names
    */

From d09fc63135c53187185f5a006cdc1c46688e0b1b Mon Sep 17 00:00:00 2001
From: bezo97 <bezozo97@gmail.com>
Date: Mon, 23 Dec 2024 23:48:04 +0100
Subject: [PATCH 02/13] configure vite to proxy /workflow_templates route to
 dev server

---
 vite.config.mts | 45 ++++++++++++++++++++++++++-------------------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/vite.config.mts b/vite.config.mts
index 7d454479b8..c6bda643d5 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -2,7 +2,7 @@ import { defineConfig, Plugin } from 'vite'
 import type { UserConfigExport } from 'vitest/config'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
-import dotenv from "dotenv"
+import dotenv from 'dotenv'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
 import Components from 'unplugin-vue-components/vite'
@@ -20,9 +20,9 @@ interface ShimResult {
 }
 
 function isLegacyFile(id: string): boolean {
-  return id.endsWith('.ts') && (
-    id.includes("src/extensions/core") ||
-    id.includes("src/scripts")
+  return (
+    id.endsWith('.ts') &&
+    (id.includes('src/extensions/core') || id.includes('src/scripts'))
   )
 }
 
@@ -43,15 +43,15 @@ function comfyAPIPlugin(): Plugin {
           const shimComment = `// Shim for ${relativePath}\n`
 
           this.emitFile({
-            type: "asset",
+            type: 'asset',
             fileName: shimFileName,
-            source: shimComment + result.exports.join("")
+            source: shimComment + result.exports.join('')
           })
         }
 
         return {
           code: result.code,
-          map: null  // If you're not modifying the source map, return null
+          map: null // If you're not modifying the source map, return null
         }
       }
     }
@@ -64,7 +64,8 @@ function transformExports(code: string, id: string): ShimResult {
   let newCode = code
 
   // Regex to match different types of exports
-  const regex = /export\s+(const|let|var|function|class|async function)\s+([a-zA-Z$_][a-zA-Z\d$_]*)(\s|\()/g
+  const regex =
+    /export\s+(const|let|var|function|class|async function)\s+([a-zA-Z$_][a-zA-Z\d$_]*)(\s|\()/g
   let match
 
   while ((match = regex.exec(code)) !== null) {
@@ -75,7 +76,9 @@ function transformExports(code: string, id: string): ShimResult {
       newCode += `\nwindow.comfyAPI.${moduleName} = window.comfyAPI.${moduleName} || {};`
     }
     newCode += `\nwindow.comfyAPI.${moduleName}.${name} = ${name};`
-    exports.push(`export const ${name} = window.comfyAPI.${moduleName}.${name};\n`)
+    exports.push(
+      `export const ${name} = window.comfyAPI.${moduleName}.${name};\n`
+    )
   }
 
   return {
@@ -88,10 +91,11 @@ function getModuleName(id: string): string {
   // Simple example to derive a module name from the file path
   const parts = id.split('/')
   const fileName = parts[parts.length - 1]
-  return fileName.replace(/\.\w+$/, '')  // Remove file extension
+  return fileName.replace(/\.\w+$/, '') // Remove file extension
 }
 
-const DEV_SERVER_COMFYUI_URL = process.env.DEV_SERVER_COMFYUI_URL || 'http://127.0.0.1:8188'
+const DEV_SERVER_COMFYUI_URL =
+  process.env.DEV_SERVER_COMFYUI_URL || 'http://127.0.0.1:8188'
 
 export default defineConfig({
   base: '',
@@ -99,7 +103,7 @@ export default defineConfig({
     host: VITE_REMOTE_DEV ? '0.0.0.0' : undefined,
     proxy: {
       '/internal': {
-        target: DEV_SERVER_COMFYUI_URL,
+        target: DEV_SERVER_COMFYUI_URL
       },
 
       '/api': {
@@ -111,7 +115,7 @@ export default defineConfig({
             res.end(JSON.stringify([]))
           }
           return null
-        },
+        }
       },
 
       '/ws': {
@@ -119,6 +123,10 @@ export default defineConfig({
         ws: true
       },
 
+      '/workflow_templates': {
+        target: DEV_SERVER_COMFYUI_URL
+      },
+
       '/testsubrouteindex': {
         target: 'http://localhost:5173',
         rewrite: (path) => path.substring('/testsubrouteindex'.length)
@@ -131,7 +139,7 @@ export default defineConfig({
     comfyAPIPlugin(),
 
     Icons({
-      'compiler': 'vue3'
+      compiler: 'vue3'
     }),
 
     Components({
@@ -168,7 +176,9 @@ export default defineConfig({
   },
 
   define: {
-    '__COMFYUI_FRONTEND_VERSION__': JSON.stringify(process.env.npm_package_version)
+    __COMFYUI_FRONTEND_VERSION__: JSON.stringify(
+      process.env.npm_package_version
+    )
   },
 
   resolve: {
@@ -178,9 +188,6 @@ export default defineConfig({
   },
 
   optimizeDeps: {
-    exclude: [
-      '@comfyorg/litegraph',
-      '@comfyorg/comfyui-electron-types'
-    ]
+    exclude: ['@comfyorg/litegraph', '@comfyorg/comfyui-electron-types']
   }
 }) as UserConfigExport

From 6bc78f770b5d35827443c6f5f92d063274d8ec38 Mon Sep 17 00:00:00 2001
From: bezo97 <bezozo97@gmail.com>
Date: Tue, 24 Dec 2024 00:13:36 +0100
Subject: [PATCH 03/13] load workflow template thumbnails and files

---
 .../templates/TemplateWorkflowsContent.vue    | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/templates/TemplateWorkflowsContent.vue b/src/components/templates/TemplateWorkflowsContent.vue
index 9b404ce1f8..60ba9047af 100644
--- a/src/components/templates/TemplateWorkflowsContent.vue
+++ b/src/components/templates/TemplateWorkflowsContent.vue
@@ -6,7 +6,7 @@
       :value="selectedTab.templates"
       :numVisible="4"
       :numScroll="3"
-      :key="selectedTab.id"
+      :key="selectedTab.moduleName"
     >
       <template #item="slotProps">
         <Card>
@@ -17,9 +17,15 @@
                 @click="loadWorkflow(slotProps.data)"
               >
                 <img
+                  v-if="selectedTab.moduleName === 'default'"
                   :src="`templates/${slotProps.data}.jpg`"
                   class="w-64 h-64 rounded-lg object-cover thumbnail"
                 />
+                <img
+                  v-else
+                  :src="`workflow_templates/${selectedTab.moduleName}/${slotProps.data}.jpg`"
+                  class="w-64 h-64 rounded-lg object-cover thumbnail"
+                />
                 <a>
                   <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"
@@ -57,14 +63,14 @@ const { t } = useI18n()
 const loading = ref<string | null>(null)
 
 interface WorkflowTemplatesTab {
-  id: string
+  moduleName: string
   title: string
   templates: string[]
 }
 
 //These default templates are provided by the frontend
 const comfyUITemplates = {
-  id: 'default',
+  moduleName: 'default',
   title: 'ComfyUI',
   templates: ['default', 'image2image', 'upscale', 'flux_schnell']
 }
@@ -79,7 +85,7 @@ onMounted(async () => {
     tabs.value = [
       comfyUITemplates,
       ...Object.entries(workflowTemplates).map(([key, value]) => ({
-        id: key,
+        moduleName: key,
         title: key,
         templates: value
       }))
@@ -97,9 +103,19 @@ onMounted(async () => {
 
 const loadWorkflow = async (id: string) => {
   loading.value = id
-  const json = await fetch(api.fileURL(`templates/${id}.json`)).then((r) =>
-    r.json()
-  )
+  let json
+  if (selectedTab.value.moduleName === 'default') {
+    // Default templates provided by frontend are served on this separate endpoint
+    json = await fetch(api.fileURL(`templates/${id}.json`)).then((r) =>
+      r.json()
+    )
+  } else {
+    json = await fetch(
+      api.fileURL(
+        `workflow_templates/${selectedTab.value.moduleName}/${id}.json`
+      )
+    ).then((r) => r.json())
+  }
   useDialogStore().closeDialog()
   await app.loadGraphData(
     json,

From 70fe90ac6b0d05a3cbd9a7f3d51b713e28a1e91b Mon Sep 17 00:00:00 2001
From: bezo97 <bezozo97@gmail.com>
Date: Sat, 28 Dec 2024 00:48:50 +0100
Subject: [PATCH 04/13] fix review suggestions, fix scrolling with many items

---
 .../templates/TemplateWorkflowsContent.vue    | 40 ++++++++++++-------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/components/templates/TemplateWorkflowsContent.vue b/src/components/templates/TemplateWorkflowsContent.vue
index 60ba9047af..130c13eb24 100644
--- a/src/components/templates/TemplateWorkflowsContent.vue
+++ b/src/components/templates/TemplateWorkflowsContent.vue
@@ -1,8 +1,15 @@
 <template>
-  <div class="flex">
-    <Listbox v-model="selectedTab" :options="tabs" optionLabel="title" />
+  <div class="flex h-96">
+    <Listbox
+      v-model="selectedTab"
+      :options="tabs"
+      optionLabel="title"
+      scroll-height="auto"
+      class="listbox"
+      listStyle="max-height:unset"
+    />
     <Carousel
-      class="carousel"
+      class="carousel justify-center"
       :value="selectedTab.templates"
       :numVisible="4"
       :numScroll="3"
@@ -11,7 +18,7 @@
       <template #item="slotProps">
         <Card>
           <template #header>
-            <div class="flex center justify-center">
+            <div class="flex items-center justify-center">
               <div
                 class="relative overflow-hidden rounded-lg cursor-pointer w-64 h-64"
                 @click="loadWorkflow(slotProps.data)"
@@ -23,7 +30,7 @@
                 />
                 <img
                   v-else
-                  :src="`workflow_templates/${selectedTab.moduleName}/${slotProps.data}.jpg`"
+                  :src="`api/workflow_templates/${selectedTab.moduleName}/${slotProps.data}.jpg`"
                   class="w-64 h-64 rounded-lg object-cover thumbnail"
                 />
                 <a>
@@ -48,19 +55,16 @@
 </template>
 
 <script setup lang="ts">
-import { useDialogStore } from '@/stores/dialogStore'
 import Carousel from 'primevue/carousel'
 import Listbox from 'primevue/listbox'
 import Card from 'primevue/card'
 import ProgressSpinner from 'primevue/progressspinner'
+import { useToast } from 'primevue/usetoast'
 import { onMounted, ref } from 'vue'
+import { useDialogStore } from '@/stores/dialogStore'
 import { app } from '@/scripts/app'
 import { api } from '@/scripts/api'
 import { useI18n } from 'vue-i18n'
-import toast from 'primevue/toast'
-const { t } = useI18n()
-
-const loading = ref<string | null>(null)
 
 interface WorkflowTemplatesTab {
   moduleName: string
@@ -68,16 +72,19 @@ interface WorkflowTemplatesTab {
   templates: string[]
 }
 
+const { t } = useI18n()
+const toast = useToast()
+
 //These default templates are provided by the frontend
-const comfyUITemplates = {
+const comfyUITemplates: WorkflowTemplatesTab = {
   moduleName: 'default',
   title: 'ComfyUI',
   templates: ['default', 'image2image', 'upscale', 'flux_schnell']
 }
 
 const tabs = ref<WorkflowTemplatesTab[]>([comfyUITemplates])
-
 const selectedTab = ref<WorkflowTemplatesTab>(comfyUITemplates)
+const loading = ref<string | null>(null)
 
 onMounted(async () => {
   try {
@@ -111,7 +118,7 @@ const loadWorkflow = async (id: string) => {
     )
   } else {
     json = await fetch(
-      api.fileURL(
+      api.apiURL(
         `workflow_templates/${selectedTab.value.moduleName}/${id}.json`
       )
     ).then((r) => r.json())
@@ -138,6 +145,10 @@ const loadWorkflow = async (id: string) => {
   text-align: center;
 }
 
+.listbox {
+  overflow-y: auto;
+}
+
 .carousel {
   width: 1300px;
 }
@@ -149,7 +160,8 @@ img.thumbnail::before {
   height: 100%;
   background-color: var(--comfy-menu-secondary-bg);
   color: var(--fg-color);
-  content: '🗎';
+  font-family: primeicons, sans-serif;
+  content: '\e958'; /* Document icon from primevue */
   text-align: center;
   align-content: center;
   font-size: 64px;

From 76156fc0f0964abfe29facc75aeef2cbb5f8917d Mon Sep 17 00:00:00 2001
From: bezo97 <bezozo97@gmail.com>
Date: Sat, 28 Dec 2024 00:58:25 +0100
Subject: [PATCH 05/13] amend

---
 src/components/templates/TemplateWorkflowsContent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/templates/TemplateWorkflowsContent.vue b/src/components/templates/TemplateWorkflowsContent.vue
index 130c13eb24..701a082caf 100644
--- a/src/components/templates/TemplateWorkflowsContent.vue
+++ b/src/components/templates/TemplateWorkflowsContent.vue
@@ -119,7 +119,7 @@ const loadWorkflow = async (id: string) => {
   } else {
     json = await fetch(
       api.apiURL(
-        `workflow_templates/${selectedTab.value.moduleName}/${id}.json`
+        `/workflow_templates/${selectedTab.value.moduleName}/${id}.json`
       )
     ).then((r) => r.json())
   }

From 9adf3d0941b50e1dadf97b711310efd14deb0108 Mon Sep 17 00:00:00 2001
From: bezo97 <bezozo97@gmail.com>
Date: Sun, 29 Dec 2024 13:57:18 +0100
Subject: [PATCH 06/13] add previously removed data-testid attributes

---
 src/components/templates/TemplateWorkflowsContent.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/templates/TemplateWorkflowsContent.vue b/src/components/templates/TemplateWorkflowsContent.vue
index 701a082caf..8534d25784 100644
--- a/src/components/templates/TemplateWorkflowsContent.vue
+++ b/src/components/templates/TemplateWorkflowsContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-96">
+  <div class="flex h-96" data-testid="template-workflows-content">
     <Listbox
       v-model="selectedTab"
       :options="tabs"
@@ -16,7 +16,7 @@
       :key="selectedTab.moduleName"
     >
       <template #item="slotProps">
-        <Card>
+        <Card :data-testid="`template-workflow-${slotProps.data}`">
           <template #header>
             <div class="flex items-center justify-center">
               <div

From 3b09513690bb01e830f9bd9ab0e6beba3141f97e Mon Sep 17 00:00:00 2001
From: bezo97 <bezozo97@gmail.com>
Date: Sun, 29 Dec 2024 14:08:35 +0100
Subject: [PATCH 07/13] revert formatting of vite config

---
 vite.config.mts | 43 ++++++++++++++++++++-----------------------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/vite.config.mts b/vite.config.mts
index c6bda643d5..9d94fe5750 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -2,7 +2,7 @@ import { defineConfig, Plugin } from 'vite'
 import type { UserConfigExport } from 'vitest/config'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
-import dotenv from 'dotenv'
+import dotenv from "dotenv"
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
 import Components from 'unplugin-vue-components/vite'
@@ -20,9 +20,9 @@ interface ShimResult {
 }
 
 function isLegacyFile(id: string): boolean {
-  return (
-    id.endsWith('.ts') &&
-    (id.includes('src/extensions/core') || id.includes('src/scripts'))
+  return id.endsWith('.ts') && (
+    id.includes("src/extensions/core") ||
+    id.includes("src/scripts")
   )
 }
 
@@ -43,15 +43,15 @@ function comfyAPIPlugin(): Plugin {
           const shimComment = `// Shim for ${relativePath}\n`
 
           this.emitFile({
-            type: 'asset',
+            type: "asset",
             fileName: shimFileName,
-            source: shimComment + result.exports.join('')
+            source: shimComment + result.exports.join("")
           })
         }
 
         return {
           code: result.code,
-          map: null // If you're not modifying the source map, return null
+          map: null  // If you're not modifying the source map, return null
         }
       }
     }
@@ -64,8 +64,7 @@ function transformExports(code: string, id: string): ShimResult {
   let newCode = code
 
   // Regex to match different types of exports
-  const regex =
-    /export\s+(const|let|var|function|class|async function)\s+([a-zA-Z$_][a-zA-Z\d$_]*)(\s|\()/g
+  const regex = /export\s+(const|let|var|function|class|async function)\s+([a-zA-Z$_][a-zA-Z\d$_]*)(\s|\()/g
   let match
 
   while ((match = regex.exec(code)) !== null) {
@@ -76,9 +75,7 @@ function transformExports(code: string, id: string): ShimResult {
       newCode += `\nwindow.comfyAPI.${moduleName} = window.comfyAPI.${moduleName} || {};`
     }
     newCode += `\nwindow.comfyAPI.${moduleName}.${name} = ${name};`
-    exports.push(
-      `export const ${name} = window.comfyAPI.${moduleName}.${name};\n`
-    )
+    exports.push(`export const ${name} = window.comfyAPI.${moduleName}.${name};\n`)
   }
 
   return {
@@ -91,11 +88,10 @@ function getModuleName(id: string): string {
   // Simple example to derive a module name from the file path
   const parts = id.split('/')
   const fileName = parts[parts.length - 1]
-  return fileName.replace(/\.\w+$/, '') // Remove file extension
+  return fileName.replace(/\.\w+$/, '')  // Remove file extension
 }
 
-const DEV_SERVER_COMFYUI_URL =
-  process.env.DEV_SERVER_COMFYUI_URL || 'http://127.0.0.1:8188'
+const DEV_SERVER_COMFYUI_URL = process.env.DEV_SERVER_COMFYUI_URL || 'http://127.0.0.1:8188'
 
 export default defineConfig({
   base: '',
@@ -103,7 +99,7 @@ export default defineConfig({
     host: VITE_REMOTE_DEV ? '0.0.0.0' : undefined,
     proxy: {
       '/internal': {
-        target: DEV_SERVER_COMFYUI_URL
+        target: DEV_SERVER_COMFYUI_URL,
       },
 
       '/api': {
@@ -115,7 +111,7 @@ export default defineConfig({
             res.end(JSON.stringify([]))
           }
           return null
-        }
+        },
       },
 
       '/ws': {
@@ -139,7 +135,7 @@ export default defineConfig({
     comfyAPIPlugin(),
 
     Icons({
-      compiler: 'vue3'
+      'compiler': 'vue3'
     }),
 
     Components({
@@ -176,9 +172,7 @@ export default defineConfig({
   },
 
   define: {
-    __COMFYUI_FRONTEND_VERSION__: JSON.stringify(
-      process.env.npm_package_version
-    )
+    '__COMFYUI_FRONTEND_VERSION__': JSON.stringify(process.env.npm_package_version)
   },
 
   resolve: {
@@ -188,6 +182,9 @@ export default defineConfig({
   },
 
   optimizeDeps: {
-    exclude: ['@comfyorg/litegraph', '@comfyorg/comfyui-electron-types']
+    exclude: [
+      '@comfyorg/litegraph',
+      '@comfyorg/comfyui-electron-types'
+    ]
   }
-}) as UserConfigExport
+}) as UserConfigExport
\ No newline at end of file

From 0c99e15de3044e96eb42609dc32c67c301a25b9d Mon Sep 17 00:00:00 2001
From: bezo97 <bezozo97@gmail.com>
Date: Sun, 29 Dec 2024 14:54:59 +0100
Subject: [PATCH 08/13] refactor items into TemplateWorkflowCard component

---
 .../templates/TemplateWorkflowCard.vue        | 56 ++++++++++++++++
 .../templates/TemplateWorkflowsContent.vue    | 66 +++----------------
 2 files changed, 64 insertions(+), 58 deletions(-)
 create mode 100644 src/components/templates/TemplateWorkflowCard.vue

diff --git a/src/components/templates/TemplateWorkflowCard.vue b/src/components/templates/TemplateWorkflowCard.vue
new file mode 100644
index 0000000000..6834c13794
--- /dev/null
+++ b/src/components/templates/TemplateWorkflowCard.vue
@@ -0,0 +1,56 @@
+<template>
+  <Card :data-testid="`template-workflow-${props.workflowName}`">
+    <template #header>
+      <div class="flex items-center justify-center">
+        <div
+          class="relative overflow-hidden rounded-lg cursor-pointer w-64 h-64"
+        >
+          <img
+            :src="
+              props.moduleName === 'default'
+                ? `templates/${props.workflowName}.jpg`
+                : `api/workflow_templates/${props.moduleName}/${props.workflowName}.jpg`
+            "
+            class="w-64 h-64 rounded-lg object-cover thumbnail"
+          />
+          <a>
+            <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"
+            >
+              <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"
+          />
+        </div>
+      </div>
+    </template>
+    <template #subtitle>{{
+      $t(`templateWorkflows.template.${props.workflowName}`, props.workflowName)
+    }}</template>
+  </Card>
+</template>
+
+<script setup lang="ts">
+import Card from 'primevue/card'
+import ProgressSpinner from 'primevue/progressspinner'
+
+const props = defineProps<{
+  moduleName: string
+  workflowName: string
+  loading: boolean
+}>()
+</script>
+
+<style lang="css" scoped>
+.p-card {
+  --p-card-body-padding: 10px 0 0 0;
+  overflow: hidden;
+}
+
+:deep(.p-card-subtitle) {
+  text-align: center;
+}
+</style>
diff --git a/src/components/templates/TemplateWorkflowsContent.vue b/src/components/templates/TemplateWorkflowsContent.vue
index 8534d25784..695dec60ad 100644
--- a/src/components/templates/TemplateWorkflowsContent.vue
+++ b/src/components/templates/TemplateWorkflowsContent.vue
@@ -16,39 +16,13 @@
       :key="selectedTab.moduleName"
     >
       <template #item="slotProps">
-        <Card :data-testid="`template-workflow-${slotProps.data}`">
-          <template #header>
-            <div class="flex items-center justify-center">
-              <div
-                class="relative overflow-hidden rounded-lg cursor-pointer w-64 h-64"
-                @click="loadWorkflow(slotProps.data)"
-              >
-                <img
-                  v-if="selectedTab.moduleName === 'default'"
-                  :src="`templates/${slotProps.data}.jpg`"
-                  class="w-64 h-64 rounded-lg object-cover thumbnail"
-                />
-                <img
-                  v-else
-                  :src="`api/workflow_templates/${selectedTab.moduleName}/${slotProps.data}.jpg`"
-                  class="w-64 h-64 rounded-lg object-cover thumbnail"
-                />
-                <a>
-                  <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"
-                  >
-                    <i class="pi pi-play-circle" style="color: white"></i>
-                  </div>
-                </a>
-                <ProgressSpinner
-                  v-if="loading === slotProps.data"
-                  class="absolute inset-0 z-1 w-3/12 h-full"
-                />
-              </div>
-            </div>
-          </template>
-          <template #subtitle>{{ slotProps.data }}</template>
-        </Card>
+        <div @click="loadWorkflow(slotProps.data)">
+          <TemplateWorkflowCard
+            :moduleName="selectedTab.moduleName"
+            :workflowName="slotProps.data"
+            :loading="slotProps.data === loading"
+          />
+        </div>
       </template>
     </Carousel>
   </div>
@@ -57,14 +31,13 @@
 <script setup lang="ts">
 import Carousel from 'primevue/carousel'
 import Listbox from 'primevue/listbox'
-import Card from 'primevue/card'
-import ProgressSpinner from 'primevue/progressspinner'
 import { useToast } from 'primevue/usetoast'
 import { onMounted, ref } from 'vue'
 import { useDialogStore } from '@/stores/dialogStore'
 import { app } from '@/scripts/app'
 import { api } from '@/scripts/api'
 import { useI18n } from 'vue-i18n'
+import TemplateWorkflowCard from '@/components/templates/TemplateWorkflowCard.vue'
 
 interface WorkflowTemplatesTab {
   moduleName: string
@@ -136,15 +109,6 @@ const loadWorkflow = async (id: string) => {
 </script>
 
 <style lang="css" scoped>
-.p-card {
-  --p-card-body-padding: 10px 0 0 0;
-  overflow: hidden;
-}
-
-:deep(.p-card-subtitle) {
-  text-align: center;
-}
-
 .listbox {
   overflow-y: auto;
 }
@@ -152,18 +116,4 @@ const loadWorkflow = async (id: string) => {
 .carousel {
   width: 1300px;
 }
-
-/* Fallback graphics for workflows that don't have an image. */
-img.thumbnail::before {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: var(--comfy-menu-secondary-bg);
-  color: var(--fg-color);
-  font-family: primeicons, sans-serif;
-  content: '\e958'; /* Document icon from primevue */
-  text-align: center;
-  align-content: center;
-  font-size: 64px;
-}
 </style>

From 2430d97feb8e83b3d9ccee9c178cf1fa117e3982 Mon Sep 17 00:00:00 2001
From: bezo97 <bezozo97@gmail.com>
Date: Sun, 29 Dec 2024 16:00:59 +0100
Subject: [PATCH 09/13] show document icon when a workflow thumbnail is not
 available

---
 src/components/templates/TemplateWorkflowCard.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/templates/TemplateWorkflowCard.vue b/src/components/templates/TemplateWorkflowCard.vue
index 6834c13794..993187b94e 100644
--- a/src/components/templates/TemplateWorkflowCard.vue
+++ b/src/components/templates/TemplateWorkflowCard.vue
@@ -6,13 +6,18 @@
           class="relative overflow-hidden rounded-lg cursor-pointer w-64 h-64"
         >
           <img
+            v-if="!imageError"
             :src="
               props.moduleName === 'default'
                 ? `templates/${props.workflowName}.jpg`
                 : `api/workflow_templates/${props.moduleName}/${props.workflowName}.jpg`
             "
+            @error="imageError = true"
             class="w-64 h-64 rounded-lg object-cover thumbnail"
           />
+          <div v-else class="w-64 h-64 content-center text-center">
+            <i class="pi pi-file" style="font-size: 4rem"></i>
+          </div>
           <a>
             <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"
@@ -36,12 +41,15 @@
 <script setup lang="ts">
 import Card from 'primevue/card'
 import ProgressSpinner from 'primevue/progressspinner'
+import { ref } from 'vue'
 
 const props = defineProps<{
   moduleName: string
   workflowName: string
   loading: boolean
 }>()
+
+const imageError = ref(false)
 </script>
 
 <style lang="css" scoped>

From 686e0244b80eb39732c1a53e4a643c54a9109410 Mon Sep 17 00:00:00 2001
From: bezo97 <bezozo97@gmail.com>
Date: Sun, 29 Dec 2024 17:19:23 +0100
Subject: [PATCH 10/13] use store for workflow templates

---
 .../templates/TemplateWorkflowsContent.vue    | 71 +++++++++----------
 src/stores/workflowTemplatesStore.ts          | 30 ++++++++
 2 files changed, 63 insertions(+), 38 deletions(-)
 create mode 100644 src/stores/workflowTemplatesStore.ts

diff --git a/src/components/templates/TemplateWorkflowsContent.vue b/src/components/templates/TemplateWorkflowsContent.vue
index 695dec60ad..f6435c06ec 100644
--- a/src/components/templates/TemplateWorkflowsContent.vue
+++ b/src/components/templates/TemplateWorkflowsContent.vue
@@ -1,13 +1,19 @@
 <template>
   <div class="flex h-96" data-testid="template-workflows-content">
-    <Listbox
-      v-model="selectedTab"
-      :options="tabs"
-      optionLabel="title"
-      scroll-height="auto"
-      class="listbox"
-      listStyle="max-height:unset"
-    />
+    <div class="relative">
+      <ProgressSpinner
+        v-if="!workflowTemplatesStore.isLoaded"
+        class="absolute w-8 h-full inset-0"
+      />
+      <Listbox
+        v-model="selectedTab"
+        :options="tabs"
+        optionLabel="title"
+        scroll-height="auto"
+        class="overflow-y-auto w-64 h-full"
+        listStyle="max-height:unset"
+      />
+    </div>
     <Carousel
       class="carousel justify-center"
       :value="selectedTab.templates"
@@ -20,7 +26,7 @@
           <TemplateWorkflowCard
             :moduleName="selectedTab.moduleName"
             :workflowName="slotProps.data"
-            :loading="slotProps.data === loading"
+            :loading="slotProps.data === workflowLoading"
           />
         </div>
       </template>
@@ -31,13 +37,14 @@
 <script setup lang="ts">
 import Carousel from 'primevue/carousel'
 import Listbox from 'primevue/listbox'
-import { useToast } from 'primevue/usetoast'
-import { onMounted, ref } from 'vue'
+import ProgressSpinner from 'primevue/progressspinner'
+import { computed, onMounted, ref } from 'vue'
 import { useDialogStore } from '@/stores/dialogStore'
 import { app } from '@/scripts/app'
 import { api } from '@/scripts/api'
 import { useI18n } from 'vue-i18n'
 import TemplateWorkflowCard from '@/components/templates/TemplateWorkflowCard.vue'
+import { useWorkflowTemplatesStore } from '@/stores/workflowTemplatesStore'
 
 interface WorkflowTemplatesTab {
   moduleName: string
@@ -46,7 +53,6 @@ interface WorkflowTemplatesTab {
 }
 
 const { t } = useI18n()
-const toast = useToast()
 
 //These default templates are provided by the frontend
 const comfyUITemplates: WorkflowTemplatesTab = {
@@ -55,34 +61,27 @@ const comfyUITemplates: WorkflowTemplatesTab = {
   templates: ['default', 'image2image', 'upscale', 'flux_schnell']
 }
 
-const tabs = ref<WorkflowTemplatesTab[]>([comfyUITemplates])
+const workflowTemplatesStore = useWorkflowTemplatesStore()
 const selectedTab = ref<WorkflowTemplatesTab>(comfyUITemplates)
-const loading = ref<string | null>(null)
+const workflowLoading = ref<string | null>(null)
+
+const tabs = computed<WorkflowTemplatesTab[]>(() => {
+  return [
+    comfyUITemplates,
+    ...Object.entries(workflowTemplatesStore.items).map(([key, value]) => ({
+      moduleName: key,
+      title: key,
+      templates: value
+    }))
+  ]
+})
 
 onMounted(async () => {
-  try {
-    const workflowTemplates = await api.getWorkflowTemplates()
-    tabs.value = [
-      comfyUITemplates,
-      ...Object.entries(workflowTemplates).map(([key, value]) => ({
-        moduleName: key,
-        title: key,
-        templates: value
-      }))
-    ]
-  } catch (error) {
-    console.error('Error fetching workflow templates:', error)
-    toast.add({
-      severity: 'error',
-      summary: 'Error',
-      detail: 'Failed to fetch workflow templates',
-      life: 5000
-    })
-  }
+  await workflowTemplatesStore.loadWorkflowTemplates()
 })
 
 const loadWorkflow = async (id: string) => {
-  loading.value = id
+  workflowLoading.value = id
   let json
   if (selectedTab.value.moduleName === 'default') {
     // Default templates provided by frontend are served on this separate endpoint
@@ -109,10 +108,6 @@ const loadWorkflow = async (id: string) => {
 </script>
 
 <style lang="css" scoped>
-.listbox {
-  overflow-y: auto;
-}
-
 .carousel {
   width: 1300px;
 }
diff --git a/src/stores/workflowTemplatesStore.ts b/src/stores/workflowTemplatesStore.ts
new file mode 100644
index 0000000000..1c57216421
--- /dev/null
+++ b/src/stores/workflowTemplatesStore.ts
@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { api } from '@/scripts/api'
+
+export const useWorkflowTemplatesStore = defineStore(
+  'workflowTemplates',
+  () => {
+    const items = ref<{
+      [customNodesName: string]: string[]
+    }>({})
+    const isLoaded = ref(false)
+
+    async function loadWorkflowTemplates() {
+      try {
+        if (!isLoaded.value) {
+          items.value = await api.getWorkflowTemplates()
+          isLoaded.value = true
+        }
+      } catch (error) {
+        console.error('Error fetching workflow templates:', error)
+      }
+    }
+
+    return {
+      items,
+      isLoaded,
+      loadWorkflowTemplates
+    }
+  }
+)

From e8d70993679b365b1e57995cd855beac917be5fd Mon Sep 17 00:00:00 2001
From: bezo97 <bezozo97@gmail.com>
Date: Sun, 29 Dec 2024 19:45:24 +0100
Subject: [PATCH 11/13] responsive carousel

---
 .../templates/TemplateWorkflowsContent.vue    | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/templates/TemplateWorkflowsContent.vue b/src/components/templates/TemplateWorkflowsContent.vue
index f6435c06ec..17d66793b1 100644
--- a/src/components/templates/TemplateWorkflowsContent.vue
+++ b/src/components/templates/TemplateWorkflowsContent.vue
@@ -17,6 +17,7 @@
     <Carousel
       class="carousel justify-center"
       :value="selectedTab.templates"
+      :responsive-options="responsiveOptions"
       :numVisible="4"
       :numScroll="3"
       :key="selectedTab.moduleName"
@@ -61,6 +62,24 @@ const comfyUITemplates: WorkflowTemplatesTab = {
   templates: ['default', 'image2image', 'upscale', 'flux_schnell']
 }
 
+const responsiveOptions = ref([
+  {
+    breakpoint: '1660px',
+    numVisible: 3,
+    numScroll: 2
+  },
+  {
+    breakpoint: '1360px',
+    numVisible: 2,
+    numScroll: 1
+  },
+  {
+    breakpoint: '960px',
+    numVisible: 1,
+    numScroll: 1
+  }
+])
+
 const workflowTemplatesStore = useWorkflowTemplatesStore()
 const selectedTab = ref<WorkflowTemplatesTab>(comfyUITemplates)
 const workflowLoading = ref<string | null>(null)
@@ -109,6 +128,6 @@ const loadWorkflow = async (id: string) => {
 
 <style lang="css" scoped>
 .carousel {
-  width: 1300px;
+  width: 66vw;
 }
 </style>

From 5835c4420494715c4214b0ef31353f38b29ccb4b Mon Sep 17 00:00:00 2001
From: bezo97 <bezozo97@gmail.com>
Date: Sun, 29 Dec 2024 20:08:13 +0100
Subject: [PATCH 12/13] avoid trying to translate custom template names

---
 .../templates/TemplateWorkflowCard.vue          | 17 ++++++++++++++---
 .../templates/TemplateWorkflowsContent.vue      | 11 +++++------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/templates/TemplateWorkflowCard.vue b/src/components/templates/TemplateWorkflowCard.vue
index 993187b94e..518f51b63a 100644
--- a/src/components/templates/TemplateWorkflowCard.vue
+++ b/src/components/templates/TemplateWorkflowCard.vue
@@ -32,9 +32,20 @@
         </div>
       </div>
     </template>
-    <template #subtitle>{{
-      $t(`templateWorkflows.template.${props.workflowName}`, props.workflowName)
-    }}</template>
+    <template #subtitle>
+      <!--Default templates have translations-->
+      <template v-if="props.moduleName === 'default'">
+        {{
+          $t(
+            `templateWorkflows.template.${props.workflowName}`,
+            props.workflowName
+          )
+        }}
+      </template>
+      <template v-else>
+        {{ props.workflowName }}
+      </template>
+    </template>
   </Card>
 </template>
 
diff --git a/src/components/templates/TemplateWorkflowsContent.vue b/src/components/templates/TemplateWorkflowsContent.vue
index 17d66793b1..7141506434 100644
--- a/src/components/templates/TemplateWorkflowsContent.vue
+++ b/src/components/templates/TemplateWorkflowsContent.vue
@@ -115,12 +115,11 @@ const loadWorkflow = async (id: string) => {
     ).then((r) => r.json())
   }
   useDialogStore().closeDialog()
-  await app.loadGraphData(
-    json,
-    true,
-    true,
-    t(`templateWorkflows.template.${id}`, id)
-  )
+  const workflowName =
+    selectedTab.value.moduleName === 'default'
+      ? t(`templateWorkflows.template.${id}`, id)
+      : id
+  await app.loadGraphData(json, true, true, workflowName)
 
   return false
 }

From 75e058466ec65e464046de126a0522abfc991271 Mon Sep 17 00:00:00 2001
From: bezo97 <bezozo97@gmail.com>
Date: Sun, 29 Dec 2024 20:25:23 +0100
Subject: [PATCH 13/13] handle listbox deselect

---
 src/components/templates/TemplateWorkflowsContent.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/templates/TemplateWorkflowsContent.vue b/src/components/templates/TemplateWorkflowsContent.vue
index 7141506434..02c1d0f3aa 100644
--- a/src/components/templates/TemplateWorkflowsContent.vue
+++ b/src/components/templates/TemplateWorkflowsContent.vue
@@ -6,7 +6,8 @@
         class="absolute w-8 h-full inset-0"
       />
       <Listbox
-        v-model="selectedTab"
+        :model-value="selectedTab"
+        @update:model-value="handleTabSelection"
         :options="tabs"
         optionLabel="title"
         scroll-height="auto"
@@ -99,6 +100,12 @@ onMounted(async () => {
   await workflowTemplatesStore.loadWorkflowTemplates()
 })
 
+const handleTabSelection = (selection: WorkflowTemplatesTab | null) => {
+  //Listbox allows deselecting so this special case is ignored here
+  if (selection !== selectedTab.value && selection !== null)
+    selectedTab.value = selection
+}
+
 const loadWorkflow = async (id: string) => {
   workflowLoading.value = id
   let json