后端flask，前端vue，实现post请求chatgpt流式响应

阅读本书更多章节>>>>

后端代码

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>

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-23/161488.html，文章来源：网络cs，作者：往北，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！