AI 時代におけるアプリケーションの構築

この Codelab について

最終更新: 2月 10, 2025

作成者: Luke Schlangen & Debi Cabrera

1. 概要

このラボでは、Google の生成 AI プロダクトを使用して、Gemini Cloud Assist を活用して Google Cloud にインフラストラクチャを構築し、Data Canvas の自然言語から SQL への機能を使用して BigQuery データをクエリします。また、Gemini Code Assist を使用して Colab Enterprise Jupyter ノートブックと Eclipse Theia（Visual Studio Code）でコードを記述し、Cloud Storage と BigQuery のグラウンドソースに基づいて構築された AI 検索機能とチャット機能を Vertex AI Agent Builder に統合します。

私たちの目標は、AI Recipe Haven というレシピと料理のウェブサイトを作成することです。このサイトは Python と Streamlit で構築され、2 つの主要なページが含まれます。Cooking Advice は、Gemini と Vertex AI Agent Builder のグラウンディングソースを使用して作成する chatbot をホストします。この chatbot は、一連の料理本に関連付けられ、料理に関するアドバイスを提供し、料理関連の質問に回答します。Recipe Search は、Gemini からデータを取得する検索エンジンです。今回は、BigQuery のレシピデータベースを基盤としています。

この演習のコードで行き詰まった場合は、すべてのコードファイルのソリューションが、演習の GitHub リポジトリの solution ブランチにあります。

目標

このラボでは、次のタスクの実行方法について学びます。

Gemini Cloud Assist を有効にして使用する
Vertex AI Agent Builder で料理のアドバイス chatbot の検索アプリを作成する
Gemini Code Assist を使用して Colab Enterprise ノートブックでデータを読み込み、クリーンアップする
Vertex AI Agent Builder でレシピ生成ツールの検索アプリを作成する
Gemini を活用して、コアとなる Python と Streamlit のウェブアプリケーションのフレームワークを作成します。
ウェブアプリケーションを Cloud Run にデプロイする
料理のアドバイスページを、レシピ検索の Agent Builder アプリに接続する
（省略可）レシピ検索ページをレシピ検索の Agent Builder アプリに接続する
（省略可）最終的なアプリケーションを確認する

2. 前提条件

Google アカウントをお持ちでない場合は、Google アカウントを作成する必要があります。
- 仕事用または学校用のアカウントではなく、個人アカウントを使用している。職場用アカウントや学校用アカウントには、このラボに必要な API を有効にできない制限が適用されている場合があります。

3. プロジェクトの設定

Google Cloud コンソールにログインします。
Cloud コンソールで課金を有効にする。
- このラボを完了しても、Cloud リソースの費用は 1 米ドル未満です。
- このラボの最後にある手順に沿ってリソースを削除すると、それ以上の請求が発生しなくなります。
- 新規ユーザーは、300 米ドル分の無料トライアルをご利用いただけます。
- バーチャルハンズオンラボイベントに参加する5 米ドル分のクレジットが提供される場合があります。
新しいプロジェクトを作成するか、既存のプロジェクトを再利用するかを選択します。
Cloud 課金システムの [マイプロジェクト] で、課金が有効になっていることを確認します。
- 新しいプロジェクトの Billing account 列に Billing is disabled と表示されている場合:
  1. [Actions] 列のその他アイコンをクリックします。
  2. [お支払い情報を変更] をクリックします。
  3. 使用する請求先アカウントを選択します。
- ライブイベントに参加している場合、アカウントの名前は Google Cloud Platform 無料トライアルの請求先アカウント になる可能性があります。

4. Gemini Cloud Assist を有効にして使用する

このタスクでは、Gemini Cloud Assist を有効にして使用します。Google Cloud コンソールで作業しているときに、Gemini Cloud Assist はアドバイスを提供し、Google Cloud インフラストラクチャの構築、構成、モニタリングをサポートします。また、gcloud コマンドの候補を提示したり、Terraform スクリプトを作成したりすることもできます。

Cloud Assist を有効にして使用するには、Cloud コンソール UI の上部にある検索ボックスをクリックし、[Gemini に質問] または [Cloud コンソールの Gemini に質問] を選択します。
ページの [必要な API] セクションまでスクロールし、Gemini for Google Cloud API を有効にする。
チャットインターフェースがすぐに表示されない場合は、[チャットを開始] をクリックします。まず、Cloud Shell エディタの使用のメリットを Gemini に説明してもらいます。生成されたレスポンスを確認します。
次に、Agent Builder のメリットと、生成された回答を基盤とする方法について尋ねます。
最後に、比較を見てみましょう。Google Cloud コンソールの Gemini チャットウィンドウで、次の質問をします。
```
What are the major steps to creating a search app grounded in a GCS data source using Vertex AI Agent builder?
```

5. Vertex AI Agent Builder で料理のアドバイス chatbot の検索アプリを作成する

作成するウェブサイトには、料理に関する質問の答えを見つけられるように設計された chatbot を含む料理のアドバイスページがあります。70 個のパブリックドメインクックブックを含むソースに基づく Gemini を搭載します。クックブックは、Gemini が質問に回答する際に使用する信頼できる情報源として機能します。

