小程序智能聊天机器人

Posted 2023-03-31 没事干的小伙子

ChatGPT小程序实战

• 背景
• 准备工作
• • 申请小程序并认证
  • 申请聊天接口秘钥
  • 申请微信支付商户号
• 编写代码
• • 用户管理
  • • 小程序授权登录
    • 获取用户信息
    • 更新用户头像和昵称
  • 结合第三方聊天平台API
  • • 调用聊天接口的api
• 会员支付
• 福利

背景

   最近ChatGPT特别火，但是好多小伙伴不知道，到底怎样去利用去做一些对自己有益的事情，闲来无事，做了个小程序开发流程分享给大家。

准备工作

申请小程序并认证

必须申请认证小程序，不然后续无法进行支付等相关操作，认证具体流程自行参考：微信公众平台

申请聊天接口秘钥

可以接入图灵，等api，或者GPT都可以的，自己去申请

申请微信支付商户号

这一步也是自己去参考微信支付去申请，这一步我们需要拿到微信支付的商户号和秘钥。

编写代码

用户管理

小程序授权登录

这里我们参考开放平台的官方文档的小程序登录：
1.前端通过调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
2.服务端调用 auth.code2Session 接口，换取 用户唯一标识 OpenID，这里假设我们拿到code，后端代码如下：

@PostMapping("getWxAuthorization")
    public AjaxResult getWxAuthorization(String code)
        JSONObject object = WxLoginUtil.getAppId(code);
        if (object.containsKey("errcode") && object.getIntValue("errcode")!=0) 
            log.error("授权失败，错误信息：", object);
            return AjaxResult.error("授权失败！");
        
        String openid = object.getString("openid");

        QueryWrapper<WxUser> queryWrapper = new QueryWrapper<>();


        queryWrapper.eq("open_id", openid);

        WxUser wxUser = wxUserService.getOne(queryWrapper);
        //为空时自动创建账户
        if (StringUtils.isNull(wxUser))
            wxUser = new WxUser();
            wxUser.setUserType("0");
            wxUser.setLimitTimes(15l);//我们给用户限制下每日调用次数，方便我们引导用户开通会员，不然怎么盈利呢？
            wxUser.setOpenId(openid);
            wxUser.setRegisterDate(new Date());
            wxUser.setVipEffTime(new Date());
            wxUser.setVipExpTime(new Date());
            wxUserService.save(wxUser);
        
        return AjaxResult.success("登录成功！", JwtTokenUtil.createToken(wxUser.getId()));
    

获取用户信息

登录成功后，小程序端需要拿到我们在自己的后台创建的用户信息：

	@PostMapping("/getUser")
    public AjaxResult getUser()
        WxUser appUser = wxUserService.getById(JwtTokenUtil.getUserId);
        //每次获取的时候，我们判断下用户会员是否过期了，过期就更改下状态
        if(appUser.getUserType().equals("1") && appUser.getVipExpTime().before(new Date()))
            appUser.setUserType("2");
            wxUserService.updateById(appUser);
        
        
        return AjaxResult.success(appUser);
    

更新用户头像和昵称

为了方便用户改变在小程序内显示的头像和昵称，我们做如下处理：

	@PostMapping("/updateUser")
    public AjaxResult updateUser(@RequestBody WxUser wxUser)
        WxUser appUser = wxUserService.getById(JwtTokenUtil.getUserId);

        if (StringUtils.isNotEmpty(wxUser.getAvatar())) 
            appUser.setAvatar(wxUser.getAvatar());
        

        if (StringUtils.isNotEmpty(wxUser.getNickName())) 
            appUser.setNickName(wxUser.getNickName());
        
        
        return AjaxResult.success("修改成功", appUser);
    

到此为止，小程序端就可以登录，并且更新和获取用户信息了！接下来我们正式开始调用ChatGPT的api。

结合第三方聊天平台API

调用聊天接口的api

这里我们直接调用，我稍微加了功能敏感词过滤

	@PostMapping("chatCompletion")
    public AjaxResult chatCompletion(@RequestBody CompletionRequest completionRequest)
        //TODO 敏感词，每日提问次数
        Long getUserId = JwtTokenUtil.getUserId;

		//封装方法，校验用户的可使用次数
        AjaxResult userUseTimes = getUserUseTimes(getUserId);

        if ((int)userUseTimes.get("code")!=200)
            return userUseTimes;
        
        /*敏感词过滤*/
        /*ArrayList<String> sensitiveWord = DFAUtils.getSensitiveWord(completionRequest.getPrompt());
        if (StringUtils.isNotEmpty(sensitiveWord))
            log.error("检测到敏感词：", sensitiveWord);
            //TODO 敏感词记录
            return AjaxResult.error("您的问题含有敏感词，请重新提问!");
        */

        ChoiceMessage message = null;
        try 
            CompletionChatResponse completionChatResponse =  ChatUtil.chatCompletion(completionRequest.getPrompt());
            message = completionChatResponse.getChoices().get(0).getMessage();
            List<Object> userCacheMessages = ChatUtil.getUserCacheMessages();
            userCacheMessages.add(message);
            ChatUtil.setUserCacheMessages(userCacheMessages);
         catch (Exception e) 
            return AjaxResult.success("系统开了个小差，请稍后重试！");
        


        return AjaxResult.success(message.getContent());
    

