使用 Gemma 打造個人化 AI 程式設計助理

從人工智慧 (AI) 模型取得程式碼輔助功能非常實用，但如果因為連線、成本或資料安全限制，而無法使用第三方代管的生成式 AI 模型，該怎麼辦？您可以下載並在自己的硬體上執行 Google 的 Gemma 模型系列，將所有內容保留在本機，甚至可以調整模型，讓模型更瞭解您的程式碼。

執行 Gemma 或 CodeGemma 的專屬執行個體，即可取得低延遲、高可用性、可能較低成本的 AI 程式碼輔助功能，並將所有程式碼資料保留在自己的網路上。這個專案說明如何設定自己的網路服務來代管 Gemma，並將其連線至 Microsoft Visual Studio Code 擴充功能，以便在編碼時更方便地使用模型。這個專案包含兩個子專案：一個專案用於設定 Gemma 並將其包裝成網路服務，另一個專案則用於 VS Code 擴充功能，可連線及使用網路服務。

如要觀看這個專案的影片簡介，以及瞭解如何擴充專案，包括專案建構人員的深入分析，請參閱「個人 AI 程式碼助理」Build with Google AI 影片。您也可以在 Gemma Cookbook 程式碼存放區中查看這個專案的程式碼。如要延長專案期限，請按照下列指示操作。

總覽

本教學課程說明如何設定及擴充兩個專案：Gemma 的網路服務，以及用於該服務的 VS Code 擴充功能。這項網路服務使用 Python、Keras、JAX 和 FastAPI 程式庫，提供 Gemma 模型並處理要求。VS Code 擴充功能 (稱為 Pipet) 會在指令區塊中新增指令，讓您在程式碼編輯視窗中選取程式碼、文字或註解，向 Gemma Web 服務提出要求，如圖 1 所示。

VS Code 擴充功能使用者介面螢幕截圖

圖 1. Visual Studio Code 中 Pipet 擴充功能的專案指令使用者介面

這兩個專案的完整原始碼都提供在 Gemma Cookbook 程式碼存放區中，您可以擴充這兩個專案，以配合您的需求和偏好的工作流程。

專案設定

這些操作說明會引導您準備好這個專案，以利開發和測試。一般設定步驟包括安裝必要軟體、從程式碼存放區複製專案、設定幾個環境變數、安裝 Python 和 Node.js 程式庫，以及測試網頁應用程式。

安裝必要軟體

這個專案使用 Python 3、虛擬環境 (venv)、Node.js 和 Node Package Manager (npm) 管理套件及執行兩個專案。

如要安裝必要軟體，請按照下列步驟操作：

  • 安裝 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) 的電腦上，執行 Gemma 網路服務專案，並確保 GPU 或 TPU 記憶體足以容納模型。如要在這個網路服務專案中執行 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 套件和依附元件。請務必先啟用 Python 虛擬環境，再使用 setup_python 指令碼或 pip 安裝程式安裝 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 權杖。您必須擁有 Kaggle 帳戶並要求存取 Gemma 模型，才能下載模型。在這個專案中，您會在 .env 檔案中新增 Kaggle 使用者名稱和 Kaggle API 權杖，供 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. 啟動 Web 服務後，程式碼會列出可存取該服務的網址。這個地址通常是：

    http://localhost:8000/

  4. 執行 test_post 指令碼來測試服務：

    ./test/test_post.sh

使用這個指令碼成功執行及測試服務後，您應該就能在下一個教學課程部分中，使用 VS Code 擴充功能連線至服務。

VS Code 擴充功能專案

這個專案的 VS Code 擴充功能 (pipet-code-agent-2) 會建立 Microsoft Visual Studio Code 應用程式的軟體擴充功能，用於新增 AI 程式設計指令。這個擴充功能會與本教學課程先前說明的 Gemma 網路服務通訊。擴充功能會透過 http 與網路服務通訊，並使用 JSON 格式的訊息。

設定專案

這些操作說明將引導您設定 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 網路服務時使用的設定。

在擴充功能開發主機視窗中執行的 Pipet Code Agent 圖 2. VS Code 擴充功能開發主機視窗，顯示 Pipet 擴充功能設定。

