法人のお客さま
お問い合わせ
ビジネスブログ

Vertex AI を利用して Google サイトにマルチターンプロンプトを構築してみた

クラウドテクノロジーブログ編集チーム

クラウドテクノロジーブログ
編集チーム

2024年8月23日掲載

キービジュアル

本記事では Vertex AI のマルチモーダル処理を利用した、マルチターンプロンプトのアプリ作成と Google サイトへ埋め込む手順を紹介します。

目次

今回の環境について

今回は Vertex AI SDK for Python を利用してマルチモーダル処理を実装し、FastAPI + Docker を用いて API 構築を行いました。

作成した Docker Image は GCP の Artifact Registry に push し、Cloud Run にデプロイを行い、公開してから UI 側からリクエストしています。

UI 側としては React + TypeScript + Vite を利用して構築しています。また、ESLint + Prettier も利用してフォーマットを任せています。

作成した UI は Google サイトに埋め込みを行うことで公開しています。

アプリサンプル

作成したアプリの動作について紹介させていただきます。

今回作成したのはシンプルチャット形式のマルチターンプロンプトで機能としては「テキスト送信」「テキスト＆画像送信」「システム指示設定」の３つになります。

こちらが Google サイトに埋め込んだサンプル画像になります。

 

はじめにテキストと画像を用いて質問を行ってみました。

質問テキスト：画像には何が写っていますか？

質問画像：

image

レスポンスは以下の通り画像に関する内容が返却されました。

レスポンス：白と茶色の猫は白い表面に寝そべっています。青い目をしています。猫はベルのついた首輪をしています。背景はぼやけていて、緑の葉が見えます。

image

 

また、マルチターンに対応しているため追加で質問してみます。
この時「画像の」や「猫の」といった文言を省いた状態で質問してみます。

質問：品種はなんですか？

レスポンスは以下の通り、前段の質問を理解した上で画像の猫に関する回答が返却されました。

レスポンス：この猫はシャム猫です。

image

 

続いてシステム指示を利用して質問してみます。

以下のシステム指示を行います。想定だと猫に関する質問には十分な情報を提示し、山に関する情報には回答しません。

システム指示：

あなたは猫の専門家です。猫に関する質問には明確な情報を提示してください。山に関する質問には回答しないでください。

image

システム指示設定後に質問してみます。

質問：猫を飼うために必要なことを教えてください。

レスポンスでは猫に関する十分な情報が返却されました。

image

 

追加で富士山について質問してみます。

質問：富士山について教えてください

レスポンスでは富士山についての情報が提示されない状態で返却されました。

レスポンス：私は猫の専門家なので、富士山の情報は持ち合わせていません。

image

作成手順

ここからは今回の作成手順について紹介いたします。

こちらの手順はあくまで工程の説明になりますので説明割愛箇所があります。

　1, Vertex AI SDK のサンプルコード取得

　 (割愛) Fast API を用いてサンプルコードから API 作成、 UI の作成

　2, Cloud Run へのデプロイ

　3, Google サイトへの埋め込み

1, Vertex AI SDK のサンプルコード取得

以下のように Vertex AI マルチモーダル画面の「コードを取得」からサンプルコードを取得できます。

image

 

今回は Python を利用しておりますが、他に Node.js や Java なども取得できます。

Vertex AI SDK for Python API のリファレンス ドキュメント

image

 

2, Cloud Run へデプロイ

今回は Dockerfile を使用して作成したアプリを Cloud Run にデプロイしていきたいと思います。

　事前準備：

　　変数定義

　　Artifact Registry の作成

　デプロイ手順：

　　 Dockerfile をビルドして Docker Image を作成する

　　 作成した Docker Image を Artifact Registry に push する

　　 push した Docker Image を 利用して Cloud Run をデプロイする

事前準備：変数定義

作業準備として以下を任意に変更し変数を定義しておきます。

REGION="[REGION]"
PROJECT_ID="[PROJECT_ID]"
REPOSITORY_NAME="[REPOSITORY_NAME]"
IMAGE="[IMAGE]"
TAG="[TAG]"

 

さらに Image のパスを定義

IMAGE_PATH="$REGION-docker.pkg.dev/$PROJECT_ID/$REPOSITORY_NAME/$IMAG"

 

事前準備：Aritifact Registoryの作成と認証

Docker Image を格納するための Aritifact Registory を作成します。