Cloud コンソールの検索ボックスを使用して、[Vertex AI] に移動します。ダッシュボードで、[すべての推奨 API を有効化] をクリックします。この処理には数分かかることがあります。Vertex AI API 自体を有効にする必要があることに関するポップアップボックスが表示された場合は、その API も有効にしてください。API が有効になったら、次のステップに進みます。
検索を使用して [Agent Builder] に移動し、[続行して API を有効にする] をクリックします。
先ほどのアドバイスで Gemini が提案したように、Agent Builder で検索アプリを作成する際は、信頼できるデータソースの作成から始めます。ユーザーが検索すると、Gemini は質問を理解し、インテリジェントな回答を作成する方法を理解しますが、その回答で使用される情報は、固有の知識から取得するのではなく、グラウンディングされたソースから取得します。左側のメニューで [データストア]、[データストアを作成] の順に選択します。
料理のアドバイスページの基盤として使用しているパブリックドメインの料理本は、現在、外部プロジェクトの Cloud Storage バケットにあります。Cloud Storage のソースタイプを選択します。
インポートする情報の種類に関連するデフォルトオプションを確認しますが、変更しないでください。インポートタイプは [フォルダ] のままにして、バケットパスに labs.roitraining.com/labs/old-cookbooks を指定し、[続行] をクリックします。
データストアに名前を付けます。old-cookbooks。[編集] をクリックして ID を old-cookbooks-id に変更し、データストアを作成します。

Vertex AI Agent Builder は複数のアプリタイプをサポートしており、Data Store は各アプリの信頼できる情報源として機能します。検索アプリは、一般的な用途や検索に適しています。Chat アプリは、Dataflow をベースとする chatbot/voicebot アプリケーションの生成フローに使用します。おすすめアプリは、より優れたレコメンデーションエンジンの作成に役立ちます。エージェントアプリは、生成 AI を活用したエージェントを作成するためのものです。最終的には、エージェントが目的に最も適したアプリタイプになると思いますが、現在はプレビュー版であるため、検索アプリタイプのままにします。

左側のメニューで [アプリ] に移動し、[新しいアプリを作成] をクリックします。
[ウェブサイトを検索] カードで [作成] をクリックします。アプリの名前を cookbook-search にします。[編集] をクリックして、アプリ ID を cookbook-search-id に設定します。会社を Google に設定し、[続行] をクリックします。
先ほど作成した old-cookbooks データストアを確認し、検索アプリを作成します。

[アクティビティ] タブを調べると、引き続きクックブックのインポートとインデックス処理が行われていることがわかります。エージェントビルダーが指定した 70 個の Cookbook に含まれる数千のページをインデックスに登録するには、5 分以上かかります。処理が完了するまで、レシピ生成ツール用のレシピデータベースのデータを読み込んでクリーンアップしましょう。

6. Gemini Code Assist を使用して Colab Enterprise ノートブックでデータを読み込み、クリーンアップする

Google Cloud には、Jupyter ノートブックを操作するための主な方法がいくつかあります。Google の最新サービスである Colab Enterprise を使用します。Google の Colab プロダクトをご存じの方も多いと思います。これは、無料の環境で Jupyter ノートブックを試したい個人や組織でよく使用されています。Colab Enterprise は、Google の他のクラウドプロダクトと完全に統合され、GCP 環境のセキュリティとコンプライアンス機能を最大限に活用する Google Cloud の商用サービスです。

Colab Enterprise が提供する機能の 1 つは、Google の Gemini Code Assist との統合です。Code Assist はさまざまなコードエディタで使用でき、コーディング中にアドバイスやシームレスなインライン候補を提案します。レシピデータを整理する際に、この生成アシスタントを利用します。

