比如这个AI写真馆，上传照片选择对应风格直接生成，不再是之前的对话方式，这次更加符合用户习惯。　

操作也很简单，以“拖、拉、拽”的方式快速完成用户界面的搭建，在对接工作流来完成后端的业务逻辑，真的太强了！！　

如果你还是感觉满分，Coze还准备了多种模块，直接套用即可。

今天我把前面我们做的证件照工作流直接做成了网页应用。　

看下效果。　

我们来看下具体需要怎么操作。　

点击“+”的时候 多出来了一个创建应用的选项。　

起名字、介绍、生成应用图标的操作和之前智能体一样。（PS：这次生成的图标好丑！）　

进入应用界面可以看到分成了2部分，分别是“业务逻辑”和“用户界面”。　

“业务逻辑”简单来说就是我们这个应用需要用到哪些工作流、插件或者数据库。　

“用户界面”很好理解，就是用户操作的界面是什么样的。　

我们先来搞“用户界面”

把大概的需要用到的组件拖出来。　

这里我们把页面分成2个部分分别使用的2个“容器组件”：　

1、左边放上传照片、选择性别、选择颜色的组件。　

2、右边放生成出来的效果。　

添加左侧内容：　

分别使用了：　

1.“文本”组件。　

2.“图片上传”组件。　

3.“下拉选择”组件。　

4.“下拉选择”组件。　

5.“按钮”组件。　

上面这4种组件都在一个表单组件里。　

可以直接添加一个表单组件，然后在具体调整里面的都包含什么组件。　

添加右侧内容：　

右侧比较简单，就是显示生成好的证件照。　

这里用一个“图片”组件来显示就可以了。设置一下显示比例。　

界面大概就这样，剩下就是美化了。　

加图片，调背景颜色等等，大家可以自行捣鼓，这里就不展开讲了。　

PS：Coze的这次设计感觉有点反人类的地方，删除组件居然不是“Delete”键。而是键盘的“退格”键。　

对就是打错字删除的那个按键，让我找的好辛苦！！！！希望Coze可以修改一下，好不习惯啊~~　

接下来是“业务逻辑”板块。　

来到“业务逻辑”页面，把我们做好的工作流添加进去。　

不知道工作流怎么做的可以看

“AI制作证件照，背景颜色可选！（Coze图像流）”

最近工作流改版，不再分图像流和工作流了。　

添加节点的方式也改了，有些功能移到了插件里。　

可以在里面搜索找到。　

OK，工作流的问题就先不说了，后面我们再重新出一起工作流搭建的内容。　

工作流引入完成之后，需要和前端“用户界面”的内容关联到一起。　

首先点击导航，找到我们左侧的这个表单。“Form1”。　

为这个表单添加一个“事件”。　

事件配置方法如下：　

简单解释一下我理解的意识：　

事件类型：OnSubmit（表示当这个表单被提交的时候）。　

执行动作：调用workflow（调用工作流）。　

workflow：选择要调用的工作流名称。　

Workflow 入参配置：要调用的工作流需要输入的内容，对应我们工作流开始节点的这个几个参数。　

zhaopian：{"file_id":"{{ ImageUpload1.value[0].file_id }}"}　

xibie：{{ Select1.value }}　

yanse：{{ Select2.value }}　

另外检查一下自己的“生成”按钮有没有点击事件。　

如果你是直接添加的“表单”组件，默认这个按钮事件已经自动配置了。　

到这里我们左侧的部分组件和工作流对接就完成了。　

右侧图片显示就比较简单了。　

把“图片”的来源改成“绑定数据”，绑定工作流返回的内容。　

全部设置完毕直接点击预览和发布就可以啦。