场景介绍
作为一个技术博客的作者，我经常需要为自己的文章设计一个封面图。找图、修图、调色，一套流程下来，感觉比写文章还累。后来，发现扣子发布了“图像流”工具，我感觉可以试试。
因此，本次分享主要尝试实现一个文章封面图制作的智能体，可以让大家在写完文章后，一键配图。
任务目标：
按照“敏捷”原则，我们不期望一步到位，计划分为2篇进行分享：
- 第一篇：熟悉“图像流”操作，通过上传图片和标题，合并封面。
- 第二篇：只提供标题，根据标题自动生成底图，并合并封面。
任务要求：
- 熟悉扣子“图像流”操作。
- 完成上传图片和标题的合并。
- 熟悉扣子“卡片”使用。
分析问题
输入上，扣子本身输入支持文字、上传（image、pdf、docx、excel、csv、audio），但是以往使用的智能体模式“单Agent（工作流模式）”目前仅支持默认一个参数，所以，今天我们需要使用“单Agent（LLM模式）”。
核心肯定是扣子“图像流”的使用，先把上传的图片调整为指定大小（这里为了本次分享内容的聚焦，暂时设置为指定大小，该大小为掘金文章封面图大小），然后将文字添加到调整后的图片上。
图像流是专门用于图像处理的一个流程工具。在图像流中，你可以通过可视化的操作方式灵活添加各种用于图像处理的节点，构建一个图像处理流程来最终生成一个图像。图像流发布后，支持在智能体或工作流中使用。
操作步骤
前置条件：注册并登录扣子平台。
建立智能体
过程比较简单，不再赘述，也可以参考以往的分享。
配置智能体
选择模式
本次选择“单Agent（LLM模式）”，该模式与“单Agent（工作流模式）”的最大区别就是需要设置“人设与回复逻辑”，这样可以根据不同用户输入调用不同的工作流、图像流等能力，而不是像“单Agent（工作流模式）”，所有用户输入只能由默认的工作流承接。
设置人设与回复逻辑
可以直接在人设与回复逻辑下方编辑录入，按照提示词工程编辑即可。
以下是我使用的提示词：
# 角色
你是一个专业的文章封面图生成高手，能够根据文章的标题和内容特点，为文章创作出吸引人的封面图片。
## 技能
### 技能 1：使用用户提供的图片和标题合并封面图片
1. 当用户提供文章标题和图片时，调用图像流，将标题以美观、清晰的方式放置在图片上。
## 限制：
- 只专注于文章封面图的生成，拒绝回答与封面图生成无关的问题。
- 所输出的封面图必须清晰、美观，符合用户的要求。
- 严格按照用户提供的标题和图片进行创作，不得随意更改。
自动优化提示词
也可以简单描述后，让扣子帮你优化。
建立图像流
在界面中间“技能”部分，新增“图像流”，命名为“wenzhangfengmianpeitu_sc”。
需要注意的是，图像流名称也不支持中文。
绘制图像流
点击新增的图像流“wenzhangfengmianpeitu_sc”，即可打开“图像流”编辑页面。
左侧“选择工具”可以看到，扣子已经支持很多图像操作工具，本次分享需要用到裁剪、添加文字、缩放。
工具清单：
-
智能生成
图像生成、图像参考
-
风格模板
风格滤镜、宠物风格化
-
智能编辑
提示词推理、提示词优化、智能换脸、背景替换、光影融合、智能扩图、智能抠图、画质提升、美颜
-
基础编辑
画板、裁剪、调整、添加文字、叠图、旋转、缩放
-
通用
选择器、消息
图像流文档：
本次分享最终图像流如下：
开始
根据任务需要，增加两个输入，分别是bg_image（上传的图片）、title（标题），上传的图片记得把变量类型改为Image。
调整图片大小
因为上传的图片宽高不限，为了避免直接缩放导致图片变形，我们采取了“缩放”-“裁剪”的方式，这样可以保证图片不变形的情况下尽可能呈现原图片的要素。
扣子中图片的大小单位全部为像素，后续不再赘述。
缩放
参数：
- 原图：直接选择“开始”节点的变量
bg_image（上传的图片）。 - 最大尺寸：因为“缩放模式”采用的默认按照长边缩放，因此根据
掘金要求，设置为192。 - 缩放模式：默认按照长边进行缩放，即图片更长的那侧。
比如一个图片宽度为576，高度为300，则576那侧为长边，按照上述设置，则576缩放到192，缩小为原来的1/3，高度也对应缩小为原来的1/3，即100。
裁剪
参数：
- 原图：直接选择前面节点的
data即可。 - 宽度：裁剪后的宽度。
- 高度：裁剪后的高度。
- 位置：即图片九宫格，左上、中上、右上、左中、中部、右中、左下、中下、右下，此处选择中部
center，记得输入的是英文。 - x：相对于“位置”选定后的原点进行的偏移量，x特指水平方向的偏移量。
- y：相对于“位置”选定后的原点进行的偏移量，y特指垂直方向的偏移量。
添加文字
添加文字的参数比较多，我们挑选比较重要的进行解释：
- 底图：即背景图，直接选择前面节点的data即可。
- 文字内容：选择“开始”的title（标题）变量。
- 文字大小：此处为了控制分享范围，根据图片大小直接设置的
20。原本应该考虑title长度进行计算，本次分享不展开进行了。 - 文字颜色：和“文字大小”一样，此处也是直接设置的颜色
194179。原本应该根据图片色彩进行文字颜色的计算，以便可以显眼一些。
结束
该节点没有什么特别设置的，保持默认即可。
调试
图像流也需要“试运行”后“发布”，此时智能体运行效果如下图：
“点击查看”后打开图片：
图片没有问题，但是这样每次需要点击才能查看图片，不太直观。下面我们通过扣子“卡片”优化一下。
卡片输出
针对图像流，可以设置卡片输出，如下图：
但是由于我们想要的仅显示图片的卡片官方未提供，此处需要我们自己新建一个“卡片”模板。
自制单图卡片
如图点击“新增”后即可打开后续界面。
设置变量
因为需要显示图片，并且支持图片点击后打开图片方便下载，所以，单图卡片需要接收到图片地址。
设置样式
选择“卡片”后，点击“组件”中的图片，该组件就会出现在中间区域（此时是一个小图片）。 选中中间区域的小图片，按照下图设置“宽度铺满”，即出现如图大图效果。
在“资源”中选择“图片地址”变量，这样图片预览时就会打开卡片绑定的图片地址，也就是图像流的输出。
设置点击效果
为图片设置点击事件，让其打开我们前面设置的变量“图片地址”，这样点击卡片就会打开图像流传递给卡片的图片地址了。
保存、发布后，我们就可以回到智能体编辑页面绑定卡片了。
绑定卡片
点击设置图像流的输出为卡片输出
在弹窗中选择我的卡片中刚才设置的单图卡片，并绑定图像流输出到卡片。
至此完成，下面看下最终效果。
效果展示
智能体地址： 文章封面配图 - 扣子 AI 智能体
效果如下：
扩展
本次完成的智能体还比较死板，只能适配掘金文章封面的情况。后续分享将进行适配性上的升级：
- 无需上传图片，自动根据标题进行生成。
- 可指定封面图片大小。
- 文字自适应。
大家如果有什么想法也可以评论交流哈~
