场景:类似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: () => {}
});
}
效果如下:
这篇文章就到这里啦!如果你对文章内容有疑问或想要深入讨论,欢迎在评论区留言,我会尽力回答。同时,如果你觉得这篇文章对你有帮助,不妨点个赞并分享给其他同学,让更多人受益。
想要了解更多相关知识,可以查看我以往的文章,其中有许多精彩内容。记得关注我,获取及时更新,我们可以一起学习、讨论技术,共同进步。
感谢你的阅读与支持,期待在未来的文章中与你再次相遇!