Gemini Code Assist を使用して AI 要約ジャンプ スタート ソリューションの探索と強化を実現

1. はじめに

この Codelab では、既存のジャンプ スタート ソリューションである AI Summarization を見ていきます。これは、Vertex AI モデルを使用して、Google Cloud Storage にアップロードされた PDF ドキュメントを要約します。

その後、Google は Gemini Code Assist を使用して次のことを行います。

• PDF ドキュメントからテキストを抽出して要約し、結果を BigQuery に書き込む Cloud Functions の関数を強化する Python コードについて理解します。
• Google は、新機能の作成にプロセス全体を通して Gemini Code Assist の力を借りるものとします。ウェブ アプリケーション（Python Flask アプリケーション）を開発し、そのアプリケーションをローカルで実行してコードを検証します。
• 必要に応じて、このアプリケーションを Cloud Run にデプロイし、マテリアル デザインを使用してウェブ アプリケーションのデザインを改善することもできます。

演習内容

• AI 要約ジャンプ スタート ソリューションをデプロイし、プロセスフローをトリガーしてその仕組みを理解します。
• 次に、Cloud Shell IDE を使用してジャンプ スタート ソリューションの既存のコードをダウンロードし、Gemini Code Assist を使用してコードを理解します。
• Gemini Code Assist Cloud Shell IDE を使用して、新機能のコードを生成します。

学習内容

• AI 要約のジャンプ スタート ソリューションの仕組み。
• Gemini Code Assist を使用して、コード生成、コード補完、コード要約などのデベロッパーのタスクを行う方法。

必要なもの

• Chrome ウェブブラウザ
• Gmail アカウント
• 課金が有効になっている Cloud プロジェクト
• Cloud プロジェクトで Gemini Code Assist が有効になっている

このラボは、初心者を含むあらゆるレベルのデベロッパーを対象としています。サンプルアプリは Python 言語で記述されていますが、内容を理解するために Python プログラミングに精通している必要はありません。デベロッパー向けの Gemini Code Assist の機能に慣れることに重点を置きます。

2. セットアップ

このセクションでは、このラボを始めるために必要なすべての手順について説明します。

Google Cloud プロジェクトで Gemini for Cloud を有効にする

Google Cloud プロジェクトで Gemini for Cloud を有効にします。以下の手順に沿って操作してください。

1. https://console.cloud.google.com にアクセスし、このラボで使用する Google Cloud プロジェクトが選択されていることを確認します。右上に表示されている [Gemini を開く] アイコンをクリックします。

2. コンソールの右側に Gemini for Cloud のチャット ウィンドウが開きます。下図の [有効にする] ボタンをクリックします。[有効にする] ボタンが表示されず、Chat インターフェースが表示される場合は、プロジェクトで Gemini for Cloud がすでに有効になっている可能性があります。その場合は、直接次のステップに進んでください。

3. 有効にしたら、Gemini for Cloud に 1 つか 2 つのクエリを尋ねることで、Gemini for Cloud をテストできます。サンプルクエリがいくつか表示されますが、「What is Cloud Run?」のようなクエリを試すことができます。

Gemini for Cloud が質問の回答を返します。右上にある アイコンをクリックすると、Gemini for Cloud のチャット ウィンドウを閉じることができます。

Cloud Shell IDE で Gemini Code Assist を有効にする

この Codelab の残りの部分では、Code OSS ベースのフルマネージド開発環境である Cloud Shell IDE を使用します。Cloud Shell IDE で Code Assist を有効にして構成する必要があります。手順は次のとおりです。

1. ide.cloud.google.com にアクセスします。IDE が表示されるまでしばらく時間がかかる場合がありますので、しばらくお待ちください。
2. 下のステータスバーにある [Cloud Code - Sign in] ボタンをクリックします。指示に従ってプラグインを承認します。ステータスバーに「Cloud Code - no project」と表示されている場合は、それを選択して、使用するプロジェクトのリストから特定の Google Cloud プロジェクトを選択します。

