微信小程序怎么实现类似ChatGPT的流式传输 |
您所在的位置:网站首页 › 微信小程序开发pan › 微信小程序怎么实现类似ChatGPT的流式传输 |
微信小程序怎么实现类似ChatGPT的流式传输
发布时间:2023-03-27 09:33:39
来源:亿速云
阅读:69
作者:iii
栏目:开发技术
这篇文章主要介绍“微信小程序怎么实现类似ChatGPT的流式传输”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序怎么实现类似ChatGPT的流式传输”文章能帮助大家解决问题。 小程序上实现流失传输模拟ChatGPT的效果,实现流式传输,通过处理流数据,实现打字机的效果。 在解决问题之前,我们需要了解什么是流式传输。流式传输指的是将数据分成多个数据流,通过网络传输,以减少网络延迟和提高性能。在某些情况下,流式传输也可以用于将视频流和音频流传输到客户端。流式传输是一种高效的数据传输方式,常用于大文件下载和在线视频播放等场景。 为什么小程序不支持流式传输?尽管流式传输在某些情况下非常有用,但小程序目前不支持流式传输。主要原因是小程序的架构和限制。 小程序的开发框架提供了一个小程序的开发和调试环境。在这个环境中,小程序的代码和资源都是打包在一个文件中的。这意味着小程序依赖此框架的环境,无法调用浏览器标准的API,需要框架的整体升级和支持。 此外,小程序对网络请求的限制也是一个因素。小程序中的网络请求必须使用微信提供的API,这些API通常只支持完整的请求和响应。这就使得小程序无法使用流式传输。 我的解决方案使用WebSocket协议 , WebSocket是一种网络协议,它提供了双向通信的功能,并且支持流式传输。在小程序中,我们可以使用WebSocket协议来实现流式传输的功能。 调整数据格式 , 如果您的应用程序需要传输大量数据,可以将数据分成更小的块,以便小程序可以处理它们。这样可以避免一次性传输过多数据而导致的问题。 使用分段下载 , 分段下载是一种在下载大文件时很常用的技术。在小程序中,我们也可以使用这种技术来避免一次性下载大量数据。我们可以将数据分成多个部分,每次下载一个部分,并在所有部分下载完毕后将它们合并起来。 但这些都是常规方案,实现也比较麻烦,把正常的请求复杂化了。抛弃~ 常规方案Axios基础html模式就不列举了,axios更便捷,我很自信这个方案可行性。 重点: headers 设置为流失请求 responseType:stream request({ url: '/api/prompt', //请求头需要改为stream模式 headers: { Accept: 'text/event-stream', }, //响应类型设置stream responseType: 'stream', method: 'POST', data: { prompt: prompt, }, }).then(res => { console.log(res) }).catch(err => { console.log(err) })他们又问我要打字机效果,我的方案:接收到ArrayBuffer以后解码数据。 .then((res) => { const arrayBuffer = res.data; const uint8Array = new Uint8Array(arrayBuffer); const textDecoder = new TextDecoder('utf-8'); const text = textDecoder.decode(uint8Array); for (let i = 0; i { resultText += text[i]; console.log(resultText); }, i * 100); } })ok,浏览器没问题,小程序调试工具没问题,我依旧自信我的方案 但是,小程序报错了,无法打印流数据,无法支持TextDecoder方法。完犊子,顾问成瞎指挥了。 另辟蹊径:onChunkReceived方案微信官方文档中提到, wx.request中支持onChunkReceived分段式传输 重点: 小程序 wx.request 中开启 enableChunked; text或stream 当然,OpenAI接口,也要开启 stream; 解码分段内容为string,使用其他方案代替TextDecoder const requestTask = wx.request({ url: '/api/prompt', //请求头需要改为stream模式 header: { "Transfer-Encoding": 'chunked' }, timeout: 15000, responseType: 'text', method: 'POST', enableChunked: true, data: { prompt: prompt, }, }).then(res => { console.log(res) }).catch(err => { console.log(err) })这样,我们就发起了流式传输请求,当然后端也要支持的,后面我会举例子。 当他们执行时,又出问题了,搞不定TextDecoder替代方案。我查了一下,好像有个方案,小不自信了。 使用"TextDecoder"替代库,然后给出建议: import {TextEncoder, TextDecoder} from "fastestsmallesttextencoderdecoder"; const encode = (new TextEncoder).encode; const decode = (new TextDecoder).decode;等了一天没找我,哼哼,小菜一碟,完工。 这边又来了,大佬你的方法不好使,引入执行又又报错了。 稳住别慌... 试试手写ArrayBuffer转string方案:text-encoding 然后亲自测试,搞不定就把chatgpt-plus关掉。 最终版: let buffer='' requestTask.onChunkReceived(function (response) { const arrayBuffer = response.data; const uint8Array = new Uint8Array(arrayBuffer); let text = String.fromCharCode.apply(null, uint8Array); buffer += text; full_command.value = buffer })其实,第二个方案是可行的,只是我也没时间具体看报了什么错误。最终使用了fromCharCode的方法,恰好可以处理,当然还一些过滤和解码,根据业务需要写了。 后端接口配置后端配置教程比较多,主要是添加请求头,支持分段传输的方式。 public static function prompt($message) { $openAi = self::getOpenAI(); header('Access-Control-Allow-Credentials: true'); // 设置响应头信息 header('Transfer-Encoding: chunked'); header('Content-Type: text/plain'); header('Cache-Control: no-cache'); header('Access-Control-Allow-Methods: GET, POST, OPTIONS'); header('Access-Control-Allow-Headers: Content-Type'); header('Connection: keep-alive'); $msg = ""; $openAi->prompt([ 'messages' => $message, 'model' => 'gpt-3.5-turbo', "stream" => true, ], function ($curl_info, $response) { //闭包函数处理流 $data = []; $lines = explode("\n", $response); foreach ($lines as $line) { if (!str_contains($line, ':')) { continue; } [$name, $value] = explode(':', $line, 2); if ($name == 'data') { $data[] = trim($value); } } foreach ($data as $message) { if ('[DONE]' === $message) { echo "0\r\n\r\n"; } else { $message = json_decode($message, true); $input = $message['choices'][0]['delta']['content'] ?? ''; $msg .= $input; echo dechex(strlen($msg)) . "\r\n" . $msg . "\r\n"; } } ob_flush(); flush(); return strlen($response); }); }关于“微信小程序怎么实现类似ChatGPT的流式传输”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。 推荐阅读: 微信小程序如何自定义tabbar组件 微信小程序全局状态是什么免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。 微信小程序 chatgpt 上一篇新闻:linux abrtd服务指的是什么 下一篇新闻:vue this.$refs.xxx获取dom的注意事项是什么 猜你喜欢 Python如何实现生成bmp图像功能 Python如何实现随机生成迷宫并自动寻路 Javascript结合Vue怎样实现对任意迷宫图片的自动寻路功能 Go容器遍历的示例分析 python基础入门之列表的示例分析 python中虚拟环境如何创建 python如何配置mssql连接的方法 python环境安装及编辑器配置的示例分析 Spring Aop执行顺序的示例分析 Python中怎么实现自动化刷抖音 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |