Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
CodeMirror 확장 기능인 codemirror-copilot은 GPT를 활용하여 CodeMirror 에디터에서 코드 자동 완성 기능을 제공합니다. 현재 커서 위치의 접두사 및 접미사를 기반으로 API를 호출하고, 반환된 코드를 사용자가 사용할 수 있도록 힌트 UI와 Tab 자동 완성을 구현했습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 GitHub Codex tools의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기이 CodeMirror 확장 기능은 GPT를 사용하여 CodeMirror에서 코드를 자동 완성할 수 있게 해줍니다. 현재 코드(현재 커서 위치의 접두사 및 접미사)로 API를 호출하고, 사용자의 API가 자동 완성할 코드를 반환하도록 합니다.
Screenshot
npm install codemirror-copilot --save
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { inlineCopilot } from "codemirror-copilot";
...
또한 예측을 반환하는 API를 구현해야 합니다. 위의 코드의 경우, OpenAI의 gpt-3.5-turbo-1106 모델을 사용하는 Next.js 예시 API가 있습니다:
import OpenAI from "openai";
const openai = new OpenAI({
...
inlineCopilot(apiCallingFn: (prefix: string, suffix: string) => Promise<string>, delay: number = 1000)API가 반환하는 예측을 기반으로 힌트 UI와 Tab 자동 완성을 렌더링하는 CodeMirror 확장 기능을 제공합니다.
delay 매개변수는 사용자가 타이핑을 멈춘 후 apiCallingFn을 호출하기까지 기다리는 시간(밀리초)입니다. 기본값은 1000입니다.
이 확장 기능은 불필요한 API 호출을 방지하기 위해 예측의 로컬 캐싱도 구현합니다.
clearLocalCache()예측의 로컬 캐시를 지웁니다.
하나의 터미널에서 다음 명령어를 실행하여 라이브러리 자체를 빌드합니다:
cd packages/codemirror-copilot
npm install
npm run dev
다른 터미널에서 데모 웹사이트를 실행합니다:
cd website
npm install
npm run dev
이 코드는 Shan Aminzadeh가 만든 codemirror-extension-inline-suggestion을 기반으로 합니다.
MIT © Asad Memon