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

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

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

빌드한 사람들의 유용한 정보를 비롯하여 이 프로젝트에 대한 개요와 확장 방법을 보려면 Business Email AI Assistant 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, Node.js, Node.js 패키지 관리자 (npm)용 가상 환경 (venv) 패키지인 Python 3를 설치합니다.

    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 Processing Unit (TPU)과 모델을 보관하기에 충분한 GPU 또는 TPU 메모리가 있는 컴퓨터에서 Gemma 웹 서비스 프로젝트를 실행합니다. 이 웹 서비스 프로젝트에서 Gemma 2 2B 구성을 실행하려면 약 16GB의 GPU 메모리, 약 같은 양의 일반 RAM, 최소 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 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 토큰을 비롯한 몇 가지 환경 환경 변수가 필요합니다. 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 확장 프로그램 프로젝트

이 프로젝트의 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 패키지 관리자 (npm) 도구를 사용하여 패키지를 관리하고 애플리케이션을 실행합니다.

필수 소프트웨어를 설치하려면 다음 단계를 따르세요.

  1. 플랫폼에 맞는 Visual Studio Code를 다운로드하여 설치합니다.
  2. 플랫폼의 설치 안내에 따라 Node.js가 설치되어 있는지 확인합니다.

프로젝트 라이브러리 구성

npm 명령줄 도구를 사용하여 필요한 종속 항목을 다운로드하고 프로젝트를 구성합니다.

프로젝트 코드를 구성하려면 다음 단계를 따르세요.

  1. Pipet Code Agent 프로젝트 루트 디렉터리로 이동합니다.

    cd Gemma/personal-code-assistant/pipet-code-agent-2/

  2. install 명령어를 실행하여 종속 항목을 다운로드하고 프로젝트를 구성합니다.

    npm install

확장 프로그램 구성

이제 기기의 VS Code에서 Pipet Code Agent를 개발 확장 프로그램으로 실행하여 설치를 테스트할 수 있습니다. 테스트를 실행하면 새 확장 프로그램을 사용할 수 있는 별도의 VS Code Extension Development Host 창이 열립니다. 이 새 창에서 확장 프로그램이 개인 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. Run > Start Debugging(실행 > 디버깅 시작)을 선택하여 디버그 모드에서 확장 프로그램을 실행하고 필요한 경우 VS Code Extension Development Host(VS Code 확장 프로그램 개발 호스트) 옵션을 선택합니다. 이 단계에서는 별도의 Extension Development Host 창이 열립니다.
  6. 새 VS Code 창에서 Code > Settings > Settings를 선택하여 VS Code 설정을 엽니다.

  7. Gemma 웹 서비스 서버의 호스트 주소를 구성 설정으로 설정합니다. Search Settings(검색 설정) 입력란에 Gemma를 입력하고 User(사용자) 탭을 선택한 다음 Gemma > Service: Host(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에서 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 Extension Development Host 창의 편집기 창에 있는 코드를 선택합니다.
  5. 뷰 > 명령어 팔레트를 선택하여 명령어 팔레트를 엽니다.
  6. 명령어 팔레트에서 Pipet를 입력하고 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. 터미널 > Run Build Task...(빌드 작업 실행)를 선택한 다음 npm: compile(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(피펫: FastAPI 서비스 생성) 명령어를 선택합니다.

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

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

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

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

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

추가 리소스

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