diff --git a/images/interface/overview/comfyui-new-interface-main.png b/images/interface/overview/comfyui-new-interface-main.png index d3a23b716..6f240fdf5 100644 Binary files a/images/interface/overview/comfyui-new-interface-main.png and b/images/interface/overview/comfyui-new-interface-main.png differ diff --git a/images/interface/overview/comfyui-new-interface-menu-bar.png b/images/interface/overview/comfyui-new-interface-menu-bar.png deleted file mode 100644 index d6537a505..000000000 Binary files a/images/interface/overview/comfyui-new-interface-menu-bar.png and /dev/null differ diff --git a/images/interface/overview/comfyui_new_interface.jpg b/images/interface/overview/comfyui_new_interface.jpg index cbed5cd4c..2aadfb002 100644 Binary files a/images/interface/overview/comfyui_new_interface.jpg and b/images/interface/overview/comfyui_new_interface.jpg differ diff --git a/images/zh/interface/comfyui-new-interface-menu-bar.png b/images/zh/interface/comfyui-new-interface-menu-bar.png deleted file mode 100644 index 59b5a881b..000000000 Binary files a/images/zh/interface/comfyui-new-interface-menu-bar.png and /dev/null differ diff --git a/interface/overview.mdx b/interface/overview.mdx index 03ff23421..d5df0eadf 100644 --- a/interface/overview.mdx +++ b/interface/overview.mdx @@ -11,10 +11,6 @@ Typically, when you start the ComfyUI server, you will see an interface like thi ![ComfyUI Basic Interface](/images/interface/overview/comfyui_new_interface.jpg) -If you are an earlier user, you may have seen the previous menu interface like this: - -![ComfyUI Old Interface](/images/interface/overview/comfyui_old_interface.jpg) - Currently, the [ComfyUI frontend](https://github.com/Comfy-Org/ComfyUI_frontend) is a separate project, released and maintained as an independent pip package. If you want to contribute, you can fork this [repository](https://github.com/Comfy-Org/ComfyUI_frontend) and submit a pull request. ## Localization Support @@ -33,17 +29,29 @@ Below are the main interface areas of ComfyUI and a brief introduction to each p ![ComfyUI Workspace](/images/interface/overview/comfyui-new-interface-main.png) Currently, apart from the main workflow interface, the ComfyUI interface is mainly divided into the following parts: -1. Menu Bar: Provides workflow, editing, help menus, workflow execution, ComfyUI Manager entry, etc. -2. Sidebar Panel Switch Buttons: Used to switch between workflow history queue, node library, model library, local user workflow browsing, etc. -3. Theme Switch Button: Quickly switch between ComfyUI's default dark theme and light theme -4. Settings: Click to open the settings button -5. Canvas Menu: Provides zoom in, zoom out, and auto-fit operations for the ComfyUI canvas -### Menu Bar Functions +1. **Main Menu**: Click to expand the function menu, including file operations, help menu, etc. + +**Left Navigation Sidebar:** +2. **Left Panel Entries**: + - **ASSETS**: Displays generated images, videos, and other assets. + - **Nodes**: Lists ComfyUI native and third-party nodes. + - **Models**: Shows model information detected after ComfyUI starts. After startup, if models are downloaded, press the `r` key to refresh node definitions and get the latest models. + - **Workflows**: Displays locally saved workflows. + - **Templates**: Provides ComfyUI built-in workflow templates. + +**Bottom Left Toolbar:** +3. **Bottom Toolbar**: Contains buttons for Help (opens runtime logs), Console (opens runtime logs), Shortcuts (displays shortcut panel), and Settings (opens settings panel). -![ComfyUI Workspace](/images/interface/overview/comfyui-new-interface-menu-bar.png) +**Top Header Bar:** +4. **Top Area**: Displays the currently opened workflow. +5. **New Workflow Button**: Click to create a new blank workflow file. +6. **Right Control Area**: Run and queue control management, where you can run workflows and view the queue. +7. **Login Status**: Not displayed by default, only shown after login, used when closed-source API nodes are required. +8. **Quick Access Button**: Opens the right-side panel. -The image above shows the corresponding functions of the top menu bar, including common features, which we will explain in detail in the specific function usage section. +**Bottom Right Canvas Controls:** +9. **Canvas Navigation Tools**: Can switch between move or pan modes, open the minimap, and toggle node connection display. ### Sidebar Panel Buttons diff --git a/zh-CN/interface/overview.mdx b/zh-CN/interface/overview.mdx index bb2dedf82..a89cea325 100644 --- a/zh-CN/interface/overview.mdx +++ b/zh-CN/interface/overview.mdx @@ -34,20 +34,32 @@ icon: "window" 下面是主要的 ComfyUI 的界面分区以及各部分的简要介绍。 -![ComfyUI 工作区](/images/zh/interface/comfyui-new-interface-main.png) +![ComfyUI 工作区](/images/interface/overview/comfyui-new-interface-main.png) 目前 ComfyUI 的界面除开主要的工作流界面，主要分为以下几个部分： -1. 菜单栏：提供工作流、编辑、帮助菜单，工作流执行、ComfyUI Manager入口等等 -2. 侧边栏面板切换按钮：用于切换工作流历史队列、节点库、模型库、本地用户工作流浏览等 -3. 切换主题按钮： 在 ComfyUI 默认的暗色主题和亮色主题之间进行快速切换 -4. 设置：点击后可打开设置按钮 -5. 画布菜单： 提供了ComfyUI 画布的视图放大、缩小、自适应操作等 -### 菜单栏功能 +1. **主菜单**：点击展开功能菜单，含文件操作、帮助菜单等。 -![ComfyUI 工作区](/images/zh/interface/comfyui-new-interface-menu-bar.png) +**左侧导航栏：** +2. **左侧面板入口**： + - **ASSETS**：显示生成的图像、视频等资产。 + - **Nodes**：列出 ComfyUI 原生及第三方节点。 + - **Models**：展示 ComfyUI 启动后检测到的模型信息，启动后若有模型下载等，按快捷键 `r` 刷新节点定义获取最新模型。 + - **Workflows**：展示本地保存的工作流。 + - **Templates**：提供 ComfyUI 内置工作流模板。 -上图是顶部菜单栏的对应功能，包含的常见的功能，我们会在具体的功能使用部分再详细介绍对应的功能 +**底部左侧工具栏：** +3. **底部工具栏**：含帮助、控制台（打开运行日志）、快捷键（显示快捷键面板）、设置（打开设置面板）按钮。 + +**顶部标题栏：** +4. **顶部区域**：显示当前已打开工作流。 +5. **新建工作流按钮**：点击新建空白工作流文件。 +6. **右侧控制区**：运行和队列控制管理，可运行工作流、查看队列。 +7. **登录状态**：默认不显示，仅在登录后显示，用于需闭源 API 节点时。 +8. **快捷按钮**：打开右侧面板。 + +**底部右侧画布控制：** +9. **画布导航工具**：可切换移动或平移模式，打开小地图、切换节点连线显示。 ### 侧边栏面板按钮