🏃

【AI Agent Hackathon】超初心者でも出たい話:3.何を作ろう、システムアーキテクチャ

2025/01/19に公開

今回紹介するシステムアーキテクチャは、正確にはシステムアーキテクチャとは言えない、ただの構想図かもしれません。ご了承ください。

あらすじ

Zenn主催のAI Agent Hackathon with Google Cloudが開催されています。
https://zenn.dev/hackathons/2024-google-cloud-japan-ai-hackathon

私はそもそもGoogle Cloudを初めて聞いた超初心者です。
そんな初心者でも、ハッカソンに出てみたいと奮闘した記録です。

自分が作ろうと思うもの

今回は、英語Writingの壁打ち用botを作成しようと思います!
経緯はどうでもいいと思うのでトグルの中に置いておきます。

開発の経緯

先日ChatGPTに英会話の先生をお願いしてみました。固定された会話ではなく、思いつくままに会話をし、終了したら文字でやり取りを復習できるなんとも素晴らしい体験でした。
ですが、月10分程度しか使えないらしい。これでは勉強にならないだろう。
それならせっかくだから作ってみよう!という経緯です。
ただ、実際作ってみると音声を文字にする部分がうまくいきませんでした。あんまり時間をかけるより、まずはGoogle Cloud などの使い方を学ぶという目標を達成するべく、音声は一旦諦めて文字のアプリを作成しました。

見た目と使用方法のイメージ

具体的にどう使うアプリなのか考えてみます。

  1. ユーザーがメッセージを入力して送信ボタンを押す。
  2. AIから返事が返ってくる。
  3. ユーザーが打ったメッセージとAIの返事がログとして書き加えられていく。

このイメージはUIを作成するのに使えそうです。
こんな感じのUIをイメージしてみました。

UIイメージ
+------------------------------------+
タイトル: AI英語チャット          

英語でメッセージを入力して  
送信してください。          

 [ここにメッセージを入力...]       
                [送信]             

+------------------------------------+
| 最新の返答:                        |
| AI: "Thank you for your message!" |
+------------------------------------+
+------------------------------------+
| 会話ログ:                          |
| ユーザー: "Hello"                  |
| AI: "Hi there!"                    |
| ユーザー: "How are you?"           |
| AI: "I'm fine, thank you!"         |
+------------------------------------+

これを目指して作っていきましょう。
もしかしたらUIから先に作った方がテンション上がるかもしれませんね。

使用するAIプロダクトとコンピュートプロダクトを考える

見た目が決まったら、次に後ろの動作です。
まずはどんなものがあったら動作するのか考えてみます。

  • ユーザーからの返事を作成する:DialogFlow
  • Google Cloud上で実行されるようにする:App Engine

これで条件はクリアできそうです。

システムの動作を考える

システムがどう動くのかを考えます。

  1. ユーザーがメッセージを入力して送信ボタンを押す。
  2. メッセージがバックエンドに送信される。
  3. バックエンドがDialogFlowにメッセージを送信する。
  4. DialogFlowが返答を生成してバックエンドに返す。
  5. バックエンドが返答をフロントエンドに送信する。
  6. ユーザーに返答が表示される。

こんな感じでしょうか。
続いて、ユーザーに見える部分と見えない部分に分けます。ユーザーに見える部分をフロントエンド、見えない部分をバックエンドと言います。厳密にはフロントエンドが直接目にしたり操作したりする部分、バックエンドがアプリケーションの動作の部分だと思います。

フロントエンドを(表)、バックエンドを(裏)と書きます。

  1. (表)ユーザーがメッセージを入力して送信ボタンを押す。
  2. (裏)メッセージがバックエンドに送信される。
  3. (裏)バックエンドがDialogFlowにメッセージを送信する。
  4. (裏)DialogFlowが返答を生成してバックエンドに返す。
  5. (裏)バックエンドが返答をフロントエンドに送信する。
  6. (表)ユーザーに返答が表示される。

システムアーキテクチャの作成

一般的には、システムアーキテクチャというものを作成するのがいいらしいということと、今回のハッカソンではシステム アーキテクチャ図の画像が必要になるので作成していきます。
そもそもシステムアーキテクチャとは、システム全体の構造の設計を、図や文章で表したものです。AIプロダクトどれ使うの?だとか、どんな流れで動かすの?だとかを書いていきます。

まとめ

今回はシステムアーキテクチャを作成しました。
図を作ることで、データの流れや接続がわかりやすくなったと思います。
次はいよいよコードを書いていこうと思います。

Discussion