后端代码
from flask import Flask, Response, requestfrom flask_cors import CORSimport requestsimport openaiapp = 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写法
<template> <div> <input v-model="name" placeholder="Enter your name"> <button @click="sendPost">Send POST request</button> <button @click="stopGenerating">Stop Generating</button> <button @click="restartGenerating">Restart Generating</button> <pre>{{ response }}</pre> </div></template><script>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() } }}</script>vue3 setup写法
<template> <div> <input v-model="name" placeholder="Enter your name"> <button @click="sendPost">Send POST request</button> <button @click="stopGenerating">Stop Generating</button> <button @click="restartGenerating">Restart Generating</button> <pre>{{ response }}</pre> </div></template><script>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 } }}</script>