3. 画面右下の [Gemini] ボタンをクリックし、最後に正しい Google Cloud プロジェクトを選択します。Cloud AI Companion API を有効にするように求められた場合は、有効にして続行してください。
4. Google Cloud プロジェクトを選択したら、ステータスバーの Cloud Code ステータス メッセージでそれを確認できます。また、右側にあるステータスバーの Code Assist が有効になっていることも確認します。

Gemini Code Assist をご利用いただけるようになりました。

Gemini Code Assist は、Visual Studio Code や JetBrains IntelliJ などのローカル IDE でも利用できます。Google Cloud Workstations でも利用できます。この Codelab では、全員が同じ環境を使用できるように Cloud Shell IDE に重点を置いていますが、自由にお好みの設定を試してください。詳細については、こちらのリンクをご覧ください。

省略可: 右下のステータスバーに Gemini が表示されない場合は、Cloud Code で Gemini を有効にする必要があります。IDE で Gemini が有効になっていることを確認する前に、[Cloud Code Extension] → [設定] に移動し、以下のように「Gemini」というテキストを入力します。チェックボックスがオンになっていることを確認します。IDE を再読み込みする必要があります。これにより、Gemini in Cloud Code が有効になり、IDE のステータスバーの Gemini アイコンが表示されます。

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

1. 生成 AI によるドキュメントの要約ソリューションに移動します。
2. [デプロイ] をクリックします。

• プロジェクトで課金が有効になっていない場合は、課金を有効にします。
• リージョンとして [us-central1] を選択します。
• [デプロイ] をクリックします。
• この処理には最長で 15 分ほどかかります。
• 変更する必要はありませんが、ソリューションのデプロイの詳細ページにある [このソリューションを調べる] ボタンをクリックして、自由にジャンプ スタート ソリューションのデプロイを確認できます。

4. Gemini と話そう

まず、Gemini とチャットする方法を学びましょう。Gemini は、VS Code の Cloud Code 拡張機能の一部として、Cloud Shell IDE 内でチャット アシスタントとして利用できます。左側のナビゲーション バーで [Gemini] ボタンをクリックすると、Gemini モデルが表示されます。左側のナビゲーション ツールバーにある Gemini アイコン をクリックします。

Cloud Shell IDE 内に [Chat: GeminiI] ペインが表示され、Gemini とチャットして Google Cloud に関するサポートを受けることができます。

Gemini の [Chat] ペインでプロンプトを入力し、Gemini からのレスポンスを確認してみましょう。次のプロンプトを入力します。

What is Cloud Run? 

Gemini が Cloud Run の詳細を返します。プロンプトとは、必要なサポートについて説明する質問やステートメントのことです。プロンプトには、より有用な、または完全な回答を提供するために Google Cloud が分析する既存のコードからのコンテキストを含めることができます。適切なレスポンスを生成するためのプロンプトの作成方法については、Google Cloud の Gemini 用に優れたプロンプトを作成するをご覧ください。

次のサンプル プロンプトまたは独自のプロンプトを使用して、Google Cloud に関する質問をしてみてください。

• What is the difference between Cloud Run and Cloud Functions?
• What services are available on Google Cloud to run containerized workloads?
• What are the best practices to optimize costs while working with Google Cloud Storage?

上部にあるゴミ箱アイコンに注目してください。これにより、Code Assist のチャット履歴のコンテキストをリセットできます。なお、このチャットのやり取りは、IDE で作業しているファイルに関連するコンテキストです。

5. Cloud Code にジャンプ スタート ソリューションの Cloud Functions 関数をダウンロードする

Cloud Shell エディタを開いている場合は、次の手順を行います。

• Cloud Code をクリックします。
• 注: 画面のサイズに応じて、1 ～ 2 ステップ必要です。

または

• [Cloud Functions] をクリックします。
• プロンプトが表示されたら、ログインするか、アカウントを承認します。
• Webhook 関数をクリックします。
• [新しいワークスペースにダウンロード] アイコン をクリックします。
• 
• ワークスペース名（デフォルト）またはその他の名前として Webhook-1 を使用し、[OK] をクリックします。
• Cloud Shell IDE でコードが開きます。

6. 既存のプロジェクトを確認する

このジャンプ スタート ソリューションを以下に示します。

[PDF をアップロード] 機能から Cloud Storage へのフローを確認します。PDF ファイルがアップロードされた場合に呼び出される Cloud Functions の関数は、main.py ファイルで指定されます。

