案例 | 批量制作学员海报

破局行动第2期于2024年7月16日开始，16个AI行动营，超过9000人次报名。作为仪式感的一部分，行动营开始前，官方会向每位学员发放一张专属定制的行动营通行卡（海报）。以前可能需要两个人1周时间来集中制作，现在让学员使用智能体，只需要一分钟，就能拥有专属通行卡。

越山准备了这个通行卡生成器，学员只需要上传头像，提供昵称和行动营名字，就能生成专属的通行卡和欢迎语。 设计师制作的海报模板非常漂亮，而我借助于智能体，让它可以无限分发。

智能体上线后，第一天生成了3300多张海报。 破局行动的学员们评价也很高，有的希望了解这个海报智能体怎么搭建的。我正好也报名了本次的智能体行动营，这里做个复盘，详细讲解这个海报智能体的搭建过程。

一、需求缘起

今年1月份的破局航海训练营中，我是志愿者。 当时也是万人航海的壮观景象。 我负责近30人的AI企业培训航线，开营后一周，也没等来官方发放的航海船票（个人海报）。 因为人数太多了，当时破局的运营人员很少，根本忙不过来。

我自作主张，写了个程序，依葫芦画瓢， 将我们小组的个人海报批量生成了。 同时，也分享给了其他志愿者，缓解了部分“无票焦虑”。

破局行动第2期开始前一周，运营官联系上我，询问之前的船票生成程序。程序还能用，但不一定通用、好用。 而且考虑到有的人是手机使用， 我建议搭建一个智能体来自助地生成个人通行卡（以前叫船票）。一定要尽可能方便，简单好用。

直觉判断，自动生成通行卡其实很简单，有了模板后，在对应的位置填充信息就好。接下来，一步步实现。

二、智能体设计

首先明确目的：

搭建一个海报智能体，通过上传头像，昵称，行动营项目名信息，生成定制通行卡海报。

分步设计：

1 先搭建MVP（最小可行产品）

2 优化交互体验

3 优化服务性能

4 优化界面和个性化

使用过程/用户故事：

1. 用户在对话界面上传头像，填写昵称和行动营名称，点提交
2. 用户等待智能体加工海报，主要是图片，文字信息的叠加
3. 用户在界面上看到生成的通行卡

前提条件：

• 要有一张海报底图，没有昵称，头像，行动营信息。
• 要有一张完成了的的海报图，有昵称，头像，行动营的位置等信息。

三、平台选择

同样的目的，实现方式有多种。对于这个海报生成服务，我们可选择

• 写后端代码，程序中调用相关AI能力。
• 使用公共的图像处理服务。
• 选择智能体平台，低代码或无代码的方式，搭建智能体。

这个海报制作服务，准备时间短，使用期限短，用户使用负担要足够轻。所以， 在已有平台上低代码的方式快速构建智能体，成为首选。

智能体平台或框架也有很多。 首先国外的不考虑，国内的扣子，元器，Dify, FastGPT是比较流行的几个平台。综合对比下来，扣子(Coze) 最合适。 因为

• 可以白嫖大模型
• 特有的图像流能满足需求
• 可发布到多个渠道（bot商店，豆包APP，微信，飞书等），特别是支持API调用

四、扣子(coze)平台介绍

扣子（Coze）是字节跳动发布的一款AI聊天机器人构建平台，旨在让非开发者也能快速、低门槛地创建和优化AI聊天机器人。

扣子中的聊天机器人叫bot,也就是我们所说的“智能体”。

扣子平台上有大量的插件，工作流可供使用。可免费调用国内主流的大语言模型。

通过编排界面，可向bot添加提示词，插件，工作流，知识库等组件，并在同一界面上进行调试和发布。

发布到bot商店，经审核通过后，可通过bot链接分享给他人使用，也就是一个web的聊天应用。

扣子（Coze）官网： https://www.coze.cn/

五、MVP制作步骤

MVP 指的是“Minimum Viable Product”，即最小可行产品。

1. 登陆Coze官网， 新建bot， 比如 “海报生成器”。

2. 在”海报生成器”bot的开发页面，点“+” 添加图像流。

1. 点“创建图像流”，来到图像流编辑页面。

图像流与工作流区分开来，这里只有与图像处理相关的一些工作节点。

