上期更新的Coze的应用,有小伙伴想要出个完整的带工作流的案例。
主打一个宠粉~今天它来了。
今天我们就来做一个“一键P图”的小应用。
先上效果:
开始~~~~点击“+”, 创建一个应用。
起名字、介绍、生成应用图标的操作和之前智能体一样。
点击“业务逻辑”,新建一个工作流。
输入工作流的名称和描述。
在开始节点添加两个参数:
变量名:tupian 变量类型:Image。
变量名:xiugai 变量类型:String
接下来添加“一键改图”插件。直接看下面动图。
这个插件是Coze官方出品,稳定性不用质疑。
只需要把图片和要修改的内容告诉他即可。
连接“开始节点”和“结束节点”。
修改“一件改图”节点的输入参数:
原图对应“开始节点”的“tupian”。
提示词对应“开始节点”的“xiugai”。
然后就是结束节点
output对应一件改图节点的“data”参数。
OK,只需要这3个节点 工作流就完成了。
试运行一下看下效果如何。
左侧原图,右侧AI改图。毫无违和感。
OK,接下来对接前端客户界面。
前端搭建:
什么内容都不要加,点击中间空白处。
修改Page的“排列方向”参数为“横向”。
然后在拖2个“容器”组件进来。宽度50%,高度100%。
如果你没设置上一部的参数,上下排列的两个。
因为我想要左侧是上传图片和输入提示词的部分,右侧是生成图片的预览部分。
所以上面调整了Page的排列顺序。
左侧方上传图片和输入内容的部分。
这里使用“表单”组件,拖入到左侧“容器”组件中。
第一项输入内容我们可以用来让用户输入提示词。
红框框起来的第二项和第三项用不到,直接点击后删除即可。
再加入一个“上传图片”组件到表单中。设置上传图片数量为:1。
接下来是生成按钮。
修改按钮参数如下:
禁用状态和加载状态到都选择我我们工作流的loading参数,这个代表工作流是否在运行状态。
当工作流是运行状态的时候,按键就会变成禁用状态。
当工作流是运行状态的时候,按钮会加载一个 转圈圈的动画效果,告诉用户运行成功了,正在生成。
右侧容器我们只需要添加一个“图片”组件用来显示生成出来的图片。
设置图片显示的比例大小。
如果你和我一样感觉这两个大蓝框框好丑~
可以点击“导航”。找到Div1和Div2,这就是我们刚才添加的额两个容器。
点击修改它们的背景色为白色。
再不上面的字改一下,这下是不是舒服duole.
在点击Form1这个表单组件,添加事件。
事件类型:OnSubmit事件代表表单提交的时候,也就是我们“开始生成”按钮的时候执行什么动作。
执行动作:调用Workflow,表示调用工作流。
Workflow:调用哪个工作流的?当时是我们刚才新建的“yijianptu”这个工作流。
workflow入参配置:入参就是我们工作流开始节点的两个参数,“tupian”和“xiugai”。
tupian填这个:{"file_id":"{{ ImageUpload1.value[0].file_id }}"}
xiugai填这个:{{ Textarea1.value }}
右侧图片也需要在设置一下参数。
图片来源设置为“绑定数据”。
参数选择我们工作流的结束节点返回的参数“output”。
这样再工作流完成后它就会自动显示出来生成的图片了。
点击右上角“预览”测试一下效果吧。
提示词内容:把图片中的火元素变成冰元素。
测试没问题就可以直接发布啦。~
体验地址:https://www.coze.cn/store/project/7443756854372548623?entity_id=1&bid=6ejeman8k500c
记得点赞,在看,收藏三连!
我们下期再见,拜拜啦~