有没有办法直接在React Native(使用JavaScript)中对API逐字响应进行流式传输

yk9xbfzb 于 2023-04-04 发布在 Java

关注(0)|答案(2)|浏览(193)

bounty将在2天后过期。回答此问题可获得+50的声誉奖励。Ibad Ur Rehman正在寻找来自声誉良好来源的答案：我需要尽快解决

我想使用聊天GPT涡轮API直接在React Native（博览会）与逐字逐句流这里是工作的例子没有流

fetch(`https://api.openai.com/v1/chat/completions`, {
  body: JSON.stringify({
    model: 'gpt-3.5-turbo',
    messages: [{ role: 'user', content: 'hello' }],
    temperature: 0.3,
    max_tokens: 2000,
  }),
  method: 'POST',
  headers: {
    'content-type': 'application/json',
    Authorization: 'Bearer ' + API_KEY,
  },
}).then((response) => {
  console.log(response); //If you want to check the full response
  if (response.ok) {
    response.json().then((json) => {
      console.log(json); //If you want to check the response as JSON
      console.log(json.choices[0].message.content); //HERE'S THE CHATBOT'S RESPONSE
    });
  }
});

我可以改变什么来流数据逐字逐句

JavaScript

来源：https://stackoverflow.com/questions/75826303/is-there-any-way-to-stream-response-word-by-word-of-chatgpt-api-directly-in-reac

2条答案

按热度按时间

eaf3rand1#

OpenAI API依赖SSE（服务器端事件）将响应流回给您。如果您在API请求中传递stream参数，则当OpenAI计算时，您将收到数据块。这会产生模拟某人键入的实时响应的错觉。
最难弄清楚的部分可能是如何连接你的前端和后端。每次后端收到一个新的块，你都想在前端显示它。
我在Replit上创建了一个简单的NextJs项目来演示。
你需要安装better-sse package
npm install better-sse

服务端API路由文件中

import {createSession} from "better-sse";

const session = await createSession(req, res);
      if (!session.isConnected) throw new Error('Not connected');

const { data } = await openai.createCompletion({
  model: 'text-davinci-003',
  n: 1,
  max_tokens: 2048,
  temperature: 0.3,
  stream: true,
  prompt: `CHANGE TO YOUR OWN PROMPTS`
}, {
  timeout: 1000 * 60 * 2,
  responseType: 'stream'
});

//what to do when receiving data from the API
data.on('data', text => {
  const lines = text.toString().split('\n').filter(line => line.trim() !== '');
  for (const line of lines) {
    const message = line.replace(/^data: /, '');
    if (message === '[DONE]') { //OpenAI sends [DONE] to say it's over
      session.push('DONE', 'error');
      return;
    }
    try {
      const { choices } = JSON.parse(message);
      session.push({text:choices[0].text});
    } catch (err) {
      console.log(err);
    }
  }
});

//connection is close
data.on('close', () => { 
  console.log("close")
});

data.on('error', (err) => {
  console.erorr(err);
});

在前端，您现在可以调用此API路由

let [result, setResult] = useState("");

//create the sse connection
const sse = new EventSource(`/api/completion?prompt=${inputPrompt}`);

//listen to incoming messages
sse.addEventListener("message", ({ data }) => {
  let msgObj = JSON.parse(data)
  setResult((r) => r + msgObj.text)
});

希望这是有意义的，并帮助其他人与类似的问题。

赞(0）回复(0）举报 2023-04-04

4c8rllxm2#

访问此GitHub存储库：https://github.com/jonrhall/openai-streaming-hooks。我建议探索这个库，因为它提供了只在客户端运行的React钩子，不需要服务器支持。

赞(0）回复(0）举报 2023-04-04