OpenaiリアルタイムAPI：例を掲載したガイド

新しく導入されたOpenAIリアルタイムAPIにより、高速で低遅延のマルチモーダルエクスペリエンスをアプリケーションに統合できます。このAPIを使用すると、ユーザーと大規模な言語モデル（LLM）の間にシームレスなスピーチからスピーチの相互作用を作成できます。

このAPIは、1つの統合されたAPIで完全なソリューションを提供するため、音声駆動型エクスペリエンスを実現するための複数のモデルの必要性を排除します。レイテンシを減らすことを目指しているだけでなく、感情的なニュアンスと自然な会話の流れも保持しています。 この記事では、OpenaiリアルタイムAPIを使用して音声制御されたAIアシスタントを構築する方法を学びます。 node.jsを使用して永続的なWebSocket接続を作成し、これを端末内で使用してAPIと通信する方法を作成します。さらに、このAPIの機能を使用するReactアプリの展開についてガイドします。

WebSocketsを使用してリアルタイムAPIを使用してください

Openai APIの他のコンポーネントとは異なり、リアルタイムAPIはWebSocketを使用します。 WebSocketsは、クライアントとサーバーの間の双方向通信チャネルを確立する通信プロトコルです。 HTTPで使用される従来の要求応答モデルとは対照的に、WebSocketsは継続的なリアルタイムインタラクションをサポートしています。これにより、WebSocketは音声チャットなどのリアルタイムアプリケーションに特に適しています。

この記事では、WebSocketsがどのように機能するかをカバーし、リアルタイムAPIとの対話のいくつかの例を含めます。 

node.jsを使用するので、コンピューターにインストールされるようにする必要があります。そうでない場合は、公式Webサイトからnode.jsをダウンロードしてインストールできます。 スクリプトの初期化

続いて、上記で作成した.envファイルを使用してフォルダーを作成することをお勧めします。そのフォルダー内で、次のコマンドを実行してスクリプトを初期化します。

このコマンドが終了した後、これらのファイルはフォルダー内にある必要があります。

依存関係のインストール

2つのパッケージをインストールすることから始めます：

npm init -y && touch index.js

WS：これは、APIと対話するために必要なメインパッケージであるWebSocketパッケージです。

dotenv：.envファイルからAPIキーをロードするユーティリティパッケージ。

コマンドを実行してこれらをインストールしてください：

リアルタイムAPIへの接続

リアルタイムAPIとの接続を開始するには、API URLとヘッダーを渡す新しいWebSocketオブジェクトを作成して、必要な情報を使用して接続します。

