GPT-4o Realtime Audio がリリースされ、サンプルアプリが公開されており、使い方について可能な限り、”初心者向け” に記載していきます。
せっかくなので、説明文や解説の70％以上は、GPT4o に作文してもらいました。
この記事を読むことで、GPT-4o Realtime Audio が何なのか、どういうユースケースがあるのかを理解し、サンプルアプリをデプロイして使ってみるところまでをゴールとして記載していきます。
長文となりますが、妥協なくゴールまでお付き合いください。
また、前提として、ユーザーが一番多い Windows を想定した流れとなっています。
目次
大きくこれらの順に記載していきますので、知っている部分は流し読みして必要なところを読んで頂ければと思います。
- GPT-4o Realtime Audio とは？どんなユースケースが？
- 事前準備（モデルのデプロイなど）
- まず試すには？（Azure Portal からGPT-4o Realtime Audio を試す）
- サンプルアプリで動作を見てみる
出来上がりイメージ
GPT-4o Realtime Audio とは？
GPT-4o Realtime Audioは、OpenAIが開発した高度な音声対話システムで、リアルタイムでの音声認識と自然言語処理を可能にするものです。これにより、ユーザーとの対話がより自然でスムーズに行えるようになりました。
特徴
リアルタイム処理:
GPT-4o Realtime Audioは、ユーザーの発話を瞬時に認識し、リアルタイムで応答を生成します。この高速処理により、対話が途切れることなく進行します。
高度な自然言語理解:
GPT-4の強力な自然言語処理能力を活用し、複雑な質問や要求にも対応可能。文脈を理解し、適切な回答を提供します。
高品質な音声合成:
応答は自然な音声で生成され、人間の声と区別がつかないほどのクオリティを実現しています。これにより、ユーザーは違和感なく対話を続けることができます。
多言語対応:
GPT-4o Realtime Audioは、複数の言語に対応しており、グローバルなユーザーにも対応可能です。言語の壁を超えて、様々な地域のユーザーと対話することができます。
利用シーン（ユースケース：想定）
カスタマーサポート:
企業のカスタマーサポートにおいて、GPT-4o Realtime Audioは24時間体制での顧客対応を可能にします。問い合わせに対して迅速かつ適切に対応し、顧客満足度を向上させます。
教育:
教育分野では、リアルタイムでの質疑応答や対話型の学習サポートが可能です。学生の疑問に瞬時に答えることができ、学習効率を高めます。
ヘルスケア:
医療現場でもGPT-4o Realtime Audioは活躍します。患者との対話を通じて症状を把握し、必要な医療情報を提供することで、診療の質を向上させます。
Azure OpenAI Service を無料で試すには
Azure アカウントの作成:
まず、Azure アカウントを持っていない場合は、
公式サイト https://azure.microsoft.com/ で新しいアカウントを作成します。
新規ユーザーには、無料クレジット（$200相当）と12か月間の無料サービスが提供されます。
このクレジットを利用して、Azure OpenAI Service を試すことができます。
無料クレジットの管理:
ポイントとして、無料クレジットには使用期限があります。
クレジットの残高や使用状況を定期的に確認し、計画的に利用することが重要です。
事前準備（モデルのデプロイなど）
Azure Portal にログイン
アカウントを作成後、Azure Portalにログインします。
※画像省略
Azure OpenAI Service のリソース作成
Azure Portal の検索ボックスから 「Azure OpenAI」を入力し、検索に表示された Azure OpenAI をクリックします。
[作成]ボタンをクリックします。
サブスクリプション:
使用するサブスクリプションを選択します。いわゆる課金先になります。
リソースグループ:
新規で作成して、任意の名前をつけます。
リソースグループの設定が影響してこの手順が進めれないことはないので、ご安心ください。リソースグループとは、関連するリソースを一つのグループにまとめて管理することができます。これにより、プロジェクトや環境（開発、テスト、本番など）ごとにリソースを整理しやすくなる、などの利点があります。
リージョン:
Azure OpenAI Service を配置するリージョンを選択します。
Azure OpenAI Serviceは、現在 "East US 2" もしくは、"Sweden Central" で利用可能！他のリージョンを選ぶと使えないのでご注意ください。
名前:
任意の名前を入力してください。
デフォルト値のまま 「次へ」をクリックしましょう。
Tags もデフォルト値のまま 「次へ」をクリックしましょう。
（管理するときに便利ですが、今は不要でしょう）
[作成]をクリックして、デプロイします。
[Azure OpenAI Studio に移動する] をクリックします。
左ペインから [モデル カタログ] をクリックし、[GPT-4o-realtime-preview] をクリックします。
次に [デプロイ] をクリックします。
モデルのデプロイ確認画面です。
既定の値のまま [デプロイ] をクリックします。
※この画面で 制限がかかっているようなメッセージが表示される場合は、クォータの要求が必要な可能性があります。会社用のアカウントで実施している際にエラーが発生する場合は、サブスクリプションの管理者の方にご確認頂くのがよいです。
クォータの要求は Azure OpenAI Studio の左ペインの [クォータ] をクリックし、[クォータの要求]ボタンから申請することができます。
無事デプロイが完了しました。
やっと下準備が完了です。
まず試すには？（Azure Portal からGPT-4o Realtime Audio を試す）
Azure OpenAI Studio の 左ペインから [リアルタイム オーディオ] をクリックします。
[音声を選択する] から 声の種類を選びます。（もちろんデフォルトのままでもOK）
[聞き取り開始]ボタンをクリックすると、ブラウザからマイクの使用許可するためのダイアログが表示されるので、許可してください。
接続しているマイク・スピーカーからAIとの会話をお楽しみください！！！
サンプルアプリで動作を見ていく
皆様に GPT-4o Realtime Audio を利用したアプリケーション開発をお試し頂きたいため、Microsoft では GitHub にサンプルアプリケーションのコードを公開しています。
一方で、GitHubを使ったことない人にとっては取っ付きづらいと思うので、Step by Step で解説していきます。
どのようなアプリケーションなのか？
リアルタイム音声対話を実現するためのサンプルアプリケーションです。
このリポジトリには、音声認識、音声合成、および自然言語処理（NLP）を組み合わせた高度な対話システムの実装例が含まれています。開発者は、このSDKを利用して、コールセンター、バーチャルアシスタント、教育アプリケーション、アクセシビリティ向上など、様々な音声インターフェースを迅速に構築できます。このリポジトリには、詳細なドキュメント、セットアップ手順、コード例が含まれており、開発者は簡単にプロジェクトを開始し、カスタマイズ可能な音声対話ソリューションを作成できます。
実際の画面はこちら
サンプルアプリが動作する環境を作る
このアプリは主に TypeScript で記述されています。
サンプルコードの実行環境として、Node.js の最新版をインストールします。
aoai-realtime-audio-sdk/
├── src/
│ ├── index.ts
│ ├── audio/
│ ├── services/
│ └── ...
└── ...
現時点の最新は 20.18.0 でした。全て既定値でインストールを実施します。
以下のレポジトリに、サンプルが入っています。
まずは以下のページを開きましょう。
緑色の [<> Code ] ボタンをクリックし、[Download ZIP] をクリックして、ソースコードを入手します。
私のPCがCドライブしかないため、Cドライブ直下にダウンロードしたZipファイルを展開します。
サンプルアプリを動かしていく
キーボードのWindows キーを押し、Windows PowerShell を [管理者として実行する] をクリックします。
Cドライブに cd コマンドで移動します。
cd C:\aoai-realtime-audio-sdk-main\javascript\samples
今回は Windows 環境想定なので download-pkg.ps1 を実行します。
警告が表示されても、動じず [R] を押して実行します。
必要なパッケージをダウンロードしてくれています。
./download-pkg.ps1
サンプルアプリケーションを起動していく
下準備が整ったので、アプリケーションを起動していきます。
１つ下の階層のwebフォルダに移動します。
cd web
node.js のパッケージを npmコマンドでインストールします。
私の環境は一度作成した環境で再度作成しているので、もしかすると少し異なる結果になっているかもしれませんが、おそらく同じ画面になるはずです。
npm install
※npmとは、NodePackageManagerの略でNode.jsのパッケージを管理するツール
Node.jsをインストールすると、同時にnpmもインストールされます。
ローカルの開発サーバーでサンプルアプリを起動します。
※npm run devコマンドは、プロジェクトを開発モードで実行するためのものです。
npm run dev
以下の画面が表示されます。
ブラウザで、以下のURLにアクセスします。
http://localhost:5173/
Webアプリが起動してきました。（少しワクワクしてくるところですね）
ここからは、画面右に表示されている項目を順番に埋めていく作業になります。
具体的には、Azure OpenAI Service の 接続先、認証キーを入力していくことになります。
Azure OpenAI Studio から必要な情報をメモする
もう1度 Azure OpenAI Studio を開き、右上の 下矢印のアイコンをクリックします。
[エンドポイント] と [キー] をコピーして、メモ帳などに保存します。
以下の内容を入力します。
- EndPoint ：メモしたURLを貼り付ける
- Azure OpenAI：チェックをいれる
- API Key：メモしたKeyを貼り付ける
- Deployment：gpt-4o-realtime-preview
※デフォルト値 - System Message：（任意で入力）
例）あなたは晩ごはんを作るときに、何を作ったら良いかアドバイスする人です。
材料から作れそうな晩ごはんをアドバイスしてあげてください。
アドバイスは日本語でお願いします。 - Voice：声が違うだけなので、どれでも可
[Record] ボタンをクリックします！
マイクの使用許可が出ますので、許可しましょう。
私がヘッドセットで、「今日の晩御飯、迷ってるんだけれども、教えてくれない?」と話しかけると、即座に返答してくれました。
話しかけた内容や、返答された内容が画面に表示されるようにもなっています。
※まだ、Preview 版であることやサンプルアプリであるため、不自然な部分や画面上のテキスト表示がイマイチなことが多々あります。Preview からGA（正式リリース）される際にはいろいろ良くなっているとは思うので、こういうものなんだな、という理解頂くのがよいです。
まとめと感想
ここ10年くらい開発を全くしていない私でもサンプルコードを動かすことができたので、AI と会話を楽しんでみよう、という簡単な気持ちでお試しいただければと思い、本記事を作りました。
玄人だけが使えるAIは意味がなく、知識がない人でもAIに触れていけるように今後も初心者の方にもわかるようなコンテンツをご紹介していくつもりです。
Tomoya@MS
絡んでもらえると喜びます。
X:paddle_tomoya
LinkedIn:tomoya-n
補足：
本記事は以下の私のサイトから移植したものになります。筆者は同じです。
Discussion