diff --git a/mindinsight/ui/src/assets/images/graph-step1.png b/mindinsight/ui/src/assets/images/graph-step1.png deleted file mode 100644 index c06ac357d50e1cb01c08de15e4bc0d68a01d5993..0000000000000000000000000000000000000000 Binary files a/mindinsight/ui/src/assets/images/graph-step1.png and /dev/null differ diff --git a/mindinsight/ui/src/assets/images/graph-step1.svg b/mindinsight/ui/src/assets/images/graph-step1.svg new file mode 100644 index 0000000000000000000000000000000000000000..6c54d1c6d43c7e86e5d52254250b71708a35d10b --- /dev/null +++ b/mindinsight/ui/src/assets/images/graph-step1.svg @@ -0,0 +1,443 @@ + + + + step-1 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1.主要功能介绍 + + + 简单介绍整个页面布局，及大体功能块：选择文件功能， + 搜索节点功能，节点信息中点击输入。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 下一步 + + + + + + 功能区 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Gradients + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×1024×14×14 + + + + + Default + + + + + conv1-Conv2d + + + + + + bn1 + + + + + + 2tensors + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×128×28×28 + + + + + bn1-BatchNorm2d + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×1024×14×14 + + + + + calculate-CalculateClass + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×1024×14×14 + + + + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×1024×14×14 + + + + + function-myClass + + + + + add56 + + + + + Min[5]_1 + + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×128×28×28 + + + + + + + Parameter[10]_3 + + + + + + + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×128×28×28 + + + + + + + Parameter[10]_3 + + + + + + + + Parameter[10]_3 + + + + + + + Min[5]_1 + + + + + + + + + + add56 + + + + + + + + cst25 + + + + + + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×1024×14×14 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/mindinsight/ui/src/assets/images/graph-step2.png b/mindinsight/ui/src/assets/images/graph-step2.png deleted file mode 100644 index cc996d59c162c8a6dfeebd3acecc1342fc1f51a4..0000000000000000000000000000000000000000 Binary files a/mindinsight/ui/src/assets/images/graph-step2.png and /dev/null differ diff --git a/mindinsight/ui/src/assets/images/graph-step2.svg b/mindinsight/ui/src/assets/images/graph-step2.svg new file mode 100644 index 0000000000000000000000000000000000000000..5fda52584ff4fa5ac4f3e1afecf9677354edf31b --- /dev/null +++ b/mindinsight/ui/src/assets/images/graph-step2.svg @@ -0,0 +1,490 @@ + + + + step-2 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 用户指南 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1.主要功能介绍 + + + 简单介绍整个页面布局，及大体功能块：选择文件功能， + 搜索节点功能，节点信息中点击输入。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 下一步 + + + + + + 功能区 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Gradients + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×1024×14×14 + + + + + Default + + + + + conv1-Conv2d + + + + + + bn1 + + + + + + 2tensors + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×128×28×28 + + + + + bn1-BatchNorm2d + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×1024×14×14 + + + + + calculate-CalculateClass + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×1024×14×14 + + + + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×1024×14×14 + + + + + function-myClass + + + + + add56 + + + + + Min[5]_1 + + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×128×28×28 + + + + + + + Parameter[10]_3 + + + + + + + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×128×28×28 + + + + + + + Parameter[10]_3 + + + + + + + + Parameter[10]_3 + + + + + + + Min[5]_1 + + + + + + + + + + add56 + + + + + + + + cst25 + + + + + + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×1024×14×14 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 用来代替一些节点表示数据的输入和输出，而不直接与被代理的节点连线 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/mindinsight/ui/src/assets/images/graph-step3.png b/mindinsight/ui/src/assets/images/graph-step3.png deleted file mode 100644 index 8d10ddfc36e3bead922bf819eca6ce8858a6f137..0000000000000000000000000000000000000000 Binary files a/mindinsight/ui/src/assets/images/graph-step3.png and /dev/null differ diff --git a/mindinsight/ui/src/assets/images/graph-step3.svg b/mindinsight/ui/src/assets/images/graph-step3.svg new file mode 100644 index 0000000000000000000000000000000000000000..a2101e1b02f7568514f03f27717d2d1c2a6681e5 --- /dev/null +++ b/mindinsight/ui/src/assets/images/graph-step3.svg @@ -0,0 +1,407 @@ + + + + step-3 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1.主要功能介绍 + + + 简单介绍整个页面布局，及大体功能块：选择文件功能， + 搜索节点功能，节点信息中点击输入。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 下一步 + + + + + + 功能区 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Gradients + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×1024×14×14 + + + + + Default + + + + + conv1-Conv2d + + + + + + bn1 + + + + + + 2tensors + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×128×28×28 + + + + + bn1-BatchNorm2d + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×1024×14×14 + + + + + calculate-CalculateClass + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×1024×14×14 + + + + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×1024×14×14 + + + + + function-myClass + + + + + add56 + + + + + Min[5]_1 + + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×128×28×28 + + + + + + + Parameter[10]_3 + + + + + + + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×128×28×28 + + + + + + + Parameter[10]_3 + + + + + + + + Parameter[10]_3 + + + + + + + Min[5]_1 + + + + + + + + + + add56 + + + + + + + + cst25 + + + + + + + + + + + DT_TENSOR[DT_FLO + A + T16] 1×1024×14×14 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/mindinsight/ui/src/locales/zh-cn.json b/mindinsight/ui/src/locales/zh-cn.json index 5689d1ac265be94bf85282f7168f6508c88def74..a468a10245694803f580f5e9500965ae129e7897 100644 --- a/mindinsight/ui/src/locales/zh-cn.json +++ b/mindinsight/ui/src/locales/zh-cn.json @@ -150,10 +150,10 @@ "guideTitle2": "2/3 节点类型介绍", "guideTitle3": "3/3 边介绍", "guideContent11": "1. 在计算图展示区域可以查看计算图，可以通过滚轮对计算图放大和缩小，可以鼠标点击后拖拽。", - "guideContent12": "2. 支持全屏展示计算图，或者将当前页面保存成SVG文件。", + "guideContent12": "2. 支持全屏展示计算图，或者将当前页面保存成SVG图片文件。", "guideContent13": "3. 在右边的功能区中，可以切换查看不同文件的计算图，或者在计算图中进行节点搜索。", - "guideContent14": "4. 在节点信息的输入和输出中，可以选择并点击跳转到该节点。", - "guideContent2": "计算图主要由命名空间节点，算子节点，虚拟节点，聚合节点，常量节点等几种类型节点构成。其中 \"Default\" 表示正向传播，\"Gradients\" 表示反向传播。", + "guideContent14": "4. 在节点信息的输入和输出中，选择并点击一个节点后，可以跳转到选择的节点。", + "guideContent2": "计算图中有命名空间节点，算子节点，虚拟节点，聚合节点，常量节点等几种类型节点。其中 \"Default\" 表示正向传播，\"Gradients\" 表示反向传播。", "guideContent3": "计算图中存在数据边和控制边。其中数据边表示数据的输入，控制边表示节点之间执行依赖关系。", "next": "下一步", "finish": "完成" diff --git a/mindinsight/ui/src/views/train-manage/graph.vue b/mindinsight/ui/src/views/train-manage/graph.vue index 654b26ca8ce3cb8eddc8f09afd2feff7a55dbefc..c22e048c8745b43f3e60e468b17fce50e96d90c4 100644 --- a/mindinsight/ui/src/views/train-manage/graph.vue +++ b/mindinsight/ui/src/views/train-manage/graph.vue @@ -31,7 +31,10 @@ limitations under the License.
{{ item }}
- +
+ +
+ {{ guide.step === 3 ? $t('graph.finish') : $t('graph.next') @@ -39,17 +42,17 @@ limitations under the License.
-
-
-
@@ -1030,6 +1033,7 @@ export default { ? this.allGraphData[name].independent_layout : false; if (independentLayout && nodes && nodes.length > aggregationNodeLimit) { + const nodesLength = nodes.length; // The selected node must be included. let startIndex = 0; if (this.selectedNode.more) { @@ -1068,7 +1072,7 @@ export default { }; nodes.splice(0, 0, ellipsisNodeL); } - if (startIndex + aggregationNodeLimit < nodes.length) { + if (startIndex + aggregationNodeLimit < nodesLength) { const ellipsisNode = { name: `${name}/right/${ellipsisNum} more...`, attr: {}, @@ -2808,9 +2812,11 @@ export default { line-height: 56px; .guide { cursor: pointer; - margin-left: 16px; + margin-left: 10px; line-height: 20px; display: inline-block; + line-height: 18px; + font-size: 12px; .guide-icon { display: inline-block; width: 16px; @@ -2836,11 +2842,14 @@ export default { position: absolute; background-color: #c6c8cc; z-index: 9999; + .step-pic { + text-align: center; + margin-top: 8px; + } .step { height: 100%; background-repeat: round; img { - height: 100%; width: 100%; } } @@ -2867,6 +2876,7 @@ export default { font-size: 16px; color: #252b3a; line-height: 24px; + font-weight: bold; } .el-button { display: block;