Translate node title and description (#1822)

* Collect node def i18n

* Add collected en locale

* Sort by node id

* Add translations

* Show translated node def

* Update locales [skip ci]

---------

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

src/scripts/app.ts

@@ -5,7 +5,7 @@ import {
   initWidgets
 } from './widgets'
 import { ComfyUI, $el } from './ui'
-import { api } from './api'
+import { api, type ComfyApi } from './api'
 import { defaultGraph } from './defaultGraph'
 import {
   getPngMetadata,
@@ -61,6 +61,7 @@ import { type IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
 import { workflowService } from '@/services/workflowService'
 import { useWidgetStore } from '@/stores/widgetStore'
 import { deserialiseAndCreate } from '@/extensions/core/vintageClipboard'
+import { t } from '@/i18n'
 
 export const ANIM_PREVIEW_WIDGET = '$$comfy_animation_preview'
 
@@ -114,6 +115,7 @@ export class ComfyApp {
   static clipspace_return_node = null
 
   vueAppReady: boolean
+  api: ComfyApi
   ui: ComfyUI
   extensions: ComfyExtension[]
   extensionManager: ExtensionManager
@@ -184,6 +186,7 @@ export class ComfyApp {
   constructor() {
     this.vueAppReady = false
     this.ui = new ComfyUI(this)
+    this.api = api
     this.bodyTop = $el('div.comfyui-body-top', { parent: document.body })
     this.bodyLeft = $el('div.comfyui-body-left', { parent: document.body })
     this.bodyRight = $el('div.comfyui-body-right', { parent: document.body })
@@ -1818,14 +1821,38 @@ export class ComfyApp {
     nodeDefStore.updateNodeDefs(nodeDefArray)
   }
 
+  #translateNodeDefs(defs: Record<string, ComfyNodeDef>) {
+    return Object.fromEntries(
+      Object.entries(defs).map(([name, def]) => [
+        name,
+        {
+          ...def,
+          display_name: t(
+            `nodeDefs.${name}.display_name`,
+            def.display_name ?? def.name
+          ),
+          description: def.description
+            ? t(`nodeDefs.${name}.description`, def.description)
+            : undefined
+        }
+      ])
+    )
+  }
+
+  async #getNodeDefs() {
+    return this.#translateNodeDefs(
+      await api.getNodeDefs({
+        validate: useSettingStore().get('Comfy.Validation.NodeDefs')
+      })
+    )
+  }
+
   /**
    * Registers nodes with the graph
    */
   async registerNodes() {
     // Load node definitions from the backend
-    const defs = await api.getNodeDefs({
-      validate: useSettingStore().get('Comfy.Validation.NodeDefs')
-    })
+    const defs = await this.#getNodeDefs()
     await this.registerNodesFromDefs(defs)
     await this.#invokeExtensionsAsync('registerCustomNodes')
     if (this.vueAppReady) {
@@ -2766,10 +2793,7 @@ export class ComfyApp {
       useToastStore().add(requestToastMessage)
     }
 
-    const defs = await api.getNodeDefs({
-      validate: useSettingStore().get('Comfy.Validation.NodeDefs')
-    })
-
+    const defs = await this.#getNodeDefs()
     for (const nodeId in defs) {
       this.registerNodeDef(nodeId, defs[nodeId])
     }