Fix regex handling of folderName

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

.github/workflows/i18n.yaml

@@ -34,7 +34,11 @@ jobs:
         git config --global user.name 'github-actions'
         git config --global user.email 'github-actions@github.com'
         git fetch origin ${{ github.head_ref }}
+        # Stash any local changes before checkout
+        git stash -u
         git checkout -B ${{ github.head_ref }} origin/${{ github.head_ref }}
+        # Apply the stashed changes if any
+        git stash pop || true
         git add src/locales/
         git diff --staged --quiet || git commit -m "Update locales [skip ci]"
         git push origin HEAD:${{ github.head_ref }}

.github/workflows/release.yaml

@@ -27,6 +27,8 @@ jobs:
       - name: Build project
         env:
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
+          ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
         run: |
           npm ci
           npm run fetch-templates
@@ -61,7 +63,7 @@ jobs:
           tag_name: v${{ needs.build.outputs.version }}
           target_commitish: ${{ github.event.pull_request.base.ref }}
           make_latest: ${{ github.event.pull_request.base.ref == 'main' }}
-          draft: true
+          draft: ${{ github.event.pull_request.base.ref != 'main' }}
           prerelease: false
           generate_release_notes: true
 

.i18nrc.cjs

@@ -10,7 +10,7 @@ module.exports = defineConfig({
   entryLocale: 'en',
   output: 'src/locales',
   outputLocales: ['zh', 'ru', 'ja', 'ko', 'fr'],
-  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade.
+  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, controlnet, lora.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
   `

README.md

@@ -517,7 +517,7 @@ The selection toolbox will display the command button when items are selected:
 - [Vue 3](https://vuejs.org/) with [TypeScript](https://www.typescriptlang.org/)
 - [Pinia](https://pinia.vuejs.org/) for state management
 - [PrimeVue](https://primevue.org/) with [TailwindCSS](https://tailwindcss.com/) for UI
-- [Litegraph](https://github.com/Comfy-Org/litegraph.js) for node editor
+- [litegraph.js](https://github.com/Comfy-Org/litegraph.js) for node editor
 - [zod](https://zod.dev/) for schema validation
 - [vue-i18n](https://github.com/intlify/vue-i18n) for internationalization
 
@@ -572,92 +572,17 @@ Component test verifies Vue components in `src/components/`.
 
 Playwright test verifies the whole app. See <https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/browser_tests/README.md> for details.
 
-### LiteGraph
+### litegraph.js
 
 This repo is using litegraph package hosted on <https://github.com/Comfy-Org/litegraph.js>. Any changes to litegraph should be submitted in that repo instead.
 
-### Test litegraph changes
+#### Test litegraph.js changes
 
 - Run `npm link` in the local litegraph repo.
 - Run `npm link @comfyorg/litegraph` in this repo.
 
 This will replace the litegraph package in this repo with the local litegraph repo.
 
-## Internationalization (i18n)
+### i18n
 
-Our project supports multiple languages using `vue-i18n`. This allows users around the world to use the application in their preferred language.
-
-### Supported Languages
-
- - en (English)
- - zh (中文)
- - ru (Русский)
- - ja (日本語)
- - ko (한국어)
- - fr (Français)
-
-### How to Add a New Language
-
-We welcome the addition of new languages. You can add a new language by following these steps:
-
-#### 1. Generate language files
-We use [lobe-i18n](https://github.com/lobehub/lobe-cli-toolbox/blob/master/packages/lobe-i18n/README.md) as our translation tool, which integrates with LLM for efficient localization.
-
-Update the configuration file to include the new language(s) you wish to add:
-
-
-```javascript
-const { defineConfig } = require('@lobehub/i18n-cli');
-
-module.exports = defineConfig({
-  entry: 'src/locales/en.json', // Base language file
-  entryLocale: 'en',
-  output: 'src/locales',
-  outputLocales: ['zh', 'ru', 'ja'], // Add the new language(s) here
-});
-```
-
-Set your OpenAI API Key by running the following command:
-
-```sh
-npx lobe-i18n --option
-```
-
-Once configured, generate the translation files with:
-
-```sh
-npx lobe-i18n locale
-```
-
-This will create the language files for the specified languages in the configuration.
-
-#### 2. Update i18n Configuration
-
-Import the newly generated locale file(s) in the `src/i18n.ts` file to include them in the application's i18n setup.
-
-#### 3. Enable Selection of the New Language
-
-Add the newly added language to the following item in `src/constants/coreSettings.ts`:
-
-```typescript
-  {
-    id: 'Comfy.Locale',
-    name: 'Locale',
-    type: 'combo',
-    // Add the new language(s) here
-    options: [
-      { value: 'en', text: 'English' },
-      { value: 'zh', text: '中文' },
-      { value: 'ru', text: 'Русский' },
-      { value: 'ja', text: '日本語' }
-    ],
-    defaultValue: navigator.language.split('-')[0] || 'en'
-  },
-```
-
-This will make the new language selectable in the application's settings.
-
-#### 4. Test the Translations
-
-Start the development server, switch to the new language, and verify the translations.
-You can switch languages by opening the ComfyUI Settings and selecting from the `ComfyUI > Locale` dropdown box.
+See [locales/README.md](src/locales/README.md) for details.

browser_tests/assets/primitive_node_unconnected_dom_widget.json

@@ -0,0 +1,59 @@
+{
+  "last_node_id": 3,
+  "last_link_id": 1,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "PrimitiveNode",
+      "pos": [14, 43],
+      "size": [203.1999969482422, 40.36840057373047],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "connect to widget input",
+          "type": "*",
+          "links": [],
+          "slot_index": 0
+        }
+      ],
+      "properties": {
+        "Run widget replace on values": false
+      }
+    },
+    {
+      "id": 2,
+      "type": "CLIPTextEncode",
+      "pos": [306.2463684082031, 45.30042266845703],
+      "size": [400, 200],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "clip",
+          "type": "CLIP",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "CONDITIONING",
+          "type": "CONDITIONING",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CLIPTextEncode"
+      },
+      "widgets_values": [""]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {},
+  "version": 0.4
+}

browser_tests/assets/renamed_converted_widget.json

@@ -0,0 +1,101 @@
+{
+  "last_node_id": 4,
+  "last_link_id": 2,
+  "nodes": [
+    {
+      "id": 3,
+      "type": "EmptyLatentImage",
+      "pos": [
+        380.51641845703125,
+        191.39659118652344
+      ],
+      "size": [
+        315,
+        106
+      ],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "breadth",
+          "type": "INT",
+          "widget": {
+            "name": "breadth"
+          },
+          "link": 2
+        }
+      ],
+      "outputs": [
+        {
+          "name": "LATENT",
+          "type": "LATENT",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "EmptyLatentImage"
+      },
+      "widgets_values": [
+        512,
+        512,
+        1
+      ]
+    },
+    {
+      "id": 4,
+      "type": "PrimitiveNode",
+      "pos": [
+        73.6164321899414,
+        197.9966278076172
+      ],
+      "size": [
+        210,
+        82
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "INT",
+          "type": "INT",
+          "widget": {
+            "name": "bredth"
+          },
+          "links": [
+            2
+          ]
+        }
+      ],
+      "title": "breadth",
+      "properties": {
+        "Run widget replace on values": false
+      },
+      "widgets_values": [
+        512,
+        "fixed"
+      ]
+    }
+  ],
+  "links": [
+    [
+      2,
+      4,
+      0,
+      3,
+      0,
+      "INT"
+    ]
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "VHS_latentpreview": true,
+    "VHS_latentpreviewrate": 0,
+    "VHS_MetadataImage": false,
+    "VHS_KeepIntermediate": false
+  },
+  "version": 0.4
+}

browser_tests/assets/reroute/native_reroute.json

@@ -0,0 +1,110 @@
+{
+  "last_node_id": 25,
+  "last_link_id": 33,
+  "nodes": [
+    {
+      "id": 4,
+      "type": "CheckpointLoaderSimple",
+      "pos": [160, 240],
+      "size": [315, 98],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "MODEL",
+          "type": "MODEL",
+          "slot_index": 0,
+          "links": []
+        },
+        {
+          "name": "CLIP",
+          "type": "CLIP",
+          "slot_index": 1,
+          "links": []
+        },
+        {
+          "name": "VAE",
+          "type": "VAE",
+          "slot_index": 2,
+          "links": [33]
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "CheckpointLoaderSimple"
+      },
+      "widgets_values": ["v1-5-pruned-emaonly.safetensors"]
+    },
+    {
+      "id": 19,
+      "type": "VAEDecode",
+      "pos": [623.0897216796875, 324.64453125],
+      "size": [210, 46],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": 33
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEDecode"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [[33, 4, 2, 19, 1, "VAE"]],
+  "floatingLinks": [
+    {
+      "id": 6,
+      "origin_id": 4,
+      "origin_slot": 2,
+      "target_id": -1,
+      "target_slot": -1,
+      "type": "VAE",
+      "parentId": 1
+    }
+  ],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "reroutes": [
+      {
+        "id": 1,
+        "pos": [545.4541015625, 295.85760498046875],
+        "linkIds": [],
+        "floating": {
+          "slotType": "output"
+        }
+      },
+      {
+        "id": 2,
+        "pos": [543.8283081054688, 355.45849609375],
+        "linkIds": [33]
+      }
+    ],
+    "linkExtensions": [
+      {
+        "id": 33,
+        "parentId": 2
+      }
+    ]
+  },
+  "version": 0.4
+}

browser_tests/assets/widgets/load_audio_widget.json

@@ -0,0 +1,32 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "LoadAudio",
+      "pos": [41.5296516418457, 16.930862426757812],
+      "size": [315, 82],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "AUDIO",
+          "type": "AUDIO",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadAudio"
+      },
+      "widgets_values": [null, ""]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {},
+  "version": 0.4
+}

browser_tests/assets/widgets/load_image_widget.json

@@ -0,0 +1,46 @@
+{
+  "last_node_id": 10,
+  "last_link_id": 10,
+  "nodes": [
+    {
+      "id": 10,
+      "type": "LoadImage",
+      "pos": [
+        50,
+        50
+      ],
+      "size": [
+        315,
+        314
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "LoadImage"
+      },
+      "widgets_values": [
+        "example.png",
+        "image"
+      ]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {},
+  "version": 0.4
+}

browser_tests/fixtures/components/SidebarTab.ts

@@ -95,18 +95,6 @@ export class WorkflowsSidebarTab extends SidebarTab {
     return this.page.locator('.workflows-sidebar-tab')
   }
 
-  get browseGalleryButton() {
-    return this.root.locator('.browse-templates-button')
-  }
-
-  get newBlankWorkflowButton() {
-    return this.root.locator('.new-blank-workflow-button')
-  }
-
-  get openWorkflowButton() {
-    return this.root.locator('.open-workflow-button')
-  }
-
   async getOpenedWorkflowNames() {
     return await this.root
       .locator('.comfyui-workflows-open .node-label')

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -1,10 +1,17 @@
 import type { Page } from '@playwright/test'
 
-import type { NodeId } from '../../../src/types/comfyWorkflow'
+import type { NodeId } from '../../../src/schemas/comfyWorkflowSchema'
 import { ManageGroupNode } from '../../helpers/manageGroupNode'
 import type { ComfyPage } from '../ComfyPage'
 import type { Position, Size } from '../types'
 
+export const getMiddlePoint = (pos1: Position, pos2: Position) => {
+  return {
+    x: (pos1.x + pos2.x) / 2,
+    y: (pos1.y + pos2.y) / 2
+  }
+}
+
 export class NodeSlotReference {
   constructor(
     readonly type: 'input' | 'output',

browser_tests/interaction.spec.ts

@@ -49,7 +49,7 @@ test.describe('Node Interaction', () => {
       })
     })
 
-    test('Can highlight selected', async ({ comfyPage }) => {
+    test('@2x Can highlight selected', async ({ comfyPage }) => {
       await expect(comfyPage.canvas).toHaveScreenshot('default.png')
       await comfyPage.clickTextEncodeNode1()
       await expect(comfyPage.canvas).toHaveScreenshot('selected-node1.png')
@@ -103,9 +103,7 @@ test.describe('Node Interaction', () => {
       })
     })
 
-    // Chromium 2x cannot move link.
-    // See https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/10876381315/job/30176211513
-    test.skip('Can move link', async ({ comfyPage }) => {
+    test('Can move link', async ({ comfyPage }) => {
       await comfyPage.dragAndDrop(
         comfyPage.clipTextEncodeNode1InputSlot,
         comfyPage.emptySpace
@@ -118,10 +116,7 @@ test.describe('Node Interaction', () => {
       await expect(comfyPage.canvas).toHaveScreenshot('moved-link.png')
     })
 
-    // Copy link is not working on CI at all
-    // Chromium 2x recognize it as dragging canvas.
-    // Chromium triggers search box after link release. The link is indeed copied.
-    // See https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/10876381315/job/30176211513
+    // Shift drag copy link regressed. See https://github.com/Comfy-Org/ComfyUI_frontend/issues/2941
     test.skip('Can copy link by shift-drag existing link', async ({
       comfyPage
     }) => {
@@ -324,16 +319,12 @@ test.describe('Node Interaction', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('group-fit-to-contents.png')
   })
 
-  // Somehow this test fails on GitHub Actions. It works locally.
-  // https://github.com/Comfy-Org/ComfyUI_frontend/pull/736
-  test.skip('Can pin/unpin nodes with keyboard shortcut', async ({
-    comfyPage
-  }) => {
+  test('Can pin/unpin nodes', async ({ comfyPage }) => {
     await comfyPage.select2Nodes()
-    await comfyPage.canvas.press('KeyP')
+    await comfyPage.executeCommand('Comfy.Canvas.ToggleSelectedNodes.Pin')
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('nodes-pinned.png')
-    await comfyPage.canvas.press('KeyP')
+    await comfyPage.executeCommand('Comfy.Canvas.ToggleSelectedNodes.Pin')
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('nodes-unpinned.png')
   })
@@ -682,7 +673,7 @@ test.describe('Load duplicate workflow', () => {
   }) => {
     await comfyPage.loadWorkflow('single_ksampler')
     await comfyPage.menu.workflowsTab.open()
-    await comfyPage.menu.workflowsTab.newBlankWorkflowButton.click()
+    await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
     await comfyPage.loadWorkflow('single_ksampler')
     expect(await comfyPage.getGraphNodesCount()).toBe(1)
   })

browser_tests/menu.spec.ts

@@ -7,25 +7,6 @@ test.describe('Menu', () => {
     await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
   })
 
-  // Skip reason: Flaky.
-  test.skip('Toggle theme', async ({ comfyPage }) => {
-    test.setTimeout(30000)
-
-    expect(await comfyPage.menu.getThemeId()).toBe('dark')
-
-    await comfyPage.menu.toggleTheme()
-
-    expect(await comfyPage.menu.getThemeId()).toBe('light')
-
-    // Theme id should persist after reload.
-    await comfyPage.setup()
-    expect(await comfyPage.menu.getThemeId()).toBe('light')
-
-    await comfyPage.menu.toggleTheme()
-
-    expect(await comfyPage.menu.getThemeId()).toBe('dark')
-  })
-
   test('Can register sidebar tab', async ({ comfyPage }) => {
     const initialChildrenCount = await comfyPage.menu.sideToolbar.evaluate(
       (el) => el.children.length
@@ -138,7 +119,10 @@ test.describe('Menu', () => {
     test('Can add new bookmark folder', async ({ comfyPage }) => {
       const tab = comfyPage.menu.nodeLibraryTab
       await tab.newFolderButton.click()
-      await comfyPage.page.keyboard.press('Enter')
+      const textInput = comfyPage.page.locator('.editable-text input')
+      await textInput.waitFor({ state: 'visible' })
+      await textInput.fill('New Folder')
+      await textInput.press('Enter')
       expect(await tab.getFolder('New Folder').count()).toBe(1)
       expect(
         await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
@@ -151,8 +135,10 @@ test.describe('Menu', () => {
 
       await tab.getFolder('foo').click({ button: 'right' })
       await comfyPage.page.getByLabel('New Folder').click()
-      await comfyPage.page.keyboard.type('bar')
-      await comfyPage.page.keyboard.press('Enter')
+      const textInput = comfyPage.page.locator('.editable-text input')
+      await textInput.waitFor({ state: 'visible' })
+      await textInput.fill('bar')
+      await textInput.press('Enter')
 
       expect(await tab.getFolder('bar').count()).toBe(1)
       expect(
@@ -416,7 +402,7 @@ test.describe('Menu', () => {
         '*Unsaved Workflow.json'
       ])
 
-      await tab.newBlankWorkflowButton.click()
+      await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
       expect(await tab.getOpenedWorkflowNames()).toEqual([
         '*Unsaved Workflow.json',
         '*Unsaved Workflow (2).json'
@@ -515,7 +501,7 @@ test.describe('Menu', () => {
     })
 
     test('Can save workflow as', async ({ comfyPage }) => {
-      await comfyPage.menu.workflowsTab.newBlankWorkflowButton.click()
+      await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
       await comfyPage.menu.topbar.saveWorkflowAs('workflow3.json')
       expect(
         await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
@@ -573,6 +559,8 @@ test.describe('Menu', () => {
       })
 
       // Compare the exported workflow with the original
+      delete downloadedContent.id
+      delete downloadedContentZh.id
       expect(downloadedContent).toBeDefined()
       expect(downloadedContent).toEqual(downloadedContentZh)
     })
@@ -637,7 +625,7 @@ test.describe('Menu', () => {
 
       // Load blank workflow
       await comfyPage.menu.workflowsTab.open()
-      await comfyPage.menu.workflowsTab.newBlankWorkflowButton.click()
+      await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
 
       // Switch back to the missing_nodes workflow
       await comfyPage.menu.workflowsTab.switchToWorkflow('missing_nodes')

browser_tests/nodeDisplay.spec.ts

@@ -49,6 +49,13 @@ test.describe('Optional input', () => {
     expect(vaeInput.link).toBeNull()
     expect(convertedInput.link).not.toBeNull()
   })
+  test('Renamed converted input', async ({ comfyPage }) => {
+    await comfyPage.loadWorkflow('renamed_converted_widget')
+    const node = await comfyPage.getNodeRefById('3')
+    const inputs = await node.getProperty('inputs')
+    const renamedInput = inputs.find((w) => w.name === 'breadth')
+    expect(renamedInput).toBeUndefined()
+  })
   test('slider', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('simple_slider')
     await expect(comfyPage.canvas).toHaveScreenshot('simple_slider.png')