700 以上のラボとコースにアクセス

AI Applications を使用して AI エージェントを Flutter アプリに統合する

ラボ 2時間 universal_currency_alt クレジット: 5 show_chart 入門

info このラボでは、学習をサポートする AI ツールが組み込まれている場合があります。

概要
目標
設定
タスク 1. 検索データストアと検索アプリを作成する
タスク 2. バックエンドをビルドしてデプロイする
タスク 3. Firebase を構成する
タスク 4. Reasoning Engine AI エージェントを作成する
タスク 5. バックエンドアプリを拡張する
タスク 6. Gemini 2.0 Flash をテスト運用する
タスク 7. Flutter フロントエンドアプリをデプロイする
タスク 8. Flutter アプリをテストする
ラボを終了する
お疲れさまでした

700 以上のラボとコースにアクセス

概要

このラボでは、AI エージェントを Flutter アプリに統合します。Flutter はクライアントアプリフレームワークとして使用され、Vertex AI Search はベクトル DB として使用されます。また、Reasoning Engine は、Vertex AI で LangChain を使用してエージェントを構築およびデプロイするために使用されます。エージェントは、高度な機能を備えた大規模言語モデル（LLM）ファミリーである Gemini を使用して、テキストと画像のプロンプトに対する AI 回答を生成します。

このラボには、Flutter アプリを実行するために必要な Flutter と Dart の拡張機能に加え、code-server を介して IDE として VSCode が事前にプロビジョニングされています。さらに、このラボには fwr も含まれています。これは、ブラウザを使用してアクセスするウェブアプリケーションとして Flutter アプリを提供するために使用するツールです。

このラボは、クラウドアプリケーションの開発にはあまり詳しくない、アプリケーションの構築に携わるあらゆるレベルの開発者を対象としています。Python を利用した経験があり、Flutter フレームワークに慣れているほうが内容を理解しやすいでしょう。このラボのタスクを実行する際に Flutter の知識は必要ありません。ただし、Flutter アプリのコードの一部を確認する、アプリの機能をテストするといった作業は行います。

目標

このラボでは、次のタスクを行います。

Google Cloud コンソールで AI Applications を使用して検索データストアと検索アプリを作成する。
Vertex AI Workbench を使用して Reasoning Engine エージェントをデプロイする。
Vertex AI Search と Reasoning Engine エージェントが統合された Python アプリを使用する。
アプリを Cloud Run にデプロイし、Flutter アプリのバックエンドとして使用する。
Firebase プロジェクトを設定し、Flutter アプリに接続する。

このラボで使用する各種コンポーネントの概要は次のとおりです。

設定

各ラボでは、新しい Google Cloud プロジェクトとリソースセットを一定時間無料で利用できます。

Qwiklabs にシークレットウィンドウでログインします。
ラボのアクセス時間（例: 1:15:00）に注意し、時間内に完了できるようにしてください。
一時停止機能はありません。必要な場合はやり直せますが、最初からになります。
準備ができたら、[ラボを開始] をクリックします。
ラボの認証情報（ユーザー名とパスワード）をメモしておきます。この情報は、Google Cloud Console にログインする際に使用します。
[Google Console を開く] をクリックします。
[別のアカウントを使用] をクリックし、このラボの認証情報をコピーしてプロンプトに貼り付けます。
他の認証情報を使用すると、エラーが発生したり、料金の請求が発生したりします。
利用規約に同意し、再設定用のリソースページをスキップします。

タスク 1. 検索データストアと検索アプリを作成する

このタスクでは、Google Cloud コンソールで AI Applications を使用して検索データストアと検索アプリを作成することにより、Flutter アプリに検索機能を実装します。

検索データストアを作成する

Cloud コンソールで、[すべてのプロダクトを表示] をクリックします。[すべてのプロダクト] ページで [AI] セクションまでスクロールし、[AI Applications] をクリックします。
[続行して API を有効化] をクリックします。
左側のペインで [データストア] をクリックし、[データストア] ページで [データストアを作成] をクリックします。

このページでは、検索結果に使用するデータソースを構成します。このラボには、Google Merchandise Store のアイテムに関するデータを含む .csv ファイルが格納された Cloud Storage バケットが事前にプロビジョニングされています。
データソースとして Cloud Storage を選択するには、[Cloud Storage] で [選択] をクリックします。
インポートするデータの種類として、[チャットアプリケーション用のよくある質問の構造化データ（CSV）] を選択します。
インポートするフォルダまたはファイルを選択するには、[ファイル] をクリックします。
CSV ファイルの Cloud Storage URL を指定するには、[参照] をクリックします。
Cloud Storage バケットのをクリックして、内容を表示します。
goog_merch.csv ファイルを選択し、[選択] をクリックします。

フォルダの gs:// URI が取り込まれます。
[続行] をクリックします。
データストア名に「goog-merch-ds」と入力します。
[作成] をクリックします。

データストアが作成され、CSV ファイルからのデータの取り込みが開始されます。
[データストア] ページで、新しく作成したデータストアの名前をクリックします。
[ドキュメント] タブに、インポートしたドキュメントのリストが表示されます。ドキュメントに関連付けられたデータを表示するには、[ドキュメントを表示] をクリックします。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 Vertex AI Search データストアを作成する

検索アプリを作成する

検索データストアを使用するには、Vertex AI Agent Builder で検索アプリに接続します。

Cloud コンソールで [AI Applications] をクリックし、[アプリ] をクリックします。
[アプリを作成] をクリックします。
[アプリを作成する] ページの [ウェブサイト検索] で [作成] をクリックします。

[アプリの構成の検索] ページで、以下の設定を使用してウェブサイト検索アプリを構成します。残りの設定は、デフォルトのままにします。

プロパティ	値（入力または選択）
Enterprise エディションの機能	無効にする
アプリ名	gms-search-app
会社名または組織名	gms-company
アプリのロケーション	global（グローバル）

[続行] をクリックします。
既存のデータストアのリストが表示されます。前のサブタスクで作成した goog_merch_ds データストアを選択します。
検索アプリを作成するには、[作成] をクリックします。

検索アプリが作成され、データストアがアプリに接続されます。
検索アプリをテストするには、AI Applications のナビゲーションメニューで [プレビュー] をクリックします。
[検索] フィールドに「dino」と入力します。

データストアにインポートされたドキュメントから、関連する検索結果のリストが表示されます。

注: [検索プレビューの準備がまだできていません] というエラーが表示された場合、数分待ってから再試行してください。待たずにラボの次のタスクに進むこともできます。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 Vertex AI Search アプリを作成する

タスク 2. バックエンドをビルドしてデプロイする

Flutter アプリのバックエンドは、Google Cloud で Cloud Run サービスとして実行されます。バックエンドサービスは、商品ショップのデータから検索レスポンスを生成するために、前の手順で作成した検索アプリと統合されます。バックエンドは、Reasoning Engine エージェントとも統合され、Gemini にアクセスすることで、Flutter アプリからのクエリに応答して生成 AI コンテンツを取得します。

このタスクでは、バックエンド Python アプリをビルドして Cloud Run にデプロイします。

バックエンドアプリをビルドして確認する

このラボ用に VSCode ベースの IDE が事前プロビジョニングされています。IDE にアクセスするには、ラボの Qwiklabs 認証情報パネルから IDE サービス URL をコピーして、新しいシークレットモードブラウザウィンドウに貼り付けます。

注: IDE サービスの URL は、このラボ用に事前プロビジョニングされた Cloud Run サービスのエンドポイントであり、code-server VM へのリクエストをプロキシします。この IDE は code-server を使用して構築されており、Flutter、Dart、Vim の拡張機能が含まれています。
IDE でターミナルを開きます。IDE のナビゲーションメニュー（）で、[ターミナル] > [新しいターミナル] をクリックします。
注: 以下の手順のコマンドは、IDE のターミナルウィンドウで実行します。
バックエンドアプリの初期バージョンと関連ファイルは、ラボ用に事前プロビジョニングされています。バックエンドアプリの初期バージョンのフォルダとその内容を Cloud Storage からコピーします。
gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/ag-web ~ 注: プロンプトが表示された場合、[許可] をクリックしてクリップボードからテキストと画像を貼り付け、Enter キーを押します。
フォルダの内容を一覧表示するには、IDE のターミナルウィンドウで次のコマンドを実行します。
ls ~/ag-web/app
ag-web/app フォルダには、アプリケーションのソースコードと、バックエンドアプリをビルドして Cloud Run にデプロイするために必要な他のファイルが含まれています。
アプリの PROJECT_ID、LOCATION、STAGING_BUCKET の構成を設定します。
sed -i 's/GCP_PROJECT_ID/{{{project_0.project_id|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCP_REGION/{{{project_0.default_region|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCS_BUCKET/{{{project_0.startup_script.lab_bucket_name|set at lab start}}}/' ~/ag-web/app/app.py
先ほど作成した検索データストアを使用するようバックエンドアプリを構成します。

次のコマンドで、文字列 {YOUR_SEARCH_DATA_STORE_ID} を検索データストア ID の値に置き換えます。

sed コマンドの中括弧は必ず削除してください。
注: 検索データストア ID の値を取得するには、Cloud コンソールで [AI Applications] > [データストア] に移動し、先ほど作成した検索データストアの名前をクリックします。データストア ID の値をコピーします。これは検索エンジン ID と同じです。 sed -i 's/SEARCH_ENGINE_ID/{YOUR_SEARCH_DATA_STORE_ID}/' ~/ag-web/app/app.py
IDE でコードを表示するには、IDE のナビゲーションメニューでをクリックし、[フォルダを開く] をクリックします。
リストから IDE-DEV/ag-web/ フォルダを選択し、[OK] をクリックします。
コードの作成者を信頼する場合、[はい、この作成者を信用します] をクリックします。
[エクスプローラ] ペインで、app フォルダを開き、app.py をクリックして、ファイルをエディタで開きます。

バックエンドアプリのコードにより実行される処理は、次のとおりです。
- ラボの Google Cloud プロジェクト ID、リージョン、Cloud Storage バケットを使用して Vertex AI を初期化します。
- search_gms() 関数は、discoveryengine.googleapis.com API データストアエンドポイントを使用して検索リクエストを開始します。先ほど作成したデータストア ID が URL で使用されます。
- この関数は、ユーザーが指定した検索クエリを使用してデータストアのコンテンツを検索し、結果を JSON の回答としてフォーマットします。
- アプリは、個々の関数への呼び出しをルーティングするために flask を使用します。/ エンドポイントは、アプリが正常に読み込まれたことを確認するために使用されるデフォルトのページです。一方、/ask_gms エンドポイントは、Vertex AI Search を使用する search_gms() 関数を呼び出します。

アプリをビルドして Cloud Run にデプロイする

デプロイスクリプトを使用すると、バックエンドアプリをビルドして Cloud Run にデプロイできます。

IDE でターミナルウィンドウを開き、バックエンドアプリのフォルダに移動します。
cd ~/ag-web/app
gcloud CLI から Google Cloud に対して認証を行います。
gcloud auth login
続行するには、「Y」と入力します
ログインフローを立ち上げるには、Ctrl キー（Windows および Linux の場合）または Command キー（macOS の場合）を押して、ターミナルのリンクをクリックします。
外部ウェブサイトを開くかどうかを確認するメッセージが表示されたら、[開く] をクリックします。
ラボ受講者用のメールアドレスをクリックします。
続行するかどうかを確認するメッセージが表示されたら、[続行] をクリックします。
Google Cloud SDK に Google アカウントへのアクセスを許可し、利用規約に同意するには、[許可] をクリックします。

確認コードがブラウザタブに表示されます。
[コピー] をクリックします。
IDE のターミナルウィンドウに戻り、[認証コードを入力してください] と表示されている場所にコードを貼り付けて、Enter キーを押します。

これで Google Cloud にログインできました。
deploy.sh スクリプトを実行可能にし、スクリプトを実行して、指定した Cloud Run リージョンにアプリをデプロイします。
chmod a+x deploy.sh; ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}
アプリのビルドと Cloud Run へのデプロイが正常に完了すると、スクリプトの出力の末尾にアプリのエンドポイント URL が表示されます。この URL は、スクリプトで実行された gcloud run deploy コマンドによって生成されたものです。
注: このコマンドの実行には時間がかかります。完了するまで待ってから次のタスクに進んでください。

バックエンドアプリをテストする

アプリの機能は、そのアプリの Cloud Run エンドポイントにアクセスしてテストします。

前の手順で生成したアプリのエンドポイント URL をコピーし、新しいブラウザタブでその URL に移動します。
アプリが読み込まれると、ホームページに [Welcome to the ag-web backend app] と表示されます。
ブラウザの URL バーで、次のパスを URL の末尾に追加します。
/ask_gms?query=dino
アプリで先ほど作成した検索データストアからの結果が返されることを確認します。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。バックエンドアプリを作成する

タスク 3. Firebase を構成する

フロントエンド Flutter アプリは Vertex AI for Firebase Dart SDK を使用して Gemini API を呼び出します。この SDK は、Dart および Flutter アプリの公式パッケージリポジトリである pub.dev から firebase_vertexai パッケージとして入手できます。

Firebase は、Google が提供するバックエンドアプリ開発プラットフォームであり、Android、iOS など、さまざまなプラットフォーム向けのサービスが用意されています。

このタスクでは、Firebase を設定して Firebase CLI にログインします。後で、Flutter アプリを Firebase に接続します。

Firebase を設定する

SDK を使用するには、まず Firebase プロジェクトを設定します。

シークレットウィンドウタブで、https://console.firebase.google.com を指定して Firebase コンソールにアクセスします。
[プロジェクトを作成] をクリックします。
ラボの既存の Google Cloud プロジェクトに Firebase を追加するには、ページの下部にある [Google Cloud プロジェクトに Firebase を追加する] をクリックします。
[Google Cloud プロジェクトを選択する] をクリックし、リストからラボプロジェクトを選択します。
利用規約に同意し、[続行] をクリックします。
デフォルトの料金プランを使用するには、[プランを確認] をクリックします。
[続行] をクリックします。
このプロジェクトの Google アナリティクスを無効にしてから、[Firebase を追加] をクリックします。
Firebase プロジェクトの準備ができるまで待ち、[続行] をクリックします。

これで、ラボの Google Cloud プロジェクトで Firebase を使用できるようになりました。

Firebase にログインする

IDE のターミナルウィンドウで、Firebase CLI にログインします。
firebase login --no-localhost
CLI とエミュレータの報告情報の収集を Firebase に許可するには、Y と入力して Enter キーを押します。
セッション ID をメモし、手順に沿ってログインフローを開始します。Ctrl キー（Windows および Linux の場合）または Command キー（macOS の場合）を押しながら、ターミナル内の URL をクリックします。
外部ウェブサイトを開くかどうかを確認するメッセージが表示されたら、[開く] をクリックします。
ラボ受講者用のメール ID をクリックします。
[続行] をクリックします。
関連する権限を Firebase CLI に付与するには、[許可] をクリックします。
[はい、今このコマンドを実行しました] をクリックします。
セッション ID を確認して、[はい、これは私のセッション ID です] をクリックします。
認証コードをコピーするには、[コピー] をクリックします。
IDE のターミナルウィンドウで、求められた場所に認証コードを貼り付けて、Enter キーを押します。

これで Firebase CLI にログインできました。

タスク 4. Reasoning Engine AI エージェントを作成する

AI エージェントは、目標を達成するために、大規模言語モデル（LLM）の機能を利用して推論を行い、外部ツールとのオーケストレーションを行うアプリケーションです。Vertex AI Agent Builder は、AI エージェントを信頼できるデータソースに接続して構築するのに役立つ、Google のプロダクトとツールのスイートです。

Vertex AI Reasoning Engine（LangChain on Vertex AI とも呼ばれます）は、Vertex AI Agent Builder を使用して推論エージェントを構築およびデプロイするのに役立ちます。LangChain は、チャットボットや RAG システムの構築に使用される人気の OSS ツールです。

Reasoning Engine では、デベロッパーが関数呼び出しを使用して、LLM（Gemini）からの出力を Python 関数にマッピングできます。Reasoning Engine は、Vertex AI に用意された Gemini モデル用の Python SDK と緊密に統合されており、LangChain や他の Python フレームワークと互換性があります。

このタスクでは、Vertex AI Workbench と Jupyter ノートブックを使用し、Python 関数を備えた Reasoning Engine エージェントをデプロイします。このエージェントは、このラボの次のタスクにおいて生成 AI バックエンドアプリケーションで使用します。

Vertex AI Workbench インスタンスを作成する

Vertex AI Workbench は、データサイエンスと ML のワークフロー全体に対応する Jupyter ノートブックベースの開発環境です。Vertex AI や他の Google Cloud サービスを Vertex AI Workbench インスタンスの Jupyter ノートブック内から操作できます。たとえば、Vertex AI Workbench では、BigQuery と Cloud Storage とのインテグレーションを使用して、Jupyter ノートブック内からデータにアクセスして探索できます。

Vertex AI Workbench インスタンスには、ディープラーニングパッケージのスイート（TensorFlow と PyTorch のフレームワークへの対応を含む）がプリインストールされています。

