Gemma でパーソナライズされた AI コーディング アシスタントを構築する

人工知能（AI）モデルからコード支援を得ることは非常に有用ですが、接続、費用、データ セキュリティの制限により、サードパーティがホストする生成 AI モデルの使用が制限されている場合はどうすればよいでしょうか。Google の Gemma モデル ファミリーは、ダウンロードして独自のハードウェアで実行できるため、すべてをローカルに保ち、コードベースでより適切に動作するようにモデルをチューニングすることもできます。

Gemma または CodeGemma の独自のインスタンスを実行すると、低レイテンシ、高可用性、さらに低コストで、すべてのコーディング データを独自のネットワーク上に保持できる AI コーディング支援を利用できます。このプロジェクトでは、Gemma をホストするための独自のウェブサービスを設定し、それを Microsoft Visual Studio Code 拡張機能に接続して、コーディング中にモデルをより便利に使用できるようにする方法について説明します。このプロジェクトには、2 つのサブプロジェクトがあります。1 つは Gemma を設定してウェブサービスにラップするプロジェクトで、もう 1 つはウェブサービスに接続して使用する VS Code 拡張機能のプロジェクトです。

このプロジェクトの概要と拡張方法、作成者の分析情報については、ビジネス用メール AI アシスタントの Build with Google AI 動画をご覧ください。このプロジェクトのコードは、Gemma Cookbook コード リポジトリでも確認できます。それ以外の場合は、次の手順でプロジェクトの拡張を開始できます。

概要

このチュートリアルでは、2 つのプロジェクト（Gemma 用のウェブサービスと、そのサービスで使用する VS Code 拡張機能）を設定して拡張する方法について説明します。このウェブサービスは、Python、Keras、JAX、FastAPI ライブラリを使用して Gemma モデルを提供し、リクエストを処理します。Pipet という VS Code 拡張機能を使用すると、コマンド パレットにコマンドが追加されます。図 1 に示すように、コード編集ウィンドウでコード、テキスト、コメントを選択して Gemma ウェブサービスにリクエストを送信できます。

VS Code 拡張機能のユーザー インターフェースのスクリーンショット

図 1. Visual Studio Code の Pipet 拡張機能のプロジェクト コマンドのユーザー インターフェース

両方のプロジェクトの完全なソースコードは、Gemma Cookbook のコード リポジトリで提供されています。ニーズやワークフローに合わせて、両方のプロジェクトを拡張できます。

プロジェクトの設定

ここでは、このプロジェクトを開発とテストの準備にします。一般的な設定手順には、前提条件となるソフトウェアのインストール、コード リポジトリからプロジェクトのクローンを作成する、いくつかの環境変数を設定する、Python と Node.js のライブラリをインストールする、ウェブ アプリケーションをテストする、などがあります。

必要なソフトウェアをインストールする

このプロジェクトでは、Python 3、仮想環境（venv）、Node.js、Node Package Manager（npm）を使用して、パッケージを管理し、2 つのプロジェクトを実行します。

必要なソフトウェアをインストールするには:

  • Python 3、Python の仮想環境（venv）パッケージ、Node.js、Node.js パッケージ マネージャー（npm）をインストールします。

    sudo apt update
sudo apt install git pip python3-venv nodejs npm

プロジェクトのクローンを作成する

プロジェクト コードを開発用コンピュータにダウンロードします。プロジェクトのソースコードを取得するには、git ソース管理ソフトウェアが必要です。

プロジェクト コードをダウンロードするには:

  1. 次のコマンドを使用して、Git リポジトリのクローンを作成します。

    git clone https://github.com/google-gemini/gemma-cookbook.git

  2. 省略可: スパース チェックアウトを使用するようにローカルの Git リポジトリを構成して、プロジェクトのファイルのみを取得します。

    cd gemma-cookbook/
git sparse-checkout set Gemma/personal-code-assistant/
git sparse-checkout init --cone

Gemma ウェブサービス プロジェクト

このプロジェクトのウェブサービス部分（gemma-web-service）は、生成リクエストとレスポンスを処理するために基本的なウェブサービスでラップされた Gemma 2 2B の独立ホスト インスタンスを作成します。このチュートリアルで後述する VS Code 拡張機能は、このサービスに接続してコード アシスタンス リクエストを処理します。

