diff --git a/docs/node_prop_buttos.png b/docs/node_prop_buttos.png new file mode 100644 index 0000000..c0bf091 Binary files /dev/null and b/docs/node_prop_buttos.png differ diff --git a/docs/onnx_modifier_delete.png b/docs/onnx_modifier_delete.png index f5dc8df..d2ce635 100644 Binary files a/docs/onnx_modifier_delete.png and b/docs/onnx_modifier_delete.png differ diff --git a/docs/rename_node_io.png b/docs/rename_node_io.png new file mode 100644 index 0000000..a5f6d1b Binary files /dev/null and b/docs/rename_node_io.png differ diff --git a/docs/top_left_buttons.png b/docs/top_left_buttons.png new file mode 100644 index 0000000..7a0bcc7 Binary files /dev/null and b/docs/top_left_buttons.png differ diff --git a/onnx_modifier.py b/onnx_modifier.py index 413cc21..6c2f0c8 100644 --- a/onnx_modifier.py +++ b/onnx_modifier.py @@ -1,4 +1,5 @@ # https://leimao.github.io/blog/ONNX-Python-API/ +# https://leimao.github.io/blog/ONNX-IO-Stream/ # https://github.com/saurabh-shandilya/onnx-utils # https://stackoverflow.com/questions/52402448/how-to-read-individual-layers-weight-bias-values-from-onnx-model diff --git a/readme.md b/readme.md index 24a6697..45e43d9 100644 --- a/readme.md +++ b/readme.md @@ -1,24 +1,27 @@ - + # Introduction -To edit an ONNX model, One common way is to visualize the model graph, and edit it using ONNX Python API. This works fine. However, we have to code to edit, then visualize to check. The two processes may iterate for many times, which is time-consuming. +To edit an ONNX model, One common way is to visualize the model graph, and edit it using ONNX Python API. This works fine. However, we have to code to edit, then visualize to check. The two processes may iterate for many times, which is time-consuming. :wave: -What if we have a tool, which allow us **edit and preview the editing effect in a totally visualization fashion**? Then `onnx-modifier` comes. With it, we can focus on editing the model graph in the visualization pannel. Finally, all editing information will be summarized and processed by Python ONNX automatically. Most importantly, our time will be saved! +What if we have a tool, which allow us **edit and preview the editing effect in a totally visualization fashion**? -`onnx-modifier` is built based on the popular network viewer [netron](https://github.com/lutzroeder/netron) and the lightweight web application framework [flask](https://github.com/pallets/flask). +Then `onnx-modifier` comes. With it, we can focus on editing the model graph in the visualization pannel. All the editing information will be summarized and processed by Python ONNX automatically at last. Then our time can be saved! :rocket: + +`onnx-modifier` is built based on the popular network viewer [Netron](https://github.com/lutzroeder/netron) and the lightweight web application framework [flask](https://github.com/pallets/flask). Currently, the following editing operations are supported: - Delete a single node. - Delete a node and all the nodes rooted with it. -- Recover/Reset a node. +- Recover a deleted node. +- Rename the input/output name. Hope it helps! -# Get started +# Get started -Install the require Python packages by +Install the require Python packages by ```bash pip install onnx @@ -37,7 +40,12 @@ Click `Open Model...` to upload the onnx model to edit. The model will be parsed # Edit - + + + + + +
top left buttons (Graph-level-operations)
sidebar buttons (Node-level-operations)
Graph-level-operation elements are placed on the left-top of the page. Currently, there are three buttons: `Preview`，`Reset` and `Download`. They can do: @@ -45,7 +53,7 @@ Graph-level-operation elements are placed on the left-top of the page. Currently - `Reset`：Reset the model graph to its initial state； - `Download`：save the modified model file. -Node-level-operation elements are all in the side bar, which can be invoked by clicking a specific node. Let's take a look. +Node-level-operation elements are all in the sidebar, which can be invoked by clicking a specific node. Let's take a closer look. ## Delete node @@ -55,19 +63,34 @@ There are two modes (buttons) for deleting node: `Delete With Children` and `Del The deleted nodes are in grey mode. The following figure shows a typical deleting process. - + -## Reset node +## Recover node - By `Reset Node` button, we can set the clicked node to it initial state. It can be helpful when we want to recover the node after deleting it, or we want to reset its attributes. + By `Recover Node` button, we can recover the node back to graph after deleting it. ## Change the input/output name of node -By changing the input/output name of nodes, we can change the model forward routine. It can also be helpful if we want to rename the model output(s). +By changing the input/output name of nodes, we can change the model forward routine. It can also be helpful if we want to rename the model output(s). + +How can we do this using `onnx-modifier`? Note that there is a `RENAME HELPER` section in the node sidebar. All the original input and output name of a node is listed here, each following with a input field. we can input the new name here. After clicking the `Preview` button, the graph will be rendered with the new name (and a new model forward routine). + +For example, Now we want remove the preprocess operators (`Sub->Mul->Sub->Transpose`) shown in the following figure. We can + +1. click on the first `Conv` node, rename the original input name as *serving_default_input:0*. +2. delete the node between input node and the first `Conv` +3. click `Preview` to preview, then click `Download`, we can get the modified ONNX model. + +rename_node_io -`onnx-modifier` is under active development. Welcome to use, create issues and pull requests. +`onnx-modifier` is under active development :hammer_and_wrench:. Welcome to use, create issues and pull requests! 🥰 # Credits and referred materials +- ONNX Python API [Official](https://github.com/onnx/onnx/blob/main/docs/PythonAPIOverview.md) [Leimao's Blog](https://leimao.github.io/blog/ONNX-Python-API/) +- ONNX IO Stream [Leimao's Blog](https://leimao.github.io/blog/ONNX-IO-Stream/) +- [Netron](https://github.com/lutzroeder/netron) +- [onnx-utils](https://github.com/saurabh-shandilya/onnx-utils) +- [flask](https://github.com/pallets/flask) diff --git a/static/view-sidebar.js b/static/view-sidebar.js index 8ec27aa..2605a21 100644 --- a/static/view-sidebar.js +++ b/static/view-sidebar.js @@ -210,7 +210,7 @@ sidebar.NodeSidebar = class { this.add_span() this._addButton('Delete Single Node'); this.add_span() - this._addButton('Reset Node'); + this._addButton('Recover Node'); this.add_separator(this._elements, 'sidebar-view-separator'); this._addHeader('Rename helper'); @@ -335,7 +335,7 @@ sidebar.NodeSidebar = class { this._host._view._graph.delete_node_with_children(this._modelNodeName) }); } - if (title === 'Reset Node') { + if (title === 'Recover Node') { // console.log('pressed') buttonElement.addEventListener('click', () => { this._host._view._graph.reset_node(this._modelNodeName) diff --git a/static/view.js b/static/view.js index 7550583..b9986ab 100644 --- a/static/view.js +++ b/static/view.js @@ -1080,6 +1080,7 @@ view.Graph = class extends grapher.Graph { reset_node(node_name) { this._modelNodeName2State.set(node_name, 'Existed'); this._modelNodeName2ViewNode.get(node_name).element.style.opacity = 1; + }