Vertex AI Workbench ノートブックは、Google Cloud で ML モデルを開発およびデプロイするための柔軟でスケーラブルなソリューションです。

Workbench インスタンスを作成するには、Google Cloud コンソールでナビゲーションメニュー（）をクリックし、[Vertex AI] > [Workbench] を選択します。
Cloud コンソールにプロンプトが表示されたら、[Notebooks API] をクリックして有効にします。
[インスタンス] タブで [インスタンス] が選択されていることを確認し、[新規作成] をクリックします。
[新しいインスタンス] ページで、[名前] に「my-instance」と入力します。
残りの設定はデフォルトのままにして、[作成] をクリックします。

新しいインスタンスがインスタンスセクションでスピンアップされます。インスタンスが作成されるまで待ってから次の手順に進みます。
注: インスタンスが使用可能な状態になると、インスタンスの横に緑色のチェックマークが表示されます。
インスタンスの準備ができたら、[Jupyterlab を開く] をクリックします。
Python 3 Jupyter ノートブックを起動するには、[Python 3] ノートブックをクリックします。

ノートブックファイルをコピーする

このラボには、Reasoning Engine エージェントをビルドおよびデプロイするノートブックが事前プロビジョニングされています。

ノートブックを JupyterLab インスタンスにコピーするには、新しいノートブックの最初のセルに次のコードをコピーします。
!gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web/ag_setup_re.ipynb .
セルを選択し、セルメニューの [実行] をクリックして実行します。

このコマンドは、Cloud Storage から JupyterLab インスタンスにノートブックをコピーします。コマンドが完了すると、ノートブックファイルが最上位のルートフォルダに表示されます。
ノートブックを開くには、フォルダリストでノートブックファイルをダブルクリックします。ノートブックのコンテンツが新しいタブで開きます。

Reasoning Engine エージェントをビルドしてデプロイする

ノートブックのすべてのコードセルを最初から順番に実行します。セルを実行するには、セル内の任意の場所をクリックして選択し、セルメニューまたはノートブックの上部メニューで [実行] をクリックします。
注: セルでコマンドを実行したときは、コマンドが完了するまで待ってから次のセルに進んでください。コマンドの実行が完了すると、セル番号フィールドのアスタリスク（*）がセル番号に置き換えられます。注: セルを実行する前に、以下のメモでセル固有の指示や手順を確認してください。そのような指示には、CELL INSTR 接頭辞が付いています。
a. [CELL INSTR] 現在のランタイムを再起動する

プロンプトが表示されたら、[カーネルを再起動します] ダイアログで [OK] をクリックします。

b. [CELL INSTR] Google Cloud プロジェクト情報を設定し、Vertex AI SDK を初期化する:

このセルを実行して Vertex AI SDK を初期化する前に、ラボの project_id、ロケーション、ステージングバケットの構成値を更新します。
PROJECT_ID = "{{{project_0.project_id|set at lab start}}}" LOCATION = "{{{project_0.default_region|set at lab start}}}" STAGING_BUCKET = "gs://{{{project_0.startup_script.lab_bucket_name}}}"
サンプル構成設定で更新されたセル:

c. [CELL INSTR] Vertex AI Search のツール関数を定義する:

このセルを実行する前に、GOOGLE_SHOP_VERTEXAI_SEARCH_URL の値を、バックエンドアプリの Cloud Run エンドポイント URL に置き換えます。

エンドポイント URL を取得するには、Cloud コンソールで Cloud Run に移動し、バックエンドアプリの名前である ag-web をクリックします。エンドポイント URL の値をコピーして、セル内の値と置き換えます。

バックエンドアプリのサンプル Cloud Run エンドポイント URL で更新されたセル:

注: ノートブックのメニューバーで [実行] をクリックしてセルを実行することもできます。
セル「エージェントを Reasoning Engine ランタイムにデプロイする」を実行したら、コマンドが完了して Reasoning Engine エージェントが作成されるまで待ちます。次に、Reasoning Engine ID をコピーします。

この ID は、次のタスクでバックエンドアプリを構成して再デプロイする際に使用します。
注: このセルが完了するまで最大 10 分かかることがあります。Reasoning Engine が作成されたことを示す最終出力が表示されるまで待ってから、次の手順に進んでください。
Reasoning Engine エージェントが正常に動作することをテストするには、次の 2 つのセルを実行し、出力を確認します。

Reasoning Engine エージェントは、クエリ入力と Gemini モデルからの出力に基づいて、Wikipedia または Vertex AI Search データストアを正常に呼び出しました。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 Reasoning Engine エージェントをデプロイする

タスク 5. バックエンドアプリを拡張する

バックエンドアプリを拡張し、前のタスクでデプロイした Reasoning Engine エージェントを呼び出すようにしましょう。

バックエンドアプリの最初のバージョンでは、Vertex AI Search から直接結果を取得するだけでした。新しいバージョンでは、アプリが Reasoning Engine エージェントを呼び出し、Gemini からの出力とエージェントのツールを使用して、入力プロンプトに基づいて Vertex AI Search または Wikipedia から回答を生成するようにします。

このタスクでは、バックエンドアプリのコードを更新し、リクエストクエリで Reasoning Engine エージェントを呼び出してエージェントの回答を返すエントリポイントを追加します。

バックエンドアプリを更新する

