From 74d03fa9bafa17c605f501e672263caa303ee081 Mon Sep 17 00:00:00 2001 From: Byungchul Kim Date: Tue, 7 May 2024 16:36:18 -0700 Subject: [PATCH] [iree-prof-tools] Skeleton code for model-explorer VS Code extension. (#235) 1) It needs model-explorer running via http://localhost:8080. 2) Instructions are in README.md. --- .../model-explorer-extension/.gitignore | 4 +++ .../.vscode/launch.json | 21 +++++++++++ .../.vscode/tasks.json | 20 +++++++++++ .../model-explorer-extension/README.md | 36 +++++++++++++++++++ .../model-explorer-extension/package.json | 30 ++++++++++++++++ .../model-explorer-extension/src/extension.ts | 33 +++++++++++++++++ .../model-explorer-extension/tsconfig.json | 13 +++++++ 7 files changed, 157 insertions(+) create mode 100644 iree-prof-tools/model-explorer-extension/.gitignore create mode 100644 iree-prof-tools/model-explorer-extension/.vscode/launch.json create mode 100644 iree-prof-tools/model-explorer-extension/.vscode/tasks.json create mode 100644 iree-prof-tools/model-explorer-extension/README.md create mode 100644 iree-prof-tools/model-explorer-extension/package.json create mode 100644 iree-prof-tools/model-explorer-extension/src/extension.ts create mode 100644 iree-prof-tools/model-explorer-extension/tsconfig.json diff --git a/iree-prof-tools/model-explorer-extension/.gitignore b/iree-prof-tools/model-explorer-extension/.gitignore new file mode 100644 index 0000000..d6476bf --- /dev/null +++ b/iree-prof-tools/model-explorer-extension/.gitignore @@ -0,0 +1,4 @@ +# Files generated by "npm install -D typescript". +node_modules/ +out/ +package-lock.json diff --git a/iree-prof-tools/model-explorer-extension/.vscode/launch.json b/iree-prof-tools/model-explorer-extension/.vscode/launch.json new file mode 100644 index 0000000..8880465 --- /dev/null +++ b/iree-prof-tools/model-explorer-extension/.vscode/launch.json @@ -0,0 +1,21 @@ +// A launch configuration that compiles the extension and then opens it inside a new window +// Use IntelliSense to learn about possible attributes. +// Hover to view descriptions of existing attributes. +// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Run Extension", + "type": "extensionHost", + "request": "launch", + "args": [ + "--extensionDevelopmentPath=${workspaceFolder}" + ], + "outFiles": [ + "${workspaceFolder}/out/**/*.js" + ], + "preLaunchTask": "${defaultBuildTask}" + } + ] +} diff --git a/iree-prof-tools/model-explorer-extension/.vscode/tasks.json b/iree-prof-tools/model-explorer-extension/.vscode/tasks.json new file mode 100644 index 0000000..3b17e53 --- /dev/null +++ b/iree-prof-tools/model-explorer-extension/.vscode/tasks.json @@ -0,0 +1,20 @@ +// See https://go.microsoft.com/fwlink/?LinkId=733558 +// for the documentation about the tasks.json format +{ + "version": "2.0.0", + "tasks": [ + { + "type": "npm", + "script": "watch", + "problemMatcher": "$tsc-watch", + "isBackground": true, + "presentation": { + "reveal": "never" + }, + "group": { + "kind": "build", + "isDefault": true + } + } + ] +} diff --git a/iree-prof-tools/model-explorer-extension/README.md b/iree-prof-tools/model-explorer-extension/README.md new file mode 100644 index 0000000..0380fd3 --- /dev/null +++ b/iree-prof-tools/model-explorer-extension/README.md @@ -0,0 +1,36 @@ +# Model Explorer in VS Code + +Model explorer is a web tool to visualize ML models. This extension is to embed +model explorer within VS Code. + +## How to run it + +Model explorer is running as a web server. Once it's installed on a local computer, +it can be running as a web server and accessed via http://localhost:8080. + +``` +pip install model-explorer +model-explorer --no_open_in_browser +``` + +Port number can be changed with `--port ` option. + +Model explorer VS Code extension connects to the web server. + +## How to make changes into it + +To make changes of this extension, VS Code, Node.js and typescript compiler are necessary. +Please follow installation guides of +[VS Code](https://code.visualstudio.com/docs/setup/setup-overview) and +[Node.js](https://nodejs.org/en/download). + +Then, install typescript compiler under the extension directory. + +``` +cd /iree-prof-tools/model-explorer-extension +npm install -D typescript +code . +``` + +Once the workspace is open, follow the +[steps to build webview extensions](https://code.visualstudio.com/api/extension-guides/webview). diff --git a/iree-prof-tools/model-explorer-extension/package.json b/iree-prof-tools/model-explorer-extension/package.json new file mode 100644 index 0000000..aa37b48 --- /dev/null +++ b/iree-prof-tools/model-explorer-extension/package.json @@ -0,0 +1,30 @@ +{ + "name": "model-explorer", + "displayName": "Model Explorer", + "description": "Machine learning model explorer for VS Code", + "version": "0.1.0", + "publisher": "iree.org", + "repository": "https://github.com/iree-org/iree-experimental/iree-prof-tools/model-explorer-extension", + "main": "./out/extension.js", + "engines": { + "vscode": "^1.87.0" + }, + "activationEvents": [], + "contributes": { + "commands": [ + { + "command": "model-explorer.show", + "title": "Model Explorer" + } + ] + }, + "scripts": { + "vscode:prepublish": "npm run compile", + "compile": "tsc -p ./", + "watch": "tsc -watch -p ./" + }, + "devDependencies": { + "@types/vscode": "^1.87.0", + "typescript": "^5.4.5" + } +} diff --git a/iree-prof-tools/model-explorer-extension/src/extension.ts b/iree-prof-tools/model-explorer-extension/src/extension.ts new file mode 100644 index 0000000..838504c --- /dev/null +++ b/iree-prof-tools/model-explorer-extension/src/extension.ts @@ -0,0 +1,33 @@ +import * as vscode from 'vscode'; + +export function activate(context: vscode.ExtensionContext) { + context.subscriptions.push( + vscode.commands.registerCommand('model-explorer.show', () => { + const panel = vscode.window.createWebviewPanel( + 'modelExplorer', + 'Model Explorer', + vscode.ViewColumn.One, // Editor column to show the new webview panel in. + { // Webview options. + enableScripts: true + } + ); + + panel.webview.html = getWebviewContent(); + }) + ); + } + + function getWebviewContent() { + return ` + + + + Model Explorer + + + + + `; +} \ No newline at end of file diff --git a/iree-prof-tools/model-explorer-extension/tsconfig.json b/iree-prof-tools/model-explorer-extension/tsconfig.json new file mode 100644 index 0000000..aa86814 --- /dev/null +++ b/iree-prof-tools/model-explorer-extension/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "module": "Node16", + "target": "ES2022", + "outDir": "out", + "lib": [ + "ES2022" + ], + "sourceMap": true, + "rootDir": "src", + "strict": true + } +} \ No newline at end of file