Die OpenAI Realtime Console ist als Inspektor und interaktive API-Referenz für die OpenAI Realtime API gedacht. Im Lieferumfang sind zwei Dienstprogrammbibliotheken enthalten: openai/openai-realtime-api-beta, das als Referenzclient (für Browser und Node.js) fungiert, und /src/lib/wavtools das eine einfache Audioverwaltung im Browser ermöglicht.
Dies ist ein React-Projekt, das mit create-react-app erstellt und über Webpack gebündelt wird. Installieren Sie es, indem Sie den Inhalt dieses Pakets extrahieren und Folgendes verwenden:
$ npm iStarten Sie Ihren Server mit:
$ npm start Es sollte über localhost:3000 verfügbar sein.
Die Konsole erfordert einen OpenAI-API-Schlüssel ( Benutzerschlüssel oder Projektschlüssel ), der Zugriff auf die Realtime-API hat. Beim Start werden Sie zur Eingabe aufgefordert. Es wird über localStorage gespeichert und kann jederzeit über die Benutzeroberfläche geändert werden.
Um eine Sitzung zu starten, müssen Sie eine Verbindung herstellen. Hierfür ist Zugriff auf das Mikrofon erforderlich. Sie können dann zwischen den Gesprächsmodi „Manuell“ (Push-to-Talk) und „Vad“ (Sprachaktivitätserkennung) wählen und jederzeit zwischen ihnen wechseln.
Es sind zwei Funktionen aktiviert;
get_weather : Fragen Sie nach dem Wetter an einem beliebigen Ort und das Modell wird sein Bestes tun, um den Standort zu lokalisieren, ihn auf einer Karte anzuzeigen und das Wetter für diesen Standort abzurufen. Beachten Sie, dass es keinen Standortzugriff hat und die Koordinaten aus den Trainingsdaten des Modells „erraten“ werden, sodass die Genauigkeit möglicherweise nicht perfekt ist.set_memory : Sie können das Modell bitten, sich Informationen für Sie zu merken, und es speichert diese in einem JSON-Blob auf der linken Seite.Sie können das Modell jederzeit im Push-to-Talk- oder VAD-Modus frei unterbrechen.
Wenn Sie eine robustere Implementierung erstellen und mithilfe Ihres eigenen Servers mit dem Referenzclient experimentieren möchten, haben wir einen Node.js-Relay-Server integriert.
$ npm run relay Es wird automatisch auf localhost:8081 gestartet.
Sie müssen eine .env Datei mit der folgenden Konfiguration erstellen :
OPENAI_API_KEY=YOUR_API_KEY
REACT_APP_LOCAL_RELAY_SERVER_URL=http://localhost:8081
Sie müssen sowohl Ihre React-App als auch den Relay-Server für die .env. Änderungen wirksam werden. Die lokale Server-URL wird über ConsolePage.tsx geladen. Um die Verwendung des Relay-Servers jederzeit zu beenden, löschen Sie einfach die Umgebungsvariable oder setzen Sie sie auf eine leere Zeichenfolge.
/**
* 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 || '' ;Dieser Server ist nur ein einfaches Nachrichten-Relay , kann aber erweitert werden auf:
instructions ), direkt auf dem ServerSie müssen diese Funktionen selbst implementieren.
Der neueste Referenzclient und die Dokumentation sind auf GitHub unter openai/openai-realtime-api-beta verfügbar.
Sie können diesen Client selbst in jedem React- (Frontend) oder Node.js-Projekt verwenden. Die vollständige Dokumentation finden Sie im GitHub-Repository. Sie können die Anleitung hier jedoch auch als Einführung für den Einstieg verwenden.
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?` } ] ) ; Um Streaming-Audio zu senden, verwenden Sie die Methode .appendInputAudio() . Wenn Sie sich im turn_detection: 'disabled' Modus befinden, müssen Sie .generate() verwenden, um dem Modell mitzuteilen, dass es antworten soll.
// 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 ( ) ; Die Arbeit mit Werkzeugen ist einfach. Rufen Sie einfach .addTool() auf und legen Sie einen Callback als zweiten Parameter fest. Der Rückruf wird mit den Parametern für das Werkzeug ausgeführt und das Ergebnis wird automatisch an das Modell zurückgesendet.
// 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 ;
}
) ; Möglicherweise möchten Sie das Modell manuell unterbrechen, insbesondere im turn_detection: 'disabled' Modus. Dazu können wir Folgendes verwenden:
// 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 ) ; Diese Methode führt dazu, dass das Modell die Generierung sofort beendet, aber auch das abgespielte Element abschneidet, indem alle Audiodaten nach sampleCount entfernt und die Textantwort gelöscht werden. Mit dieser Methode können Sie das Modell unterbrechen und verhindern, dass es sich an alles „erinnert“, was es generiert hat und das über dem Status des Benutzers liegt.
Es gibt fünf Haupt-Client-Ereignisse für den Anwendungskontrollfluss in RealtimeClient . Beachten Sie, dass dies nur eine Übersicht über die Verwendung des Clients ist. Die vollständige Echtzeit-API-Ereignisspezifikation ist erheblich umfangreicher. Wenn Sie mehr Kontrolle benötigen, schauen Sie sich das GitHub-Repository an: 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 bietet eine einfache Verwaltung von PCM16-Audiostreams im Browser, sowohl für die Aufnahme als auch für die Wiedergabe.
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 trackVielen Dank, dass Sie sich die Realtime Console angesehen haben. Wir wünschen Ihnen viel Spaß mit der Realtime API. Besonderer Dank geht an das gesamte Realtime API-Team, das dies ermöglicht hat. Bitte zögern Sie nicht, uns zu kontaktieren, Fragen zu stellen oder Feedback zu geben, indem Sie ein Problem im Repository erstellen. Sie können uns auch direkt kontaktieren und uns Ihre Meinung mitteilen!