接続が開かれたときにアクションを設定します
上記のコードは、APIへのWebソケット接続を作成しますが、まだ何もしません。
• WebSocketsを使用すると、いくつかのイベントが発生したときに実行するアクションを設定できます。オープンイベントを使用して、接続が確立されたら実行するコードを指定できます。

  イベントリスナーを追加する一般的な構文は次のとおりです。

  npm init -y && touch index.js

  交換＆lt; event＆gt;イベントの名前を含む文字列と＆lt; function＆gt;イベントが発生したときに実行される関数。 
  接続の準備ができたらテキストを表示する方法は次のとおりです。

  このコードを実行するには、コマンドを使用します

  npm install ws dotenv

  APIキーが正しく設定されている場合、端末に「接続が開いている」メッセージが表示されます。接続がまだ開いているため、スクリプトは実行され続けますので、手動で停止する必要があります。 メッセージが受信されたときにアクションを設定します
  WebSocketsを使用するときに応答できるもう1つのイベントは、メッセージイベントです。これは、サーバーからメッセージが受信されるたびにトリガーされます。受信した各メッセージを表示する関数を追加しましょう：

  // Import the web socket library
  const WebSocket = require("ws");
  // Load the .env file into memory so the code has access to the key
  const dotenv = require("dotenv");
  dotenv.config();
  function main() {
    // Connect to the API
    const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
    const ws = new WebSocket(url, {
        headers: {
            "Authorization": "Bearer " + process.env.OPENAI_API_KEY,
            "OpenAI-Beta": "realtime=v1",
        },
    });
  }
  main();

  スクリプトの実行もsession.createdイベントを表示する必要があります。セッションが初期化されたときにAPIが送信するイベント。

  その他のWebSocketイベント

  上記の上記では、オープンイベントとメッセージイベントにイベントリスナーを追加する方法を学びました。 WebSocketsは、例では使用しない2つの追加イベントをサポートしています。

  閉じるイベントは、ソケットが閉じたときにコールバックを追加するために使用できます：

  ws.on(<event>, <function>);

  エラーイベントは、エラーが発生したときにコールバックを追加するために使用されます：
  リアルタイムAPIとの通信

  WebSocketsを使用するには、イベント駆動型の方法でプログラムする必要があります。メッセージは通信チャネルで前後に送信され、これらのメッセージがいつ配信または受信されるかを制御することはできません。 

  通信を開始するコードは、handleOpen（）内に追加する必要があります。 oそれ以外の場合は、Webソケット通信チャネルが作成される前にそのコードが実行される可能性があるため、エラーが発生します。

  コード処理メッセージについても同じことが言えます。すべてのロジックは、handlemessage（）関数に移動する必要があります

  // Add inside the main() function of index.js after creating ws
  async function handleOpen() {
    console.log("Connection is opened");
  }
  ws.on("open", handleOpen);

  今後の例では、次のコードを出発点として使用します。ほとんどの変更には、handleOpen（）とhandlemessage（）の更新が含まれます。
  リアルタイムAPIを使用してテキストを送信および受信します

  node index.js

  リアルタイムAPIとの通信は、イベントを使用して発生します。 OpenAIリアルタイムドキュメントAPIには、サポートするイベントがリストされています。 Conversation.item.createイベントを使用して会話を開始します。イベントは、ドキュメントでフィールドが説明されているJSONオブジェクトとして表されます。

  会話の例です。Item.Createイベントは、「Webソケットが何であるかを1つの文で説明する」プロンプトを送信します。
  このイベントは、テキスト会話を開始したいことをAPIに伝えます。これは、コンテンツフィールドで指定され、「input_text」の種類を使用してテキストプロンプトを提供します。

  ws.send（）メソッドを使用してメッセージを送信します。 Webソケットパッケージは引数として文字列を期待するため、json.stringify（）関数を使用してJSONイベントを文字列に変換する必要があります。これらをまとめて、上記のイベントを送信する方法は次のとおりです。

  npm init -y && touch index.js

  これにより会話が開始されますが、APIをトリガーして自動的に応答を送信することはありません。応答をトリガーするために、Response.Createイベントを送信します。例を次に示します：

  npm install ws dotenv

  このイベントは、Modalities Responseパラメーターを使用してテキスト応答を要求します。指示は最も重要な部分であり、モデルに何をしたいのか、この場合はユーザーを支援するための一般的なプロンプトを説明しています。

  これら2つのイベントをhandleOpen（）関数に送信して、接続が確立されるとすぐに会話が開始されるようにします。この例からのHeandleOpen（）関数の完全な実装は次のとおりです。

  着信メッセージに関しては、この例に注目する価値のあるイベントには3つのタイプがあります。応答.text.delta、response.text.done、およびresponse.doneイベント：

  // Import the web socket library
  const WebSocket = require("ws");
  // Load the .env file into memory so the code has access to the key
  const dotenv = require("dotenv");
  dotenv.config();
  function main() {
    // Connect to the API
    const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
    const ws = new WebSocket(url, {
        headers: {
            "Authorization": "Bearer " + process.env.OPENAI_API_KEY,
            "OpenAI-Beta": "realtime=v1",
        },
    });
  }
  main();

  response.text.deltaイベントには、デルタフィールドのチャンクに分類された応答が含まれています。リアルタイムのエクスペリエンスを提供したい場合に重要です。 

  応答。イベントは、応答の終わりを示します。
• HandleMessage（）関数のスイッチステートメントを使用して、これらのイベントにスクリプトに応答する方法を指定できます。
この例では、Response.text.deltaイベントを使用して、コンソールへの応答のチャンクを印刷します。応答が完了すると、Response.text.doneイベントがトリガーされ、出力が完了したことを示す新しい行を印刷します。最後に、Response.doneイベントを受け取ったときにWebソケットを閉じます。 この例を実行するには、これらの関数を上のテンプレートコードに貼り付け、コマンドで実行します。
これは、chatgptを使用するときと同様に、端末に「Webソケットが何であるかを1つの文で説明する」プロンプトへの応答を生成します。 

テキストの例の完全なコードはこちらから入手できます。

ws.on(<event>, <function>);

リアルタイムAPIを使用して音声を送信および受信します

前の例は、テキストデータの処理方法を示しました。ただし、リアルタイムAPIへの真の関心は、リアルタイムで返信する音声アシスタントを作成することです。