包括图像生成，滤镜，图片AI编辑， 图片基础编辑几大块。

此次制作通行卡的场景我们专注在基础编辑的功能上。 因为目的是自动地生成背景图一致的海报，所以背景图是预先由设计师做好的。理论上海报背景图，也可通过图像生成节点来自动生成。

1. 图像流中的核心节点讲解

图像流 haibao_workflow中， 依次往背景海报上加昵称，行动营名字，和头像。 图像流运行效果如下。 下面的示例图片仅作演示。

下面我来详细讲解用到的每个工作节点。

1、开始节点录入参数

“开始”节点，传入背景图片，昵称，行动营名字，头像以及头像的缩放比例。

2、添加昵称和行动营文字

新增一个"添加文字"节点，重命名为"昵称"。拉一根开始到昵称节点的线。 本节点中对应有很多参数，主要解释如下。

• origin_url: （必填）原始图片链接，可引用前面“开始”里的变量，也可输入一个固定图片链接。
• text: （必填）文字内容，中文字符串的最大字节长度为 64 个字符。引用前面“开始”里变量。
• transparency: 文字的透明度。取值范围:[0,100]默认值:100，表示透明度 100%(不透明)
• type: 文字字体。可选字体为文泉驿正黑:(默认)、文泉微米黑、方正书宋、方正楷体、方正黑体、方正仿宋
• vertical_margin: 文字的垂直边距，即距离图片边缘的垂直距离，这个参数只有当文字位置是左上、中上、右上、左下、中下、右下才有意义。取值范围:[0,4096]默认值:10 单位:像素(px)
• color: 文字的颜色。十六进制颜色码，取值为 000000 到 FFFFFF默认值为000000(黑色)
• location: 文字的初始位置。nw:左上,north:中上,ne:右上,west:左中,center:中部, east:右中, sw:左下, south:中下,se(默认值):右下
• size: 文字的文字大小,(0,1000],默认值:40,单位:px
• fill: 是否将文字平铺满原图。1:表示将文字水印铺满原图。0(默认值):表示不将文字水印铺满全图。
• horizontal_margin: 文字的水平边距，即距离图片边缘的水平距离。这个参数只有当文字位置是左上、左中、左下、右上、右中、右下才有意义。取值范围:[0,4096]默认值:10 单位:像素(px)

这些值该怎么填呢？特别是文字该放在图片的哪个位置，该怎么设置呢？ 下面我介绍一种比较方便的方法。

这里用到photoshop, 电脑浏览器中访问 https://www.photopea.com/

1. Ctrl+O， 打开一张设计好的海报图片。

2. Ctrl+R， 打开标尺工具，会在画面左边和上边显示刻度。

3. Ctrl+0, 让图片自适应显示全部。或者按一下键盘上的z, 然后点左键可放大图片，或者按住Alt点鼠标左键，可缩小图片。按住空格可鼠标拖动图片。

4. 按一下键盘上的v, 注意输入法切换到英文。然后鼠标从画布上边的刻度处，按住左键往下拖出一条标尺线，拖到昵称上端，就是昵称所在位置的Y轴值，也就是上面要填的vertical_margin值。同理，从左边刻度拖也来的标尺可得到horizontal_margin。字体的Y转下边减上边就得到字体 size值。

5. 按一下键盘上的i, 切换到颜色拾取器，然后鼠标移到昵称字体上点一下，就能查看到字体的颜色编码，比如fff1ce, 这就是color值。

填好后，可测试“昵称”节点，需要输入text和origin_url。

这里origin_url就是空白海报底图，图片链接怎么获取呢？ 我们可以在”海报生成器” bot的调试界面，点对话框右边的+号，上传背景海报图片，发送。然后在页面上显示的图片上右键，复制图片地址。

测试节点，可以点这个节点组件的右上角的三角形，输入昵称和背景图片URL。生成的图片中，看到昵称已经添加上去了。

如果文字位置，大小，字体等不合适，可以调整输入参数，继续调试。

采用类似的方法添加 “行动营”节点。

3、添加头像节点

要将用户头像弄上去，需要增加一个“叠图”结点。

其中的参数origin_url就是前面添加了文字的海报图，image_url 就是要叠加的头像图片。 其它位置相关的变量填入方式跟前面提到的类似。

测试结果，图片是叠加上去了，但头像是方形的，没法截取成圆形或多边形，并加边框。