検索を使用して [Colab Enterprise] に移動し、[ノートブックを作成] をクリックします。Colab の新しい機能を試すよう求められた場合は、閉じてください。ノートブックの基盤となるランタイム（コンピューティング能力）を起動するには、新しいノートブックの右上にある [接続] をクリックします。
[File] > [Rename] をクリックして、ノートブックの名前を Data Wrangling に変更します。
[+ テキスト] をクリックして新しいテキストボックスを作成し、上矢印を使用してページの最初のセルに移動します。
テキストボックスを編集して、次のように入力します。
```
# Data Wrangling

Import the Pandas library
```
作成したテキストブロックの下のコードブロックで imp と入力すると、Gemini Code Assist によってインポートの残りの部分がグレーで提案されます。Tab キーを押して提案を承認します。
```
import pandas as pd
```
インポートコードボックスの下に別のテキストボックスを作成し、次のように入力します。
```
Create a Pandas DataFrame from: gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv. View the first few records.
```
別のコードブロックを作成して編集します。再度 df = を入力し、Gemini Code Assist によって生成されたコードを確認します。生成された候補の上に Python キーワードのオートコンプリートプルダウンリストが表示された場合は、Esc キーを押して、ライトグレーの候補コードを表示します。再度 Tab キーを押して候補を承認します。候補に head() 関数呼び出しが含まれていない場合は、追加します。
```
df = pd.read_csv('gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv')
df.head()
```
Pandas をインポートした最初のコードセルをクリックし、[Commands] メニューまたはキーボードを使用して、選択したセルを実行します。キーボードの Shift+Enter キーを押すと、セルが実行され、フォーカスが次のセルに移動します。必要に応じて、新しいセルが作成されます。セルが実行されるまで待ってから次に進みます。注: セルが実行されていない場合は、左側に [ ] が表示されます。セルの実行中は、回転する作業アニメーションが表示されます。セルが終了すると、[13] などの数値が表示されます。
CSV を DataFrame に読み込むセルを実行します。ファイルが読み込まれるのを待ってから、最初の 5 行のデータを調べます。これは、BigQuery に読み込むレシピデータであり、最終的にはレシピ生成ツールの基盤として使用します。
新しいコードブロックを作成し、以下のコメントを入力します。コメントを入力したら、次のコード行に移動すると、候補として df.columns が表示されます。承認してセルを実行します。
```
# List the current DataFrame column names
```
Jupyter ノートブックで Gemini Code Assist からヘルプを得る方法は、コードセルの上のテキストセルとコードセル内のコメントの 2 つがあることを説明しました。コードセル内のコメントは Jupyter ノートブックで適切に機能しますが、このアプローチは Google の Gemini Code Assist をサポートする他の IDE でも機能します。
列を少しクリーンアップしましょう。列 Unnamed: 0 の名前を id に、link の名前を uri に変更します。プロンプト > コードのいずれかの方法でコードを作成し、満足したらセルを実行します。
```
# Rename the column 'Unnamed: 0' to 'id' and 'link' to 'uri'
df.rename(columns={'Unnamed: 0': 'id', 'link': 'uri'}, inplace=True)
```
source 列と NER 列を削除し、head() を使用して最初の数行を表示します。Gemini にサポートを依頼します。最後の 2 行を実行して結果を確認します。
```
# Remove the source and NER columns
df.drop(columns=['source', 'NER'], inplace=True)
df.head()
```
データセットに含まれるレコードの数を確認しましょう。プロンプトテクニックを選択して、Gemini でコードを生成できるかどうかを確認します。
```
# Count the records in the DataFrame
df.shape # count() will also work
```
223 万件のレコードは、おそらく Google が処理できるレシピの数を上回っています。エージェントビルダーのインデックス処理は、今回の演習では時間がかかりすぎる可能性があります。妥協案として、15 万件のレシピをサンプリングして、そのデータセットで作業しましょう。プロンプト > コードのアプローチを使用してサンプルを取得し、dfs（小）という名前の新しい DataFrame に保存します。
```
# Sample out 150,000 records into a DataFrame named dfs
dfs = df.sample(n=150000)
```
レシピソースデータは BigQuery に読み込む準備ができました。読み込みを行う前に、BigQuery に移動してテーブルを保持するデータセットを準備します。Google Cloud コンソールの検索ボックスを使用して [BigQuery] に移動します。BigQuery を右クリックして、新しいブラウザタブで開くことができます。
Gemini AI Chat パネルがまだ表示されていない場合は、Cloud コンソールの右上にある Gemini ロゴを使用して開きます。API を再度有効にするよう求められたら、[有効にする] を押すか、ページを更新します。プロンプトを実行します。What is a dataset used for in BigQuery? 回答を確認したら、How can I create a dataset named recipe_data using the Cloud Console? 結果を次の手順と比較します。
BigQuery エクスプローラペインで、プロジェクト ID の横にある縦に 3 つ並んだ点の [アクションを表示] メニューをクリックします。[データセットを作成] を選択します。
データセットと ID に recipe_data を指定します。ロケーションタイプは [US] のままにして、[データセットを作成] をクリックします。データセットがすでに存在するというエラーが表示された場合は、続行します。BigQuery で作成したデータセットを使用して、ノートブックに戻り、挿入を行います。
Colab Enterprise でデータハンドリングノートブックに戻ります。新しいコードセルで、project_id という名前の変数を作成し、現在のプロジェクト ID を保持します。手順の左上にある [ラボを終了] ボタンの下で、現在のプロジェクト ID を確認します。Cloud コンソールのホームページでも確認できます。値を project_id 変数に代入し、セルを実行します。
```
# Create a variable to hold the current project_id
project_id='YOUR_PROJECT_ID'
```
プロンプト > コードのアプローチを使用して、作成したデータセット recipe_data の recipes という名前のテーブルに DataFrame dfs を挿入するコードブロックを作成します。セルを実行します。
```
dfs.to_gbq(destination_table='recipe_data.recipes', project_id=project_id, if_exists='replace')
```

7. Vertex AI Agent Builder でレシピ生成ツールの検索アプリを作成する

レシピデータのテーブルが作成されました。このテーブルを使用して、レシピ生成ツールの基盤となるデータソースを構築しましょう。使用するアプローチは、料理のチャットボットの場合と同様です。Vertex AI Agent Builder を使用してデータストアを作成し、それを検索アプリの信頼できる情報源として使用します。

必要に応じて、Google Cloud コンソールの Gemini に、エージェントビルダー検索アプリを作成する手順を尋ねることができます。または、以下の手順に沿って作成することもできます。

