OpenAI Realtime Console は、OpenAI Realtime API のインスペクターおよびインタラクティブな API リファレンスとして設計されています。これには、参照クライアント(ブラウザーおよび Node.js 用) として機能する openai/openai-realtime-api-beta と、ブラウザーでのシンプルなオーディオ管理を可能にする/src/lib/wavtoolsという 2 つのユーティリティ ライブラリがパッケージ化されています。
これは、Webpack 経由でバンドルされているcreate-react-app使用して作成された React プロジェクトです。このパッケージの内容を抽出して使用してインストールします。
$ npm i次のようにしてサーバーを起動します。
$ npm start localhost:3000経由で利用できるはずです。
コンソールには、Realtime API にアクセスできる OpenAI API キー (ユーザー キーまたはプロジェクト キー) が必要です。起動時に入力を求められます。これはlocalStorage経由で保存され、UI からいつでも変更できます。
セッションを開始するには、 に接続する必要があります。これにはマイクへのアクセスが必要になります。その後、手動(プッシュ トゥ トーク) 会話モードとvad (音声アクティビティ検出) 会話モードのどちらかを選択し、いつでも切り替えることができます。
2 つの機能が有効になっています。
get_weather : どこかの天気を尋ねると、モデルは最善を尽くして場所を特定し、地図上に表示して、その場所の天気を取得します。位置情報へのアクセスがなく、座標はモデルのトレーニング データから「推測」されるため、精度が完全ではない可能性があることに注意してください。set_memory : モデルに情報を記憶するように依頼できます。情報は左側の JSON BLOB に保存されます。プッシュ トゥ トークまたは VAD モードでいつでもモデルを自由に中断できます。
より堅牢な実装を構築し、独自のサーバーを使用してリファレンス クライアントを試してみたい場合は、Node.js リレー サーバーが含まれています。
$ npm run relay localhost:8081で自動的に起動します。
次の構成で.envファイルを作成する必要があります。
OPENAI_API_KEY=YOUR_API_KEY
REACT_APP_LOCAL_RELAY_SERVER_URL=http://localhost:8081
React アプリと.env.変更が有効になります。ローカル サーバー URL はConsolePage.tsx経由でロードされます。リレー サーバーの使用をいつでも停止するには、環境変数を削除するか、空の文字列に設定します。
/**
* 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 || '' ;このサーバーは単純なメッセージリレーにすぎませんが、次のように拡張できます。
instructionsなど) をサーバー上で直接処理しますこれらの機能は自分で実装する必要があります。
最新のリファレンス クライアントとドキュメントは、GitHub (openai/openai-realtime-api-beta) で入手できます。
このクライアントは、React (フロントエンド) または Node.js プロジェクトで自分で使用できます。完全なドキュメントについては、GitHub リポジトリを参照してください。ただし、ここにあるガイドを入門書として使用できます。
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?` } ] ) ; ストリーミング オーディオを送信するには、 .appendInputAudio()メソッドを使用します。 turn_detection: 'disabled'モードの場合は、 .generate()使用してモデルに応答するように指示する必要があります。
// 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()呼び出して、2 番目のパラメータとしてコールバックを設定するだけです。コールバックはツールのパラメーターを使用して実行され、結果は自動的にモデルに返されます。
// 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 ;
}
) ; 特に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の後のすべてのオーディオが削除され、テキスト応答がクリアされることで、再生中のアイテムが切り詰められます。このメソッドを使用すると、モデルを中断して、ユーザーの状態より先に生成されたものをモデルが「記憶」するのを防ぐことができます。
RealtimeClientのアプリケーション制御フローには 5 つの主要なクライアント イベントがあります。これはクライアントの使用の概要にすぎないことに注意してください。完全な Realtime API イベント仕様はかなり大きくなります。より詳細な制御が必要な場合は、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 には、録音と再生の両方において、ブラウザーでの PCM16 オーディオ ストリームの簡単な管理が含まれています。
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リアルタイム コンソールをチェックしていただきありがとうございます。 Realtime API を楽しんでいただければ幸いです。これを可能にしてくれた Realtime API チーム全員に感謝します。リポジトリに問題を作成して、お気軽にお問い合わせ、ご質問、フィードバックをお寄せください。ご意見を直接お聞かせいただくこともできます。