Coze图像流中，没有现成的工具能截取多边形图片。

怎么办？

是不是可以在这之后，再叠加一个边框区域的蒙板呢？叠加一个png图片，让中间头像显示区域空出来。 我试了，可以实现。

还是在 https://www.photopea.com/ 里制作这个头像蒙板。 选择多边形套索工具，将头像区域框起来，按Del键删除。

然后按c，进入裁剪模式，框选后回车，剪出蒙板。

然后将图片导出为PNG格式。 菜单上点 File - Export As - PNG

在图像流中，复制前面的叠图节点，设置参数。

• image_url，选择上传刚才做好的蒙板PNG图片。
• zoom，设置为 100，表示不要缩放。
• origin_url, 引用前一步处理的图片。注意检查每一步的输入都应该是前一步的输出data

然后点右上角的“试运行”，跑整个图像流。

至此，图像流创建完成，点右上角的“发布”，然后同意添加到bot。

回到bot编排页面，在”人设与回复逻辑”里，简单填写要求，比如:

根据用户提供的海报背景图片，头像图片，用户昵称和行动营名字，调用图像流haibao_workflow, 生成个人海报。

然后在右侧调试栏上传图片调试。 bot自动调用了图像流，生成想要的海报。

至此，MVP算是完成了。

整个制作和测试工作有点繁琐，但思路还是比较清晰的。单个节点可以单独测试，最后再跑整个图像流/工作流测试。

六、迭代优化MVP

MVP只是把主流程跑通了，目前它顶多算个玩具。要想让它成为工具，甚至产品，还有许多需要优化的地方。

迭代优化是搭建智能体必须经历的步骤，而且是最费时的环节。由于Coze太新，很多功能并不完善，越山就踩了许多坑。

时刻清楚自己的目标，不择手段去实现，先完成，再完善，不要追求完美。

1、输出图片而不是链接

更改模型输出格式为Markdown，而不是默认的Text。这样bot就能直接输出图片了。

2、固定海报底图

这个海报智能体只是为了一次活动定制的，里面的位置参数也都是固定写死的，所以底图也可以固定，没必要每次生成都要传底图。

那就在图像流中，删除开始里的backgroundPicUrl, 在第一个添加文字节点中，origin_url 改为上传底图。

改图像流后，记得发布。

3、头像缩放比例如何确定

【20240725 备注：添加“缩放”节点，也可将头像图片缩放至指定大小】

上面的图像流中，有一个头像缩放百分比参数headZoomRatio ，因为用户上传的头像图片大小不一致。微信头像导出都是正方形，但像素有940x940的，也有576x576的。所以，这个缩放比例，应该要根据用户上传的图片来计算。

这时，需要添加工作流，在工作流中计算这个比例值，再调用图像流。以下是步骤说明。

1 在bot编排区域中间，图像流的上面就是工作流，点+，新建一个工作流。

2 添加一个插件，搜索“图片参数”，将height,width都加进来，这样能获取头像图片的宽和高。

3 添加一个代码节点，计算缩放百分比。

首先要知道头像蒙板的宽高。蒙板PNG图片上右键，查看图片信息，比如我这里宽高是 257 x 223。

如果头像图片是960x960，那么宽的缩放百分比应该是257/960， 宽比应该是223/960， 这两个比值，取最小的一个，就能保证图片缩放后，能被蒙板遮住。

4 添加前面创建好的图像流，将参数传进去。

5 试运行，图片url这里粘贴进去。bot对话时，直接上传图片。

6 发布此工作流，并确定将其添加到bot。

7 因为图像流会在工作流中调用到，所以建议从bot中删除图像流。这里只里并未删除图像流本身的定义，只是删除与bot的附属关系。

8 优化主提示词

9 调试并发布bot，默认会发布到扣子bot商店。

10 分享bot链接，点右上角“商店”，跳转到bot使用页面后，点右上角“分享”。

访问bot链接后，需要登陆Coze后才能使用。

七、优化交互体验

用户拿到bot链接后，必须要注册登陆coze后才能使用，这体验不好。

因为通行卡生成器的用户数量大，注册登陆这一步很可能会拦住大量用户。 我们希望用户用最轻的方式使用，用完即走。

