聊聊微信小程序的流式(stream)响应请求

983 阅读2分钟

场景:类似ChatGPT的逐字显示效果。

流程:服务端我用Python的flask框架(向外提供API接口)实现,服务部署在replit上,Python调用azure 的chatgpt服务(需要申请),并以流式的形式返回,小程序再调用这个流式接口实现。

我会提供最小能运行的完整代码示例。

我本地的Python版本:3.10.11、Flask版本:2.3.2、openai版本:0.27.8。

python部分:

/main.py:

from data.chat_completion import ChatCompletion

@app.route("/chat", methods=['POST'])

@log_streaming_request

def love_chat():

  message_list = request.json.get('message_list', [])

  message = []

  message.extend(message_list)

  try:

    response = ChatCompletion().create(message, True)

    def generate():

    for chunk in response:

      if not chunk['id']:

      	continue

      if 'delta' in chunk["choices"][0] and 'content' in chunk['choices'][0]['delta']:

      	yield chunk['choices'][0]['delta']['content']

      return generate()

  except Exception as e:

    print("chat Exception:{}".format(str(e)))

    return Response("异常了,请重试", status=500)


if __name__ == "__main__":

app.run(debug=True, port=5000, host="0.0.0.0")

/chat/chat_completion.py:

import openai

import setting

openai.api_key = setting.API_KEY

openai.api_base = setting.API_BASE

openai.api_type = setting.API_TYPE

openai.api_version = "2023-05-15" # 版本对应 2023-05-15、

class ChatCompletion:

  temperature_default = 0.6 # 默认值

  deployment_name = "gpt-35-turbo16k" # 可选 gpt-35(4kb)、gpt-35-turbo16k(16kb,更大的上下文)

  def create(self, message, stream=False, temperature_default=None):

    """

    创建一个流式的响应

    :param message:

    :param stream: 是否以流式的形式响应

    :param temperature_default:

    :return:

    """

    if not temperature_default:

    	temperature_default = self.temperature_default

    return openai.ChatCompletion.create(

      engine=self.deployment_name,

      messages=message,

      # max_tokens=10,

      temperature=temperature_default,

      stream=stream,

    )

/setting.py:

API_KEY = "xxxxxxxxxxxxxxxxxxxx"

API_BASE = "https://xxxxx.openai.azure.com/"

API_TYPE = "azure"

到此Python部分结束了。

下面是小程序部分,核心部分,可兼容同步请求:

chat.js:

/**

* 支持流式获取响应内容

* @param {message_list} 消息列表

* @param {success_cb} 请求成功的回调

* @param {err_cb} 请求失败的回调

*/

export const love_chat_stream = (data, config, success_cb = () => {}, err_cb = () => {}) => {

  if (!config.hasOwnProperty('ai_report_chunk')) {

  	config.ai_report_chunk = false // 如果没有传入,则默认不支持流式

  }

  return wx.request({

    url: "填入自己服务器的地址" + '/chat',

    responseType: config.ai_report_chunk ? "arraybuffer" : "text/html",

    method: 'POST',

    enableChunked: config.ai_report_chunk,

    header: {

    	'content-type': 'application/json'

    },

    enableQuic: true,

    enableCache: true,

    data: data,

    timeout: get_request_config().openai_request_time_out,

    success: (res) => {

      if (res.statusCode != 200) {

      	err_cb(config, res.errMsg)

      } else {

      if (!config.ai_report_chunk) {

      	// 非流式

     	 res = res.data

    }

    success_cb(config, res)

    }

    },

    fail: (err) => {

    	err_cb(config, err)

    },

    complete: () => {}

  });

}

效果如下:

这篇文章就到这里啦!如果你对文章内容有疑问或想要深入讨论,欢迎在评论区留言,我会尽力回答。同时,如果你觉得这篇文章对你有帮助,不妨点个赞并分享给其他同学,让更多人受益。

想要了解更多相关知识,可以查看我以往的文章,其中有许多精彩内容。记得关注我,获取及时更新,我们可以一起学习、讨论技术,共同进步。

感谢你的阅读与支持,期待在未来的文章中与你再次相遇!