声でやり取りできるChatGPTアプリ（tocha）を作った話

概要

約半年前の2023年4月（GPT4に驚いた翌月）の話になりますが、個人開発で小学1年生と4年生の我が子用に音声でやりとりできるChatGPTアプリを作った話です。

GPT４をみて、音声インターフェースにしてキーボード使えない子供に使わせたいと思い、勢いで開発しました。

OpenAI社の規約的に13歳未満は使用禁止と知りお蔵入りにしていたのですが、ついに公式のOpenAI社製のアプリが音声インターフェースに対応する(以下URL)とのことなので、ここらでzennでご紹介させていただき供養しようと思います。

https://openai.com/blog/chatgpt-can-now-see-hear-and-speak

何をするアプリか

子供が声だけでChatGPTと会話できる状況を目指したFlutter製スマホアプリです。

作ったもの

タイトル画面

子供向けなので、おもちゃみたいな見た目にしています。
アプリ名はチャットのアナグラムをかわいくしてトッチャ（tocha）としました。(綴的にはトチャ？トカ？)

ボイスでのチャット

スマホ画面下部の赤いアイコンを長押ししている間に話した内容が、送信ウィンドウに入力されます。
入力後、送信ボタンを押せばチャットGPTに送信して結果を返してくれます。

生成されたテキストもスマホの音声合成で機械音声で出力しています。

声でお絵かき機能

DALLの生成する絵は子供向けじゃないとは思ったのですが、画像生成AIも一応つないでみています。
こちらも、生成したいイラストのお題について声で入力して送信したら、２０秒ほどで結果が表示されます。

設定機能

設定としては、システムプロンプトの設定、OpenAIのAPIキーの設定、音声入力のOn/Off設定などを設けています。

工夫した点

スマホの機能を最大限利用

FlutterではTTS(テキストtoスピーチ)とSTT(スピーチtoテキスト)の両方ともライブラリがあり、いずれも日本語に対応しているので、こちらを使うことで無料かつ（サーバーを介さない）高速な処理が可能です。

https://pub.dev/packages/flutter_tts

https://pub.dev/packages/speech_to_text

認識精度が悪ければ、Whisperなどサーバー/クライアント型のモデルも試してみようかと思いましたが、十分だったのでこのライブラリのまま使っています。

LLMから漢字を含む文章を出力してそれをそのままTTSに入れているので、たまに読み方を間違えます。
ここの正確性を上げるためにFlutter版のMecabを入れて生成された文字列を形態素解析して、読みがなを発話APIにわたすような処理を挟んだこともあったのですが、このあたりを完全に正確に行うのはとても難しいです。
またアルファベットの文字列が出力された場合は英語発話に切り替えたりしないといけないです。

子供向けのおもちゃみたいなUI

技術的にはChatGPTといういかつい名前でも、このサービスは子供向けなので、かわいいUIにするように心がけました。
送信ボタンや音声周りの赤いボタンはもっとやりようがありそうですが実際子供向けのUI難しい。
UI用のアニメーションはLottieのものを使わせていただきました。

かわいいですよね！？(強制)

子供向けのシステムプロンプト

システムプロンプトで「ひらがなで話してください」とか「以下の漢字以外を使わずに回答してください」などといろいろ工夫してみたのですが、なかなかうまくいきませんでした。
例えばLLMの出力文字数を制限するのが難しいことを知ったり、ハレーションをできるだけ抑えるようなシステムプロンプトの工夫もしてみたり、当時（GPT歴１ヶ月時点）の自分はこのあたりの工夫をしながらGPTのシステムプロンプトの癖や苦手なことを学べたように思います。

また、学年設定に合わせて使える漢字を制限する機能を入れたかったのですが、それも当時はプロンプトで頑張ってました。当時はなかったfunction callingなら綺麗に対応できるかもしれませんが、flutter側で形態素解析して習っていない漢字は平仮名に戻してあげるのが確実なのかもしれません。

英会話練習機能

英会話を練習できるようなシステムプロンプトも用意していました。
このシステムプロンプトを選択すると、TTS, STTの言語設定も英語モードに切り替わり、英語で話して英語音声で帰ってくるので英会話の練習にはちょうど良いかと考えました。

英語のTTSは発音も流暢だし、正しく認識されるとこちらの発音が合っている感覚も得られるため、認識周りの体感は良かったです。
難しかったのは、「会話を回すのが人間側になりがち」という点でした。
GPT先生に「相手に質問を返して会話が膨らむように工夫してください」といったシステムプロンプトを実装するのですが、単純に実装するとこちらの発言に対する反応が「すばらしいですね！」みたいな太鼓持ちキャラが強すぎて、すぐに会話がおもしろくなくなってしまいます。
認識周りはうまくいっても、このあたりをしっかり工夫して仕組みを作らないと、良い機能にはならないため作り込んでいくなら大きなハードルになると感じました。

おわりに

最後まで読んでくださりありがとうございます。
こんなものでもサクッとクロスプラットフォームで作れるのでFlutterすごいです。
自作したものはすぐ無駄になってしまいましたが、学びになりましたし、すぐ公式が対応してくれたのはありがたいので、今後もOpenAI課金ユーザーとしてお布施させていただきます🙏

本アプリはもともとモノレポで作っていたのですが、バックエンドとTerraformだけ除いて、Flutter部分のみパブリックリポジトリとして共有しますので、興味を持っていただけましたら参照ください。
※ アプリとして公開してOpenAIのアクセスキーを持たない人でも使えるようにしようかと考えたため、自前のサーバーを介してChatGPTと通信するようになっています。（アクセスキーを組み込むわけに行かないため。）
そのため起動する場合はサーバーを使わないように修正する必要があります。
https://github.com/ryooo/tocha

先日も２年前に作った登山アプリの話を記事にしましたし、今回も半年後にようやく記事を書く気になったので、記事公開のタイミングがまったくタイムリーでないのですが、最近ちゃんと記事にすることの大事さを感じています。
https://zenn.dev/ryooo/articles/358a5ecf9219a6

よろしければ、ハート・フォロー・シェアをいただけますと喜びます :)
季節の変わり目で体調を崩していて咳がツラいです。皆様は気をつけて。