Add tutorial workflow function for new desktop users (#2315)

Co-authored-by: huchenlei <huchenlei@proton.me>

browser_tests/dialog.spec.ts

@@ -120,6 +120,14 @@ test.describe('Missing models warning', () => {
     await expect(missingModelsWarning).not.toBeVisible()
   })
 
+  test('should show on tutorial workflow', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.TutorialCompleted', false)
+    await comfyPage.setup({ clearStorage: true })
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
+    expect(await comfyPage.getSetting('Comfy.TutorialCompleted')).toBe(true)
+  })
+
   // Flaky test after parallelization
   // https://github.com/Comfy-Org/ComfyUI_frontend/pull/1400
   test.skip('Should download missing model when clicking download button', async ({

browser_tests/fixtures/ComfyPage.ts

@@ -904,7 +904,9 @@ export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({
         'Comfy.NodeBadge.NodeSourceBadgeMode': NodeBadgeMode.None,
         // Disable tooltips by default to avoid flakiness.
         'Comfy.EnableTooltips': false,
-        'Comfy.userId': userId
+        'Comfy.userId': userId,
+        // Set tutorial completed to true to avoid loading the tutorial workflow.
+        'Comfy.TutorialCompleted': true
       })
     } catch (e) {
       console.error(e)

src/constants/coreSettings.ts

@@ -708,5 +708,12 @@ export const CORE_SETTINGS: SettingParams[] = [
     defaultValue: 'after',
     options: ['before', 'after'],
     versionModified: '1.6.10'
+  },
+  {
+    id: 'Comfy.TutorialCompleted',
+    name: 'Tutorial completed',
+    type: 'hidden',
+    defaultValue: false,
+    versionAdded: '1.8.7'
   }
 ]

src/scripts/app.ts

@@ -1061,7 +1061,18 @@ export class ComfyApp {
 
     // We failed to restore a workflow so load the default
     if (!restored) {
-      await this.loadGraphData()
+      const settingStore = useSettingStore()
+
+      // If tutorial is not completed, load the tutorial workflow
+      if (!settingStore.get('Comfy.TutorialCompleted')) {
+        await settingStore.set('Comfy.TutorialCompleted', true)
+        // Load model folders to ensure the missing models' corresponding folders
+        // can be correctly identified.
+        await useModelStore().loadModelFolders()
+        await useWorkflowService().loadTutorialWorkflow()
+      } else {
+        await this.loadGraphData()
+      }
     }
 
     this.#addDrawNodeHandler()

src/services/workflowService.ts

@@ -2,6 +2,7 @@ import { LGraphCanvas } from '@comfyorg/litegraph'
 import { toRaw } from 'vue'
 
 import { t } from '@/i18n'
+import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { blankGraph, defaultGraph } from '@/scripts/defaultGraph'
 import { downloadBlob } from '@/scripts/utils'
@@ -121,6 +122,18 @@ export const useWorkflowService = () => {
     await app.loadGraphData(defaultGraph)
   }
 
+  /**
+   * Load the tutorial workflow
+   */
+  const loadTutorialWorkflow = async () => {
+    const tutorialWorkflow = await fetch(
+      api.fileURL('/templates/default.json')
+    ).then((r) => r.json())
+    await app.loadGraphData(tutorialWorkflow, false, false, 'tutorial', {
+      showMissingModelsDialog: true
+    })
+  }
+
   /**
    * Load a blank workflow
    */
@@ -366,6 +379,7 @@ export const useWorkflowService = () => {
     saveWorkflow,
     loadDefaultWorkflow,
     loadBlankWorkflow,
+    loadTutorialWorkflow,
     reloadCurrentWorkflow,
     openWorkflow,
     closeWorkflow,