Gemma로 개인 AI 코딩 어시스턴트 빌드

인공지능 (AI) 모델의 코드 지원은 매우 유용하지만 연결, 비용 또는 데이터 보안 제한으로 인해 호스팅된 서드 파티 생성형 AI 모델을 사용할 수 없는 경우에는 어떻게 해야 할까요? Google의 Gemma 모델 제품군은 자체 하드웨어에서 다운로드하여 실행할 수 있으므로 모든 것을 로컬로 유지하고 코드베이스와 더 잘 작동하도록 모델을 조정할 수도 있습니다.

Gemma 또는 CodeGemma의 자체 인스턴스를 실행하면 지연 시간이 짧고 가용성이 높으며 비용이 절감될 수 있고 자체 네트워크에 모든 코딩 데이터를 보관할 수 있는 AI 코딩 지원을 받을 수 있습니다. 이 프로젝트에서는 Gemma를 호스팅하고 Microsoft Visual Studio Code 확장 프로그램에 연결하는 자체 웹 서비스를 설정하여 코딩하는 동안 모델을 더 편리하게 사용하는 방법을 보여줍니다. 이 프로젝트에는 두 개의 하위 프로젝트가 포함됩니다. 하나는 Gemma를 웹 서비스로 설정하고 래핑하는 프로젝트이고, 다른 하나는 웹 서비스에 연결하고 이를 사용하는 VS Code 확장 프로그램용 프로젝트입니다.

이 프로젝트와 확장 방법에 관한 동영상 개요(빌드한 사용자의 통계 포함)는 개인 AI 코드 어시스턴트 Google AI로 빌드 동영상을 참고하세요. Gemma Cookbook 코드 저장소에서 이 프로젝트의 코드를 검토할 수도 있습니다. 그렇지 않은 경우 다음 안내에 따라 프로젝트를 확장하면 됩니다.

개요

이 튜토리얼에서는 Gemma용 웹 서비스와 해당 서비스를 사용하는 VS Code 확장 프로그램이라는 두 프로젝트를 설정하고 확장하는 방법을 보여줍니다. 웹 서비스는 Python, Keras, JAX, FastAPI 라이브러리를 사용하여 Gemma 모델을 제공하고 요청을 처리합니다. Pipet이라는 VS Code 확장 프로그램은 코드 편집 창에서 코드, 텍스트 또는 주석을 선택하여 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 Demos/personal-code-assistant/
git sparse-checkout init --cone

Gemma 웹 서비스 프로젝트

이 프로젝트의 웹 서비스 부분 (gemma-web-service)은 생성 요청과 응답을 처리하기 위해 기본 웹 서비스로 래핑된 Gemma 2 2B의 독립적으로 호스팅된 인스턴스를 만듭니다. 이 튜토리얼의 뒷부분에서 설명하는 VS Code 확장 프로그램은 이 서비스에 연결하여 코드 지원 요청을 처리합니다.

이 안내에서는 개발 및 테스트를 위해 이 프로젝트를 준비하는 방법을 설명합니다. 일반 설정 단계에는 필수 소프트웨어 설치, 코드 저장소에서 프로젝트 클론, 환경 변수 몇 개 설정, Python 라이브러리 설치, 웹 서비스 테스트가 포함됩니다.

하드웨어 요구사항

그래픽 처리 장치(GPU) 또는 텐서 처리 장치 (TPU)가 있고 모델을 저장할 수 있는 충분한 GPU 또는 TPU 메모리가 있는 컴퓨터에서 Gemma 웹 서비스 프로젝트를 실행합니다. 이 웹 서비스 프로젝트에서 Gemma 2 2B 구성을 실행하려면 GPU 메모리 약 16GB, 일반 RAM 약 16GB, 디스크 공간 최소 20GB가 필요합니다.