封装的调用方法ChatUtil.chatCompletion(completionRequest.getPrompt());

public static CompletionChatResponse chatCompletion(String prompt)
        CompletionChatRequest completionChatRequest = new CompletionChatRequest();
        HttpRequest post = HttpUtil.createPost(chatCompletionUrl).timeout(300000);
        Map<String, String> headers = new HashMap<>();
        headers.put("Authorization", Authorization);//上面申请的apikey
        post.addHeaders(headers);
        post.contentType("application/json;charset=UTF-8");
        completionChatRequest.setModel(model);
        ChoiceMessage message = new ChoiceMessage("user", prompt);

		//因为我们调用的3.5的模型，这里作了上下文关联
        List<Object> messages = getUserCacheMessages();
        int size = messages.size();

        if (size>19)
            messages.remove(0);
        

        messages.add(message);
        setUserCacheMessages(messages);
        completionChatRequest.setMessages(messages);
        post.body(JSON.toJSONString(completionChatRequest));
        String body = post.execute().body();
        CompletionChatResponse completionChatResponse = JSON.parseObject(body, CompletionChatResponse.class);
        return completionChatResponse;
    

现在我们已经基本实现了整个流程，可以看下效果：

会员支付

效果已经有了，那我们来接入会员系统，下期继续

福利

留言可以先给大家免费体验一波，下期我们继续接入会员功能！

微信小程序开发—项目实战之聊天机器人

项目功能介绍

人工智能虚拟机器人“微软小冰”大家玩过吧，很酷的一个应用。发送文字、语音和图片都能得到智能的回复。

那现在我们就用小程序做一个模拟的应用，智能聊天机器人。发送文字它可以回复一段话，或一张图片，是不是有点小酷！

下面是小程序开发的一个智能聊天机器人的应用界面：

当然，这种智能回复的算法和数据库我们自己肯定是没有的，所以我们借助于图灵机器人的开放API接口来完成我们的功能。

图灵机器人接口：http://apistore.baidu.com/apiworks/servicedetail/736.html，在百度API store注册获取appkey就可以免费使用了。

智能聊天机器人的开发步骤

1、整体框架

很简单，两个页面。两个tab，并修改window标题栏和tabBar的颜色等属性就好。这个全部在app.json中完成。

2、image组件的使用

image组件介绍：https://mp.weixin.qq.com/debug/wxadoc/dev/component/image.html?t=20161122
image组件的使用与web开发的image标签的用法类似。这里主要关注image的mode属性，它指定图片的缩放以及裁剪模式，共提供了3种缩放、9种裁剪模式。

3、form表单的使用

表单，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

属性名	类型	说明
report-submit	Boolean	是否返回formId用于发送模板消息
bindsubmit	EventHandle	携带form中的数据触发submit事件，event.detail = {value : {‘name’: ‘value’} , formId: ”}
bindreset	EventHandle	表单重置时会触发reset事件

当点击 表单中 formType 为 submit 的 <button/> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

表单提交的要点：

• 在form内的表单组件必须有name属性。
• 在form内的button的 formType 属性为 submit 。
• form的属性bindsubmit即为数据提交事件绑定的响应函数。

4、wx.request接口的使用

wx.request发起的是 HTTPS 请求。一个微信小程序，同时只能有5个网络请求连接。
在开发调试模式开发工具没有做安全检查，因此是可以请求http的。

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json'
  },
  method: 'GET',
  success: function(res) {
    console.log(res.data)
  }
})

了解http的对这个接口参数应该不陌生，首先url为接口地址，data为请求的参数，header为请求的头，header中不能设置header 中不能设置 Referer。method为请求的方法，包括：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

5、scroll-view组件的使用

scroll-view为可滚动视图容器。这个主要用于聊天界面在有新的消息时需要自动滚动到最新聊天的位置。它的属性还是比较多的，参看文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161122

属性名	类型	默认值	说明
scroll-x		Boolean	false
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部
bindscrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
bindscroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

这里我们主要用到scroll-y（允许纵向滚动）和scroll-top（设置竖向滚动条位置）属性，以完成聊天内容的自动下翻。

6、两个坑

a、更新数据同时更新scrollTop，无法达到效果
需要先更新数据，然后更新scrollTop

    要这样写才可以更新聊天页面内容并将滚动条置于正确的位置
    this.setData({content:newContent});
    this.setData({scrollTop:newScrollTop});
    而不能写为下面这样
    this.setData({
        content:newContent,
        scrollTop:newScrollTop
    });

b、textarea的value属性绑定逻辑层的data数据段

在逻辑层调用setData({text:”“})，textarea中数据并不会被清空。这个问题还没找出解决方案，等研究出方法再更新。

关于这个小程序的开发过程我录制了视频教程，教程是收费的，19元一杯咖啡的钱，掌握一门技术，有需要的可以购买。

智能聊天机器人视频教程地址：http://edu.csdn.net/course/detail/3370