IDE のターミナルウィンドウで、次のコマンドを実行して、app.py ファイルに新しいエントリポイントコードを追加します。
cat << EOF >> ~/ag-web/app/app.py # # Reasoning Engine # NB_R_ENGINE_ID = "REASONING_ENGINE_ID" from vertexai.preview import reasoning_engines remote_agent = reasoning_engines.ReasoningEngine( f"projects/{PROJECT_ID}/locations/{LOCATION}/reasoningEngines/{NB_R_ENGINE_ID}" ) # エージェントを呼び出す Flask アプリのエンドポイント @app.route("/ask_gemini", methods=["GET"]) def ask_gemini(): query = request.args.get("query") log.info("[ask_gemini] query: " + query) retries = 0 resp = None while retries < MAX_RETRIES: try: retries += 1 resp = remote_agent.query(input=query) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Empty response.") break except Exception as e: log.error("[ask_gemini] error: " + str(e)) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Too many retries.") return "No response received from Reasoning Engine." else: return resp["output"] EOF
先ほど作成した Reasoning Engine エージェントを使用するようバックエンドアプリを構成します。

次のコマンドの文字列 {YOUR_REASONING_ENGINE_ID} を、前のタスクでノートブックセルからコピーした Reasoning Engine ID の値に置き換え、IDE のターミナルウィンドウで次のコマンドを実行します。

sed コマンドの中括弧は必ず削除してください。
sed -i 's/REASONING_ENGINE_ID/{YOUR_REASONING_ENGINE_ID}/' ~/ag-web/app/app.py
IDE でコードを表示するには、IDE のナビゲーションメニューでをクリックし、IDE-DEV/ag-web/app/app.py ファイルを選択します。

