devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

小程序实现ChatGPT类流式输出_微信小程序实现gpt

作者：盐析白兔 | 2024-04-11 11:24:11

赞

踩

微信小程序实现gpt

chatgpt的流行，引起了大量人员的涌入，许多公司或个人也开始加入gpt的开发和应用中，公司也

来蹭一下热度，于是部门开始着手gpt的开发，在不断探索和尝试中一点点进展。
其中对于网上流传的gpt流式输出的效果很是人性化，gpt官网支持流式响应也是为了更好的用户体验，如果采用非流式响应，一次性返回结果，这将会是一个漫长的等待，用户体验度极差。
常用的浏览器普遍支持eventsource实现流式输出，然而在我们开发小程序的时候发现小程序不支持eventsource对象。
最开始想到的是采用websocket实现，但如果采用socket会导致现在项目中使用的框架中的许多中间件无法使用，一些过滤、鉴权、认证都需要考虑重写，代价是比较大的。
也想到过使用直接使用ob_flush()、flush()，测试的时候浏览器（需设置header('Content-Type: text/html', true);）可以但是小程序依然行不通。
网上查询浏览相关资料，通过chunk分块传输实现类流式输出效果，通过多次调试最终实现流程如下：
小程序wxml:

<button bindtap="bindChunkTest">ChunkDemoTest</button>

小程序js：
index.js文件:

  1. const {Base64} = require('../../utils/baseutf.js')
  2.  
  3. bindChunkTest() {
  4.     let prompt = 'hello';
  5.     const requestTask  = wx.request({
  6.         url: 'http://localtest.com/test.php',
  7.         timeout: 30000,
  8.         responseType: 'text',
  9.         method: 'GET',
  10.         enableChunked: true,
  11.         data: {
  12.             prompt: prompt,
  13.         },
  14.         success(res){
  15.             // console.log(res)
  16.         }
  17.     });
  18.     requestTask.onChunkReceived(function(response){
  19.         const arrayBuffer = response.data;
  20.         const uint8Array = new Uint8Array(arrayBuffer);
  21.         let text = wx.arrayBufferToBase64(uint8Array);
  22.         // var text = String.fromCharCode.apply(null, uint8Array);
  23.         // text = text.toString('utf8');
  24.         text = Base64.decode(text);
  25.         console.log(text);
  26.     })
  27. },

