React Native에서 chatgpt API의 응답을 단어별로 스트리밍하는 방법이 있을까요? (자바스크립트로)

리액트 네이티브(엑스포)에서 직접 Chat GPT Turbo API를 단어별로 스트림 처리하여 사용하고 싶습니다. 여기에는 스트림이 없는 작동 예제가 있습니다.

fetch('https://api.openai.com/v1/chat/completions', {
  body: JSON.stringify({
    model: 'gpt-3.5-turbo',
    messages: [{ role: 'user', content: '안녕하세요' }],
    temperature: 0.3,
    max_tokens: 2000,
  }),
  method: 'POST',
  headers: {
    'content-type': 'application/json',
    Authorization: 'Bearer ' + API_KEY,
  },
}).then((response) => {
  console.log(response); //전체 응답을 확인하려면
  if (response.ok) {
    response.json().then((json) => {
      console.log(json); //JSON 형식으로 응답을 확인하려면
      console.log(json.choices[0].message.content); //여기에 챗봇의 응답이 있습니다.
    });
  }
});

단어별로 데이터를 스트림 처리하려면 무엇을 변경할 수 있을까요?

답변 1

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: `자신만의 프롬프트로 변경하세요.`
}, {
  timeout: 1000 * 60 * 2,
  responseType: 'stream'
});
// 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가 [DONE]을 보내면 작업이 끝났음을 알림
      session.push('DONE', 'error');
      return;
    }
    try {
      const { choices } = JSON.parse(message);
      session.push({text:choices[0].text});
    } catch (err) {
      console.log(err);
    }
  }
});
// 연결이 종료됨
data.on('close', () => { 
  console.log(close)
  res.end();
});
data.on('error', (err) => {
  console.error(err);
});
let [result, setResult] = useState();
// 이 API 라우트를 프론트엔드에서 호출할 수 있습니다.
const sse = new EventSource(`/api/completion?prompt=${inputPrompt}`);
// 수신 메시지를 청취합니다.
sse.addEventListener(message, ({ data }) => {
  let msgObj = JSON.parse(data)
  setResult((r) => r + msgObj.text)
});

이해하기 쉬우며 비슷한 문제를 가진 다른 사람들에게 도움이 되기를 바랍니다.
답변 2
ChatGPT API can be utilized to stream response word by word in a React Native application using JavaScript. This feature allows for real-time conversation-like interactions with the model. In this essay, we will explore the process of achieving this in a React Native project, while also ensuring its Search Engine Optimization (SEO) friendliness.
To begin, let's focus on the technical implementation. When using the ChatGPT API, streaming response word by word requires leveraging the `Transformers` library and establishing a WebSocket connection to the API. The following steps outline how this can be accomplished:
1. Set up your React Native project:
   - Ensure that React Native is installed on your system.
   - Create a new React Native project using the CLI or an appropriate development environment.
2. Install the necessary dependencies:
   - Open a terminal and navigate to your project directory.
   - Install the `@transformers/runtime` library using a package manager, such as npm or yarn.
3. Establish a WebSocket connection:
   - Import the necessary dependencies in your React Native JavaScript file.
   - Create a new WebSocket connection using the ChatGPT API endpoint.
4. Handle the streaming response:
   - Listen for the `message` event on the WebSocket connection.
   - As each message arrives, process it word by word and update your React Native UI accordingly.
   - It is recommended to buffer received message chunks until a word boundary (e.g., space or punctuation) is detected to display complete words.
It's crucial to ensure that this implementation is SEO-conscious, meaning that search engines can effectively crawl and index your React Native application. To achieve this, consider the following SEO guidelines:
1. Utilize server-side rendering (SSR) or pre-rendering techniques to generate static HTML content whenever possible, ensuring that search engines can access and index the content effectively.
2. Ensure that all critical content is available in the server-rendered HTML. This includes conversation logs and important parts of the chat interface. By doing this, search engines can comprehend the content without being reliant solely on JavaScript execution.
3. Implement proper meta tags, such as `title`, `description`, and `keywords`, to provide search engines with relevant information about your React Native application.
4. Ensure that your application follows best practices for mobile optimization, such as responsive design, fast loading times, and mobile-friendly navigation.
By incorporating these SEO techniques, you can make your React Native application more search engine-friendly while still achieving the desired real-time word-by-word streaming of ChatGPT API responses.
In conclusion, streaming responses word by word from the ChatGPT API in a React Native application is achievable by leveraging the `@transformers/runtime` library and establishing a WebSocket connection. However, it is vital to consider SEO optimization during the development process to ensure that your application's content can be effectively crawled and indexed by search engines.