Flutter + Vertex AI で オリジナルキャラのチャットボットを作ってみた

はじめに

生成AIと会話できるチャットボットを作ってみました。(β版)

背景

• Google Cloudを勉強
  • 音声⇨テキスト変換(Speech-to-Text)と
  • テキスト⇨音声変換(Text-to-Speech)サービスの存在を知る
• Geminiなどの生成AIと組み合わせて、AIとリアルタイムで会話出来るのでは？ と閃く
• 妻がオリジナルキャラクターを描いており、プロンプトを仕込めばそのキャラクターと会話出来るのでは? とさらに閃く (天翔龍閃)

主な技術スタック

• Google Cloud
  • Vertex AI
  • Speech-to-Text
  • Text-to-Speech
  • Cloud Run
• Flutter(フロントエンド)
• Flask(バックエンドAPI)

Q：なぜそんな造りを？
A：使ってみたかったから！

システム構成

• Flutter
  • フロントエンド
  • マイク録音、UI表示、音声再生
• Flask
  • REST APIを公開し、Google Cloud サービスとの橋渡し
• Google Cloud Cloud Run
  • バックエンド
  • サーバーレスで各種Google Cloudサービスを呼び出し
• Google Cloud Speech-to-Text
  • ユーザー音声をテキスト化
• Google Cloud Vertex AI
  • Chatbotの応答テキストを生成
• Google Cloud Text-to-Speech
  • 応答テキストを音声化

開発手法

• 約10日で突貫開発
• お試しにAIエージェントも活用
  • OpenAI Codex : フロントエンド支援
  • Google Jules : バックエンド支援
• 所感／学び
  • AIエージェントが自律的にガリガリとコードを書いている様子を見るのは楽しい
  • でも私自身はコーディングせずにレビューやエラー解消ばかりしているのは非常に楽しくない
  • CodexとJulesの機能差分はまだよく分からない
  • AIがPRを作成してくれても、そもそも依頼領域の知識が無いとソースの良し悪しが判断できない
    • ※今回、Flask周りなど丸投げしたが、「動いたのでOK」としています
  • AIエージェント活用には、「明確な指示出し」「アウトプットの品質判断(レビュースキル)」など、シンプルにリーダースキルが必要

実行画面

メイン画面(+録音中の画面)

• 「録音開始」ボタン: マイク収録開始
• 「停止して送信」ボタン: 音声⇨テキストに変換＋レスポンスを生成
  • 音声の準備までは5秒ほどかかる
• 「再生」ボタン: レスポンス(音声)を再生
• キャラクターのお目目が左右に動きます！

設定画面

• 会話履歴数: 毎回初めましてだと会話にならなかったため、会話履歴を保持
• 音声タイプ: 女性 or 男性ボイス
• 一人称: ボク or オレ など

ソース(抜粋)

• プロンプト(設定値で動的に切り替え)

    base_prompt = (
        "あなたは\n\n"
        "キョロメリアンという架空のキャラクターです。\n"
        "テーマ『あなたの側にもいるかもしれない。日常のあらゆるところに、こっそりと潜む。キョロ目の不思議なキャラクター』\n"
        f"一人称は「{pronoun}」。"
        f"{'声はやさしい女性のような感じです。' if voice_type == 'female' else '声は落ち着いた男性のような感じです。'}\n"
        "ユーザーから渡されたキーワード(録音音声→テキストに変換したもの)に対応して会話をしてください。\n"
        "過去の会話を覚えて、会話の流れを踏まえた返答を心がけてください。\n"
        "返答は毎回50〜100文字程度で、可愛く、ちょっとズレた感じも歓迎。\n"
        "---\n"
    )

• レスポンス生成部分

        # モデル指定
        model = genai.GenerativeModel('gemini-1.5-pro')
        # プロンプトから、レスポンス生成
        response = model.generate_content(prompt)
        # テキスト抽出
        reply = response.text

今後の展望、課題

• 音量・音質改善。イベントで展示しましたが、実機だと音声がとても小さかった…
• 生成AI応答のプロンプトチューニング
• CI/CDパイプライン導入
• AI生成コード部分の更なる理解
• AIエージェントとの向き合い方、指示の出し方

終わりに

• 初めてだらけの開発でしたが、なんとか動いてよかったです
• 最近はchatGPT、Gemini、Grokなどでも、AIと会話出来るようになってきています。そんな中、自分が会話したいAIと会話が出来て、嬉しかったです

謝辞 (Special Thanks)🙏

• 妻
• 本アプリで使用したキャラクターさん達：kyororuの部屋