[图片] ChatGPT最近大火，让原本已经沉寂许久的AI领域再次被唤醒狂欢。但是还是有很多朋友受限于OpenAI对国内用户的限制，无法愉快地体验这项革命性的AIGC技术。 众所周知，ChatGPT 是一个基于 GPT-3 的聊天机器人模型，能够通过分析提问内容生成流畅的自然语言结果，我们除了可以在 OpenAI 的ChatGPT官网上体验，也可以通过调用官方API来获取 ChatGPT 机器人模型进行训练和体验。 本文将向您展示如何使用低代码工具，在30分钟左右搭建一个基于 ChatGPT 的聊天机器人小程序。一方面能让拥有OpenAI账号的朋友能随时随地体验ChatGPT；另一方面，也希望通过教程学习搭建出AI聊天小程序，去分享给更多人，把前沿的AI技术普惠到更广泛的群体，一起体验AIGC技术所带来的便利。 我们这次就以腾讯云微搭低代码作为搭建平台，来演示一下应该如何快速开发一个基于ChatGPT的聊天机器人应用，即便是新手开发者也可以试试哦 一、准备工作 在开始搭建聊天机器人之前，您需要做以下准备： 微信小程序账号：如果您还没有微信小程序账号，可以在微信公众平台注册（如果没有小程序，也可以发布为移动端H5应用） 开通腾讯云微搭低代码：微搭低代码是腾讯云官方推出的一款快速搭建应用的低代码开发工具，可以直接访问腾讯云微搭官网免费开通注册 OpenAI账号：OpenAI账号注册也是免费的，不过OpenAI有地域限制，这里网上教程关键词搜索一大把，就不做赘述了。注册成功后，可以登录OpenAI的个人中心来获取[代码]API KEY[代码] 本教程适用人群和应用类型： 适用人群：初级开发者（操作门槛较低，有一定技术背景的非开发者也可以体验） 应用类型：小程序 或 H5应用（基于微搭一码多端特性，也可以直接发布为Web应用，点击文末链接可体验作者微搭搭建的Web版GPT聊天机器人） 二、搭建聊天机器人 首先，一个常见的聊天对话机器人应用界面效果，如下图所示： [图片] 通过应用界面可以看到，它主要由如下几个部分组成： 一个对话聊天界面 一个API数据查询接口 界面UI与后端数据的联动渲染 那现在，我们就参照上面的几个模块，正式开始通过微搭低代码工具，分5个步骤来依次拆解搭建： 1.对应用界面进行样式配置 [图片] 我们先拖入一个滚动容器和一个普通容器，一个用来展示聊天的上下文对话，一个用来展示输入框和发送按钮。然后依次拖入图中大纲树所示的组件，组件相应的层级关系可以参考上图中的大纲树结构。 接下来针对上述的组件分别进行样式的配置，我们默认使用样式面板的弹性（Flex）布局，包含接收消息和发送消息两个普通容器，可以分别选择样式面板中的弹性布局中的左对齐，如下图所示： [图片] 接着可以分别配置图片和文本两个组件的高度和宽度大小以及内外间距，以达到想要的视觉效果。 完成聊天上下文对话框的样式配置之后，可以进行底部多行输入框和按钮这个普通容器的样式配置，样式配置方式与上面的发送消息容器一样使用弹性布局并选择“平分”的方式布局，如下图所示： [图片] 完成布局配置之后，由于底部输入框按钮等是固定位置的，故需要额外配置一下定位属性，选中底部的“普通容器”，在样式面板底部，做如下配置即可： [图片] 以上，通过进一步微调一些样式细节如组件背景色以及间距等后，即可达到上文提到的应用界面效果了。 可以看到整个页面的配置过程是完全可视化操作的，不需要写一行代码。当然，如果样式配置不是很熟悉，或者有疑问的朋友，也可以等我们的视频教程，手把手教你用微搭低代码来配置AI聊天应用。 2. 配置数据变量和数据源API 第2步，开始进行数据的绑定和数据源的配置： a. 新建一个数组对象变量chatList，用于存储聊天记录 [图片] 首先配置一个变量，如命名为chatLlist聊天记录这么一个变量，一个对象数组，默认值为如下所示，当然大家也可以基于这个结构任意修改。 [代码][ { "res": "你好，欢迎体验ChatGPT聊天机器人，你可以直接输入你感兴趣的任何问题向我提问", "req": "红孩儿是牛魔王的亲儿子吗？", "index": 1 }, { "res": "不是，红孩儿是牛魔王的养子。据西游记中的记载，牛魔王是一个孤独的怪物，他在深山里住了很久，没有子女，却有一个养子——红孩儿，红孩儿的父母去世时，牛魔王便收养了他。", "req": "那谁教他的三味真火", "index": 2 } ] [代码] 接着把这个数组变量的初始值跟我们的这个页面的内容分别进行绑定。首先我们选择一个父级的普通容器，在属性配置的循环展示绑定为刚刚新建的数组变量。然后在里面的子节点中，如文本组件，分别绑定这个数组中的成员变量，他们的配置如下图所示： [图片] [图片] 这一步数据绑定完成之后，接下来就可以去配置请求远程数据的数据源API了。 b. 配置一个数据源APIs（用于请求Chat GPT接口） API的配置相对比较简单，主要参考OPENAI的官方文档，文档中可以看到文本对话接口对应的请求参数信息如下： [代码]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 } } [代码] 其中的[代码]API_KEY[代码]是在完成OPENAI账号注册之后，在其个人中心中获取即可，至于OPENAI的账号注册方式，大家动动手搜索一下，网上教程很多就不啰嗦了。 3. 给发送按钮绑定请求事件 我们在第1步中已经在页面中放置了输入框、按钮和文本展示等组件。接下来，我们需要给输入框配置相关的事件响应逻辑，来获取用户输入的消息内容，参考的关键配置如下: [图片] 然后，给按钮绑定事件来处理输入框中用户发送的消息，选择按钮组件，在右侧事件面板中配置如下逻辑，即 点击按钮 时触发API请求，并将获取到的API返回结果渲染在页面中。 [图片] 4. 将API返回数据 与 在页面中进行渲染展示 第4步，将返回值用“变量赋值”方法加入到chatList数组中 [图片] 这里我们需要在数据中增加一条新的消息，采用表达式绑定的方式进行原有的[代码]ChatList[代码]变量进行解构后再赋值，表达式参考如下： [代码][ ...$page.dataset.state.chatList, { req: $page.dataset.state.text, res: "" } ] [代码] 5. 完成开发，进行应用发布 前端界面和后端数据逻辑都配置开发完成后，可在应用编辑器的右上角点击“发布”按钮，我们可以选择发布到 已绑定的小程序，也可以直接发布移动端的H5应用，如下所示： [图片] 至此，一个基础的AI聊天机器人应用搭建就完成了。 三、进一步完善 基于上述步骤搭建完聊天机器人小程序后，你还可以进一步完善它的功能。 例如，您可以在小程序中添加聊天记录功能，让用户可以查看过往的聊天记录。您也可以使用其他自然语言处理技术；例如语音识别和文本分类，来使聊天机器人更加智能。 如需要存储聊天历史记录的话，可以在数据源中配置一个“聊天历史记录”数据模型，参考模型配置如下： [图片] 总之，使用微搭低代码搭建聊天机器人小程序，对于熟悉低代码或者喜欢钻研能力的朋友来说，确实是一件非常简单而有趣的事情。当然如果确实对界面样式配置不是很熟悉，或者其他有疑问的朋友，也可以关注漫话开发者公众号后续视频教程，手把手教你用微搭低代码来配置AI聊天机器人应用。 通过本教程的介绍，你已经基本熟悉了如何使用微搭低代码快速搭建基于 ChatGPT 的聊天机器人了，有任何疑问也欢迎关注漫话开发者公众号留言。点击右侧链接，可以立即体验作者搭建的Web版GPT聊天机器人。 也欢迎关注「漫话开发者」低代码系列文章： 微信支付x低代码，快速构建支付类小程序实操教程 小程序消息推送x微搭低代码，微信消息推送快速上手实操教程 四、附录Q/A 腾讯云微搭低代码平台，连接微信和企微用户，帮助企业快速定制和构建移动协同办公应用，让信息和流程流转更高效。3分钟可视化搭建和发布小程序、H5、Web等多端应用。快速搭建企业专属的业务管理平台，表单流程等办公和管理类应用，提供企业级账号和权限管控等能力。 在搭建聊天机器人应用过程中，你可能会遇到一些问题，下面是常见问题的解决方法： i. 机器人无法回复：这可能是因为 ChatGPT 机器人模型无法理解用户的问题。可以尝试使用更加具体的问题，或者尝试使用不同的自然语言处理模型。 ii. 机器人回复不流畅：这可能是因为 ChatGPT 机器人模型生成的回复不够流畅或在服务器在境外所致。可以尝试调整模型的「[代码]temperature[代码]」参数，使生成的回复更加流畅。 iii. 机器人回复内容不准确：这可能是因为 ChatGPT 机器人模型无法理解用户的问题，或者因为模型没有学习到足够的知识。可以尝试使用更加具体的问题，或者尝试使用不同的自然语言处理模型。 iv. 如果遇到其他低代码配置问题，可以尝试在微搭社区或通过网上搜索中寻求帮助。 点击右侧链接，可以立即体验作者搭建的Web版聊天机器人 最后，上述教程文本都通过ChatGPT校验，enjoy~