还好coze支持发布为API。我决定自建一个web应用，无需要登陆，直接使用，后端调用bot能力。

扣子API的文档链接在主页左下角，基础调用方式如下，要准备个人访问令牌，BOT_ID和query， 其它的 conversation_id, user 信息可自定义。

curl --location --request POST ‘https://api.coze.cn/open_api/v2/chat’ --header ‘Authorization: Bearer {YOUR PERSONAL_ACCESS_TOKEN}’ --header ‘Content-Type: application/json’ --header ‘Accept: /’ --header ‘Host: api.coze.cn’ --header ‘Connection: keep-alive’ --data-raw ‘{ “conversation_id”: “123”, “bot_id”: “{YOUR BOT}”, “user”: “29032201862555”, “query”: “你好”, “stream”: false }’

扣子API功能也在持续进化中，目前文件上传后使用 file_id 有bug，我不得不自建文件上传服务，通过传入 image_url的方式提供头像图片。

自建web应用，代码是AI写的。

服务器托管可选Vercel, Railway等免费服务。但这些服务都在海外，为了更快的访问体验，我用的是腾讯云国内的轻量应用服务器，一台够用。

八、优化服务性能

扣子API调用有限制, 每秒请求2次，每分钟请求数最多支持60，每天3000次。 而此次破局行动9000我人次报名，集中在开营前两三天内使用。 一个bot很难支撑这并发请求量。

限额当前扣子 API 免费供开发者使用，每个空间的 API 请求限额如下：QPS (每秒发送的请求数)：2QPM (每分钟发送的请求数)：60QPD (每天发送的请求数)：3000

为了稳定的服务，越山首先想到是充钱。 但当前扣子专业版还没发布，海外coze倒是先收费了。

怎么办？

我的解决方法是多建bot，分布在不同的工作空间。 普通用户最多建5个空间，后端建5个相同的bot，一起提供服务，那性能不就提起来了。

哈哈，事实上我就是这么干的。 程序里做负载均衡， 每次请求都随机访问一个后端bot。如果bot出错，还会将请求跳转到下一个bot。

九、优化界面和个性化

界面就是一个表单页面，不要跳转。让AI来写CSS优化一下。

既然用上了AI, 也可以加一点个性化的问候或提示。可以加到海报上，但制作调试来不及了 （海报设计得改）。

那就单独返回一段话吧。写了提示词，根据用户的昵称和行动营名称， 返回一段鼓励的话，这很个性化。

十、使用效果

实际使用下来，一般1分钟以内生成通行卡和问候语。 生成的通行卡请往上翻，就是开头图片的样子。

7月14日一天生成了3300+海报。偶尔会出错，但重试就好。

出错主要是因为bot工作流中调用了非官方的插件（获取头像图片的长宽信息），所以，如果要保证服务的高可用，bot中的每一个环节都要去优化。

十一、后续思考

越山认为，AI智能体是到达AGI之前的AI应用形态。一个智能体有三个阶段，玩具 - 工具 - 产品。 上述海报智能体的搭建过程就是玩具到工具过程。

通过Coze搭建智能体，要么好玩，要么好用。

随着低代码平台产品的不断完善，AI能力的持续增强，普通人构建智能体的门槛还会更低。

构建智能体并不需要多少NB的技术。越山是技术出身，但不唯技术论，AI带来了技术平权。

让AI落地，解决真实的痛点问题，需要我们积极地深入各种场景，敏感地捕捉需求。

同时，也需要更多的输出，表达自己，让人们看到你，这样，有的需求才会找上门来。 因为我在公众号分享了海报智能体，已经有人跟我对接商单了。

洋哥近期在合伙人群里提到，智能体套壳，解决一个小刚需的产品，非常看好。

这个海报智能体，就是借助于智能体，解决一个真实需求的实例。

我有幸参与其中，在这个AI氛围最好的社群中，快速学习和实践，破局值得，洋哥牛逼！

接下来，我会研究更多的图文创作场景，比如喜报生成，日报生成，金句卡片等真实需求。

欢迎对智能体感兴趣的小伙伴一起交流。

在这轮AI浪潮中，你想扮演什么角色？研究者，构建者，传播者，或是连接器。

最后，用海报上的8个字共勉。

何以破局，唯有行动。

如果对您有帮助，有启发，记得告诉我喔。点击跳转到小册合集页面