使用 Gemma 打造个人 AI 编码助理

从 AI 模型获取代码辅助功能非常有用,但如果您因连接、费用或数据安全限制而无法使用第三方托管的生成式 AI 模型,该怎么办?Google 的 Gemma 模型系列可供下载并在您自己的硬件上运行,因此您可以将所有内容都保留在本地,甚至可以选择对模型进行调优,使其更好地与您的代码库搭配使用。

运行自己的 GemmaCodeGemma 实例可让您获得低延迟、高可用性、可能更低的成本以及能够将所有编码数据保留在您自己的网络中的 AI 编码辅助功能。此项目展示了如何设置自己的 Web 服务来托管 Gemma,并将其连接到 Microsoft Visual Studio Code 扩展程序,以便在编码时更方便地使用该模型。此项目包含两个子项目:一个项目用于设置 Gemma 并将其封装到 Web 服务中,另一个项目用于连接和使用该 Web 服务的 VS Code 扩展程序。

如需观看有关此项目及其扩展方式的视频概览,包括项目构建者的真知灼见,请观看 Personal AI Code Assistant(使用 Google AI 构建的个人 AI 代码助理)视频。您还可以在 Gemma Cookbook 代码库中查看此项目的代码。 否则,您可以按照以下说明开始扩展项目。

概览

本教程将介绍如何设置和扩展两个项目:一个用于 Gemma 的 Web 服务和一个用于使用该服务的 VS Code 扩展程序。该 Web 服务使用 Python、Keras、JAX 和 FastAPI 库来提供 Gemma 模型并处理请求。名为 Pipet 的 VS Code 扩展程序会向命令面板添加命令,让您可以通过在代码编辑窗口中选择代码、文本或注释来向 Gemma Web 服务发出请求,如图 1 所示。

VS Code 扩展程序界面的屏幕截图

图 1. Visual Studio Code 中 Pipet 扩展程序的项目命令用户界面

这两个项目的完整源代码均在 Gemma Cookbook 代码库中提供,您可以扩展这两个项目,以适应您的需求和首选工作流程。

项目设置

这些说明将引导您完成准备工作,以便进行此项目的开发和测试。常规设置步骤包括:安装必备软件、从代码库克隆项目、设置一些环境变量、安装 Python 和 Node.js 库,以及测试 Web 应用。

安装必需的软件

此项目使用 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 Web 服务项目

此项目的 Web 服务部分 (gemma-web-service) 会创建一个独立托管的 Gemma 2 2B 实例,该实例封装在一个基本 Web 服务中,用于处理生成请求和响应。本教程后面部分将介绍的 VS Code 扩展程序会连接到此服务,以处理代码辅助请求。

这些说明将引导您完成准备工作,以便进行此项目的开发和测试。常规设置步骤包括:安装必备软件、从代码库克隆项目、设置一些环境变量、安装 Python 库以及测试 Web 服务。

硬件要求

在具有图形处理单元 (GPU) 或张量处理单元 (TPU) 的计算机上运行 Gemma Web 服务项目,并确保 GPU 或 TPU 内存足以容纳模型。如需在此 Web 服务项目中运行 Gemma 2 2B 配置,您需要大约 16GB 的 GPU 内存、大约相同数量的常规 RAM,以及至少 20GB 的磁盘空间。

如果您要在 Google Cloud 虚拟机实例上部署 Gemma Web 服务项目,请按照以下要求配置实例:

  • GPU 硬件:运行此项目需要 NVIDIA T4(建议使用 NVIDIA L4 或更高版本)
  • 操作系统:选择 Deep Learning on Linux 选项,具体而言,选择预安装了 GPU 软件驱动程序的 Deep Learning VM with CUDA 12.3 M124
  • 启动磁盘大小:至少为数据、模型和支持软件预配 20 GB 的磁盘空间。

配置项目

此项目使用 Python 3 和虚拟环境 (venv) 来管理软件包并运行 Web 服务。在 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 令牌。您必须拥有 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>
    

运行并测试 Web 服务

