Setting Up Readable Streams with OpenAI API

Tosh가 React 프론트 엔드와 Node.js 서버를 사용하여 OpenAI의 채팅 완성 기능으로 가독성 있는 스트림을 설정하는 것을 시연합니다.

### React와 Node.js에서 OpenAI 채팅 완성을 사용하여 읽을 수 있는 스트림 설정하기
* 👋 Tosh는 **React.js 프런트 엔드와 Node.js 서버**로 OpenAI 채팅 완료 엔드포인트를 사용하여 읽을 수 있는 스트림을 설정하는 데모를 소개합니다.
* 🖥 그는 데모에서 Next.js 앱을 활용하여 **설정에 필요한 두 가지 필수 파일**을 강조하고 마지막에 모든 코드를 연결할 것이라고 설명합니다.
* 🔄 이 데모에서는 제출 버튼을 클릭하면 **한 단어씩 응답이 스트리밍되는 간단한 앱**을 보여줌으로써 완전한 응답을 기다리는 것보다 사용자 경험을 향상시킵니다.
* 🛠 서버 측에서 Tosh는 **OpenAI 라이브러리 가져오기, API 키 추가, 스트리밍을 사용하도록 설정**하면서 **GPT-3.5 Turbo로 채팅 완료**를 구성하는 등 Node.js 엔드포인트 설정에 대해 자세히 설명합니다.
* 📦 그는 청크로 응답을 처리하고 버퍼를 문자열로 변환하며 페이로드 데이터를 추출하는 방법을 설명하면서 **스트리밍이 완료되면 서버가 '완료' 신호**를 보낸다고 언급합니다.
* 🔍 Tosh는 응답에서 텍스트를 파싱하여 클라이언트로 전송하는 방법을 설명하며 **프로세스의 단순성**을 강조합니다.
* 📲 클라이언트 측으로 이동하여, 버튼 클릭으로 서버 엔드포인트에 대한 **fetch API 호출**을 트리거하고 **텍스트 디코더 스트림**을 통해 응답을 읽는 page.jsx의 React 코드를 살펴봅니다.
* 🔗 토시는 시청자가 **이 두 파일만 있으면 스트리밍을 효과적으로 설정**할 수 있다고 말하며, 추가 참조를 위해 전체 코드 링크를 포함시켜 마무리합니다.

Streaming OpenAI Chat Completions Using React and Node JS

Tosh Velaga

OpenAI를 사용한 판독 가능한 스트림 소개 및 개요

Tosh가 React.js 프런트 엔드와 Node.js 서버로 OpenAI 채팅 완료 엔드포인트를 사용하여 읽을 수 있는 스트림을 설정하는 방법을 시연합니다.

Next.js 앱을 사용하며 나중에 제공되는 코드 링크와 함께 필요한 두 가지 파일을 설명합니다.

더 나은 UX를 위해 간단한 앱 응답을 단어 단위로 스트리밍하는 데모를 보여줍니다.

서버 측(Node.js)과 클라이언트 측의 두 부분에 대해 설명합니다.

OpenAI Node.js 라이브러리를 가져오고, API 키를 추가하고, GPT-3.5 Turbo를 사용하여 채팅 완료를 설정합니다.

stream`을 `true`로 설정하고 `response_type`을 `stream`으로 설정합니다. 청크 단위로 응답을 처리합니다.

청크를 버퍼(16진수 표현)로 설명하고, 문자열로 변환하고, 줄 바꿈으로 분할합니다.

페이로드를 반복하여 "완료"가 포함된 경우 완료 응답을 클라이언트에 보내고, 그렇지 않은 경우 추가 처리를 진행합니다.

데이터.choices.delta.content`에서 텍스트를 추출하여 클라이언트로 보냅니다.

클릭을 처리하는 버튼이 있는 간단한 React 코드.

fetch API를 사용하여 서버 엔드포인트에 POST 요청을 합니다.

응답을 읽고 텍스트 디코더 스트림을 통해 파이프하여 처리한 후 표시된 텍스트를 업데이트합니다.

프로세스를 요약하면 두 개의 파일(서버와 React 프론트엔드)이 필요합니다.

설명에 코드 링크를 약속합니다.