サクッとChatGPT＋Flutterで音声会話アプリ作成【全実装コードあり】

ChatGPTのアプリを試しに作ってみたい。 けど面倒なのは嫌いなのでできれば git cloneでサクッとやりたい。
この記事ではFlutterでゼロから ChatGPTのAPI を実行して音声会話アプリ作成の流れをまとめていきます。もしこの記事が参考になればChatGPTでアプリを作りたそうな人にぜひ送り付けてください。

GPT3.5-Turbo ＋ Flutter ＋ STT ＋ TTS で音声会話チャットのコードを公開しましたので
ぜひアプリを作る参考にしてください。動かしてみると自分用にも使えると思います。

• Chat-GPT-API (chat/completions)
• STT (Speech-To-Text/音声の文字化)
• TTS (Text-To-Speech/文字の音声化)

※Android（シュミレータ否）、iOSのみ動作確認済み

手順

• git clone https://github.com/belcrod5/Speak-Chat.git リポジトリのクローン
• flutter pub get プロジェクトのルートディレクトリで実行してください。
• flutter run 実行開始
  以上です！ 是非いじくりまわしてアプリ開発にお使いください

こだわりポイント

• GPT-APIのレスポンスのstreamモードで少しずつ返答を受け取り「句読点」で区切った文字を先にSTTで読み上げるようにする事でレンスポンスが良い会話になっています。
• TTSのOS内蔵音声を設定できます。
• 無料で実装。ChatGPT初回登録 ＄18.00(2023/03/02登録)ゲット分。STT、TTSは有料のものしか無いと思い込んでいましたがAndroid、iOS内蔵の機能で無料で実装できた事がこだわりというか嬉しいポイントです。
  ちなみにChatGPT使用料は＄1.54(2023/03/23)安い！

苦労した点

• GPT-APIのレスポンスを少しずつ返答を得るstreamモードを選べるのですが、こちらのFlutterの取得サンプルコードが少なかったので苦労しました。たしかChatGPTで質問して解決したんだっけかな？
• TTSの音声入力受けつけ開始した事がわかりやすいように、効果音を出そうと思いましたがiOSではTTSリッスン中は音声再生、バイブレーションどちらも無効化されるみたいでした。Androidは標準で効果音が鳴ります。

実装解説

ポイントだけ。詳しくは github/belcrod5/Speak-Chat をご覧ください

OPEN_AI_API_KEYの読み込み

OPEN_AI_API_KEYの読み込みはgitに差分をアップしないためにも.envで管理

await dotenv.load(fileName: ".env");
dotenv.get("OPEN_AI_API_KEY")

flutter_dotenv 利用させて頂きました。ありがとうございます。

TTS (Text-To-Speech/文字の音声化)

読み上げも flutter_tts で楽ちんです

final FlutterTts tts = FlutterTts();
List voices = await tts.getVoices;

// OSのボイス名一覧
for(var item in voices){
    var map = item as Map<Object?, Object?>;
    // 日本語のみ
    if(map["locale"].toString().toLowerCase().contains("ja")){
      print(map["name"]);
    }
}
// ボイス設定
await tts.setVoice({
  'name': voiceName,
  'locale': 'ja-JP'
});

// 読み上げ実行
await tts.speak("お話するよ");

ハマりました

読み上げのスピーカーから音を出すように設定

await tts.setIosAudioCategory(IosTextToSpeechAudioCategory.playback, [
    IosTextToSpeechAudioCategoryOptions.defaultToSpeaker
]);

flutter_tts 利用させて頂きました。ありがとうございます。簡単

STT (Speech-To-Text/音声の文字化)

音声入力も speech_to_text で楽ちんです

stt.SpeechToText speech = stt.SpeechToText();

// 初期化
await speech.initialize(...

// 音声入力開始
await speech.listen(...
    localeId: "ja-JP" //←日本語として聞き取るよ

//聞き取り終了
speech.stop();

speech_to_text 利用させて頂きました。ありがとうございます。便利

設定の保存

音声切り替えの設定の保存には shared_preferences を使いました

// 初期化
SharedPreferences prefs = await SharedPreferences.getInstance();
// 保存
prefs.setString("voice_1", voiceName);
// 取得
prefs.getString("voice_1");

shared_preferences 利用させて頂きました。ありがとうございます。感謝

今後の改良したい事

• マイクボタンを押さなくても会話を続けられるようにしたい。
  なんかいい方法ないですか？
• 話かけるのでは無く話かけて欲しい。
• もちろん GPT-4、プラグインを組み込む（はやく登録承認されたい〜）
• ボットの人格を設定画面で設定（presence_penalty, temperature）、もしくはいくつかのパターンのボットからしゃべる相手を選択
• 子供、お年寄でも使えるようにとの事で音声会話にしたつもりですが、うちの家族に使わすと音声入力は、はっきり滑舌良く話さないと認識されにくいようなので Whisper を使うべきなのかと考えています。
• サービス化するには OPEN_AI_API_KEY を .envでは無く 認証登録してユーザー単位でサーバーからダウンロードする方法がいいのかな？サーバーで処理させる事がベターなんでしょうが、サーバー費がかかるのでクライアントで処理させたいと思っている。
• 履歴削除の showSnackBarが下から出て画面が見切れる

まとめ

以上で ChatGPT＋Flutterで音声会話アプリ実装コードの紹介は終わりになります！
もしこの記事が参考になったことで、ChatGPTで便利なアプリを作りたいと思っている方がいらっしゃいましたら、ぜひお送りください。もしこの記事を読んで、ChatGPTのアプリを作るきっかけを得た方がいらっしゃいましたら、私もとても嬉しく思います。この記事が誰かの役に立ったり、将来の選択肢を広げるお手伝いができたりするなら、最高のことです。最後までお読みいただき、ありがとうございました。

つぶやき

• ChatGPT-4、ChatGPT Plugins のウェイティングリストには登録しましたか？
  私はもちろん登録しましたがまだ返事がきません（2023/03/30）