后端flask,前端vue,实现post请求chatgpt流式响应
后端代码
from flask import Flask, Response, request from flask_cors import CORS import requests import openai app = Flask(__name__) # 跨域配置 CORS(app, supports_credentials=True) @app.route('/stream', methods=['POST']) def stream(): # data = request.get_json() # name = data.get('name', 'World') # def generate(): # for i in range(2000): # yield f'Hello {name}!\n' # return Response(generate(), mimetype='text/plain') data = request.get_json() content = data.get('name', 'World') if data: def stream(content): # 设置代理服务器的地址和端口 proxy = { 'http': '127.0.0.1:7890', 'https': '127.0.0.1:7890', } # 创建一个 session 对象,将代理和身份验证信息添加到其中 session = requests.Session() session.proxies = proxy openai.api_key = "你的密钥" completion = openai.ChatCompletion.create( model="gpt-3.5-turbo", # messages=data["message"], messages=[ {"role": "system", "content": "You are a helpful assistant."}, {"role": "user", "content": content} ], stream=True ) for chunk in completion: content = chunk.choices[0].delta.get("content", "") # if chunk.choices[0].finish_reason == "stop": # content = "[DONE]" # yield f"data: {content}\n\n" yield content return Response(stream(content), mimetype='text/plain') return "没有内容" if __name__ == '__main__': app.run(debug=True)
前端代码
vue2写法
(图片来源网络,侵删)
Send POST request Stop Generating Restart Generating{{ response }}export default { data() { return { name: '', response: '', controller: new AbortController(), isStopped: false } }, methods: { async sendPost() { this.controller = new AbortController() this.response = '' this.isStopped = false const response = await fetch('http://127.0.0.1:5000/stream', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: this.name }), signal: this.controller.signal }) const reader = response.body.getReader() while (true) { if (this.isStopped) break const { done, value } = await reader.read() if (done) break this.response += new TextDecoder().decode(value) } }, stopGenerating() { this.controller.abort() this.isStopped = true }, restartGenerating() { this.controller = new AbortController() this.sendPost() } } }
vue3 setup写法
Send POST request Stop Generating Restart Generating{{ response }}import { ref } from 'vue' export default { setup() { const name = ref('') const response = ref('') const controller = ref(new AbortController()) const isStopped = ref(false) async function sendPost() { controller.value = new AbortController() response.value = '' isStopped.value = false const res = await fetch('http://127.0.0.1:5000/stream', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: name.value }), signal: controller.value.signal }) const reader = res.body.getReader() while (true) { if (isStopped.value) break const { done, value } = await reader.read() if (done) break response.value += new TextDecoder().decode(value) } } function stopGenerating() { controller.value.abort() isStopped.value = true } function restartGenerating() { controller.value = new AbortController() sendPost() } return { name, response, sendPost, stopGenerating, restartGenerating } } }
(图片来源网络,侵删)
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...