本文将向您展示如何使用低代码工具在大约 30 分钟内构建聊天机器人小程序。 让有账号的朋友随时随地体验,也希望低代码的xAI技术能够造福更多的人。
近期的大火,再次将蛰伏已久的AI领域唤醒到狂欢之中。 不过,由于国内用户的限制,仍有很多朋友无法愉快地体验这项革命性的AIGC技术。
众所周知,是一个基于GPT-3的聊天机器人模型,可以通过分析问题内容生成流畅的自然语言结果。 除了在其官网体验之外,我们还可以通过调用官方API获取机器人模型进行训练和体验。
本文将向您展示如何使用低代码工具在大约 30 分钟内构建聊天机器人小程序。 一方面让有账号的朋友随时随地体验; 另一方面,也希望通过教程打造AI聊天小程序,分享给更多人,让前沿的AI技术惠及更广泛的人群。 体验AIGC技术带来的便利。
这次我们将以腾讯云微信低代码为平台,演示如何基于腾讯云快速开发聊天机器人应用。 即使是新手开发者也可以尝试。
1、准备工作
在开始构建聊天机器人之前,您需要做好以下准备工作:
本教程适合人群和应用类型:
2. 构建一个聊天机器人
一、常见聊天机器人应用界面效果,如下图所示:
通过应用界面可以看到,它主要由以下几个部分组成:
现在,我们将参考上述模块,正式开始使用微构建低代码工具,分5步进行反汇编和构建:
1.配置应用界面的风格
我们首先拖入一个滚动容器和一个普通容器,一个用于显示聊天的上下文对话,一个用于显示输入框和发送按钮。 然后依次拖入图中大纲树所示的组件。 组件对应的层次关系可以参考上图中的大纲树结构。
接下来分别配置上述组件的样式。 默认情况下,我们使用样式面板的Flex布局,其中包括两个普通容器,用于接收消息和发送消息。 可以在样式面板中的灵活布局中选择左对齐,如下图:
然后可以分别配置图像和文本组件的高度、宽度以及内外间距,以达到所需的视觉效果。
完成聊天上下文对话框的样式配置后,您可以配置多行输入框和底部按钮的公共容器的样式。 样式配置方法与上面的发送消息容器相同,采用弹性布局并选择“均分”布局,如下所示:
完成布局配置后,由于底部输入框按钮等位置固定,需要额外配置定位属性,选择底部的“普通容器”,在样式底部进行如下配置控制板:
上面,通过进一步微调组件背景色、间距等一些样式细节,就可以实现上面提到的应用界面效果。
可以看到整个页面的配置过程完全可视化,不需要写一行代码。 当然,如果您对样式配置不是很熟悉或者有疑问,也可以等待我们的视频教程一步步教您如何使用微博和低代码配置AI聊天应用。
2.配置数据变量和数据源API
步骤2、开始数据绑定和数据源配置:
A。 新建一个数组对象变量来存储聊天记录
首先配置一个变量,比如一个名为聊天记录的变量,一个对象数组,默认值如下图,当然你也可以基于这个结构任意修改。
[ { "res": "你好,欢迎体验ChatGPT聊天机器人,你可以直接输入你感兴趣的任何问题向我提问", "req": "红孩儿是牛魔王的亲儿子吗?", "index": 1 }, { "res": "不是,红孩儿是牛魔王的养子。据西游记中的记载,牛魔王是一个孤独的怪物,他在深山里住了很久,没有子女,却有一个养子——红孩儿,红孩儿的父母去世时,牛魔王便收养了他。", "req": "那谁教他的三味真火", "index": 2 } ]
然后将此数组变量的初始值绑定到我们页面的内容。 首先,我们选择一个父普通容器,并在属性配置循环中显示对新创建的数组变量的绑定。 然后在里面的子节点,比如文本组件,分别绑定这个数组中的成员变量。 它们的配置如下图所示:
完成这一步数据绑定后,就可以配置请求远程数据的数据源API了。
b. 配置数据源API(用于请求Chat GPT接口)
API的配置比较简单。 主要参考官方文档。 在文档中可以看到文本对话界面对应的请求参数信息如下:
curl https://api.openai.com/v1/completions \ -H "Content-Type: application/json" \ -H "Authorization: Bearer YOUR_API_KEY" \ -d '{"model": "text-davinci-003", "prompt": "Say this is a test", "temperature": 0, "max_tokens": 7}'
只需将上面的CURL请求头信息映射到HTTP请求即可。 配置项参考如下:
通过数据源中的【方法测试】,我们得到API的返回结果如下。 点击【参数映射】完成参数结构的配置:
{ "id": "cmpl-GERzeJQ4lvqPk8SkZu4XMIuR", "object": "text_completion", "created": 1586839808, "model": "text-davinci:003", "choices": [ { "text": "\n\nThis is indeed a test", "index": 0, "logprobs": null, "finish_reason": "length" } ], "usage": { "prompt_tokens": 5, "completion_tokens": 7, "total_tokens": 12 } }
其中,完成账户注册后,您可以在您的个人中心获取。 至于账号注册方法,你可以搜索一下。 网上教程有很多,我就不赘述了。
3.将请求事件绑定到发送按钮
在第1步中,我们已经在页面上放置了输入框、按钮、文本显示等组件。 接下来我们需要为输入框配置相关的事件响应逻辑,以获取用户输入的消息内容。 可供参考的关键配置如下:
然后给按钮绑定一个事件,用于处理用户在输入框中发送的消息,选择按钮组件,在右侧的事件面板中配置如下逻辑,即当按钮被点击时,一个API触发请求,将获取到的API返回结果渲染到页面上。 中间。
4.将API返回数据与渲染并显示在页面上相结合
第四步:使用“变量赋值”方法将返回值添加到数组中
这里我们需要向数据添加新的消息,使用表达式绑定解构原始变量,然后赋值。 表达式参考如下:
[ ...$page.dataset.state.chatList, { req: $page.dataset.state.text, res: "" } ]
5. 完成开发并发布应用
前端界面和后端数据逻辑配置和开发完成后,您可以点击应用编辑器右上角的“发布”按钮。 我们可以选择发布到绑定的小程序,或者直接发布移动H5应用,如下所示:
至此,一个基本的AI聊天机器人应用就搭建完成了。
3. 进一步改进
根据上述步骤构建了聊天机器人小程序后,您可以进一步完善其功能。
例如,您可以在小程序中添加聊天记录功能,以便用户可以查看过去的聊天记录。 您还可以使用其他自然语言处理技术; 例如语音识别和文本分类,让您的聊天机器人更加智能。
如果需要存储聊天记录,可以在数据源中配置“聊天记录”数据模型。 参考模型配置如下:
总之,利用微信和低代码构建一个聊天机器人小程序,对于熟悉低代码或者喜欢钻研的人来说,确实是一件非常简单又有趣的事情。 当然,如果你实在对界面风格配置不是很熟悉,或者有其他疑问,也可以按照漫华开发者公众号后续的视频教程,一步步教你如何使用微博和低代码配置AI聊天机器人应用程序。
通过本教程的介绍,您已经基本熟悉了如何用低代码快速构建基于微信的聊天机器人。 如果您有任何疑问,请随时在漫画开发者公众号留言。
4、附录Q/A 腾讯云微信低代码平台连接微信和奇微用户,帮助企业快速定制和构建移动协同办公应用,让信息和流程流程更加高效。 3分钟可视化构建并发布小程序、H5、Web等多终端应用。 快速搭建企业专用的业务管理平台、表单流程等办公和管理应用,提供企业级账号和权限管控能力。 在构建聊天机器人应用程序的过程中,您可能会遇到一些问题。 以下是常见问题的解决方案: