概要

生成 AI は、テキスト、動画、画像、コードなどのコンテンツを作成するために使用できるテクノロジーです。Google Cloud には、Gemini や Vertex AI など、生成 AI の導入を支援するさまざまな大規模言語モデル（LLM）とツールが用意されています。LLM を活用したツールを使用して、ウェブサイトのコンテンツを作成、強化し、会話型検索エクスペリエンスを追加できます。また、ウェブページの検出を促進し、ウェブサイトのナビゲーションを強化することもできます。

目標

このラボでは、次の目的でウェブサイトのモダナイゼーション ソリューションを実装します。

• 生成 AI を使用してコンテンツ生成を合理化し、ウェブサイト コンテンツの品質と効率を高める。
• ウェブサイトのテキスト コンテンツを補完する画像を生成する。
• コンテンツを目的の言語にシームレスに翻訳する。
• Vertex AI Search をウェブサイトに統合して、情報検索を強化する。

設定

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

1. Qwiklabs にシークレット ウィンドウでログインします。

2. ラボのアクセス時間（例: 1:15:00）に注意し、時間内に完了できるようにしてください。
   一時停止機能はありません。必要な場合はやり直せますが、最初からになります。

3. 準備ができたら、[ラボを開始] をクリックします。

4. ラボの認証情報（ユーザー名とパスワード）をメモしておきます。この情報は、Google Cloud Console にログインする際に使用します。

5. [Google Console を開く] をクリックします。

6. [別のアカウントを使用] をクリックし、このラボの認証情報をコピーしてプロンプトに貼り付けます。
   他の認証情報を使用すると、エラーが発生したり、料金の請求が発生したりします。

7. 利用規約に同意し、再設定用のリソースページをスキップします。

Cloud Shell をアクティブにする

Cloud Shell は、開発ツールが組み込まれた仮想マシンです。5 GB の永続ホーム ディレクトリを提供し、Google Cloud 上で実行されます。Cloud Shell を使用すると、コマンドラインで Google Cloud リソースにアクセスできます。gcloud は Google Cloud のコマンドライン ツールで、Cloud Shell にプリインストールされており、Tab キーによる入力補完がサポートされています。

1. Google Cloud Console のナビゲーション パネルで、「Cloud Shell をアクティブにする」アイコン（）をクリックします。

2. [次へ] をクリックします。
   環境がプロビジョニングされ、接続されるまでしばらく待ちます。接続の際に認証も行われ、プロジェクトは現在のプロジェクト ID に設定されます。次に例を示します。

サンプル コマンド

• 有効なアカウント名前を一覧表示する:

gcloud auth list

（出力）

Credentialed accounts: - <myaccount>@<mydomain>.com (active)

（出力例）

Credentialed accounts: - google1623327_student@qwiklabs.net

• プロジェクト ID を一覧表示する:

gcloud config list project

（出力）

[core] project = <プロジェクト ID>

（出力例）

[core] project = qwiklabs-gcp-44776a13dea667a6

タスク 1. Vertex AI API を有効にする

Vertex AI を使用するには、まず Vertex AI API を有効にする必要があります。

1. API を有効にするには、Cloud Shell で次のコマンドを実行します。

   gcloud services enable aiplatform.googleapis.com

2. プロンプトが表示されたら、[承認] をクリックします。

   注: API が有効になるまで数秒待ってから、進行状況を確認してください。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 Vertex AI API が有効になっている。

タスク 2. ウェブサイトのコードをダウンロードする

このラボでは、事前構築済みのウェブサイト アプリを使用します。このアプリは、FastAPI を使用して構築されたバックエンド API と、HTML、CSS、および JavaScript を使用して構築されたフロントエンドで構成されています。このタスクでは、ウェブサイトのコードをダウンロードしてコードとファイル構造を確認します。

ウェブサイトのコードをダウンロードして表示する

1. Cloud Shell で、Cloud Storage からウェブサイトのコード アーカイブをダウンロードします。

   gcloud storage cp gs://cloud-training/OCBL451/genai-website-mod-app.tar.gz .

2. アーカイブの内容を抽出します。

   tar -zxvf genai-website-mod-app.tar.gz

3. ウェブサイトのコードとファイル構造を表示するには、Cloud Shell のメニューバーで [エディタを開く] をクリックします。

