扣子应用×生成赛博宝宝

扣子应用×生成赛博宝宝 扣子应用×生成赛博宝宝 Modified September 15, 2025 回到我们刚开始创建的时候，你会发现如果要纵向集体a+b=c ，就需要让列表纵向的每个值保持同一个意义。就像—— 猪脚a+米饭a=隆江猪脚饭a。 所以需要数据库里新建字段（其实你开头已经跟着我填过了）来拉齐意义。让只要放在这一纵列的值代表同一个意义就可以了。 这时候就需要在数据库里赋值。所以上面工作流数据库输出为数组【Array格式】👇 第一列的图源命名为by 0，第二列图源命名为by 1. 所以当你去引用对应的变量名时，才能每次都覆盖到这一列上的每个值。 这样其实更省事了，让你不用做n个工作流（横向），只为取那几个纵向的值（纵向）。 你就说学AI会不会变得更聪明吧🤔 ❤️还需要注意的是，一定要先对整个列表框进行数据绑定，是大框不是纵向小框。否则之后就无法匹配细分项。先如图照做👇 因为我们在首页列表里的对应的数据格式必须是数组。👇千万不要选String。 ok，轻轻点击，恶趣味满满，科技也蛮有趣的嘛～ 学废了吗？一键三连，不过分吧🤔 如果有不会的可以加我（文末），有空我会回。 回到我们刚开始创建的时候，你会发现如果要纵向集体a+b=c ，就需要让列表纵向的每个值保持同一个意义。就像—— 猪脚a+米饭a=隆江猪脚饭a。 所以需要数据库里新建字段（其实你开头已经跟着我填过了）来拉齐意义。让只要放在这一纵列的值代表同一个意义就可以了。 这时候就需要在数据库里赋值。所以上面工作流数据库输出为数组【Array格式】👇 第一列的图源命名为by 0，第二列图源命名为by 1. 所以当你去引用对应的变量名时，才能每次都覆盖到这一列上的每个值。 这样其实更省事了，让你不用做n个工作流（横向），只为取那几个纵向的值（纵向）。 你就说学AI会不会变得更聪明吧🤔 ❤️还需要注意的是，一定要先对整个列表框进行数据绑定，是大框不是纵向小框。否则之后就无法匹配细分项。先如图照做👇 因为我们在首页列表里的对应的数据格式必须是数组。👇千万不要选String。 ok，轻轻点击，恶趣味满满，科技也蛮有趣的嘛～ 学废了吗？一键三连，不过分吧🤔 如果有不会的可以加我（文末），有空我会回。 原文链接：https://mp.weixin.qq.com/s/Fo0sXxQ0pYSvXT4ZpZLqRQ 今天我们一起来做个扣子应用，用【你的照片】+吴彦祖or随机图像，测测你未来的宝宝的样子。 体验地址：https://www.coze.cn/store/project/7492444674519695375?bid=6fuk70fl88g17 总界面效果如下👇 我和吴彦祖的娃👇🏻别太羡慕 二次元的我和三次元的我的娃👇🏻又是被自己迷倒的一天 但是为了让你感受基因的随机性。 我给你匹配的图就是网友们随机上传的其中一张。 至于你能否匹配上我数据库里的吴彦祖，看你运气，不过看完教程你应该就知道怎么魔改到次次都是吴彦祖了🤔 主打一个无论你上传什么都进行融合。 主打一个随缘生产。 其实这个项目我自己学了10个小时 小白不会也正常其实。就先收藏🌟或者转发给大神请教～放轻松～！ 工作清单 这个应用利用的主要利用 1个数据库、3个工作流+2个页面。 数据库：用来储存图片 4个工作流： 1、图片储存工资流 2、图片查询工作流（同时排重） 3、图片展示工作流 4、列表图片展示工作流（数组版本） 两个页面： 主页、生成页 搭建前端界面 先给我们的项目做个前端，再填充骨肉。毕竟前端是大家对这个产品的第一层感知。（门脸儿） 先按照图片里的样子拖拽框架。 先铺容器再铺图片，图片位置一定要用相对定位别用绝对定位。 上面的图片会用到的组件已经圈出来了👇，直接拖就行了。 【图片储存】工作流 因为我们的功能涉及融合，而融合的对象需要储存到云端才行。 所以， 首先新建数据库，用来储存用户上传的图片。 具体数据库设置入如下，id用来记录图片唯一标识，url用来记录图片地址。 但凡你界面上没有的，都要一比一复制进去，先别管干啥的，先复制。 然后创建储存这些图片的工作流 upload image👇 记得命名规范一些，不然之后非常容易出错！ 为了避免避免刚好有2个人使用这个工作流导致数据储存的bug。需要通过代码生成工作流运行时候的唯一id， 代码部分我们让AI来写。注意用的是python语言不是js，需要你在IDE里手动切换语言类型。 最后我们把没用的删掉，保留关键代码👇🏻运行成功，你也可以直接复制。 接着就可以看到试运行成功了！结束节点你可以看到id和对应的imag url 第一个工作流upload image已经做好了。 设置【首页】工作逻辑 接下来就是回到用户界面来实现upload image工作流对应的事件配置：当我们点击xx的时候实现第一个工作流的运转。 所以我们再次回到刚才搭建UI的界面.给上传图片的这个按钮绑定事件。 详细参数如下（这就是为什么要大家跟着我命名，如果找不到还能无脑复制） 先点击按钮本身，然后依次设置—— 动作：点击。 对应的事件：调用对应的工作流 入参：组件对应的值。也就是组件里用户上传什么就往工作流里传输什么。 说白了就是红框里的图👇是下面黑色按钮的工作流的入参值。 设置完毕后上传一张图片试试，然后回到业务逻辑刚才绑定的数据库里看到图片记录，就代表上传成功了。 如果你想让这些按钮点了之后隐藏掉，还可以给按钮设置加载态、隐藏状态，true=不显示，false=显示想要让按钮暂时隐藏，就添加事件，value设置为true既可。 相反，也可以用同样的方法让后出场的按钮先隐藏后登场。隐藏就是状态设置为true，然后通过（添加false事件）来回显按钮。 这样按钮就可以按钮剧本登场了。 设置【生成页】工作逻辑 接下来我们要跳转到生成页面（页面2）。同样，只用添加页面跳转事件即可。 具体的入参，正是我们最开始在工作流代码块里做的，用来创建每次运行对应的唯一id的代码块的输出节点名。 配置如下： 你会发先你现在就能用上之前在upload image工作流里色号给你成的id👇所以保持对应的节点名一致非常重要。 【图片展示】工作逻辑 接着我们就要开始操作生成页面，让它真正动起来。 首先要能查询用户输入了什么图片。 所以这是另一条逻辑线，所以你才需要：新建工作流image show 整个工作流的核心节点是查询数据库。 当数据库里的user image id=用户在这个工作流上传的image id，等于查询到了匹配的图片。 需要注意的是结束节点一定要再次引用数据库节点的值，因为应用搭建很多时候引用的是整个工作流的输出，如果不提前设置可能引用不到。 接着选中【生成页面】的整个白色底板，添加事件为【点击时调用工作流工作流image show】，而此处的入参就是用户输入的图片，也就是系统query。 这样，点击整个页面的时候才能启用工作流。 生成页面（页面2）的第二张图是你的随机变量，你可以随便放一张图和用户上传的图片相混合。比如你想看看和吴彦祖生出来的孩子长啥样，就把自己和吴彦祖的照片放在一起。 【图片融合】工作流 创建第三条工作流image create。 因为我们的功能里除了和自己上传的图片融合（主页），还可以和库里随机图片融合(生成页)。 因为是要融合两种风格，所以需要一张和用户上传的图不一样的图，否则融合就没有意义了。 那么既然是一张不同的图片，我们只用规定查询id不同的图片即可。如果你的图片是A，就查询非A。 所以我们可以通过自定义sql语句节点来实现。直接让AI给我们写好sql语句即可。 这样通过自定义sql语句就可以选一张和用户上传的图片不一样的图，接下来就是把用户的图和这张随机的图融合到一起。 融合=理解+生成 图片理解插件：因为图像理解插件现在调用不稳定，你可以先用文本输入来固定生成一个图像来代替 图片融合插件： 这样就可以搭建一条融合工作流。image create 效果如下： 【图片列表】工作流 为了让我们每次运转完能看到已经成功运行的记录。需要回到首页配置图片列表。 所以先搭建服务于首页列表的图片工作流。