こんにちは．音声対話システムオタクの西村良太（@sayonari）です．
ChatGPT君に，ChatGPT音声対話システム（あいづちも打てる！）を作ってもらった話です．
ちなみに，このQiita記事のタイトルも，ChatGPTに考えてもらいました(〃´ω｀〃)
最終結果
いきなり結果を示します．以下の動画を再生してみてください．
役立つ人
- ChatGPTとの音声対話システムを使ってみたい人
- サーバレスで，ブラウザからJavaScriptだけでChatGPTにアクセスしたい人
あらすじ
- ChatGPT Proアカウント（課金勢）になったので，色々遊んでいた．
- せっかくなので，ChatGPTに音声対話システムを作らせようと思った．
- みんなが簡単に試せるもの（Google Chromeで動く）
- ライブ感のある対話ができるもの（あいづちを入れる）
- できればChatGPTで応答を返したいなー
- できたので，githubで公開！github.ioでデモも動く！
環境
- ChatGPT： gpt-3.5-turbo
- ブラウザ： Google Chrome
- 音声認識： Chrome上のWebSpeechAPI
- 音声合成： Chrome上のWebSpeechAPI
- VTuber： shriminさん（twitch）
ChatGPT音声対話システム構築
なんでGPT4じゃないの？
最初，GPT4でやろうとしてたんですが，応答がおそすぎて嫌になったので，GPT-3.5-turboで動かしてみました．そしたらそれで事足りたので，そのまま最後までやりきりました．
第１弾：リアルタイム音声認識＆音量監視
最初に，ChatGPTに対して以下の指示を与えました．
googlechrome上で動作する音声認識を用いた音声対話システムを作ろうとしています．最初の段階として，マイクから入力された音声を音声認識をして途中結果も逐次的に表示すると同時に，音量を監視し，その数値を画面に表示するプログラムをjavascriptで示してください．
すると，javascriptのコードと共に，HTMLのソースも示してくれたので，それを保存して動かしてみると，そのままエラーも無く動作しました．
タイトルや画面構成もバッチリです．シンプルですが完璧過ぎるものが出来上がって驚きました．
第２弾：あいづちを返す
次に，あいづちを返す機能を追加しました．
- 100msの無音に相槌
- 1500msの無音に応答
という超単純ルールに則っています．
このルールと，javascriptのソースをChatGPTに見せて，改良版ソースを作成してもらいました．
最初は，「あいづちを連続で無限にうちまくる」などの現象が起きましたが，ChatGPTに問題点を伝えソースを修正してもらいました．数回やり取りをしたら，上記動画の状態になりました．
第３弾：バーチャルVTuber
（VTuberのVもバーチャルなので，バーチャル・バーチャルYouTuberになっちゃいますが・・・・．）
第２弾のあいづちシステムを見て，VTuberのshriminさんが「私をAIにしてー！！！」と言って，私宛にあいづちなどの音声を送ってきてくれたので，それを組み込みました．
僕の薄汚れたしゃがれ声よりもよっぽど耳触りが良くなりました．
で，AIキャラ側の顔が出てないのも寂しいので，配信アーカイブから数秒分キャプチャして，
youtube上でループ再生させることで，それっぽく見せてます．
あと，音量バーを追加して，視覚的にピコピコ動いて見えるようにしました．
この音量バーも，ChatGPTに伝えて作ってもらったものをそのまま動かしてます．
上のツイート記事内にもありますが，以下のリンクからデモ体験可能です．
https://sayonari.github.io/ai_shrimin/
第４弾：ChatGPT応答生成
ここまで来たら，ChatGPTでの応答生成をしたい！ということで，組み込みました．
最初，エンドポイントのURLを間違えたりしていて（結構間違えている人多いっぽい．海外掲示板とか見ると．）ハマり込みましたが，なんとか解決して動かせるようになりました．
皆さんが便利に体験して頂けるように，ChatGPTのAPIキーを取得して入力することで，簡単に利用できるようにしました．（キーはローカルに自動で保存されるので，リロードしても消えません）
以下に，一番最初にお見せしたのとは違う，ちょっと長い（３分）対話例を示します．
結構ちゃんと対話できていてすごいです．楽しくてずっとしゃべってしまいます．
なお，ローカルへのキーの保存は，ChatGPTに作ってもらいましたが，
ChatGPT APIへのアクセス部分はChatGPTが完全に自動では作れなかったので，仕方なく私がポチポチ実装しました．
あと，今は，GPTへの入力として，直近のユーザ発話の音声認識結果（＋初期プロンプト：キャラ付けの為の文）しか入れていないので，文脈を保持できず，すぐ対話が破綻してしまいます．ChatGPTは入出力の文字数で課金されますので，なるべくケチろうとした結果ですので，もっと文脈を入れたい！という方は，ソースをforkしていじってください！
上のツイート記事内にもありますが，以下のリンクからデモ体験可能です．
https://sayonari.github.io/ai_shrimin/GPT.html
おわりに
上記成果は，以下のgithubページで公開してあります．
https://github.com/sayonari/ai_shrimin/
GPT4はレスポンスが遅かったので，GPT-3.5-turbo にて音声対話システムを構築しましたが，サクサクとできあがっていって驚きっぱなしでした．
作った音声対話システムは，更に改良を続けたいと思います．
- あいづち・応答タイミングの適切な制御モデルを組み込む
- 音声合成器を作る
上記デモを体験されて，ご意見・ご感想があれば，コメントにてお知らせ頂けると嬉しいです．
また，何かアイデアがあれば，コメントで教えて下さい．
宣伝
ツール紹介（音声認識・翻訳・字幕）
ブラウザ上で簡単に動くシリーズとして，リアルタイム音声認識＆翻訳＆字幕表示を行うことができる「音声認識字幕ちゃん」を公開しています．
音声認識はアクセスすれば即使えますし，翻訳はGoogleAppsScriptにてAPIを作成頂きキーを取得する（無料）だけで使えます．
VTuberさんをはじめ，配信者さんに広く普及していますので，ご入用であればご自由にご活用ください．
音声認識字幕ちゃん
http://www.sayonari.com/trans_asr/index_asr.html
研究のご相談は・・・
音声対話システムを中心に，研究・開発でご相談されたい場合には，私の本業で受けます．お気軽にご連絡ください．
徳島大学 講師 西村良太
http://pub2.db.tokushima-u.ac.jp/ERD/person/346405/profile-ja.html
ビジネスのご相談は・・・
音声認識，音声対話技術を用いたビジネス，製品をお考えの場合は，私の会社にてご相談をお受けします！
株式会社 Harmonized Interactions
http://www.harmonized-interactions.com/