完成项目的安装和配置后,运行 Web 应用以确认您已正确配置该应用。在编辑项目以供自己使用之前,您应先执行此操作,作为基准检查。

如需运行和测试项目,请执行以下操作:

  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 Web 服务进行通信。该扩展程序通过 HTTP 使用 JSON 格式的消息与 Web 服务进行通信。

配置项目

以下说明将引导您完成 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 Web 服务的设置。

在扩展程序开发主机窗口中运行的 Pipet Code Agent 图 2. VS Code 扩展程序开发主机窗口,其中显示了 Pipet 扩展程序的设置。

如需配置和测试设置,请执行以下操作:

  1. 启动 VS Code 应用。
  2. 在 VS Code 中,依次选择文件 > 新建窗口,创建一个新窗口。
  3. 依次选择 File > Open Folder,然后选择 personal-code-assistant/pipet-code-agent-2/ 文件夹,打开 Pipet Code Agent 项目。
  4. 打开 pipet-code-agent-2/src/extension.ts 文件。
  5. 选择运行 > 开始调试,以调试模式运行扩展程序,并在必要时选择 VS Code 扩展程序开发主机选项。此步骤会打开一个单独的扩展程序开发主机窗口。
  6. 在新 VS Code 窗口中,依次选择 Code > Settings > Settings,打开 VS Code 设置。
  7. 将 Gemma Web 服务服务器的主机地址设置为配置设置。在搜索设置字段中,输入 Gemma,选择用户标签页,然后在 Gemma > 服务:主机设置中,点击在 settings.json 中修改链接,并添加主机地址,例如 127.0.0.1localhostmy-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 扩展程序开发主机窗口中,选择编辑器窗口中的任意代码。
  2. 选择 View > Command Palette 以打开命令面板。
  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 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. 选择终端 > 运行 build 任务...,然后选择 npm: compile 选项,以构建更新后的代码。
  3. 选择 Run > Restart Debugging,重启调试器。
  4. 在 VS Code 扩展程序开发主机窗口中,选择编辑器窗口中的任意代码。
  5. 选择 View > Command Palette 以打开命令面板。
  6. 在 Command Palette 中,输入 Pipet,然后选择 Pipet: Review the selected code 命令。

创建新命令

您可以创建新命令,让 Pipet 使用 Gemma 模型执行全新的任务,从而扩展 Pipet 的功能。每个命令文件(例如 comment.tsreview.ts)大多是自包含的,并且包含用于从活动编辑器收集文本、撰写提示、连接到 Gemma Web 服务、发送提示和处理响应的代码。

这组说明介绍了如何使用现有命令 question.ts 的代码作为模板来构建新命令。

创建用于推荐函数名称的命令:

  1. src/ 目录中创建 pipet-code-agent-2/src/question.ts 文件的副本,并将其命名为 new-service.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.tspackage.json 文件,使新命令成为扩展程序的一部分,并使 VS Code 能够调用新命令。

new-service 命令与扩展程序代码集成:

  1. 在 VS Code 中,打开 pipet-code-agent-2/src/extension.ts 文件。
  2. 通过添加新的 import 语句,将新代码文件添加到扩展程序中。

    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. 选择终端 > 运行 build 任务...,然后选择 npm: compile 选项,以构建更新后的代码。
  3. 在 VS Code Pipet 扩展程序项目窗口中,选择运行 > 重新启动调试,以重新启动单独的扩展程序开发主机窗口。
  4. 在 VS Code 的扩展程序开发主机窗口中,选择编辑器窗口中的一些代码。
  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,打开扩展程序面板。
  2. 扩展程序面板中,选择右上角的三点状菜单,然后选择从 VSIX 安装
  3. 打开从扩展程序项目生成的 .vsix 软件包文件以进行安装。

其他资源

如需详细了解此项目的代码,请参阅 Gemma 食谱代码库。如果您在构建应用时需要帮助,或者希望与其他开发者协作,请访问 Google 开发者社区 Discord 服务器。如需了解更多“Build with Google AI”项目,请查看视频播放列表