Visual Studio Code Copilot Chatでは、@workspaceを通じてプロジェクト全体を管理できます。エンタープライズ向けのシナリオでは、Copilot Chatのエージェントをより柔軟にカスタマイズすることも可能です。
前回のラボでは、MXフレームワークとクラウドを組み合わせて、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.markdown(code)
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.markdown(code)
return { metadata: { command: 'img' } };
}
else
{
var result = "Please ask question like this Your question (IMG_URL:https://example.com/image.jpg)";
stream.markdown(result);
}
return { metadata: { command: 'img' } };
}
return { metadata: { command: '' } };
}
const phi3 = vscode.chat.createChatParticipant("chat.PHI3", phi3handler);
phi3.iconPath = new vscode.ThemeIcon('sparkle');
phi3.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(phi3);
}
interface GenCode {
prompt: string;
}
interface ImgGenCodeResponse {
output: string;
}
interface GenCodeResponse {
result: string;
}
async function gen(prompt: string) {
const postData: GenCode = {
prompt: 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.result;
}
async function genImage(prompt: string, img_url: string) {
// const postData: GenCode = {
// question: prompt
// };
const response = await fetch('Your Phi-3 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」を使用して翻訳されました。正確性には努めておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。原文の言語によるオリジナル文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。本翻訳の利用により生じたいかなる誤解や誤訳についても、当方は責任を負いかねます。