Skip to content

Commit

Permalink
[iree-prof-tools] Skeleton code for model-explorer VS Code extension. (
Browse files Browse the repository at this point in the history
…#235)

1) It needs model-explorer running via http://localhost:8080.
2) Instructions are in README.md.
  • Loading branch information
protobird-git authored May 7, 2024
1 parent 1b7a972 commit 74d03fa
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 0 deletions.
4 changes: 4 additions & 0 deletions iree-prof-tools/model-explorer-extension/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# Files generated by "npm install -D typescript".
node_modules/
out/
package-lock.json
21 changes: 21 additions & 0 deletions iree-prof-tools/model-explorer-extension/.vscode/launch.json
Original file line number Diff line number Diff line change
@@ -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}"
}
]
}
20 changes: 20 additions & 0 deletions iree-prof-tools/model-explorer-extension/.vscode/tasks.json
Original file line number Diff line number Diff line change
@@ -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
}
}
]
}
36 changes: 36 additions & 0 deletions iree-prof-tools/model-explorer-extension/README.md
Original file line number Diff line number Diff line change
@@ -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 <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-experimental-root>/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).
30 changes: 30 additions & 0 deletions iree-prof-tools/model-explorer-extension/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
33 changes: 33 additions & 0 deletions iree-prof-tools/model-explorer-extension/src/extension.ts
Original file line number Diff line number Diff line change
@@ -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 `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Model Explorer</title>
</head>
<body>
<iframe src="http://localhost:8080"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;">
</iframe>
</body>
</html>`;
}
13 changes: 13 additions & 0 deletions iree-prof-tools/model-explorer-extension/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"compilerOptions": {
"module": "Node16",
"target": "ES2022",
"outDir": "out",
"lib": [
"ES2022"
],
"sourceMap": true,
"rootDir": "src",
"strict": true
}
}

0 comments on commit 74d03fa

Please sign in to comment.