생산성

VSCode 플러그인으로 오픈소스 LLM 기반 Code Assistant, Continue (feat. Ollama)

Omoknooni 2024. 8. 21. 22:27

OpenAI의 chatGPT와 Github의 Copilot을 시작으로 다양한 LLM이 생겨나고 발전하면서 Coding에 특화된 모델이나 이를 활용한 서비스들이 속속 등장하는 시대가 도래했다.

 

필자도 Coding 작업을 할때는 이전에 간단하게 소개를 했었던 AWS Codewhisperer를 주로 사용하고, chatGPT나 Claude를 코드 리펙토링이나 로직 구현 등에 이용을 했었다. 이 밖에도 Cursor IDE도 한 달간 체험을 해본 경험이 있다.

 

Continue

오픈소스 AI-code assistant, LLM을 연결해 커스텀 code completion과 chatting을 이용할 수 있는 툴이다.

VSCode와 JetBrain의 플러그인 방식으로 설치할 수 있다.

 

 

GitHub - continuedev/continue: ⏩ Continue is the leading open-source AI code assistant. You can connect any models and any con

⏩ Continue is the leading open-source AI code assistant. You can connect any models and any context to build custom autocomplete and chat experiences inside VS Code and JetBrains - continuedev/cont...

github.com

 

Continue에 연결할 수 있는 LLM은 SaaS 스타일의 LLM API 뿐만 아니라 로컬이나 원격에 구축한 LLM 모델을 API 호출하여 응답을 받아올 수도 있다.

 

Code Assistant Model에서 사용되는 주요 기술들은 크게 아래와 같다.

  • Code Suggestion : 작성 중인 맥락과 패턴을 바탕으로 다음에 들어올 수 있는 코드 추천
  • Code Completion : 작성 중인 맥락과 패턴을 바탕으로 코드의 나머지 부분 자동완성
  • Code Refactoring : 기존 코드의 리펙토링
  • Document Generation : 코드, 함수에 대한 설명(주석) 자동 생성

 

Continue 구축

앞서 소개했던 Ollama 프레임워크를 통해 오픈소스 모델들을 사용할 수 있도록 Continue에 연결해보도록 한다.

먼저, vscode의 Extension을 통해 Continue를 설치한다.

 

Extension을 설치한 뒤, 다음으로 Continue가 사용할 model Provider와 LLM을 연결해주어야한다. 

config.json에서 플러그인에서 사용할 LLM을 지정해줄 수 있다. 

 

모델 선택

Continue는 3가지 종류의 모델을 연결할 수 있다.

  • chat : 개발 관련의 질문에 답변하고 설명을 제공하는 맥락을 이해하는 연속적인 대화
  • autocomplete : 작성된 코드를 바탕으로 나머지 코드 자동완성 
  • embedding : 작성된 코드와 텍스트의 식별(수치화)

Continue에서는 3가지 작업 모두 chatGPT나 Claude같은 범용적 모델을 연결하는 것이 아닌, 각 작업에 적합한 모델을 연결할 것을 권장한다.

GPT나 Claude는 Coding 특화로 학습된것이 아니므로, autocomplete에는 coding 특화 모델을 사용하라

 

이번 글에서는 로컬, 오프라인 환경에서 Ollama를 통해 오픈소스 모델을 사용할 것이므로 Ollama가 지원하는 모델들 중에서 각 파트에 맞는 모델을 선택해 연결하도록 한다.

이번 글에서는 아래와 같은 모델들을 선택해주었다.

  • chat : LLama3.1
  • autocomplete : deepseek-coder-v2
  • embeding : bge-m3

Ollama를 통해 해당 모델들을 로컬로 다운받는다.

ollama pull llama3.1

ollama pull deepseek-coder-v2

ollama pull bge-m3

 

모델을 연결하기 위해 config.json을 다음과 같이 작성한다.

{
  "models": [
    {
      "title": "Llama3.1",
      "provider": "ollama",
      "model": "llama3.1"
    }
  ],
  "tabAutocompleteModel": {
    "title": "Tab Autocomplete Model",
    "provider": "ollama",
    "model": "deepseek-coder-v2"
  },
  "tabAutocompleteOptions": {
    "useCopyBuffer": false,
    "maxPromptTokens": 400,
    "prefixPercentage": 0.5
  },
  "embeddingsProvider": {
    "provider": "ollama",
    "model": "bge-m3",
  }
}

 

각 모델의 API를 호출할 수 있는 주소를 파라미터로 주어서, 각 LLM을 구축한 중앙 서버를 두고 사내의 인원들이 접근해서 사용하는 등의 아키텍쳐 구성도 간단하게 생각해 볼 수 있을 듯하다.

 

Continue 커맨드 & 기능

자동완성 (tabAutoComplete)

작성 중인 코드 뒤로 추천되는 코드를 볼 수 있다. `tab`으로 자동완성할 수 있다. Codewhisperer에서 방향키로 다른 추천 code를 볼 수 있었지만, 아쉽게도 여기에서는 지원하지 않는다. 

 

주석문으로 생성할 코드에 대해 설명한 뒤, 아랫 줄에 내용을 작성하면 마찬가지로 코드 추천이 되며 `tab`키 입력으로 완성시킬 수 있다.

 

autocomplete는 기본적으로 트리거 키가 설정되어있지 않다. Keyboard Shortcuts에 `editor.action.inlineSuggest.trigger`에 키를 지정해주어서 키 입력으로 autocomplete를 트리거시킬 수 있다.

 

 

Code Generation

`Ctrl+I`로 prompt를 입력하여 코드를 생성하도록 한다. 생성된 코드는 Accept하거나 Reject할 수 있다.

 

chat에 코드 참조

참조할 구문을 선택 후, `Ctrl+L`로 chatting 패널에 선택한 구문을 불러올 수 있다.

해당 구문을 바로 chatting에 참조할 수 있는 기능이다.

 

 

 

Context(Files, Code, Codebase)를 통한 chatting

현재 프로젝트 구조를 파악하고, 이를 바탕으로 제안을 할 수 있다. chatting에서 `@`로 참조하거나 'Add Context'에서 첨부할 Context를 설정 후, 이에 대한 prompt를 입력해 결과를 얻을 수 있다.

 

 

Ollama와 플러그인 하나로 chat, autocomplete 기능을 사용할 수 있다는 점에서 인상깊었다. 특히 이전에 사용해본 Cursor IDE와 상당히 유사한 UI나 구조라서 편하게 이용할 수 있었다.

오픈소스 LLM이 다양하게 등장하고 있으니 각각 비교해보면서 사용해보면, 상용 유료 LLM API 등을 사용하지 않고도 충분히 만족할만한 작업을 처리할 수 있을 것으로 보인다.

 

모델을 구동할 환경(메모리, GPU 등)이 마땅치 않다면, 비교적 접근하기 쉬운 Codewhisperer를 쓰는 것을 추천한다.

 

내 귀에 Codewhisperer - Code Generator

최근에 AWS Skill builders 강의를 들었다. 아무래도 요새 AWS 측에서 밀고있는 주제가 App 현대화와 생성형 AI인 만큼 관련된 내용들이 강의로 나왔었는데, 그 중 흥미롭게 사용했었던 서비스중 하나를

blog.omoknooni.me