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

1. はじめに

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

次に、Gemini Code Assist を使用して次の操作を行います。

PDF ドキュメントからテキストを抽出し、要約して、結果を BigQuery に書き込む Cloud Functions の処理を行う Python コードについて理解する。
プロセス全体で 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 を有効にします。以下の手順に沿って操作してください。

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

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

Gemini for Cloud を有効にすると、クエリを 1 つまたは 2 つ実行してテストできます。サンプルクエリがいくつか表示されますが、「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 を有効にして構成する必要があります。手順は次のとおりです。

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

図のように右下にある [Gemini] ボタンをクリックし、正しい Google Cloud プロジェクトをもう一度選択します。Cloud AI Companion API を有効にするよう求められた場合は、有効にして次に進んでください。
Google Cloud プロジェクトを選択したら、下の図のようにステータスバーの Cloud Code ステータスメッセージが表示されていることと、その右側で Code Assist が有効になっていることを確認します。

Gemini Code Assist を使用できるようになりました。

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

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

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

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

4. Gemini とチャットする

まず、Gemini とチャットする方法について説明します。Gemini は、VS Code の Cloud Code 拡張機能の一部として、Cloud Shell IDE 内でチャットアシスタントとして使用できます。左側のナビゲーションバーにある Gemini ボタンをクリックして表示できます。左側のナビゲーションツールバーで Gemini アイコンをクリックしてください。

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

Gemini チャットペインを使用してプロンプトを入力し、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 で Jump Start ソリューションの Cloud Functions をダウンロードする

Cloud Shell エディタで次の操作を行います。

[Cloud Code] をクリックします。
注: 画面のサイズによっては、1 ステップまたは 2 ステップ必要になる場合があります。

または

[Cloud Functions] をクリックします。
プロンプトが表示されたら、アカウントにログインするか、アカウントの認証を行います。
Webhook 関数をクリックします。
[Download to new workspace] アイコンをクリックします。
ワークスペース名として 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 チャットをクリックし、次のプロンプトを入力します。Explain this

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

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

アーキテクチャ図に従って、Cloud Functions を呼び出すために、ファイルを <PROJECT_ID>_uploads バケットにアップロードします。

アップロードして要約するサンプル PDF を用意しておきます。

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

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

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

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

テーブルをクエリして、要約の結果を確認します。

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

上記のプロセスは、要約する PDF をアップロードする手動のステップバイステッププロセスです。アプリケーションのウェブフロントエンドを構築するのはどうですか？

ウェブフロントエンドの要件は次のとおりです。

要約するファイルを選択してアップロードできる基本的な HTML フォーム。
アップロードが成功したファイルは、<PROJECT_ID>_uploads バケットに書き込まれるため、残りの機能はそのまま動作します。

このラボでは、Python とウェブアプリケーション用の Flask フレームワークを使用して、Duet AI のアシスト機能を利用しながら構築します。

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

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

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 チャットウィンドウに次のプロンプトを入力します。

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>

Gemini に index.html ファイルの保存場所を尋ねることができます。次のプロンプトを入力します。

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 とのチャットウィンドウで次のプロンプトを入力します。

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 ウィンドウで次のプロンプトを入力し（<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）を使用して仮想環境を作成し、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 バケット（<PROJECT_ID>_output）を確認することもできます。

10. （省略可）データ探索を開く - 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 に関する質問への回答を得る方法が理解できました。