そのファイルをクリックします。Cloud Functions のエントリ ポイントは entrypoint 関数です。この関数は最終的に、PDF からテキストを抽出する cloud_event_entrypoint 関数を呼び出してから、Vertex AI モデルを使用して結果を要約して GCS と BigQuery に書き込みます。summarization_entrypoint

main.py ファイル内のすべてのコードまたは特定のコード スニペットをハイライト表示します。Gemini Chat をクリックし、「Explain this」と話しかけます。

コードの説明が表示されます。

7. サンプル実行を実行する

アーキテクチャ図のとおり、Cloud Functions の関数が呼び出されるようにファイルを <PROJECT_ID>_uploads バケットにアップロードしています。

アップロード可能で、要約を希望するサンプル PDF があることを確認します。

• Cloud コンソールで [Google Cloud Storage] に移動します。
• <PROJECT_ID>_uploads バケットに移動します。[ファイルをアップロード] をクリックし、サンプル PDF をアップロードします。

サンプル PDF ファイルがない場合は、作成したサンプルのいずれかを使用できます。Cloud Shell から、次のコマンドを実行します。

gsutil cp \
    gs://arxiv-dataset/arxiv/cmp-lg/pdf/9410/9410009v1.pdf \
    gs://<PROJECT_ID>_uploads/

ファイルが正常にアップロードされると、Cloud Functions の関数 webhook が呼び出され、ドキュメント内で見つかったテキストを要約します。出力は、summary_dataset という名前の BigQuery データセットと summary_table テーブルに書き込まれます。

テーブルにクエリを実行して、サマリーの結果を確認します。

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

上記のプロセスは、要約したい PDF をアップロードする手順を手動で進めます。アプリケーションのウェブ フロントエンドを構築してみましょう。

ウェブ フロントエンドの要件はシンプルです。

1. 要約が必要なファイルを選択してアップロードできる基本的な HTML フォーム。
2. アップロードが正常に完了した場合、そのファイルは <PROJECT_ID>_uploads バケットに書き込まれます。これにより、残りの機能をそのまま使用できます。

Python とウェブ アプリケーション用の Flask フレームワークを使用して、Duet AI を支援するためにこれを構築します。

Let's get started. ここでは、Cloud Shell IDE で同じワークスペースが開いていることを前提としています。

すべてのファイルを閉じて、Gemini Chat ウィンドウで次のプロンプトを入力します。

Write a Python Flask application that has a couple of routes:
The root route / should serve the index.html page using the render_template framework. The /upload route should accept a file being uploaded and write that file to a Cloud Storage bucket.

理想的には、これにより次のようなコードが生成されます。

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)

上記のコードを IDE ワークスペースのルートに app.py として保存します。

このアプリケーションをポート 8080 で実行し、ホストアドレス 0.0.0.0 を使用するために、Gemini に app.run ステートメントを変更するよう指示します。

次のプロンプトを入力します。

Modify the app.py to run on port 8080 and host address 0.0.0.0

コードは次のようになります。

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    bucket = storage.Client().bucket('your-bucket-name')
    blob = bucket.blob(filename)
    blob.upload_from_string(
        file.read(),
        content_type=file.content_type
    )
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

次に、index.html も生成します。Gemini Chat ウィンドウで次のプロンプトを入力します。

Provide the index.html file

以下のような index.html のコードが表示されます。

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

index.html ファイルの保存場所を Gemini にリクエストできます。次のプロンプトを入力します。

Since this is using the render_template framework, where should this file be saved?

次のような回答が返されます。

ルートフォルダに templates という名前のフォルダを作成し、その中に index.html ファイルを保存します。

ファイルが Google Cloud Storage バケットに保存できない場合に備えて、app.py ファイルで例外処理を行いたいと思います。app.py ファイルを開いたままにして、Gemini Chat ウィンドウで次のプロンプトを入力します。

modify the app.py to have exception handling in the upload() function. The success or failure should be returned to the index page.

これにより、次のような例外処理が追加されます。

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client().bucket('your-bucket-name')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