Google Cloud VM 인스턴스에 Gemma 웹 서비스 프로젝트를 배포하는 경우 다음 요구사항에 따라 인스턴스를 구성합니다.

  • GPU 하드웨어: 이 프로젝트를 실행하려면 NVIDIA T4가 필요합니다 (NVIDIA L4 이상 권장).
  • 운영체제: Linux 딥 러닝 옵션, 특히 GPU 소프트웨어 드라이버가 사전 설치된 CUDA 12.3 M124가 포함된 Deep Learning VM을 선택합니다.
  • 부팅 디스크 크기: 데이터, 모델, 지원 소프트웨어를 위해 최소 20GB의 디스크 공간을 프로비저닝합니다.

프로젝트 구성

이 프로젝트에서는 Python 3과 가상 환경 (venv)을 사용하여 패키지를 관리하고 웹 서비스를 실행합니다. Python 패키지 및 종속 항목을 관리하기 위해 활성화된 venv 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 모델에 대한 액세스를 요청해야 합니다. 이 프로젝트에서는 웹 서비스 프로그램이 모델을 다운로드하는 데 사용하는 .env 파일에 Kaggle 사용자 이름과 Kaggle API 토큰을 추가합니다.

환경 변수를 설정하려면 다음 단계를 따르세요.

  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 확장 프로그램 프로젝트

이 프로젝트 (pipet-code-agent-2)의 VS Code 확장 프로그램은 새로운 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 확장 프로그램 개발 호스트 창이 열립니다. 이 새 창에서 확장 프로그램이 개인 Gemma 웹 서비스에 액세스하는 데 사용하는 설정을 구성합니다.

확장 프로그램 개발 호스트 창에서 실행되는 Pipet Code Agent그림 2. Pipet 확장 프로그램 설정이 있는 VS Code 확장 프로그램 개발 호스트 창

설정을 구성하고 테스트하려면 다음 단계를 따르세요.

  1. VS Code 애플리케이션을 시작합니다.
  2. VS Code에서 File > New Window를 선택하여 새 창을 만듭니다.
  3. 파일 > 폴더 열기를 선택하고 personal-code-assistant/pipet-code-agent-2/ 폴더를 선택하여 Pipet Code Agent 프로젝트를 엽니다.
  4. pipet-code-agent-2/src/extension.ts 파일을 엽니다.
  5. 실행 > 디버깅 시작을 선택하여 디버그 모드에서 확장 프로그램을 실행하고 필요한 경우 VS Code 확장 프로그램 개발 호스트 옵션을 선택합니다. 이 단계에서는 별도의 확장 프로그램 개발 호스트 창이 열립니다.
  6. 새 VS Code 창에서 코드 > 설정 > 설정을 선택하여 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 확장 프로그램 개발 호스트 창이 열립니다.

확장 프로그램 명령어를 테스트하려면 다음 단계를 따르세요.

  1. VS Code 확장 프로그램 개발 호스트 창에서 편집기 창의 코드를 선택합니다.
  2. 보기 > 명령어 팔레트를 선택하여 명령어 팔레트를 엽니다.
  3. 명령어 팔레트에서 Pipet를 입력하고 해당 접두사가 있는 명령어 중 하나를 선택합니다.

기존 명령어 수정

Pipet Code Agent에 제공된 명령어를 수정하는 것이 확장 프로그램의 동작과 기능을 변경하는 가장 간단한 방법입니다. 이 프롬프트 컨텍스트 정보는 Gemma 생성형 모델이 대답을 구성하는 데 도움이 됩니다. 기존 Pipet 명령어의 프롬프트 안내를 변경하면 각 명령어의 동작 방식을 변경할 수 있습니다.

이 안내에서는 명령어의 프롬프트 텍스트를 변경하여 review.ts 명령어를 수정하는 방법을 설명합니다.