検索を使用して [Agent Builder] に移動します。[データストア] を開き、[データストアを作成] をクリックします。今回は、BigQuery データストアタイプを選択します。
テーブル選択セルで [参照] を押して、recipes を検索します。表の横にあるラジオボタンをオンにします。他の qwiklabs-gcp-... プロジェクトのレシピが表示された場合は、自分のレシピを選択してください。注: 横にあるラジオボタンを選択するのではなく recipes をクリックすると、ブラウザで新しいタブが開き、BigQuery のテーブルの概要ページが表示されます。ブラウザのタブを閉じて、エージェントビルダーでラジオボタンを選択するだけです。
残りのデフォルトオプションを確認して変更せず、[続行] をクリックします。
スキーマ確認ページで、初期のデフォルト構成を確認します。ただし、変更は行いません。次へ
データストアに recipe-data という名前を付けます。データストア ID を編集して recipe-data-id に設定します。データストアを作成します。
左側のナビゲーションメニューを使用して [アプリ]、[新しいアプリを作成] の順に移動します。
[ウェブサイトを検索] カードで [作成] をクリックします。アプリに recipe-search という名前を付け、[編集] をクリックして ID を recipe-search-id に設定します。会社名を Google に設定して [続行] をクリックします。
今回は、recipe-data データソースを確認します。アプリを作成します。

データベーステーブルのインデックス作成にはしばらく時間がかかります。待っている間に、BigQuery の新しいデータキャンバスを試して、興味深いレシピがないか探してみましょう。

検索ボックスを使用して BigQuery に移動します。BigQuery Studio の上部にある、右端のタブの横にある下矢印をクリックし、[データキャンバス] を選択します。リージョンを us-central1 に設定します。
[データを検索する] をクリックします。データキャンバスの検索ボックスで recipes を検索し、Enter/Return を押して検索し、テーブル名の横にある [キャンバスに追加] ボタンをクリックします。
レシピテーブルのビジュアルビューが BigQuery データキャンバスに読み込まれます。テーブルのスキーマの確認、テーブル内のデータのプレビュー、その他の詳細の確認を行えます。テーブル表示の下にある [クエリ] をクリックします。
キャンバスには、ほぼ一般的な BigQuery クエリダイアログが読み込まれます。ただし、クエリウィンドウの上に、Gemini にヘルプをリクエストできるテキストボックスがあります。サンプルにケーキのレシピが含まれているかどうかを確認しましょう。次のプロンプトを実行します（テキストを入力して Enter/Return を押して SQL 生成をトリガーします）。
```
Please select the title and ingredients for all the recipes with a title that contains the word cake.
```
生成された SQL を確認します。問題がなければ、クエリを実行します。
悪くないですね。次のステップに進む前に、他のいくつかのプロンプトとクエリを試してみてください。テストを行う際は、より一般的なプロンプトを使って、効果的なものや効果的でないものを探します。たとえば、次のようなプロンプトです。
```
Do I have any chili recipes?
```
（新しいクエリを実行することを忘れないでください）チリのレシピのリストを返しましたが、次のように変更するまで材料は返されませんでした。
```
Do I have any chili recipes?  Please include their title and ingredients.
```
（はい、プロンプト時に「お願いします」と言っています。ママが喜ぶと思います）。チリのレシピの中にはキノコが入っているものがありますが、チリにキノコを入れるのは誰が望むでしょうか？そのようなレシピを除外するよう Gemini に指示しました。
```
Do I have any chili recipes?  Please include their title and ingredients, and ignore any recipes with mushrooms as an ingredient.
```

8. Cloud Shell エディタを開く

Cloud Shell エディタに移動します。
ターミナルが画面の下部に表示されない場合は、開きます。
- ハンバーガーメニューをクリックします。
- [Terminal] をクリックします。
- [New Terminal] をクリックします。
ターミナルで、次のコマンドを使用してプロジェクトを設定します。
- 形式:
```
gcloud config set project [PROJECT_ID]
```
- 例:
```
gcloud config set project lab-project-id-example
```
- プロジェクト ID がわからない場合:
  - すべてのプロジェクト ID を一覧表示するには、次のコマンドを使用します。
```
gcloud projects list | awk '/PROJECT_ID/{print $2}'
```
承認を求められたら、[承認] をクリックして続行します。
次のようなメッセージが表示されます。
```
Updated property [core/project].
```
WARNING が表示され、Do you want to continue (Y/N)? を求められた場合は、プロジェクト ID が正しく入力されていない可能性があります。N キー、Enter キーを押して、gcloud config set project コマンドをもう一度実行してみてください。

9. API を有効にする

ターミナルで、API を有効にします。

gcloud services enable \
  compute.googleapis.com \
  sqladmin.googleapis.com \
  run.googleapis.com \
  artifactregistry.googleapis.com \
  cloudbuild.googleapis.com \
  networkconnectivity.googleapis.com \
  servicenetworking.googleapis.com \
  cloudaicompanion.googleapis.com

承認を求められたら、[承認] をクリックして続行します。クリックして Cloud Shell を承認する

このコマンドが完了するまで数分かかる場合がありますが、最終的には次のような成功メッセージが表示されます。

Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.