今回はコマンドベースで作成します。

gcloud artifacts repositories create $REPOSITORY_NAME --location $REGION --repository-format docker --project=$PROJECT_ID

gcloud auth configure-docker $REGION-docker.pkg.dev

 

Docker Image のビルド

以下のコマンドで Docker Image をビルドします。

docker build -t $IMAGE_PATH/$TAG .

 

Docker Image を Aritifact Registory に push

以下のコマンドで Docker Image を Aritifact Registory に push します。

docker push $IMAGE_PATH:$TAG

 

Cloud Run のデプロイ

以下のコマンドで CloudRun をデプロイします。

gcloud run deploy --image $IMAGE_PATH:$TAG --platform=managed --project=$PROJECT_ID

 

3, Google サイトへの埋め込み

Google サイトには URL もしくは HTMLでの埋め込みを行う必要があります。

今回は Vite シングルファイルプラグインを使用して HTML での埋め込みを行います。

Vite シングルファイルプラグイン

Vite のシングルファイルプラグインを使用することで、作成した TypeScript および CSS などを含めた Web アプリ全体を1つの HTML ファイルとして埋め込むことができます。

HTML ファイルは dist/index.html のディレクトリに出力されます。

 

プラグインのインストール

npm install vite-plugin-singlefile --save-dev

 

vite.config.ts サンプルコード

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import { viteSingleFile } from "vite-plugin-singlefile";

export default defineConfig({
  plugins: [
    react(),
    viteSingleFile(), // 1つのhtmlに生成結果をまとめる為のplugin
  ],
});

 

コードのビルドを行い HTML ファイルを作成

npm run build

 

以下が作成された HTML ファイルになります。

image

 

Google サイト埋め込み

続いて Google サイトへの埋め込み方を紹介します。

Google サイトを作成し、「埋め込み」を選択する

image

 

「埋め込みコード」を選択し、作成された HTML を入力する。

image

 

埋め込みされた UI が表示されるのでサイズ調整などをして完了。

image

まとめ

今回は、Vertex AI を用いたマルチターンプロンプトを作成して Google サイトへの埋め込み手順を紹介しました。

社内サイトなどに Vertex AI 埋め込みを行うことで、気軽な AI 環境の提供などが可能になり、AI ナレッジ向上や課題解決などに貢献できると思います。ぜひ、本記事を参考にして作成してみてください。

 

次回は、第 2 弾として同じ Google Cloud 技術チームのチームメイトより今回のアプリを作成した際の感想やサンプルコードなどを「Vertex AI マルチモーダルのサンプルコードを触ってみた」という記事でお届けしますのでお楽しみに！

Vertex AI DIYプランについて

Vertex AI Search を使って社内文書を検索する生成 AI を構築してみませんか？
ソフトバンクのエンジニアが構築をサポートします。

Vertex AI DIY プランでは、以下の3つのことをご体験いただけます。
詳細は、関連サービスにある「Vertex AI DIYプラン」をご確認ください。

関連サービス

Vertex AI DIYプラン

Vertex AI Search を使って社内文書を検索する生成AIを構築してみませんか？
ソフトバンクのエンジニアが構築をサポートします。
Google の生成AIの導入を考えている方はもちろん、どのようなものか確認したいという方でもご活用いただけます。

Google Cloud

Google サービスを支える、信頼性に富んだクラウドサービスです。お客さまのニーズにあわせて利用可能なコンピューティングサービスに始まり、データから価値を導き出す情報分析や、最先端の機械学習技術が搭載されています。

MSPサービス

MSP（Managed Service Provider）サービスは、お客さまのパブリッククラウドの導入から運用までをトータルでご提供するマネージドサービスです。

 ＼ 業務課題をデジタルで支援 ／

デジタルツールの選定から導入の手引きまで、中小規模のお客さまへわかりやすくお伝えします。

中小規模のお客さま向けサイトをみる

メールマガジン登録（無料）
ビジネスに役立つ記事やウェビナー情報をお届けします。

おすすめの記事

条件に該当するページがございません

法人のお客さま向け イベント

イベント・セミナー

ビジネスに役立つ 資料ダウンロード

資料ダウンロード

「今」と「未来」を発信 ソフトバンクのビジネスブログ

ビジネスブログ

クラウドテクノロジーブログ

クラウドテクノロジーブログ