ここでは、このプロジェクトの開発とテストの準備について説明します。一般的な設定手順には、前提条件のソフトウェアのインストール、コード リポジトリからのプロジェクトのクローン作成、いくつかの環境変数の設定、Python ライブラリのインストール、ウェブサービスのテストが含まれます。

ハードウェア要件

画像処理装置（GPU）または Tensor Processing Unit（TPU）を搭載し、モデルを保持するのに十分な GPU または TPU メモリがあるコンピュータで Gemma ウェブサービス プロジェクトを実行します。このウェブサービス プロジェクトで Gemma 2 2B 構成を実行するには、約 16 GB の GPU メモリ、約同じ量の通常の RAM、少なくとも 20 GB のディスク容量が必要です。

Gemma ウェブサービス プロジェクトを Google Cloud VM インスタンスにデプロイする場合は、次の要件に従ってインスタンスを構成します。

  • GPU ハードウェア: このプロジェクトを実行するには NVIDIA T4 が必要です（NVIDIA L4 以降を推奨）。
  • オペレーティング システム: [Deep Learning on Linux] オプション（特に、GPU ソフトウェア ドライバがプリインストールされた [Deep Learning VM with CUDA 12.3 M124]）を選択します。
  • ブートディスク サイズ: データ、モデル、サポート ソフトウェア用に 20 GB 以上のディスク容量をプロビジョニングします。

プロジェクトの構成

このプロジェクトでは、Python 3 と仮想環境（venv）を使用してパッケージを管理し、ウェブサービスを実行します。Python パッケージと依存関係を管理するために、venv Python 仮想環境を有効にして Python ライブラリをインストールします。setup_python スクリプトまたは pip インストーラを使用して Python ライブラリをインストールする前に、Python 仮想環境を有効にしてください。Python 仮想環境の使用方法については、Python venv のドキュメントをご覧ください。

Python ライブラリをインストールするには:

  1. ターミナル ウィンドウで gemma-web-service ディレクトリに移動します。

    cd Gemma/personal-code-assistant/gemma-web-service/

  2. このプロジェクトの Python 仮想環境（venv）を構成して有効にします。

    python3 -m venv venv
source venv/bin/activate

  3. setup_python スクリプトを使用して、このプロジェクトに必要な Python ライブラリをインストールします。

    ./setup_python.sh

環境変数を設定する

このプロジェクトを実行するには、Kaggle ユーザー名や Kaggle API トークンなど、いくつかの環境変数が必要です。Gemma モデルをダウンロードするには、Kaggle アカウントを取得し、Gemma モデルへのアクセスをリクエストする必要があります。このプロジェクトでは、Kaggle ユーザー名と Kaggle API トークンを .env ファイルに追加します。これは、Web サービス プログラムがモデルのダウンロードに使用します。

環境変数を設定するには:

  1. Kaggle のドキュメントの手順に沿って、Kaggle のユーザー名と API トークンを取得します。
  2. Gemma の設定ページの Gemma へのアクセス権を取得するの手順に沿って、Gemma モデルにアクセスします。

  3. プロジェクトのクローンのこの場所に .env テキスト ファイルを作成して、プロジェクトの環境変数ファイルを作成します。

    personal-code-assistant/gemma-web-service/.env

  4. .env テキスト ファイルを作成したら、次の設定を追加します。

    KAGGLE_USERNAME=<YOUR_KAGGLE_USERNAME_HERE>
KAGGLE_KEY=<YOUR_KAGGLE_KEY_HERE>

ウェブサービスを実行してテストする

プロジェクトのインストールと構成が完了したら、ウェブ アプリケーションを実行して、正しく構成されていることを確認します。これは、独自の用途にプロジェクトを編集する前に、ベースライン チェックとして行う必要があります。

プロジェクトを実行してテストするには:

  1. ターミナル ウィンドウで gemma-web-service ディレクトリに移動します。

    cd personal-code-assistant/gemma-web-service/

  2. run_service スクリプトを使用してアプリケーションを実行します。

    ./run_service.sh

  3. ウェブサービスを起動すると、プログラム コードに、サービスにアクセスできる URL が一覧表示されます。通常、この住所は次のとおりです。

    http://localhost:8000/

  4. test_post スクリプトを実行してサービスをテストします。

    ./test/test_post.sh

