centralize render condition in TopMenuBar

.github/workflows/i18n.yaml

@@ -34,11 +34,7 @@ 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,8 +27,6 @@ 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
@@ -63,7 +61,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: ${{ github.event.pull_request.base.ref != 'main' }}
+          draft: true
           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, controlnet, lora.
+  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade.
   '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.js](https://github.com/Comfy-Org/litegraph.js) for node editor
+- [Litegraph](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,17 +572,92 @@ 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.js
+### LiteGraph
 
 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.js changes
+### Test litegraph 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.
 
-### i18n
+## Internationalization (i18n)
 
-See [locales/README.md](src/locales/README.md) for details.
+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.

browser_tests/assets/primitive_node_unconnected_dom_widget.json

@@ -1,59 +0,0 @@
-{
-  "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

@@ -1,101 +0,0 @@
-{
-  "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

@@ -1,110 +0,0 @@
-{
-  "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

@@ -1,32 +0,0 @@
-{
-  "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

@@ -1,46 +0,0 @@
-{
-  "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,6 +95,18 @@ 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,17 +1,10 @@
 import type { Page } from '@playwright/test'
 
-import type { NodeId } from '../../../src/schemas/comfyWorkflowSchema'
+import type { NodeId } from '../../../src/types/comfyWorkflow'
 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('@2x Can highlight selected', async ({ comfyPage }) => {
+    test('Can highlight selected', async ({ comfyPage }) => {
       await expect(comfyPage.canvas).toHaveScreenshot('default.png')
       await comfyPage.clickTextEncodeNode1()
       await expect(comfyPage.canvas).toHaveScreenshot('selected-node1.png')
@@ -103,7 +103,9 @@ test.describe('Node Interaction', () => {
       })
     })
 
-    test('Can move link', async ({ comfyPage }) => {
+    // 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 }) => {
       await comfyPage.dragAndDrop(
         comfyPage.clipTextEncodeNode1InputSlot,
         comfyPage.emptySpace
@@ -116,7 +118,10 @@ test.describe('Node Interaction', () => {
       await expect(comfyPage.canvas).toHaveScreenshot('moved-link.png')
     })
 
-    // Shift drag copy link regressed. See https://github.com/Comfy-Org/ComfyUI_frontend/issues/2941
+    // 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
     test.skip('Can copy link by shift-drag existing link', async ({
       comfyPage
     }) => {
@@ -319,12 +324,16 @@ test.describe('Node Interaction', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('group-fit-to-contents.png')
   })
 
-  test('Can pin/unpin nodes', async ({ comfyPage }) => {
+  // 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
+  }) => {
     await comfyPage.select2Nodes()
-    await comfyPage.executeCommand('Comfy.Canvas.ToggleSelectedNodes.Pin')
+    await comfyPage.canvas.press('KeyP')
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('nodes-pinned.png')
-    await comfyPage.executeCommand('Comfy.Canvas.ToggleSelectedNodes.Pin')
+    await comfyPage.canvas.press('KeyP')
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('nodes-unpinned.png')
   })
@@ -673,7 +682,7 @@ test.describe('Load duplicate workflow', () => {
   }) => {
     await comfyPage.loadWorkflow('single_ksampler')
     await comfyPage.menu.workflowsTab.open()
-    await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
+    await comfyPage.menu.workflowsTab.newBlankWorkflowButton.click()
     await comfyPage.loadWorkflow('single_ksampler')
     expect(await comfyPage.getGraphNodesCount()).toBe(1)
   })

browser_tests/menu.spec.ts

@@ -7,6 +7,25 @@ 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
@@ -119,10 +138,7 @@ test.describe('Menu', () => {
     test('Can add new bookmark folder', async ({ comfyPage }) => {
       const tab = comfyPage.menu.nodeLibraryTab
       await tab.newFolderButton.click()
-      const textInput = comfyPage.page.locator('.editable-text input')
-      await textInput.waitFor({ state: 'visible' })
-      await textInput.fill('New Folder')
-      await textInput.press('Enter')
+      await comfyPage.page.keyboard.press('Enter')
       expect(await tab.getFolder('New Folder').count()).toBe(1)
       expect(
         await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
@@ -135,10 +151,8 @@ test.describe('Menu', () => {
 
       await tab.getFolder('foo').click({ button: 'right' })
       await comfyPage.page.getByLabel('New Folder').click()
-      const textInput = comfyPage.page.locator('.editable-text input')
-      await textInput.waitFor({ state: 'visible' })
-      await textInput.fill('bar')
-      await textInput.press('Enter')
+      await comfyPage.page.keyboard.type('bar')
+      await comfyPage.page.keyboard.press('Enter')
 
       expect(await tab.getFolder('bar').count()).toBe(1)
       expect(
@@ -402,7 +416,7 @@ test.describe('Menu', () => {
         '*Unsaved Workflow.json'
       ])
 
-      await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
+      await tab.newBlankWorkflowButton.click()
       expect(await tab.getOpenedWorkflowNames()).toEqual([
         '*Unsaved Workflow.json',
         '*Unsaved Workflow (2).json'
@@ -501,7 +515,7 @@ test.describe('Menu', () => {
     })
 
     test('Can save workflow as', async ({ comfyPage }) => {
-      await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
+      await comfyPage.menu.workflowsTab.newBlankWorkflowButton.click()
       await comfyPage.menu.topbar.saveWorkflowAs('workflow3.json')
       expect(
         await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
@@ -559,8 +573,6 @@ test.describe('Menu', () => {
       })
 
       // Compare the exported workflow with the original
-      delete downloadedContent.id
-      delete downloadedContentZh.id
       expect(downloadedContent).toBeDefined()
       expect(downloadedContent).toEqual(downloadedContentZh)
     })
@@ -625,7 +637,7 @@ test.describe('Menu', () => {
 
       // Load blank workflow
       await comfyPage.menu.workflowsTab.open()
-      await comfyPage.executeCommand('Comfy.NewBlankWorkflow')
+      await comfyPage.menu.workflowsTab.newBlankWorkflowButton.click()
 
       // Switch back to the missing_nodes workflow
       await comfyPage.menu.workflowsTab.switchToWorkflow('missing_nodes')

browser_tests/nodeDisplay.spec.ts

@@ -49,13 +49,6 @@ 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')