AI知识库

53AI知识库

学习大模型的前沿技术与行业应用场景


最新扣子(coze)实战案例 >拼图游乐馆< 荣获大赛【天马行空】奖,完全免费教程
发布日期:2024-10-16 07:18:08 浏览次数: 1780 来源:杰克船长的AIGC


最近在《拼图游乐馆》Bot留言区中,陆陆续续有很多朋友问我制作过程和设计思路,于是抽空给大家复盘一下这个Bot的制作细节,希望能帮助有需要的朋友!                





截止目前这个bot用户数和对话量已经达到2.3k和11k了,也让我在探索智能体的道路上,备受鼓舞!                







前言(我对AI实践的一些思考)




在探索AI的旅途中,我一直在思考一个问题?技术革新究竟该怎样给现实生活和工作赋能呢?                


创造新东西?另辟蹊径?还是嫁接,衔接到已有的或者即将消失的东西身上?                


毫无疑问,创新是值得肯定和赞赏的,但是创新的源泉不也是源于已有事物的革新换代吗?                



(即梦:马车、汽车、高铁)


马车、汽车、高铁都是基于轮子的不断创新迭代的产物。                


没有哪个设计师,能一下子就能从马车想象到飞驰的高铁!(即使有技术上也无法实现)AI起初也是从单模态文本对话方式逐渐到图、音、视频多模态的跨越。  




所以我个人认为,战略上可以长远打算,战术上就地取材(目前AI能做什么就实现什么)!不用被层出不穷的AI技术内耗自己!                


很喜欢毛主席的战略思路:“你打你的,我打我的”,“没有武器,就借敌人的武器”!


目前AI的探索之路重点就是用新技术,复刻过去即将消失的东西,或者嫁接替换当前陈旧的技术。                



(即梦:天马行空的想象)


虽然给人的感觉像是“新瓶子装旧酒”,会被外人鄙夷,但这是通往AI的必经之路和最容易的途径!                


否则你辛辛苦苦挖空心思挤出的灵感,没过多久,分分钟被开源技术平替取代。


我们个人能做的的就是,船小好掉头,借助AI快速更新迭代,多在落地应用上想点子。


借东风,乘万里!                




拼图游乐馆设计灵感




首先非常感谢Coze官方评审对我的作品《拼图游乐馆》的认可,在“与 AI 童行,扣子创意 Bot 挑战赛”中有幸荣获“天马行空奖”!                








Coze是我用过的智能体设计软件应用中,个人认为,界面最简约美观、功能迭代最迅速、最实用易学的一款产品!                


非常推荐想学习、设计智能体的朋友尝试一下!                





不知道现在的零零后们是否有玩过一种叫做“智力拼图”的小玩具!         





我相信80、90后多多少少有接触过,我也是在网上搜索了半天才找到了几张比较“像样”的图。                


我的Bot《拼图游乐馆》设计灵感就是源于这款小玩具,小时候特别喜欢玩这款拼图小玩具!西游记那版,我现在都还记忆犹新!  





这个游戏规则其实也很简单,整个玩具的拼图是可以随意打乱的。                


每个拼图玩具会有一个多出的空位置,用来给你移动拼图。旁边会有对照图。把拼图复原成对照图的样子你就赢了!       





起初我也想用Coze完全复刻这么个小游戏,但是发现,想要移动每个拼图块,目前coze的卡片UI无法实现拖拽功能。


我以前是做前端开发的,对于在网页上实现拖拽,还是比较容易的,但在Coze上无法实现。所以这个功能我只好放弃阉割了。     


而对于分割图片,实现九宫格,之前也有两个方案:                


1.用程序实现,写一个插件,用程序将图片进行分割。                


2.结合现有的工作流和图像流的方式对图片进行分割。                


综合比赛要求和实现难度,我还是选择了第二套方案(要重点参考主办方的要求“多用图像流功能加分”)

在 Bot 搭建上使用到扣子的插件/工作流/图像流/知识库等工具能力,且运转逻辑合理,使用流畅。

Coze 与 AI 童行,扣子创意 Bot 挑战赛

于是综合我对coze功能的了解和熟悉,总体思路如下:                


用语言模型实现开场、引导、异常处理,用工作流分割具体任务,用图像流处理拼图相关功能。                




详细制作过程




拼图卡片原理:用图像流进行分割,用随机位置覆盖原图






总体流程图:用大模型精准控制工作流与回答

1.外层语言模型流程:                






2.工作流总体运行流程:                









Bot记忆内容:用变量记录用户选择行为,数据库存储数据、图片等信息