オーディオデータの処理は、テキストデータを処理するよりもわずかに複雑です。この記事の主な主題から私たちをそらすため、オーディオがどのように機能するかに固有の詳細をスキップします。

最初に、2つのパッケージをインストールします：

// Add inside the main() function of index.js after creating ws
async function handleOpen() {
  console.log("Connection is opened");
}
ws.on("open", handleOpen);

npm init -y && touch index.js

• node-record-lpcm16レコードマイクからサウンドを記録して、音声プロンプトを送信できるようにします。 スピーカーは、AI音声応答を再生するために使用されます。
• また、ノードライブラリがマイクとインターフェイスしてオーディオとインターフェースするために使用するオーディオ処理のコマンドラインユーティリティであるSox（Sound Exchange）をインストールする必要があります。 brew install soxを使用して、macosまたはsudo apt install soxにLinuxにインストールします。 これらのパッケージをインストールした状態で、ユーザーのオーディオプロンプトを記録する関数StarTrecording（）をインポートします。主な主題からコースをあまりにも操作するので、機能を詳細に説明しません。 

環境を読み込んだ後、次のコードをindex.jsファイルに追加します：

startrecording（）関数はマイクからオーディオを記録し、「Enter」が押されるのを待ちます。 

次に、AIの応答を再生するために使用されるSpeaker（）を初期化することにより、Main（）関数を更新します。

それを邪魔にならないように、handleOpen（）とhandlemessage（）を実装してオーディオを処理できます。

npm install ws dotenv

handleOpen（）関数では、ユーザーのオーディオプロンプトを記録するためにStarTrecording（）関数を呼び出すだけです。また、イベントをわずかに更新する必要があります：

// Import the web socket library
const WebSocket = require("ws");
// Load the .env file into memory so the code has access to the key
const dotenv = require("dotenv");
dotenv.config();
function main() {
  // Connect to the API
  const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
  const ws = new WebSocket(url, {
      headers: {
          "Authorization": "Bearer " + process.env.OPENAI_API_KEY,
          "OpenAI-Beta": "realtime=v1",
      },
  });
}
main();

ここに更新されたHeandopen（）関数：

があります

handlemessage（）関数を実装するには、「Response.Audio.delta」イベントを変更してオーディオバッファーを更新し、新しいサウンドデルタを再生します：

1. 「Response.text.done」イベントをSwitchステートメントから削除し、「Response.done」イベントを更新してスピーカーを停止します：
handlemessage（）関数の最終実装は次のようになります。

この例を実行するには、これらの変更をテンプレートコードに適用し、コマンドで実行します。

マイクは録音を開始します。リクエストを言って、「Enter」を押して送信できます。次に、AIの応答はスピーカーで再生されます（マイクがミュートされておらず、スピーカーがボリュームを持っていることを確認してください）。

ws.on(<event>, <function>);

オーディオ例の完全なコードはこちらから入手できます。

関数呼び出し

// Add inside the main() function of index.js after creating ws
async function handleOpen() {
  console.log("Connection is opened");
}
ws.on("open", handleOpen);

Openai APIの優れた機能の1つは、関数呼び出しを実行する機能です。アシスタントに関数を追加でき、それらの関数のいずれかが答えを提供するのに役立つことを検出した場合、特定の関数を要求するイベントを送信します。

OpenAIドキュメントは、関数呼び出しのライフサイクルを説明する次の図を提供します。

出典：Openai

図から、クライアントはLLMが呼び出すことができる機能の定義をクライアントに提供する必要があることがわかります。また、関数の実行はクライアント側で発生します。 AIは、関数とその引数を要求するイベントを送信します。次に、結果を送り返す責任があります。

2つの数値を追加する関数をアシスタントに権限を与えましょう。上記のオーディオ例を拡張して、この例を作成します。

利用可能な機能を指定するには、LLMにツールのリストを提供する必要があります。各ツールは、関数に関する情報を指定するJSONオブジェクトです。合計関数のツールを定義する方法は次のとおりです。

オブジェクト構造について説明しましょう：

npm init -y && touch index.js

このタイプは、関数を定義していることを指定します

この名前は、関数を識別するために使用されます。これは、LLMがどの機能を呼び出すかを伝えるために使用するものです。

