小程序如何实现类似ChatGPT的流式传输

好久没来热闹了,埋头苦干混工资,结果到头没我事,要问我是哪一个,苦命打工终结者。

最近指导群里小兄弟技术问题,发现一个让我也棘手的难题。于是激发了我潜意识精神力-干到底。 由于最近沉浸在chatgpt中,很久不用google和百度搜索东西了,正如我所料一般,他们也没有这方面的解决方案。于是,记录一下探索研究的过程,给各位水友一个分享扩展。

小程序上实现流失传输

模拟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 < text.length; i++) {
    setTimeout(() => {
      resultText += text[i];
      console.log(resultText);
    }, i * 100);
  }
})

ok,浏览器没问题,小程序调试工具没问题,我依旧自信我的方案

小程序如何实现类似ChatGPT的流式传输

但是,小程序报错了,无法打印流数据,无法支持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);
        });
    }

至此,整个浏览已完成,相信有技术嗅觉的小伙伴一定会大有所用。目前,还没有看到太多小程序支持流的平替方案,至少md格式,代码高亮,打字效果处理成和官网一样的交互,还是比较棘手的。不过可以试试这个,我用着还挺好,起码交互上。后面还会发一个整合所有平替的分享,大家可以嫖到老。

关注我,私信我,加入我的技术交流群,一起嫖白技术界~

本文正在参加「金石计划」

原文链接:https://juejin.cn/post/7214839315854164026 作者:扫地盲僧

(2)
上一篇 2023年3月27日 上午11:15
下一篇 2023年3月27日 上午11:25

相关推荐

发表评论

登录后才能评论