如要設定及測試設定，請按照下列步驟操作：

  1. 啟動 VS Code 應用程式。
  2. 在 VS Code 中，依序選取「File」>「New Window」，建立新視窗。
  3. 依序選取「File」>「Open Folder」，然後選取 personal-code-assistant/pipet-code-agent-2/ 資料夾，開啟 Pipet Code Agent 專案。
  4. 開啟 pipet-code-agent-2/src/extension.ts 檔案。
  5. 選取「Run」>「Start Debugging」，以偵錯模式執行擴充功能，並視需要選取「VS Code Extension Development Host」選項。這個步驟會開啟另一個「擴充功能開發主機」視窗。
  6. 在新 VS Code 視窗中，依序選取「Code」>「Settings」>「Settings」，開啟 VS Code 設定。

  7. 將 Gemma 網路服務伺服器的主機位址設為設定。在「Search Settings」欄位中輸入 Gemma，選取「User」分頁，然後在「Gemma > Service: Host」設定中，按一下「Edit in 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. 依序選取「View」>「Command Palette」，開啟指令區塊面板。
  3. 在指令區塊面板中輸入 Pipet，然後選取其中一個以該前置字元開頭的指令。

修改現有指令

修改 Pipet Code Agent 提供的指令，是變更擴充功能行為和功能的簡單方法。這項提示脈絡資訊會引導 Gemma 生成模型形成回覆。只要變更現有 Pipet 指令中的提示指令，即可改變每個指令的行為。

這組操作說明會說明如何修改 review.ts 指令，方法是變更指令的提示文字。

如要準備編輯 review.ts 指令，請按照下列步驟操作：

  1. 啟動 VS Code 應用程式。
  2. 在 VS Code 中，依序選取「File」>「New Window」，建立新視窗。
  3. 依序選取「File」>「Open Folder」，然後選取 pipet-code-agent/ 資料夾，開啟 Pipet Code Agent 專案。
  4. 開啟 pipet-code-agent/src/review.ts 檔案。

如要修改 review.ts 指令的行為，請執行下列操作：

  1. 在 review.ts 檔案中，變更 PROMPT_INSTRUCTIONS 常數的倒數第二行，加入 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. 依序選取「View」>「Command Palette」，開啟指令區塊面板。
  6. 在「Command Palette」(指令面板) 中輸入 Pipet，然後選取「Pipet: Review the selected code」(Pipet：檢查所選程式碼) 指令。

建立新指令

您可以建立新指令，讓 Pipet 使用 Gemma 模型執行全新工作。每個指令檔案 (例如 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. 依序選取「Terminal」>「Run Build Task...」，然後選取「npm: compile」選項，建構更新後的程式碼。
  3. 在 VS Code Pipet 擴充功能專案視窗中，依序選取「Run」>「Restart Debugging」，重新啟動偵錯工具，這會重新啟動另一個「Extension Development Host」視窗。
  4. 在 VS Code 的「Extension Development Host」視窗中，選取編輯器視窗中的部分程式碼。
  5. 依序選取「View」>「Command Palette」，開啟指令區塊面板。
  6. 在指令面板中輸入 Pipet，然後選取「Pipet: Generate a FastAPI service」(Pipet：產生 FastAPI 服務) 指令。

您現在已建構可搭配 Gemma AI 模型使用的 VS Code 擴充功能指令！嘗試使用不同指令和指示，打造適合自己的 AI 輔助程式碼開發工作流程！

封裝並安裝擴充功能

您可以將擴充功能封裝為 .vsix 檔案，在本機 VS Code 執行個體中安裝。使用 vsce 指令列工具從擴充功能專案產生 .vsix 套件檔案，然後在 VS Code 執行個體中安裝。如要瞭解如何封裝擴充功能，請參閱 VS Code 的「發布擴充功能」說明文件。將擴充功能封裝為 VSIX 檔案後，即可手動安裝至 VS Code。

如要安裝 VSIX 封裝的擴充功能，請按照下列步驟操作：

  1. 在 VS Code 執行個體中，依序選擇「File」>「Extensions」，開啟「Extensions」面板。
  2. 在「擴充功能」面板中，選取右上角的三點選單，然後選取「從 VSIX 安裝」。
  3. 開啟從擴充功能專案產生的 .vsix 套件檔案，然後安裝。

其他資源

如要進一步瞭解這個專案的程式碼，請參閱 Gemma Cookbook 程式碼存放區。如需建構應用程式方面的協助，或想與其他開發人員合作，請前往 Google 開發人員社群 Discord 伺服器。如要查看更多「使用 Google AI 建構」專案，請參閱影片播放清單。