微信小程序实现大模型流式输出：技术解析与实践

开心就多写，一点就开心

于 2024-07-31 10:29:01 发布

阅读量605

点赞数 5

分类专栏：大模型文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_62428445/article/details/140816141

版权

大模型专栏收录该内容

2 篇文章 0 订阅

订阅专栏

之前用sse搞了web的流式输出，现在微信小程序又不支持，头痛了重新搞

在微信小程序开发中，实现大模型的流式输出是一个挑战，因为小程序本身并不支持流式请求。然而，随着技术的发展，开发者们已经找到了一些创新的方法来解决这个问题。本文将探讨如何在微信小程序中实现大模型的流式输出。

微信小程序与流式请求

微信小程序由于其架构限制，不支持传统的流式请求（stream）。这给实现需要实时数据交互的应用，比如聊天机器人，带来了一定的困难。然而，开发者们通过使用WebSocket协议或者嵌套网页等方法来实现类似的功能。

实现流式输出的技术方案

1. 设置请求头

首先，需要在服务器端设置特定的请求头，以适应微信小程序的请求方式。这包括设置Transfer-Encoding: chunked，以及其他必要的CORS（跨源资源共享）相关的头信息。

header('Access-Control-Allow-Credentials: true');
header('Transfer-Encoding: chunked');
header('Cache-Control: no-cache');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');
header('Connection: keep-alive');
header('X-Accel-Buffering: no');

或者你也可以直接在request中写： enableChunked: true

2. 设置回复兼容

服务器端需要能够区分是微信小程序请求还是网页请求，并根据请求来源返回不同格式的数据。对于小程序，可以在响应中使用特定的格式，并在数据传输结束后发送特定的结束标记。

if ($is_wxapp) {
    echo "success: " . json_encode(['content' => $content]) . "\r\n";
}
// ...
if ($is_wxapp) {
    echo "0\r\n\r\n";
    ob_flush();
    flush();
}

3. 前端请求代码

在小程序端，需要编写相应的请求逻辑，处理服务器的分块传输数据，并将其转换为可读的格式。这通常涉及到对ArrayBuffer到Base64，再到UTF-8字符串的转换。

async onChatApplet() {
    // ...省略部分代码...
    requestTask.onChunkReceived(function(response) {
        const arrayBuffer = response.data;
        const uint8Array = new Uint8Array(arrayBuffer);
        let text = uni.arrayBufferToBase64(uint8Array);
        text = new Buffer(text, 'base64').toString('utf8');
        // 处理文本数据...
    });
}