review.ts 명령어를 수정할 준비를 하려면 다음 단계를 따르세요.

  1. VS Code 애플리케이션을 시작합니다.
  2. VS Code에서 File > New Window를 선택하여 새 창을 만듭니다.
  3. 파일 > 폴더 열기를 선택하고 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. 터미널 > 빌드 작업 실행...을 선택한 다음 npm: compile 옵션을 선택하여 업데이트된 코드를 빌드합니다.
  3. Run > Restart Debugging을 선택하여 디버거를 다시 시작합니다.
  4. VS Code 확장 프로그램 개발 호스트 창에서 편집기 창의 코드를 선택합니다.
  5. 보기 > 명령어 팔레트를 선택하여 명령어 팔레트를 엽니다.
  6. 명령어 팔레트에서 Pipet를 입력하고 Pipet: Review the selected code 명령어를 선택합니다.

새 명령어 만들기

Gemma 모델로 완전히 새로운 작업을 실행하는 새 명령어를 만들어 Pipet을 확장할 수 있습니다. comment.ts 또는 review.ts과 같은 각 명령어 파일은 대부분 자체적으로 포함되어 있으며 활성 편집기에서 텍스트를 수집하고, 프롬프트를 작성하고, Gemma 웹 서비스에 연결하고, 프롬프트를 전송하고, 응답을 처리하는 코드를 포함합니다.

이 안내에서는 기존 명령어 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.ts 및 package.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 확장 프로그램 개발 호스트 창에서만 사용할 수 있으며 확장 프로그램의 코드를 수정한 VS Code 창에서는 사용할 수 없습니다.

수정된 명령어를 테스트하려면 다음 단계를 따르세요.

  1. VS Code Pipet 확장 프로그램 프로젝트 창에서 src/extension.ts 파일을 엽니다.
  2. 터미널 > 빌드 작업 실행...을 선택한 다음 npm: compile 옵션을 선택하여 업데이트된 코드를 빌드합니다.
  3. VS Code Pipet 확장 프로그램 프로젝트 창에서 실행 > 디버깅 다시 시작을 선택하여 디버거를 다시 시작합니다. 그러면 별도의 확장 프로그램 개발 호스트 창이 다시 시작됩니다.
  4. VS Code 확장 프로그램 개발 호스트 창에서 편집기 창의 코드를 선택합니다.
  5. 보기 > 명령어 팔레트를 선택하여 명령어 팔레트를 엽니다.
  6. 명령어 팔레트에서 Pipet를 입력하고 Pipet: FastAPI 서비스 생성 명령어를 선택합니다.

이제 Gemma AI 모델과 함께 작동하는 VS Code 확장 프로그램 명령어를 빌드했습니다. 다양한 명령어와 요청 사항을 실험하여 나에게 맞는 AI 지원 코드 개발 워크플로를 구축해 보세요.

확장 프로그램 패키징 및 설치

VS Code 인스턴스에 로컬로 설치할 수 있도록 확장 프로그램을 .vsix 파일로 패키징할 수 있습니다. vsce 명령줄 도구를 사용하여 확장 프로그램 프로젝트에서 .vsix 패키지 파일을 생성합니다. 이 파일은 VS Code 인스턴스에 설치할 수 있습니다. 확장 프로그램 패키징에 관한 자세한 내용은 VS Code 확장 프로그램 게시 문서를 참고하세요. 확장 프로그램을 VSIX 파일로 패키징한 후 VS Code에 수동으로 설치할 수 있습니다.

VSIX 패키지 확장 프로그램을 설치하려면 다음 단계를 따르세요.

  1. VS Code 인스턴스에서 파일 > 확장 프로그램을 선택하여 확장 프로그램 패널을 엽니다.
  2. 확장 프로그램 패널에서 오른쪽 상단의 점 3개 메뉴를 선택한 다음 VSIX에서 설치를 선택합니다.
  3. 확장 프로그램 프로젝트에서 생성한 .vsix 패키지 파일을 열어 설치합니다.

추가 리소스

이 프로젝트의 코드에 관한 자세한 내용은 Gemma Cookbook 코드 저장소를 참고하세요. 애플리케이션 빌드에 도움이 필요하거나 다른 개발자와 공동작업하고 싶다면 Google Developers Community Discord 서버를 확인하세요. Google AI로 빌드 프로젝트에 관한 자세한 내용은 동영상 재생목록을 참고하세요.