> ## Documentation Index
> Fetch the complete documentation index at: https://dripart-docs-custom-nodes-sdk-v2-frontend.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# ComfyUI APP 模式指南

> 了解如何在 ComfyUI 中构建和使用 APP 模式，通过定义自定义输入/输出界面来简化工作流交互。

APP 模式通过允许您定义自定义输入/输出界面来简化工作流交互，使分享和使用工作流更加便捷，无需编辑节点。

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/MR6CmStFoWA" title="ComfyUI APP Mode Guide" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

<Note>
  APP 模式从 ComfyUI 前端版本 1.41.13 开始正式支持，早期版本为测试阶段。
</Note>

## 进入 APP 模式

进入 APP 模式有两种方式：点击左上角图标（**1**）并在下拉菜单中选择 **Enter app mode**，或使用界面顶部的面包屑导航下拉菜单（**2**）进入。

<img src="https://mintcdn.com/dripart-docs-custom-nodes-sdk-v2-frontend/DI5j4Ue64XACVY3A/images/interface/app_mode/app_mode_1.png?fit=max&auto=format&n=DI5j4Ue64XACVY3A&q=85&s=6b5154986164432bce0bc91b78a6bdfe" alt="通过左上角菜单进入 APP 模式" width="2400" height="1446" data-path="images/interface/app_mode/app_mode_1.png" />

1. 点击左上角图标（标注 **1** 处），在下拉菜单中选择 **Enter app mode**。
2. 也可通过顶部面包屑导航下拉菜单（标注 **2** 处）进入 APP 模式。

## 构建 APP 模式工作流

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/tqLY-vjY-3I" title="如何创建 APP 模式工作流" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

如果工作流从未配置过 APP 模式，进入 APP 模式后将自动打开 APP 模式构建器。

<img src="https://mintcdn.com/dripart-docs-custom-nodes-sdk-v2-frontend/DI5j4Ue64XACVY3A/images/interface/app_mode/app_mode_2.png?fit=max&auto=format&n=DI5j4Ue64XACVY3A&q=85&s=400bfaf80dd73794f1ca1e93ba4a33e8" alt="APP 模式构建器入口界面" width="2404" height="1450" data-path="images/interface/app_mode/app_mode_2.png" />

1. 若工作流尚未创建过 APP 模式配置，进入后会默认打开 APP 模式构建器。
2. 点击 **Build app** 进入 APP 构建器，开始进行配置。

### 第一步：选择输入

构建器界面顶部显示四个引导步骤（标注 **1**、**2**、**3**、**4**），底部按钮可退出构建器或在步骤间切换。

<img src="https://mintcdn.com/dripart-docs-custom-nodes-sdk-v2-frontend/DI5j4Ue64XACVY3A/images/interface/app_mode/app_mode_3.png?fit=max&auto=format&n=DI5j4Ue64XACVY3A&q=85&s=837464decc07ad486b2816491d355086" alt="APP 构建器界面总览" width="2398" height="1448" data-path="images/interface/app_mode/app_mode_3.png" />

1. 顶部的 **1 2 3 4** 对应四个构建步骤：选择输入、选择输出、预览、设置默认视图。
2. 底部按钮可退出构建器或在步骤间切换。
3. 画布中标记的区域为可选择的输入/输出参数。
4. 右侧面板实时预览当前配置效果。

点击顶部的 **Inputs** 步骤。画布中会高亮显示可选择的输入节点，点击节点将其选为输入参数，可选项包括图像上传、文本提示词输入、模型选择等。已选参数将显示在右侧边栏中。

### 第二步：选择输出

点击顶部的 **Outputs** 步骤，选择在 APP 中展示的输出节点，如 Preview 节点或 Save Image 节点。