説明は、LLMがこの関数を使用する時期を識別するために使用されます。
• パラメーターは、関数の引数を指定するために使用されます。この場合、aとb。
という名前の2つの数字
次のステップは、コードの関数を定義することです。 Key Calculate_Sumを使用した辞書を使用して、関数呼び出しイベントに応答するときに適切な関数を簡単に呼び出すことができます。
APIは、上記のパラメーターで定義された同じ構造を持つ辞書として関数引数を提供します。この場合、3と5を追加すると、辞書は{“ a”：3、“ b "：5}。
• sumtoolおよび関数定数は、インポート後、main（）関数の前に、index.jsの上部に追加できます。

次に、Response.Createイベントを更新して、LLMにSumToolsが利用可能であることを知らせます。これは、ツールとtool_choiceフィールドを応答に追加することによって行われます。

LLMが関数を呼び出したいと判断した場合、response.function_call_arguments.done eventを排出します。

で応答する必要があります

npm install ws dotenv

関数情報を取得し、関数を呼び出します。

関数呼び出しの結果を送信

応答を要求します。

// Import the web socket library
const WebSocket = require("ws");
// Load the .env file into memory so the code has access to the key
const dotenv = require("dotenv");
dotenv.config();
function main() {
  // Connect to the API
  const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
  const ws = new WebSocket(url, {
      headers: {
          "Authorization": "Bearer " + process.env.OPENAI_API_KEY,
          "OpenAI-Beta": "realtime=v1",
      },
  });
}
main();

これを処理し、次のケースをhanldemessage（）関数内のスイッチステートメントに追加することで処理します。

スクリプトを実行し、2つの番号を追加した結果を要求した場合、モデルは関数を呼び出して結果を提供する必要があります。
1. この関数は比較的単純ですが、関数はクライアントによって実行されるため、何でもかまいません。次のセクションでは、より複雑な関数の2つの例を示します。 この例の完全なコードは、こちらから入手できます。

今日のMlopsスキルを構築してください

ゼロから始めて、キャリア構築のMlopsスキルを獲得します。

Openaiチームは、リアルタイムAPIを紹介するデモReactアプリを提供します。ここでは、セットアップ方法を学び、どのように機能するかを探ります。これは、より複雑なアプリを構築するための素晴らしい出発点です。

アプリのセットアップ
反応する知識は、それを稼働させて実行するために必要ありません。ただし、Reactに精通して変更または拡張する必要があります。

彼らのアプリはこのリポジトリでホストされています。セットアップするには、次のgitコマンドを使用してクローニングから始めます。

代わりに、GitHubインターフェイスから手動でダウンロードすることもできます。

アプリをインストールするには、次のNPM（ノードパッケージ管理）コマンドを使用します。
インストールが完了したら、プロジェクトのルートフォルダーに.envという名前のファイルを作成し、次のコンテンツを貼り付けます。

npm init -y && touch index.js

lt＆lt; openai_api_key＆gt; Openai APIキー付き

アプリケーションを実行する準備ができている必要があります。 2つの部分で構成されています：

npm install ws dotenv

アプリケーションのWebユーザーインターフェイスで構成されるReact Frontend。

リレーサーバーは、フロントエンドとOpenaI APIの間の仲介者として使用されます。 

// Import the web socket library
const WebSocket = require("ws");
// Load the .env file into memory so the code has access to the key
const dotenv = require("dotenv");
dotenv.config();
function main() {
  // Connect to the API
  const url = "wss://api.openai.com/v1/realtime?model=gpt-4o-realtime-preview-2024-10-01";
  const ws = new WebSocket(url, {
      headers: {
          "Authorization": "Bearer " + process.env.OPENAI_API_KEY,
          "OpenAI-Beta": "realtime=v1",
      },
  });
}
main();

フロントエンドとOpenaI APIの間にリレーサーバーを実装する主な目的は、APIキーを安全に保存することです。 APIとの対話は、このキーなしでは不可能です
ただし、キーがフロントエンドに保存されている場合、任意のユーザーがアクセスできます。したがって、ソリューションには、キーを安全に保存し、APIとフロントエンドの間のデータ交換を促進するサーバーのセットアップが含まれます。この特定のシナリオでは、アプリケーションはローカルでのみ実行されるため、セキュリティの懸念は最小限です。 
アプリケーションを起動するには、リレーサーバーとフロントエンドの両方を開始する必要があります。リレーサーバーを起動するには、次のコマンドを使用します
react frontendを起動するには、コマンドを使用します：

ロードが終了した後、アプリケーションが実行されている状態でブラウザにタブが開きます。

アプリを使用して

アプリの使用を開始する前に、コンピューターがミュート上にないことを確認し、マイクにアプリケーションにアクセスできるようにしてください。

「接続」ボタンをクリックすることから始めます。これにより、リアルタイムAPIに「Hello」メッセージが送信され、ご挨拶が届きます。

ws.on(<event>, <function>);

// Add inside the main() function of index.js after creating ws
async function handleOpen() {
  console.log("Connection is opened");
}
ws.on("open", handleOpen);

接続が確立されると、新しいボタンが中央に表示され、AIアシスタントと話すことができます。 



それを使用するには、ボタンをリリースせずに押して話します。ボタンがリリースされるとメッセージが送信されます。

アプリケーションには、ボタンを押す必要のないVAD（音声アクティビティ検出）モードもあります。このモードでは、アプリケーションは継続的に聞き、アシスタントと積極的に会話することができます。それを使用するには、「vad」ボタンを押して話します。



関数

学んだように、リアルタイムAPIは、AIが特定の関数を実行できるようにする機能を提供します。このデモンストレーションには、2つの機能が紹介されています。1つは、特定の場所での天気予報について問い合わせるための1つ、もう1つはアシスタントをパーソナライズするためのメモリアイテムを追加するためです。 

「ニューヨークの明日の天気はどうですか？」などの質問をすることで、これらの機能を体験してください。そして、「私の好きな色は青」のような好みを述べています。アシスタントはこれらのクエリに対する口頭での応答を提供し、情報もアプリケーションの右側に表示されます。



私が気象報告書を要求したことがあり、その回答はその瞬間にそれにアクセスできないことを示していました。ただし、情報は一貫して右側に表示されました。デモアプリであるため、完全に機能的な製品になることを意図したものではなく、APIの機能を紹介するのに役立ちます。 クライアントを理解する

このセクションでは、アプリケーションの実装の詳細の一部をカバーするため、Reactの高レベルの理解が続く必要があります。

consolepage.tsxファイルを検討します。これは、アプリケーションロジックのほとんどが定義されている場所です。デモアプリは、node.jsコマンドラインアプリの例で行ったように、生のWebSocketsを使用していません。彼らは、APIとの対話を支援するリアルタイムクライアントを構築しました。これはファイルの上部にインポートされるものです：

APIとの統合は、このuseefect（）呼び出しで定義されています。この使用effect（）内のコードは、コンソールページが最初にレンダリングされたときに実行されます。 node.jsスクリプトと同様に、APIイベントへの応答方法の概要を説明します。主な違いは、RealtimeClientクライアントラッパーの使用です。

ツールの定義

npm init -y && touch index.js

realtimeclient.addtool（）関数は、ツールを定義するために使用されます。 2つのパラメーターが必要です

ツール定義jsonオブジェクト。

実行される関数

• このアプローチは、クライアントがイベントを処理し、機能の呼び出しを自動化するために既に装備されているため、ツールの統合を簡素化します。メモリツールはここで定義されていますが、Weather Toolの定義はここで定義されています。たとえば、

  以前に定義された合計ツールを追加するには、次のことを行うことができます。

  npm init -y && touch index.js

  アプリケーションはTypeScriptを利用しているため、関数定義内のタイプの指定が必要であることに注意してください。 イベントを聴く

  イベントを聞くには、realtimeclient.on（）関数が使用されます。 2つのパラメーターを受け入れます：

  イベントの名前。

  実行されるコールバック関数。
  2. このアプローチは、以前に使用されたWebSocket.ON（）関数に似ています。ただし、異なるイベントセットを実装します。 GitHubページには、サポートされているイベントのリストが提供されています この特定の例では、次のイベントが使用されます
  ここでのイベントイベントは、すべてのイベントのログを保持するために使用されます。

  ここでのエラーイベントは、デバッグのためにエラーをコンソールにログに記録します。

  会話。途切れたイベントは、変換が中断されたときにリクエストをキャンセルするために使用されます。

  最後に、Conversation.updatedイベントは、APIから新しいチャックが入ったときに新しいオーディオをオーディオストリームに追加するために使用されます。
  • 結論
  このチュートリアルでは、OpenAIリアルタイムAPIと、リアルタイム通信のためにWebSocketを使用する方法を調査しました。 Node.js環境のセットアップをカバーして、APIと対話し、テキストとオーディオメッセージの送信と受信、および機能の強化を必要とする関数の実装最新のOpenai開発ツールの詳細については、これらのチュートリアルをお勧めします。
• Openaiモデルの蒸留：例を備えたガイド
• gpt-4oビジョン微調整：例を備えたガイド

以上がOpenaiリアルタイムAPI：例を掲載したガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。