change readme

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
 

readme.md

@@ -1,24 +1,27 @@
-<img src="./docs/onnx_modifier_logo_1.png" style="zoom: 67%;" />
+<img src="./docs/onnx_modifier_logo_1.png" style="zoom: 60%;" />
 
 # 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
 
-<img src="./docs/buttons.png" style="zoom: 60%;" />
+<table>
+    <tr>
+        <td ><center><img src="./docs/top_left_buttons.png"> top left buttons (Graph-level-operations)</center></td>
+        <td ><center><img src="./docs/node_prop_buttos.png" >sidebar buttons (Node-level-operations)</center></td>
+    </tr>
+<table>
 
 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.
 
-<img src="./docs/onnx_modifier_delete.png" style="zoom: 60%;" />
+<img src="./docs/onnx_modifier_delete.png" style="zoom: 50%;" />
 
-## 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.
+
+<img src="./docs/rename_node_io.png" alt="rename_node_io" style="zoom:60%;" />
 
-`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)

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)

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;
+        
     }