4. Cloud Shell エディタのナビゲーション バーで、genai-website-mod-app フォルダを展開します。

   このフォルダには、ウェブサイト アプリの構築とデプロイに必要なすべてのファイルが含まれています。各ファイルとそれぞれの目的の概要は次のとおりです。

   ファイル / フォルダ	説明
   Dockerfile	Cloud Run を使用してウェブサイト アプリケーション コンテナをビルドするための Dockerfile
   config.toml	変数を使用してアプリケーションを構成する
   main.py	ウェブサイト アプリケーションのメインの FastAPI エントリポイント
   models/	ウェブサイト アプリケーションで使用されるデータモデルを含むフォルダ
   routers/	さまざまなアプリケーション機能に対応する FastAPI API ルーター
   static/	静的なウェブサイト アセット（CSS、画像、JS ファイルなど）が含まれている
   templates/	ウェブサイト アプリケーション ページの Jinja テンプレート
   utils/	ウェブサイト アプリケーション用のユーティリティ モジュール
   views/	ウェブサイト アプリケーションのビューの実装

   注: ラボの後半の手順で指示がある場合を除き、ファイルの内容を確認または編集する必要はありません。

タスク 3. Vertex AI Search を実装する

このタスクでは、ブログ投稿などの非構造化データを検索する検索アプリケーションを Vertex AI で作成して、ウェブサイトに検索機能を実装します。

検索アプリケーションを作成する

1. Google Cloud コンソールのナビゲーション メニュー（）をクリックし、[Agent Builder] を選択します。

   注: ナビゲーション メニューに [Agent Builder] が表示されない場合は、[すべてのプロダクトを表示] をクリックします。[すべてのプロダクト] ページで [AI] セクションまでスクロールし、[Agent Builder] をクリックします。

2. [続行して API を有効化] をクリックします。

3. [アプリを作成する] ページに自動的にリダイレクトされた場合は、次のステップに進みます。リダイレクトされない場合は、[新しいアプリ] をクリックします。

4. [アプリを作成する] ページの [ウェブサイト検索] で [作成] をクリックします。

5. [構成] ページで、次の設定値を使用して一般的な検索アプリを構成します。残りの設定はデフォルトのままにします。

   プロパティ	値（入力または選択）
   アプリ名	my-search-app
   会社名または組織名	my-company
   アプリのロケーション	global（グローバル）

6. [続行] をクリックします。

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

1. [データストア] ページで、[データストアを作成] をクリックします。

   このページでは、ウェブサイトの検索結果に使用される独自のデータソースで検索アプリを構成します。

2. [Cloud Storage] を選択します。

   注: このラボのために、ブログ投稿を表す HTML ドキュメントがプロジェクトの Cloud Storage バケットに事前にプロビジョニングされています。

3. [フォルダ] が選択されている状態（デフォルト）で、[参照] をクリックします。

4. Cloud Storage バケット の をクリックして、内容を表示します。

5. blog_posts フォルダを選択し、[選択] をクリックします。

   フォルダの gs:// URI が取り込まれます。

   

6. インポートするデータの種類としてデフォルトの [非構造化ドキュメント] がオンになっている状態のまま、[続行] をクリックします。

7. データストア名に「my-data-store」と入力します。

8. [作成] をクリックします。

9. [データストア] ページで、新しく作成したデータストアを選択します。[作成] をクリックして検索アプリを作成します。

   

   これで、Agent Builder が検索アプリ用に Cloud Storage バケットからブログ投稿の HTML データの取り込みを開始します。

10. データの取り込みのステータスを確認するには、my-data-store の [データ] ページで [アクティビティ] タブをクリックします。

    [ステータス] 列に、現在のステータスが表示されます。インポート プロセスが完了すると、この列に [インポートが完了しました] と表示されます。

    

    注: インポート プロセスには数分かかります。データのインポートが完了するまで待ってから、次のステップに進みます。

11. ドキュメントが正常にインポートされたことを確認するには、[ドキュメント] タブをクリックします。

検索アプリをテストする

Agent Builder で検索アプリの機能をテストすることで、アプリをプレビューできます。

1. Agent Builder のナビゲーション メニューで、[プレビュー] をクリックします。

2. 検索ボックスに「What is dollar cost averaging and how can it help me?」（ドルコスト平均法とは？どのようなメリットがある？）と入力し、Enter キーを押します。

   アプリは、dollar cost averaging（ドルコスト平均法）についての回答を生成し、Cloud Storage からインポートされた関連ファイルの抜粋とリンクを提供します。

   注: デフォルトでは、検索アプリは Gemini 1.5 Pro モデルを使用して検索の回答を生成します。検索アプリの構成は、Google Cloud コンソールの [Agent Builder] > [構成] ページで表示または変更できます。

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

