Openai Realtime API : 예제가있는 안내서-일체 포함-php.cn

집

기술 주변기기

일체 포함

Openai Realtime API : 예제가있는 안내서

Jennifer Aniston

Mar 03, 2025 am 10:38 AM

새로 소개 된 OpenAi 실시간 API를 통해 빠른 속도의 저렴한 멀티 모달 경험을 응용 프로그램에 통합 할 수 있습니다. 이 API를 사용하면 사용자와 대형 언어 모델 (LLMS) 간의 원활한 음성 음성 상호 작용을 만들 수 있습니다. 이 API는 하나의 통합 API에서 완전한 솔루션을 제공하므로 음성 중심 경험을 달성하기 위해 여러 모델이 필요하지 않습니다. 그것은 대기 시간을 줄이는 것을 목표로 할뿐만 아니라 감정적 뉘앙스와 대화의 자연스러운 흐름을 유지합니다.

. 이 기사에서는 OpenAi 실시간 API를 사용하여 음성 제어 AI 조수를 구축하는 방법을 배웁니다. Node.js를 사용하여 지속적인 WebSocket 연결을 만들고 터미널 내에서 사용하여 API와 통신하는 방법을 생성합니다. 또한이 API의 기능을 사용하는 React 앱 배포를 안내합니다. WebSockets와 함께 실시간 API를 사용하는 OpenAI API의 다른 구성 요소와 달리 실시간 API는 WebSockets를 사용합니다. Websockets는 클라이언트와 서버 간의 양방향 통신 채널을 설정하는 통신 프로토콜입니다. HTTP에서 사용하는 기존의 요청-응답 모델과 달리 Websockets는 진행중인 실시간 상호 작용을 지원합니다. 이로 인해 WebSockets는 Voice Chat과 같은 실시간 응용 프로그램에 특히 적합합니다. 이 기사는 WebSockets의 작동 방식을 다루고 실시간 API와 상호 작용하는 몇 가지 예를 포함합니다.

우리는 node.js를 사용하므로 컴퓨터에 설치해야합니다. 그렇지 않은 경우 공식 웹 사이트에서 Node.js를 다운로드하여 설치할 수 있습니다. 스크립트 초기화

를 따라 가려면 위에서 만든 .env 파일로 폴더를 만드는 것이 좋습니다. 해당 폴더 내부에서 다음 명령을 실행하여 스크립트를 초기화합니다.

이 명령이 완료되면이 파일은 폴더 내부에 있어야합니다.

의존성 설치 두 개의 패키지를 설치하여 시작하십시오

WS : 이것은 API와 상호 작용하는 데 필요한 메인 패키지 인 WebSocket 패키지입니다. <: :> dotenv : .env 파일에서 API 키를로드하는 유틸리티 패키지.

명령을 실행하여 이들을 설치하십시오

실시간 api 에 연결 실시간 API와의 연결을 시작하려면 API URL을 전달하는 새 WebSocket 객체를 만듭니다.

연결이 열리면 조치를 설정합니다 위의 코드는 API에 대한 웹 소켓 연결을 생성하지만 아직 아무것도하지 않습니다. 웨이브 톱니를 사용하면 일부 이벤트가 발생할 때 실행할 작업을 설정할 수 있습니다. Open 이벤트를 사용하여 연결이 설정되면 실행하려는 일부 코드를 지정할 수 있습니다.이벤트 리스너를 추가하려는 일반 구문은 다음과 같습니다.

교체 & lt; event & gt; 이벤트의 이름을 포함하는 문자열 및 & lt; function & gt; 이벤트가 발생할 때 함수가 실행됩니다.

npm init -y && touch index.js

연결이 준비되면 텍스트를 표시하는 방법은 다음과 같습니다.

이 코드를 실행하려면 다음 명령을 사용합니다

API 키가 올바르게 설정되면 터미널에 "연결이 열린"메시지가 표시됩니다. 연결이 여전히 열려 있으므로 스크립트가 계속 실행되므로 수동으로 중지해야합니다.

메시지가 수신 될 때 조치를 설정합니다 WebSockets를 사용할 때 응답 할 수있는 또 다른 이벤트는 메시지 이벤트입니다. 이것은 서버에서 메시지를 수신 할 때마다 트리거됩니다. 수신 된 각 메시지를 표시하는 함수를 추가하겠습니다