<img src="https://mintcdn.com/dripart-docs-custom-nodes-sdk-v2-frontend/DI5j4Ue64XACVY3A/images/interface/app_mode/app_mode_4.png?fit=max&auto=format&n=DI5j4Ue64XACVY3A&q=85&s=c5efb6987e2512c88c03cb6746689c0d" alt="选择输出节点并在右侧面板预览" width="2402" height="1448" data-path="images/interface/app_mode/app_mode_4.png" />

1. 选择要在 APP 中展示的输出节点。
2. 与输入节点类似，右侧边栏会实时显示已选输出节点的预览效果。

### 第三步：预览

点击 **Preview** 步骤，查看 APP 的最终布局。已选输入显示在右侧面板，输出区域呈现在画布中。

<img src="https://mintcdn.com/dripart-docs-custom-nodes-sdk-v2-frontend/DI5j4Ue64XACVY3A/images/interface/app_mode/app_mode_5.png?fit=max&auto=format&n=DI5j4Ue64XACVY3A&q=85&s=914e0e86c0a80dc6456757ab63b8b0e9" alt="预览模式展示输入输出布局" width="2464" height="1434" data-path="images/interface/app_mode/app_mode_5.png" />

1. 在预览模式中，检查所有输入和输出配置是否符合预期。
2. 如需调整，点击 **Back** 返回上一步进行修改。

### 第四步：设置默认视图

点击 **Set a default view** 步骤，选择工作流默认以 **App** 模式还是 **Node Graph** 模式打开，然后点击 **Apply** 确认。

<img src="https://mintcdn.com/dripart-docs-custom-nodes-sdk-v2-frontend/DI5j4Ue64XACVY3A/images/interface/app_mode/app_mode_6.png?fit=max&auto=format&n=DI5j4Ue64XACVY3A&q=85&s=7dc21c27a0cb47cf61014e8e0e976720" alt="设置默认视图步骤" width="2464" height="1432" data-path="images/interface/app_mode/app_mode_6.png" />

1. 选择工作流打开时的默认模式：**App** 模式或 **Node Graph** 模式。
2. 选择 **App** 并点击 **Apply** 确认，工作流将默认以 APP 模式打开。

应用设置后，界面会出现确认提示。

<img src="https://mintcdn.com/dripart-docs-custom-nodes-sdk-v2-frontend/DI5j4Ue64XACVY3A/images/interface/app_mode/app_mode_7.png?fit=max&auto=format&n=DI5j4Ue64XACVY3A&q=85&s=529bf7c1613304d470fc6395ec302d05" alt="确认提示，包含 View app 按钮" width="2462" height="1436" data-path="images/interface/app_mode/app_mode_7.png" />

点击 **View app** 进入 APP 模式，开始使用工作流。

## 使用 APP 模式

进入 APP 模式后，右侧面板显示所有已配置的输入选项。调整好输入参数后，点击 **Run** 执行工作流。

<img src="https://mintcdn.com/dripart-docs-custom-nodes-sdk-v2-frontend/DI5j4Ue64XACVY3A/images/interface/app_mode/app_mode_8.png?fit=max&auto=format&n=DI5j4Ue64XACVY3A&q=85&s=03f1583e11f6dad8e4a1f2b6c498a876" alt="APP 模式界面，包含输入面板和 Run 按钮" width="2491" height="1438" data-path="images/interface/app_mode/app_mode_8.png" />

1. 右侧 **Input** 面板可在运行前调整输入参数。
2. 点击 **Run** 执行工作流。
3. 左侧边栏提供其他功能，如重新构建 APP、查看资产或打开工作流面板。

APP 模式同样针对移动端及窄屏布局进行了适配。界面会切换为标签页形式，可在输入面板、输出视图和 Media Assets 面板之间自由切换。

<img src="https://mintcdn.com/dripart-docs-custom-nodes-sdk-v2-frontend/DI5j4Ue64XACVY3A/images/interface/app_mode/app_mode_15.png?fit=max&auto=format&n=DI5j4Ue64XACVY3A&q=85&s=95954a24b7bbefa64fd1b3f34fc96136" alt="APP 模式移动端布局，包含输入、输出和资产标签页" width="2494" height="1545" data-path="images/interface/app_mode/app_mode_15.png" />

