openAI流输出的例子，用nextjs写的，各种模型都适用，axios实现流的输出

import { useState } from 'react'; import axios from 'axios'; export default function home(){ const [GeneratedBios, setGeneratedBios] = useState(null) const onClick=()=>{ axios({ url: "/api/openAI/createCompletionStream", method: "POST", data: { prompt: "hello world", }, headers: { "Content-Type": "application/json", }, // onUploadProgress:(p)=>{ // console.log("onUploadProgress",p) // }, onDownloadProgress: (progressEvent) => { console.log("onDownloadProgress", progressEvent) const dataChunk = progressEvent.currentTarget.response; const lines = dataChunk.toString().split('\n').filter(line => line.trim() !== ''); let text = ""; for (const line of lines) { const message = line.replace(/^data: /, ''); if (message === '[DONE]') { } else { const parsed = JSON.parse(message); // console.log("", typeof parsed.choices[0].text); text += parsed.choices[0].text // let GeneratedBios1 = (prev) => prev + parsed.choices[0].text setGeneratedBios(text); } } console.log("dataChunk", dataChunk); } }).then((data) => { console.log("data", data); }) } return( <> <button onClick={onClick}>createChatCompletion</button> <div id="result">{GeneratedBios}</div> </> ) }