// 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();

があります

handlemessage（）関數(shù)を?qū)g裝するには、「Response.Audio.delta」イベントを変更してオーディオバッファーを更新し、新しいサウンドデルタを再生します：

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

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ドキュメントは、関數(shù)呼び出しのライフサイクルを説明する次の図を提供します。

出典：Openai

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

オブジェクト構(gòu)造について説明しましょう：

npm init -y && touch index.js

このタイプは、関數(shù)を定義していることを指定します

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

LLMが関數(shù)を呼び出したいと判斷した場(chǎng)合、response.function_call_arguments.done eventを排出します。

npm install ws dotenv

関數(shù)情報(bào)を取得し、関數(shù)を呼び出します。

関數(shù)呼び出しの結(jié)果を送信

応答を要求します。

// 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（）関數(shù)內(nèi)のスイッチステートメントに追加することで処理します。

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

今日のMlopsスキルを構(gòu)築してください

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

Openaiチームは、リアルタイムAPIを紹介するデモReactアプリを提供します。ここでは、セットアップ方法を?qū)Wび、どのように機(jī)能するかを探ります。これは、より複雑なアプリを構(gòu)築するための素晴らしい出発點(diǎn)です。

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

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

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

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

npm init -y && touch index.js

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

アプリケーションを?qū)g行する準(zhǔn)備ができている必要があります。 2つの部分で構(gòu)成されています：

npm install ws dotenv

アプリケーションのWebユーザーインターフェイスで構(gòu)成される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の間にリレーサーバーを?qū)g裝する主な目的は、APIキーを安全に保存することです。 APIとの対話は、このキーなしでは不可能です
ただし、キーがフロントエンドに保存されている場(chǎng)合、任意のユーザーがアクセスできます。したがって、ソリューションには、キーを安全に保存し、APIとフロントエンドの間のデータ交換を促進(jìn)するサーバーのセットアップが含まれます。この特定のシナリオでは、アプリケーションはローカルでのみ実行されるため、セキュリティの懸念は最小限です。?
アプリケーションを起動(dòng)するには、リレーサーバーとフロントエンドの両方を開始する必要があります。リレーサーバーを起動(dòng)するには、次のコマンドを使用します
react frontendを起動(dòng)するには、コマンドを使用します：

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

アプリを使用して

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

「接続」ボタンをクリックすることから始めます。これにより、リアルタイム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（音聲アクティビティ検出）モードもあります。このモードでは、アプリケーションは継続的に聞き、アシスタントと積極的に會(huì)話することができます。それを使用するには、「vad」ボタンを押して話します。



関數(shù)

學(xué)んだように、リアルタイムAPIは、AIが特定の関數(shù)を?qū)g行できるようにする機(jī)能を提供します。このデモンストレーションには、2つの機(jī)能が紹介されています。1つは、特定の場(chǎng)所での天気予報(bào)について問(wèn)い合わせるための1つ、もう1つはアシスタントをパーソナライズするためのメモリアイテムを追加するためです。?

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



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

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

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

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

ツールの定義

npm init -y && touch index.js

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

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

実行される関數(shù)

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

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

  npm init -y && touch index.js

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

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

  イベントの名前。

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

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

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

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