运行过程中，顶部会出现 **Cancel this run** 按钮，可随时停止当前执行。

<img src="https://mintcdn.com/dripart-docs-custom-nodes-sdk-v2-frontend/DI5j4Ue64XACVY3A/images/interface/app_mode/app_mode_9.png?fit=max&auto=format&n=DI5j4Ue64XACVY3A&q=85&s=da9a4b6039e503816121853b80ff3568" alt="运行状态，包含取消按钮和结果面板" width="2490" height="1438" data-path="images/interface/app_mode/app_mode_9.png" />

1. 点击顶部的 **Cancel this run** 可取消当前运行。
2. 在底部面板中切换查看队列或运行结果。
3. 点击相关区域可打开资产面板（assets panel）。

## 保存和分享工作流

### 保存工作流

使用 `Ctrl + S`（Mac 上为 `Cmd + S`）保存工作流以供将来使用。

点击左侧边栏按钮可打开已保存的工作流面板。

<img src="https://mintcdn.com/dripart-docs-custom-nodes-sdk-v2-frontend/DI5j4Ue64XACVY3A/images/interface/app_mode/app_mode_11.png?fit=max&auto=format&n=DI5j4Ue64XACVY3A&q=85&s=7460b0359d06b1fde2f40ad6cd39c3f7" alt="左侧边栏展示已保存的 APP 工作流" width="2495" height="1441" data-path="images/interface/app_mode/app_mode_11.png" />

1. 点击左侧边栏按钮打开面板，展示所有已保存的 APP 工作流。
2. 可在这些已保存的 APP 工作流间进行切换操作。

### 分享工作流

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/-JEDHJktsr0" title="如何分享工作流" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

在 APP 模式中，点击左侧边栏的 **Share** 按钮。若工作流尚未保存，系统会弹出对话框，提示先保存工作流才能生成链接。

<img src="https://mintcdn.com/dripart-docs-custom-nodes-sdk-v2-frontend/DI5j4Ue64XACVY3A/images/interface/app_mode/app_mode_12.png?fit=max&auto=format&n=DI5j4Ue64XACVY3A&q=85&s=80fca7d1bd0f339750debfb3ea181aa2" alt="分享对话框，提示先保存工作流" width="2494" height="1436" data-path="images/interface/app_mode/app_mode_12.png" />

1. 点击左侧边栏的 Share 按钮，打开分享对话框。
2. 若工作流未保存，输入工作流名称后点击 **Save workflow** 继续。

保存完成后，分享对话框中将显示生成链接的选项。

<img src="https://mintcdn.com/dripart-docs-custom-nodes-sdk-v2-frontend/DI5j4Ue64XACVY3A/images/interface/app_mode/app_mode_13.png?fit=max&auto=format&n=DI5j4Ue64XACVY3A&q=85&s=31ec02e63ce6e0740293a5f32f841b2f" alt="分享对话框，显示 Create a link 按钮" width="2494" height="1436" data-path="images/interface/app_mode/app_mode_13.png" />

点击 **Create a link** 生成可分享的工作流链接。

<img src="https://mintcdn.com/dripart-docs-custom-nodes-sdk-v2-frontend/DI5j4Ue64XACVY3A/images/interface/app_mode/app_mode_14.png?fit=max&auto=format&n=DI5j4Ue64XACVY3A&q=85&s=6b3fe508f7f44b46ec64335d0d505ffa" alt="分享对话框，显示已生成的链接和 Copy 按钮" width="2494" height="1438" data-path="images/interface/app_mode/app_mode_14.png" />

点击 **Copy** 复制链接。接收者可直接通过链接打开并运行工作流，工作流的完整配置已包含在链接中。

<Note>
  分享链接仅在 Comfy Cloud 上支持。
</Note>
