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

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

在探索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.工作流总体运行流程：                

变量:                

收集回答错误次数变量：

errorAnsweerNum

收集回答正确次数变量：

successAnsweerNum               

数据库：                

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

visit_item

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

image_game               

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卡片，让内容更生动美观