baseutf.js文件（来自一篇文章【https://developers.weixin.qq.com/community/develop/doc/000ee246af8cd8747bce589555c000】里的大佬【又见幽兰空谷开】的回复）：

  1. /**
  2. * UTF16和UTF8转换对照表
  3. * U+00000000 – U+0000007F     0xxxxxxx
  4. * U+00000080 – U+000007FF     110xxxxx 10xxxxxx
  5. * U+00000800 – U+0000FFFF     1110xxxx 10xxxxxx 10xxxxxx
  6. * U+00010000 – U+001FFFFF     11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
  7. * U+00200000 – U+03FFFFFF     111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
  8. * U+04000000 – U+7FFFFFFF     1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
  9. */
  10. //外部js引用时这样写：import {Base64} from '/xxx/base64';//路径需要根据实际路径去写
  11. const Base64 = {
  12.     // 转码表
  13.     tables : [
  14.             'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
  15.             'I', 'J', 'K', 'L', 'M', 'N', 'O' ,'P',
  16.             'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
  17.             'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',
  18.             'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
  19.             'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
  20.             'w', 'x', 'y', 'z', '0', '1', '2', '3',
  21.             '4', '5', '6', '7', '8', '9', '+', '/'
  22.     ],
  23.     UTF16ToUTF8 : function (str) {
  24.         let results = [], len = str.length;
  25.         for (let i = 0; i < len; i++) {
  26.             let code = str.charCodeAt(i);
  27.             if (code > 0x0000 && code <= 0x007F) {
  28.                 /* 一字节，不考虑0x0000，因为是空字节
  29.                    U+00000000 – U+0000007F     0xxxxxxx
  30.                 */
  31.                 results.push(str.charAt(i));
  32.             } else if (code >= 0x0080 && code <= 0x07FF) {
  33.                 /* 二字节
  34.                    U+00000080 – U+000007FF     110xxxxx 10xxxxxx
  35.                    110xxxxx
  36.                 */
  37.                 let byte1 = 0xC0 | ((code >> 6) & 0x1F);
  38.                 // 10xxxxxx
  39.                 let byte2 = 0x80 | (code & 0x3F);
  40.                 results.push(
  41.                     String.fromCharCode(byte1), 
  42.                     String.fromCharCode(byte2)
  43.                 );
  44.             } else if (code >= 0x0800 && code <= 0xFFFF) {
  45.                 /* 三字节
  46.                    U+00000800 – U+0000FFFF     1110xxxx 10xxxxxx 10xxxxxx
  47.                    1110xxxx
  48.                 */
  49.                 let byte1 = 0xE0 | ((code >> 12) & 0x0F);
  50.                 // 10xxxxxx
  51.                 let byte2 = 0x80 | ((code >> 6) & 0x3F);
  52.                 // 10xxxxxx
  53.                 let byte3 = 0x80 | (code & 0x3F);
  54.                 results.push(
  55.                     String.fromCharCode(byte1), 
  56.                     String.fromCharCode(byte2), 
  57.                     String.fromCharCode(byte3)
  58.                 );
  59.             } else if (code >= 0x00010000 && code <= 0x001FFFFF) {
  60.                 // 四字节
  61.                 // U+00010000 – U+001FFFFF     11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
  62.             } else if (code >= 0x00200000 && code <= 0x03FFFFFF) {
  63.                 // 五字节
  64.                 // U+00200000 – U+03FFFFFF     111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
  65.             } else /** if (code >= 0x04000000 && code <= 0x7FFFFFFF)*/ {
  66.                 // 六字节
  67.                 // U+04000000 – U+7FFFFFFF     1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
  68.             }
  69.         }
  70.  
  71.         return results.join('');
  72.     },
  73.     UTF8ToUTF16 : function (str) {
  74.         let results = [], len = str.length;
  75.         let i = 0;
  76.         for (let i = 0; i < len; i++) {
  77.             let code = str.charCodeAt(i);
  78.             // 第一字节判断
  79.             if (((code >> 7) & 0xFF) == 0x0) {
  80.                 // 一字节
  81.                 // 0xxxxxxx
  82.                 results.push(str.charAt(i));
  83.             } else if (((code >> 5) & 0xFF) == 0x6) {
  84.                 // 二字节
  85.                 // 110xxxxx 10xxxxxx
  86.                 let code2 = str.charCodeAt(++i);
  87.                 let byte1 = (code & 0x1F) << 6;
  88.                 let byte2 = code2 & 0x3F;
  89.                 let utf16 = byte1 | byte2;
  90.                 results.push(Sting.fromCharCode(utf16));
  91.             } else if (((code >> 4) & 0xFF) == 0xE) {
  92.                 // 三字节
  93.                 // 1110xxxx 10xxxxxx 10xxxxxx
  94.                 let code2 = str.charCodeAt(++i);
  95.                 let code3 = str.charCodeAt(++i);
  96.                 let byte1 = (code << 4) | ((code2 >> 2) & 0x0F);
  97.                 let byte2 = ((code2 & 0x03) << 6) | (code3 & 0x3F);
  98.                 let utf16 = ((byte1 & 0x00FF) << 8) | byte2
  99.                 results.push(String.fromCharCode(utf16));
  100.             } else if (((code >> 3) & 0xFF) == 0x1E) {
  101.                 // 四字节
  102.                 // 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
  103.             } else if (((code >> 2) & 0xFF) == 0x3E) {
  104.                 // 五字节
  105.                 // 111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
  106.             } else /** if (((code >> 1) & 0xFF) == 0x7E)*/ {
  107.                 // 六字节
  108.                 // 1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
  109.             }
  110.         }
  111.  
  112.         return results.join('');
  113.     },
  114.     encode : function (str) {
  115.         if (!str) {
  116.             return '';
  117.         }
  118.         let utf8    = this.UTF16ToUTF8(str); // 转成UTF-8
  119.         let i = 0; // 遍历索引
  120.         let len = utf8.length;
  121.         let results = [];
  122.         while (i < len) {
  123.             let c1 = utf8.charCodeAt(i++) & 0xFF;
  124.             results.push(this.tables[c1 >> 2]);
  125.             // 补2个=
  126.             if (i == len) {
  127.                 results.push(this.tables[(c1 & 0x3) << 4]);
  128.                 results.push('==');
  129.                 break;
  130.             }
  131.             let c2 = utf8.charCodeAt(i++);
  132.             // 补1个=
  133.             if (i == len) {
  134.                 results.push(this.tables[((c1 & 0x3) << 4) | ((c2 >> 4) & 0x0F)]);
  135.                 results.push(this.tables[(c2 & 0x0F) << 2]);
  136.                 results.push('=');
  137.                 break;
  138.             }
  139.             let c3 = utf8.charCodeAt(i++);
  140.             results.push(this.tables[((c1 & 0x3) << 4) | ((c2 >> 4) & 0x0F)]);
  141.             results.push(this.tables[((c2 & 0x0F) << 2) | ((c3 & 0xC0) >> 6)]);
  142.             results.push(this.tables[c3 & 0x3F]);
  143.         }
  144.  
  145.         return results.join('');
  146.     },
  147.     decode : function (str) {
  148.         //判断是否为空
  149.         if (!str) {
  150.             return '';
  151.         }
  152.  
  153.         let len = str.length;
  154.         let i   = 0;
  155.         let results = [];
  156.         //循环解出字符数组
  157.         while (i < len) {
  158.             let    code1 = this.tables.indexOf(str.charAt(i++));
  159.             let code2 = this.tables.indexOf(str.charAt(i++));
  160.             let code3 = this.tables.indexOf(str.charAt(i++));
  161.             let code4 = this.tables.indexOf(str.charAt(i++));
  162.  
  163.             let c1 = (code1 << 2) | (code2 >> 4);
  164.             results.push(String.fromCharCode(c1));
  165.  
  166.             if (code3 != -1) {
  167.                 let c2 = ((code2 & 0xF) << 4) | (code3 >> 2);
  168.                 results.push(String.fromCharCode(c2));
  169.             }
  170.             if (code4 != -1) {
  171.                 let c3 = ((code3 & 0x3) << 6) | code4;
  172.                 results.push(String.fromCharCode(c3));
  173.             }
  174.  
  175.         }
  176.  
  177.         return this.UTF8ToUTF16(results.join(''));
  178.     }
  179. };
  180.  
  181. module.exports = {
  182.     Base64
  183. }