index.html にエラー メッセージを表示する必要があるため、これも変更する必要があります。以下のプロンプトで Gemini にリクエストしてみましょう。

update the index.html to display the error message

これにより、以下のように更新された index.html が作成されます。

<!DOCTYPE html>
<html>
<head>
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  {% if error %}
    <p style="color: red;">{{ error }}</p>
  {% endif %}
  <form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
  </form>
</body>
</html>

上記の各ステップで、変更をそれぞれ app.py ファイルと index.html ファイルに保存していることを確認します。

app.py のバケット名が正しくないため、その情報を Gemini に渡して変更を依頼できます。また、storage.Client() インスタンスのプロジェクト ID も指定する必要があります。Gemini Chat ウィンドウで次の 2 つのプロンプト（<PROJECT_ID> を実際の Google Cloud プロジェクト ID に置き換える）を行い、変更を組み込みます。

プロンプト 1

My bucket name is gemini-for-devs-demo_uploads, please change the code to use that.

プロンプト 2

My project id is gemini-for-devs-demo, please change the storage.Client() to use that.

最終的な app.py ファイルは次のようになります（私のプロジェクト ID を以下に示しますが、これは理想的には、作業中の、上のプロンプトで指定したプロジェクト ID である必要があります）。

from flask import Flask, render_template, request, redirect, url_for
from google.cloud import storage

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def upload():
    try:
        file = request.files['file']
        filename = file.filename
        bucket = storage.Client(project='gcp-experiments-349209').bucket('gcp-experiments-349209_uploads')
        blob = bucket.blob(filename)
        blob.upload_from_string(
            file.read(),
            content_type=file.content_type
        )
        return redirect(url_for('index'))
    except Exception as e:
        return render_template('index.html', error=str(e))

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8080)

9. ウェブ アプリケーションをローカルで実行する

requirements.txt ファイルで定義された依存関係を使用して Python 環境を作成します。以下に示すように、Cloud Shell IDE のコマンド パレットに移動します。

「Python: Create Environment」と入力し、venv（venv）、Python 3.x インタープリタ、requirements.txt ファイルを使用して、仮想環境を作成する手順に沿って操作します。これにより、必要な環境が作成されます。

次のようにターミナルを起動します。

ターミナルで次のコマンドを実行します。

python app.py

Flask アプリが起動し、次のように表示されます。

(.venv) romin@cloudshell:~/webhook-2 (gcp-experiments-349209)$ python app.py 
 * Serving Flask app 'app'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:8080
 * Running on http://10.88.0.3:8080
Press CTRL+C to quit
 * Restarting with watchdog (inotify)
 * Debugger is active!
 * Debugger PIN: 989-296-833

http://127.0.0.1:8080 URL にアクセスすると、index.html ページが表示されます。

ローカルマシンからファイルをアップロードすると、正常に処理されるはずです。

ラボで前述した BigQuery のデータセットとテーブルに移動すると、要約を確認できます。または、Cloud Storage バケット（&lt;PROJECT_ID&gt;_output）を確認することもできます。

10. （省略可）Open Exploration - Cloud Run へのデプロイ

• アプリケーションを Cloud Run にデプロイできます。
• 次のプロンプトで Gemini Code Assist に質問します（上記のプロンプトのバリエーションをいくつか試す必要がある場合があります）。

I don't want to build a container image but deploy directly from source. What is the gcloud command for that?

11. （省略可）データ探索を開く - CSS スタイルを追加する

• Gemini Code Assist とエディタ内アシスタントを使用して、アプリケーションに CSS スタイルを追加し、完了したらアプリケーションを再度デプロイしてください。
• index.html ファイルを開き、Gemini Chat で次のプロンプトを入力します: Can you apply material design styles to this index.html?
• コードをチェックアウトして、動作するかどうかを確認します。

12. 完了

お疲れさまでした。以上で、Gemini Code Assist をサンプル プロジェクトで無事に使用し、コードの生成、コード補完、コード要約にどのように役立つかを理解し、Google Cloud に関する質問の答えを得ることができました。

13. リファレンス ドキュメント

• Gemini Code Asssit のホームページ
• AI の支援と開発に Gemini を使用する - ドキュメント
• Gemini のユースケース