微信小程序ChatGpt流式响应

这篇具有很好参考价值的文章主要介绍了微信小程序ChatGpt流式响应。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近用微信小程序做chatGpt的Ai对话,其中重要的一点就是流式响应,现在分享处理逻辑,先给演示图。

微信小程序ChatGpt流式响应,微信小程序,chatgpt,小程序

 下面是关键代码实现逻辑

      const that = this;
      const requestTask = wx.request({
        url: 'xxxxx',
        responseType: "arraybuffer",
        method: 'POST',
        enableChunked: true,
        header: {
          'content-type': 'application/json'
        },
        data: {
          'prompt': '青椒肉丝怎么做'
        },
        success: (res) => {
          console.log("request success", res);
          common_vendor.index.showToast({
            title: "请求成功",
            icon: "success",
            mask: true,
            duration
          });
          // this.res = "请求结果 : " + JSON.stringify(res);
        },
        fail: (err) => {
          console.log("request fail", err);
          common_vendor.index.showModal({
            content: err.errMsg,
            showCancel: false
          });
        },
        complete: () => {
          this.loading = false;
        }
      });
      requestTask.onHeadersReceived(function (r) {
        console.log(r);
      });
      requestTask.onChunkReceived(function (r) {
        // let decoder = new TextDecoder('utf-8');
        // let str = decoder.decode(new Uint8Array(r.data));

        // let en = String.fromCharCode.apply(null,new Uint8Array(r.data));
        // let de = decodeURIComponent(escape(en));

        // console.log("onChunkReceived", str);

        const data16 = that.buf2hex(r.data)	// ArrayBuffer转16进制
        const requestData = that.hexToStr(data16) // 16进制转字符串
        console.log(requestData); 
        that.res +=requestData;
      });

其中有两个关键点需要注意

1.enableChunked: true流式响应开关,会自动在header中加入transfer-encoding chunked

2.arraybuffer转字符串问题,有TextDecoder就很好处理,没有也可以参照我上面的示例。

最后提供免费源码下载地址和演示二维码,全量保真。

源码下载 ChatGpt插件,支持聊天,流式输出,UI漂亮,有小程序演示 - DCloud 插件市场

微信小程序ChatGpt流式响应,微信小程序,chatgpt,小程序

 文章来源地址https://www.toymoban.com/news/detail-525962.html

到了这里,关于微信小程序ChatGpt流式响应的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ChatGPT垂直行业私有数据知识库功能-咨询接口采用流式响应输出-JS和Golang实现流式响应

    近期开发私有数据知识库功能,想要实现和ChatGPT聊天效果类似的逐字流式输出展示效果。 GPT3.5本身就有流式聊天补全接口,后端Golang对接后,也需要能流式输出。下面就介绍下前端JS后端Golang来实现这种输出效果   大部分介绍是使用EventStream来实现,我现在不使用EventStream也

    2023年04月10日
    浏览(41)
  • 后端flask,前端vue,实现post请求chatgpt流式响应

    vue2写法 vue3 setup写法

    2024年01月21日
    浏览(41)
  • 微信小程序 | 基于ChatGPT实现模拟面试小程序

    这两年 IT互联网 行业进入寒冬期, 降本增效 、 互联网毕业 、 暂停校招岗位的招聘 ,各类裁员、缩招的情况层出不穷!对于这个市场来说,在经历了互联网资本的疯狂时代,现在各大需要的时候更多能实实在在挣钱的项目。就拿 java开发工程师 岗位来说,对于有多年工作经

    2023年04月17日
    浏览(42)
  • ChatGPT引领智能对话:微信小程序的新潮玩法

    ChatGPT是由OpenAI开发的基于深度学习的自然语言处理模型,它在人工智能领域具有重要的影响力。ChatGPT基于大规模的文本数据进行训练,能够生成高质量的自然语言文本,包括对话、文章等。它的影响力主要体现在以下几个方面: 语言生成和理解能力 :ChatGPT具有出色的语言

    2024年03月20日
    浏览(40)
  • 微信小程序| 打造ChatGPT英语四六级背单词小程序

    学英语,最大的痛苦莫过于背单词! 不知道你平时都是用什么方式在背单词呢?硬啃单词书?字典?还是说各类的背单词APP来回跳转? 不可否认的是,单词一两遍完全记不住,没有个三四五六七八遍,都很难在考场的卷子上认出他! 所以,这次我们来做一个通关英语四六级

    2024年02月13日
    浏览(36)
  • 微信小程序 |做一款跟ChatGPT下五指棋的小程序

    敢问世间万物,何以解忧? 时下最为火爆的 ChatGPT 想必够资格来回答一下这个问题。 要想当年 AlphaGO 打败世界围棋高手李世石,就展露出AI的惊人实力,时隔多年,AI领域在憋了这么多年之后,现如今, ChatGPT 4 大杀四方,各行各业无不为之震撼! 借用刚召开的新程序员大会

    2024年02月02日
    浏览(45)
  • 微信小程序| AIGC之动手实现ChatGPT法律顾问小程序

    在资本退去后,现如今的互联网行情很差劲,很多创新业务都不得不砍除。再加上国内互联网时代进入到了一个 增量犹显疲态,增量杀红了眼! 阶段,各大互联网公司均有一种断臂求生的态势!各位互联网同行,大力发展第二职业已然变成了必要的生产力! 我们既要辩证的

    2024年02月07日
    浏览(41)
  • 微信小程序_把chatgpt聊天数据复制到剪切板

    大家好,我是yma16,不止前端,本文将介绍微信小程序中 chatgpt聊天页面设计和复制聊天数据。 往期微信小程序文章 小程序自定义微信昵称和头像 小程序制作markdown博客 小程序结合chatgpt制作聊天页面 小程序组件传值 ui效果如下 复制数据到粘贴板的效果如下: 网格背景样式

    2023年04月22日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包