Safety mechanism to prevent loading everything

Fix number of items shown on status update

.github/workflows/i18n.yaml

@@ -1,39 +0,0 @@
-name: Update Locales
-on:
-  pull_request:
-    branches: [ main, master, dev* ]
-
-jobs:
-  update-locales:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.1
-    - name: Install Playwright Browsers
-      run: npx playwright install chromium --with-deps
-      working-directory: ComfyUI_frontend
-    - name: Start dev server
-      # Run electron dev server as it is a superset of the web dev server
-      # We do want electron specific UIs to be translated.
-      run: npm run dev:electron &
-      working-directory: ComfyUI_frontend
-    - name: Update en.json
-      run: npm run collect-i18n
-      env:
-        PLAYWRIGHT_TEST_URL: http://localhost:5173
-      working-directory: ComfyUI_frontend
-    - name: Update translations
-      # Pipe output so that it doesn't error out on stdout.clearLine
-      run: npm run locale 2>&1 | cat
-      env:
-        OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-      working-directory: ComfyUI_frontend
-    - name: Commit updated locales
-      run: |
-        git config --global user.name 'github-actions'
-        git config --global user.email 'github-actions@github.com'
-        git fetch origin ${{ github.head_ref }}
-        git checkout -B ${{ github.head_ref }} origin/${{ github.head_ref }}
-        git add src/locales/
-        git diff --staged --quiet || git commit -m "Update locales [skip ci]"
-        git push origin HEAD:${{ github.head_ref }}
-      working-directory: ComfyUI_frontend

.github/workflows/release.yaml

@@ -41,21 +41,3 @@ jobs:
           draft: true
           prerelease: false
           make_latest: "true"
-  publish_types:
-    runs-on: ubuntu-latest
-    if: >
-      github.event.pull_request.merged == true &&
-      contains(github.event.pull_request.labels.*.name, 'Release')
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
-        with:
-          node-version: lts/*
-          registry-url: "https://registry.npmjs.org"
-      - run: npm ci
-      - run: npm run build:types
-      - name: Publish package
-        run: npm publish --access public
-        working-directory: ./dist
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.i18nrc.cjs

@@ -1,17 +0,0 @@
-// This file is intentionally kept in CommonJS format (.cjs)
-// to resolve compatibility issues with dependencies that require CommonJS.
-// Do not convert this file to ESModule format unless all dependencies support it.
-const { defineConfig } = require('@lobehub/i18n-cli');
-
-module.exports = defineConfig({
-  modelName: 'gpt-4',
-  splitToken: 1024,
-  entry: 'src/locales/en',
-  entryLocale: 'en',
-  output: 'src/locales',
-  outputLocales: ['zh', 'ru', 'ja', 'ko'],
-  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg.
-  'latent' is the short form of 'latent space'.
-  'mask' is in the context of image processing.
-  `
-});

CODEOWNERS

@@ -1,18 +0,0 @@
-# Admins
-* @Comfy-Org/comfy_frontend_devs
-
-# Maintainers
-*.md @Comfy-Org/comfy_maintainer
-/tests-ui/ @Comfy-Org/comfy_maintainer
-/browser_tests/ @Comfy-Org/comfy_maintainer
-/.env_example @Comfy-Org/comfy_maintainer
-/src/locales/ @Comfy-Org/comfy_maintainer
-
-# Japanese translation
-/src/locales/ja.json @shinshin86 @Comfy-Org/comfy_maintainer
-
-# Load 3D extension
-/src/extensions/core/load3d.ts @jtydhr88 @Comfy-Org/comfy_frontend_devs
-
-# Mask Editor extension
-/src/extensions/core/maskeditor.ts @trsommer @Comfy-Org/comfy_frontend_devs

README.md

@@ -414,7 +414,6 @@ We will support custom icons later.
 - [PrimeVue](https://primevue.org/) with [TailwindCSS](https://tailwindcss.com/) for UI
 - [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
 
 ### Git pre-commit hooks
 
@@ -481,84 +480,6 @@ This repo is using litegraph package hosted on <https://github.com/Comfy-Org/lit
 
 This will replace the litegraph package in this repo with the local litegraph repo.
 
-## Internationalization (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 (한국어)
-
-### 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.
-
 ## Deploy
 
 - Option 1: Set `DEPLOY_COMFYUI_DIR` in `.env` and run `npm run deploy`.

browser_tests/assets/simple_slider.json

@@ -1,49 +0,0 @@
-{
-  "last_node_id": 12,
-  "last_link_id": 9,
-  "nodes": [
-    {
-      "id": 12,
-      "type": "DevToolsSimpleSlider",
-      "pos": [
-        50,
-        50
-      ],
-      "size": [
-        315,
-        58
-      ],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "FLOAT",
-          "type": "FLOAT",
-          "links": null,
-          "label": "FLOAT"
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "DevToolsSimpleSlider"
-      },
-      "widgets_values": [
-        0.5
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [
-        0,
-        0
-      ]
-    }
-  },
-  "version": 0.4
-}

browser_tests/changeTracker.spec.ts

@@ -3,6 +3,9 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from './fixtures/ComfyPage'
+import type { useWorkspaceStore } from '../src/stores/workspaceStore'
+
+type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
 
 async function beforeChange(comfyPage: ComfyPage) {
   await comfyPage.page.evaluate(() => {
@@ -23,41 +26,64 @@ test.describe('Change Tracker', () => {
     })
 
     test('Can undo multiple operations', async ({ comfyPage }) => {
-      expect(await comfyPage.getUndoQueueSize()).toBe(0)
-      expect(await comfyPage.getRedoQueueSize()).toBe(0)
+      function isModified() {
+        return comfyPage.page.evaluate(async () => {
+          return !!(window['app'].extensionManager as WorkspaceStore).workflow
+            .activeWorkflow?.isModified
+        })
+      }
+
+      function getUndoQueueSize() {
+        return comfyPage.page.evaluate(() => {
+          const workflow = (window['app'].extensionManager as WorkspaceStore)
+            .workflow.activeWorkflow
+          return workflow?.changeTracker.undoQueue.length
+        })
+      }
+
+      function getRedoQueueSize() {
+        return comfyPage.page.evaluate(() => {
+          const workflow = (window['app'].extensionManager as WorkspaceStore)
+            .workflow.activeWorkflow
+          return workflow?.changeTracker.redoQueue.length
+        })
+      }
+      expect(await getUndoQueueSize()).toBe(0)
+      expect(await getRedoQueueSize()).toBe(0)
 
       // Save, confirm no errors & workflow modified flag removed
       await comfyPage.menu.topbar.saveWorkflow('undo-redo-test')
       expect(await comfyPage.getToastErrorCount()).toBe(0)
-      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
-      expect(await comfyPage.getUndoQueueSize()).toBe(0)
-      expect(await comfyPage.getRedoQueueSize()).toBe(0)
+      expect(await isModified()).toBe(false)
+
+      expect(await getUndoQueueSize()).toBe(0)
+      expect(await getRedoQueueSize()).toBe(0)
 
       const node = (await comfyPage.getFirstNodeRef())!
       await node.click('title')
       await node.click('collapse')
       await expect(node).toBeCollapsed()
-      expect(await comfyPage.isCurrentWorkflowModified()).toBe(true)
-      expect(await comfyPage.getUndoQueueSize()).toBe(1)
-      expect(await comfyPage.getRedoQueueSize()).toBe(0)
+      expect(await isModified()).toBe(true)
+      expect(await getUndoQueueSize()).toBe(1)
+      expect(await getRedoQueueSize()).toBe(0)
 
       await comfyPage.ctrlB()
       await expect(node).toBeBypassed()
-      expect(await comfyPage.isCurrentWorkflowModified()).toBe(true)
-      expect(await comfyPage.getUndoQueueSize()).toBe(2)
-      expect(await comfyPage.getRedoQueueSize()).toBe(0)
+      expect(await isModified()).toBe(true)
+      expect(await getUndoQueueSize()).toBe(2)
+      expect(await getRedoQueueSize()).toBe(0)
 
       await comfyPage.ctrlZ()
       await expect(node).not.toBeBypassed()
-      expect(await comfyPage.isCurrentWorkflowModified()).toBe(true)
-      expect(await comfyPage.getUndoQueueSize()).toBe(1)
-      expect(await comfyPage.getRedoQueueSize()).toBe(1)
+      expect(await isModified()).toBe(true)
+      expect(await getUndoQueueSize()).toBe(1)
+      expect(await getRedoQueueSize()).toBe(1)
 
       await comfyPage.ctrlZ()
       await expect(node).not.toBeCollapsed()
-      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
-      expect(await comfyPage.getUndoQueueSize()).toBe(0)
-      expect(await comfyPage.getRedoQueueSize()).toBe(2)
+      expect(await isModified()).toBe(false)
+      expect(await getUndoQueueSize()).toBe(0)
+      expect(await getRedoQueueSize()).toBe(2)
     })
   })
 
@@ -148,20 +174,4 @@ test.describe('Change Tracker', () => {
     await expect(node).toBePinned()
     await expect(node).toBeCollapsed()
   })
-
-  test('Can detect changes in workflow.extra', async ({ comfyPage }) => {
-    expect(await comfyPage.getUndoQueueSize()).toBe(0)
-    await comfyPage.page.evaluate(() => {
-      window['app'].graph.extra.foo = 'bar'
-    })
-    // Click empty space to trigger a change detection.
-    await comfyPage.clickEmptySpace()
-    expect(await comfyPage.getUndoQueueSize()).toBe(1)
-  })
-
-  test('Ignores changes in workflow.ds', async ({ comfyPage }) => {
-    expect(await comfyPage.getUndoQueueSize()).toBe(0)
-    await comfyPage.pan({ x: 10, y: 10 })
-    expect(await comfyPage.getUndoQueueSize()).toBe(0)
-  })
 })

browser_tests/fixtures/ComfyPage.ts

@@ -17,11 +17,8 @@ import {
 import { Topbar } from './components/Topbar'
 import { NodeReference } from './utils/litegraphUtils'
 import type { Position, Size } from './types'
-import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
 import { SettingDialog } from './components/SettingDialog'
 
-type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
-
 class ComfyMenu {
   public readonly sideToolbar: Locator
   public readonly themeToggleButton: Locator
@@ -75,28 +72,6 @@ type FolderStructure = {
   [key: string]: FolderStructure | string
 }
 
-type KeysOfType<T, Match> = {
-  [K in keyof T]: T[K] extends Match ? K : never
-}[keyof T]
-
-class ConfirmDialog {
-  public readonly delete: Locator
-  public readonly overwrite: Locator
-  public readonly reject: Locator
-
-  constructor(public readonly page: Page) {
-    this.delete = page.locator('button.p-button[aria-label="Delete"]')
-    this.overwrite = page.locator('button.p-button[aria-label="Overwrite"]')
-    this.reject = page.locator('button.p-button[aria-label="Cancel"]')
-  }
-
-  async click(locator: KeysOfType<ConfirmDialog, Locator>) {
-    const loc = this[locator]
-    await expect(loc).toBeVisible()
-    await loc.click()
-  }
-}
-
 export class ComfyPage {
   public readonly url: string
   // All canvas position operations are based on default view of canvas.
@@ -116,7 +91,6 @@ export class ComfyPage {
   public readonly actionbar: ComfyActionbar
   public readonly templates: ComfyTemplates
   public readonly settingDialog: SettingDialog
-  public readonly confirmDialog: ConfirmDialog
 
   /** Worker index to test user ID */
   public readonly userIds: string[] = []
