OpenAI 公式の「Realtime API Agents Demo」の試してみた時のメモ

↓このポストで書いている『OpenAI 公式の「Realtime API Agents Demo」のお試し』に関するメモ的な記事です。

https://x.com/youtoy/status/1880963777631596732

## 試した流れ
試したものは、公式が公開している下記です。

●openai/openai-realtime-agents: This is a simple demonstration of more advanced, agentic patterns built on top of the Realtime API.
　https://github.com/openai/openai-realtime-agents

### セットアップ
セットアップ手順は、以下に書かれたものをそのままという感じです。

![2025-01-19_22-16-14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d17f8eb0-33b7-cae5-3bd5-895a55630dc0.jpeg)

以下に、自分の環境（Mac）で入力していったコマンドを掲載します。

```zsh:リポジトリのクローン
git clone https://github.com/openai/openai-realtime-agents.git
```

```zsh:パッケージのインストール
cd openai-realtime-agents
npm i
```

```zsh:APIキーの設定と処理の実行
export OPENAI_API_KEY=【自分のOpenAIのAPIキー】
npm run dev
```

※ 環境変数で APIキーを設定する部分は、今回は一時的に変数の設定をする形にしています

### サンプルへのアクセス
上記の流れでセットアップをした結果、以下の画像の下部に出力されているように 3000番ポートでローカルサーバーが立ち上がりました。
（ローカルネットワークの別デバイスからクライアントが接続する構成も想定されているっぽく、ローカルIPアドレスも表示されていました）

![2025-01-19_22-20-05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/81039104-69fe-9fac-9d41-e7771d59e3a4.jpeg)

この後、上記を実行しているのと同じ PC内のブラウザから `http://localhost:3000` にアクセスしました

#### 最初のお試し
最初は、左下の部分にテキスト入力をして試しました。

![2025-01-19_22-27-57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/da4d9a9e-4646-df97-1d67-a17706c29466.jpeg)

日本語を入力してみて問題なくやりとりができたので、以後のやりとりもこちらは日本語を用いました。

![2025-01-19_22-34-01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2dafe2f6-a105-7765-2274-9a65c3e97887.jpeg)

#### Push to talk で試す
最初のお試しの際は「Push to talk」がデフォルトで無効になっていたと思うのですが、下にある「Push to talk の設定用のチェックボックス」をオンにして、Push to talk を有効化しました。

それで音声によるやりとりを試した結果が冒頭にも掲載していたものです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/A8F6nYlW3iw?si=NUt2CPhGkWcKmkFG" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

右上のあたりやログの表示などを見てみると、開始時は「Agent: greeter」で始まっていたのが、こちらが最初の質問に回答した後に「Agent: haiku」に切り替わったりしている等の挙動も確認できました。
（画面内でも「function call: transferAgents」という表示が出ていたりしました）

## API利用料のメモ
動画に撮った内容と、その前後で試したものが含まれたものになると思われますが、API利用に関する料金の情報をメモしてみます。

以下のページから確認できるものです。

●Usage: Cost - OpenAI API
　https://platform.openai.com/settings/organization/usage

以下の 2つの画像が、それぞれ総額と内訳になるかと思います。

![2025-01-19_22-55-33.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/21917dc8-83ba-e439-1792-5afd622efb87.jpeg)

![2025-01-19_22-58-10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c271bef8-14e3-3f62-13ad-b28e6d0bb020.jpeg)

テキストで書き出すと、こんな感じです。

> 【総額】
Spend by Project： $0.37
>
>【内訳】
realtime api | gpt-4o-realtime-preview-2024-12-17 audio, input
$0.10
realtime api | gpt-4o-realtime-preview-2024-12-17 audio, output
$0.22
realtime api | gpt-4o-realtime-preview-2024-12-17 text, input
$0.01
realtime api | gpt-4o-realtime-preview-2024-12-17 text, cached input
$0.01
realtime api | gpt-4o-realtime-preview-2024-12-17 text, output
$0.02

### Pricing のページ
上記の計算のもとになる、公式のページの該当箇所のメモです。

●Pricing | OpenAI
　https://openai.com/api/pricing/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2c80cb71-419e-4da8-6985-42fbcfef9efd.png)

#### mini の利用料
今回、デフォルトのままで使うと「gpt-4o-realtime-preview-2024-12-17」が利用されたようですが、費用的に大きく差がある以下の「gpt-4o-mini-realtime-preview-2024-12-17」を使った時に対話内容がどうなるかは、気になったところでした。

![2025-01-19_23-25-41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ba7e95d8-0234-db8b-449e-8a3005d90ff5.jpeg)