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

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 をホストし、料理のアドバイスを提供し、料理に関する質問に回答します。レシピ検索は、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 の [マイプロジェクト] で課金が有効になっていることを確認します。
- 新しいプロジェクトの 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 に質問] または [Gemini for Cloud コンソールに質問] を選択します。
ページの [必要な API] セクションまでスクロールし、Gemini for Google Cloud API を有効にします。
チャットインターフェースがすぐに表示されない場合は、[チャットを開始] をクリックします。まず、Gemini に Cloud Shell エディタを使用するメリットを説明してもらいます。生成されたレスポンスを数分かけて確認します。
次に、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 が含まれた料理のアドバイスページがあります。この機能は、70 冊のパブリックドメインの料理本を含むソースに基づく Gemini によって実現されます。クックブックは、Gemini が質問に回答する際に使用する信頼できる情報源として機能します。

Cloud コンソールの検索ボックスを使用して、[Vertex AI] に移動します。ダッシュボードで、[すべての推奨 API を有効にする] をクリックします。この処理には数分かかることがあります。Vertex AI 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 は複数のアプリタイプをサポートしており、データストアはそれぞれに対する信頼できる情報源として機能します。検索アプリは、一般的な用途や検索に適しています。Chat 用アプリは、Dataflow で駆動される chatbot/voicebot アプリケーションの生成フロー用です。レコメンデーションアプリは、より優れたレコメンデーションエンジンの作成に役立ちます。エージェントアプリは、GenAI を活用したエージェントの作成に使用します。最終的には、エージェントがやりたいことを実現するのに最適な方法になる可能性がありますが、現在はプロダクトがプレビュー版であるため、検索アプリタイプを使用します。

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

