update readme

onnx_modifier.py

@@ -139,8 +139,8 @@ class onnxModifier:
     
     def modify(self, modify_info):
         # print(modify_info['node_states'])
-        # print(modify_info['node_renamed_io'])
-        print(modify_info['node_changed_attr'])
+        print(modify_info['node_renamed_io'])
+        # print(modify_info['node_changed_attr'])
         # print(modify_info['added_node_info'])
         self.remove_node_by_node_states(modify_info['node_states'])
         self.modify_node_io_name(modify_info['node_renamed_io'])

readme.md

@@ -48,18 +48,10 @@ Click the url in the output info generated by flask (`http://127.0.0.1:5000/` fo
 Click `Open Model...` to upload the ONNX model to edit. The model will be parsed and shown on the page.
 
 # Usage
-
-<table>
-    <tr>
-        <td ><center><img src="./docs/top_left_buttons.png"> <b>top left buttons (Graph-level-operations)</b></center></td>
-        <td ><center><img src="./docs/node_prop_buttos.png" ><b>sidebar buttons (Node-level-operations)</b></center></td>
-    </tr>
-</table>
-
 Graph-level-operation elements are placed on the left-top of the page. Currently, there are four buttons: `Preview`, `Reset`, `Download` and `Add node`. They can do:
-
 - `Refresh`: Refresh the model graph to preview editing effects.
-  > In this version, the model graph is refreshed automatically as soon as an editting operation is invoked. So this button can be used much fewer than ealier versions.
+  
+  > In this version, the model graph is refreshed automatically as soon as an editing operation is invoked. So this button can be used much fewer than earlier versions.
 - `Reset`: Reset the whole model graph to its initial state;
 - `Download`: Save the modified model into disk.
 - `Add node`: Add a new node into the model.
@@ -69,17 +61,15 @@ Node-level-operation elements are all in the sidebar, which can be invoked by cl
 Let's take a closer look.
 
 ## Delete/recover nodes
-
 There are two modes for deleting node: `Delete With Children` and `Delete Single Node`. `Delete Single Node` only deletes the clicked node, while `Delete With Children` also deletes all the node rooted on the clicked node, which is convenient and natural if we want to delete a long path of nodes.
 
 > The implementation of `Delete With Children` is based on the backtracking algorithm.
 
 For previewing, The deleted nodes are in grey mode at first. If a node is deleted by mistake, `Recover Node` button can help us recover it back to graph. Click `Enter` button to take the deleting operation into effect, then the updated graph will show on the page automatically.
 
-The following figure shows a typical deleting process.
-
-<img src="./docs/onnx_modifier_delete.png" style="zoom: 50%;" />
+The following figure shows a typical deleting process:
 
+<img src="./docs/delete_node.gif" style="zoom:75%;" />
 
 ## Rename the name of node inputs/outputs
 
@@ -95,13 +85,15 @@ For example,  Now we want remove the preprocess operators (`Sub->Mul->Sub->Trans
 
 > Note: To link node $A$ (`data_0` in the above example) to node $B$ (the 1st `Conv` in the above example), **it is suggested to edit the input of node $B$ to the output of node `A`, rather than edit the output of node $A$ to the input of node `B`.** Because the input of $B$ can also be other node's output and unexpected result will happen.
 
-<img src="./docs/rename_node_io.png" alt="rename_node_io" style="zoom:60%;" />
+The process is shown in the following figure:
+
+<img src="./docs/rename_io.gif" style="zoom:75%;" />
 
 ## Edit the attribute of nodes
 
 Change the original attribute to a new value, then we are done.
 
-
+<img src="./docs/change_attr.gif" style="zoom:75%;" />
 
 ## Add new node
 Sometimes we want to add new nodes into the exsited model. `onnx-modifier` supports this feature experimentally now. 
@@ -112,9 +104,11 @@ Note there is an `Add node` button, following with a selector elements on the to
 2. Click the new node and edit it in the invoked siderbar. What we need to fill are the node Attributes (`undefined` by default) and its Inputs/Outputs (which decide where the node will be inserted in the graph).
 3. We are done.
 
+<img src="./docs/add_new_node.gif" style="zoom:75%;" />
+
 The following are some notes for this feature:
 
-1. :warning: Currently, adding nodes with initializer (such as weight parameters) are not supported (such as `Conv`, `BatchNormalization`). Adding nodes without initializer are tested and work as expected in my tested case (such as `Flatten`, `ArgMax`, `Concat`).
+1. :warning: Currently, adding nodes with initializer (such as weight parameters) is not supported (such as `Conv`, `BatchNormalization`). Adding nodes without initializer are tested and work as expected in my tested case (such as `Flatten`, `ArgMax`, `Concat`).
 
 2. Click the selector and type the first letter for the new node type (`f` for `Flatten` node for example), we can be quickly navigated to the node type.