タスク 4. ウェブサイト アプリケーションを検索機能と統合する

検索アプリを作成したら、ウェブサイトやアプリケーションと統合できます。このラボでは、検索 API を使用して呼び出しを行い、サイトに表示する回答を受け取ります。検索バーと拡張可能な検索インターフェースを自動的に提供する検索ウィジェットをウェブサイトに埋め込むこともできます。この方法について詳しくは、ラボの最後に記載されているリンクからドキュメントをご覧ください。

このタスクでは、前のタスクで作成した検索アプリと統合するようにウェブサイトのコードを構成します。次に、ウェブサイト アプリケーションを Cloud Run にデプロイしてテストします。

ウェブサイト アプリケーションを構成する

このウェブサイト アプリケーションは、Python で API を構築するためのウェブ フレームワークである FastAPI を使用して構築されています。genai-website-mod-app/routers フォルダには、検索などのさまざまなウェブサイト機能に対応するルーター API の実装が含まれています。

1. Cloud Shell エディタで genai-website-mod-app/routers フォルダに移動し、vertex_search.py ファイルを開きます。

   このファイルには、Python 用の Cloud クライアント SDK の discoveryengine モジュールを使用して検索 API 呼び出しを実装するコードが含まれています。このコードは、構成ファイルを解析する Python の tomllib モジュールも使用します。

2. trigger_first_search() 関数のコードを確認します。

   この関数は、パスパラメータを含む projects/{project_id}/locations/{datastore_location}/collections/default_collection/dataStores/{datastore_id} パスを使用した、Discovery Engine API の呼び出しを設定します。

3. パスパラメータの値を指定するには、genai-website-mod-app フォルダの config.toml ファイルを編集します。

4. [global] セクションで、構成プロパティの値を以下のように置き換えます。

   セクション	プロパティ	値
   global	project_id
   global	location
   global	datastore_id	次のステップを参照

5. datastore_id 構成プロパティの値を、検索アプリのデータストア ID の値に置き換えます。

   a. datastore_id の値を取得するには、Google Cloud コンソールで [Agent Builder] に移動し、[データ] を選択します。

   b. my-data-store の [データストアの ID] の値をコピーして、config.toml ファイルに貼り付けます。

6. 関連する構成セクションで、以下の構成プロパティを置き換えます。

   セクション	プロパティ	値
   imagen	bucket_name
   blog	image_bucket
   blog	blog_bucket

7. ファイルへの変更を保存します。

タスク 5. Cloud Run でウェブサイトを構築、デプロイ、テストする

Cloud Run は、Google のスケーラブルなインフラストラクチャを基盤にアプリケーション コンテナを実行できるマネージド コンピューティング プラットフォームです。

このタスクでは、ウェブサイト アプリケーションを構築して Cloud Run にデプロイします。また、ウェブサイトに統合した検索機能もテストします。

環境を設定する

1. 現在のディレクトリが website application であることを確認します。

   cd ~/genai-website-mod-app

2. プロジェクト ID、リージョン、ウェブサイト アプリケーション サービスの環境変数を設定します。

   PROJECT_ID=$(gcloud config get-value project) REGION={{{project_0.default_region|set at lab start}}} SERVICE_NAME='webmod-svc' # 実際の Cloud Run サービスの名前 echo "PROJECT_ID=${PROJECT_ID}" echo "REGION=${REGION}" echo "SERVICE_NAME=${SERVICE_NAME}"

アプリを構築して Cloud Run にデプロイする

1. 次のコマンドを実行して、アプリを構築して Cloud Run にデプロイします。

   gcloud run deploy "$SERVICE_NAME" \ --port 8080 \ --source . \ --allow-unauthenticated \ --region $REGION \ --project $PROJECT_ID

2. Artifact Registry Docker リポジトリを作成するために、Y と入力します。

   サービスがデプロイされると、サービスの URL が生成されてコマンド出力に表示されます。

ウェブサイトの検索機能をテストする

1. Cloud Run でアプリをテストするには、別のブラウザタブまたはウィンドウでウェブサイト アプリケーションの Cloud Run サービス URL に移動します。

2. 検索ボックスに「What is dollar cost averaging and how can it help me?」（ドルコスト平均法とは？どのようなメリットがある？）と入力し、Enter キーを押します。