接下来就是后端代php代码：

  1. //header头可以尝试不加
  2. header('Access-Control-Allow-Credentials: true');
  3. header('Transfer-Encoding: chunked');
  4. header('Cache-Control: no-cache');
  5. header('Access-Control-Allow-Origin: *');
  6. header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
  7. header('Access-Control-Allow-Headers: Content-Type');
  8. header('Connection: keep-alive');
  9. header('X-Accel-Buffering: no');
  10.  
  11. $i = 1;
  12. while($i < 10){
  13.     $msg = '消息' . $i;
  14.     echo dechex(strlen($msg)) . "\r\n" . $msg . "\r\n";
  15.     ob_flush();
  16.     flush();
  17.     usleep(500000);
  18.     $i++;
  19. }
  20. echo "0\r\n\r\n";
  21. ob_flush();
  22. flush();

仅仅是代码还无法实现分块传输，还需要修改php和nginx配置保证缓冲区数据及时推送到客户端
php.ini文件，设置"output_buffering = off"，必须在php.ini中，ini_set不生效。

添加nginx配置（参考文献：https://blog.csdn.net/jinyif/article/details/52525274）：

  1. proxy_buffering off;
  2. gzip off;
  3. fastcgi_keep_conn on;

修改后重启相关服务后基本完事了，点击小程序的按钮开始测试吧。
不出意外的话就出现流式输出的效果了！

参考文献：在微信小程序中如何支持使用流模式（stream），打造ChatGPT实时回复机器人，最详细讲解。_微信小程序自动回复机器人_程序员在囧途的博客-CSDN博客

客户端数据转换：https://developers.weixin.qq.com/community/develop/doc/000ee246af8cd8747bce589555c000

小程序网络请求：

RequestTask | 微信开放文档

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号