Azure OpenAI Service で GPT-4o audio が使えるようになったので試してみた

# この記事は何？
Azure OpenAI Service で GPT-4o audio のモデルが利用可能になったので、サンプルアプリの設定を行って音声でやり取りを行ってみた際の手順のメモです。

# GPT-4o audio とは？
GPT-4o audio のモデル (現状使えるのは GPT-4o-realtime-preview）は、GPT-4o モデル ファミリの一部であり、低遅延の「音声入力、音声出力」会話インタラクションをサポートします。

つまり、今まで音声をインターフェイスにして言語モデルと対話を行う際には、Speech to Text を行い文字起こしを行った結果を言語モデルに入力して、その出力をまた Text to Speech で行わなければいけなかったところ、今回のモデルは、音声を直接のインターフェイスにして言語モデルと対話を行えるようなものになるわけです。

音声を直接のインターフェイスとしてやり取りが出来るため、リアルタイムで低遅延の会話インタラクションに期待が出来ます。音声サポートエージェントや、音声アシスタント、音声翻訳など、ユーザーに素早く応答を音声で返す必要があるようなユースケースに使い道があると思います。

# Azure OpenAI Service で試してみるには？
## Azure 無料評価版
Azure の契約をまだお持ちでない方は、以下のリンクから Azure の無料評価版の利用開始申請を行ってください！

https://azure.microsoft.com/ja-jp/free/search/

## サポートしているリージョン
現状、当該モデルは ```East US 2``` リージョンならびに、```Sweden Central``` リージョンで利用可能です。[Azure Portal](https://portal.azure.com/) から、先述の 2 つのリージョンのうちのいずれかに、Azure OpenAI Service のリソースをデプロイしてください。

https://learn.microsoft.com/ja-jp/azure/ai-services/openai/how-to/create-resource?pivots=web-portal

リソースグループ名、ならびにインスタンスの名前は、任意の名前を設定すれば OK です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199379/9addb447-7549-d08f-8df3-3ddba3c44d86.png)

## モデルのデプロイ
Azure OpenAI Service のデプロイが完了したら、[Azure OpenAI Studio](https://oai.azure.com/) に移動して、モデルのデプロイを行います。

下記スクリーンショットの左ペインの「デプロイ」を開き、右ペインから「モデルのデプロイ」→「基本モデルをデプロイする」でデプロイを進めることが可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199379/db3618c8-04df-150d-9bb2-46079dc09672.png)

次の、モデルの選択画面では "gpt-4o-realtime-preview" を選択し、「確認」ボタンを押して進めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199379/9f12db87-f4e1-3e46-43c6-b660a082da83.png)

次の画面でデプロイの最終的な設定を行います。初めて GPT-4o audio を使う方は、既定で入力されたままの値で OK なはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199379/5c38ee30-1056-b9cf-260c-e67f50349b8e.png)

:::note info
ここで「デプロイ名」に入力した内容は後でサンプルを動かすときに使いますので、どこかにメモしておきましょう！
:::

## API アクセスに必要な情報を入手する
API アクセスを行うためには、以下の 3 つの情報が必要です。

- API Endpoint
- API Key
- Deployment Name

Deployment Name は先ほどモデルをデプロイしたときにつけた名前なので、それを使います。

その他 2 つの項目については、Azure OpenAI Studio の上にある、Azure OpenAI Services のリソース名をクリックして表示される画面から確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199379/368250b6-a2f3-4bda-ec38-3a2c096a9e21.png)

これらの情報をメモ出来たら、サンプルを動かすために必要なクラウド側のリソース準備は完了です！

## サンプルコードの動作環境
Node.js が動く環境が必要です。
まずは Node.js の最新版をダウンロードしてインストールし、一旦マシンを再起動しましょう。

https://nodejs.org/en/download/prebuilt-installer

## サンプルコードの入手
以下のリポジトリに、一番簡単に使えるサンプルが入っています。
```Code``` ボタンから Zip でダウンロードするなり、git clone するなり、好きな方法で入手してください。

