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

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

只要執行您自己的 Gemma 或 CodeGemma 執行個體，就能取得 AI 程式設計的協助，而且延遲時間短、高可用性、成本更低，而且還能將所有程式設計資料存放在自有網路中。本專案將說明如何設定自己的網路服務來代管 Gemma，並將其連結至 Microsoft Visual Studio Code 擴充功能，以便在程式設計時更方便使用模型。這項專案包含兩個子專案：一個用於設定 Gemma 並包裝至網路服務的專案，另一個用於設定 VS Code 擴充功能 (連結及使用網路服務)。

如要觀看這項專案的總覽影片和擴充方式，以及開發人員提供的洞察資料，請觀看「Business Email AI Assistant Build with Google AI」影片。您也可以在 Gemma Cookbook 程式碼存放區中查看這個專案的程式碼。否則，您可以按照下列操作說明開始擴充專案。

總覽

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

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

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

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

專案設定

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

安裝所需的軟體

這個專案使用 Python 3、虛擬環境 (venv)、Node.js 和 Node 套件管理工具 (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 Gemma/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 以上版本)
  • 作業系統：選擇「Deep Learning on Linux」選項，特別是「Deep Learning VM with CUDA 12.3 M124」，並安裝 GPU 軟體驅動程式。
  • 開機磁碟大小：為資料、模型和支援軟體預留至少 20 GB 的磁碟空間。

設定專案

這個專案會使用 Python 3 和虛擬環境 (venv) 管理套件和執行網路服務。啟用 venv Python 虛擬環境，安裝 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 權杖。您必須擁有 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 網路服務通訊。這項擴充功能會使用 JSON 格式訊息，透過 HTTP 與網路服務通訊。

設定專案

本操作說明將引導您逐步完成 Pipet Code Agent v2 專案的設定，以便進行開發和測試。一般步驟包括安裝必要軟體、執行設定安裝作業、設定擴充功能，以及測試擴充功能。

安裝必要軟體

Pipet Code Agent 專案會以 Microsoft Visual Studio Code 的擴充功能形式執行，並使用 Node.js 和 Node 套件管理工具 (npm) 管理套件和執行應用程式。

如何安裝必要軟體：

  1. 下載並安裝適用於您平台的 Visual Studio Code。
  2. 請按照您所屬平台的安裝操作說明，確認 Node.js 已安裝。

設定專案程式庫

使用 npm 指令列工具下載必要的依附元件，並設定專案。

如何設定專案程式碼：

  1. 前往 Pipet Code Agent 專案的根目錄。

    cd Gemma/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. 含有 Pipet 擴充功能設定的 VS Code Extension 開發主機視窗。

如何設定及測試設定：

  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」選項。這個步驟會開啟獨立的「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 檔案，然後關閉設定分頁。

測試擴充功能

您現在應該可以透過在裝置上執行 Pipet Code Agent 做為 VS Code 中的開發擴充功能，來測試安裝作業。測試會開啟一個獨立 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：檢閱所選程式碼)指令。

建立新指令

您可以透過建立新的指令，使用 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. 依序選取「View」>「Command Palette」，開啟指令面板。
  6. 在「Command Palette」(指令面板) 中輸入 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 執行個體中，選擇「File」(檔案) >「Extensions」(擴充功能) 以開啟「Extensions」(擴充功能) 面板。
  2. 在「Extensions」面板中，選取右上方的三點圖示選單，然後選取「Install from VSIX」。
  3. 開啟從擴充功能專案產生的 .vsix 套件檔案，即可安裝擴充功能。

其他資源

如要進一步瞭解這個專案的程式碼，請參閱 Gemma Cookbook 程式碼存放區。如果您需要應用程式建構方面的協助，或希望與其他開發人員合作，請造訪 Google 開發人員社群 Discord 伺服器。如果要進一步瞭解 Build with Google AI 專案，請查看影片播放清單。