侧边栏壁纸
  • 累计撰写 85 篇文章
  • 累计创建 83 个标签
  • 累计收到 117 条评论

目 录CONTENT

文章目录

扣子(Coze):构建智能助手并嵌入个人网站的新选择

MinChess
2024-11-12 / 0 评论 / 0 点赞 / 94 阅读 / 2,325 字 / 正在检测是否收录...

1. 前言

之前写了一篇关于使用 MaxKB 搭建个人知识库并集成到个人网站的博客;

整个技术路线我觉得还是很好的,但是也伴随着很多问题,例如:

  • 硬件资源:自己部署一个 RAG 的应用,跑起来和用起来的区别还是很大的,要达到一个较好的效果,还是得有好的硬件支撑;
  • 知识库维护:这和多方面有关,比如文档切片及向量化的方式和算法影响、知识库的更新等,同时也受硬件的制约;
  • 可拓展性弱:现在的 MaxKB 似乎是支持 Workflow 的,但是仅仅这样,很多需求还是有困难的,功能比较弱;

所以,综合这些原因,我放弃了在个人网站中使用 MaxKB,但是我并不否认它是一个很好的产品;只是对于我想集成一个智能助手到个人网站的这个需求而言,他并不是最好的选择;

当然有更好的选择,看标题就知道了,所以本文着重探索一下扣子的用法。

2. 什么是扣子(Coze)[1]

国内地址https://www.coze.cn

外网地址https://www.coze.com

扣子是新一代 AI 应用开发平台。无论你是否有编程基础,都可以在扣子上快速搭建基于大模型的各类智能体,并将智能体发布到各个社交平台、通讯软件或部署到网站等其他渠道。

  • 功能与优势
  1. 灵活的工作流设计

扣子的工作流功能可以用来处理逻辑复杂,且有较高稳定性要求的任务流。扣子提供了大量灵活可组合的节点包括大语言模型 LLM、自定义代码、判断逻辑等,无论你是否有编程基础,都可以通过拖拉拽的方式快速搭建一个工作流,例如:

  • 创建一个搜集电影评论的工作流,快速查看一部最新电影的评论与评分。
  • 创建一个撰写行业研究报告的工作流,让智能体写一份 20 页的报告。
  1. 无限拓展的能力集

扣子集成了丰富的插件工具,极大地拓展智能体的能力边界。

  • 官方插件:扣子官方发布了多款能力丰富的插件,包括资讯阅读、旅游出行、效率办公、图片理解等 API 及多模态模型。你可以直接将这些插件添加到智能体中,丰富智能体能力。例如使用新闻插件,打造一个可以播报最新时事新闻的 AI 新闻播音员。
  • 自定义插件:扣子平台也支持创建自定义插件。 你可以将已有的 API 能力通过参数配置的方式快速创建一个插件让智能体调用。自定义插件也可以发布到商店,供其他用户使用。
  1. 丰富的数据源

扣子提供了简单易用的知识库功能来管理和存储数据,支持智能体与你自己的数据进行交互。无论是内容量巨大的本地文件还是某个网站的实时信息,都可以上传到知识库中。这样,智能体就可以使用知识库中的内容回答问题了。

  • 内容格式:知识库支持添加文本格式、表格格式、照片格式的数据。
  • 内容上传: 知识库支持 TXT 等本地文件、在线网页数据、Notion 页面及数据库、API JSON 等多种数据源,你也可以直接在知识库内添加自定义数据。
  1. 持久化的记忆能力

扣子提供了方便 AI 交互的数据库记忆能力,可持久记住用户对话的重要参数或内容。

例如,创建一个数据库来记录阅读笔记,包括书名、阅读进度和个人注释。有了数据库,智能体就可以通过查询数据库中的数据来提供更准确的答案。

  • 简单理解一下

扣子是 AI 应用开发平台或者说是大模型智能应用开发平台

它里面集成了很多工具,可以自定义不同场景的智能应用,可视化的配置方式,可以不懂编程,也能制作智能应用;

然后这里我不提 Agent 和 Bot,这些概念我希望有一篇文章专门来记录一下,因为我看了很多文章,感觉大家对这两个概念的理解都有所不一样;

这两个概念并不是新的概念,就是我个人还没有梳理的特别清晰,所以就先不说了;

  • 收费