https://github.com/Azure-Samples/aoai-realtime-audio-sdk/tree/main

## サンプルコードの動かし方
ここからは、コマンドラインで作業を進めます。
（Windows 環境でしたら ```Windows キー + R キー``` を入力して開いたウィンドウで ```cmd``` と入力して Enter すれば、コマンドプロンプトが開きます）

任意のコンソールを開いて、ダウンロードと展開が済んだサンプルコードのルートフォルダーまで移動してください。

:::note info
ここから先、D:\aoai-realtime-audio-sdk にサンプルコードが展開されているものと仮定して進めます。
パスが違う方は、適宜読み替えてください。
:::

## Preview 版ライブラリのダウンロード
以下のコマンドで javascript 版サンプルのフォルダに移動します。

```cmd
cd ./javascript/samples
```

その後、Windows 環境でしたら ```download-pkg.ps1``` を実行、Linux 環境や Mac 環境なら ```download-pkg.sh``` を実行して、必要なパッケージをダウンロードします。

## サンプルアプリの起動
いよいよ、サンプルアプリがあるフォルダに移動してサンプルを起動します。

```cmd
cd ./web
```

まずは node.js のパッケージを npm でインストールします。

```cmd
npm install
```

次に、ローカルの開発サーバーでサンプルアプリを起動します。

```cmd
npm run dev
```

## サンプルアプリを試す！
問題なくサンプルアプリが起動している場合には、ブラウザーから以下の URL にアクセスすることで、サンプルアプリの UI を開けます。

http://localhost:5173/

開いた画面の右側に以下のスクリーンショットのような設定 UI が出ていると思いますので、今までにメモしてきた内容を入力しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199379/902194ab-ab2d-f4da-989c-c28f7ca48832.png)

| UI 上の項目 | 入力する内容 |
|:-:|:-:|
| Endpoint  | Azure OpenAI のエンドポイント URL <br>( https://リソース名.openai.azure.com/ ）  |
| Azure OpenAI のチェック | チェックする |
| API Key | Azure OpenAI の API Key  |
| Deployment | デプロイメント名 <br> （デフォルトなら ```gpt-4o-realtime-preview``` ）|
| System Message  | 任意で入力。<br> （例 : あなたは、ユーザーの悩みを聞くカウンセリングエージェントです。ユーザーの悩みを聞いて、前向きな答えを返しましょう！）|
| Voice | 任意 |

入力が終わったら、```Record``` ボタンを押して、会話を楽しんでみましょう！

::: note warn
まだ、当該 API は Preview 版のため、やり取りが不自然な部分や、うまくいかない部分もあるかもしれません。気長に GA されるのを待ちつつ、いまのところどんなことが出来るのか、試してみましょう！
:::

上手くやり取りが出来ているとしたら、認識結果や応答についての内容が画面に出力されてくると思います。ただ、この内容、必ずしも正確に発話はされていないようで、デバッグ出力は参考程度、とみて、実際に話されている内容を聞いた方が良さそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199379/eab3afb5-b66f-be1e-d6da-25c4ab9eb16f.png)

# まとめ
今日ご紹介した手順で、とても簡単に Azure OpenAI の GPT-4o audio をアプリケーションから呼び出すための実装の理解や、簡単な実験が行えます。是非まずは試してみて、そしてサンプルコードの読み込みも行ってみてください！

大川個人の考えとしては、旧来の音声認識・音声合成を使ったエージェントでは苦手だった、エージェント側発話途中での人間の割り込みや、深い感情表現について、かなり今後の発展に期待を持てるような挙動を示していると思います。テストをしていくときに、エージェント側の感情を引き出すような問いかけをしてみたり、途中で割り込んだりして、人間相手の対話に近いインタラクションが得られる未来は近いことを、体感いただけたら良いかなと思います。

# 参考文献
https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/audio-real-time

https://learn.microsoft.com/en-us/azure/ai-services/openai/concepts/models#gpt-4o-audio

https://github.com/Azure-Samples/aoai-realtime-audio-sdk