スマホアプリでAI(ChatGPT、Geminiなど)の口調を指定し、Alexaに喋らせる

はじめに

初めまして！Qiitaの記事初投稿です。

Alexa Skills、各AIのAPI、Flutterを組み合わせることで、ユーザーがAlexaに質問をするとスマホアプリで設定した「AI、任意の口調」で回答するシステムを開発しました。

何番煎じだよ、と思う方も多いと思いますが、一つ違うのは「スマホアプリでオプション(使用するAI、回答の口調)を指定可能」というところです。

本記事について

開発のふりかえりも兼ねた、一連のアプリ紹介となります。

地味に登場人物が多く、1記事にまとめると公開するのがだいぶ先になってしまうと思ったので、3部作くらいに分けて公開させていただきます。

主要なコードの紹介はしますが、あくまで「紹介」です。
Flutter(Dart)やLambda(Python)は、その言語の初心者が書いた内容のため、「参考程度」に留めてください。

対象読者

• AlexaとAI(ChatGPT)などを連携させたい人
• Flutterの開発に興味がある人

本記事の紹介範囲

1. 開発背景
2. デモ動画
3. 全体の構成図
4. 各種フローの説明

開発背景

以下の2点が今回の開発に至った背景です。

Alexaの進化

タイマー、音楽、テレビのON/OFFくらいしか使ってないAlexaをワンランク上の存在に導きたかった。

Flutter開発

業務でWebアプリの開発しか経験がなかったので、最近話題のFlutterでスマホアプリを開発してみたかった。

AlexaスキルはGUIがないので、任意の口調を変更するUIを持たせるのにスマホアプリはちょうどよかったです。

デモ動画

すみません、古いiPhoneで撮影したので、音が小さいかもしれません。
※設定画面のUIも初期時点なのでChatGPTのみになってます

全体の構成図

構成管理

GitHubを採用しました。
運用は個人開発でスピード感を出したかったので、シンプルな「GitHub Flow」です。
※mainブランチとfeatureブランチのみ

GitHubの採用理由

• プルリク作成時、ChatGPTにコードレビューを行うことが簡単
  • GitLabでも可能だが自作する必要がありそう
• 世界的にユーザー数が多くドキュメントも多い
• シンプルに使い慣れてた

ChatGPTのコードレビュー

以下の記事がとても参考になりました。
変に躓かなければ30分程(慣れれば5分)で環境を構築できるので興味があれば是非試してください
※リポジトリ単位で環境構築が必要なため、大量のリポジトリを持ってる方は注意です

API料金

気になる料金ですが、2024/07に公開されたモデル「gpt-4o-mini」を使用すれば、ほぼ気にならない金額(使い倒しても月額3〜5$)で済むと思います。

当然トークンの入出力(コードの変更量、指摘内容)によるので、あまり参考になりませんが、私は2〜3回のプルリクでも0.1$未満でした。

ちなみに「gpt-4o-mini」が出る前の「gpt-4-turbo」や「gpt-4o」では1回のプルリクで0.5$くらいでした。(それでもコードレビュー料金として格安だと思いますが)

各種フローの説明

スマホアプリ

1. ログイン認証(構成図の緑線)

   1. Amazonアカウントでログインし、トークンを発行
      ※ログインしないと後続画面には遷移できません
      

2. AIの口調を設定(構成図の赤線)

   1. 「口調」を任意(ツンデレ、うずまきナルト、など)で設定
   2. 使用するAI、APIキーを設定
   3. 保存ボタン押下でAPI Gateway(ログイン時のトークンで認証)を通し、設定内容をDynamoDBに保存するLambdaを実行
      

   ・Lambdaに認証情報が渡ってくるため、Amazonアカウントのメールアドレスをパーティションキーで保存
   ・APIキーはAWS KMSで暗号化して保存

3. 設定内容のお試し

   1. 保存した内容で実際にAIにリクエストし、事前の挙動を確認(任意)

詳細記事

Alexaスキル

1. ログイン認証(構成図の緑線)

   1. 公式のスマホアプリ「Amazon Alexa」で本スキルのアカウントリンクからAmazonアカウントでログインし、トークンを発行
      ※ログインしないとアレクサとAI(ChatGPTなど)が連携できません
      

2. 開発したスキルの起動(構成図の青線)

   1. Alexaに{ChatGPTに聞きたいこと}を発話
   2. Alexaスキル経由(Lambda)で以下を実行
      1. DynamoDBからスマホアプリで保存した口調を取得
      2. 取得した口調と{ChatGPTに聞きたいこと}を連結してChatGPTにリクエスト
      3. ChatGPTのレスポンスをそのまま返却
   3. AlexaがユーザーにChatGPTのレスポンスを発音

おわりに

本記事ではここまでとさせていただきます。
励みになりますので、「いいね」、「コメント」お待ちしてます！

次回はスマホアプリ(Flutter)の開発にフォーカスして紹介します。
⇨記事作成したので、以下の関連記事にリンクを載せました。
　次回はAlexa Skillsの開発にフォーカスして紹介します。

Alexaの自由入力に対応しました

関連記事