10. Gemini を活用して、コアとなる Python と Streamlit のウェブアプリケーションのフレームワークを作成します。

Vertex AI Agent Builder のデータストアのインデックス登録が完了し、検索アプリの準備も整ったので、ウェブアプリケーションの作成に移りましょう。

作業中は Gemini Code Assist を利用します。Visual Studio Code で Gemini Code Assist を使用する方法については、こちらのドキュメントをご覧ください。

Cloud Shell エディタターミナルで、次のコマンドを実行してレシピアプリリポジトリのクローンを作成します。
```
git clone https://github.com/haggman/recipe-app
```
このコマンドを実行して、Cloud Shell エディタでアプリケーションフォルダを開きます。
```
cloudshell open-workspace recipe-app/
```
クローンを作成したフォルダを調べてウェブアプリケーションの作成を開始する前に、エディタの Cloud Code プラグインを Google Cloud にログインさせ、Gemini を有効にする必要があります。それでは、エディタの左下にある [Cloud Code - ログイン] をクリックします。リンクが表示されない場合は、しばらく待ってからもう一度確認してください。
ターミナルウィンドウに長い URL が表示されます。ブラウザで URL を開き、手順に沿って Cloud Code に Google Cloud 環境へのアクセス権を付与します。最後のダイアログで、確認コードをコピーし、Cloud Shell エディタのブラウザタブで待機中のターミナルウィンドウに貼り付けます。
しばらくすると、エディタの左下にある Cloud Code リンクが [Cloud Code - No Project] に変わります。新しいリンクをクリックしてプロジェクトを選択します。エディタの上部にコマンドパレットが開きます。[Google Cloud プロジェクトを選択する] をクリックして、プロジェクトを選択します。しばらくすると、エディタの左下にプロジェクト ID が表示されます。これは、Cloud Code が作業中のプロジェクトに正常に接続されたことを示します。
Cloud Code がプロジェクトに接続されたら、Gemini Code Assist を有効にできます。エディタインターフェースの右下にある、取り消し線が引かれた Gemini のロゴをクリックします。エディタの左側に Gemini チャットペインが開きます。[Google Cloud プロジェクトを選択] をクリックします。コマンドパレットが開いたら、プロジェクトを選択します。手順を正しく行った場合（および Google が何も変更していない場合）、アクティブな Gemini チャットウィンドウが表示されます。
ターミナル、Gemini チャット、Cloud Code の設定がすべて完了しました。[Explorer] タブを開き、現在のプロジェクト内のファイルを確認しましょう。
エクスプローラで requirements.txt ファイルを開いて編集します。[Gemini] チャットペインに切り替えて、次のように尋ねます。
```
From the dependencies specified in the requirements.txt file, what type of application are we building?
```
これで、Python と Streamlit を使用して、Vertex AI と Discovery Engine とやり取りするインタラクティブなウェブアプリケーションを構築できました。ここでは、ウェブアプリケーションコンポーネントに焦点を当てます。Gemini によると、Streamlit は、Python でデータドリブンのウェブアプリケーションを構築するためのフレームワークです。次のように尋ねます。
```
Does the current project's folder structure seem appropriate for a Streamlit app?
```
Gemini で問題が発生する傾向があるのは、この部分です。Gemini は、現在エディタで開いているファイルにアクセスできますが、プロジェクト全体を実際に表示することはできません。次のように質問してみてください。
```
Given the below, does the current project's file and folder structure seem appropriate for a Streamlit app?
- build.sh
- Home.py
- requirements.txt
- pages
-- Cooking_Advice.py
-- Recipe_Search.py
```
より適切な回答を取得する
Streamlit の詳細を確認しましょう。
```
What can you tell me about Streamlit?
```
Gemini が、メリットとデメリットを含む概要を表示していることがわかります。
デメリットについて確認したい場合は、次のように尋ねます。
```
What are the major downsides or shortcomings?
```
Gemini チャットは会話型（マルチターン）であるため、「Streamlit の」と指定する必要はありません。チャットセッション中であるため、Gemini は会話の内容を把握しています。Gemini のチャット履歴を消去するには、Gemini コードチャットウィンドウの上部にあるゴミ箱アイコンを使用します。

11. ウェブアプリケーションを Cloud Run にデプロイする

これで、コアアプリケーションの構造が完成しました。しかし、すべてが機能するでしょうか？では、Google Cloud のどこでホストすればよいでしょうか？

Gemini のチャットウィンドウで、次のように質問します。

If I containerize this application, what compute technologies in Google Cloud would be best for hosting it?

