O OpenAI Realtime Console destina-se a ser um inspetor e uma referência de API interativa para a API OpenAI Realtime. Ele vem com duas bibliotecas de utilitários, openai/openai-realtime-api-beta que atua como um cliente de referência (para navegador e Node.js) e /src/lib/wavtools
que permite o gerenciamento simples de áudio no navegador.
Este é um projeto React criado usando create-react-app
que é empacotado via Webpack. Instale-o extraindo o conteúdo deste pacote e usando;
$ npm i
Inicie seu servidor com:
$ npm start
Deve estar disponível via localhost:3000
.
O console requer uma chave de API OpenAI ( chave de usuário ou chave de projeto ) que tenha acesso à API Realtime. Você será solicitado na inicialização para inseri-lo. Ele será salvo via localStorage
e pode ser alterado a qualquer momento na IU.
Para iniciar uma sessão, você precisará se conectar . Isso exigirá acesso ao microfone. Você pode então escolher entre os modos de conversa manual (Push-to-talk) e vad (Voice Activity Detection) e alternar entre eles a qualquer momento.
Existem duas funções habilitadas;
get_weather
: pergunte sobre o clima em qualquer lugar e o modelo fará o possível para identificar o local, mostrá-lo em um mapa e obter o clima para aquele local. Observe que ele não tem acesso à localização e as coordenadas são "adivinhadas" a partir dos dados de treinamento do modelo, portanto a precisão pode não ser perfeita.set_memory
: você pode pedir ao modelo para lembrar as informações para você e ele as armazenará em um blob JSON à esquerda.Você pode interromper livremente o modelo a qualquer momento no modo push-to-talk ou VAD.
Se você quiser construir uma implementação mais robusta e brincar com o cliente de referência usando seu próprio servidor, incluímos um Relay Server Node.js.
$ npm run relay
Ele será iniciado automaticamente em localhost:8081
.
Você precisará criar um arquivo .env
com a seguinte configuração:
OPENAI_API_KEY=YOUR_API_KEY
REACT_APP_LOCAL_RELAY_SERVER_URL=http://localhost:8081
Você precisará reiniciar o aplicativo React e o servidor de retransmissão para o .env.
alterações entrem em vigor. A URL do servidor local é carregada por meio de ConsolePage.tsx
. Para parar de usar o servidor de retransmissão a qualquer momento, simplesmente exclua a variável de ambiente ou configure-a como uma string vazia.
/**
* Running a local relay server will allow you to hide your API key
* and run custom logic on the server
*
* Set the local relay server address to:
* REACT_APP_LOCAL_RELAY_SERVER_URL=http://localhost:8081
*
* This will also require you to set OPENAI_API_KEY= in a `.env` file
* You can run it with `npm run relay`, in parallel with `npm start`
*/
const LOCAL_RELAY_SERVER_URL : string =
process . env . REACT_APP_LOCAL_RELAY_SERVER_URL || '' ;
Este servidor é apenas um simples retransmissor de mensagens , mas pode ser estendido para:
instructions
) diretamente no servidorVocê terá que implementar esses recursos sozinho.
O cliente de referência e a documentação mais recentes estão disponíveis no GitHub em openai/openai-realtime-api-beta.
Você mesmo pode usar este cliente em qualquer projeto React (front-end) ou Node.js. Para obter a documentação completa, consulte o repositório GitHub, mas você pode usar o guia aqui como uma introdução para começar.
import { RealtimeClient } from '/src/lib/realtime-api-beta/index.js' ;
const client = new RealtimeClient ( { apiKey : process . env . OPENAI_API_KEY } ) ;
// Can set parameters ahead of connecting
client . updateSession ( { instructions : 'You are a great, upbeat friend.' } ) ;
client . updateSession ( { voice : 'alloy' } ) ;
client . updateSession ( { turn_detection : 'server_vad' } ) ;
client . updateSession ( { input_audio_transcription : { model : 'whisper-1' } } ) ;
// Set up event handling
client . on ( 'conversation.updated' , ( { item , delta } ) => {
const items = client . conversation . getItems ( ) ; // can use this to render all items
/* includes all changes to conversations, delta may be populated */
} ) ;
// Connect to Realtime API
await client . connect ( ) ;
// Send an item and triggers a generation
client . sendUserMessageContent ( [ { type : 'text' , text : `How are you?` } ] ) ;
Para enviar streaming de áudio, use o método .appendInputAudio()
. Se você estiver no modo turn_detection: 'disabled'
, precisará usar .generate()
para instruir o modelo a responder.
// 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 ( ) ;
Trabalhar com ferramentas é fácil. Basta chamar .addTool()
e definir um retorno de chamada como segundo parâmetro. O callback será executado com os parâmetros da ferramenta, e o resultado será enviado automaticamente de volta ao modelo.
// 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 ;
}
) ;
Você pode querer interromper manualmente o modelo, especialmente no modo turn_detection: 'disabled'
. Para fazer isso, podemos usar:
// 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 ) ;
Este método fará com que o modelo interrompa imediatamente a geração, mas também truncará o item que está sendo reproduzido, removendo todo o áudio após sampleCount
e limpando a resposta de texto. Ao usar este método você pode interromper o modelo e evitar que ele "lembre" de qualquer coisa que tenha gerado que esteja à frente de onde está o estado do usuário.
Existem cinco eventos de cliente principais para o fluxo de controle de aplicativos em RealtimeClient
. Observe que esta é apenas uma visão geral do uso do cliente, a especificação completa do evento Realtime API é consideravelmente maior. Se você precisar de mais controle, verifique o repositório GitHub: openai/openai-realtime-api-beta.
// 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' */
} ) ;
Wavtools contém fácil gerenciamento de fluxos de áudio PCM16 no navegador, tanto para gravação quanto para reprodução.
import { WavRecorder } from '/src/lib/wavtools/index.js' ;
const wavRecorder = new WavRecorder ( { sampleRate : 24000 } ) ;
wavRecorder . getStatus ( ) ; // "ended"
// request permissions, connect microphone
await wavRecorder . begin ( ) ;
wavRecorder . getStatus ( ) ; // "paused"
// Start recording
// This callback will be triggered in chunks of 8192 samples by default
// { mono, raw } are Int16Array (PCM16) mono & full channel data
await wavRecorder . record ( ( data ) => {
const { mono , raw } = data ;
} ) ;
wavRecorder . getStatus ( ) ; // "recording"
// Stop recording
await wavRecorder . pause ( ) ;
wavRecorder . getStatus ( ) ; // "paused"
// outputs "audio/wav" audio file
const audio = await wavRecorder . save ( ) ;
// clears current audio buffer and starts recording
await wavRecorder . clear ( ) ;
await wavRecorder . record ( ) ;
// get data for visualization
const frequencyData = wavRecorder . getFrequencies ( ) ;
// Stop recording, disconnects microphone, output file
await wavRecorder . pause ( ) ;
const finalAudio = await wavRecorder . end ( ) ;
// Listen for device change; e.g. if somebody disconnects a microphone
// deviceList is array of MediaDeviceInfo[] + `default` property
wavRecorder . listenForDeviceChange ( ( deviceList ) => { } ) ;
import { WavStreamPlayer } from '/src/lib/wavtools/index.js' ;
const wavStreamPlayer = new WavStreamPlayer ( { sampleRate : 24000 } ) ;
// Connect to audio output
await wavStreamPlayer . connect ( ) ;
// Create 1s of empty PCM16 audio
const audio = new Int16Array ( 24000 ) ;
// Queue 3s of audio, will start playing immediately
wavStreamPlayer . add16BitPCM ( audio , 'my-track' ) ;
wavStreamPlayer . add16BitPCM ( audio , 'my-track' ) ;
wavStreamPlayer . add16BitPCM ( audio , 'my-track' ) ;
// get data for visualization
const frequencyData = wavStreamPlayer . getFrequencies ( ) ;
// Interrupt the audio (halt playback) at any time
// To restart, need to call .add16BitPCM() again
const trackOffset = await wavStreamPlayer . interrupt ( ) ;
trackOffset . trackId ; // "my-track"
trackOffset . offset ; // sample number
trackOffset . currentTime ; // time in track
Obrigado por conferir o Realtime Console. Esperamos que você se divirta com a API Realtime. Agradecimentos especiais a toda a equipe da Realtime API por tornar isso possível. Fique à vontade para entrar em contato, fazer perguntas ou dar feedback criando um problema no repositório. Você também pode entrar em contato e nos contar o que pensa diretamente!