企业官网建设流程全解析

《扣子编程：从零开始搭建智能体 卢欣欣 清华大学出版社》【摘要 书评 试读】- 京东图书

《扣子编程：从零开始搭建智能体》全书案例持续更新-CSDN博客

完成以上配置后，在智能体配置页面右侧的“预览与调试”对话框中，发送年级信息和目标单词进行功能测试。重点测试智能体的意图解析与工作流调用情况，并核对最终输出结果是否达到预设标准。实际测试结果如图6-20所示。

图6-20 测试结果

经过反复测试并确认功能无误后，单击页面右上角的“发布”按钮，进入“发布”页面。在该页面中补充填写或自动生成版本发布记录，勾选所需要的目标发布平台，随后单击右上角的“发布”按钮，即可完成智能体的正式上线。

发布成功后，既可通过“立即对话”入口进行体验，也可单击“复制智能体链接”将应用分享给目标用户。如图6-21所示。

图6-21 发布智能体

6.5拓展优化：绑定自定义卡片

卡片是一种将文本、图像、音频等多模态数据进行结构化排版展示的UI组件。为了打破纯文本回复的单调性，增强内容的可读性与视觉体验，本节将介绍如何为工作流绑定自定义卡片样式。具体实现步骤说明如下。

1.新增卡片

由于官方预设卡片样式无法完全满足本项目的排版需求，因此需要自定义卡片。在扣子编程的资源库页面中，单击右上角的“+ 资源”按钮，在弹出的下拉菜单中选择“卡片”，即可创建一个空白卡片样式，如图6-22所示。

图6-22 新建卡片

进入卡片样式编辑页面后，可单击左上角的图标对卡片进行重命名。该编辑界面主要由卡片/变量区[1] 、可视化编辑区和参数配置区三个核心功能区域组成，如图6-23所示。

图6-23 新增卡片样式

2.设计卡片样式

步骤1：新建变量。卡片需要呈现双语短文、插图和音频三部分内容，故需要预先定义对应变量以供后续数据绑定。如图6-24所示，切换至“变量”标签页，单击“新建变量”按钮，在弹窗中配置变量名称、类型及默认值后，单击“确认”按钮完成创建操作。

图6-24 新建变量

本例所需要的变量信息如表6-1所示。

表6-1 变量列表

步骤2：添加单列布局组件。切换回“卡片”标签页，在左侧“组件”面板中单击“单列布局”，将其添加至可视化编辑区，如图6-25所示。

图6-25 添加单列布局组件

步骤3：添加文本组件。选中编辑区中的“单列布局”组件，单击左侧“基础组件”中的“文本”，将其嵌套至单列布局内，如图6-26所示。

图6-26 添加文本组件

步骤4：配置文本组件。选中添加的“文本”组件，在右侧基础配置中单击绑定变量按钮，在弹出的变量列表中选择“已定义的双语短文”变量进行绑定，如图6-27所示。

图6-27 配置文本组件

步骤5：添加并配置音频组件。在左侧“组件”中，单击“音频”组件添加一个播放器控件。选中该组件，在右侧基础配置中单击“变量”按钮，在变量列表中选择已定义的“音频文件”变量进行绑定，其余参数保持默认，如图6-28所示。

图6-28 添加、配置音频组件

步骤6：添加网格布局插件。由于有多幅插图需要展示，此处使用网格布局插件实现多行多列规则排列。单击“布局组件”中的“网格布局”即可添加该组件，如图6-29所示。

图6-29 添加多列布局组件

步骤7：配置网格布局插件。选中网格容器，在右侧配置区选择“动态格数”模式。在绑定数组类型变量中选择已定义的“插图地址”变量进行绑定。最后，将“每行展示数目”设置为“2”，其余参数保持默认，如图6-30所示。

图6-30 配置网格布局组件

网格布局由外围容器（GridLayout）和内部项目（Column）组成，在配置参数时要注意区分选择的对象。若在编辑区难以点选，可借助左侧面板的“结构”标签页进行层级快速定位与选择，如图6-31所示。

