扣子平台应该是目前用起来最方便的大模型平台了，可视化工作流、图像流（已经合并到工作流）、丰富的插件生态，再加上正在探索的模板、商店等盈利方式，现在又完善了应用UI，只能说，扣子平台的节奏真的挺好。
本文主要通过一个表情包应用的开发与发布，带大家了解一下扣子AI应用的完整流程。
前置准备
- 注册并登录扣子平台。
12月初，扣子平台将原有的基础版、专业版账户体系合并，确实是想用户所想啊。
-
简单说明一下计划实现的功能：
用户可以录入形象、颜色、表情，大模型根据这些信息自动生成各个表情对应的表情图片。
具体步骤
整个扣子AI应用开发的流程如下：
创建AI应用
登录扣子后，按照如下操作“创建应用”。
“确认”后，进入应用集成开发环境 (IDE)，如下图，顶部可以切换“业务逻辑”和“用户界面”。
业务逻辑：
- 资源：当前应用使用到的各类资源，最主要的就是工作流了。
- 可视化操作区域：和工作流操作方式雷同。
用户界面：
- 组件：
- 组件：各类显示元素，目前还不是很多，估计后续会不断完善。
- 模板：各类官方提供的模板，可以一键应用到画布，目前多为展示类模板。
- 导航：包括两部分，页面列表和当前页面组件结构（或者叫大纲）。
- 画布：拖拽、放置组件的地方。
- 属性面板：选中拖入画布的组件后，右侧会有组件对应的选型和事件，分别对应显示效果和交互效果。
熟悉了IDE后，我们直接进入开发的实质性阶段。
搭建业务逻辑
搭建业务逻辑其实和扣子之前的“工作流”操作没有什么区别，最终工作流截图如下。
- 参考图生成：在表情图片生成时，作为参考图使用，为了多张图片尽可能的保持形象一致。
- 拆分表情：计划支持多个表情生成，这里会根据拆分用户录入的表情字符串为数组，方便后续循环。
- 循环：由于图片生成节点不支持批处理，这里采用循环方式进行多张图片生成。
参考图生成节点信息：
表情图像生成节点信息：
如果对工作流有疑问，可以回过去看下之前的文章：
用户界面
所有组件都是直接鼠标选中后，拖拽到中间画布即可。
删除组件是选中画布中的组件后，使用退格键（Backspace）删除，我个人没有在界面上找到删除按钮。
布局
居中容器
先通过一个“容器”实现界面的居中显示，因为这个应用比较小，就不撑满全屏了。
- 宽度：80%。
- 高度：适应内容，就是会随着放进来的内容多少动态变化。
- 排列方向：横向
左右两个容器
拖入2个容器到上一步的容器中，因为设置了排列方向，所以会横向放置。
- 宽度：50%。
- 高度：适应内容。
- 背景色、圆角等根据个人喜好设置下即可。
界面
左侧录入表单
直接将表单拖入左侧容器，进行组件属性设置：
- 文字内容修改，暂时无法双击后编辑，需要选中组件后，在右侧“属性面板”-“标签内容”修改。
- 表单拖入后会有默认的组件，直接“Backspace”删除后，复制粘贴3份“多行输入框”即可。
- 表单内的“输入组件”都是输入框和标签一组的，选中后，即可修改标签内容。
最终左侧效果如图：
右侧表情包呈现
右侧呈现生成结果，也就是图片的显示，由于我设计的是可以生成多个图片，因此这里主要使用“列表”组件和“图片”组件。
拖入“列表”组件，将列表中原有的标题内容删除，然后拖入一个图片（列表组件自带循环功能）。
可以根据喜好，调整下样式。
此时只是占位图片，尚未绑定数据，等待“交互”章节完成后，可以将工作流输出绑定到列表及图片上。
图片列表上方我放了一个“文本”组件，为了方便输出工作流结果调试使用，正式发布前会删除。
交互
给“生成”按钮添加点击事件，并调用工作流。
因为每个组件要对应绑定到工作流的参数上，可以通过下列方式，确定每个组件的ID。
添加事件
如果是表单按钮，默认会是提交表单，建议删除事件后，重新添加。
绑定参数
为工作流参数绑定对应的输入框。
绑定结果数据
先为“列表”绑定工作流输出的图片数组，记得选中“列表”组件。
再为列表中的“图片”绑定数组中的子项，记得先选中列表中的“图片”组件。
测试
使用“用户界面”右侧的“预览”即可查看效果。
效果如下：
发布前删除debug文字，添加一些标识文字，设置了按钮点击加载中效果，可见最终效果。
发布
点击右上角“发布”按钮即可填写信息进行发布。
等待审核即可，审核速度还是很快的。
最终效果
目前版本的形象一致性还有待提升，后续再继续哈。
总结
整体学习成本不高，如果有过HTML+CSS开发经验的，估计会更加容易上手，并且开发效率也是杠杠的。
本次分享目的主要是为了带领大家了解下整体流程，所以很多功能特性尚未应用到，大家如果有兴趣，可以更进一步学习下。
官方文档还是挺详细的。