IDE で作業していない場合は、Google Cloud Assist を使用することもできます。Google Cloud コンソールを開き、Gemini Cloud Assist を開いて、次のように尋ねます。
```
If I have a containerized web application, where would be the best place to run it in Google Cloud?
```
2 つのアドバイスは同じでしたか？アドバイスのいずれかに同意または反対しますか？Gemini は生成 AI アシスタントであり、人間のアシスタントと同じように、Gemini が言うことに常に同意できるとは限りません。それでも、Google Cloud とコードエディタで作業する際に、このヘルパーを常に利用できるようにしておけば、作業効率を大幅に高めることができます。
ステートレスで存続期間の短いコンテナ化されたウェブアプリケーションには、Cloud Run が最適です。コードエディタの Gemini チャットウィンドウで、次のプロンプトを試します。
```
What steps would be required to run this application in Cloud Run?
```
最初に行う必要があるのは、Dockerfile の作成です。エディタを使用して、プロジェクトフォルダのルートに Dockerfile という名前のファイルを作成します。誤って [pages] フォルダに配置しないようにしてください。ファイルを開いて編集します。
サイドの Gemini Chat パネルを使用して Dockerfile を作成しましょう。次のようなプロンプトを使用します。結果がチャットに表示された場合は、提案された Dockerfile のすぐ上にあるコピーアイコンの横にある + を使用して、提案されたコードを Dockerfile に挿入します。
```
Create a Dockerfile for the application in the current folder. The dependencies are defined in requirements.txt and I want you to use the Python 3 slim bookworm base image.
```
Gemini は、同じプロンプトに対して常に同じ回答を返すわけではありません。Gemini に Dockerfile を初めてリクエストしたときに、私がおすすめするファイルが返されました。先ほど、次のような候補を受け取りました。
```
# Base image
FROM python:3-bookworm-slim

# Set working directory
WORKDIR /app

# Install dependencies
RUN apt-get update && apt-get install -y \
    build-essential \
    libpq-dev \
    gcc \
    python3-dev \
    && rm -rf /var/lib/apt/lists/*

# Install pip and virtualenv
RUN pip install --upgrade pip virtualenv

# Create virtual environment
RUN python3 -m venv venv

# Activate virtual environment
WORKDIR /app/venv/bin
RUN . activate

# Install Streamlit and libraries from requirements.txt
RUN pip install -r requirements.txt

# Copy application files
COPY . /app

# Expose port 8501 for Streamlit
EXPOSE 8501

# Start Streamlit app
CMD ["streamlit", "run", "main.py"]
```
これはかなり複雑な Dockerfile です。少し単純化してみます。Python に必要なものはすべてベースイメージにすでに含まれているため、apt-get セクションは必要ありません。また、Python コンテナで仮想環境を使用するとスペースが浪費されるため、削除します。expose コマンドは必須ではありませんが、使用しても問題ありません。また、main.py を起動しようとしていますが、このファイルは存在しません。

recipe-app フォルダに Dockerfile というファイルを作成し、次の内容を貼り付けます。

FROM python:3.11-slim-bookworm

WORKDIR /app

COPY requirements.txt .
RUN pip install --no-cache-dir --upgrade pip && \
    pip install --no-cache-dir -r requirements.txt

COPY . .

CMD ["streamlit", "run", "Home.py"]

Gemini はチャットウィンドウから操作できますが、Data Wrangling ノートブックで使用したコメントを使用して、コードファイル内で直接操作することもできます。また、Windows では Ctrl+i、Mac では Command+i を使用して呼び出すこともできます。Dockerfile のどこかをクリックし、適切な Command+i / Ctrl+i コマンドを使用して Gemini を有効にします。
プロンプトが表示されたら、以下を入力します。変更内容を確認し、[同意する] をクリックします。
```
Please comment the current file.
```
便利ですね。他の人のコードを扱う際に、コメントのないコードの基本的な理解を得るために時間を浪費し、変更を開始することすらできない経験を何度もしたことがあるでしょう。Gemini が役に立ちます。
次に、Cloud Run を使用して現在のフォルダの Dockerfile から recipe-web-app という名前の新しいイメージをビルドしてデプロイする方法について Gemini に尋ねます。
```
How could I use gcloud to build a new Cloud Run service named recipe-web-app from the current directory?
```

アプリケーションをビルドしてデプロイしましょう。ターミナルウィンドウで gcloud run deploy コマンドを実行します。

gcloud run deploy recipe-web-app \
    --allow-unauthenticated \
    --source=. \
    --region=us-central1 \
    --port=8501

Artifact Registry リポジトリの作成を求めるメッセージが表示されたら、enter/return キーを押します。

Deploying from source requires an Artifact Registry Docker repository to store built containers. A repository
named cloud-run-source-deploy in region us-central1 will be created.

Do you want to continue (Y/n)?

ビルドプロセスを監視すると、まず Artifact Registry Docker リポジトリがビルドされます。次に、Cloud Build を使用して、ローカルフォルダの Dockerfile からコンテナイメージを作成します。最後に、Docker イメージが新しい Cloud Run サービスにデプロイされます。スクリプトの最後に、使用する Cloud Run テスト URL が表示されます。

返されたリンクをブラウザの新しいタブで開きます。アプリケーションの構造とページを調べてみましょう。次に、生成 AI 機能をフックに接続する必要があります。

12. 料理のアドバイスページを、レシピ検索の Agent Builder アプリに接続する

ウェブアプリケーションのフレームワークは実行されていますが、2 つのワークページを 2 つの Vertex AI Agent Builder 検索アプリに接続する必要があります。まず、調理に関するアドバイスから見てみましょう。

