以多风格App搭建为示例，分析常用的搭建方式有哪些可以简化的操作，同时结合模版应用让大家的App快速上线。

示例分析

这里以多Input和多Output两个示例进行分析，并给出优化方案。

🌰：多Input

在多风格App的搭建过程中，每个按钮对应触发一种生图效果。常见的做法如下：

http://127.0.0.1:8099/app/detail?id=84708208-c3fd-11ef-bc8f-2a2fd44fc8aa

image.png

在这里示例中，每增加一种风格，就需要新增一个State来承接，这种操作是否过于繁琐？

如何优化这些冗余的State，让新增风格更加简单容易。优化后的做法如下：

http://127.0.0.1:8099/app/detail?id=2b8feefc-c3fe-11ef-bc8f-2a2fd44fc8aa

image.png

补充：需要介绍Target Input这个功能，通过Target Input可以给下一个节点传参数来设置字段值。

image.png

  1. Input中新增字段

image.png

  1. 关闭User Input

image.png

  1. 点击连线Transition中的设置按钮

image.png

  1. 设置对应字段的传参

备注：目前正在考虑优化Transition、Target Input和User Input的交互，来让这些功能的使用更方便快捷。

🌰：多Output

多个ComfyUI节点对应多个Output呈现，也是很常见的一个搭建方式。大多数情况下一个ComfyUI State对应一个Output（和一个Regenerate），每新增一个风格，就需要新增一组State。搭建效果如下：

http://127.0.0.1:8099/app/detail?id=f3e98786-c409-11ef-bc8f-2a2fd44fc8aa

image.png

在这个示例中，每增加一个风格输出，就需要新增一个State来承接Output渲染给用户。有没有一些手段来优化这个操作，效果如下：