Visual Studio Code Copilot Chatでは、@workspaceを使ってプロジェクト全体を管理できます。企業向けのシナリオでは、Copilot Chatのエージェントをより柔軟にカスタマイズすることも可能です。
前回のラボでは、NPUとクラウドを組み合わせてPhi3エージェント用のVisual Studio Code拡張機能を完成させました。
拡張機能プロジェクトの作成方法については、こちらのリンクを参照してください
https://code.visualstudio.com/api/get-started/your-first-extension
注記: このプロジェクトでは、技術的な解決策としてTypescriptとWebPackを使用してください
Visual Studio Code Chat APIはまだコードAPIに統合されていませんが、拡張機能を通じて追加されています。
vscode.d.tsをダウンロードしてください
https://github.com/microsoft/vscode/blob/main/src/vscode-dts/vscode.d.ts
注記: 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() {}
おめでとうございます！すべてのラボを完了しました。これでPhi-3ファミリーとGitHub Copilot Chatの使い方が理解できたと思います。
@PHI3 /gen を試してみてください
@PHI3 /img を試してみてください
免責事項：
本書類はAI翻訳サービス「Co-op Translator」を使用して翻訳されました。正確性を期しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。原文の言語によるオリジナル文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。本翻訳の利用により生じた誤解や誤訳について、当方は一切の責任を負いかねます。