このスクリプトを使用してサービスを正常に実行してテストしたら、このチュートリアルの次のセクションで VS Code 拡張機能を使用してサービスに接続する準備が整います。

VS Code 拡張機能プロジェクト

このプロジェクトの VS Code 拡張機能（pipet-code-agent-2）は、新しい AI コーディング コマンドを追加するように設計された Microsoft Visual Studio Code アプリケーションのソフトウェア拡張機能を作成します。この拡張機能は、このチュートリアルで前述の Gemma ウェブサービスと通信します。この拡張機能は、JSON 形式のメッセージを使用して HTTP 経由でウェブサービスと通信します。

プロジェクトの構成

以下の手順では、開発とテスト用に Pipet Code Agent v2 プロジェクトを設定する方法について説明します。一般的な手順は、必要なソフトウェアのインストール、構成のインストールの実行、拡張機能の設定の構成、拡張機能のテストです。

必要なソフトウェアをインストールする

Pipet Code Agent プロジェクトは、Microsoft Visual Studio Code の拡張機能として実行され、Node.js と Node Package Manager（npm）ツールを使用してパッケージを管理し、アプリケーションを実行します。

必要なソフトウェアをインストールするには:

  1. プラットフォーム用の Visual Studio Code をダウンロードしてインストールします。
  2. プラットフォームのインストール手順に沿って、Node.js がインストールされていることを確認します。

プロジェクト ライブラリを構成する

npm コマンドライン ツールを使用して、必要な依存関係をダウンロードし、プロジェクトを構成します。

プロジェクト コードを構成するには:

  1. Pipet Code Agent プロジェクトのルート ディレクトリに移動します。

    cd Gemma/personal-code-assistant/pipet-code-agent-2/

  2. install コマンドを実行して依存関係をダウンロードし、プロジェクトを構成します。

    npm install

拡張機能の設定

これで、デバイスの VS Code で開発拡張機能として Pipet Code エージェントを実行して、インストールをテストできるようになります。新しい拡張機能を利用できる別の VS Code Extension Development Host ウィンドウが開きます。この新しいウィンドウで、拡張機能が個人の Gemma ウェブサービスにアクセスするために使用する設定を構成します。

Extension Development Host ウィンドウで実行されている Pipet Code エージェント 図 2. Pipet 拡張機能の設定が表示された VS Code 拡張機能開発ホスト ウィンドウ。

設定を構成してテストする手順は次のとおりです。

  1. VS Code アプリケーションを起動します。
  2. VS Code で、[ファイル > 新しいウィンドウ] を選択して新しいウィンドウを作成します。
  3. [File > Open Folder] を選択し、personal-code-assistant/pipet-code-agent-2/ フォルダを選択して、Pipet Code エージェント プロジェクトを開きます。
  4. pipet-code-agent-2/src/extension.ts ファイルを開きます。
  5. [Run] > [Start Debugging] を選択し、必要に応じて [VS Code Extension Development Host] オプションを選択して、拡張機能をデバッグモードで実行します。[Extension Development Host] ウィンドウが別に開きます。
  6. 新しい VS Code ウィンドウで、[Code] > [Settings] > [Settings] を選択して VS Code の設定を開きます。

  7. Gemma ウェブサービス サーバーのホストアドレスを構成設定として設定します。[Search Settings] フィールドに「Gemma」と入力し、[User] タブを選択します。[Gemma > Service: Host] 設定で、[settings.json で編集] リンクをクリックし、127.0.0.1、localhost、my-server.my-local-domain.com などのホストアドレスを追加します。

    "gemma.service.host": "your-host-address-here"

  8. 変更を settings.json ファイルに保存し、設定タブを閉じます。

拡張機能をテストする

これで、デバイス上の VS Code で開発拡張機能として Pipet Code エージェントを実行して、インストールをテストできるようになります。新しい拡張機能を利用できる別の VS Code Extension Development Host ウィンドウが開きます。

拡張機能コマンドをテストするには:

  1. VS Code の [Extension Development Host] ウィンドウで、エディタ ウィンドウで任意のコードを選択します。
  2. [表示] > [コマンド パレット] を選択して、コマンド パレットを開きます。
  3. コマンド パレットで Pipet と入力し、その接頭辞を持つコマンドのいずれかを選択します。

