Skip to content

Commit 4ea6bd6

Browse files
authored
Add more custom nodes info for both users and developers (#381)
* Add Custom Node Resources * Save i18n draft * Update Chinese version * Refine the i18n docs * Fix broken links * Remove sidebar icon * Update translation
1 parent 8a4bbf3 commit 4ea6bd6

File tree

12 files changed

+511
-22
lines changed

12 files changed

+511
-22
lines changed

custom-nodes/help_page.mdx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,12 @@ description: "How to create rich documentation for your custom nodes"
77

88
Custom nodes can include rich markdown documentation that will be displayed in the UI instead of the generic node description. This provides users with detailed information about your node's functionality, parameters, and usage examples.
99

10+
If you have already added tooltips for each parameter in the node definition, this basic information can be directly accessed via the node documentation panel.
11+
No additional node documentation needs to be added, and you can refer to the related implementation of [ContextWindowsManualNode](https://github.com/comfyanonymous/ComfyUI/blob/master/comfy_extras/nodes_context_windows.py#L7)
12+
1013
## Setup
1114

12-
To add documentation for your nodes:
15+
To add documentation for your nodes or multi-language support documentation:
1316

1417
1. Create a `docs` folder inside your `WEB_DIRECTORY`
1518
2. Add markdown files named after your nodes (the names of your nodes are the dictionary keys in the `NODE_CLASS_MAPPINGS` dictionary used to register the nodes):

custom-nodes/i18n.mdx

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
---
2+
title: "ComfyUI Custom Nodes i18n Support"
3+
description: "Learn how to add multi-language support for ComfyUI custom nodes"
4+
sidebarTitle: "i18n Support"
5+
---
6+
7+
import SupportedLanguages from '/snippets/interface/supported-languages.mdx'
8+
9+
If you want to add support for multiple languages, you can refer to this document to learn how to implement multi-language support.
10+
11+
<SupportedLanguages />
12+
13+
14+
Custom node i18n demo: [comfyui-wiki/ComfyUI-i18n-demo](https://github.com/comfyui-wiki/ComfyUI-i18n-demo)
15+
16+
## Directory Structure
17+
18+
Create a `locales` folder under your custom node, which supports multiple types of translation files:
19+
20+
```bash
21+
your_custom_node/
22+
├── __init__.py
23+
├── your_node.py
24+
└── locales/ # i18n support folder
25+
├── en/ # English translations (recommended as the base)
26+
│ ├── main.json # General English translation content
27+
│ ├── nodeDefs.json # English node definition translations
28+
│ ├── settings.json # Optional: settings interface translations
29+
│ └── commands.json # Optional: command translations
30+
├── zh/ # Chinese translation files
31+
│ ├── nodeDefs.json # Chinese node definition translations
32+
│ ├── main.json # General Chinese translation content
33+
│ ├── settings.json # Chinese settings interface translations
34+
│ └── commands.json # Chinese command translations
35+
├──...
36+
37+
```
38+
39+
## nodeDefs.json - Node Definition Translation
40+
41+
For example, here is a Python definition example of an [i18n-demo](https://github.com/comfyui-wiki/ComfyUI-i18n-demo) node:
42+
43+
```python
44+
class I18nTextProcessor:
45+
@classmethod
46+
def INPUT_TYPES(cls):
47+
return {
48+
"required": {
49+
"text": ("STRING", {
50+
"multiline": True,
51+
"default": "Hello World!",
52+
"tooltip": "The original text content to be processed"
53+
}),
54+
"operation": (["uppercase", "lowercase", "reverse", "add_prefix"], {
55+
"default": "uppercase",
56+
"tooltip": "The text processing operation to be executed"
57+
}),
58+
"count": ("INT", {
59+
"default": 1,
60+
"min": 1,
61+
"max": 10,
62+
"step": 1,
63+
"tooltip": "The number of times to repeat the operation"
64+
}),
65+
},
66+
"optional": {
67+
"prefix": ("STRING", {
68+
"default": "[I18N] ",
69+
"multiline": False,
70+
"tooltip": "The prefix to add to the text"
71+
}),
72+
}
73+
}
74+
75+
RETURN_TYPES = ("STRING",)
76+
RETURN_NAMES = ("processed_text",)
77+
FUNCTION = "process_text"
78+
CATEGORY = "I18n Demo"
79+
DESCRIPTION = "A simple i18n demo node that demonstrates text processing with internationalization support"
80+
81+
def process_text(self, text, operation, count, prefix=""):
82+
try:
83+
result = text
84+
85+
for _ in range(count):
86+
if operation == "uppercase":
87+
result = result.upper()
88+
elif operation == "lowercase":
89+
result = result.lower()
90+
elif operation == "reverse":
91+
result = result[::-1]
92+
elif operation == "add_prefix":
93+
result = prefix + result
94+
95+
return (result,)
96+
except Exception as e:
97+
print(f"I18nTextProcessor error: {e}")
98+
return (f"Error: {str(e)}",)
99+
```
100+
101+
Then the corresponding localized support nodeDefs.json file content should include:
102+
103+
```json
104+
{
105+
"I18nTextProcessor": {
106+
"display_name": "I18n Text Processor",
107+
"description": "A simple i18n demo node that demonstrates text processing with internationalization support",
108+
"inputs": {
109+
"text": {
110+
"name": "Text Input",
111+
"tooltip": "The original text content to be processed"
112+
},
113+
"operation": {
114+
"name": "Operation Type",
115+
"tooltip": "The text processing operation to be executed",
116+
"options": {
117+
"uppercase": "To Uppercase",
118+
"lowercase": "To Lowercase",
119+
"reverse": "Reverse Text",
120+
"add_prefix": "Add Prefix"
121+
}
122+
},
123+
"count": {
124+
"name": "Repeat Count",
125+
"tooltip": "The number of times to repeat the operation"
126+
},
127+
"prefix": {
128+
"name": "Prefix Text",
129+
"tooltip": "The prefix to add to the text"
130+
}
131+
},
132+
"outputs": {
133+
"0": {
134+
"name": "Processed Text",
135+
"tooltip": "The final processed text result"
136+
}
137+
}
138+
}
139+
}
140+
```
141+
142+
For the node output part, the corresponding output index is used instead of the output name, for example, the first output should be `0`, the second output should be `1`, and so on.
143+
144+
## Menu Settings
145+
146+
For example, in the i18n-demo custom node, we registered the following two menu settings:
147+
```javascript
148+
app.registerExtension({
149+
name: "I18nDemo",
150+
settings: [
151+
{
152+
id: "I18nDemo.EnableDebugMode",
153+
category: ["I18nDemo","DebugMode"], // This matches the settingsCategories key in main.json
154+
name: "Enable Debug Mode", // Will be overridden by translation
155+
tooltip: "Show debug information in console for i18n demo nodes", // Will be overridden by translation
156+
type: "boolean",
157+
defaultValue: false,
158+
experimental: true,
159+
onChange: (value) => {
160+
console.log("I18n Demo:", value ? "Debug mode enabled" : "Debug mode disabled");
161+
}
162+
},
163+
{
164+
id: "I18nDemo.DefaultTextOperation",
165+
category: ["I18nDemo","DefaultTextOperation"], // This matches the settingsCategories key in main.json
166+
name: "Default Text Operation", // Will be overridden by translation
167+
tooltip: "Default operation for text processor node", // Will be overridden by translation
168+
type: "combo",
169+
options: ["uppercase", "lowercase", "reverse", "add_prefix"],
170+
defaultValue: "uppercase",
171+
experimental: true
172+
}
173+
],
174+
})
175+
```
176+
177+
If you need to add corresponding internationalization support, for the menu category, you need to add it in the `main.json` file:
178+
179+
```json
180+
{
181+
"settingsCategories": {
182+
"I18nDemo": "I18n Demo",
183+
"DebugMode": "Debug Mode",
184+
"DefaultTextOperation": "Default Text Operation"
185+
}
186+
}
187+
```
188+
189+
For the translation of the corresponding setting items, it is recommended to update them separately in the `settings.json` file, for example:
190+
191+
```json
192+
{
193+
"I18nDemo_EnableDebugMode": {
194+
"name": "Enable Debug Mode",
195+
"tooltip": "Show debug information in console for i18n demo nodes"
196+
},
197+
"I18nDemo_DefaultTextOperation": {
198+
"name": "Default Text Operation",
199+
"tooltip": "Default operation for text processor node",
200+
"options": {
201+
"uppercase": "Uppercase",
202+
"lowercase": "Lowercase",
203+
"reverse": "Reverse",
204+
"add_prefix": "Add Prefix"
205+
}
206+
}
207+
}
208+
```
209+
210+
Note that the name of the corresponding translation key should replace the `.` in the original id with `_`, for example:
211+
```
212+
"I18nDemo.EnableDebugMode" -> "I18nDemo_EnableDebugMode"
213+
```
214+
215+
## Custom Frontend Component Localization Support
216+
217+
[To be updated]

custom-nodes/overview.mdx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@ simple node that takes an image and inverts it.
1111
![Unique Images Node](/images/invert_image_node.png)
1212

1313

14+
Custom node examples:
15+
- [cookiecutter-comfy-extension](https://github.com/Comfy-Org/cookiecutter-comfy-extension)
16+
- [ComfyUI-React-Extension-Template](https://github.com/Comfy-Org/ComfyUI-React-Extension-Template)
17+
- [ComfyUI_frontend_vue_basic](https://github.com/jtydhr88/ComfyUI_frontend_vue_basic)
18+
19+
1420
## Client-Server Model
1521

1622
Comfy runs in a client-server model. The server, written in Python, handles all the real work: data-processing, models, image diffusion etc. The client, written in Javascript, handles the user interface.

docs.json

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -503,7 +503,6 @@
503503
"pages": [
504504
"custom-nodes/backend/server_overview",
505505
"custom-nodes/backend/lifecycle",
506-
"custom-nodes/backend/manager",
507506
"custom-nodes/backend/datatypes",
508507
"custom-nodes/backend/images_and_masks",
509508
"custom-nodes/backend/more_on_inputs",
@@ -530,7 +529,8 @@
530529
"custom-nodes/js/javascript_selection_toolbox",
531530
"custom-nodes/js/javascript_commands_keybindings",
532531
"custom-nodes/js/javascript_topbar_menu",
533-
"custom-nodes/js/javascript_examples"
532+
"custom-nodes/js/javascript_examples",
533+
"custom-nodes/i18n"
534534
]
535535
},
536536
"custom-nodes/help_page",
@@ -685,13 +685,13 @@
685685
{
686686
"group": "Image",
687687
"pages": [
688-
{
689-
"group": "Qwen",
690-
"pages": [
691-
"zh-CN/tutorials/image/qwen/qwen-image",
692-
"zh-CN/tutorials/image/qwen/qwen-image-edit"
693-
]
694-
},
688+
{
689+
"group": "Qwen",
690+
"pages": [
691+
"zh-CN/tutorials/image/qwen/qwen-image",
692+
"zh-CN/tutorials/image/qwen/qwen-image-edit"
693+
]
694+
},
695695
{
696696
"group": "HiDream",
697697
"pages": [
@@ -1067,7 +1067,6 @@
10671067
"pages": [
10681068
"zh-CN/custom-nodes/backend/server_overview",
10691069
"zh-CN/custom-nodes/backend/lifecycle",
1070-
"zh-CN/custom-nodes/backend/manager",
10711070
"zh-CN/custom-nodes/backend/datatypes",
10721071
"zh-CN/custom-nodes/backend/images_and_masks",
10731072
"zh-CN/custom-nodes/backend/more_on_inputs",
@@ -1094,7 +1093,8 @@
10941093
"zh-CN/custom-nodes/js/javascript_selection_toolbox",
10951094
"zh-CN/custom-nodes/js/javascript_commands_keybindings",
10961095
"zh-CN/custom-nodes/js/javascript_topbar_menu",
1097-
"zh-CN/custom-nodes/js/javascript_examples"
1096+
"zh-CN/custom-nodes/js/javascript_examples",
1097+
"zh-CN/custom-nodes/i18n"
10981098
]
10991099
},
11001100
"zh-CN/custom-nodes/help_page",
@@ -1215,6 +1215,14 @@
12151215
}
12161216
]
12171217
},
1218+
"contextual": {
1219+
"options": [
1220+
"copy",
1221+
"view",
1222+
"chatgpt",
1223+
"claude"
1224+
]
1225+
},
12181226
"integrations": {
12191227
"mixpanel": {
12201228
"projectToken": "3f02b60047411909a040d32a7bf2abe7"

installation/install_custom_node.mdx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,11 @@ We don't recommend this installation method as it loses version control capabili
140140
</Step>
141141
</Steps>
142142

143-
{/* ## Troubleshooting
143+
## Custom Node Resources
144144

145-
[To Be Updated] */}
145+
In ComfyUI, besides the basic node extension functionality, custom nodes can also include the following additional resources:
146+
- [Node Documentation](/custom-nodes/help_page): This feature supports all custom and basic nodes. You can use it to view node documentation, understand the purpose and usage of nodes, and contribute documentation via PRs to the author.
147+
- [Custom Node Workflow Templates](/custom-nodes/workflow_templates): Workflow templates provided by node authors as example workflows, which can be browsed and loaded from the ComfyUI templates.
148+
- [Multi-language Support](/custom-nodes/i18n)
149+
150+
If you are a custom node developer, you can add these resources to make your custom node more user-friendly.
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
Currently, ComfyUI supports the following languages:
2+
3+
- English(en)
4+
- Chinese (Simplified)(zh)
5+
- Chinese (Traditional)(zh-TW)
6+
- French(fr)
7+
- Korean(ko)
8+
- Russian(ru)
9+
- Spanish(es)
10+
- Japanese(ja)
11+
- Arabic(ar)
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
目前,ComfyUI 支持以下语言:
2+
3+
- 英语(en)
4+
- 简体中文(zh)
5+
- 繁体中文(zh-TW)
6+
- 法语(fr)
7+
- 韩语(ko)
8+
- 俄语(ru)
9+
- 西班牙语(es)
10+
- 日语(ja)

zh-CN/custom-nodes/help_page.mdx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ description: "如何为自定义节点创建帮助文档"
77

88
自定义节点可以使用 Markdown 来创建富文本文档,这些文档信息将在 UI 中显示,取代常见的节点描述信息。可以为用户提供关于节点功能、参数和使用示例的详细信息。
99

10+
如果你在节点的相关描述信息中已经添加的每个参数的说明信息(tooltip),那么这些基础信息可以被节点文档面板直接获取,而无需再额外添加节点文档,你可以参考 [ContextWindowsManualNode](https://github.com/comfyanonymous/ComfyUI/blob/master/comfy_extras/nodes_context_windows.py#L7) 的相关实现。
11+
1012
## 设置
1113

12-
为你的节点添加节点文档
14+
为你的节点添加节点文档或多语言支持的节点文档
1315

1416
1. 在你的 `WEB_DIRECTORY` 中创建 `docs` 文件夹
1517
2. 添加以节点名称命名的 Markdown 文件(您的节点名称是用于注册节点的 `NODE_CLASS_MAPPINGS` 字典中的字典键):

0 commit comments

Comments
 (0)