[アクティビティ] タブを確認すると、クックブックのインポートとインデックス作成がまだ進行中であることがわかります。Agent Builder が、提供された 70 冊のクックブックに含まれる数千のページをインデックス登録するのに 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 機能を試すよう促すメッセージが表示された場合は、閉じます。ノートブックの基盤となるコンピューティング能力であるランタイムを起動するには、新しいノートブックの右上にある [接続] をクリックします。
[ファイル] > [名前を変更] をクリックして、ノートブックの名前を 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 Assistant が生成したコードを確認します。生成された候補の上に Python キーワードのオートコンプリートドロップダウンリストが表示された場合は、Esc キーを押して、薄いグレーの候補コードを表示します。もう一度 Tab キーを押して提案を受け入れます。提案に head() 関数呼び出しが含まれていない場合は、追加します。
```
df = pd.read_csv('gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv')
df.head()
```
Pandas をインポートした最初のコードセルをクリックし、[コマンド] メニューまたはキーボードを使用して、選択したセルを実行します。キーボードの 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
```
230 万件のレシピは、おそらく時間が足りないほど多いでしょう。Agent Builder のインデックス登録プロセスは、今日の演習には時間がかかりすぎる可能性があります。妥協案として、15 万件のレシピをサンプリングして、それを使用することにします。プロンプトとコードのアプローチを使用して、サンプルを取得し、dfs（s は small の略）という名前の新しい DataFrame に保存します。
```
# Sample out 150,000 records into a DataFrame named dfs
dfs = df.sample(n=150000)
```
レシピのソースデータは、BigQuery に読み込む準備が整いました。読み込みを行う前に、BigQuery に移動して、テーブルを保持するデータセットを準備しましょう。Google Cloud コンソールで、検索ボックスを使用して [BigQuery] に移動します。[BigQuery] を右クリックして、新しいブラウザタブで開くこともできます。
まだ表示されていない場合は、Cloud コンソールの右上にある Gemini ロゴを使用して、Gemini AI Chat パネルを開きます。API を再度有効にするよう求められた場合は、[有効にする] を押すか、ページを更新します。プロンプトを実行します。What is a dataset used for in BigQuery? 回答を確認したら、How can I create a dataset named recipe_data using the Cloud Console? 結果を次の手順と比較します。
BigQuery エクスプローラペインで、プロジェクト ID の横にある三点リーダーの [アクションを表示] メニューをクリックします。[データセットを作成] を選択します。
データセットと recipe_data の ID を指定します。ロケーションタイプは [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'
```
プロンプト > コードアプローチを使用して、DataFrame dfs を、作成したばかりのデータセット recipe_data の recipes という名前のテーブルに挿入するコードブロックを作成します。セルを実行します。
```
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 検索アプリを作成する手順を思い出させるよう依頼するか、以下の手順に沿って操作してください。

検索を使用して Agent Builder に移動します。[データストア] を開き、[データストアを作成] をクリックします。今回は、BigQuery データストアのタイプを選択します。
テーブル選択セルで、[参照] を押して recipes を検索します。テーブルの横にあるラジオボタンを選択します。他の qwiklabs-gcp-... プロジェクトのレシピが表示された場合は、自分のレシピを選択してください。注: ラジオボタンの横にある recipes をクリックすると、ブラウザで新しいタブが開き、BigQuery のテーブルの概要ページに移動します。ブラウザのタブを閉じて、Agent Builder でラジオボタンを選択するだけです。
残りのデフォルトオプションを確認し、変更せずに [続行] をクリックします。
スキーマの確認ページで、初期のデフォルト構成を確認しますが、何も変更しないでください。次へ
データストアに 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.
```
（プロンプトを出すときは「お願いします」と言います。（母はきっと喜んでくれるでしょう。）1 つのチリレシピにキノコが含まれていることに気づきました。チリにキノコを入れるなんて、誰がそんなことをするのでしょうか？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 - ログイン] をクリックします。リンクが表示されない場合は、1 分ほど待ってからもう一度確認してください。
ターミナルウィンドウに長い 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 の構成がすべて設定されたら、[エクスプローラ] タブを開き、現在のプロジェクトのファイルを数分かけて確認します。
エクスプローラで、編集する requirements.txt ファイルを開きます。Gemini チャットペインに切り替えて、次のように質問します。
```
From the dependencies specified in the requirements.txt file, what type of application are we building?
```
そのため、Vertex AI と Discovery Engine を操作する Python と Streamlit を使用して、インタラクティブなウェブアプリケーションを構築しています。ここでは、ウェブアプリケーションコンポーネントに焦点を当てます。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 Chat は会話型（マルチターン）であるため、「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 アシスタントであり、人間のアシスタントと同様に、その発言に常に同意できるとは限りません。それでも、Google Cloud とコードエディタで作業しているときに常にヘルパーがそばにいると、効率が大幅に向上します。
ステートレスの短命コンテナ化ウェブアプリケーションには、Cloud Run が最適です。コードエディタの Gemini チャットウィンドウで、次のプロンプトを試してみてください。
```
What steps would be required to run this application in Cloud Run?
```
まず、Dockerfile を作成する必要があるようです。エディタを使用して、プロジェクトフォルダのルートに Dockerfile という名前のファイルを作成します。誤って pages フォルダに配置しないようにしてください。ファイルを編集用に開きます。
Gemini チャットのサイドパネルを使用して 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 はチャットウィンドウから操作できますが、データラングリングノートブックで使用したコメントのように、コードファイル内で直接操作することもできます。また、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 の [チャット] に移動します。
右側の設定ページのペインで、モデルを 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 に変更していないか、古いクックブックの Agent Builder データストア ID を変更する手順を省略した可能性があります。[Agent Builder] > [データストア] > [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 = model.start_chat() のすぐ下にメソッドの最終行を追加して、関数が 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
#

コピーしたコードを [Add the code] コメントのすぐ下に貼り付けます。これで、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 が返ってきたら、アプリケーションを起動して、クッキングアドバイザーのページを試してみます。熟したトマトについて尋ねたり、芽キャベツの調理方法について尋ねたりできます。
```
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 をアプリケーションに統合する前に、その機能を簡単に試すことができます。特に、十分に文書化されていない可能性のある新しい 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.
```
では、レシピを 1 つか 2 つ探してみましょう。レシピ検索ページに移動して、いくつかの検索を試してみます。次のようなものです。
```
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
```