> ## Documentation Index
> Fetch the complete documentation index at: https://dripart-docs-recommend-assets-api.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-recommend-assets-api/ULrnoxvh1jKRd09a/images/interface/app_mode/app_mode_1.png?fit=max&auto=format&n=ULrnoxvh1jKRd09a&q=85&s=954c76990c001352daefd4147dad7fb1" 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-recommend-assets-api/ULrnoxvh1jKRd09a/images/interface/app_mode/app_mode_2.png?fit=max&auto=format&n=ULrnoxvh1jKRd09a&q=85&s=53dcdeda4c7f03bb156bea9b3c00ab6e" 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-recommend-assets-api/ULrnoxvh1jKRd09a/images/interface/app_mode/app_mode_3.png?fit=max&auto=format&n=ULrnoxvh1jKRd09a&q=85&s=23c26e89a1726c24884d867734d3d004" 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-recommend-assets-api/ULrnoxvh1jKRd09a/images/interface/app_mode/app_mode_4.png?fit=max&auto=format&n=ULrnoxvh1jKRd09a&q=85&s=e34bd54dde3eaf6c8b7e034e510bb7c2" 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-recommend-assets-api/ULrnoxvh1jKRd09a/images/interface/app_mode/app_mode_5.png?fit=max&auto=format&n=ULrnoxvh1jKRd09a&q=85&s=9b12fb30abc42fee1fa95d5921f2ff35" 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-recommend-assets-api/ULrnoxvh1jKRd09a/images/interface/app_mode/app_mode_6.png?fit=max&auto=format&n=ULrnoxvh1jKRd09a&q=85&s=ada623005bf11a33a1bcfb103aec2f07" 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-recommend-assets-api/ULrnoxvh1jKRd09a/images/interface/app_mode/app_mode_7.png?fit=max&auto=format&n=ULrnoxvh1jKRd09a&q=85&s=6286054a87c120ad87da292567f956bf" 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-recommend-assets-api/ULrnoxvh1jKRd09a/images/interface/app_mode/app_mode_8.png?fit=max&auto=format&n=ULrnoxvh1jKRd09a&q=85&s=c76a7a362af9e4849540528125b4ab16" 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-recommend-assets-api/ULrnoxvh1jKRd09a/images/interface/app_mode/app_mode_15.png?fit=max&auto=format&n=ULrnoxvh1jKRd09a&q=85&s=a392f30bfeb37c7db08f912d472d0a3e" 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-recommend-assets-api/ULrnoxvh1jKRd09a/images/interface/app_mode/app_mode_9.png?fit=max&auto=format&n=ULrnoxvh1jKRd09a&q=85&s=2f6cdd2bd0499fc1ebdeb2b467b56d58" 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-recommend-assets-api/ULrnoxvh1jKRd09a/images/interface/app_mode/app_mode_11.png?fit=max&auto=format&n=ULrnoxvh1jKRd09a&q=85&s=1c1fa9c542f831d5ff916796f2300862" 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-recommend-assets-api/ULrnoxvh1jKRd09a/images/interface/app_mode/app_mode_12.png?fit=max&auto=format&n=ULrnoxvh1jKRd09a&q=85&s=72abc4510ab17f9d7eff440d94a40400" 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-recommend-assets-api/ULrnoxvh1jKRd09a/images/interface/app_mode/app_mode_13.png?fit=max&auto=format&n=ULrnoxvh1jKRd09a&q=85&s=947fef53f4e51fb744463ac40f8ab3cb" 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-recommend-assets-api/ULrnoxvh1jKRd09a/images/interface/app_mode/app_mode_14.png?fit=max&auto=format&n=ULrnoxvh1jKRd09a&q=85&s=70a02c67695ee5c7328a6993aed4dc90" alt="分享对话框，显示已生成的链接和 Copy 按钮" width="2494" height="1438" data-path="images/interface/app_mode/app_mode_14.png" />

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

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