この Codelab について
1. 概要
この Codelab では、Duet AI を使用して既存の API バックエンド上にクライアント アプリケーションをビルドする方法について説明します。
学習内容
このラボでは、既存のアプリケーションで Duet AI を使用する方法を説明します。このラボでは、次の方法について学びます。
- AI / ML 画像処理のジャンプ スタート ソリューションをデプロイする
- Duet AI を使用して API アプリケーションを確認する
- Duet AI を使用して API アプリケーションのクライアントを作成する
セットアップ - 新しいプロジェクトを作成する
組織のポリシーによっては、このソリューションを正しくデプロイできない場合があります。
推奨: 会社または学校のアカウントではなく、完全な権限を持つアカウント(個人アカウントなど)を使用してください
注: 完全な権限を持つプロジェクトを最近作成し、Duet AI API をすでに有効にしている場合は、そのプロジェクトを引き続き使用して、この手順をスキップできます。たとえば、最近別の Duet AI Codelab を完了している場合は、この手順をスキップできます。
- Google Cloud コンソールに移動します。
- 現在のプロジェクトのプルダウンをクリックします。
- [新しいプロジェクト] をクリックします。
- プロジェクト名を追加して [作成] をクリックします。
- 推奨:
Project name
とProject ID
が同じになるように、一意のプロジェクト名を使用します。
- 推奨:
2. ジャンプ スタート ソリューションをデプロイする
ジャンプ スタート ソリューションは、Google Cloud の事前構築済みソリューション テンプレートです。このラボでは、ジャンプ スタート ソリューションを使用して、Duet AI が既存のアプリケーションを強化する方法を示します。
- AI / ML 画像処理のジャンプ スタート ソリューションの詳細ページに移動します。
- ハンバーガー メニューをクリックします。
- [プロダクトとソリューション] サブメニューで、[ジャンプスタート ソリューション] をクリックします。
- [Cloud Functions での AI / ML 画像処理] をクリックします。
- [デプロイ] をクリックします。
- プロジェクトで課金が有効になっていない場合は、課金を有効にします。
- プロジェクト名を確認し、[続行] をクリックします。
- リージョンとして [
us-central1 (Iowa)
] を選択します。 - 他の入力を求めるプロンプトが表示された場合は、デフォルト値をそのまま使用します。
- [デプロイ] をクリックします。
- 最長で 15 分ほどかかります。
- 変更する必要はありませんが、ジャンプ スタート ソリューションのデプロイを自由にお試しください。
トラブルシューティング
- 問題: 「
Partial deployment.
」というエラーが表示されますか?- 解決策: 残念ながら、この場合はデプロイを削除してやり直す必要があります。[デプロイメントの削除] というボタンが表示されます。このボタンをクリックして、ジャンプ スタート ソリューションを再デプロイします。
3. Duet AI を有効にする
コード編集環境を設定して Duet AI を有効にします。
- Cloud Shell エディタに移動します。
- Google Cloud コンソールに戻ります。
- 検索バーに「
Cloud Shell Editor
」と入力し、プルダウンから [Cloud Shell エディタ] をクリックします。 - 以前のエディタを使用している場合は、[新しいエディタを試す] をクリックします。
- 注: [新しいエディタを試す] ボタンが表示されない場合は、すでに新しいエディタを使用している可能性があります。以前のエディタは引き続き使用できますが、ビューは若干異なります。
- 「新しいウィンドウで開く」アイコン
をクリックします。
- プロンプトが表示されたら、アカウントにログインするか、アカウントの認証を行います。
- 設定によっては、このラボでアカウントの認証を複数回求められることがあります。その場合は、毎回認証を選択してください。
- 下のステータスバーにある [Cloud Code - Sign in] ボタンをクリックします。指示に従ってプラグインを承認します。
- プロンプトが表示されたら、[Google Cloud プロジェクトを選択する] をクリックし、使用しているプロジェクトを選択します。
- Duet AI を有効にします。
- [Cloud Code]
をクリックします。
- 注: 画面のサイズによっては、1 ステップまたは 2 ステップ必要になる場合があります。
- 注: 画面のサイズによっては、1 ステップまたは 2 ステップ必要になる場合があります。
- [HELP AND FEEDBACK] セクションの [Change Settings] をクリックします。
- 「
Duet AI: Enable
」と入力します。 - チェックボックスをオンにします(まだオンになっていない場合)。
- IDE を再読み込みします。
- これにより、Cloud Code で Duet AI が有効になり、IDE に [Duet AI] ステータスバーが表示されます。
- [Cloud Code]
- 右下にある [Duet AI] ボタンをクリックして、正しい Google Cloud プロジェクトを選択します。
- 「
Duet AI has not been enabled for your selected project
」というエラーが表示された場合、[Enable Duet AI API] をクリックします。
- 「
- ステータスバーで、左側に正しい Google Cloud プロジェクト(プロジェクト名が表示されます)が表示され、右側に Duet AI が有効になっていることを確認します。
4. Cloud Functions のコードをダウンロードする
コードをダウンロードし、Duet AI を使用して、ジャンプ スタート ソリューションとデプロイしたコードの詳細を確認します。
- 別の場所に移動した場合は、[Cloud Code]
をクリックします。
- [Cloud Functions] をクリックします。
- [Select a project] ボタンが表示されている場合は、クリックして作業するプロジェクトを選択します。
- [annotate-http] 関数をクリックします。
- Download to new workspace アイコン
をクリックします。
- ワークスペース名として「annotate-http-1」を使用し(デフォルト)、[OK] をクリックします。
main.py
ファイルを開きます。- エクスプローラ アイコン
をクリックします。
main.py
ファイルをクリックして開きます。
- エクスプローラ アイコン
- Duet AI Chat アイコン
をクリックします。
- 注: 画面のサイズによっては、1 ステップまたは 2 ステップ必要になる場合があります。
- 注: 画面のサイズによっては、1 ステップまたは 2 ステップ必要になる場合があります。
- Duet AI に質問してみましょう。次のようなプロンプトを入力します。
What is a Jump Start Solution in Google Cloud?
Explain this code.
Duet AI Chat のリセット
プロンプトは、今後のプロンプトに影響します。たとえば、プロジェクト ID またはリージョンに誤入力があると、それ以降のプロンプトと回答に影響し、エクスペリエンスに悪影響が及ぶ可能性があります。入力ミスがあった場合や、その他の理由で履歴を消去したい場合は、ゴミ箱アイコンを使用してチャットをリセットできます。
5. 既存の Cloud Functions のエンドポイントを呼び出す
コードを確認し、ジャンプ スタート ソリューションにデプロイしたエンドポイントを呼び出します。
- 次のプロンプトを入力します。
- 重要: 次のプロンプトの
my-project-with-duet
をプロジェクト ID に置き換えます。 The region is us-central1 and the project id is my-project-with-duet. Write a curl post for the /annotate-http/annotate Cloud Function endpoint that performs label detection on the default eiffel tower image.
- 次のような curl コマンドを含むレスポンスが返されます。
curl -X POST \
-H "Authorization: Bearer $(gcloud auth print-access-token)" \
... - この curl コマンドをコピーして、次のステップで使用します。
- 重要: 次のプロンプトの
- 新しいターミナルでコマンドをテストします。
- ハンバーガー メニューをクリックします。
- [Terminal] をクリックします。
- [New Terminal] をクリックします。
- 前の手順の curl コマンドをターミナルに貼り付け、
Enter
キーを押してコマンドを実行します。 - 次のようなレスポンスが返されます。
{
"labelAnnotations": [
{
"mid": "/m/0csby",
"description": "Cloud",
"score": 0.97885925,
"topicality": 0.97885925,
...
- (省略可)公開インターネットの別の画像を使用する場合は、Duet に次のように指示します。
Do the same thing with the image https://storage.googleapis.com/cloud-samples-data/vision/eiffel_tower.jpg
トラブルシューティング
非決定性に関する注意: Duet AI などの大規模言語モデル(LLM)を搭載したサービスは非決定的です。つまり、同じ入力を与えても、異なる出力が得られる可能性があります。手順を正しく行っても、コマンドが機能しない場合があります。その場合は、以下のトラブルシューティングの手順をお試しください。
生成された curl コマンドは次のようになります。
curl -X POST \
-H "Authorization: Bearer $(gcloud auth print-access-token)" \
-H "Content-Type: application/json" \
-d '{
"image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg",
"features": "LABEL_DETECTION"
}' \
"https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate"
Duet AI は、main.py
ファイルの TEST_IMAGE
を使用しています。これは、エッフェル塔の画像です。
curl コマンドが機能しない場合は、次の点を確認してください。
- 問題: URL エンドポイントに
.a.run.app
が含まれていますか?- 解決策: Duet は、Cloud Run にデプロイしようとしていると判断している可能性があります。
https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
のmy-project-with-duet
をプロジェクト ID に置き換えて、正しい Cloud Functions エンドポイントを取得し、curl コマンドに使用します。
- 解決策: Duet は、Cloud Run にデプロイしようとしていると判断している可能性があります。
- 問題: URL エンドポイントに
my-project-with-duet
が含まれていますか?- 解決策:
my-project-with-duet
を実際のプロジェクト ID に置き換えます。
- 解決策:
- 問題: URL エンドポイントに
us-central1
が含まれていませんか?- 解決策: URL が
us-central1
で始まり、プロジェクト ID が指定されていることを確認します(例:https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
)。
- 解決策: URL が
- 問題: 使用したプロンプトによっては、生成されたエンドポイントが
cloudfunctions.net/annotate-http
やcloudfunctions.net/annotate
のようになることがあります。URL エンドポイントの末尾に/annotate-http/annotate
が含まれていますか?- 解決策: URL エンドポイントの末尾が完全な API アプリケーション パス
cloudfunctions.net/annotate-http/annotate
になっていることを確認します。
- 解決策: URL エンドポイントの末尾が完全な API アプリケーション パス
- 問題: cURL リクエストは機能しますが、返される情報が多くありません。リクエストに特徴が含まれていますか?
- 解決策: これは重大な問題ではありません。何も変更せずに続行しても、ラボの残りの部分は機能します。より詳細な情報を得るには、cURL リクエストに特徴を追加するよう Duet に依頼します。
- 問題: 回答が間違っているか、コード固有のコンテキストが不足しています。Cloud Shell エディタ内で Duet AI Chat を使用していますか?
- 解決策: Cloud Shell エディタで Duet AI Chat を使用しているときに、
main.py
ファイルを開いて、プロンプトに関連するコードをハイライト表示してみてください。Google Cloud 全体で Duet AI アシスタントのコンテキストは異なるため、回答も異なります。
- 解決策: Cloud Shell エディタで Duet AI Chat を使用しているときに、
- 問題: プロンプト レスポンスがまだ正しくありません。
- 解決策: 別のプロンプトを試して、生成する内容についてさらに詳細な指示を Duet AI に与えます。
my-project-with-duet
は、プロジェクト ID に置き換えてください。例:Give me the curl command for:
1- Cloud Function running in us-central1 and project my-project-with-duet
2- HTTP POST to the following endpoint: /annotate-http/annotate endpoint
3- JSON in the body: { "image_uri": "gs://cloud-samples-data/vision/eiffel_tower.jpg", "features": "LABEL_DETECTION" }
- 解決策: 別のプロンプトを試して、生成する内容についてさらに詳細な指示を Duet AI に与えます。
- 問題: トラブルシューティングの手順をすべて試しても、まだ機能しません。
- 解決策: LLM は非決定的であるため、Duet が生成したレスポンスが機能しない可能性があります。その場合は、上記の curl コマンド例をコピーして、ターミナルで実行してみてください。
my-project-with-duet
は、プロジェクト ID に置き換えてください。
- 解決策: LLM は非決定的であるため、Duet が生成したレスポンスが機能しない可能性があります。その場合は、上記の curl コマンド例をコピーして、ターミナルで実行してみてください。
6. API のウェブ アプリケーション クライアントを作成する
Duet AI を使用して、ジャンプ スタート ソリューションの Cloud Functions エンドポイントを呼び出す index.html
ファイルを生成します。次に、index.html
ファイルを Firebase Hosting にデプロイして、コードが動作する様子を確認します。
- クライアントサイド コードを生成します。
- Duet AI のチャット ボックスに戻り、次のプロンプトを入力します。
Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use the full url beginning with https. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
- レスポンスで生成された
index.html
ファイルをコピーします。- 注: このコードは後で必要になります。紛失する可能性がある場合は、どこかに保存しておいてください。
main.py
を閉じます。
- Duet AI のチャット ボックスに戻り、次のプロンプトを入力します。
- 新しい
frontend
ディレクトリを作成します。- Duet AI に次のような質問ができます。
What are the console commands to create and navigate to a new frontend directory?
mkdir frontend
やcd frontend
などの結果が表示されます。- Cloud Shell ターミナルを使用して、まだ
annotate-http-1
ディレクトリにいることを確認し、次のコマンドを実行します。cd ~/annotate-http-1
mkdir frontend
cd frontend
- Duet AI に次のような質問ができます。
- Cloud Shell ターミナルで正しいプロジェクトにログインしていることを確認します。
- Duet AI に次のような質問ができます。
What is the gcloud command to set my project?
gcloud config set project my-project-with-duet
のような結果が表示されます。- プロジェクト ID が正しいことを確認してから、Cloud Shell ターミナルでコマンドを実行します。
- Duet AI に次のような質問ができます。
- Firebase を有効にします。
- 新しいタブで(現在の Cloud Shell エディタは開いたまま)、https://console.firebase.google.com/ にアクセスします。
- [プロジェクトを追加] をクリックします。
- プロジェクト ID を入力し、プルダウンに表示されるまで待ちます。
- プロジェクト ID をクリックします。
- [続行] をクリックします。
- [プランを確認] をクリックします。
- [続行] をクリックします。
- [このプロジェクトで Google アナリティクスを有効にする] の選択を解除します。
- Firebase では Google アナリティクスの使用を推奨していますが、このアプリケーションでは使用しません。
- [続行] をクリックします。
- このタブを閉じて Cloud Shell エディタに戻ります。
- 注: これらの手順は、以前に Firebase を使用したことがないユーザーのみに必要ですが、誰でも同じ手順で行えます。今後同じ操作を再度行う場合は、この手順をスキップできます。
- Cloud Shell で Firebase にログインします。
- Cloud Shell エディタ ターミナルで、コマンド「
firebase login --no-localhost
」を実行します。 - 指定された URL にアクセスします。
- [Yes, I just ran this command] をクリックします。
- [Yes, this is my session ID] をクリックします。
- [Copy] をクリックします。
- Cloud Shell エディタ ターミナルに戻ります。
- コピーした値を、ターミナルの
Enter authorization code:
という場所に貼り付けます。 Enter
キーを押します。
- Cloud Shell エディタ ターミナルで、コマンド「
- 新しいウェブサイトを Firebase Hosting にデプロイします。
- 新しい Firebase プロジェクトを初期化します。
- Duet AI に次のような質問ができます。
What are the commands to initialize and deploy a new firebase application?
firebase init
やfirebase deploy
などの結果と手順が表示されます。- やり方が多数あるため、Duet AI は、ユーザーの設定に応じてさまざまな方法を推奨します。ここでは、特定の推奨例をご紹介します。
firebase init
- 下矢印キーで
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
に移動します。Space
バーを押します。Enter
キーを押します。
- 下矢印キーで
Use an existing project
に移動します。Enter
キーを押します。
- プロジェクトのリストが表示されたら、現在使用しているプロジェクトまで下矢印キーで移動します。
Enter
キーを押します。
Please input the ID of the Google Cloud Project you would like to add Firebase:
を求められた場合- プロジェクトのプロジェクト ID を入力します。
Enter
キーを押します。
- 他のすべてのプロンプトの場合、
Enter
キーを押します。
- 下矢印キーで
firebase deploy
- Duet AI に次のような質問ができます。
- 新しい Firebase プロジェクトを初期化します。
- Cloud Functions API エンドポイントを呼び出してアプリケーションを再デプロイします。
- 上記のコマンドにより、先ほど作成した
frontend
ディレクトリ内にindex.html
ファイルを含むpublic
ディレクトリが作成されます。~/annotate-http-1/frontend/public/index.html
ファイルで、次の変更を行います。 index.html
ファイルを開きます。- エクスプローラ アイコン
をクリックします。
frontend
フォルダをクリックします。public
フォルダをクリックします。index.html
ファイルをクリックします。
- エクスプローラ アイコン
- 既存の
index.html
ファイルを空にします。 - 先ほどコピーしたコードを
index.html
ファイルに貼り付けます。 firebase deploy
を実行して新しいアプリケーションをデプロイします。- Firebase Hosting の URL にアクセスして、正常に動作するかどうかを確認します。
- 注: 更新内容を確認するには、ウェブサイトを強制的に更新する必要がある場合があります。
- 上記のコマンドにより、先ほど作成した
トラブルシューティング
index.html
ファイルは次のようになります。
<!DOCTYPE html>
<html>
<head>
<title>Vision API Annotate Image</title>
</head>
<body>
<h1>Vision API Annotate Image</h1>
<form id="annotate-form" action="https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate" method="POST">
<label for="image-uri">Image URI:</label>
<input type="text" id="image-uri" name="image_uri" value="gs://cloud-samples-data/vision/eiffel_tower.jpg">
<br>
<label for="features">Features:</label>
<select id="features" name="features">
<option value="LABEL_DETECTION">LABEL_DETECTION</option>
<option value="TEXT_DETECTION">TEXT_DETECTION</option>
<option value="IMAGE_PROPERTIES">IMAGE_PROPERTIES</option>
</select>
<br>
<input type="submit" value="Annotate">
</form>
<div id="result"></div>
<script>
const form = document.getElementById('annotate-form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const imageUri = document.getElementById('image-uri').value;
const features = document.getElementById('features').value;
const data = {
image_uri: imageUri,
features: features,
};
fetch('https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then((response) => response.json())
.then((result) => {
const resultElement = document.getElementById('result');
resultElement.innerHTML = JSON.stringify(result, null, 2);
});
});
</script>
</body>
</html>
ウェブサイトが機能しない場合は、次の点を確認してください。
- 問題: 404(見つかりません)
fetch
メソッドで使用されている URL にmy-project-with-duet
が含まれていますか?- 解決策:
my-project-with-duet
を実際のプロジェクト ID に置き換えます。
- 解決策:
- 問題: 404(見つかりません)
fetch
メソッドで使用されている URL に完全な URL が含まれていますか?- 解決策:
fetch
メソッドに完全な URL を含めてください。次のようになります。https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate
- 解決策:
- 問題: プロンプト レスポンスがまだ正しくありません。
- 解決策: 別のプロンプトを試して、生成する内容についてさらに詳細な指示を Duet AI に与えます。
my-project-with-duet
は、プロジェクト ID に置き換えてください。例:Write an index.html file that takes two inputs: a text input for the image_uri and a dropdown for the features. It should make a post request and display the raw json result to the DOM. The fetch call should use https://us-central1-my-project-with-duet.cloudfunctions.net/annotate-http/annotate. The default image_uri should be gs://cloud-samples-data/vision/eiffel_tower.jpg.
- 解決策: 別のプロンプトを試して、生成する内容についてさらに詳細な指示を Duet AI に与えます。
- 問題: サイトはデプロイされていますが、動作しませんか?
- 解決策: LLM は非決定的であるため、Duet が生成したレスポンスが機能しない可能性があります。その場合は、上記の
index.html
の例をコピーして、firebase deploy
で再デプロイしてみてください。my-project-with-duet
は、プロジェクト ID に置き換えてください。
- 解決策: LLM は非決定的であるため、Duet が生成したレスポンスが機能しない可能性があります。その場合は、上記の
7. (省略可)データ探索を開く
- Duet AI とエディタ内アシスタントを使用して CSS スタイルをアプリケーションに追加し、完了したらアプリケーションを再度デプロイします。ヒントを得たい場合は、次のプロンプト例を参考にしてください。
Make this index.html file use material design.
- その他のヒント:
- 生成されたウェブサイトは、公開されている
http
画像で動作するはずです。Duet を使用して、ページに画像を表示します。
- 生成されたウェブサイトは、公開されている
8. (省略可)プロジェクトを削除する
今回作成したリソースに対して請求が発生しないようにしたい場合、Duet にその方法を尋ねます。
- 次のプロンプトを入力します。
How can I delete my project?
gcloud projects delete my-project-with-duet
のような結果が表示されます。- 重要: 前のコマンドの
my-project-with-duet
をプロジェクト ID に置き換えます。
gcloud projects delete
コマンドを実行して、今回作成したリソースをすべて削除します。