스크립트를 실행하면 세션도 표시해야합니다. 세션이 초기화 될 때 API가 전송하는 이벤트가 표시됩니다. 다른 WebSocket 이벤트

npm install ws dotenv

위의 우리는 이벤트 리스너를 Open 및 메시지 이벤트에 추가하는 방법을 배웠습니다. Websockets는 예에서 사용할 수없는 두 가지 추가 이벤트를 지원합니다.

닫기 이벤트는 소켓을 닫을 때 콜백을 추가하는 데 사용될 수 있습니다.

오류 이벤트는 오류가있을 때 콜백을 추가하는 데 사용됩니다.

// Import the web socket library
const WebSocket = require("ws");
// Load the .env file into memory so the code has access to the key
const dotenv = require("dotenv");
dotenv.config();
function main() {
  // Connect to the API
  const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
  const ws = new WebSocket(url, {
      headers: {
          "Authorization": "Bearer " + process.env.OPENAI_API_KEY,
          "OpenAI-Beta": "realtime=v1",
      },
  });
}
main();

실시간 api 와 의사 소통 WebSockets로 작업하려면 이벤트 중심 방식으로 프로그래밍해야합니다. 메시지는 통신 채널에서 앞뒤로 전송되며 이러한 메시지가 전달되거나 수신되는시기를 제어 할 수 없습니다.

커뮤니케이션을 시작한 코드는 handleOpen () 안에 추가되어야합니다. o 그렇지 않으면 웹 소켓 통신 채널이 생성되기 전에 해당 코드가 실행될 수 있으므로 오류가 발생합니다. 코드 처리 메시지에 대해서도 마찬가지입니다. 모든 논리는 handlemessage () 함수로 들어가야합니다 다가오는 예에서는 다음 코드를 시작점으로 사용하겠습니다. 변경의 대부분은 handleOpen () 및 handlemessage ()를 업데이트하는 것과 관련이 있습니다.

실시간 API를 사용하여 텍스트를 보내고 수신합니다 실시간 API와의 커뮤니케이션은 이벤트를 사용하여 발생합니다. OpenAI 실시간 문서 API는 지원하는 이벤트를 나열합니다. 대화를 시작하기 위해 대화를 시작합니다. 이벤트는 문서에 필드가 설명 된 JSON 객체로 표시됩니다. 여기에 대화의 예는 다음과 같습니다. item.item.create 프롬프트를 작성하십시오.”프롬프트를 보내십시오.”한 문장으로 웹 소켓이 무엇인지 설명하십시오.

이 이벤트는 API에 텍스트 대화를 시작하려고한다고 말합니다. 이것은 "input_text"유형을 사용하여 컨텐츠 필드에 지정되고 텍스트 프롬프트를 제공합니다. 우리는 ws.send () 메소드를 사용하여 메시지를 보냅니다. 웹 소켓 패키지는 인수로 문자열을 예상하므로 JSON.stringify () 함수를 사용하여 JSON 이벤트를 문자열로 변환해야합니다. 이것들을 합치면 위의 이벤트를 보낼 수있는 방법은 다음과 같습니다.

이것은 대화가 시작되지만 API가 자동으로 응답을 보내도록 트리거하지는 않습니다. 응답을 트리거하려면 응답을 보냅니다. 예는 다음과 같습니다.

npm init -y && touch index.js

이 이벤트는 Modalities Response 매개 변수를 사용하여 텍스트 응답을 요청합니다. 지침은 모델이 원하는대로 설명하는 가장 중요한 부분입니다.이 경우 사용자를 돕기위한 일반적인 프롬프트입니다. 우리는이 두 이벤트를 handleOpen () 함수로 보냅니다. 연결이 설정 되 자마자 대화가 시작되도록합니다. 이 예제에서 handleOpen () 함수의 전체 구현은 다음과 같습니다.

수신 메시지와 관련 하여이 예제에 주목할 가치가있는 세 가지 유형의 이벤트가 있습니다. response.text.delta, response.text.done 및 response.done 이벤트 :

response.text.delta 이벤트에는 델타 필드의 청크로 분류 된 응답이 포함되어 있습니다. 그들은 우리가 실시간 경험을 제공하기를 원할 때 중요합니다. 그들은 우리가 청크를 바로 스트리밍 할 수 있기 때문입니다.

npm install ws dotenv

response.text.done 이벤트는 텍스트 응답의 끝을 표시하고 텍스트 필드에 전체 답변을 포함합니다. 응답. 이벤트는 응답의 끝을 표시합니다