@@ -141,7 +115,6 @@ export class ComfyPage {
     this.actionbar = new ComfyActionbar(page)
     this.templates = new ComfyTemplates(page)
     this.settingDialog = new SettingDialog(page)
-    this.confirmDialog = new ConfirmDialog(page)
   }
 
   convertLeafToContent(structure: FolderStructure): FolderStructure {
@@ -514,10 +487,6 @@ export class ComfyPage {
     return { x: 427, y: 98 }
   }
 
-  get promptDialogInput() {
-    return this.page.locator('.p-dialog-content input[type="text"]')
-  }
-
   async disconnectEdge() {
     await this.dragAndDrop(this.clipTextEncodeNode1InputSlot, this.emptySpace)
   }
@@ -768,29 +737,28 @@ export class ComfyPage {
     )
   }
 
-  async clickDialogButton(prompt: string, buttonText: string = 'Yes') {
+  async confirmDialog(prompt: string, text: string = 'Yes') {
     const modal = this.page.locator(
       `.comfy-modal-content:has-text("${prompt}")`
     )
     await expect(modal).toBeVisible()
     await modal
       .locator('.comfyui-button', {
-        hasText: buttonText
+        hasText: text
       })
       .click()
     await expect(modal).toBeHidden()
   }
 
   async convertAllNodesToGroupNode(groupNodeName: string) {
+    this.page.on('dialog', async (dialog) => {
+      await dialog.accept(groupNodeName)
+    })
     await this.canvas.press('Control+a')
     const node = await this.getFirstNodeRef()
     await node!.clickContextMenuOption('Convert to Group Node')
-    await this.promptDialogInput.fill(groupNodeName)
-    await this.page.keyboard.press('Enter')
-    await this.promptDialogInput.waitFor({ state: 'hidden' })
     await this.nextFrame()
   }
-
   async convertOffsetToCanvas(pos: [number, number]) {
     return this.page.evaluate((pos) => {
       return window['app'].canvas.ds.convertOffsetToCanvas(pos)
@@ -820,31 +788,6 @@ export class ComfyPage {
   async moveMouseToEmptyArea() {
     await this.page.mouse.move(10, 10)
   }
-  async getUndoQueueSize() {
-    return this.page.evaluate(() => {
-      const workflow = (window['app'].extensionManager as WorkspaceStore)
-        .workflow.activeWorkflow
-      return workflow?.changeTracker.undoQueue.length
-    })
-  }
-  async getRedoQueueSize() {
-    return this.page.evaluate(() => {
-      const workflow = (window['app'].extensionManager as WorkspaceStore)
-        .workflow.activeWorkflow
-      return workflow?.changeTracker.redoQueue.length
-    })
-  }
-  async isCurrentWorkflowModified() {
-    return this.page.evaluate(() => {
-      return (window['app'].extensionManager as WorkspaceStore).workflow
-        .activeWorkflow?.isModified
-    })
-  }
-  async getExportedWorkflow({ api = false }: { api?: boolean } = {}) {
-    return this.page.evaluate(async (api) => {
-      return (await window['app'].graphToPrompt())[api ? 'output' : 'workflow']
-    }, api)
-  }
 }
 
 export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({
@@ -856,23 +799,18 @@ export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({
     const userId = await comfyPage.setupUser(username)
     comfyPage.userIds[parallelIndex] = userId
 
-    try {
-      await comfyPage.setupSettings({
-        'Comfy.UseNewMenu': 'Disabled',
-        // Hide canvas menu/info by default.
-        'Comfy.Graph.CanvasInfo': false,
-        'Comfy.Graph.CanvasMenu': false,
-        // Hide all badges by default.
-        'Comfy.NodeBadge.NodeIdBadgeMode': NodeBadgeMode.None,
-        'Comfy.NodeBadge.NodeSourceBadgeMode': NodeBadgeMode.None,
-        // Disable tooltips by default to avoid flakiness.
-        'Comfy.EnableTooltips': false,
-        'Comfy.userId': userId
-      })
-    } catch (e) {
-      console.error(e)
-    }
-
+    await comfyPage.setupSettings({
+      'Comfy.UseNewMenu': 'Disabled',
+      // Hide canvas menu/info by default.
+      'Comfy.Graph.CanvasInfo': false,
+      'Comfy.Graph.CanvasMenu': false,
+      // Hide all badges by default.
+      'Comfy.NodeBadge.NodeIdBadgeMode': NodeBadgeMode.None,
+      'Comfy.NodeBadge.NodeSourceBadgeMode': NodeBadgeMode.None,
+      // Disable tooltips by default to avoid flakiness.
+      'Comfy.EnableTooltips': false,
+      'Comfy.userId': userId
+    })
     await comfyPage.setup()
     await use(comfyPage)
   }

browser_tests/fixtures/UserSelectPage.ts

@@ -1,41 +0,0 @@
-import { Page } from 'playwright'
-import { test as base } from '@playwright/test'
-
-export class UserSelectPage {
-  constructor(
-    public readonly url: string,
-    public readonly page: Page
-  ) {}
-
-  get selectionUrl() {
-    return this.url + '/user-select'
-  }
-
-  get container() {
-    return this.page.locator('#comfy-user-selection')
-  }
-
-  get newUserInput() {
-    return this.container.locator('#new-user-input')
-  }
-
-  get existingUserSelect() {
-    return this.container.locator('#existing-user-select')
-  }
-
-  get nextButton() {
-    return this.container.getByText('Next')
-  }
-}
-
-export const userSelectPageFixture = base.extend<{
-  userSelectPage: UserSelectPage
-}>({
-  userSelectPage: async ({ page }, use) => {
-    const userSelectPage = new UserSelectPage(
-      process.env.PLAYWRIGHT_TEST_URL || 'http://localhost:8188',
-      page
-    )
-    await use(userSelectPage)
-  }
-})

browser_tests/fixtures/components/SidebarTab.ts

@@ -85,36 +85,32 @@ export class WorkflowsSidebarTab extends SidebarTab {
     super(page, 'workflows')
   }
 
-  get root() {
-    return this.page.locator('.workflows-sidebar-tab')
-  }
-
   get browseGalleryButton() {
-    return this.root.locator('.browse-templates-button')
+    return this.page.locator('.browse-templates-button')
   }
 
   get newBlankWorkflowButton() {
-    return this.root.locator('.new-blank-workflow-button')
+    return this.page.locator('.new-blank-workflow-button')
   }
 
   get openWorkflowButton() {
-    return this.root.locator('.open-workflow-button')
+    return this.page.locator('.open-workflow-button')
   }
 
   async getOpenedWorkflowNames() {
-    return await this.root
+    return await this.page
       .locator('.comfyui-workflows-open .node-label')
       .allInnerTexts()
   }
 
   async getActiveWorkflowName() {
-    return await this.root
+    return await this.page
       .locator('.comfyui-workflows-open .p-tree-node-selected .node-label')
       .innerText()
   }
 
   async getTopLevelSavedWorkflowNames() {
-    return await this.root
+    return await this.page
       .locator('.comfyui-workflows-browse .node-label')
       .allInnerTexts()
   }
@@ -126,13 +122,13 @@ export class WorkflowsSidebarTab extends SidebarTab {
   }
 
   getOpenedItem(name: string) {
-    return this.root.locator('.comfyui-workflows-open .node-label', {
+    return this.page.locator('.comfyui-workflows-open .node-label', {
       hasText: name
     })
   }
 
   getPersistedItem(name: string) {
-    return this.root.locator('.comfyui-workflows-browse .node-label', {
+    return this.page.locator('.comfyui-workflows-browse .node-label', {
       hasText: name
     })
   }

browser_tests/fixtures/components/Topbar.ts

@@ -40,14 +40,7 @@ export class Topbar {
     return this._saveWorkflow(workflowName, 'Save As')
   }
 
-  exportWorkflow(workflowName: string): Promise<void> {
-    return this._saveWorkflow(workflowName, 'Export')
-  }
-
-  async _saveWorkflow(
-    workflowName: string,
-    command: 'Save' | 'Save As' | 'Export'
-  ) {
+  async _saveWorkflow(workflowName: string, command: 'Save' | 'Save As') {
     await this.triggerTopbarCommand(['Workflow', command])
     await this.getSaveDialog().fill(workflowName)
     await this.page.keyboard.press('Enter')

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -233,10 +233,10 @@ export class NodeReference {
     await ctx.getByText(optionText).click()
   }
   async convertToGroupNode(groupNodeName: string = 'GroupNode') {
+    this.comfyPage.page.once('dialog', async (dialog) => {
+      await dialog.accept(groupNodeName)
+    })
     await this.clickContextMenuOption('Convert to Group Node')
-    await this.comfyPage.promptDialogInput.fill(groupNodeName)
-    await this.comfyPage.page.keyboard.press('Enter')
-    await this.comfyPage.promptDialogInput.waitFor({ state: 'hidden' })
     await this.comfyPage.nextFrame()
     const nodes = await this.comfyPage.getNodeRefsByType(
       `workflow>${groupNodeName}`

browser_tests/groupNode.spec.ts

@@ -103,36 +103,6 @@ test.describe('Group Node', () => {
     await expect(comfyPage.page.locator('.node-tooltip')).toBeVisible()
   })
 
-  test('Manage group opens with the correct group selected', async ({
-    comfyPage
-  }) => {
-    const makeGroup = async (name, type1, type2) => {
-      const node1 = (await comfyPage.getNodeRefsByType(type1))[0]
-      const node2 = (await comfyPage.getNodeRefsByType(type2))[0]
-      await node1.click('title')
-      await node2.click('title', {
-        modifiers: ['Shift']
-      })
-      return await node2.convertToGroupNode(name)
-    }
-
-    const group1 = await makeGroup(
-      'g1',
-      'CLIPTextEncode',
-      'CheckpointLoaderSimple'
-    )
-    const group2 = await makeGroup('g2', 'EmptyLatentImage', 'KSampler')
-
-    const manage1 = await group1.manageGroupNode()
-    await comfyPage.nextFrame()
-    expect(await manage1.getSelectedNodeType()).toBe('g1')
-    await manage1.close()
-    await expect(manage1.root).not.toBeVisible()
-
-    const manage2 = await group2.manageGroupNode()
-    expect(await manage2.getSelectedNodeType()).toBe('g2')
-  })
-
   test('Reconnects inputs after configuration changed via manage dialog save', async ({
     comfyPage
   }) => {

browser_tests/helpers/manageGroupNode.ts

@@ -1,14 +1,12 @@
 import { Locator, Page } from '@playwright/test'
 export class ManageGroupNode {
   footer: Locator
-  header: Locator
 
   constructor(
     readonly page: Page,
     readonly root: Locator
   ) {
     this.footer = root.locator('footer')
-    this.header = root.locator('header')
   }
 
   async setLabel(name: string, label: string) {
@@ -25,11 +23,6 @@ export class ManageGroupNode {
     await this.footer.getByText('Close').click()
   }
 
-  async getSelectedNodeType() {
-    const select = this.header.locator('select').first()
-    return await select.inputValue()
-  }
-
   async selectNode(name: string) {
     const list = this.root.locator('.comfy-group-manage-list-items')
     const item = list.getByText(name)

browser_tests/menu.spec.ts

@@ -350,6 +350,23 @@ test.describe('Menu', () => {
       await comfyPage.page.waitForTimeout(1000)
       expect(await tab.getNode('KSampler (Advanced)').count()).toBe(2)
     })
+
+    test('Can migrate legacy bookmarks', async ({ comfyPage }) => {
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks', [
+        'foo/',
+        'foo/KSampler (Advanced)',
+        'UNKNOWN',
+        'KSampler'
+      ])
+      await comfyPage.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [])
+      await comfyPage.reload()
+      expect(await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks')).toEqual(
+        []
+      )
+      expect(
+        await comfyPage.getSetting('Comfy.NodeLibrary.Bookmarks.V2')
+      ).toEqual(['foo/', 'foo/KSamplerAdvanced', 'KSampler'])
+    })
   })
 
   test.describe('Workflows sidebar', () => {
@@ -435,56 +452,6 @@ test.describe('Menu', () => {
       ).toEqual(['*Unsaved Workflow.json', 'workflow3.json', 'workflow4.json'])
     })
 
-    test('Exported workflow does not contain localized slot names', async ({
-      comfyPage
-    }) => {
-      await comfyPage.loadWorkflow('default')
-      const exportedWorkflow = await comfyPage.getExportedWorkflow({
-        api: false
-      })
-      expect(exportedWorkflow).toBeDefined()
-      for (const node of exportedWorkflow.nodes) {
-        for (const slot of node.inputs) {
-          expect(slot.localized_name).toBeUndefined()
-          expect(slot.label).toBeUndefined()
-        }
-        for (const slot of node.outputs) {
-          expect(slot.localized_name).toBeUndefined()
-          expect(slot.label).toBeUndefined()
-        }
-      }
-    })
-
-    test('Can export same workflow with different locales', async ({
-      comfyPage
-    }) => {
-      await comfyPage.loadWorkflow('default')
-
-      // Setup download listener before triggering the export
-      const downloadPromise = comfyPage.page.waitForEvent('download')
-      await comfyPage.menu.topbar.exportWorkflow('exported_default.json')
-
-      // Wait for the download and get the file content
-      const download = await downloadPromise
-      expect(download.suggestedFilename()).toBe('exported_default.json')
-
-      // Get the exported workflow content
-      const downloadedContent = await comfyPage.getExportedWorkflow({
-        api: false
-      })
-
-      await comfyPage.setSetting('Comfy.Locale', 'zh')
-      await comfyPage.reload()
-
-      const downloadedContentZh = await comfyPage.getExportedWorkflow({
-        api: false
-      })
-
-      // Compare the exported workflow with the original
-      expect(downloadedContent).toBeDefined()
-      expect(downloadedContent).toEqual(downloadedContentZh)
-    })
-
     test('Can save workflow as with same name', async ({ comfyPage }) => {
       await comfyPage.menu.topbar.saveWorkflow('workflow5.json')
       expect(
@@ -492,26 +459,12 @@ test.describe('Menu', () => {
       ).toEqual(['workflow5.json'])
 
       await comfyPage.menu.topbar.saveWorkflowAs('workflow5.json')
-      await comfyPage.confirmDialog.click('overwrite')
+      await comfyPage.confirmDialog('Overwrite existing file?', 'Yes')
       expect(
         await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
       ).toEqual(['workflow5.json'])
     })
 
-    test('Can save temporary workflow with unmodified name', async ({
-      comfyPage
-    }) => {
-      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
-
-      await comfyPage.menu.topbar.saveWorkflow('Unsaved Workflow')
-      // Should not trigger the overwrite dialog
-      expect(
-        await comfyPage.page.locator('.comfy-modal-content:visible').count()
-      ).toBe(0)
-
-      expect(await comfyPage.isCurrentWorkflowModified()).toBe(false)
-    })
-
     test('Can overwrite other workflows with save as', async ({
       comfyPage
     }) => {
@@ -527,7 +480,7 @@ test.describe('Menu', () => {
       )
 
       await topbar.saveWorkflowAs('workflow1.json')
-      await comfyPage.confirmDialog.click('overwrite')
+      await comfyPage.confirmDialog('Overwrite existing file?', 'Yes')
       // The old workflow1.json should be deleted and the new one should be saved.
       expect(
         await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
@@ -569,43 +522,6 @@ test.describe('Menu', () => {
         await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
       ).toEqual(['*Unsaved Workflow.json'])
     })
-
-    test('Can delete workflows (confirm disabled)', async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.Workflow.ConfirmDelete', false)
-
-      const { topbar, workflowsTab } = comfyPage.menu
-
-      const filename = 'workflow18.json'
-      await topbar.saveWorkflow(filename)
-      expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
-
-      await workflowsTab.getOpenedItem(filename).click({ button: 'right' })
-      await comfyPage.nextFrame()
-      await comfyPage.clickContextMenuItem('Delete')
-
-      await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
-      expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
-        '*Unsaved Workflow.json'
-      ])
-    })
-
-    test('Can delete workflows', async ({ comfyPage }) => {
-      const { topbar, workflowsTab } = comfyPage.menu
-
-      const filename = 'workflow18.json'
-      await topbar.saveWorkflow(filename)
-      expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([filename])
-
-      await workflowsTab.getOpenedItem(filename).click({ button: 'right' })
-      await comfyPage.clickContextMenuItem('Delete')
-
-      await comfyPage.confirmDialog.click('delete')
-
-      await expect(workflowsTab.getOpenedItem(filename)).not.toBeVisible()
-      expect(await workflowsTab.getOpenedWorkflowNames()).toEqual([
-        '*Unsaved Workflow.json'
-      ])
-    })
   })
 
   test.describe('Workflows topbar tabs', () => {

browser_tests/nodeDisplay.spec.ts

@@ -48,8 +48,4 @@ test.describe('Optional input', () => {
     expect(vaeInput.link).toBeNull()
     expect(convertedInput.link).not.toBeNull()
   })
-  test('slider', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('simple_slider')
-    await expect(comfyPage.canvas).toHaveScreenshot('simple_slider.png')
-  })
 })

browser_tests/rightClickMenu.spec.ts

@@ -32,11 +32,11 @@ test.describe('Canvas Right Click Menu', () => {
   test('Can convert to group node', async ({ comfyPage }) => {
     await comfyPage.select2Nodes()
     await expect(comfyPage.canvas).toHaveScreenshot('selected-2-nodes.png')
+    comfyPage.page.on('dialog', async (dialog) => {
+      await dialog.accept('GroupNode2CLIP')
+    })
     await comfyPage.rightClickCanvas()
     await comfyPage.clickContextMenuItem('Convert to Group Node')
-    await comfyPage.promptDialogInput.fill('GroupNode2CLIP')
-    await comfyPage.page.keyboard.press('Enter')
-    await comfyPage.promptDialogInput.waitFor({ state: 'hidden' })
     await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot(
       'right-click-node-group-node.png'
@@ -186,22 +186,4 @@ test.describe('Node Right Click Menu', () => {
       'selected-nodes-unpinned.png'
     )
   })
-
-  test('Can clone pinned nodes', async ({ comfyPage }) => {
-    const nodeCount = await comfyPage.getGraphNodesCount()
-    const node = (await comfyPage.getFirstNodeRef())!
-    await node.clickContextMenuOption('Pin')
-    await comfyPage.nextFrame()
-    await node.click('title', { button: 'right' })
-    await expect(
-      comfyPage.page.locator('.litemenu-entry:has-text("Unpin")')
-    ).toBeAttached()
-    const cloneItem = comfyPage.page.locator(
-      '.litemenu-entry:has-text("Clone")'
-    )
-    await cloneItem.click()
-    await expect(cloneItem).toHaveCount(0)
-    await comfyPage.nextFrame()
-    expect(await comfyPage.getGraphNodesCount()).toBe(nodeCount + 1)
-  })
 })

browser_tests/userSelectView.spec.ts

@@ -1,42 +0,0 @@
-import { expect } from '@playwright/test'
-import { userSelectPageFixture as test } from './fixtures/UserSelectPage'
-
-/**
- * Expects ComfyUI backend to be launched with `--multi-user` flag.
- */
-test.describe('User Select View', () => {
-  test.beforeEach(async ({ userSelectPage, page }) => {
-    await page.goto(userSelectPage.url)
-    await page.evaluate(() => {
-      localStorage.clear()
-      sessionStorage.clear()
-    })
-  })
-
-  test('Redirects to user select view if no user is logged in', async ({
-    userSelectPage,
-    page
-  }) => {
-    await page.goto(userSelectPage.url)
-    await expect(userSelectPage.container).toBeVisible()
-    expect(page.url()).toBe(userSelectPage.selectionUrl)
-  })
-
-  test('Can create new user', async ({ userSelectPage, page }) => {
-    const randomUser = `test-user-${Math.random().toString(36).substring(2, 7)}`
-    await page.goto(userSelectPage.url)
-    await expect(page).toHaveURL(userSelectPage.selectionUrl)
-    await userSelectPage.newUserInput.fill(randomUser)
-    await userSelectPage.nextButton.click()
-    await expect(page).toHaveURL(userSelectPage.url)
-  })
-
-  test('Can choose existing user', async ({ userSelectPage, page }) => {
-    await page.goto(userSelectPage.url)
-    await expect(page).toHaveURL(userSelectPage.selectionUrl)
-    await userSelectPage.existingUserSelect.click()
-    await page.locator('.p-select-list .p-select-option').first().click()
-    await userSelectPage.nextButton.click()
-    await expect(page).toHaveURL(userSelectPage.url)
-  })
-})

index.html

@@ -9,6 +9,33 @@
   </head>
   <body class="litegraph grid">
     <div id="vue-app"></div>
+    <div id="comfy-user-selection" class="comfy-user-selection" style="display: none;">
+      <main class="comfy-user-selection-inner">
+        <h1>ComfyUI</h1>
+        <form>
+          <section>
+            <label>New user:
+              <input placeholder="Enter a username" />
+            </label>
+          </section>
+          <div class="comfy-user-existing">
+            <span class="or-separator">OR</span>
+            <section>
+              <label>
+                Existing user:
+                <select>
+                  <option hidden disabled selected value> Select a user </option>
+                </select>
+              </label>
+            </section>
+          </div>
+          <footer>
+            <span class="comfy-user-error">&nbsp;</span>
+            <button class="comfy-btn comfy-user-button-next">Next</button>
+          </footer>
+        </form>
+      </main>
+    </div>
     <script type="module" src="src/main.ts"></script>
   </body>
 </html>

lint-staged.config.js

@@ -3,7 +3,6 @@ export default {
 
   './**/*.{ts,tsx,vue}': (stagedFiles) => [
     ...formatFiles(stagedFiles),
-    'vue-tsc --noEmit',
     'tsc --noEmit',
     'tsc-strict'
   ]

package.json

@@ -1,22 +1,17 @@
 {
-  "name": "@comfyorg/comfyui-frontend",
+  "name": "comfyui-frontend",
   "private": true,
-  "version": "1.5.18",
+  "version": "1.4.9",
   "type": "module",
-  "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
-  "homepage": "https://comfy.org",
-  "description": "Official front-end implementation of ComfyUI",
-  "license": "GPL-3.0-only",
   "scripts": {
     "dev": "vite",
     "dev:electron": "vite --config vite.electron.config.mts",
     "build": "npm run typecheck && vite build",
-    "build:types": "vite build --config vite.types.config.mts && node scripts/prepare-types.js",
     "deploy": "npm run build && node scripts/deploy.js",
     "release": "node scripts/release.js",
     "update-litegraph": "node scripts/update-litegraph.js",
     "zipdist": "node scripts/zipdist.js",
-    "typecheck": "vue-tsc --noEmit && tsc --noEmit && tsc-strict",
+    "typecheck": "tsc --noEmit && tsc-strict",
     "format": "prettier --write './**/*.{js,ts,tsx,vue}'",
     "test": "jest --config jest.config.base.ts",
     "test:jest:fast": "jest --config jest.config.fast.ts",
@@ -28,16 +23,13 @@
     "prepare": "husky || true",
     "preview": "vite preview",
     "lint": "eslint src",
-    "lint:fix": "eslint src --fix",
-    "locale": "lobe-i18n locale",
-    "collect-i18n": "playwright test --config=playwright.i18n.config.ts"
+    "lint:fix": "eslint src --fix"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
     "@babel/preset-env": "^7.22.20",
     "@eslint/js": "^9.8.0",
     "@iconify/json": "^2.2.245",
-    "@lobehub/i18n-cli": "^1.20.0",
     "@pinia/testing": "^0.1.5",
     "@playwright/test": "^1.44.1",
     "@types/jest": "^29.5.12",
@@ -74,16 +66,14 @@
     "unplugin-icons": "^0.19.3",
     "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.6",
-    "vite-plugin-dts": "^4.3.0",
     "vite-plugin-static-copy": "^1.0.5",
     "vitest": "^2.0.5",
-    "vue-tsc": "^2.1.10",
     "zip-dir": "^2.0.0"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "^0.3.32",
-    "@comfyorg/litegraph": "^0.8.46",
+    "@comfyorg/comfyui-electron-types": "^0.3.6",
+    "@comfyorg/litegraph": "^0.8.35",
     "@primevue/themes": "^4.0.5",
     "@vueuse/core": "^11.0.0",
     "@xterm/addon-fit": "^0.10.0",

playwright.i18n.config.ts

@@ -1,14 +0,0 @@
-import { PlaywrightTestConfig } from '@playwright/test'
-
-const config: PlaywrightTestConfig = {
-  testDir: './scripts',
-  use: {
-    baseURL: 'http://localhost:5173',
-    headless: true
-  },
-  reporter: 'list',
-  timeout: 10000,
-  testMatch: /collect-i18n\.ts/
-}
-
-export default config

public/assets/images/Git-Logo-White.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="292" height="92pt" viewBox="0 0 219 92"><defs><clipPath id="a"><path d="M159 .79h25V69h-25Zm0 0"/></clipPath><clipPath id="b"><path d="M183 9h35.371v60H183Zm0 0"/></clipPath><clipPath id="c"><path d="M0 .79h92V92H0Zm0 0"/></clipPath></defs><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M130.871 31.836c-4.785 0-8.351 2.352-8.351 8.008 0 4.261 2.347 7.222 8.093 7.222 4.871 0 8.18-2.867 8.18-7.398 0-5.133-2.961-7.832-7.922-7.832Zm-9.57 39.95c-1.133 1.39-2.262 2.87-2.262 4.612 0 3.48 4.434 4.524 10.527 4.524 5.051 0 11.926-.352 11.926-5.043 0-2.793-3.308-2.965-7.488-3.227Zm25.761-39.688c1.563 2.004 3.22 4.789 3.22 8.793 0 9.656-7.571 15.316-18.536 15.316-2.789 0-5.312-.348-6.879-.785l-2.87 4.613 8.526.52c15.059.96 23.934 1.398 23.934 12.968 0 10.008-8.789 15.665-23.934 15.665-15.75 0-21.757-4.004-21.757-10.88 0-3.917 1.742-6 4.789-8.878-2.875-1.211-3.828-3.387-3.828-5.739 0-1.914.953-3.656 2.523-5.312 1.566-1.652 3.305-3.305 5.395-5.219-4.262-2.09-7.485-6.617-7.485-13.058 0-10.008 6.613-16.88 19.93-16.88 3.742 0 6.004.344 8.008.872h16.972v7.394l-8.007.61"/><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M170.379 16.281c-4.961 0-7.832-2.87-7.832-7.836 0-4.957 2.871-7.656 7.832-7.656 5.05 0 7.922 2.7 7.922 7.656 0 4.965-2.871 7.836-7.922 7.836Zm-11.227 52.305V61.71l4.438-.606c1.219-.175 1.394-.437 1.394-1.746V33.773c0-.953-.261-1.566-1.132-1.824l-4.7-1.656.957-7.047h18.016V59.36c0 1.399.086 1.57 1.395 1.746l4.437.606v6.875h-24.805"/></g><g clip-path="url(#b)"><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M218.371 65.21c-3.742 1.825-9.223 3.481-14.187 3.481-10.356 0-14.27-4.175-14.27-14.015V31.879c0-.524 0-.871-.7-.871h-6.093v-7.746c7.664-.871 10.707-4.703 11.664-14.188h8.27v12.36c0 .609 0 .87.695.87h12.27v8.704h-12.965v20.797c0 5.136 1.218 7.136 5.918 7.136 2.437 0 4.96-.609 7.047-1.39l2.351 7.66"/></g><g clip-path="url(#c)"><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M89.422 42.371 49.629 2.582a5.868 5.868 0 0 0-8.3 0l-8.263 8.262 10.48 10.484a6.965 6.965 0 0 1 7.173 1.668 6.98 6.98 0 0 1 1.656 7.215l10.102 10.105a6.963 6.963 0 0 1 7.214 1.657 6.976 6.976 0 0 1 0 9.875 6.98 6.98 0 0 1-9.879 0 6.987 6.987 0 0 1-1.519-7.594l-9.422-9.422v24.793a6.979 6.979 0 0 1 1.848 1.32 6.988 6.988 0 0 1 0 9.88c-2.73 2.726-7.153 2.726-9.875 0a6.98 6.98 0 0 1 0-9.88 6.893 6.893 0 0 1 2.285-1.523V34.398a6.893 6.893 0 0 1-2.285-1.523 6.988 6.988 0 0 1-1.508-7.637L29.004 14.902 1.719 42.187a5.868 5.868 0 0 0 0 8.301l39.793 39.793a5.868 5.868 0 0 0 8.3 0l39.61-39.605a5.873 5.873 0 0 0 0-8.305"/></g></svg>

scripts/collect-i18n.ts

@@ -1,253 +0,0 @@
-import * as fs from 'fs'
-import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
-import { CORE_MENU_COMMANDS } from '../src/constants/coreMenuCommands'
-import { SERVER_CONFIG_ITEMS } from '../src/constants/serverConfig'
-import { formatCamelCase, normalizeI18nKey } from '../src/utils/formatUtil'
-import { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
-import type { ComfyCommandImpl } from '../src/stores/commandStore'
-import type { FormItem, SettingParams } from '../src/types/settingTypes'
-import type { ComfyApi } from '../src/scripts/api'
-
-const localePath = './src/locales/en/main.json'
-const nodeDefsPath = './src/locales/en/nodeDefs.json'
-const commandsPath = './src/locales/en/commands.json'
-
-const extractMenuCommandLocaleStrings = (): Set<string> => {
-  const labels = new Set<string>()
-  for (const [category, _] of CORE_MENU_COMMANDS) {
-    category.forEach((category) => labels.add(category))
-  }
-  return labels
-}
-
-test('collect-i18n', async ({ comfyPage }) => {
-  const commands = (
-    await comfyPage.page.evaluate(() => {
-      const workspace = window['app'].extensionManager
-      const commands = workspace.command.commands as ComfyCommandImpl[]
-      return commands.map((command) => ({
-        id: command.id,
-        label: command.label,
-        menubarLabel: command.menubarLabel,
-        tooltip: command.tooltip
-      }))
-    })
-  ).sort((a, b) => a.id.localeCompare(b.id))
-
-  const locale = JSON.parse(fs.readFileSync(localePath, 'utf-8'))
-
-  // Commands
-  const menuLabels = extractMenuCommandLocaleStrings()
-  const commandMenuLabels = new Set(
-    commands.map((command) => command.menubarLabel ?? command.label ?? '')
-  )
-  const allLabels = new Set([...menuLabels, ...commandMenuLabels])
-  allLabels.delete('')
-
-  const allLabelsLocale = Object.fromEntries(
-    Array.from(allLabels).map((label) => [normalizeI18nKey(label), label])
-  )
-
-  const allCommandsLocale = Object.fromEntries(
-    commands.map((command) => [
-      normalizeI18nKey(command.id),
-      {
-        label: command.label,
-        tooltip: command.tooltip
-      }
-    ])
-  )
-
-  // Settings
-  const settings = await comfyPage.page.evaluate(() => {
-    const workspace = window['app'].extensionManager
-    const settings = workspace.setting.settings as Record<string, SettingParams>
-    return Object.values(settings)
-      .sort((a, b) => a.id.localeCompare(b.id))
-      .map((setting) => ({
-        id: setting.id,
-        name: setting.name,
-        tooltip: setting.tooltip,
-        category: setting.category,
-        options: setting.options
-      }))
-  })
-
-  const allSettingsLocale = Object.fromEntries(
-    settings.map((setting) => [
-      normalizeI18nKey(setting.id),
-      {
-        name: setting.name,
-        tooltip: setting.tooltip,
-        // Don't translate the locale options as each option is in its own language.
-        // e.g. "English", "中文", "Русский", "日本語", "한국어"
-        options:
-          setting.options && setting.id !== 'Comfy.Locale'
-            ? Object.fromEntries(
-                setting.options.map((option) => {
-                  const optionLabel =
-                    typeof option === 'string' ? option : option.text
-                  return [normalizeI18nKey(optionLabel), optionLabel]
-                })
-              )
-            : undefined
-      }
-    ])
-  )
-
-  const allSettingCategoriesLocale = Object.fromEntries(
-    settings
-      .flatMap((setting) => {
-        return (setting.category ?? setting.id.split('.')).slice(0, 2)
-      })
-      .map((category: string) => [
-        normalizeI18nKey(category),
-        formatCamelCase(category)
-      ])
-  )
-
-  // Server Configs
-  const allServerConfigsLocale = Object.fromEntries(
-    SERVER_CONFIG_ITEMS.map((config) => [
-      normalizeI18nKey(config.id),
-      {
-        name: (config as unknown as FormItem).name,
-        tooltip: (config as unknown as FormItem).tooltip
-      }
-    ])
-  )
-
-  const allServerConfigCategoriesLocale = Object.fromEntries(
-    SERVER_CONFIG_ITEMS.flatMap((config) => {
-      return config.category ?? ['General']
-    }).map((category) => [
-      normalizeI18nKey(category),
-      formatCamelCase(category)
-    ])
-  )
-
-  // Node Definitions
-  const nodeDefs: ComfyNodeDefImpl[] = Object.values(
-    await comfyPage.page.evaluate(async () => {
-      const api = window['app'].api as ComfyApi
-      return await api.getNodeDefs()
-    })
-  ).map((def) => new ComfyNodeDefImpl(def))
-
-  console.log(`Collected ${nodeDefs.length} node definitions`)
-
-  const allDataTypesLocale = Object.fromEntries(
-    nodeDefs
-      .flatMap((nodeDef) => {
-        const inputDataTypes = Object.values(nodeDef.inputs.all).map(
-          (inputSpec) => inputSpec.type
-        )
-        const outputDataTypes = nodeDef.outputs.all.map((output) => output.type)
-        const allDataTypes = [...inputDataTypes, ...outputDataTypes].flatMap(
-          (type: string) => type.split(',')
-        )
-        return allDataTypes.map((dataType) => [
-          normalizeI18nKey(dataType),
-          dataType
-        ])
-      })
-      .sort((a, b) => a[0].localeCompare(b[0]))
-  )
-
-  function extractInputs(nodeDef: ComfyNodeDefImpl) {
-    const inputs = Object.fromEntries(
-      nodeDef.inputs.all.flatMap((input) => {
-        const name = input.name
-        const tooltip = input.tooltip
-
-        if (name === undefined && tooltip === undefined) {
-          return []
-        }
-
-        return [
-          [
-            normalizeI18nKey(input.name),
-            {
-              name,
-              tooltip
-            }
-          ]
-        ]
-      })
-    )
-    return Object.keys(inputs).length > 0 ? inputs : undefined
-  }
-
-  function extractOutputs(nodeDef: ComfyNodeDefImpl) {
-    const outputs = Object.fromEntries(
-      nodeDef.outputs.all.flatMap((output, i) => {
-        // Ignore data types if they are already translated in allDataTypesLocale.
-        const name = output.name in allDataTypesLocale ? undefined : output.name
-        const tooltip = output.tooltip
-
-        if (name === undefined && tooltip === undefined) {
-          return []
-        }
-
-        return [
-          [
-            i.toString(),
-            {
-              name,
-              tooltip
-            }
-          ]
-        ]
-      })
-    )
-    return Object.keys(outputs).length > 0 ? outputs : undefined
-  }
-
-  const allNodeDefsLocale = Object.fromEntries(
-    nodeDefs
-      .sort((a, b) => a.name.localeCompare(b.name))
-      .map((nodeDef) => [
-        normalizeI18nKey(nodeDef.name),
-        {
-          display_name: nodeDef.display_name ?? nodeDef.name,
-          description: nodeDef.description || undefined,
-          inputs: extractInputs(nodeDef),
-          outputs: extractOutputs(nodeDef)
-        }
-      ])
-  )
-
-  const allNodeCategoriesLocale = Object.fromEntries(
-    nodeDefs.flatMap((nodeDef) =>
-      nodeDef.category
-        .split('/')
-        .map((category) => [normalizeI18nKey(category), category])
-    )
-  )
-
-  fs.writeFileSync(
-    localePath,
-    JSON.stringify(
-      {
-        ...locale,
-        menuLabels: allLabelsLocale,
-        settingsDialog: allSettingsLocale,
-        // Do merge for settingsCategories as there are some manual translations
-        // for special panels like "About" and "Keybinding".
-        settingsCategories: {
-          ...(locale.settingsCategories ?? {}),
-          ...allSettingCategoriesLocale
-        },
-        serverConfigItems: allServerConfigsLocale,
-        serverConfigCategories: allServerConfigCategoriesLocale,
-        dataTypes: allDataTypesLocale,
-        nodeCategories: allNodeCategoriesLocale
-      },
-      null,
-      2
-    )
-  )
-
-  fs.writeFileSync(nodeDefsPath, JSON.stringify(allNodeDefsLocale, null, 2))
-  fs.writeFileSync(commandsPath, JSON.stringify(allCommandsLocale, null, 2))
-})

scripts/prepare-types.js

@@ -1,40 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-
-const mainPackage = JSON.parse(fs.readFileSync('./package.json', 'utf8'))
-
-// Create the types-only package.json
-const typesPackage = {
-  name: `${mainPackage.name}-types`,
-  version: mainPackage.version,
-  types: './index.d.ts',
-  files: ['index.d.ts'],
-  publishConfig: {
-    access: 'public'
-  },
-  repository: mainPackage.repository,
-  homepage: mainPackage.homepage,
-  description: `TypeScript definitions for ${mainPackage.name}`,
-  license: mainPackage.license,
-  dependencies: {
-    '@comfyorg/litegraph': mainPackage.dependencies['@comfyorg/litegraph']
-  },
-  peerDependencies: {
-    vue: mainPackage.dependencies.vue,
-    zod: mainPackage.dependencies.zod
-  }
-}
-
-// Ensure dist directory exists
-const distDir = './dist'
-if (!fs.existsSync(distDir)) {
-  fs.mkdirSync(distDir, { recursive: true })
-}
-
-// Write the new package.json to the dist directory
-fs.writeFileSync(
-  path.join(distDir, 'package.json'),
-  JSON.stringify(typesPackage, null, 2)
-)
-
-console.log('Types package.json have been prepared in the dist directory')

src/App.vue

@@ -16,7 +16,6 @@ import BlockUI from 'primevue/blockui'
 import ProgressSpinner from 'primevue/progressspinner'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import { useEventListener } from '@vueuse/core'
-import { isElectron, showNativeMenu } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
 const isLoading = computed<boolean>(() => workspaceStore.spinner)
@@ -26,23 +25,8 @@ const handleKey = (e: KeyboardEvent) => {
 useEventListener(window, 'keydown', handleKey)
 useEventListener(window, 'keyup', handleKey)
 
-const showContextMenu = (event: PointerEvent) => {
-  const { target } = event
-  switch (true) {
-    case target instanceof HTMLTextAreaElement:
-    case target instanceof HTMLInputElement && target.type === 'text':
-      // TODO: Context input menu explicitly for text input
-      showNativeMenu({ type: 'text' })
-      return
-  }
-}
-
 onMounted(() => {
   window['__COMFYUI_FRONTEND_VERSION__'] = config.app_version
   console.log('ComfyUI Front-end version:', config.app_version)
-
-  if (isElectron()) {
-    document.addEventListener('contextmenu', showContextMenu)
-  }
 })
 </script>

src/assets/css/style.css

@@ -9,7 +9,6 @@
   --fg-color: #000;
   --bg-color: #fff;
   --comfy-menu-bg: #353535;
-  --comfy-menu-secondary-bg: #292929;
   --comfy-input-bg: #222;
   --input-text: #ddd;
   --descrip-text: #999;
@@ -180,8 +179,8 @@ body {
 }
 
 .comfy-modal select,
-.comfy-modal input[type='button'],
-.comfy-modal input[type='checkbox'] {
+.comfy-modal input[type=button],
+.comfy-modal input[type=checkbox] {
   margin: 3px 3px 3px 4px;
 }
 
@@ -295,8 +294,8 @@ span.drag-handle {
   padding: 3px 4px;
   cursor: move;
   vertical-align: middle;
-  margin-top: -0.4em;
-  margin-left: -0.2em;
+  margin-top: -.4em;
+  margin-left: -.2em;
   font-size: 12px;
   font-family: sans-serif;
   letter-spacing: 2px;
@@ -363,11 +362,11 @@ button.comfy-queue-btn {
   z-index: 99;
 }
 
-.comfy-modal.comfy-settings input[type='range'] {
+.comfy-modal.comfy-settings input[type="range"] {
   vertical-align: middle;
 }
 
-.comfy-modal.comfy-settings input[type='range'] + input[type='number'] {
+.comfy-modal.comfy-settings input[type="range"] + input[type="number"] {
   width: 3.5em;
 }
 
@@ -398,7 +397,7 @@ button.comfy-queue-btn {
   .comfy-menu span.drag-handle {
     display: none;
   }
-
+  
   .comfy-menu-queue-size {
     flex: unset;
   }
@@ -432,9 +431,7 @@ button.comfy-queue-btn {
   padding-right: 8px;
 }
 
-.graphdialog input,
-.graphdialog textarea,
-.graphdialog select {
+.graphdialog input, .graphdialog textarea, .graphdialog select {
   background-color: var(--comfy-input-bg);
   border: 2px solid;
   border-color: var(--border-color);
@@ -496,8 +493,7 @@ dialog::backdrop {
   text-align: right;
 }
 
-#comfy-settings-dialog tbody button,
-#comfy-settings-dialog table > button {
+#comfy-settings-dialog tbody button, #comfy-settings-dialog table > button {
   background-color: var(--bg-color);
   border: 1px var(--border-color) solid;
   border-radius: 0;
@@ -576,7 +572,7 @@ dialog::backdrop {
 }
 
 .litemenu-entry.has_submenu::after {
-  content: '>';
+  content: ">";
   position: absolute;
   top: 0;
   right: 2px;
@@ -590,8 +586,7 @@ dialog::backdrop {
   will-change: transform;
 }
 
-.litegraph.litecontextmenu
-  .litemenu-entry:hover:not(.disabled):not(.separator) {
+.litegraph.litecontextmenu .litemenu-entry:hover:not(.disabled):not(.separator) {
   background-color: var(--comfy-menu-bg) !important;
   filter: brightness(155%);
   will-change: transform;

src/components/MenuHamburger.vue

@@ -9,7 +9,6 @@
     size="large"
     v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"
     @click="exitFocusMode"
-    @contextmenu="showNativeMenu"
   />
 </template>
 
@@ -19,7 +18,6 @@ import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { computed, CSSProperties, watchEffect } from 'vue'
 import { app } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'
-import { showNativeMenu } from '@/utils/envUtil'
 
 const workspaceState = useWorkspaceStore()
 const settingStore = useSettingStore()

src/components/actionbar/ComfyQueueButton.vue

@@ -61,9 +61,11 @@ import BatchCountEdit from './BatchCountEdit.vue'
 import ButtonGroup from 'primevue/buttongroup'
 import { useI18n } from 'vue-i18n'
 import {
+  AutoQueueMode,
   useQueuePendingTaskCountStore,
   useQueueSettingsStore
 } from '@/stores/queueStore'
+import type { MenuItem } from 'primevue/menuitem'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import { useCommandStore } from '@/stores/commandStore'
@@ -74,10 +76,10 @@ const queueCountStore = storeToRefs(useQueuePendingTaskCountStore())
 const { mode: queueMode } = storeToRefs(useQueueSettingsStore())
 
 const { t } = useI18n()
-const queueModeMenuItemLookup = computed(() => ({
+const queueModeMenuItemLookup: Record<AutoQueueMode, MenuItem> = {
   disabled: {
     key: 'disabled',
-    label: t('menu.queue'),
+    label: 'Queue',
     tooltip: t('menu.disabledTooltip'),
     command: () => {
       queueMode.value = 'disabled'
@@ -85,7 +87,7 @@ const queueModeMenuItemLookup = computed(() => ({
   },
   instant: {
     key: 'instant',
-    label: `${t('menu.queue')} (${t('menu.instant')})`,
+    label: 'Queue (Instant)',
     tooltip: t('menu.instantTooltip'),
     command: () => {
       queueMode.value = 'instant'
@@ -93,19 +95,19 @@ const queueModeMenuItemLookup = computed(() => ({
   },
   change: {
     key: 'change',
-    label: `${t('menu.queue')} (${t('menu.onChange')})`,
-    tooltip: t('menu.onChangeTooltip'),
+    label: 'Queue (Change)',
+    tooltip: t('menu.changeTooltip'),
     command: () => {
       queueMode.value = 'change'
     }
   }
-}))
+}
 
 const activeQueueModeMenuItem = computed(
-  () => queueModeMenuItemLookup.value[queueMode.value]
+  () => queueModeMenuItemLookup[queueMode.value]
 )
 const queueModeMenuItems = computed(() =>
-  Object.values(queueModeMenuItemLookup.value)
+  Object.values(queueModeMenuItemLookup)
 )
 
 const executingPrompt = computed(() => !!queueCountStore.count.value)

src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative overflow-hidden h-full w-full bg-black" ref="rootEl">
+  <div class="relative h-full w-full bg-black" ref="rootEl">
     <div class="p-terminal rounded-none h-full w-full p-2">
       <div class="h-full terminal-host" ref="terminalEl"></div>
     </div>