最开始接触这玩意的时候,是不收费的,现在开始各种收费了;

详细的收费方案参考官网吧;

3. 用扣子创建一个智能体

这里我也就简单记录一下,扣子创建智能体里面要琢磨的东西也很多;

在coze里面新建一个智能体;

image-20241102153719393

创建好了之后就需要去编排这个智能体,具体编排是有很多知识点的,我这里先不赘述了,后面有机会再写一篇记录一下;

image-20241102153748144

4. 嵌入第三方网站

这里以嵌入 halo 2.x 为例;

  • 发布智能体

点击发布之后,选择web sdk;

image-20241102154019910

复制安装代码,注入到网站之中;

image-20241102154111553

细心的你一定发现了代码需要嵌入到 <body> 标签里面;

image-20241102155308916

而我们的 halo 是不支持直接嵌入 head 标签的,所以就得折腾一下

image-20241102155431480

写一个js,把代码嵌进去,同时把我们写的 js 嵌入到 head 标签里面;

<script>
	document.addEventListener('DOMContentLoaded', function() {
		// Create the first script element for the external JavaScript source
		const externalScript = document.createElement('script');
		externalScript.src = 'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.0.0-beta.2/libs/cn/index.js';
		externalScript.type = 'text/javascript';

		// Append the external script to the body, and then load the Coze WebChatClient
		externalScript.onload = function() {
			// Create the second script element for initializing the WebChatClient
			const initScript = document.createElement('script');
			initScript.type = 'text/javascript';
			initScript.textContent = `
				new CozeWebSDK.WebChatClient({
					config: {
						bot_id: '743......06220',
					},
					componentProps: {
						title: 'Coze',
					},
				});
			`;

			// Append the initialization script to the body
			document.body.appendChild(initScript);
		};

		// Append the external script to the body to start the loading process
		document.body.appendChild(externalScript);
	});
</script>

这个代码片段的主要功能是加载一个外部JavaScript库并初始化一个聊天客户端。以下是代码的分步解释:

  1. 等待页面加载完成:

    document.addEventListener('DOMContentLoaded', function() { ... });
    

    使用 DOMContentLoaded 事件确保整个页面的DOM结构已完全加载后再运行脚本。这保证脚本不会因为页面还没加载完而报错。

  2. 创建第一个脚本元素,加载外部JavaScript库:

    const externalScript = document.createElement('script');
    externalScript.src = 'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.0.0-beta.2/libs/cn/index.js';
    externalScript.type = 'text/javascript';
    

    代码通过 document.createElement('script') 创建一个 <script> 元素,并将其 src 属性设为指定的外部JavaScript库URL。这是一个外部资源,通常包含聊天应用SDK的核心代码。

  3. 当外部脚本加载完成后,初始化 coze:

    externalScript.onload = function() {
        const initScript = document.createElement('script');
        initScript.type = 'text/javascript';
        initScript.textContent = `
            new CozeWebSDK.WebChatClient({
                config: {
                    bot_id: '743......06220',
                },
                componentProps: {
                    title: 'Coze',
                },
            });
        `;
        document.body.appendChild(initScript);
    };
    

    onload 事件会在外部脚本成功加载并执行后触发。然后,它会创建另一个脚本元素 initScript,该脚本直接写在 textContent 中,目的是初始化 CozeWebSDK.WebChatClient

    • bot_id 是一个标识,指定了聊天机器人。
    • componentProps 包含一些自定义参数,比如聊天窗口的 title 设置为 “Coze”。
  4. 将外部脚本添加到文档中,开始加载流程:

    document.body.appendChild(externalScript);
    

    将第一个脚本元素(即外部SDK)添加到 <body> 中,开始下载和执行它。

然后注入代码就大功告成了:

image-20241102160111806

低代码编排智能应用有太多的可能性,能力相较于传统的应用肯定是提高了很多的,往后这种驱动 AI 或者 AI 驱动的应用肯定也会充满市场,所以学习一下肯定没错。

本文主要记录一下扣子 Web ADK的用法,后面再继续探索。

如果你对我的内容有不同的看法,或者好的建议,欢迎在评论区留言,非常期待与大家进行交流。


  1. 什么是扣子 ↩︎

0

评论区