Visual Studio Code Copilot Chat에서는 @workspace를 통해 전체 프로젝트를 관리할 수 있습니다. 기업 환경에서는 Copilot Chat의 에이전트를 보다 유연하게 커스터마이징할 수도 있습니다.
지난 Lab에서는 NPU와 클라우드를 결합하여 Phi3 에이전트를 위한 Visual Studio Code 확장을 완성했습니다.
다음 링크를 참고하여 확장 프로젝트를 생성하세요: https://code.visualstudio.com/api/get-started/your-first-extension
NOTE: 이 프로젝트의 기술 솔루션으로 Typescript와 WebPack을 사용하세요.
Visual Studio Code Chat API는 아직 코드 API에 통합되지 않았지만 확장을 통해 추가할 수 있습니다.
vscode.d.ts를 다운로드하세요: https://github.com/microsoft/vscode/blob/main/src/vscode-dts/vscode.d.ts
NOTE: Visual Studio Code Insiders 1.90+에서 실행하세요.
{
"name": "phi3ext",
"displayName": "phi3ext",
"description": "",
"version": "0.0.1",
"engines": {
"vscode": "^1.90.0"
},
"categories": [
"AI",
"Chat"
],
"activationEvents": [],
"enabledApiProposals": [
"chatVariableResolver"
],
"main": "./dist/extension.js",
"contributes": {
"chatParticipants": [
{
"id": "chat.PHI3",
"name": "PHI3",
"description": "Hey! I am PHI3",
"isSticky": true,
"commands": [
{
"name": "gen",
"description": "I am PHI3, you can gen code with me"
},
{
"name": "img",
"description": "I am PHI3-vision, you can gen code from img with me"
}
]
}
],
"commands": [
{
"command": "PHI3.namesInEditor",
"title": "Use PHI3 in Editor"
}
]
},
"scripts": {
"vscode:prepublish": "npm run package",
"compile": "webpack",
"watch": "webpack --watch",
"package": "webpack --mode production --devtool hidden-source-map",
"compile-tests": "tsc -p . --outDir out",
"watch-tests": "tsc -p . -w --outDir out",
"pretest": "npm run compile-tests && npm run compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "vscode-test"
},
"devDependencies": {
"@types/vscode": "^1.90.0",
"@types/mocha": "^10.0.6",
"@types/node": "18.x",
"@typescript-eslint/eslint-plugin": "^7.11.0",
"@typescript-eslint/parser": "^7.11.0",
"eslint": "^8.57.0",
"typescript": "^5.4.5",
"ts-loader": "^9.5.1",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4",
"@vscode/test-cli": "^0.0.9",
"@vscode/test-electron": "^2.4.0"
},
"dependencies": {
"@types/node-fetch": "^2.6.11",
"node-fetch": "^3.3.2"
}
}
터미널에서 npm install을 실행하고 확장을 디버그하여 테스트할 수 있습니다.
샘플 코드 다운로드 여기를 클릭하세요
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';
interface IPHI3ChatResult extends vscode.ChatResult {
metadata: {
command: string;
}
}
// This method is called when your extension is activated
// Your extension is activated the very first time the command is executed
export function activate(extcontext: vscode.ExtensionContext) {
// Define a SHEIN chat handler.
const phi3handler: vscode.ChatRequestHandler = async (request: vscode.ChatRequest, context: vscode.ChatContext, stream: vscode.ChatResponseStream, token: vscode.CancellationToken): Promise<IPHI3ChatResult> => {
if (request.command == 'gen') {
const content = "Welcome to Phi-3 to gen code";
const result = await gen(request.prompt);
const code = result;
stream.progress("```txt"+"\n"+code+ +"\n"+"```")
return { metadata: { command: 'gen' } };
}
if (request.command == 'img') {
const content = "Welcome to Phi-3 vision to gen code in image";
const prompt = request.prompt;
if(prompt.indexOf("(IMG_URL:")>-1){
const img_url = prompt.split("(IMG_URL:")[1].split(")")[0];
const question = prompt.split("(IMG_URL:")[0];
const tmp = question;
const result = await genImage(question,img_url);
const code = result;
stream.progress(code)
return { metadata: { command: 'img' } };
}
else
{
var result = "```txt"+"\n\n"+"질문은 다음과 같은 형식으로 작성하세요: Your question (IMG_URL:https://example.com/image.jpg)"+"\n\n"++"```";
stream.progress(result);
}
return { metadata: { command: 'img' } };
}
return { metadata: { command: '' } };
}
const xp = vscode.chat.createChatParticipant("chat.PHI3", phi3handler);
xp.iconPath = new vscode.ThemeIcon('sparkle');
xp.followupProvider = {
provideFollowups(result: IPHI3ChatResult, context: vscode.ChatContext, token: vscode.CancellationToken) {
return [{
prompt: 'let us code with Phi-3 Family',
label: vscode.l10n.t('Dev with Phi-3 Family'),
command: 'help'
} satisfies vscode.ChatFollowup];
}
};
extcontext.subscriptions.push(xp);
}
interface GenCode {
question: string;
}
interface ImgGenCodeResponse {
output: string;
}
interface GenCodeResponse {
answer: string;
}
async function gen(prompt: string) {
const postData: GenCode = {
question: prompt
};
const response = await fetch('http://localhost:8080/score', {
method: 'POST',
body: JSON.stringify(postData),
headers: { 'Content-Type': 'application/json' }
});
const post = await response.json();
const resultResponse = post as GenCodeResponse;
return resultResponse.answer;
}
async function genImage(prompt: string, img_url: string) {
const response = await fetch('Your Phi-3-Vision Endpoint', {
method: 'POST',
body: JSON.stringify({
"input_data":{
"input_string":[
{
"role":"user",
"content":[
{
"type": "text",
"text": prompt
},
{
"type": "image_url",
"image_url": {
"url": img_url
}
}
]
}
],
"parameters":{
"temperature": 0.6,
"top_p": 0.9,
"do_sample": false,
"max_new_tokens": 2048
}
}
}),
headers: { 'Content-Type': 'application/json', 'Authorization' : 'Bearer Your Phi-3-Vision Endpoint Key', 'azureml-model-deployment': 'Your Phi-3-Vision Deployment name' }
});
const post = await response.json();
const resultResponse = post as ImgGenCodeResponse;
return resultResponse.output;
}
// This method is called when your extension is deactivated
export function deactivate() {}
축하합니다! 모든 Lab을 완료했습니다. Phi-3 Family와 GitHub Copilot Chat을 사용하는 방법을 이해하는 데 도움이 되었기를 바랍니다.
@PHI3 /gen을 시도해 보세요.
@PHI3 /img을 시도해 보세요.
면책 조항:
이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다. 정확성을 위해 노력하고 있지만, 자동 번역에는 오류나 부정확성이 포함될 수 있음을 유의하시기 바랍니다. 원문이 작성된 언어의 원본 문서를 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.