各位微信开发者： 以下是上周小程序相关能力更新及我们在社区收到的问题反馈、需求的处理进度，希望同大家一同打造小程序生态。 小程序·云开发新增高级日志服务为方便开发者通过日志快速的发现和定位问题，小程序·云开发提供了高级日志服务。通过高级日志服务，开发者可以更加灵活地采集和检索日志，每条日志可最长存储30天。 详细介绍请参考 高级日志。 [图片] 微信开发者工具新增文档搜索功能微信开发者工具新增文档搜索功能，方便开发者在开发过程中查询相关开发文档。开发者可通过下载最新 Nightly 版本工具体验功能。 详细介绍请参考 文档搜索。 [图片] OCR 能力更新OCR 能力方面，有两处更新点。其一，是身份证 OCR 新增性别和民族字段的支持。其二，是身份证和银行卡 OCR去除了 type（拍照、扫描模式）字段，简化统一调用。新调用这两个接口不再需要 type 字段，而之前使用 type 字段的调用仍然继续兼容。 详细介绍请参考 OCR接口文档。 [图片] 上周问题反馈和处理进度（10.14-10.18）已修复的问题微信小程序开发工具，初始化云环境卡着，重启工具也无效的问题 查看详情 微信小程序白屏的问题 查看详情 修复中的问题小程序 editor 插入图片后图片直接插到前面了的问题 查看详情 关于 input 真机聚焦的问题 查看详情 发请求时捕获到 jsapi has no permission 错误 查看详情 wx.downloadFile 下载 .png 图片 返回.BIN格式的文件导致保存失败的问题 查看详情 小游戏虚拟支付，调不起微信支付界面的问题 查看详情 安卓7.0.6调用 canvasToTempFilePath 报错的问题 查看详情 ShareAppMessage 偶现无法调用的问题 查看详情 editor 状态改变时，bindstatuschange 不触发的问题 查看详情 通过 setTimeout 连续调用 sendDanmu 发送弹幕，安卓手机会随机丢失弹幕的问题 查看详情 安卓微信 7.0.7 无法播放视频的问题 查看详情 小游戏调微信接口（分享，虚拟支付，广告等），均无响应的问题 查看详情 先后授权给两个开放平台的问题 查看详情 页面打不开的问题 查看详情 image的show-menu-by-longpress识别打开一个新的小程序后，原小程序卡死的问题 查看详情 语法问题 查看详情 点击账号密码验证后报错，弹不出页面的问题 查看详情 AppSecret 启用过程密码验证点击事件有BUG + 测试页面链接没有更新全部 404 的问题 查看详情 新能力定向分享没拉起分享框的问题 查看详情 微信开发者工具可以预览 上传按钮为不可点击状态 换另一个开发者账号也没用的问题 查看详情 video 组件中 button 内部不能包含 cover-view 的问题 查看详情 textarea 动态设置 cursor 无效的问题 查看详情 背景音播放 hls 协议的音频在 iOS 上不能触发 onEnded的问题 查看详情 camera 组件在 onCameraFrame 根据回调帧改变 组件大小比例，在安卓手机就不回调的问题 查看详情 云开发的云文件ID在刷新后变了的问题 查看详情 非简体中文时 chooseLocation 会失败的问题 查看详情 微信小游戏长按后抬起时报错 "alert is not defined" 的问题 查看详情 加速度计 wx.onAccelerometerChange 在手机屏幕熄灭的情况下不回调的问题 查看详情 iOS 中微信7.0.8中自定义 tabBar 跳转多次的问题 查看详情 lottie-miniprogram 真机上闪退的问题 查看详情 requestSubscribeMessage:fail require user interact 的问题 查看详情 从 iOS app 分享小程序卡片 在安卓手机微信上打不开该分享的小程序的问题 查看详情 真机调试时，显示无网络的问题 查看详情 在 iOS 的小程序，input框聚焦后切换到桌面再返回小程序会导致input框输入重叠的问题 查看详情 video 组件播放视频，同一个源ios正常播放，安卓无法播放的问题 查看详情 camera 权限相关的问题 查看详情 真机调试无法显示拖动和缩放效果的问题 查看详情 小程序后台错误查询显示NAN是什么错误的问题 查看详情 微信小游戏版本更新后，有的玩家的游戏版本没有更新的问题 查看详情 需求反馈需求评估中支持正则后行断言的需求 查看详情 公众号能接收到部分用户关注、取关事件的需求 查看详情 setTabBarItem 设置图片的需求 查看详情 小程序地图marker点的聚合功能的需求 查看详情 小程序二维码中间区域图片可以不上传的需求 查看详情 小程序 OCR 识别插件待确认的需求 查看详情 开发者工具可以查看自定义组件中的 data 的需求 查看详情 对局回放分享按钮无法通过点击回调隐藏的需求 查看详情 可视化合并冲突的操作界面的需求 查看详情 小程序“订阅消息”模板申请“标题的需求 查看详情 微信开发者工具的编辑器功能提供多窗口编辑功能的需求 查看详情 提供把小程序页面转发给客服的功能的需求 查看详情 组件 input 封装为 component 时，在安卓机输入草稿模式不触发 binginput 事件的需求 查看详情 开发者工具的一些优化建议(项目上传版本号填写) 查看详情 微信公众号MP后台支持图文消息本身直接落地到小程序的需求 查看详情 希望增加一个图片安全鉴别的函数的需求 查看详情 wx.showtoast 支持横屏的需求 查看详情 希望后台通知中心里的通知都发微信通知的需求 查看详情 建议打开地图选择位置 wx.chooseLocation 多返回点信息的需求 查看详情 微信小程序支持腾讯云实时音视频可以配置画面质量的需求 查看详情 关于小程序广告组件审核流程的优化 查看详情 企业微信连续的扫码推事件（弹框）的需求 查看详情                                                                                                                                                                      微信团队                                                                                                                                                                  2019.10.25