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

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
     }