diff --git a/browser_tests/dialog.spec.ts b/browser_tests/dialog.spec.ts index dcc20afd57..e17234c621 100644 --- a/browser_tests/dialog.spec.ts +++ b/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 ({ diff --git a/browser_tests/fixtures/ComfyPage.ts b/browser_tests/fixtures/ComfyPage.ts index e6544972d6..2f59659002 100644 --- a/browser_tests/fixtures/ComfyPage.ts +++ b/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) diff --git a/src/constants/coreSettings.ts b/src/constants/coreSettings.ts index 2c171c98a2..3f5f2a971e 100644 --- a/src/constants/coreSettings.ts +++ b/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' } ] diff --git a/src/scripts/app.ts b/src/scripts/app.ts index 7ff50749e0..c383fb82d2 100644 --- a/src/scripts/app.ts +++ b/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() diff --git a/src/services/workflowService.ts b/src/services/workflowService.ts index cec865bad9..35c79d39b5 100644 --- a/src/services/workflowService.ts +++ b/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,