[3d] add output preview screen for load3d node

Co-authored-by: github-actions <github-actions@github.com>

.cursorrules

@@ -15,7 +15,7 @@ const folderStructure = `
 src/
   components/
   constants/
-  hooks/
+  composables/
   views/
   stores/
   services/

.github/workflows/release.yaml

@@ -40,9 +40,10 @@ jobs:
           files: |
             dist.zip
           tag_name: v${{ steps.current_version.outputs.version }}
-          draft: true
+          draft: false
           prerelease: false
           make_latest: "true"
+          generate_release_notes: true
   publish_types:
     runs-on: ubuntu-latest
     if: >

.gitignore

@@ -18,6 +18,7 @@ dist-ssr
 !.vscode/extensions.json
 !.vscode/tailwind.json
 !.vscode/settings.json.default
+!.vscode/launch.json.default
 .idea
 .DS_Store
 *.suo

.vscode/launch.json.default

@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome on frontend dev",
+            "url": "http://localhost:5173",
+            "webRoot": "${workspaceFolder}/src",
+            "sourceMaps": true,
+        }
+    ]
+}

browser_tests/assets/default.json

@@ -114,7 +114,7 @@
         { "name": "VAE", "type": "VAE", "links": [8], "slot_index": 2 }
       ],
       "properties": {},
-      "widgets_values": ["v1-5-pruned-emaonly.ckpt"]
+      "widgets_values": ["v1-5-pruned-emaonly-fp16.safetensors"]
     }
   ],
   "links": [

browser_tests/assets/group_node_identical_nodes_hidden_inputs.json

@@ -0,0 +1,163 @@
+{
+  "last_node_id": 19,
+  "last_link_id": 14,
+  "nodes": [
+    {
+      "id": 19,
+      "type": "workflow>two_VAE_decode",
+      "pos": [
+        1368.800048828125,
+        768.7999877929688
+      ],
+      "size": [
+        418.1999816894531,
+        86
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "VAEDecode IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {}
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [
+        0,
+        0
+      ]
+    },
+    "node_versions": {},
+    "ue_links": [],
+    "groupNodes": {
+      "two_VAE_decode": {
+        "nodes": [
+          {
+            "id": -1,
+            "type": "VAEDecode",
+            "pos": [
+              1368.800048828125,
+              768.7999877929688
+            ],
+            "size": [
+              210,
+              46
+            ],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "samples",
+                "type": "LATENT",
+                "link": null,
+                "localized_name": "samples"
+              },
+              {
+                "name": "vae",
+                "type": "VAE",
+                "link": null,
+                "localized_name": "vae"
+              }
+            ],
+            "outputs": [
+              {
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "links": null,
+                "localized_name": "IMAGE"
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "VAEDecode"
+            },
+            "index": 0
+          },
+          {
+            "id": -1,
+            "type": "VAEDecode",
+            "pos": [
+              1368.800048828125,
+              873.7999877929688
+            ],
+            "size": [
+              210,
+              46
+            ],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "name": "samples",
+                "type": "LATENT",
+                "link": null,
+                "localized_name": "samples"
+              },
+              {
+                "name": "vae",
+                "type": "VAE",
+                "link": null,
+                "localized_name": "vae"
+              }
+            ],
+            "outputs": [
+              {
+                "name": "IMAGE",
+                "type": "IMAGE",
+                "links": null,
+                "localized_name": "IMAGE"
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "VAEDecode"
+            },
+            "index": 1
+          }
+        ],
+        "links": [],
+        "external": [],
+        "config": {
+          "1": {
+            "input": {
+              "samples": {
+                "visible": false
+              },
+              "vae": {
+                "visible": false
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/remote_widget.json

@@ -0,0 +1,48 @@
+{
+  "last_node_id": 15,
+  "last_link_id": 10,
+  "nodes": [
+    {
+      "id": 15,
+      "type": "DevToolsRemoteWidgetNode",
+      "pos": [
+        495,
+        735
+      ],
+      "size": [
+        315,
+        58
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "DevToolsRemoteWidgetNode"
+      },
+      "widgets_values": [
+        "v1-5-pruned-emaonly-fp16.safetensors"
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.8008869919566275,
+      "offset": [
+        538.9801226576359,
+        -55.24554581806672
+      ]
+    }
+  },
+  "version": 0.4
+}

browser_tests/assets/widgets/boolean_widget.json

@@ -0,0 +1,35 @@
+{
+  "last_node_id": 11,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 11,
+      "type": "DevToolsNodeWithBooleanInput",
+      "pos": [
+        0,
+        30
+      ],
+      "size": [
+        315,
+        58
+      ],
+      "flags": {
+        "collapsed": false
+      },
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "DevToolsNodeWithBooleanInput"
+      },
+      "widgets_values": [
+        false
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "version": 0.4
+}

browser_tests/dialog.spec.ts

@@ -1,4 +1,4 @@
-import { expect } from '@playwright/test'
+import { Locator, expect } from '@playwright/test'
 
 import { Keybinding } from '../src/types/keyBindingTypes'
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
@@ -66,9 +66,71 @@ test.describe('Missing models warning', () => {
     }, comfyPage.url)
   })
 
+  test('Should display a warning when missing models are found', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('missing_models')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
+
+    const downloadButton = missingModelsWarning.getByLabel('Download')
+    await expect(downloadButton).toBeVisible()
+  })
+
+  test('Should not display a warning when no missing models are found', async ({
+    comfyPage
+  }) => {
+    const modelFoldersRes = {
+      status: 200,
+      body: JSON.stringify([
+        {
+          name: 'clip',
+          folders: ['ComfyUI/models/clip']
+        }
+      ])
+    }
+    comfyPage.page.route(
+      '**/api/experiment/models',
+      (route) => route.fulfill(modelFoldersRes),
+      { times: 1 }
+    )
+
+    // Reload page to trigger indexing of model folders
+    await comfyPage.setup()
+
+    const clipModelsRes = {
+      status: 200,
+      body: JSON.stringify([
+        {
+          name: 'fake_model.safetensors',
+          pathIndex: 0
+        }
+      ])
+    }
+    comfyPage.page.route(
+      '**/api/experiment/models/clip',
+      (route) => route.fulfill(clipModelsRes),
+      { times: 1 }
+    )
+
+    await comfyPage.loadWorkflow('missing_models')
+
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    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 display a warning when missing models are found', async ({
+  test.skip('Should download missing model when clicking download button', async ({
     comfyPage
   }) => {
     // The fake_model.safetensors is served by
@@ -86,6 +148,49 @@ test.describe('Missing models warning', () => {
     const download = await downloadPromise
     expect(download.suggestedFilename()).toBe('fake_model.safetensors')
   })
+
+  test.describe('Do not show again checkbox', () => {
+    let checkbox: Locator
+    let closeButton: Locator
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.setSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning',
+        true
+      )
+      await comfyPage.loadWorkflow('missing_models')
+
+      checkbox = comfyPage.page.getByLabel("Don't show this again")
+      closeButton = comfyPage.page.getByLabel('Close')
+    })
+
+    test('Should disable warning dialog when checkbox is checked', async ({
+      comfyPage
+    }) => {
+      await checkbox.click()
+      const changeSettingPromise = comfyPage.page.waitForRequest(
+        '**/api/settings/Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      await closeButton.click()
+      await changeSettingPromise
+
+      const settingValue = await comfyPage.getSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      expect(settingValue).toBe(false)
+    })
+
+    test('Should keep warning dialog enabled when checkbox is unchecked', async ({
+      comfyPage
+    }) => {
+      await closeButton.click()
+
+      const settingValue = await comfyPage.getSetting(
+        'Comfy.Workflow.ShowMissingModelsWarning'
+      )
+      expect(settingValue).toBe(true)
+    })
+  })
 })
 
 test.describe('Settings', () => {
@@ -148,7 +253,7 @@ test.describe('Settings', () => {
 
     // Save keybinding
     const saveButton = comfyPage.page
-      .getByLabel('Comfy.NewBlankWorkflow')
+      .getByLabel('New Blank Workflow')
       .getByLabel('Save')
     await saveButton.click()
 

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)

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -83,6 +83,12 @@ export class NodeWidgetReference {
       y: pos[1]
     }
   }
+
+  async click() {
+    await this.node.comfyPage.canvas.click({
+      position: await this.getPosition()
+    })
+  }
 }
 
 export class NodeReference {

browser_tests/groupNode.spec.ts

@@ -134,6 +134,37 @@ test.describe('Group Node', () => {
     expect(await manage2.getSelectedNodeType()).toBe('g2')
   })
 
+  test('Preserves hidden input configuration when containing duplicate node types', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('group_node_identical_nodes_hidden_inputs')
+    await comfyPage.nextFrame()
+
+    const groupNodeId = 19
+    const groupNodeName = 'two_VAE_decode'
+
+    const totalInputCount = await comfyPage.page.evaluate((nodeName) => {
+      const {
+        extra: { groupNodes }
+      } = window['app'].graph
+      const { nodes } = groupNodes[nodeName]
+      return nodes.reduce((acc: number, node) => {
+        return acc + node.inputs.length
+      }, 0)
+    }, groupNodeName)
+
+    const visibleInputCount = await comfyPage.page.evaluate((id) => {
+      const node = window['app'].graph.getNodeById(id)
+      return node.inputs.length
+    }, groupNodeId)
+
+    // Verify there are 4 total inputs (2 VAE decode nodes with 2 inputs each)
+    expect(totalInputCount).toBe(4)
+
+    // Verify there are 2 visible inputs (2 have been hidden in config)
+    expect(visibleInputCount).toBe(2)
+  })
+
   test('Reconnects inputs after configuration changed via manage dialog save', async ({
     comfyPage
   }) => {

browser_tests/menu.spec.ts

@@ -707,6 +707,36 @@ test.describe('Menu', () => {
         '*Unsaved Workflow.json'
       ])
     })
+
+    test('Can drop workflow from workflows sidebar', async ({ comfyPage }) => {
+      await comfyPage.setupWorkflowsDirectory({
+        'workflow1.json': 'default.json'
+      })
+      await comfyPage.setup()
+      await comfyPage.menu.workflowsTab.open()
+
+      const nodeCount = await comfyPage.getGraphNodesCount()
+
+      // Get the bounding box of the canvas element
+      const canvasBoundingBox = (await comfyPage.page
+        .locator('#graph-canvas')
+        .boundingBox())!
+
+      // Calculate the center position of the canvas
+      const targetPosition = {
+        x: canvasBoundingBox.x + canvasBoundingBox.width / 2,
+        y: canvasBoundingBox.y + canvasBoundingBox.height / 2
+      }
+
+      await comfyPage.page.dragAndDrop(
+        '.comfyui-workflows-browse .node-label:has-text("workflow1.json")',
+        '#graph-canvas',
+        { targetPosition }
+      )
+      // Wait for the workflow to be inserted
+      await comfyPage.page.waitForTimeout(200)
+      expect(await comfyPage.getGraphNodesCount()).toBe(nodeCount * 2)
+    })
   })
 
   test.describe('Workflows topbar tabs', () => {