Cloud Shell エディタのタブを開いたままにします。Google Cloud コンソールで検索を使用して、Vertex AI の [Chat] に移動します。
右側の設定ページのペインで、モデルを gemini-1.5-flash-002 に設定します。必要に応じてモデルが長い回答を返せるように、出力トークンの上限を最大までスライドします。[安全フィルタの設定] を開きます。[ヘイトスピーチ]、[性的に露骨なコンテンツ]、[ハラスメントコンテンツ] を [一部ブロック] に設定します。[危険なコンテンツ] を [少量をブロック] に設定し、[保存] をクリックします。ナイフや切断について話すことは、Gemini によって暴力と誤解される可能性があるため、危険なコンテンツの設定を少し下げています。
トグルをスライドして [グラウンディング] を有効にし、[カスタマイズ] をクリックします。グラウンディングソースを Vertex AI Search に設定し、データストアパスに次のようにします。YOUR_PROJECT_ID を、これらの手順の [ラボを終了] ボタンの近くにあるプロジェクト ID に変更し、接地設定を保存します。
```
projects/YOUR_PROJECT_ID/locations/global/collections/default_collection/dataStores/old-cookbooks-id
```
注: エラーが発生した場合は、プロジェクト ID を実際のプロジェクト ID に変更していないか、古い cookbooks エージェントビルダーデータストア ID を変更する手順を省略している可能性があります。[エージェントビルダー] > [データストア] > [old-cookbooks] で、実際のデータストア ID を確認します。
いくつかのチャットメッセージをテストします。以下から始めることをおすすめします。必要に応じて、他のいくつかのキーワードも試してみてください。
```
How can I tell if a tomato is ripe?
```
モデルは動作します。次に、コードをテストします。会話がコードの一部にならないようにするには、[会話を消去] をクリックしてから、[コードを取得] をクリックします。
コードウィンドウの上部にある [ノートブックを開く] をクリックして、Colab Enterprise でコードをテストし、アプリに統合する前にコードを完成させます。
少し時間をかけてコードをよく読みます。必要に応じていくつか変更を加えてみます。始める前に、最初のコードセルを実行してコンピューティングに接続し、AI Platform SDK をインストールします。ブロックの実行後、セッションを再起動するよう求められます。その場合は作成します。
Vertex AI Studio から取得したコードに移動します。メソッド multiturn_generate_content の名前を start_chat_session に変更しました。
model = GenerativeModel( メソッド呼び出しまでスクロールします。既存のコードでは generation_config と safety_settings が定義されていますが、実際には使用されていません。GenerativeModel の作成を次のように変更します。
```
model = GenerativeModel(
    "gemini-1.5-flash-002",
    tools=tools,
    generation_config=generation_config,
    safety_settings=safety_settings,
)
```

最後に、関数が chat オブジェクトを返すように、メソッドの chat = model.start_chat() のすぐ下に最後の行を追加します。完成した関数は次のようになります。注: このコードをノートブックにコピーしないでください。これは単なるサニティチェックです。

def start_chat_session():
    vertexai.init(project="qwiklabs-gcp-02-9a7298ceaaec", location="us-central1")
    tools = [
        Tool.from_retrieval(
            retrieval=grounding.Retrieval(
                source=grounding.VertexAISearch(datastore="projects/qwiklabs-gcp-02-9a7298ceaaec/locations/global/collections/default_collection/dataStores/old-cookbooks-id"),
            )
        ),
    ]
    model = GenerativeModel(
        "gemini-1.5-flash-002",
        tools=tools,
        generation_config=generation_config,
        safety_settings=safety_settings,
    )
    chat = model.start_chat()
    return chat

コードセルの一番下までスクロールし、古い関数を呼び出す最後の行を変更して、新しい関数名を呼び出し、返されたオブジェクトを変数 chat に格納します。変更に問題がなければ、セルを実行します。
```
chat = start_chat_session()
```
新しいコードセルを作成し、コメント # Use chat to invoke Gemini and print out the response を追加します。次の行に移動して resp と入力すると、Gemini によってブロックが自動的に完成します。プロンプトを How can I tell if a tomato is ripe? に更新します。セルを実行する
```
response = chat.send_message("How can I tell if a tomato is ripe?")
print(response)
```
これはレスポンスとしては問題ありませんが、実際に必要なのはネストされた text フィールドです。ブロックコードを変更して、そのセクションのみを出力するようにします。次に例を示します。
```
response = chat.send_message("How can I tell if a tomato is ripe?")
print(response.candidates[0].content.parts[0].text)
```
チャットコードが機能するようになりました。次に、このコードをウェブアプリケーションに統合しましょう。start_chat_session 関数を作成するコードセルの内容をすべてコピーします（テストセルは必要ありません）。セルをクリックすると、右上にあるその他メニューをクリックしてそこからコピーできます。
Cloud Shell エディタタブに切り替えて pages\Cooking_Advice.py を開き、編集します。

コメントを見つけます。

#
# Add the code you copied from your notebook below this message
#

コピーしたコードを [コードを追加] コメントのすぐ下に貼り付けます。これで、Gemini への接続を介してチャットエンジンを駆動するセクションができました。次に、これを Streamlit に統合しましょう。
コメントのすぐ下にコメントアウトされたコードのセクションを見つけます。
```
#
# Here's the code to setup your session variables
# Uncomment this block when instructed
#
```
このコードセクション（次の Setup done, let's build the page UI セクションまで）のコメントを解除して確認します。チャットセッション変数と履歴セッション変数を作成または取得します。
次に、履歴とチャット機能を UI に統合する必要があります。以下のコメントが見つかるまでコードをスクロールします。
```
#
# Here's the code to create the chat interface
# Uncomment the below code when instructed
#
```
コメントの下の残りのコードをコメント化解除して、確認します。必要に応じて、その関数をハイライト表示して、Gemini に機能を説明してもらいます。
では、アプリケーションをビルドしてデプロイしましょう。URL が復元されたら、アプリを起動して Cooking Advisor ページを試します。熟したトマトについて質問したり、ブリュッセルスパロウの調理方法を尋ねたりできます。
```
gcloud run deploy recipe-web-app \
    --allow-unauthenticated \
    --source=. \
    --region=us-central1 \
    --port=8501
```

このすばらしい機能により、自分だけのパーソナル AI 料理アドバイザーです。

13. （省略可）レシピ検索ページをレシピ検索の Agent Builder アプリに接続する

料理のアドバイスページを信頼できるソースに接続する際は、Gemini API を直接使用しました。レシピ検索の場合は、Vertex AI Agent Builder 検索アプリに直接接続します。

Cloud Shell エディタで pages/Recipe_Search.py ページを開いて編集します。ページの構造を調査します。
ファイルの上部で、プロジェクト ID を設定します。
search_sample 関数を調べます。このコードは、ほぼそのままこちらの Discovery Engine のドキュメントから取得したものです。動作するコピーは、こちらのノートブックにあります。変更したのは、結果のみではなく response.results を返すようにしたことのみです。これがないと、戻り値の型は結果をページングするように設計されたオブジェクトになりますが、これは基本的なアプリでは必要ありません。
ファイルの一番下までスクロールし、Here are the first 5 recipes I found の下のセクション全体のコメント化を解除します。
コメント化を解除したセクション全体をハイライト表示して、Gemini Code チャットを開きます。Explain the highlighted code に尋ねます。何も選択しない場合、Gemini はファイル全体を説明できます。セクションをハイライト表示して、Gemini に説明、コメント、改善を求めると、Gemini が対応します。説明をよく読んでください。Colab Enterprise ノートブックを使用すると、Gemini API をアプリケーションに統合する前に、Gemini API を探索できます。これは、ドキュメントが十分に整備されていない新しい API を調べるときに特に役立ちます。
エディタのターミナルウィンドウで build.sh を実行して、最終的なアプリケーションをデプロイします。新しいバージョンがデプロイされるまで待ってから、次のステップに進みます。

14. （省略可）最終的なアプリケーションを確認する

最終的なアプリケーションを確認しましょう。

Google Cloud コンソールで検索を使用して Cloud Run に移動し、recipe-web-app をクリックします。
アプリケーションのテスト URL（上部）を見つけて、新しいブラウザタブで開きます。
アプリケーションのホームページが表示されます。Streamlit によって提供される基本的なレイアウトとナビゲーションに注目してください。pages フォルダの Python ファイルがナビゲーションの選択肢として表示され、Home.py がホームページとして読み込まれています。[調理に関するアドバイス] ページに移動します。
しばらくすると、チャットインターフェースが表示されます。ここでも、Streamlit が提供する優れたコアレイアウトに注目してください。
調理に関連する質問をいくつか試して、bot の動作を確認します。次のような内容です。
```
Do you have any advice for preparing broccoli?

How about a classic chicken soup recipe?

Tell me about meringue.
```
では、レシピを探してみましょう。レシピ検索ページに移動して、いくつかの検索を試します。次のような内容です。
```
Chili con carne

Chili, corn, rice

Lemon Meringue Pie

A dessert containing strawberries
```

15. お疲れさまでした

Vertex AI Agent Builder アプリケーションを活用したアプリケーションを作成しました。ここまで、Gemini Cloud Assist、Gemini Code Assist、BigQuery のデータキャンバスの自然言語から SQL への機能について説明しました。お疲れさまでした。

クリーンアップ

Cloud SQL には無料枠がないため、引き続き使用すると料金が発生します。Cloud プロジェクトを削除して、追加料金が発生しないようにすることもできます。

サービスが使用されていない場合、Cloud Run の料金は発生しませんが、Artifact Registry にコンテナイメージを保存すると課金される場合があります。Cloud プロジェクトを削除すると、そのプロジェクト内で使用されているすべてのリソースに対する課金が停止します。

必要に応じて、プロジェクトを削除します。

gcloud projects delete $GOOGLE_CLOUD_PROJECT

cloudshell ディスクから不要なリソースを削除することもできます。次のことが可能です。

Codelab プロジェクトディレクトリを削除します。
```
rm -rf ~/task-app
```
警告: 次の操作は元に戻せません。Cloud Shell 上のすべてのファイルを削除して空き容量を確保する場合は、ホームディレクトリ全体を削除します。残しておきたいものはすべて別の場所に保存してください。
```
sudo rm -rf $HOME
```

誤りを報告