既存のコマンドを変更する

Pipet Code Agent で提供されるコマンドを変更することは、拡張機能の動作と機能を変更する最も簡単な方法です。このプロンプト コンテキスト情報は、Gemma 生成モデルがレスポンスを形成する際に使用されます。既存の Pipet コマンドのプロンプト インストラクションを変更することで、各コマンドの動作を変更できます。

この手順では、コマンドのプロンプト テキストを変更して review.ts コマンドを変更する方法について説明します。

review.ts コマンドの編集を準備するには:

  1. VS Code アプリケーションを起動します。
  2. VS Code で、[ファイル > 新しいウィンドウ] を選択して新しいウィンドウを作成します。
  3. [File > Open Folder] を選択し、pipet-code-agent/ フォルダを選択して、Pipet Code エージェント プロジェクトを開きます。
  4. pipet-code-agent/src/review.ts ファイルを開きます。

review.ts コマンドの動作を変更するには:

  1. review.ts ファイルで、PROMPT_INSTRUCTIONS 定数の 2 行目から最終行までを変更して Also note potential performance improvements を追加します。

    const PROMPT_INSTRUCTIONS = `
Reviewing code involves finding bugs and increasing code quality. Examples of
bugs are syntax errors or typos, out of memory errors, and boundary value
errors. Increasing code quality entails reducing complexity of code, eliminating
duplicate code, and ensuring other developers are able to understand the code.
Also note potential performance improvements.

Write a review of the following code:
`;

  2. 変更を review.ts ファイルに保存します。

変更したコマンドをテストするには:

  1. VS Code の Pipet 拡張機能プロジェクト ウィンドウで、src/extension.ts ファイルを開きます。
  2. 更新されたコードをビルドするには、[Terminal > Run Build Task...] を選択し、[npm: compile] オプションを選択します。
  3. [Run] > [Restart Debugging] を選択して、デバッガを再起動します。
  4. VS Code の [Extension Development Host] ウィンドウで、エディタ ウィンドウで任意のコードを選択します。
  5. [表示] > [コマンド パレット] を選択して、コマンド パレットを開きます。
  6. コマンド パレットで Pipet と入力し、[Pipet: Review the selected code] コマンドを選択します。

新しいコマンドを作成する

Gemma モデルでまったく新しいタスクを実行する新しいコマンドを作成することで、Pipet を拡張できます。comment.ts や review.ts などの各コマンド ファイルはほぼ自己完結型であり、アクティブなエディタからのテキストの収集、プロンプトの作成、Gemma ウェブサービスへの接続、プロンプトの送信、レスポンスの処理を行うためのコードが含まれています。

ここでは、既存のコマンド question.ts のコードをテンプレートとして使用して、新しいコマンドを作成する方法について説明します。

関数名を推奨するコマンドを作成するには:

  1. src/ ディレクトリに new-service.ts という名前の pipet-code-agent-2/src/question.ts ファイルのコピーを作成します。
  2. VS Code で src/new-service.ts ファイルを開きます。

  3. PROMPT_INSTRUCTIONS 値を編集して、新しいファイルのプロンプト インストラクションを変更します。

    // Provide instructions for the AI model
