Duet AI を使用して既存のアプリケーションを確認、強化する方法

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 ステップ必要になる場合があります。
- [HELP AND FEEDBACK] セクションの [Change Settings] をクリックします。
- 「Duet AI: Enable」と入力します。
- チェックボックスをオンにします（まだオンになっていない場合）。
- IDE を再読み込みします。
- これにより、Cloud Code で Duet AI が有効になり、IDE に [Duet AI] ステータスバーが表示されます。
右下にある [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 ステップ必要になる場合があります。
Duet AI に質問してみましょう。次のようなプロンプトを入力します。
- What is a Jump Start Solution in Google Cloud?
- Explain this code.

Duet AI Chat のリセット

プロンプトは、今後のプロンプトに影響します。たとえば、プロジェクト ID またはリージョンに誤入力があると、それ以降のプロンプトと回答に影響し、エクスペリエンスに悪影響が及ぶ可能性があります。入力ミスがあった場合や、その他の理由で履歴を消去したい場合は、ゴミ箱アイコンを使用してチャットをリセットできます。

Duet Chat をリセットするゴミ箱のハイライト

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 コマンドに使用します。
問題: 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）。
問題: 使用したプロンプトによっては、生成されたエンドポイントが cloudfunctions.net/annotate-http や cloudfunctions.net/annotate のようになることがあります。URL エンドポイントの末尾に /annotate-http/annotate が含まれていますか？
- 解決策: URL エンドポイントの末尾が完全な API アプリケーションパス cloudfunctions.net/annotate-http/annotate になっていることを確認します。
問題: cURL リクエストは機能しますが、返される情報が多くありません。リクエストに特徴が含まれていますか？
- 解決策: これは重大な問題ではありません。何も変更せずに続行しても、ラボの残りの部分は機能します。より詳細な情報を得るには、cURL リクエストに特徴を追加するよう Duet に依頼します。
問題: 回答が間違っているか、コード固有のコンテキストが不足しています。Cloud Shell エディタ内で Duet AI Chat を使用していますか？
- 解決策: Cloud Shell エディタで Duet AI Chat を使用しているときに、main.py ファイルを開いて、プロンプトに関連するコードをハイライト表示してみてください。Google Cloud 全体で Duet AI アシスタントのコンテキストは異なるため、回答も異なります。

問題: プロンプトレスポンスがまだ正しくありません。

解決策: 別のプロンプトを試して、生成する内容についてさらに詳細な指示を 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" }

問題: トラブルシューティングの手順をすべて試しても、まだ機能しません。
- 解決策: LLM は非決定的であるため、Duet が生成したレスポンスが機能しない可能性があります。その場合は、上記の curl コマンド例をコピーして、ターミナルで実行してみてください。my-project-with-duet は、プロジェクト ID に置き換えてください。

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 を閉じます。
新しい 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
Cloud Shell ターミナルで正しいプロジェクトにログインしていることを確認します。
- Duet AI に次のような質問ができます。
  - What is the gcloud command to set my project?
- gcloud config set project my-project-with-duet のような結果が表示されます。
  - プロジェクト ID が正しいことを確認してから、Cloud Shell ターミナルでコマンドを実行します。
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 キーを押します。
新しいウェブサイトを 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
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.
問題: サイトはデプロイされていますが、動作しませんか？
- 解決策: LLM は非決定的であるため、Duet が生成したレスポンスが機能しない可能性があります。その場合は、上記の index.html の例をコピーして、firebase deploy で再デプロイしてみてください。my-project-with-duet は、プロジェクト ID に置き換えてください。

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 コマンドを実行して、今回作成したリソースをすべて削除します。

Duet AI を使用して既存のアプリケーションを確認、強化する方法

1. 概要

学習内容

セットアップ - 新しいプロジェクトを作成する

2. ジャンプ スタート ソリューションをデプロイする

トラブルシューティング

3. Duet AI を有効にする

4. Cloud Functions のコードをダウンロードする

Duet AI Chat のリセット

5. 既存の Cloud Functions のエンドポイントを呼び出す

トラブルシューティング

6. API のウェブ アプリケーション クライアントを作成する

トラブルシューティング

7.（省略可）データ探索を開く

8. （省略可）プロジェクトを削除する

2. ジャンプスタートソリューションをデプロイする

6. API のウェブアプリケーションクライアントを作成する