后端flask，前端vue，实现post请求chatgpt流式响应-Toy模板网

这篇具有很好参考价值的文章主要介绍了后端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写法

<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写法文章来源地址https://www.toymoban.com/news/detail-811733.html

<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>

到了这里，关于后端flask，前端vue，实现post请求chatgpt流式响应的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！