handlemessage () 함수의 스위치 문을 사용하여 스크립트가 이러한 이벤트에 응답하려는 방법을 지정할 수 있습니다.

이 예에서는 응답 .text.delta 이벤트를 사용하여 콘솔을받을 때 콘솔에 대한 응답 덩어리를 인쇄합니다. 응답이 완료되면 response.text.done 이벤트가 트리거되고 출력이 완료되었음을 보여주기 위해 새로운 줄을 인쇄합니다. 마지막으로 응답을 받으면 웹 소켓을 닫습니다. 이 예제를 실행하려면이 기능을 위의 템플릿 코드에 붙여 넣고 명령으로 실행합니다.

이것은 터미널에서 프롬프트에 대한 응답을 생성합니다. "한 문장으로 웹 소켓이 무엇인지 설명하십시오."

// Import the web socket library
const WebSocket = require("ws");
// Load the .env file into memory so the code has access to the key
const dotenv = require("dotenv");
dotenv.config();
function main() {
  // Connect to the API
  const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
  const ws = new WebSocket(url, {
      headers: {
          "Authorization": "Bearer " + process.env.OPENAI_API_KEY,
          "OpenAI-Beta": "realtime=v1",
      },
  });
}
main();

텍스트 예제의 전체 코드는 여기에서 확인할 수 있습니다. 실시간 API를 사용하여 오디오를 보내고 수신합니다 이전 예제는 텍스트 데이터를 처리하는 방법을 보여주었습니다. 그러나 실시간 API에 대한 실질적인 관심은 실시간으로 대답하는 음성 어시스턴트를 만드는 것입니다. 오디오 데이터 처리는 텍스트 데이터를 다루는 것보다 약간 더 복잡합니다. 우리는이 기사의 주요 주제에서 우리를 산만하게 할 때 오디오가 어떻게 작동하는지에 따른 몇 가지 세부 사항을 건너 뛸 것입니다. 먼저, 우리는 두 개의 패키지를 설치합니다 :

npm init -y && touch index.js

node-record-lpcm16 음성 프롬프트를 보낼 수 있도록 마이크에서 사운드를 기록합니다. 스피커는 AI 음성 응답을 재생하는 데 사용됩니다

우리는 또한 노드 라이브러리가 마이크와 인터페이스하고 오디오 레코드 오디오와 인터페이스하는 데 사용할 오디오 처리를위한 명령 줄 유틸리티 인 Sox (Sound Exchange)를 설치해야합니다. Brew Install Sox를 사용하여 MacOS 또는 Sudo Apt Install Sox에 설치하십시오. 이 패키지가 설치된 상태에서 를 가져 와서 사용자의 오디오 프롬프트를 기록하는 함수 startrecording ()을 추가합니다. 우리는 주요 주제에서 우리를 너무 많이 조종 할 수 있으므로이 기능을 자세히 설명하지 않습니다.

 환경을로드 한 후 index.js 파일에 다음 코드를 추가하십시오.
<li>
<ec> Startrecording () 함수는 마이크에서 오디오를 기록하고 "Enter"를 눌러 기다릴 때까지 기다립니다. </ec>
</li>
<update update> 다음, AI의 응답을 재생하는 데 사용되는 스피커 ()를 초기화하여 Main () 함수를 업데이트합니다.
</update>

그 방법을 벗어나면 handleOpen () 및 handleMessage ()를 구현하여 오디오를 처리 할 수 있습니다. handleOpen () 함수에서는 사용자의 오디오 프롬프트를 기록하기 위해 startrecording () 함수 만 호출하면됩니다. 또한 이벤트를 약간 업데이트해야합니다

CreateConversationEvent의 내용을 업데이트하여 "input_text 대신"Input_audio "유형을 사용하고 텍스트 필드를 오디오로 바꾸십시오 : base64audiodata. 크리터 반응의 응답 양식에 "오디오"를 추가하십시오

다음은 업데이트 된 handleOpen () 함수입니다 :

handlemessage () 함수를 구현하려면 오디오 버퍼를 업데이트하고 새로운 사운드 델타를 재생하기 위해 "response.audio.delta"이벤트를 수정합니다.

우리는 스위치 문에서 "response.text.done"이벤트를 제거하고 스피커를 중지하기 위해 "response.done"이벤트를 업데이트합니다 :

handlemessage () 함수의 최종 구현은 다음과 같습니다.

