# **实验3 - 在 GitHub Copilot Chat 中创建一个 @PHI3 代理** 在 Visual Studio Code Copilot Chat 中，你可以通过 @workspace 管理整个项目。对于企业场景，我们还可以更灵活地自定义 Copilot Chat 的 Agent。 在上一个实验中，我们结合了 MX 框架和云端，完成了一个用于 Phi3 Agent 的 Visual Studio Code 扩展。 ![agent](../../../../../../../../../translated_images/zh-CN/vscode_agent.746efdf2e81957c2.webp) ### **1. 创建一个 VSCode 开发扩展** 请参考此链接 [https://code.visualstudio.com/api/get-started/your-first-extension](https://code.visualstudio.com/api/get-started/your-first-extension) 来创建一个扩展项目 ***NOTE:*** 请使用 Typescript 和 WebPack 作为该项目的技术方案 ### **2. 添加 vscode.d.ts** Visual Studio Code Chat API 还未合并到代码 API 中，目前是通过扩展方式添加的。 下载 vscode.d.ts [https://github.com/microsoft/vscode/blob/main/src/vscode-dts/vscode.d.ts](https://github.com/microsoft/vscode/blob/main/src/vscode-dts/vscode.d.ts) ***NOTE:*** 请在 Visual Studio Code Insiders 1.90+ 版本中运行 ### **3. 更新 package.json** ```json { "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** 并调试你的扩展进行测试。 ***下载示例代码*** [点击这里](../../../../../../../../../code/07.Lab/01/Apple) ### **4. 修改 src/extension.ts** ```ts // 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 => { 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*** ![code](../../../../../../../../../translated_images/zh-CN/result_code.ae0d053b45202798.webp) 你可以尝试 ***@PHI3 /img*** ![img](../../../../../../../../../translated_images/zh-CN/result_img.436817a2bb3a34cf.webp) **免责声明**： 本文件使用 AI 翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。虽然我们力求准确，但请注意，自动翻译可能包含错误或不准确之处。原始文件的母语版本应被视为权威来源。对于重要信息，建议使用专业人工翻译。对于因使用本翻译而产生的任何误解或误释，我们概不负责。