OpenAI Realtime Console 旨在作為 OpenAI Realtime API 的檢查器和互動式 API 參考。它附帶了兩個實用程式庫：openai/openai-realtime-api-beta（充當參考客戶端（適用於瀏覽器和 Node.js））和/src/lib/wavtools （允許在瀏覽器中進行簡單的音訊管理）。
這是一個使用create-react-app建立的 React 項目，透過 Webpack 捆綁。透過解壓縮該包的內容並使用來安裝它；
$ npm i使用以下命令啟動您的伺服器：
$ npm start它應該可以透過localhost:3000來獲得。
控制台需要能夠存取 Realtime API 的 OpenAI API 金鑰（使用者金鑰或專案金鑰）。啟動時系統會提示您輸入它。它將透過localStorage保存，並且可以隨時從 UI 進行更改。
要開始會話，您需要連線。這將需要麥克風存取權限。然後，您可以選擇手動（一鍵通）和vad （語音活動偵測）對話模式，並隨時在它們之間切換。
啟用了兩個功能；
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
您將需要重新啟動.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()並將回呼設為第二個參數。回調將使用工具的參數執行，結果將自動傳回模型。
// 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中有五個用於應用程式控制流的主要客戶端事件。請注意，這只是使用客戶端的概述，完整的即時 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 團隊讓這一切成為可能。請隨時聯絡我們、提出問題或透過在儲存庫上建立問題來提供回饋。您也可以直接聯絡我們，讓我們知道您的想法！
