이 저장소에는 OpenAI의 실시간 API에 연결하기위한 참조 클라이언트 일명 샘플 라이브러리가 포함되어 있습니다. 이 라이브러리는 베타 버전에 있으며 최종 구현으로 취급해서는 안됩니다. 대화식 앱을 쉽게 프로토 타입으로 사용하는 데 사용할 수 있습니다.
API를 즉시 플레이하는 가장 쉬운 방법은 실시간 콘솔을 사용하는 것입니다. 참조 클라이언트를 사용하여 음성 시각화 등의 예제가있는 완벽한 기능 API 검사관을 제공합니다.
이 라이브러리는 JavaScript 및 TypeScript CodeBases 모두에서 Server-Side (Node.js) 및 브라우저 (React, VUE)에서 사용되도록 만들어졌습니다. 베타에있는 동안 라이브러리를 설치하려면 Github 저장소에서 직접 npm install 해야합니다.
$ npm i openai/openai-realtime-api-beta --save import { RealtimeClient } from '@openai/realtime-api-beta' ;
const client = new RealtimeClient ( { apiKey : process . env . OPENAI_API_KEY } ) ;
// Can set parameters ahead of connecting, either separately or all at once
client . updateSession ( { instructions : 'You are a great, upbeat friend.' } ) ;
client . updateSession ( { voice : 'alloy' } ) ;
client . updateSession ( {
turn_detection : { type : 'none' } , // or 'server_vad'
input_audio_transcription : { model : 'whisper-1' } ,
} ) ;
// Set up event handling
client . on ( 'conversation.updated' , ( event ) => {
const { item , delta } = event ;
const items = client . conversation . getItems ( ) ;
/**
* item is the current item being updated
* delta can be null or populated
* you can fetch a full list of items at any time
*/
} ) ;
// Connect to Realtime API
await client . connect ( ) ;
// Send a item and triggers a generation
client . sendUserMessageContent ( [ { type : 'input_text' , text : `How are you?` } ] ) ; EG React 또는 VUE 앱의 브라우저 에서이 클라이언트를 직접 사용할 수 있습니다. 우리는 이것을 권장하지 않습니다. 브라우저에서 직접 OpenAI에 연결하면 API 키가 위험에 처해 있습니다. 브라우저 환경에서 클라이언트를 인스턴스화하려면 다음을 사용하십시오.
import { RealtimeClient } from '@openai/realtime-api-beta' ;
const client = new RealtimeClient ( {
apiKey : process . env . OPENAI_API_KEY ,
dangerouslyAllowAPIKeyInBrowser : true ,
} ) ;예를 들어 실시간 콘솔을 사용하여 자신의 릴레이 서버를 실행하는 경우 대신 릴레이 서버 URL에 연결할 수 있습니다.
const client = new RealtimeClient ( { url : RELAY_SERVER_URL } ) ; 이 라이브러리에는 실시간 API와 인터페이스를위한 세 가지 프리미티브가 있습니다. RealtimeClient 부터 시작하는 것이 좋습니다. 그러나 더 고급 사용자는 금속에 더 가까이 작업 할 수 있습니다.
RealtimeClientconversation.updated 가 있습니다. UPDATED.ITEM.ITEM.APPENDED, conversation.item.appended , conversation.item.completed 및 realtime.event Events가 있습니다 conversation.interruptedRealtimeAPIclient.realtimeserver.{event_name} 및 client.{event_name}RealtimeConversationclient.conversation 제공합니다클라이언트에는 실시간 앱을 쉽게 구축 할 수있는 몇 가지 기본 유틸리티가 제공됩니다.
사용자로부터 서버로 메시지를 보내는 것은 쉽습니다.
client . sendUserMessageContent ( [ { type : 'input_text' , text : `How are you?` } ] ) ;
// or (empty audio)
client . sendUserMessageContent ( [
{ type : 'input_audio' , audio : new Int16Array ( 0 ) } ,
] ) ; 스트리밍 오디오를 보내려면 .appendInputAudio() 메소드를 사용하십시오. turn_detection: 'disabled' 모드 인 경우 모델에 응답하도록 표시하려면 .createResponse() 사용해야합니다.
// Send user audio, must be Int16Array or ArrayBuffer
// Default audio format is pcm16 with sample rate of 24,000 Hz
// This populates 1s of noise in 0.1s chunks
for ( let i = 0 ; i < 10 ; i ++ ) {
const data = new Int16Array ( 2400 ) ;
for ( let n = 0 ; n < 2400 ; n ++ ) {
const value = Math . floor ( ( Math . random ( ) * 2 - 1 ) * 0x8000 ) ;
data [ n ] = value ;
}
client . appendInputAudio ( data ) ;
}
// Pending audio is committed and model is asked to generate
client . createResponse ( ) ; 도구 작업은 쉽습니다. .addTool() 호출하고 콜백을 두 번째 매개 변수로 설정하십시오. 콜백은 도구의 매개 변수로 실행되며 결과는 자동으로 모델로 다시 전송됩니다.
// We can add tools as well, with callbacks specified
client . addTool (
{
name : 'get_weather' ,
description :
'Retrieves the weather for a given lat, lng coordinate pair. Specify a label for the location.' ,
parameters : {
type : 'object' ,
properties : {
lat : {
type : 'number' ,
description : 'Latitude' ,
} ,
lng : {
type : 'number' ,
description : 'Longitude' ,
} ,
location : {
type : 'string' ,
description : 'Name of the location' ,
} ,
} ,
required : [ 'lat' , 'lng' , 'location' ] ,
} ,
} ,
async ( { lat , lng , location } ) => {
const result = await fetch (
`https://api.open-meteo.com/v1/forecast?latitude= ${ lat } &longitude= ${ lng } ¤t=temperature_2m,wind_speed_10m` ,
) ;
const json = await result . json ( ) ;
return json ;
} ,
) ; .addTool() 메소드는 도구 핸들러를 자동으로 실행하고 핸들러 완료에 대한 응답을 트리거합니다. 예를 들어 도구를 사용하여 다른 목적으로 사용하는 스키마를 생성하는 경우도 있습니다.
이 경우 updateSession 와 함께 tools 항목을 사용할 수 있습니다. 이 경우 .addTool() 에 필요하지 않은 type: 'function' 지정 해야합니다 .
참고 : 이와 같은 세션을 수동으로 업데이트 할 때 .addTool() 이 추가 된 도구는 재정의되지 않지만 모든 updateSession() 변경은 이전 updateSession() 변경을 무시합니다. .addTool() 을 통해 추가 된 도구는 유지되고 여기에서 수동으로 설정된 모든 것에 추가됩니다.
client . updateSession ( {
tools : [
{
type : 'function' ,
name : 'get_weather' ,
description :
'Retrieves the weather for a given lat, lng coordinate pair. Specify a label for the location.' ,
parameters : {
type : 'object' ,
properties : {
lat : {
type : 'number' ,
description : 'Latitude' ,
} ,
lng : {
type : 'number' ,
description : 'Longitude' ,
} ,
location : {
type : 'string' ,
description : 'Name of the location' ,
} ,
} ,
required : [ 'lat' , 'lng' , 'location' ] ,
} ,
} ,
] ,
} ) ;그런 다음 기능 호출을 처리하려면 ...
client . on ( 'conversation.updated' , ( { item , delta } ) => {
if ( item . type === 'function_call' ) {
// do something
if ( delta . arguments ) {
// populating the arguments
}
}
} ) ;
client . on ( 'conversation.item.completed' , ( { item } ) => {
if ( item . type === 'function_call' ) {
// your function call is complete, execute some custom code
}
} ) ; 특히 turn_detection: 'disabled' 모드에서 모델을 수동으로 방해 할 수 있습니다. 이렇게하려면 다음을 사용할 수 있습니다.
// id is the id of the item currently being generated
// sampleCount is the number of audio samples that have been heard by the listener
client . cancelResponse ( id , sampleCount ) ; 이 방법으로 인해 모델은 생성을 즉시 중단 할 수 있지만 sampleCount 후 모든 오디오를 제거하고 텍스트 응답을 지우면서 재생되는 항목을 자릅니다. 이 방법을 사용하면 모델을 방해하고 사용자의 상태가 위치보다 앞서있는 "기억"을 방지 할 수 있습니다.
더 많은 수동 제어가 필요하고 Realtime Client Events API 참조에 따라 사용자 정의 클라이언트 이벤트를 보내려면 client.realtime.send() 와 같은 다음을 사용할 수 있습니다.
// manually send a function call output
client . realtime . send ( 'conversation.item.create' , {
item : {
type : 'function_call_output' ,
call_id : 'my-call-id' ,
output : '{function_succeeded:true}' ,
} ,
} ) ;
client . realtime . send ( 'response.create' ) ; RealtimeClient 사용하면 서버 이벤트에서 응용 프로그램 제어 흐름에 가장 중요한 5 가지 주요 이벤트로 이벤트 오버 헤드를 줄였습니다. 이러한 이벤트는 API 사양 자체의 일부가 아니라 응용 프로그램 개발을보다 쉽게 만들기 위해 논리를 래핑합니다.
// errors like connection failures
client . on ( 'error' , ( event ) => {
// do thing
} ) ;
// in VAD mode, the user starts speaking
// we can use this to stop audio playback of a previous response if necessary
client . on ( 'conversation.interrupted' , ( ) => {
/* do something */
} ) ;
// includes all changes to conversations
// delta may be populated
client . on ( 'conversation.updated' , ( { item , delta } ) => {
// get all items, e.g. if you need to update a chat window
const items = client . conversation . getItems ( ) ;
switch ( item . type ) {
case 'message' :
// system, user, or assistant message (item.role)
break ;
case 'function_call' :
// always a function call from the model
break ;
case 'function_call_output' :
// always a response from the user / application
break ;
}
if ( delta ) {
// Only one of the following will be populated for any given event
// delta.audio = Int16Array, audio added
// delta.transcript = string, transcript added
// delta.arguments = string, function arguments added
}
} ) ;
// only triggered after item added to conversation
client . on ( 'conversation.item.appended' , ( { item } ) => {
/* item status can be 'in_progress' or 'completed' */
} ) ;
// only triggered after item completed in conversation
// will always be triggered after conversation.item.appended
client . on ( 'conversation.item.completed' , ( { item } ) => {
/* item status will always be 'completed' */
} ) ; 애플리케이션 개발을 더 많이 제어하려면 realtime.event 이벤트를 사용하고 서버 이벤트에만 응답 할 수 있습니다. 이러한 이벤트에 대한 전체 문서는 실시간 서버 이벤트 API 참조에서 제공됩니다.
// all events, can use for logging, debugging, or manual event handling
client . on ( 'realtime.event' , ( { time , source , event } ) => {
// time is an ISO timestamp
// source is 'client' or 'server'
// event is the raw event payload (json)
if ( source === 'server' ) {
doSomething ( event ) ;
}
} ) ; 테스트를 실행하려면 OPENAI_API_KEY= 설정된 .env 파일이 있는지 확인해야합니다. 거기에서 테스트 스위트를 실행하는 것은 쉽습니다.
$ npm test디버그 로그를 사용하여 테스트를 실행하려면 (WebSocket에서 전송 및 수신 된 이벤트를 로그인) : 사용하십시오.
$ npm test -- --debug실시간 API를 확인해 주셔서 감사합니다. 당신의 의견을 듣고 싶습니다. 이 모든 것을 가능하게 해준 Realtime API 팀에게 특별한 감사를드립니다.