이 예제를 실행하려면이 수정 사항을 템플릿 코드에 적용하고 명령으로 실행하십시오.

npm install ws dotenv

마이크가 녹음을 시작합니다. 우리는 우리의 요청을 말하고“Enter”를 눌러 그것을 보낼 수 있습니다. 그러면 AI의 응답은 스피커에서 재생됩니다 (마이크가 음소거되지 않고 스피커에 볼륨이 있는지 확인). 오디오 예제의 전체 코드는 여기에서 확인할 수 있습니다.

함수 호출 OpenAI API의 좋은 특징 중 하나는 기능 호출을 수행하는 기능입니다. 조수에 기능을 추가 할 수 있으며 해당 기능 중 하나가 답을 제공하는 데 유용 할 수 있음을 감지하면 특정 기능을 요청하는 이벤트를 보냅니다. OpenAi 문서는 기능 호출의 수명주기를 설명하는 다음 다이어그램을 제공합니다.

Openai Realtime API : 예제가있는 안내서 출처 : Openai 다이어그램에서 클라이언트가 LLM이 호출 할 수있는 함수의 정의를 제공해야합니다. 또한 기능 실행은 클라이언트 측에서 발생합니다. AI는 기능을 호출하도록 요청하는 이벤트와 그 주장을 보냅니다. 그런 다음 결과를 다시 보내는 책임이 있습니다 보조원에게 두 개의 숫자를 추가하는 함수를 강화합시다. 위의 오디오 예제를 확장 하여이 예제를 작성합니다.

사용 가능한 함수를 지정하려면 LLM에 도구 목록을 제공해야합니다. 각 도구는 기능에 대한 정보를 지정하는 JSON 객체입니다. 합 함수에 대한 도구를 정의하는 방법은 다음과 같습니다.

객체 구조를 설명해 봅시다 :

유형은 함수를 정의하고 있음을 지정합니다 이름은 함수를 식별하는 데 사용됩니다. 이것이 LLM이 호출하려는 기능을 알려주기 위해 사용하는 것입니다. 설명은 LLM 이이 기능을 사용하는시기를 식별하는 데 사용됩니다.

매개 변수는 함수의 인수를 지정하는 데 사용됩니다. 이 경우 a와 b

다음 단계는 코드의 함수를 정의하는 것입니다. 기능 통화 이벤트에 응답 할 때 key calculate_sum과 함께 사전을 사용하여 적절한 기능을 쉽게 호출 할 수 있도록합니다.

API는 위의 매개 변수에 정의 된 동일한 구조를 가진 사전으로 함수 인수를 제공합니다. 이 경우, 3과 5를 추가하기 위해 사전은 { "a": 3, "b": 5}입니다. SumTool 및 Functions 상수는 INDEX.js의 상단에 추가 할 수 있습니다. 다음으로, 우리는 응답을 업데이트합니다. 이것은 응답에 도구와 도구를 추가하여 수행됩니다.

LLM이 함수를 호출하기로 결정하면 응답을 방출합니다 .function_call_arguments.done 이벤트. 우리는 다음과 같이 응답해야합니다

함수 정보를 얻고 함수 호출.

함수 호출의 결과 보내기 응답 요청

npm init -y && touch index.js

우리는 hanldemessage () 함수 내부의 스위치 명령문에 다음 사례를 추가하여이를 처리합니다.

이제 스크립트를 실행하고 두 숫자를 추가 한 결과를 요청하면 모델은 함수를 호출하고 결과를 제공해야합니다. 이 함수는 비교적 간단하지만 함수는 클라이언트에 의해 실행되기 때문에 무엇이든 될 수 있습니다. 다음 섹션에서는 더 복잡한 기능의 두 가지 예가 표시됩니다.

이 예제의 전체 코드는 여기에서 제공됩니다.

오늘 mlops 기술 구축 오늘

시작하여 시작하고 경력 구축 mlops 기술을 얻으십시오. OpenAI 팀은 실시간 API를 보여주는 데모 반응 앱을 제공합니다. 여기서 우리는 그것을 설정하고 작동 방식을 탐색하는 방법을 배웁니다. 이것은 더 복잡한 앱을 구축하기위한 좋은 출발점입니다.

앱 설정 반응 지식은 지식을 시작하고 실행하는 데 필요한 지식이 필요하지 않습니다. 그러나 반응에 익숙해야합니다. 수정 또는 확장.

