前言
介绍了 AIGC 在活动业务中的应用案例，以及如何利用 Dify 平台快速验证 AI 与业务结合的想法，并通过活动组件 AI 助手的实现降低组件选择成本，最终实现业务升级。今日前端早读课文章由 @AlwinXie 分享，公号：三七互娱技术团队授权。
正文从这开始～～
本文主要分析 AIGC 在组件活动业务中的应用案例，探索 AI 在业务中到底能做什么。如何运用 Dify 快速验证 AI 与业务结合的想法，掌握业务 Agent 落地与实现的方法，加速业务升级。
AIGC 在活动业务中的应用案例分析
在案例分析前，先说一下组件活动的业务背景。经过长期的迭代，我们的组件活动系统已较为成熟，可以允许产品运营人员，在后台快捷自助制作出功能完善，安全可靠，具备复杂前后端功能交互的专题活动落地页。从活动策划设计到落地推广均无需技术介入，下面简单说一下制作一个组件活动的 5 个步骤：1. 创建活动 → 2. 选择组件 → 3. 细化前端元素 → 4. 完善后端功能规则 → 5. 生成活动落地页
1. 创建活动，填写基本信息
包括活动名称、类型、时间、规则、发布游戏等基本信息。
![]()
2. 根据需求选择组件，构建活动内容
从左侧的组件库中拖取合适组件到右侧画布，组合出符合需求的组件活动。每一个组件是一个具备完整前后端功能的业务组件（也有纯前端元素的前端组件和纯后端功能的后端组件），而非开发人员使用的代码” 组件”。
![]()
![]()
3. 细化前端元素
对需要调整的组件进行编辑，替换所需的前端元素，例如图片素材，文案，位置色彩配置等
![]()
4. 完善后端功能规则
除了前端静态元素外，还具备该组件对应的后端功能配置。根据不同的组件后台将程序不同的功能配置项。配置好相应的规则后即具备了相应的后端功能。
![]()
5. 生成活动落地页
到此即完成了一个组件活动的制作落地。具备完整前后端功能的活动落地页：
![]()
![]()
![]()
而在制作组件活动的第二步中，我们发现了痛点。随着系统的迭代更新，组件积累的数量和种类越来越多。选择组件也成了一个难题，在 6 种大分类和 40 种小分类共 200 + 数量的组件库中，选出符合需求，合适自己的组件，确实不容易。因此我有了一个想法：能否由 AI，根据我们的需求，为我们推荐出合适的活动组件？
活动组件 AI 助手
为了验证这个想法，就有了活动组件 AI 助手：目的是根据活动专员需求，推荐合适的活动组件，提供贴合需求的参考方案，降低组件选择成本。
![]()
![]()
在组件画布的右侧新增了一个入口按钮，点击后在右侧弹出活动组件 AI 助手的交互界面。可以在这个对话框中使用自然语言给 AI 提出我们的活动需求，它将为我们推荐庞大组件库中最适合的组件，并给出了推荐理由。点击 “使用推荐” 即可以一键把 AI 推荐的组件装载到画布中，降低组件选择的成本。
业务 Agent 智能体的快速落地与实现
想必大家多多少少会有以下这些情况：想快速验证 AIGC 是否能应用于业务的想法；想快速切换多个大模型进行效果调试；对 Python 代码不熟练，又想把时间用在创新和业务需求落地上。Dify 就能很好地满足这些需求。活动组件 AI 助手就是运用 Dify 实现快速落地的。通过以下 5 步来快速验证你的 AI 想法吧：
业务数据准备
为了能让大模型具备垂直领域的知识，我们必须把自己的业务数据准备好。以活动组件 AI 助手为例，我通过识图 OCR + 业务数据 + LLM 准备好原始业务知识数据。
第一步，因为我们的原数据信息较少，这里采用大模型的识图接口，把组件库中每个组件的封面图内容识别出来，丰富组件的信息：
![]()
第二步，把图片信息加上组件的名称、分类、标签等数据交给大模型，让它为我们的组件生成一份 markdown 格式的描述信息。
![]()
第三步，循环所有组件，批量构建组件描述信息，最终得到结构化的业务数据集：
数据集特点：以 JSON 的格式存储；包含了组件标识、组件类型等关键业务数据；
![]()
嵌入（Embedding）得到业务知识库
运用 Dify 平台的知识库功能，对我们原始数据文本进行分段和清洗，最终 Embedding 为知识库：
![]()
简单做下召回测试，验证嵌入效果：
把活动专员的需求构造成与知识库相似的 json 格式，把组件类型放到 widget_type 中，需求描述放到 widget_desc 字段中，最终匹配出类型同为 "H5 功能组件" 且包含 “抽奖模块” 的知识段落：
![]()
Dify 工作流 - 实现 RAG & Agent
Prompt -> LLM 润色 Prompt -> Agent -> 知识库 -> 业务知识 + Prompt -> LLM -> 业务数据结构
按照以上的流程配置得到以下的工作流：
实现了活动专员输入 prompt → 大模型优化 prompt，贴合知识库的形式 → 再交给 Agent 去循环匹配知识库，找到最贴合的组件列表 → 最终再过一遍大模型，根据活动专员的需求和上下文中的业务知识库内容，为我们推荐出合适的组件列表及推荐理由。
![]()
由于业务的特殊性，我们需要在一个请求中进行多次的知识库匹配，才能做到最好的召回效果，因此这里采用 Agent 来完成这个循环查询知识库的工作：
在 Dify 平台中可以很方便地实现一个 Agent：描述好 Agent 的角色和职责等，并把对应的工具配置好。
![]()
这里的工具 widget_search 实际上就是一个查询知识库的工作流，我们把它制作成一个自定义工具，供这个 Agent 使用：
把查询知识库的能力做成工具。允许 Agent 逐条提示词查询知识库，提升召回效果。
![]()
Dify 工作流 – 运行 & 追踪
在 Dify 工作流中，有一个跟踪的功能特别好用，可以看到整个流程每一步的详细情况，包括执行耗时，消耗的 token 数，以及输入的 prompt 等。可以清晰的看到每一步的效果，方便调试和优化。
![]()
RESTful API 调用 - 把 AI 的能力接入业务系统
最后，根据 Dify 提供的 RESTful API 接口，把我们工作流的能力接入到业务系统，就完成了整个想法的落地：
![]()
整体流程图：
![]()
企业级 AI 应用的选型对比
![]()
Dify 等低代码平台更适合要快速落地，对性能和成本要求不高的业务场景，可以利用它来快速验证我们的想法。而当需求定制化程度较高，或者对性能成本控制 (token 消耗) 有要求的场景则建议采用开发框架如 LangChain 来进行，两者也可以结合使用。
【第3378期】AIGCDesign 开放式跨端 AI 组件解决方案
总结
本文分析了 AIGC 在组件活动业务中的应用案例，并探讨了 AI 在业务中的潜力。通过使用 Dify 平台，可以快速验证 AI 与业务结合的想法。
在组件活动业务的应用案例分析中，展示了活动组件 AI 助手的功能和使用方法。这个助手通过快速分析活动专员需求，提供最佳的组件选择建议，降低了组件选择成本。
在落地业务 Agent 的过程中，使用 Dify 平台共五个步骤完成，包括业务数据准备、嵌入得到业务知识库、实现 RAG 和 Agent、运行和追踪工作流，以及通过 RESTful API 接入业务系统。
最后，对比了 Dify 等低代码平台和 LangChain 等开发框架的特点和适用场景，指出它们在企业级 AI 应用中的优劣和适用性。
关于本文
作者：@AlwinXie
原文：https://mp.weixin.qq.com/s/MzraLxSeS9yKaxRPjownPg
![]()
这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。
