首页 > 其他分享 >chartGPT流式返回前端处理

chartGPT流式返回前端处理

时间:2023-05-10 14:13:02浏览次数:35  
标签:const ai 前端 流式 content done animate chartGPT data

const { data } = await checkCensor({ msg: `${this.content}用中文回答` });
      if (data.data) {
        const object = {
          content: "您的问题不在我的能力范围之内。",
          role: "assistant",
        };
        this.chatList.push(object);
        $(".ai-content .content").animate({ scrollTop: 900000 }, 400);
        this.loading = false;
        this.content = "";
        return;
      }
      $(".ai-content .content").animate({ scrollTop: 900000 }, 400);
      this.content = "";
      try {
        const response = await fetch("https://www.chatbase.co/api/v1/chat", {
          method: "POST",
          headers: {
            Authorization: this.botInfo.authorization,
          },
          body: JSON.stringify({
            messages: [...this.chatList].slice(-5),
            chatId: this.botInfo.chatId,
            stream: this.botInfo.stream,
            model: this.botInfo.model,
          }),
        });

        const data = response.body;
        if (!data) {
          // error happened
        }
        const reader = data.getReader();
        const decoder = new TextDecoder();
        let done = false;
        const object2 = {
          content: "",
          role: "assistant",
        };
        this.chatList.push(object2);
        $(".ai-content .content").animate({ scrollTop: 900000 }, 400);

        while (!done) {
          const { value, done: doneReading } = await reader.read();
          done = doneReading;
          const chunkValue = decoder.decode(value);
          this.resMessage += chunkValue;
          this.chatList[this.chatList.length - 1].content += chunkValue;
          $(".ai-content .content").animate({ scrollTop: 900000 }, 0);
          //      console.log(this.resMessage); // This will log chunks of the chatbot reply until the reply is finished.
        }
        if (done) {
          // clearTimeout(this.timer)
          // $(".ai-content .content").animate({ scrollTop: 0 }, 400);
          this.toSaveChatMsg();
        }
      } catch (e) {
        this.loading = false;
      }

标签:const,ai,前端,流式,content,done,animate,chartGPT,data
From: https://www.cnblogs.com/xingqitian/p/17387819.html

相关文章

  • 前端实现简单轮播图,js实现一个无缝轮播图
    吐槽公司首页有一个动态显示数据的板块,同事直接用定时器手动修改div里面的数据,后来要求要有一个动态轮播滚动效果。哎,没办法,加入这个项目后就是在优化改写别人的代码,以前没测试到的bug,现在测出来让我修复,以前没实现的功能让我去实现。一堆简单堆砌的代码,重复用到的地方就是再复......
  • 碎片化学习前端之HTML(webComponent)
    前言webComponent是HTML5推出的新特性,为组件化推广奠定基础。webComponent基本使用原生组件,性能较好,但存在兼容性问题。其核心技术有:Customelements,ShadowDOM,HTMLTemplates。CustomelementsJavaScriptAPI,用于定义customelements及其行为。<m-buttontype="p......
  • Vue 前端开发团队风格指南(史上最全)
    Vue官网的风格指南按照优先级(依次为必要、强烈推荐、推荐、谨慎使用)分类,本文根据项目实际情况整理了一份适用于团队开发的vue风格指南,供大家参考。一、命名规范常用的命名规范:camelCase(小驼峰式命名法——首字母小写)PascalCase(大驼峰式命名法——首字母大写)kebab-case(......
  • 双越: 1-1评审了20份前端简历,其实每个人都有亮点
    本文首发自「慕课网」,想了解更多IT干货内容,程序员圈内热闻,欢迎关注"慕课网"及“慕课网公众号”!作者:双越|慕课网名师,前端技术专家人与人之间最遥远的距离,就是信息不对称。即便你我面对面,你知道的我不知道,我知道你也不知道。我们既要规避这一点,也要利用这一点。我的1-1沟通服务在......
  • 【前端】-近期面试题
    setupsetup中的代码与普通的 <script> 只在组件被首次引入的时候执行一次不同,<scriptsetup> 中的代码会在每次组件实例被创建的时候执行。所以,任何在 <scriptsetup> 声明的顶层的绑定(包括变量,函数声明,以及import导入的内容)都能在模板中直接使用。有方法通过impo......
  • 前端项目开发中如何统一代码风格?
    一、问题平时开发前端项目的时候,发现大家所用的编辑器都有所不同,编辑器中很多人喜欢制定自己的代码风格,这就导致协作的时候,大家的代码风格不统一。提交代码的时候会发现修改了大量的代码格式。二、解决方案使用eslint和Prettier来统一代码风格并提高代码质量三、解决步骤......
  • 深入理解前端字节二进制知识以及相关API
    当前,前端对二进制数据有许多的API可以使用,这丰富了前端对文件数据的处理能力,有了这些能力,就能够对图片等文件的数据进行各种处理。本文将着重介绍一些前端二进制数据处理相关的API知识,如Blob、File、FileReader、ArrayBuffer、TypeArray、DataView等等。字节在介绍各种API之前,......
  • 前端SEO优化技术汇总
    一、title、alt、h1itle:网站头部标签<head>下的title,网站名称备注:这里为什么不说标签中的title属性,,虽然鼠标上移可以显示图片名字,但是它跟SEO没一丝联系所以我们不关注它。例如:<imgtitle="图片名称"/> alt:当网络速度很慢,或者图片地址失效的时候,它可以在图片展示的位......
  • 记录--前端实现点击选词功能
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助今天有一个需求,点击选中某个英文单词,然后对这个单词做一些处理,例如高亮背景、查看一些详细信息等等,今天简单实现了一下,效果如下:(支持移动端,chrome和sarafi浏览器均能正常使用。语言......
  • web前端动画网址
    很实用的web前端动画网址1.https://lhammer.cn/You-need-to-know-css/#/zh-cn/2.https://chokcoco.github.io/CSS-Inspiration/#/3.https://qishaoxuan.github.io/css_tricks/4.https://tobiasahlin.com/spinkit/5.https://animista.net/​————————————————原文......