图6-31 网格布局组成元素

步骤8：添加图片组件。选中内部的网格项目，单击“基础组件”中的“图片”组件，添加图片组件到网格项目中，如图6-32所示。

图6-32 添加图片组件

步骤9：配置图片组件。选中任意一个图片组件，在右侧基础配置中将显示模式设置为“宽度铺满”。然后，在数据配置项中单击绑定变量按钮，在弹出的变量列表中选择绑定“插图地址”变量下的“item”子变量。如图6-33所示。

图6-33 配置图片组件

3.预览、发布卡片

卡片样式设计完成后，单击页面右上角的“预览”按钮，可以打开“预览”对话框查看渲染效果，如图6-34所示。确认样式无误后，单击“发布”按钮进行发布。需要注意的是，只有发布后的卡片才能在智能体中调用。

图6-34 预览卡片

4.绑定卡片数据

步骤1：发起绑定操作。返回智能体编排页面，展开“技能”模块下的“工作流”选项。将鼠标悬停于工作流learn_English_words上，在右侧浮现的多个按钮中，单击“绑定卡片数据”按钮，并在弹窗中单击“绑定卡片”，如图6-35所示。

图6-35 绑定卡片

步骤2：配置卡片。在如图6-36所示的“智能体回复卡片配置”页面中，单击“我的卡片”，并选择刚发布的卡片模板。随后，将卡片内定义的变量与“结束”节点配置（参看6.3.1节）的输出变量逐一建立映射关系。配置完成后单击“确认”按钮。

图6-36 配置卡片

卡片中的变量与工作流输出变量之间的映射关系如表6-2所示。

表6-2 卡片变量与工作流输出变量绑定关系对照表

5.优化输出逻辑

为工作流绑定自定义卡片后，为避免之前已设置的文本回复与卡片UI产生冗余冲突，需要对原有的输出逻辑进行精简与优化。具体调整步骤说明如下。

步骤1：调整大模型提示词。在资源库页面中单击learn_English_words工作流进入工作流编辑页面。由于自定义卡片的文本组件不支持Markdown语法渲染，需要取消目标单词的加粗格式。选中“生成双语短文”的大模型节点，在其系统提示词中删除第3条关于“目标单词加粗”的约束规则以及第8条中有关加粗的部分。

1. 目标单词在英文短文中需要加粗，方便学生识别背诵；中文翻译无需加粗，保持流畅。

8.输出格式：先英文短文（目标单词加粗），换行后中文翻译（逐句对应、连贯无分段）；仅输出纯双语短文，无任何多余内容。

步骤2：清空结束节点输出。因为核心展示内容已完全交由卡片组件负责，为避免对话框中重复显示冗长的纯文本，需要调整结束节点的输出形式。将结束节点由“返回变量”模式切换为“返回文本”模式，并在文本框内输入空字符串”，如图6-37所示。这样工作流在执行完毕后，不会在对话界面中输出原始文本，而是静默提供数据以进行卡片渲染。

图6-37 结束节点的输出配置

以上调整修改完成后，需要重新发布该工作流使卡片渲染生效。

步骤3：修改智能体人设和回复逻辑。返回智能体编排页面，在“人设与回复逻辑”的提示词中，删除“技能”模块下的第3条内容。

3.按固定格式整合工作流输出结果，若工作流返回多张绘本配图，需要全部依次输出，不得遗漏。最后附加正向鼓励语；

同时，将“输出格式”模块替换为以下内容，强制约束智能体仅通过卡片进行交互。

##输出格式

仅按照自定义卡片进行结输出渲染，禁止有其他额外输出。

6.测试卡片

在智能体的“预览与调试”窗口中，再次输入测试指令进行测试，验证工作流数据能否在卡片中正常渲染展示，运行结果如图6-38所示。测试通过后，重新发布智能体，用户即可体验到图文音并茂的全新交互界面。

图6-38 测试卡片