变量:                






收集回答错误次数变量:

errorAnsweerNum


收集回答正确次数变量:

successAnsweerNum               


数据库:                






用户选择参观的项目数据库(名称、图片描述词、科普解释等信息):

visit_item


用户当前进行的拼图数据库(原图、分割好的图片、正确答案碎片图等图片信息):

image_game               





卡片UI设计:结合Canva和自定义卡片UI设计交互

1.用Canva这个设计软件制作GIF动图及相关图片     




2.设计完成后Canva可以支持导出:png、jpg、gif、video等格式,我们导出GIF动图作为素材。          




3.设计卡片布局(一个是固定布局和根据数据动态显示的动态布局)绑定图片素材(静态图片直接上传固定绑定、动太变量图片通过设置变量参数动态绑定)            




4.通过工作流绑定UI卡片          







图像流设计:通过基础编辑中的裁剪、叠图功能设计




1.1图像叠加功能aj_merge_image(共计5个节点) 





1.1.1通过工作流传递的随机位置坐标,把设计好的gif提示图,调用图像流中的叠图功能进行覆盖叠加,分别进行3次叠图  


1.1.2将3个叠图后的图片输出                


1.2图像分割功能aj_split_image(共计3个节点)





1.2.1 通过工作流传递的位置坐标,调用图像流中的裁剪功能,在工作流中进行批量(9次)裁剪              




1.2.2将裁剪后的图片输出       





工作流设计:针对不同任务设计工作流

1.初始化游戏工作流(共计6个节点)    




1.1通过大语言模型生成介绍内容:拼图游乐馆总体概述内容、陆地动物馆内容介绍、海洋生物馆内容介绍、太空奇幻馆内容介绍 




1.2通过中间消息输出相关内容(避免等待过程冗长乏味)   




1.3绑定UI卡片,让内容更生动美观      







2.探索项目工作流(共计13个节点)  




1.1通过变量重置拼图成功/失败次数(重制为0)      




1.2清除用户数据库(visit_item)中存储的上一个项目内容  




1.3通过语言模型生成用户当前选中项目相关的内容数组(5组卡片):卡片名称、图片描述prompt、科普解释内容、当前选择项目名称               




1.4通过大语言模型生成该项目的详细引导内容           




1.5将5张卡片内容存储到数据库(visit_item)    




1.6通过中间消息输出相关消息(避免等待过程冗长乏味)   




1.7绑定UI卡片,让内容更生动美观     




3.设计卡片工作流(共计17个节点) 





1.1清空上一个拼图卡片内容(清空拼图数据库image_game) 




1.2根据传入的索引读取卡片内容相关数据库visit_item中(5组卡片)取出对应的数据             




1.3通过coze官方的text2image生成对应的图片   




1.4通过随机函数生成对应的位置坐标(覆盖提示图3份、问题选项3份、原图)      




1.5通过aj_merge_image图像流制作覆盖提示图3份(图像流中的叠图功能)          




1.6通过aj_split_image图像流分割原图(图像流中的裁剪功能) 




1.7通过函数将覆盖图和分割图存储到数据库中image_game    




1.8通过中间消息输出相关消息(避免等待过程冗长乏味和友好的提示语)




1.9绑定UI卡片,让内容更生动美观        







4.校验答案工作流(共计27个节点) 





1.1根据currnetIndex读取数据库中image_game匹配下标的正确碎片数据




1.2对比用户选择的图片URL与数据库中正确碎片URL是否一致(正确或者错误进行相应的中间消息输出以及相关变量的累加) 




1.3判断当前拼图关卡是否已经解锁完毕(总共3关,判断currnetIndex是否大于3),如果未解锁完成(currnetIndex小于等于3)     




从数据库就中读取对应currnetIndex相关的图片数据,否则从数据库读取原图,并读取成功/失败次数变量,通过代码节点计算对应的成功概率、正确/错误数据。





1.4通过中间消息输出相关消息(避免等待过程冗长乏味和友好的提示语)





1.5绑定UI卡片,让内容更生动美观








总结:未来个人技能随着AI加持,都会大幅提升,唯有个人独特的思维才是难以被掌握的


53AI,企业落地应用大模型首选服务商

产品:大模型应用平台+智能体定制开发+落地咨询服务

承诺:先做场景POC验证,看到效果再签署服务协议。零风险落地应用大模型,已交付160+中大型企业

联系我们

售前咨询
186 6662 7370
预约演示
185 8882 0121

微信扫码

与创始人交个朋友

回到顶部

 
扫码咨询