그들의 앱은이 저장소에서 호스팅됩니다. 설정하려면 다음 git 명령을 사용하여 복제하여 시작하십시오.

또는 GitHub 인터페이스에서 수동으로 다운로드 할 수도 있습니다. 앱을 설치하려면 다음 NPM (Node Package Manage) 명령을 사용합니다.

설치가 완료되면 프로젝트의 루트 폴더에서 .env라는 파일을 만들고 다음 내용을 붙여 넣습니다.

교체 & lt; openai_api_key & gt; OpenAI API 키와 함께 이제 응용 프로그램을 실행할 준비가되어 있어야합니다. 두 부분으로 구성되어 있습니다 :

응용 프로그램의 웹 사용자 인터페이스로 구성된 React Frontend. 릴레이 서버는 프론트 엔드와 OpenAI API 사이의 중개자로 사용됩니다.

프론트 엔드와 OpenAI API 사이에 릴레이 서버를 구현하는 주요 목적은 API 키를 안전하게 저장하는 것입니다. 이 키 없이는 API와 상호 작용하는 것은 불가능합니다 그러나 키가 프론트 엔드에 저장된 경우 모든 사용자가 액세스 할 수 있습니다. 따라서 솔루션에는 키를 안전하게 저장하고 API와 프론트 엔드 간의 데이터 교환을 용이하게하는 서버를 설정하는 것이 포함됩니다. 이 특정 시나리오에서는 응용 프로그램이 로컬로만 실행되므로 보안 문제는 최소화됩니다.

npm init -y && touch index.js

응용 프로그램을 시작하려면 릴레이 서버와 프론트 엔드를 모두 시작해야합니다. 릴레이 서버를 시작하려면 다음 명령을 사용하십시오

반응 프론트 엔드를 시작하려면 명령을 사용하십시오

로드가 완료되면 응용 프로그램이 실행중인 상태에서 브라우저에서 탭이 열립니다.

앱 npm install ws dotenv 앱 사용을 시작하기 전에 컴퓨터가 음소거에 있지 않은지 확인하고 애플리케이션에 마이크에 액세스 할 수 있도록하십시오. 우리는 "Connect"버튼을 클릭하여 시작합니다. 이렇게하면 실시간 API에 "Hello"메시지를 보내고 인사말을 받게됩니다. .

연결이 설정되면 중앙에 새 버튼이 나타나서 AI 조수와 대화 할 수 있습니다.

// Import the web socket library
const WebSocket = require("ws");
// Load the .env file into memory so the code has access to the key
const dotenv = require("dotenv");
dotenv.config();
function main() {
  // Connect to the API
  const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
  const ws = new WebSocket(url, {
      headers: {
          "Authorization": "Bearer " + process.env.OPENAI_API_KEY,
          "OpenAI-Beta": "realtime=v1",
      },
  });
}
main();

Openai Realtime API : 예제가있는 안내서 를 사용하려면 버튼을 풀지 않고 눌러 대화하십시오. 버튼이 릴리스되면 메시지가 전송됩니다.

응용 프로그램에는 VAD (음성 활동 감지) 모드가있어 버튼을 누를 필요가 없습니다. 이 모드에서는 응용 프로그램이 지속적으로 듣고 조수와 적극적으로 대화 할 수 있습니다. 사용하려면 "vad"버튼을 누르고 말하십시오.

함수 우리가 배운대로, 실시간 API는 AI가 특정 기능을 수행 할 수있는 기능을 제공합니다. 이 데모는 두 가지 기능을 보여줍니다. 하나는 특정 위치의 일기 예보에 대해 문의하고 다른 하나는 비서를 개인화하기 위해 메모리 항목을 추가하기위한 것입니다.

"뉴욕의 내일 날씨는 어떻습니까?"와 같은 질문을함으로써 이러한 기능을 경험하십시오. 그리고 "내가 가장 좋아하는 색은 파란색입니다."와 같은 선호도를 언급합니다. 보조원은이 쿼리에 대한 구두 응답을 제공 할 것이며 정보는 응용 프로그램의 오른쪽에도 표시됩니다.

Openai Realtime API : 예제가있는 안내서 날씨 보고서를 요청했을 때가 있었으며 그 응답은 그 순간에 액세스 할 수 없음을 나타냅니다. 그러나 정보는 오른쪽에 지속적으로 표시되었습니다. 데모 앱이기 때문에 완전히 기능적인 제품이 아니라 API의 기능을 선보이는 역할을합니다. 클라이언트 이해