Use index.json to load workflow templates (#2803)

browser_tests/helpers/templates.ts

@@ -1,8 +1,10 @@
 import { Locator, Page } from '@playwright/test'
 import path from 'path'
 
-import { CORE_TEMPLATES } from '../../src/constants/coreTemplates'
-import { TemplateInfo } from '../../src/types/workflowTemplateTypes'
+import {
+  TemplateInfo,
+  WorkflowTemplates
+} from '../../src/types/workflowTemplateTypes'
 
 export class ComfyTemplates {
   readonly content: Locator
@@ -18,8 +20,11 @@ export class ComfyTemplates {
       .click()
   }
 
-  getAllTemplates(): TemplateInfo[] {
-    return CORE_TEMPLATES.flatMap((category) => category.templates)
+  async getAllTemplates(): Promise<TemplateInfo[]> {
+    const templates: WorkflowTemplates[] = await this.page.evaluate(() =>
+      window['app'].api.getCoreWorkflowTemplates()
+    )
+    return templates.flatMap((t) => t.templates)
   }
 
   getTemplatePath(filename: string): string {

browser_tests/templates.spec.ts

@@ -12,7 +12,8 @@ test.describe('Templates', () => {
   test('should have a JSON workflow file for each template', async ({
     comfyPage
   }) => {
-    for (const template of comfyPage.templates.getAllTemplates()) {
+    const templates = await comfyPage.templates.getAllTemplates()
+    for (const template of templates) {
       const workflowPath = comfyPage.templates.getTemplatePath(
         `${template.name}.json`
       )
@@ -26,7 +27,8 @@ test.describe('Templates', () => {
   test('should have all required thumbnail media for each template', async ({
     comfyPage
   }) => {
-    for (const template of comfyPage.templates.getAllTemplates()) {
+    const templates = await comfyPage.templates.getAllTemplates()
+    for (const template of templates) {
       const { name, mediaSubtype, thumbnailVariant } = template
       const baseMedia = `${name}-1.${mediaSubtype}`
       const basePath = comfyPage.templates.getTemplatePath(baseMedia)

src/components/templates/TemplateWorkflowsContent.vue

@@ -20,7 +20,7 @@
         class="absolute translate-x-0 top-0 left-0 h-full w-80 shadow-md z-5 transition-transform duration-300 ease-in-out"
       >
         <ProgressSpinner
-          v-if="!workflowTemplatesStore.isLoaded"
+          v-if="!workflowTemplatesStore.isLoaded || !isReady"
           class="absolute w-8 h-full inset-0"
         />
         <TemplateWorkflowsSideNav
@@ -36,7 +36,7 @@
           'pl-8': !isSideNavOpen && isSmallScreen
         }"
       >
-        <div v-if="selectedTab" class="flex flex-col px-12 pb-4">
+        <div v-if="isReady && selectedTab" class="flex flex-col px-12 pb-4">
           <div class="py-3 text-left">
             <h2 class="text-lg">{{ selectedTab.title }}</h2>
           </div>
@@ -96,9 +96,13 @@ const { isReady } = useAsyncState(
   null
 )
 
-const selectedTab = ref<WorkflowTemplates | null>(
-  workflowTemplatesStore.defaultTemplate
-)
+const selectedTab = ref<WorkflowTemplates | null>()
+const selectFirstTab = () => {
+  const firstTab = workflowTemplatesStore.groupedTemplates[0].modules[0]
+  handleTabSelection(firstTab)
+}
+watch(isReady, selectFirstTab, { once: true })
+
 const workflowLoading = ref<string | null>(null)
 
 const tabs = computed(() => workflowTemplatesStore.groupedTemplates)

src/scripts/api.ts

@@ -29,6 +29,7 @@ import {
   type ComfyNodeDef,
   validateComfyNodeDef
 } from '@/schemas/nodeDefSchema'
+import { WorkflowTemplates } from '@/types/workflowTemplateTypes'
 
 interface QueuePromptRequestBody {
   client_id: string
@@ -414,6 +415,14 @@ export class ComfyApi extends EventTarget {
     return await res.json()
   }
 
+  /**
+   * Gets the index of core workflow templates.
+   */
+  async getCoreWorkflowTemplates(): Promise<WorkflowTemplates[]> {
+    const res = await axios.get('/templates/index.json')
+    return res.status === 200 ? res.data : []
+  }
+
   /**
    * Gets a list of embedding names
    */

src/stores/workflowTemplatesStore.ts

@@ -2,7 +2,6 @@ import { groupBy } from 'lodash'
 import { defineStore } from 'pinia'
 import { computed, ref, shallowRef } from 'vue'
 
-import { CORE_TEMPLATES } from '@/constants/coreTemplates'
 import { api } from '@/scripts/api'
 import type {
   TemplateGroup,
@@ -13,12 +12,12 @@ export const useWorkflowTemplatesStore = defineStore(
   'workflowTemplates',
   () => {
     const customTemplates = shallowRef<{ [moduleName: string]: string[] }>({})
+    const coreTemplates = shallowRef<WorkflowTemplates[]>([])
     const isLoaded = ref(false)
-    const defaultTemplate: WorkflowTemplates = CORE_TEMPLATES[0]
 
     const groupedTemplates = computed<TemplateGroup[]>(() => {
       const allTemplates = [
-        ...CORE_TEMPLATES,
+        ...coreTemplates.value,
         ...Object.entries(customTemplates.value).map(
           ([moduleName, templates]) => ({
             moduleName,
@@ -44,6 +43,7 @@ export const useWorkflowTemplatesStore = defineStore(
       try {
         if (!isLoaded.value) {
           customTemplates.value = await api.getWorkflowTemplates()
+          coreTemplates.value = await api.getCoreWorkflowTemplates()
           isLoaded.value = true
         }
       } catch (error) {
@@ -53,7 +53,6 @@ export const useWorkflowTemplatesStore = defineStore(
 
     return {
       groupedTemplates,
-      defaultTemplate,
       isLoaded,
       loadWorkflowTemplates
     }