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 コード リポジトリで確認することもできます。それ以外の場合は、次の手順に沿ってプロジェクトの拡張を開始できます。

概要

このチュートリアルでは、Gemma 用のウェブ サービスと、そのサービスで使用する VS Code 拡張機能という 2 つのプロジェクトを設定して拡張する方法について説明します。ウェブサービスは、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 Demos/personal-code-assistant/
git sparse-checkout init --cone

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

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

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

ハードウェア要件

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

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

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

プロジェクトの構成

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

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

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

    cd Demos/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 ファイルに追加します。このファイルは、モデルのダウンロードにウェブ サービス プログラムで使用されます。

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

  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 Demos/personal-code-assistant/pipet-code-agent-2/

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

    npm install

拡張機能を設定する

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

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

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

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

  7. Gemma ウェブサービス サーバーのホストアドレスを構成設定として設定します。[検索設定] フィールドに「Gemma」と入力し、[ユーザー] タブを選択します。[Gemma > サービス: ホスト] 設定で、[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 Agent を開発拡張機能として実行して、インストールをテストできるようになりました。テストでは、新しい拡張機能を使用できる別の 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. [ファイル > フォルダを開く] を選択し、pipet-code-agent/ フォルダを選択して、Pipet Code Agent プロジェクトを開きます。
  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. [ターミナル] > [ビルドタスクを実行...] を選択し、[npm: コンパイル] オプションを選択して、更新されたコードをビルドします。
  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 の拡張機能開発ホスト ウィンドウでのみ使用できます。拡張機能のコードを編集した VS Code ウィンドウでは使用できません。

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

  1. VS Code Pipet 拡張機能のプロジェクト ウィンドウで、src/extension.ts ファイルを開きます。
  2. [ターミナル] > [ビルドタスクを実行...] を選択し、[npm: コンパイル] オプションを選択して、更新されたコードをビルドします。
  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 アシスト コード開発ワークフローを構築してみてください。

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

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

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

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

参考情報

このプロジェクトのコードの詳細については、Gemma Cookbook コード リポジトリをご覧ください。アプリの作成についてサポートが必要な場合や、他のデベロッパーとのコラボレーションをご希望の場合は、Google Developers Community Discord サーバーをご利用ください。Build with Google AI プロジェクトの詳細については、動画の再生リストをご覧ください。