拡張バージョンのバックエンドアプリで、次の処理が行われます。
- 前のタスクで作成したエージェントの REASONING_ENGINE_ID を使用して、Reasoning Engine ランタイムから remote_agent のハンドルが取得されます。
- `ask_gemini() 関数を定義する新しい /ask_gemini エンドポイントが定義されます。
- この関数は、ユーザー提供の query パラメータをリクエストから Reasoning Engine（remote_agent）に渡し、エージェントからの回答を返します。

バックエンドアプリをビルドして Cloud Run に再デプロイする

バックエンドアプリのフォルダに移動します。
cd ~/ag-web/app
スクリプトを実行し、指定した Cloud Run リージョンにアプリを再デプロイします。
./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

バックエンドアプリをテストする

アプリの機能は、そのアプリの Cloud Run エンドポイントにアクセスしてテストします。

前の手順で生成したアプリのエンドポイント URL をコピーし、新しいブラウザタブでその URL に移動します。
アプリが読み込まれると、ホームページに [Welcome to the ag-web backend app] と表示されます。
ブラウザの URL バーで、次のパスを URL の末尾に追加します。
/ask_gemini?query=where can I buy the dino pin
アプリは、エージェントが先ほど作成した Vertex AI Search データストアから取得した結果で応答します。
Chrome Dino Enamel Pin is a product sold at Google Merch Shop. The price is 7.00 USD. You can buy the product at their web site: https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/. （Chrome Dino エナメルピンは、Google Merch Store で販売されている商品です。価格は 7.00 米ドルです。商品は、ウェブサイト https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/ で購入できます。）
ブラウザの URL バーで、パスを以下に置き換えます。
/ask_gemini?query=what is fallingwater
アプリは、エージェントがノートブックで構成した Wikipedia API から取得した結果で応答します。
Fallingwater was designed by architect Frank Lloyd Wright in 1935. It is located in southwest Pennsylvania, about 70 miles southeast of Pittsburgh. The house is famous because it was built partly over a waterfall. （落水荘は、建築家フランクロイドライトが 1935 年に設計しました。ペンシルバニア州南西部、ピッツバーグから南東に約 110 km の場所にあります。この建物は、その一部が滝の上に建てられていることで有名です。）

タスク 6. Gemini 2.0 Flash をテスト運用する

バックエンドアプリ、Vertex AI Search コンポーネント、Reasoning Engine エージェントを開発してデプロイしたので、Flutter フロントエンドの設計と構築を始めることができます。

Flutter アプリでは、アプリにアップロードした写真に関する詳細情報をユーザーが確認できます。このアプリは Gemini と統合されており、写真に関する回答を生成します。また、AI エージェントを使用することにより、チャットインターフェースで回答を提供します。

フロントエンドアプリを開発する前に、Gemini 2.0 Flash モデルから返される回答の構造を定義する必要があります。このモデルは、このラボで先ほどデプロイした AI エージェントによって使用されます。

このタスクでは、Gemini 2.0 Flash モデルにプロンプトを送信し、モデルの回答を JSON 形式で表示します。

Gemini 2.0 Flash は、Cloud コンソールの Vertex AI Studio で利用できます。Vertex AI Studio にアクセスするには、ナビゲーションメニュー（）をクリックし、[Vertex AI] > [プロンプトを作成]（Vertex AI Studio の下）を選択します。
Vertex AI Studio の使用に必要な API を有効にするには、[同意して続行] をクリックします。
注: Vertex AI Studio は、Google Cloud コンソールのツールです。アプリケーションで生成 AI モデルの機能を活用するために、モデルを迅速にテストしてプロトタイプを作成できます。
[プロンプト] で [メディアを挿入] をクリックし、[Cloud Storage からインポート] を選択します。
ラボバケットの名前の横にある [>] をクリックします。
画像ファイル fallingwater.jpg を選択し、[選択] をクリックします。

画像がプロンプトボックスにアップロードされます。
モデルにプロンプトで指示するには、画像の下にあるプロンプトボックスに「これは何ですか？」と入力し、[送信]（）をクリックします。

モデルが、画像内のオブジェクトを正しく説明する簡潔な回答を生成します。
モデルから詳細情報を JSON 形式で取得するには、テキストプロンプトを変更します。
What is this? Provide the name and description of the object, and be as specific as possible. Also include a list of 3 follow-up questions that I can ask for more information about this object. Generate the response in JSON format with the keys "name", "description", and "suggestedQuestions".
[送信]（）をクリックします。
モデルによって生成された JSON レスポンスを表示します。
{ "name": "Fallingwater", "description": "This is Fallingwater, a house designed by renowned architect Frank Lloyd Wright. It's built over a waterfall on Bear Run in rural southwestern Pennsylvania, and is considered a masterpiece of organic architecture, seamlessly blending with its natural surroundings.", "suggestedQuestions": [ "Who commissioned Frank Lloyd Wright to design Fallingwater?", "What are some of the key architectural features of Fallingwater?", "Is Fallingwater open to the public, and if so, how can I visit?" ] }
これで、プロンプトとモデルの回答が JSON 形式で得られ、Flutter アプリのビルドに使用できます。
注: モデルから返される回答は、上記の回答と異なる場合があります。

タスク 7. Flutter フロントエンドアプリをデプロイする

モデルから返されるデータの構造が決まったので、フロントエンドアプリを構築することができます。

Flutter は、オープンソースのマルチプラットフォームアプリ開発フレームワークです。Android、iOS、web、macOS、Windows、Linux で動作する 1 つのコードベースを作成できます。Flutter アプリは、Dart プログラミング言語で開発されています。

このラボでは、Flutter アプリをウェブアプリケーションとしてデプロイし、ブラウザを使用してアクセスできるようにするため、ターゲットプラットフォームとして web を使用します。

このタスクでは、Flutter アプリのコードを確認し、アプリをウェブアプリケーションとしてビルドおよび実行します。

Flutter アプリのコードベースを確認する

このアプリの機能の一つとして、ユーザーが観光名所の写真をアップロードし、Gemini にクエリを実行してその写真に関する情報を取得する機能があります。このラボでは、Flutter アプリは開発され、Cloud Storage で利用できるようになっています。

IDE のターミナルで、Flutter アプリのコードをダウンロードします。
gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/app ~
アプリプロジェクトの依存関係を取得するには、IDE のターミナルウィンドウで次のコマンドを実行します。
cd ~/app; flutter pub get
IDE でコードを表示するには、そのナビゲーションメニュー（）で [File] をクリックし、[Open Folder] を選択します。
リストから /home/ide-dev/app/ を選択し、[OK] をクリックします。

フォルダ内のファイルの作成者を信頼するには、[はい、この作成者を信用します] をクリックします。

app フォルダの内容の概要は次のとおりです。

フォルダ / ファイル	説明
app	Flutter アプリを構成するサブフォルダとファイルが格納されたプロジェクトのルートフォルダ。
android/ios/linux/macos/web/windows	サポートされている各プラットフォームで Flutter アプリを実行するために必要なプラットフォーム固有のファイルが保存されています。
lib	機能、ルーティング、データモデル、ユーザーインターフェースを含む、アプリケーションの中核となる Dart ファイルが保存されています。
test	アプリのウィジェットをテストするために使用される Dart テストが保存されています。
pubspec.yaml	アプリの依存関係、Flutter のバージョン、他の構成設定が保存されています。
analysis_options.yaml	アプリの静的解析の構成設定が保存されています。

これらのフォルダにあるファイルの一部を見てみましょう。

[エクスプローラ] メニューで /app/lib/models フォルダをクリックし、metadata.dart ファイルをクリックして開きます。

metadata.dart ファイルには、Flutter アプリで使用されるデータモデルが保存されています。
class Metadata { String name = ''; String description = ''; List suggestedQuestions = []; // 以下略 ... }
メタデータオブジェクトの属性は、Gemini API からの回答で返される JSON 属性にマッピングされます。fromJson メソッドは、呼び出されたときにオブジェクト属性を初期化します。
[エクスプローラ] メニューで、/app/lib/main.dart ファイルをクリックして開きます。

これは Flutter アプリのアプリケーションエントリポイントです。このファイル内のコードは、初期化タスクの実行後、マテリアルコンポーネントを使用してアプリの UI をビルドし、アプリのタイトル、テーマ、ルーティング構成を設定します。
注: Material アプリにまず表示されるのは MaterialApp ウィジェットです。このウィジェットは、アプリ内のさまざまな画面へのルーティングを管理する Navigator など、多くの便利なウィジェットをアプリのルートにビルドします。
アプリのルーティング構成を表示するには、[エクスプローラ] メニューで /app/lib/functionality/routing.dart ファイルをクリックして開きます。

このファイルのコードは、アプリの /、/chat、/settings のルートを定義します。

Flutter では、アプリのビルドに使用される宣言型クラスであるウィジェットというコンセプトが使用されます。Flutter では、ウィジェットを構成してより複雑なウィジェットをビルドし、ウィジェットツリーを形成することでレイアウトを作成します。Flutter での UI のビルドについて詳しくは、こちらのドキュメントをご覧ください。
アプリの UI 画面と機能の一部を担うコードを見てみましょう。[エクスプローラ] メニューで、/app/lib/ui/screens/quick_id.dart ファイルをクリックして開きます。

このファイルには、アプリのウィジェットをビルドするクラスが保存されています。アプリのメインページをビルドするクラス GenerateMetadataScreen が含まれており、routing.dart ファイルで定義された / パスから呼び出されます。この UI では、ユーザーはパソコンやモバイルデバイスから画像をアップロードしたり、デバイスのカメラで写真を撮影したりすることができます。

アプリで使用される他の UI 画面は、設定とチャットページ用であり、app/lib/ui/screens/ フォルダの settings.dart ファイルと chat.dart ファイルに実装されています。

アプリの初期化時、アプリにより使用される Gemini 生成 AI モデルのインスタンスを取得するために Vertex AI for Firebase Dart SDK が使用されます。これは _GenerateMetadataScreenState クラスで実装されています。
void initState() { super.initState(); model = FirebaseVertexAI.instance.generativeModel( model: geminiModel, generationConfig: GenerationConfig( temperature: 0, responseMimeType: 'application/json', ), ); }
ユーザーが画像を選択すると、アプリは画像とテキストプロンプトを使用して Vertex AI Gemini API を呼び出します。使用されるテキストプロンプトは、前述のタスクで Gemini 2.0 Flash モデルをテスト運用したときにテストしたものと同じです。

_sendVertexMessage() メソッドには、プロンプトを送信するコードが含まれています。メソッドのコードの一部を以下に示します。
Future _sendVertexMessage() async { ... final messageContents = Content.multi( [ TextPart( 'What is the subject in this photo? Provide the name of the photo subject, and description as specific as possible, and 3 suggested questions that I can ask for more information about this object. Answer in JSON format with the keys "name", "description" and "suggestedQuestions".'), DataPart('image/jpeg', _image!), ], ); var response = await model.generateContent([messageContents]); var text = response.text; if (text == null) { _showError('No response from API.'); return; } else { var jsonMap = json.decode(text); if (mounted) { context.read().updateMetadata(Metadata.fromJson(jsonMap)); } } ... }
モデルから生成される JSON の回答はデコードされ、name、description、suggestedQuestions が抽出されます。抽出された内容はローカルに保存され、アプリ UI に表示されます。

Flutter アプリを Firebase に接続する

app ルートプロジェクトフォルダに移動し、flutterfire_cli パッケージを有効にします。
dart pub global activate flutterfire_cli
Flutter アプリを Firebase に登録するには、次のコマンドを実行します。
flutterfire configure --project={{{project_0.project_id|set at lab start}}}
コマンドを実行すると、firebase_options.dart 構成ファイルが Flutter プロジェクトの lib フォルダに追加されます。
サポートされるプラットフォームをアプリ用に構成するには、Space キーを押して、web 以外のすべてのプラットフォームの選択を解除します。矢印キーを使用してプラットフォームをスクロールします。Enter キーを押します。

Flutter ウェブアプリが登録されて、Firebase で使用できるようになりました。

Flutter アプリのチャット機能を構成する

Flutter アプリにはチャット機能があり、ユーザーがアプリにアップロードした画像の詳細情報を確認したり、より最新の情報を持っている可能性のある他の外部データソースからの情報をリクエストしたりできます。そのためには、Gemini モデルをそれらのデータソースに接続（ground）する方法が必要です。

この機能を実装するため、Flutter アプリは、先ほどデプロイした Reasoning Engine エージェントと統合されます。統合は、ビルドして Cloud Run にデプロイしたバックエンドアプリのエンドポイントに Flutter アプリを接続することにより実現します。

まず、バックエンドアプリの Cloud Run エンドポイントのホスト名を取得し、その値を環境変数に格納します。IDE のターミナルウィンドウで、次のコマンドを実行します。
BACKEND_APP_HOST=$(gcloud run services describe ag-web --region {{{project_0.default_region|set at lab start}}} --format 'value(status.url)' | cut -d'/' -f3); echo $BACKEND_APP_HOST
Flutter アプリの場合、バックエンドアプリのエンドポイントは ~/app/lib/config.dart ファイルで構成されています。ファイル内の構成エントリを更新します。
sed -i "s/cloudRunHost = .*/cloudRunHost = '$BACKEND_APP_HOST';/" ~/app/lib/config.dart
変更を確認するには、IDE の [エクスプローラ] メニューで IDE-DEV/app/lib/config.dart ファイルをクリックして開きます。以下のサンプルに従って、cloudRunHost 構成エントリの値が更新されたことを確認します。

注: この値は、前の手順で設定した `BACKEND_APP_HOST` 環境変数の値と一致している必要があります。

チャット機能のコードを確認する

チャット機能を実装する Flutter アプリのコードを見てみましょう。

IDE の [エクスプローラ] メニューで、/app/lib/ui/screens/chat.dart ファイルをクリックして開きます。

ChatPage クラスは、UI のチャットページ用の Flutter ウィジェットをビルドします。このページは、[詳細を表示] ボタンを押すと UI に表示されます。

チャット UI をビルドするため、このアプリでは flutter_chat_ui_package を使用します。これで、カスタマイズ可能なチャットのボイラープレートコードのほとんどが実装されます。build() メソッドは、Chat クラスを使用してウィジェットをビルドします。
Widget build(BuildContext context) { ... Chat( typingIndicatorOptions: TypingIndicatorOptions( typingUsers: typingUsers, ), listBottomWidget: suggestionsWidget, messages: _messages, onSendPressed: _handleSendPressed, showUserAvatars: true, showUserNames: true, user: _user, theme: DefaultChatTheme( receivedMessageBodyTextStyle: TextStyle( color: Theme.of(context).colorScheme.onSurface, ), sentMessageBodyTextStyle: TextStyle( color: Theme.of(context).colorScheme.onSecondary, ), userAvatarNameColors: [ Theme.of(context).colorScheme.primary, ], backgroundColor: Theme.of(context).colorScheme.surfaceContainerHigh, primaryColor: Theme.of(context).colorScheme.primary, secondaryColor: Theme.of(context).colorScheme.surface, ), ), ... }
listBottomWidget は、前の Gemini 呼び出しからの回答で返される質問の候補のリストを表示するために使用され、ユーザーはチャットメッセージとして質問を選択できます。

_handleSendPressed() コールバックメソッドは、ユーザーがチャットウィンドウで [送信] をクリックしたときに呼び出されます。このメソッドは、新しいメッセージを構築して、そのメッセージをメッセージリストに追加し、askAgent() メソッドを使用してメッセージをバックエンドに送信します。
コードをスクロールして、askAgent() メソッドを見つけます。

Reasoning Engine エージェントを使用して Gemini を呼び出すには、askAgent() メソッドで、バックエンドアプリの Cloud Run エンドポイントにある /ask_gemini URL にリクエストを送信します。リクエストのクエリパラメータには、Gemini への前回の呼び出しで返された画像の name と description、およびユーザーのメッセージが含まれています。
Future askAgent( String name, String description, String question) async { var query = 'The photo is $name. $description. $question.'; var endpoint = Uri.https(cloudRunHost, '/ask_gemini', {'query': query}); var response = await http.get(endpoint); if (response.statusCode == 200) { var responseText = convert.utf8.decode(response.bodyBytes); return responseText.replaceAll(RegExp(r'\*'), ''); } return 'Sorry I can\'t answer that.'; }
その後、関数 _sendMessageToAgent() を呼び出すことにより、バックエンドからの回答がチャットウィンドウのメッセージのリストに追加されます。

Flutter アプリをデプロイする

Flutter アプリの構成が完了したので、アプリをビルドしてデプロイできます。このラボでは、アプリをウェブアプリケーションとして実行するため、Flutter ウェブ用の開発サーバーである Fwr を使用します。

Flutter アプリのフォルダ内にいることを確認します。IDE のターミナルウィンドウで、次のコマンドを実行します。
cd ~/app
アプリプロジェクトの依存関係を取得するには、次のコマンドを実行します。
flutter pub get
プロジェクトを構築してウェブサーバーを起動するには、次のコマンドを実行します。
fwr
サーバーが起動して Flutter アプリにサービスを提供するまで待ちます。起動すると、コマンドの出力は次のようになります。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 Firebase プロジェクトと Flutter アプリを構成する

タスク 8. Flutter アプリをテストする

Flutter アプリの機能をテストしましょう。

テスト画像をダウンロードする

アプリをテストするには、まず画像をダウンロードしてパソコンに保存します。URL をコピーして、別個のブラウザタブで画像を表示します。

落水荘の画像
画像を右クリックして、パソコンに保存します。
同様に、以下の URL から Google Chrome Dino ピンの画像をダウンロードします。

Google Chrome Dino ピンの画像

アプリをテストする

Flutter アプリにアクセスするには、Qwiklabs の認証情報パネルからライブサーバーの URL をコピーし、新しいブラウザタブに貼り付けます。
アプリが読み込まれるまで数秒待ちます。次に、[ライブラリから選択] をクリックして落水荘の画像をアップロードします。

画像をアップロードすると、アプリが Vertex AI Gemini API を呼び出して、アプリの UI に表示される画像の名前と説明を含む回答を生成します。

アプリ UI の名前フィールドと説明フィールドに Gemini モデルの回答が反映されるまで数秒かかる場合があります。
注: 権限拒否エラーが表示された場合、それを無視し、[OK] ボタンをクリックして続行します。[画像を削除] をクリックしてから、画像をもう一度アップロードします。
[詳細を表示] をクリックします。

チャットページが読み込まれ、前回の Gemini API 呼び出しで回答に含まれていた質問の候補が表示されます。

注: 質問の提案が表示されない場合、ページを更新してから、前の 2 つの手順を繰り返して画像をアップロードします。
質問の提案のいずれかをクリックして、チャットエージェントからの回答を表示します。

エージェントがバックエンドアプリの Cloud Run エンドポイントに HTTPS 呼び出しを行った後、バックエンドアプリが Reasoning Engine エージェントを呼び出します。このエージェントは、Gemini を使用して Wikipedia から回答を返します。

商品データでアプリをテストする

チャット UI で [画像を削除] をクリックします。
[ライブラリから選択] をクリックして、先ほど保存した Google Chrome Dino ピンの画像をアップロードします。

画像をアップロードすると、アプリが Vertex AI Gemini API を呼び出して、アプリの UI に表示される画像の名前と説明を含む回答を生成します。
[詳細を表示] をクリックします。
チャットメッセージボックスに、次のように入力します。
このピンはどこで購入できますか？
エージェントがバックエンドアプリの Cloud Run エンドポイントに HTTPS 呼び出しを行った後、バックエンドアプリが Reasoning Engine エージェントを呼び出します。このエージェントは、Gemini を使用して Vertex AI Search データストアから回答を返します。
（省略可）Flutter アプリがモバイルレイアウトに収まることを確認するため、ブラウザウィンドウのサイズをモバイルデバイスと同程度のサイズに変更します。

これは、Flutter アプリが画面サイズやウィンドウサイズに応じて表示を変化できることを示しています。Flutter のウィジェットとパッケージは、デバイス設定に基づいてアプリをレスポンシブにし、適応させるのに役立ちます。

ラボを終了する

ラボでの学習が完了したら、[ラボを終了] をクリックします。ラボで使用したリソースが Qwiklabs から削除され、アカウントの情報も消去されます。

ラボの評価を求めるダイアログが表示されたら、星の数を選択してコメントを入力し、[送信] をクリックします。

星の数は、それぞれ次の評価を表します。

星 1 つ = 非常に不満
星 2 つ = 不満
星 3 つ = どちらともいえない
星 4 つ = 満足
星 5 つ = 非常に満足

フィードバックを送信しない場合は、ダイアログボックスを閉じてください。

フィードバック、ご提案、修正が必要な箇所については、[サポート] タブからお知らせください。

お疲れさまでした

このラボでは、次のことを行いました。

Google Cloud コンソールで Vertex AI Agent Builder を使用して検索データストアと検索アプリを作成する。
Vertex AI Workbench を使用して Reasoning Engine エージェントをデプロイする。
Vertex AI Search と Reasoning Engine エージェントと統合する Python アプリを構築する。
アプリを Cloud Run にデプロイし、Flutter アプリのバックエンドとして使用する。
Firebase プロジェクトを設定し、Flutter アプリに接続する。
Flutter アプリのコードを確認して、機能の一部について理解する。
Flutter アプリを実行してテストする。

AI Applications を使用して AI エージェントを Flutter アプリに統合する

チェックポイント

AI Applications を使用して AI エージェントを Flutter アプリに統合する

概要

目標

設定