const PROMPT_INSTRUCTIONS = `
Build a Python web API service using FastAPI and uvicorn.
- Just output the code, DO NOT include any explanations.
- Do not include an 'if __name__ == "__main__":' statement.
- Do not include a '@app.get("/")' statement
- Do not include a '@app.get("/info")' statement
`;

  4. 新しい BOILERPLATE_CODE 定数を作成して、サービス ボイラープレートを追加します。

    const BOILERPLATE_CODE = `
# the following code for testing and diagnosis:
@app.get("/")
async def root():
    return "Server: OK"

@app.get("/info")
async def info():
    return "Service using FastAPI version: " + fastapi.__version__

# Run the service
if __name__ == "__main__":
    # host setting makes service available to other devices
    uvicorn.run(app, host="0.0.0.0", port=8000)
`;

  5. コマンド関数の名前を newService() に変更し、情報メッセージを更新します。

    export async function newService() {
  vscode.window.showInformationMessage('Building new service from template...');
...

  6. プロンプト アセンブリ コードを更新して、エディタで選択したテキストと PROMPT_INSTRUCTIONS を含めます。

    // Build the full prompt using the template.
  const promptText = `${selectedCode}${PROMPT_INSTRUCTIONS}`;

  7. レスポンスとボイラープレート コードを含めるように、レスポンス挿入コードを変更します。

    // Insert answer after selection.
editor.edit((editBuilder) => {
    editBuilder.insert(selection.end, "\n\n" + responseText);
    editBuilder.insert(selection.end, "\n" + BOILERPLATE_CODE);
});

  8. 変更を new-service.ts ファイルに保存します。

新しいコマンドを統合する

新しいコマンドのコードが完成したら、それを他の拡張機能と統合する必要があります。extension.ts ファイルと package.json ファイルを更新して、新しいコマンドを拡張機能の一部にし、VS Code で新しいコマンドを呼び出すようにします。

new-service コマンドを拡張機能コードと統合するには:

  1. VS Code で pipet-code-agent-2/src/extension.ts ファイルを開きます。

  2. 新しいインポート ステートメントを追加して、新しいコードファイルを拡張機能に追加します。

    import { newService } from './new-service';

  3. 次のコードを activate() 関数に追加して、新しいコマンドを登録します。

    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('pipet-code-agent.newService', newService);
}

  4. 変更を extension.ts ファイルに保存します。

name コマンドを拡張機能パッケージと統合するには:

  1. VS Code で pipet-code-agent/package.json ファイルを開きます。

  2. パッケージ ファイルの commands セクションに新しいコマンドを追加します。

    "contributes": {
  "commands": [
    ...
    {
      "command": "pipet-code-agent.newService",
      "title": "Pipet: Generate a FastAPI service."
    }
  ],

  3. 変更を package.json ファイルに保存します。

新しいコマンドをテストする

コマンドのコーディングと拡張機能との統合が完了したら、コマンドをテストできます。新しいコマンドは、VS Code の [Extension Development Host] ウィンドウでのみ使用できます。拡張機能のコードを編集した VS Code ウィンドウでは使用できません。

変更したコマンドをテストするには:

  1. VS Code の Pipet 拡張機能プロジェクト ウィンドウで、src/extension.ts ファイルを開きます。
  2. 更新されたコードをビルドするには、[Terminal > Run Build Task...] を選択し、[npm: compile] オプションを選択します。
  3. VS Code の Pipet 拡張機能プロジェクト ウィンドウで、[Run] > [Restart Debugging] を選択してデバッガを再起動します。これにより、別の Extension Development Host ウィンドウが再起動します。
  4. VS Code の [Extension Development Host] ウィンドウで、エディタ ウィンドウでコードを選択します。
  5. [表示] > [コマンド パレット] を選択して、コマンド パレットを開きます。
  6. コマンド パレットで Pipet と入力し、[Pipet: Generate a FastAPI service] コマンドを選択します。

これで、Gemma AI モデルで動作する VS Code 拡張機能コマンドが作成されました。さまざまなコマンドと指示を試して、自分に合った AI 支援コード開発ワークフローを構築してみてください。

拡張機能をパッケージ化してインストールする

拡張機能は、VS Code インスタンスでローカル インストール用に .vsix ファイルとしてパッケージ化できます。vsce コマンドライン ツールを使用して、拡張機能プロジェクトから .vsix パッケージ ファイルを生成し、VS Code インスタンスにインストールできます。拡張機能のパッケージ化の詳細については、VS Code の拡張機能の公開に関するドキュメントをご覧ください。拡張機能を VSIX ファイルとしてパッケージ化したら、VS Code に手動でインストールできます。

VSIX パッケージ化拡張機能をインストールするには:

  1. VS Code インスタンスで、[ファイル] > [拡張機能] を選択して [拡張機能] パネルを開きます。
  2. [Extensions] パネルで、右上のその他メニュー、[Install from VSIX] の順に選択します。
  3. 拡張機能プロジェクトから生成した .vsix パッケージ ファイルを開いてインストールします。

参考情報

このプロジェクトのコードの詳細については、Gemma Cookbook コード リポジトリをご覧ください。アプリの作成についてサポートが必要な場合や、他のデベロッパーと連携したい場合は、Google Developers Community Discord サーバーをご確認ください。Google AI を活用して構築するプロジェクトについては、動画の再生リストをご覧ください。