3. 検索結果が返され、ウェブサイトに表示されることを確認します。

   注: 検索結果には AI の回答が含まれています。これは、検索アプリ用に Cloud Storage からプロビジョニングしたデータストア内の HTML ファイルのコンテンツから生成されます。関連するブログ投稿にリンクされていても、検索結果のリンクにスニペットが表示されないことがあります。 注: ウェブサイトで使用されるブログ投稿ファイルは、Cloud Storage バケット内の別の本番環境フォルダに JSON ファイルとして保存されています。ウェブサイト アプリケーションは、EditorJS を使用してこれらのファイルを HTML としてレンダリングし、ウェブサイトで表示します。

4. 補足の質問として「Can you use dollar cost averaging with ETFs?」（ドルコスト平均法を ETF で使用できる？）と検索ボックスに入力し、Enter キーを押します。

5. 補足の質問に対する回答とともに、関連するブログ投稿へのリンクが検索結果に表示されることを確認します。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 ウェブサイト アプリケーションが Cloud Run にデプロイされている。

タスク 6. 生成 AI を使用してウェブサイトのコンテンツを編集する

Google の生成 AI ツールは、ウェブサイトのコピーやコンテンツの作成と編集に使用できます。このタスクでは、これらのツールをウェブサイト コンテンツ エディタとして使用して、このラボで使ったウェブサイトのテキストと画像のコンテンツを更新します。

画像生成コードを確認する

ウェブサイト アプリケーションは、Vertex AI の Imagen API を使用して画像を生成および更新します。

1. Cloud Shell エディタで config.toml 構成ファイルを開きます。

2. [imagen] セクションで構成プロパティを確認します。このセクションでは、画像生成と画像キャプションに使用するモデルのプロパティと、その他のプロパティが定義されています。

3. Cloud Shell エディタで、routers/vertex_imagen.py ファイルを開きます。

   このファイルには、画像キャプションと画像変更のさまざまな関数に加え、それらの API ルートが定義されています。

4. これらの関数は、utils/imagen.py ファイルに実装されています。このファイルを Cloud Shell エディタで開きます。

5. generate_image() 関数を確認します。

   この関数は、Python SDK の vertexai パッケージに含まれる vertexai.preview.vision_models.ImageGenerationModel クラスを使用します。

   この関数は、まず画像生成モデルを読み込み、次にテキスト プロンプトやその他のパラメータを渡してモデルの generate_images() 関数を呼び出して画像を生成します。

画像コンテンツを更新する

ウェブサイトのブログ投稿の画像を更新してみましょう。

1. Cymbal Investments のウェブサイトの右上にある [All Blogs] をクリックします。

   ウェブサイトのページに 6 つのブログ投稿が表示されます。

   注: 先頭のブログ投稿がデフォルトで選択されている場合は、ページの任意の場所をクリックして選択を解除します。

2. リンクをクリックして、最初のブログ投稿「Unleashing the Techie Within: A Journey to FIRE」を表示します。

   ブログ投稿ページは、ヘッダー、画像、段落テキストで構成されています。

3. ページ コンテンツを編集するには、右下にある編集アイコン（）をクリックします。

4. 画像にカーソルを合わせます。画像の左側にある Click to tune アイコン（）をクリックします。

5. [Click to tune] メニューで [Generate] を選択します。

   

6. 画像キャプションの下にある [Prompt] に、「An image of a retired man and woman sitting on a beach enjoying the sunset」（ビーチに座って夕日を楽しんでいる引退した男女の画像）と入力します。[Generate] をクリックします。

7. ページの上部までスクロールし、画像が生成されるまで待ちます。

   新しい画像が生成され、Cloud Storage の画像バケットにアップロードされます。ブログ投稿ページがこの新しい画像で更新されます。

コンテンツを翻訳する

テキスト生成モデルを使用して、ウェブページ全体またはインライン テキストの一部を翻訳できます。このサブタスクでは、ウェブサイトのブログページのインライン テキストを翻訳します。

1. Cloud Shell エディタで、routers/vertex_llm.py ファイルを開きます。

   このファイルには、ウェブページの編集と翻訳のさまざまな関数に加え、それらの API ルートが定義されています。

2. ソースファイルの一番下までスクロールして、ai_translate_inline() 関数のコードを確認します。

   この関数は、ai_translate_inline_prompt 構成プロパティ、ユーザーが選択したテキスト、ユーザーが指定したターゲット言語を使用してプロンプトを作成します。次に、llm_generate_gemini() 関数を呼び出して、モデルからの回答を生成します。

   config.toml ファイルの ai_translate_inline_prompt 構成プロパティの値は次のとおりです。

   You are an award winning writer. INSTRUCTIONS: 1. You are given a piece of text as INPUT_TEXT 2. You are also given a target language as TARGET_LANGUAGE. 3. You should translate the INPUT_TEXT into the TARGET_LANGUAGE. 4. Strictly output only the translated text. Do not add any other explanation. Do not output the answer in \"\" (double or single quotes) INPUT_TEXT:

3. llm_generate_gemini() 関数を表示するには、utils/vertex_llm_utils.py ファイルを開きます。

   この関数は、Python SDK の vertexai パッケージに含まれる vertexai.generative_models.GenerativeModel クラスを使用します。

   この関数は、まず gemini-1.5-pro モデルを読み込み、次にテキスト プロンプトやその他のパラメータを渡してモデルの generate_content() 関数を呼び出して回答を生成します。

4. ウェブサイトのブログページが編集モードになっていることを確認します。なっていない場合は、右下にある編集アイコン（）をクリックします。

5. いずれかの段落テキストを選択して、Translate tool アイコンをクリックします。

   

6. 言語プロンプト欄に「French」（フランス語）と入力し、[送信] をクリックします。

   数秒後、段落テキストが指定した言語に翻訳され、ページ上で置き換えられます。

ウェブサイトのコピー（テキスト コンテンツ）を更新する

生成モデルを使用して、ウェブサイトのテキスト コンテンツを調整することもできます。

1. routers/vertex_llm.py ファイルで、ai_refine_text() 関数を確認します。

   この関数は、ai_refine_prompt 構成プロパティ、ウェブサイトのコンテンツからユーザーが選択したテキスト、ユーザー入力の指示を使用してプロンプトを作成します。

   config.toml ファイルの ai_refine_prompt 構成プロパティの値は次のとおりです。

   You are an award winning writer. INSTRUCTIONS: 1. You are given a piece of text as INPUT_TEXT 2. You are also given a style or tone or instructions as REFINE_PROMPT. 3. You should modify or refine INPUT_TEXT in the tone or style of REFINE_PROMPT. 4. Strictly output only the refined text. Do not add any other explanation. Do not output the answer in \"\" (double or single quotes) INPUT TEXT:

2. ウェブサイトのブログページが編集モードになっていることを確認します。なっていない場合は、右下にある編集アイコン（）をクリックします。

3. いずれかの段落テキストを選択し、Refine TextTool アイコンをクリックします。

   

4. 選択したテキストをよりフォーマルでインパクトのあるトーンに変更するには、スタイル ボックスに「formal impactful」と入力します。この値は、モデルを呼び出す前に REFINE_PROMPT 文字列としてプロンプトに追加されます。

5. [送信] をクリックします。

   数秒後、モデルからの回答が生成され、ボックスで囲まれた状態でページ上の元のテキストの下に表示されます。

6. 更新された段落テキストを確認し、[Replace] をクリックします。

7. ブログページの変更を保存するには、ページの上部にある [Save] をクリックします。

8. プロンプトの最終値を確認するには、Google Cloud コンソールのナビゲーション メニュー（）で、[ロギング] > [ログ エクスプローラ] を選択します。

   注: ナビゲーション メニューに [ロギング] が表示されていない場合は、[すべてのプロダクトを表示] をクリックします。[すべてのプロダクト] ページで [オブザーバビリティ] セクションまでスクロールし、[ロギング] をクリックします。

9. 関連するログエントリをハイライト表示するには、結果のメニューバーで [操作] > [結果のハイライト表示] をクリックします。

10. [結果のハイライト表示] に「REFINE_PROMPT」と入力します。

    

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。 ウェブサイトのコンテンツが変更されている。

ラボを終了する

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

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

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

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

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

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

お疲れさまでした

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

• Vertex AI の一般的な検索アプリを作成してテストしました。
• Vertex AI Search アプリをウェブサイトに統合しました。
• Imagen API を使用して、ウェブサイト上の画像を生成および更新しました。
• Vertex AI の TextGenerationModel を使用して、ページ上のテキストの翻訳と調整を行いました。
• ウェブサイト アプリケーションを Cloud Run にデプロイしてテストしました。

これらのスキルがあれば、ウェブサイトのコンテンツを更新し、確認と公開のために変更内容を Cloud Storage などの外部ストレージに保存するプロセスを構築できます。

次のステップと詳細情報

• Vertex AI
• Gemini
• 検索ウィジェットをウェブページに追加する
• Artifact Registry
• Cloud Run

Copyright 2024 Google LLC All rights reserved. Google および Google のロゴは、Google LLC の商標です。その他すべての社名および製品名は、それぞれ該当する企業の商標である可能性があります。