GPT3.5的chat补全接口,有一个参数叫stream,如果是true就会以EventStream流式传输的形式把数据逐字返回
前端展示上就可以实现一个打字机的效果,针对网络不好的情况,这种逐渐输出也是比一次性全部输出要好的多
之前,花费好长时间,没搞明白怎么去把stream流的数据拿出来,在微博咨询了easy同学后,使用他的库,终于能拿到流式数据了
库的地址是:
https://github.com/easychen/api2d-js
在vue下使用,可以npm install api2d,然后就可以直接去用了
import Api2d from 'api2d'; const api = new Api2d(key, apiBaseUrl); // Chat completion const ret = await api.completion({ model:'gpt-3.5-turbo', messages: [ { "role":"user", "content":"Hello" } ], stream: true, // Supports streaming, note that when stream is true, the return value is undefined onMessage: (string)=> { console.log( "SSE returned, the complete string received is:", string ); }, onEnd: (string)=> { console.log( "end", string ); } }); // Embeddings const ret = await api.embeddings({ input: "hello world" }); console.log( ret ); api.setKey( 'newkey' ); // set key api.setApiBaseUrl( 'https://...your openai proxy address' );
我的实现代码部分:
const timeout = 1000*20; // 60秒超时 const api = new Api2d(this.secret, "https://api.openai.com", timeout); // chat 补全 let i=0; const ret = api.completion({ model:'gpt-3.5-turbo', messages: _this.message, stream: true, // 支持 stream,注意stream为 true 的时候,返回值为undefined onMessage: (string)=> { console.log( "SSE返回:", string ); if(i==0){ let showMessage={ isme:false, avator:"https://goflychat.oss-cn-hangzhou.aliyuncs.com/static/upload/avator/2022June/32a988a3c2f8700119fa1f5da1b6a4bd.png", content:"", time:tools.shortTime(tools.getNowDate()) } _this.msgList.push(showMessage); }else{ _this.msgList[_this.msgList.length-1].content=string; _this.scrollBottom(); } i++; }, onEnd: (string)=> { console.log( "end", string ); _this.sendDisable=false; _this.originMessage="" string=tools.trim(string,"\n"); _this.message.push({ "role": "assistant", "content": string }); _this.alertSound(); _this.scrollBottom(); } }); ret.catch(function(error) { console.log(error); _this.$message({ message:error, type: 'error' }); _this.sendDisable=false; });