!515 UI support display in English

Merge pull request !515 from 黄伟锋/myMaster

mindinsight/ui/src/components/header.vue

@@ -28,11 +28,26 @@ limitations under the License.
                  :default-active="getActive()"
                  class="el-menu-demo"
                  mode="horizontal">
-          <el-menu-item index="/summary-manage">{{$t("summaryManage.summaryList")}}</el-menu-item>
-          <el-menu-item index="/model-traceback">{{$t("summaryManage.modelTraceback")}}</el-menu-item>
-          <el-menu-item index="/data-traceback">{{$t("summaryManage.dataTraceback")}}</el-menu-item>
-          <el-menu-item index="/compare-plate">{{$t("summaryManage.comparePlate")}}</el-menu-item>
-          <el-menu-item index="/hardware-visual">{{$t("summaryManage.hardwareVisual")}}</el-menu-item>
+          <el-menu-item index="/summary-manage"
+                        :title='$t("summaryManage.summaryList")'>
+            {{$t("summaryManage.summaryList")}}
+          </el-menu-item>
+          <el-menu-item index="/model-traceback"
+                        :title='$t("summaryManage.modelTraceback")'>
+            {{$t("summaryManage.modelTraceback")}}
+          </el-menu-item>
+          <el-menu-item index="/data-traceback"
+                        :title='$t("summaryManage.dataTraceback")'>
+            {{$t("summaryManage.dataTraceback")}}
+          </el-menu-item>
+          <el-menu-item index="/compare-plate"
+                        :title='$t("summaryManage.comparePlate")'>
+            {{$t("summaryManage.comparePlate")}}
+          </el-menu-item>
+          <el-menu-item index="/hardware-visual"
+                        :title='$t("summaryManage.hardwareVisual")'>
+            {{$t("summaryManage.hardwareVisual")}}
+          </el-menu-item>
         </el-menu>
       </div>
     </div>
@@ -46,7 +61,7 @@ limitations under the License.
          || !this.$route.path.indexOf('/compare-plate')
          || !this.$route.path.indexOf('/hardware-visual')">
       <div class="reload-training"
-          v-if="this.$route.path.indexOf('/scalar') > 0
+           v-if="this.$route.path.indexOf('/scalar') > 0
           || this.$route.path.indexOf('/image') > 0
           || this.$route.path.indexOf('/histogram') > 0
           || this.$route.path.indexOf('/tensor') > 0
@@ -54,13 +69,13 @@ limitations under the License.
           || !this.$route.path.indexOf('/compare-plate')">
         <!-- automatic refresh switch -->
         <el-switch v-model="isTimeReload"
-                  :active-text="$t('header.timeReload')+$t('symbols.leftbracket')+
+                   :active-text="$t('header.timeReload')+$t('symbols.leftbracket')+
                   timeReloadValue+$t('header.timeSecond')+$t('symbols.rightbracket')"
-                  @change="timeReload"></el-switch>
+                   @change="timeReload"></el-switch>
         <i class="el-icon-edit"
-          :title="$t('header.timeReloadScope')"
-          v-if="isTimeReload && !isShowInp"
-          @click="editTime"></i>
+           :title="$t('header.timeReloadScope')"
+           v-if="isTimeReload && !isShowInp"
+           @click="editTime"></i>
 
         <el-input v-if="isTimeReload && isShowInp"
                   v-model="newReloadValue"
@@ -68,23 +83,23 @@ limitations under the License.
                   @input="timeValueChange"></el-input>
 
         <i class="el-icon-check"
-          v-if="isTimeReload && isShowInp"
-          @click="saveTimeValue"></i>
+           v-if="isTimeReload && isShowInp"
+           @click="saveTimeValue"></i>
         <i class="el-icon-close"
-          v-if="isTimeReload && isShowInp"
-          @click="cancelTimeValue"></i>
+           v-if="isTimeReload && isShowInp"
+           @click="cancelTimeValue"></i>
       </div>
       <div class="reload-hardware"
-        v-if="!this.$route.path.indexOf('/hardware-visual')">
+           v-if="!this.$route.path.indexOf('/hardware-visual')">
         <!-- automatic refresh switch -->
         <el-switch v-model="isHardwareTimeReload"
-                  :active-text="$t('header.timeReload')+$t('symbols.leftbracket')+
+                   :active-text="$t('header.timeReload')+$t('symbols.leftbracket')+
                   hardwareTimeReloadValue+$t('header.timeSecond')+$t('symbols.rightbracket')"
-                  @change="hardwareTimeReload"></el-switch>
+                   @change="hardwareTimeReload"></el-switch>
         <i class="el-icon-edit"
-          :title="$t('header.timeReloadScope')"
-          v-if="isHardwareTimeReload && !isShowHardwareInp"
-          @click="editHardwareTime"></i>
+           :title="$t('header.timeReloadScope')"
+           v-if="isHardwareTimeReload && !isShowHardwareInp"
+           @click="editHardwareTime"></i>
 
         <el-input v-if="isHardwareTimeReload && isShowHardwareInp"
                   v-model="newHardwareReloadValue"
@@ -92,14 +107,13 @@ limitations under the License.
                   @input="hardwareTimeValueChange"></el-input>
 
         <i class="el-icon-check"
-          v-if="isHardwareTimeReload && isShowHardwareInp"
-          @click="saveHardwareTimeValue"></i>
+           v-if="isHardwareTimeReload && isShowHardwareInp"
+           @click="saveHardwareTimeValue"></i>
         <i class="el-icon-close"
-          v-if="isHardwareTimeReload && isShowHardwareInp"
-          @click="cancelHardwareTimeValue"></i>
+           v-if="isHardwareTimeReload && isShowHardwareInp"
+           @click="cancelHardwareTimeValue"></i>
       </div>
 
-
       <!-- manual refresh switch -->
       <img src="../assets/images/reload.png"
            alt=""
@@ -113,7 +127,21 @@ limitations under the License.
            width="24"
            class="cl-header-img cl-reload"
            v-if="isReload"
-           :title="$t('header.RefreshingData')" />
+           :title="$t('header.refreshingData')" />
+    </div>
+    <div class="md-header-language"
+         v-show="isLanguage">
+      <span class="spanLanguage"
+            :class="[isChinese?'active':'']"
+            @click="changeLanguage('zh-cn')">
+        {{$t('public.zhLanguage')}}
+      </span>
+      <span class="spanLine">/</span>
+      <span class="spanLanguage"
+            :class="[!isChinese?'active':'']"
+            @click="changeLanguage('en-us')">
+        {{$t('public.enLanguage')}}
+      </span>
     </div>
   </div>
 </template>
@@ -123,6 +151,7 @@ export default {
   data() {
     return {
       isShowInp: false,
+      isLanguage: true,
       timeReloadValue: this.$store.state.timeReloadValue,
       newReloadValue: this.$store.state.timeReloadValue,
       isShowHardwareInp: false,
@@ -142,6 +171,16 @@ export default {
       },
       set(val) {},
     },
+    isChinese() {
+      let isChinese = false;
+      if (
+        localStorage.getItem('milang') &&
+        localStorage.getItem('milang') === 'zh-cn'
+      ) {
+        isChinese = true;
+      }
+      return isChinese;
+    },
     // set and get isHardwareTimeReload status
     isHardwareTimeReload: {
       get() {
@@ -258,6 +297,10 @@ export default {
         return this.$route.path;
       }
     },
+    changeLanguage(lan) {
+      localStorage.setItem('milang', lan);
+      window.location.reload();
+    },
   },
 };
 </script>
@@ -271,6 +314,19 @@ export default {
   display: flex;
   color: $headerColor;
   flex-shrink: 0;
+  .md-header-language {
+    width: 100px;
+    line-height: 64px;
+    .spanLine {
+      margin: 0 5px;
+    }
+    .spanLanguage {
+      cursor: pointer;
+    }
+    .active {
+      color: #00a5a7;
+    }
+  }
   // logo style
   .cl-header-logo {
     width: 161px;
@@ -332,7 +388,7 @@ export default {
 
   .cl-header-nav {
     margin-left: 50px;
-    flex: 1.5;
+    flex: 2.2;
 
     .el-menu {
       border-bottom: none;
@@ -341,6 +397,10 @@ export default {
       font-size: 16px;
       color: #fff;
       padding-top: 4px;
+      max-width: 20%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
     }
     .el-menu--horizontal > .el-menu-item.is-active {
       color: #00a5a7 !important;

mindinsight/ui/src/locales/en-us.json

+{
+  "public": {
+    "netWorkError": "Network or backend service error. Please check.",
+    "browserWarning": "Your browser may cause some functions to become invalid or unavailable. You are advised to use Chrome 65 or later.",
+    "timeout": "Timeout. Try again.",
+    "noData": "No data",
+    "reset": "Reset",
+    "tagFilterPlaceHolder": "Enter tag (regular expression supported)",
+    "dataError": "The obtained data is abnormal.",
+    "regIllegal": "Enter a correct search criterion.",
+    "stayTuned": "Coming soon...",
+    "select": "Select",
+    "search": "Search",
+    "enter": "Enter",
+    "remark": "Remarks",
+    "zhLanguage": "中",
+    "enLanguage": "EN",
+    "sure": "OK",
+    "clear": "Clear",
+    "cancel": "Cancel",
+    "selectAll": "All",
+    "deselectAll": "Clear",
+    "dataLoading": "Loading data..."
+  },
+  "symbols": {
+    "leftbracket": "(",
+    "rightbracket": ")",
+    "point": "·",
+    "slashes": "/"
+  },
+  "header": {
+    "refreshData": "Refresh Data",
+    "refreshingData": "Refreshing data...",
+    "timeReload": "Auto Refresh",
+    "timeSecond": "Seconds",
+    "timeReloadScope": "The automatic refresh interval ranges from 3 to 300 seconds."
+  },
+  "summaryManage": {
+    "summaryList": "Summary List",
+    "currentFolder": "Current folder:",
+    "sorting": "No.",
+    "summaryPath": "Summary Path",
+    "createTime": "Creation Time",
+    "updateTime": "Update Time",
+    "operation": "Operation",
+    "viewDashboard": "Training Dashboard",
+    "viewProfiler": "Profiling",
+    "modelTraceback": "Model Lineage",
+    "dataTraceback": "Dataset Lineage",
+    "comparePlate": "Comparison Dashboard",
+    "disableProfilerTip": "Failed to view profiling because no profiler log is available.",
+    "hardwareVisual": "Hardware Resources",
+    "paramDetails": "Parameter Details",
+    "trainingParamDetails": "Training Parameter Details(Directory)"
+  },
+  "modelTraceback": {
+    "summaryPath": "Summary Path",
+    "trainSetPath": "Training Set Path",
+    "testSetPath": "Test Set Path",
+    "trainingSampleNum": "Training Samples",
+    "testSampleNum": "Testing Samples",
+    "showAllData": "Display All Data",
+    "network": "Network",
+    "optimizer": "Optimizer",
+    "lossFunc": "Loss Function",
+    "learningRate": "Learning Rate",
+    "modelSize": "Model Size",
+    "dataProcess": "Data Processing",
+    "noDataFound": "No data found.",
+    "click": "Click",
+    "showAllDataBtn": "Display All Data",
+    "viewAllData": "to view all data.",
+    "userDefined": "User-defined Data",
+    "metric": "Metrics",
+    "deviceNum": "Devices",
+    "mixedItemMessage": "This parameter contains multiple types of data and cannot be filtered.",
+    "displayColumn": "Displayed columns",
+    "hide": "Hide Record",
+    "unhide": "Unhide Record",
+    "totalHide": "Hidden records on this page: {n}",
+    "mustExist": "Mandatory",
+    "remarkValidation": "Remarks can contain 1 to 128 characters, including letters, digits, underscores (_), hyphens (-), and periods (.).",
+    "changeSuccess": "Modified successfully.",
+    "metricLabel": "Metric",
+    "userDefinedLabel": "User Defined",
+    "hyperLabel": "Hyper",
+    "otherLabel": "Other",
+    "remarkTips": "Note: Once the service is terminated, remarks and tags will be cleared."
+  },
+  "dataTraceback": {
+    "details": "Details",
+    "key": "KEY",
+    "value": "VALUE",
+    "dataTraceTips": "The data involves combination.",
+    "noDataFound": "No data found.",
+    "click": "Click",
+    "viewAllData": "to view all data."
+  },
+  "trainingDashboard": {
+    "trainingDashboardTitle": "Training Dashboard",
+    "calculationChart": "Computational Graph",
+    "dataMap": "Data Graph",
+    "trainingScalar": "Training Scalar Information",
+    "samplingData": "Data Sampling",
+    "imagesampleSwitch": "Switch Tag",
+    "invalidId": "Invalid training job.",
+    "summaryDirPath": "Summary path:",
+    "loadingTip": "Loading..."
+  },
+  "scalar": {
+    "titleText": "Scalar",
+    "tagSelectTitle": "Tag Selection",
+    "xAxisTitle": "Horizontal axis",
+    "smoothness": "Smoothness",
+    "step": "Step",
+    "selectAll": "All",
+    "relativeTime": "Relative time",
+    "absoluteTime": "Absolute time",
+    "fullScreen": "Full Screen",
+    "stepBack": "Rollback by Step",
+    "openOrCloseSelection": "Enable/Disable Box Selection",
+    "toggleYaxisScale": "Switch Y-axis Ratio",
+    "charTipHeadName": "Name",
+    "charTipTagName": "Tag",
+    "charTipHeadValue": "Value",
+    "charSmoothedValue": "Smoothness",
+    "comparison": "Scalar Synthesis",
+    "compareCancel": "Cancel Synthesis",
+    "open": "More",
+    "close": "Less",
+    "invalidData": "Invalid data exists.",
+    "restore": "Restore",
+    "currentThreshold": "Current threshold",
+    "deleteThreshold": "Delete Threshold",
+    "setThreshold": "Set Threshold",
+    "currentTag": "Current Tag",
+    "filterCriteria": "Filter",
+    "placeHolderThreshold": "Threshold",
+    "or": "Or",
+    "and": "And",
+    "greaterThan": "Greater than",
+    "lessThan": "Less than",
+    "applyAllSelectTag": "Apply to Selected Tags",
+    "placeHolderNumber": "Enter a number",
+    "noSpace": "Do not enter spaces.",
+    "sameCompare": "The comparison operator must be unique.",
+    "unreasonable": "The logic is improper.",
+    "info": "Information",
+    "isDelete": "Are you sure you want to delete the current threshold?"
+  },
+  "images": {
+    "titleText": "Image",
+    "tagSelectTitle": "Tag Selection",
+    "selectAll": "All",
+    "open": "More",
+    "close": "Less",
+    "step": "Step:",
+    "setBright": "Brightness",
+    "setContrast": "Contrast"
+  },
+  "histogram": {
+    "titleText": "Parameter Distribution",
+    "xAxisTitle": "Vertical axis",
+    "viewType": "Angle of View",
+    "centerValue": "Center Value",
+    "step": "Step",
+    "relativeTime": "Relative Time",
+    "absoluteTime": "Absolute Time",
+    "overlay": "Front",
+    "offset": "Top",
+    "fullScreen": "Full Screen"
+  },
+  "dataMap": {
+    "titleText": "Data Graph"
+  },
+  "tensors": {
+    "titleText": "Tensor",
+    "dimension": "Shape:",
+    "tensorType": "Data type:",
+    "viewTypeTitle": "View",
+    "chartViewType": "Table",
+    "histogramViewType": "Histogram",
+    "tensorDashboardLimitErrorMsg": "The requested data is too large. Go to the tensor page and try another dimension."
+  },
+  "graph": {
+    "titleText": "Computational Graph",
+    "downloadPic": "Download",
+    "fitScreen": "Fit to Screen",
+    "nodeInfo": "Node Information",
+    "legend": "Legend",
+    "nameSpace": "Namespace",
+    "operatorNode": "Operator Node",
+    "virtualNode": "Virtual Node",
+    "constantNode": "Constant Node",
+    "polymetric": "Aggregation Node",
+    "dataFlowEdge": "Data Flow Edge",
+    "controllDepEdge": "Control Dependency Edge",
+    "name": "Name",
+    "count": "Subnodes",
+    "type": "Type",
+    "attr": "Attribute",
+    "inputs": "Input",
+    "outputs": "Output",
+    "outputs_i": "Outputs_i",
+    "controlDependencies": "Control Edge",
+    "searchLoading": "Locating nodes... Please wait. The locating speed depends on the number of nodes. A large number of nodes will slow down the speed.",
+    "queryLoading": "Loading... Please wait.",
+    "fullScreen": "Full Screen",
+    "tooManyNodes": "Too many nodes to open.",
+    "inputNodeName": "Enter node name",
+    "guide": "User Guide",
+    "guideTitle1": "Introduction 1 of 3: Main Functions",
+    "guideTitle2": "Introduction 2 of 3: Node Types",
+    "guideTitle3": "Introduction 3 of 3: Edges",
+    "guideContent11": "1. In a computational graph display area, you can view a computational graph, zoom in or out a computational graph by scrolling the mouse wheel, and drag a computational graph.",
+    "guideContent12": "2. A computational graph can be displayed in full screen or saved as an SVG file.",
+    "guideContent13": "3. In the function area on the right, you can switch to view computational graphs of different files or search for nodes in a computational graph.",
+    "guideContent14": "4. In the node information, you can click an input or output node to go to the selected node.",
+    "guideContent2": "Node types of a computational graph include namespace node, operator node, virtual node,   aggregation node, and constant node. \"Default\" indicates forward propagation, and \"Gradients\" indicates backward propagation. ",
+    "guideContent3": "Data edges and control edges exist in a computational graph. A data edge indicates the data input, and a control edge indicates the execution dependency between node.",
+    "next": "Next",
+    "finish": "Complete",
+    "dataTooLarge": "Failed to open the graph because of too many nodes and edges.",
+    "tooManyChain": "The direct subnode depth exceeds 70 and cannot be expanded."
+  },
+  "operator": {
+    "titleText": "Profiling",
+    "currentCard": "Number of cards",
+    "pie": "Pie",
+    "bar": "Bar",
+    "operatorStatistics": "Operator Statistics",
+    "operatorTypeStatistics": "Operator Type Statistics",
+    "allOperator": "All",
+    "classificationOperator": "Type",
+    "card": " ",
+    "searchByType": "Enter operator type",
+    "searchByName": "Enter operator name"
+  },
+  "profiling": {
+    "profilingDashboard": "Profiling Dashboard",
+    "showAverage": "Average value",
+    "iterationGapTime": "Step interval",
+    "time": "Time",
+    "operatorTimeConAnalysis": "Operator Time Consumption Analysis",
+    "avgCost": "Average total consumed time:",
+    "getCost": "Average data obtaining time:",
+    "pushCost": "Average data push time:",
+    "lterationGap": "Step Interval",
+    "lterationTail": "Step Tail",
+    "minddataTitle": "Data Preparation Details",
+    "dataQueue": "Data Queues",
+    "smartHelper": "Helper",
+    "suggestions": "Suggestions",
+    "common-profiler_tutorial": {
+      "desc": "How Do I Use Profiler for Profiling?",
+      "anchor": ["desc"],
+      "url": [
+        "https://www.mindspore.cn/tutorial/zh-CN/master/advanced_use/performance_profiling.html"
+      ]
+    },
+    "step_trace-proposer_type_label": {
+      "desc": "Step trace performance optimization"
+    },
+    "step_trace-iter_interval": {
+      "desc": "After the praph mode and dataset sink mode are enabled, if the average step interval is greater than {n1} ms, the process from data processing to computational graph execution can be optimized."
+    },
+    "common-proposer_type_label": {
+      "desc": "Profiling and optimization guide"
+    },
+    "minddata_pipeline-proposer_type_label": {
+      "desc": "Data processing performance optimization"
+    },
+    "minddata_pipeline-general": {
+      "desc": "The {n1} operator in the pipeline may have performance bottlenecks."
+    },
+    "minddata_pipeline-dataset_op": {
+      "desc": "For operator {n1}, you can adjust the num_parallel_workers parameter."
+    },
+    "minddata_pipeline-generator_op": {
+      "desc": "For operator {n1}, you can adjust the num_parallel_workers parameter or optimize the training script. If the performance is not optimized, you can replace the operator with the MindRecordDataset operator."
+    },
+    "minddata_pipeline-map_op": {
+      "desc": "For operator {n1}, you can adjust the num_parallel_workers parameter. If the Python operator is used, you can optimize the training script."
+    },
+    "minddata_pipeline-batch_op": {
+      "desc": "For operator {n1}, you can increase the prefetch_size value."
+    },
+    "minddata_warning_op": {
+      "desc": "Based on the preceding determination, the operator {n1} can be optimized."
+    },
+    "minddata-proposer_type_label": {
+      "desc": "Step interval profiling"
+    },
+    "minddata_device_queue": {
+      "desc": "The ratio of empty queues on a host is {n1}/{n2}, and the ratio of full queues is {n3}/{n4}."
+    },
+    "minddata_get_next_queue": {
+      "desc": "The ratio of empty queues on a chip is {n1}/{n2}."
+    },
+    "millisecond": "ms",
+    "curCard": "Number of cards",
+    "stepTrace": "Step Trace",
+    "mindData": "Data Preparation",
+    "timeLine": "Timeline",
+    "rankOfOperator": "Operator Time Consumption Ranking",
+    "stepTraceDetail": "Step Trace Details",
+    "viewDetail": "Details",
+    "stepNum": "Steps",
+    "iterGapTimeLabel": "Time",
+    "iterGapRateLabel": "Ratio",
+    "fpBpTimeLabel": "Time",
+    "fpBpRateLabel": "Ratio",
+    "tailTimeLabel": "Time",
+    "tailRateLabel": "Ratio",
+    "operatorDetail": "Operator Details",
+    "times": "times",
+    "queueStep": "Queue Step Distribution",
+    "queueInfo": "Step Interval",
+    "pipeline": "Data Processing",
+    "pipelineTopTitle": "Average usage of queues between operators",
+    "pipelineMiddleTitle": "Queue relationship between operators",
+    "deviceQueueOp": "Data Transmission",
+    "deviceQueueOpTip": "Data Transmission Operator",
+    "getNext": "Data Obtaining Operator",
+    "connectorQuene": "Host Queues",
+    "getData": "Data Obtaining",
+    "opTotalTime": "Total operator execution time:",
+    "streamNum": "Number of executed flows:",
+    "opNum": "Number of operators:",
+    "opTimes": "Total operator execution times:",
+    "features": "Functions:",
+    "iterationInfo": "The step trace displays the duration of each step from the start of the previous iteration to the end of the step. The main time is divided into three parts: step interval, forward and backward propagation, and step tail.",
+    "iterationGapInfo": "Reads data from data queues. If this part takes a long time, you are advised to check the data processing for further analysis.",
+    "fpbpTitle": "Forward and Backward Propagation",
+    "fpbpInfo": "Executes the forward and backward operators on the network, which carry the main calculation work of a step. If this part takes a long time, you are advised to check the operator statistics or timeline for further analysis.",
+    "iterativeTailingTitle": "Step Tail",
+    "iterativeTailingInfo": "Performs parameter aggregation and update operations in multi-card scenarios. If the operations take a long time,you are advised to check the time consumed by all_reduce and the parallel status.",
+    "statistics": "Statistics:",
+    "totalTime": "Total consumed time:",
+    "totalSteps": "Total steps:",
+    "fpbpTimeRatio": "Ratio of time consumed by forward and backward propagation:",
+    "iterationGapTimeRatio": "Ratio of time consumed by step interval:",
+    "iterativeTailingTimeRatio": "Ratio of time consumed by step tail:",
+    "dataProcess": "This shows the data processing. Data is stored in the host queue during data processing, and then stored in the data queue on a chip during data transmission. Finally, the data transmission operator get_next transmits the data to forward propagation.",
+    "dataProcessInfo": "By determining the empty host and data queues, you can preliminarily determine the stage where the performance is abnormal.",
+    "analysisOne": "1. If the step interval is long and some batches of the data queue on a chip are empty, the performance is abnormal during data processing and transmission. Otherwise, locate the internal problem of the data transmission operator get_next.",
+    "analysisTwo": "2. If the performance is abnormal during data processing and transmission, check the host queue. If the host queue is empty at a high probability, the exception may occur during data transmission.",
+    "higherAnalysis": "Note: You can perform advanced analysis based on the time consumed by operators.",
+    "chipInfo": "Ratio of empty data queues on a chip:",
+    "hostIsEmpty": "Ratio of empty queues on a host:",
+    "hostIsFull": "Ratio of full queues on a host:",
+    "operatorInfo": "Operator information of {msg1} and {msg2}",
+    "workersNum": "Number of threads",
+    "queueDeepChartTitle": "{msg} Depth Line Chart",
+    "sampleInterval": "Sampling interval",
+    "queueTip1": "Ratio of full queues:",
+    "queueTip2": "Ratio of empty queues:",
+    "totalCapacity": "Total capacity",
+    "averageCapacity": "Average used capacity",
+    "FPMessage": "FP start operator:",
+    "BPMessage": "BP termination operator:",
+    "approximateTime": "Total duration ≈ ",
+    "stepInputTip": "Steps (an integer ranging from 1 to {max})",
+    "inputError": "Input parameter error. Please enter a positive integer ranging from 1 to {max}",
+    "defaultTip": "Average value (default)",
+    "downloadTimeline": "Download",
+    "timelineTips": {
+      "title1": "The timeline function helps you analyze the training process and displays the following information:",
+      "content11": "- Device(AI CPU or AI core) to which an operator is allocated for execution.",
+      "content12": "- Flow tiling policy of MindSpore on the network.",
+      "content13": "- Execution sequence and duration of an operator on a device.",
+      "title2": "How to view the timeline details?",
+      "content21": {
+        "part1": "Click ",
+        "part2": "Download",
+        "part3": " to save a file containing the timeline information to a local host."
+      },
+      "content22": "View the information using either Google plug-in (chrome://tracing) or Perfetto (https://ui.perfetto.dev/#!/viewer).",
+      "content23": {
+        "part1": "Select one of the preceding two tools, enter its address in an address box of a browser, and press ",
+        "part2": "Enter",
+        "part3": ". On the page that is displayed, click ",
+        "part4": "Load",
+        "part5": " in the upper left corner of the tracing tool or click ",
+        "part6": "Open trace file",
+        "part7": " in the left pane of the Perfetto tool."
+      },
+      "title3": "How to use the timeline?",
+      "content31": "You can analyze whether the flow tiling policy is proper and whether the step interval and tail time are too long based on the timeline information.",
+      "content32": "You can also locate an operator and view and analyze its execution time."
+    },
+    "unit": "ms/time"
+  },
+  "hardwareVisual": {
+    "processor": "Ascend AI Processor",
+    "ram": "Memory",
+    "selectedCpu": "Selected CPUs:",
+    "allCpu": "Total CPUs:",
+    "chipNameTip": "Chip name",
+    "deviceIdTip": "Chip ID",
+    "availableTip": "Available or not(for reference only)",
+    "healthTip": "Chip health index",
+    "ipTip": "Chip IP address",
+    "aicoreTip": "Chip usage",
+    "hbmTip": "Used HBM memory",
+    "powerTip": "Chip power consumption",
+    "temperatureTip": "Chip temperature",
+    "cpuUserTip": "Time for running in user mode (%)",
+    "cpuSystemTip": "Time for running in kernel mode (%)",
+    "cpuIdleTip": "Idle time (%)",
+    "cpuNiceTip": "Time for running low-priority processes (%)",
+    "cpuIowaitTip": "Time for waiting for I/O (%)",
+    "cpuIrqTip": "Time for processing hardware interrupts (%)",
+    "cpuSoftirqTip": "Time for processing software interrupts (%)",
+    "cpuStealTip": "Time occupied by other VMs (%)",
+    "cpuGuestTip": "Time for running the VM (%)",
+    "cpuGuestniceTip": "Time for running low-priority VMs (%)",
+    "cpuInterruptTip": "Time for processing hardware interrupts (%)",
+    "cpuDpcTip": "Time for remote calling (%)",
+    "noNpuInfo": "No Ascend AI processor information",
+    "normal": "Normal",
+    "generalWarn": "Minor warning",
+    "importantWarn": "Major warning",
+    "emergencyWarn": "Critical warning",
+    "noChip": "The chip does not exist or is not started.",
+    "availableFree": "The chip is available.",
+    "availableBusy": "The chip is occupied or unavailable.",
+    "failQueryChip": "An error occurs during chip information query.",
+    "faliQuery": "Query error"
+  },
+  "components": {
+    "summaryTitle": "Training selection",
+    "tagSelectTitle": "Tag Selection",
+    "selectAll": "All",
+    "tagFilterPlaceHolder": "Enter tag (regular expression supported)",
+    "open": "More",
+    "close": "Less",
+    "gridIncorrectDataError": "A maximum of two-dimensionalarrays can be displayed.",
+    "gridAccuracy": "Decimal places are reserved.",
+    "inCorrectInput": "Invalid input.",
+    "gridTableNoData": "No data in the table."
+  },
+  "error": {
+    "50540000": "System error.",
+    "50540001": "Incorrect parameter type. Check whether the request parameter types meet the requirements.",
+    "50540002": "Incorrect parameter value. Check whether the request parameter values meet the requirements.",
+    "50540003": "Mandatory parameters are missing. Check whether all mandatory parameters meet the requirements.",
+    "50545001": "The API route resource does not exist.",
+    "50545002": "Incorrect HTTP method for requesting the API.",
+    "50545005": "The training job does not exist.",
+    "50545007": "Loading summary data... Please wait.",
+    "50545009": "The queried node is not in the graph. Please refresh.",
+    "5054500A": "Failed to decode the URL of the training job ID.",
+    "5054500C": "The computational graph does not exist. Please refresh.",
+    "5054500D": "The image data does not exist. Please refresh.",
+    "5054500E": "The scalar data does not exist. Please refresh.",
+    "5054500F": "The parameter distribution data does not exist. Please refresh.",
+    "50545010": "The requested data is not in the cache. Refresh.",
+    "50542082": "The model name is missing.",
+    "50542085": "Invalid model name.",
+    "50542215": "Incorrect query parameters.",
+    "50542216": "The summary log file is not found.",
+    "50542217": "Incorrect summary log path.",
+    "50542218": "Incorrect filtering parameter.",
+    "50545012": "The tensor data does not exist. Please refresh.",
+    "50545013": "The requested data is too large. Try another dimension.",
+    "50545014": "The queried tensor data has been replaced by new data. Please refresh.",
+    "50548001": "Ascend AI Processor information query timed out."
+  }
+}

mindinsight/ui/src/locales/zh-cn.json

@@ -367,9 +367,21 @@
       "content12": "- MindSpore对该网络的流切分策略；",
       "content13": "- 算子在Device上的执行序列和执行时长。",
       "title2": "如何查看时间线：",
-      "content21": "要查看时间线的详细信息，您可以点击 \"下载\" 按钮将带有时间线信息的文件保存到本地，再通过工具查看。",
+      "content21": {
+        "part1": "要查看时间线的详细信息，您可以点击 \"",
+        "part2": "下载",
+        "part3": "\" 按钮将带有时间线信息的文件保存到本地，再通过工具查看。"
+      },
       "content22": "我们推荐您使用谷歌插件：chrome://tracing，或 Perfetto工具：https://ui.perfetto.dev/#!/viewer",
-      "content23": "选择一个工具，在浏览器地址栏输入地址并回车，进入页面点击按钮加载文件查看时间线（tracing工具点击左上角 \"load\"，Perfetto工具点击左侧栏 \"Open trace file\"）。",
+      "content23": {
+        "part1": "选择一个工具，在浏览器地址栏输入地址并",
+        "part2": "回车",
+        "part3": "，进入页面点击按钮加载文件查看时间线（tracing工具点击左上角 \"",
+        "part4": "Load",
+        "part5": "\"，Perfetto工具点击左侧栏 \"",
+        "part6": "Open trace file",
+        "part7": "\"）。"
+      },
       "title3": "如何使用时间线：",
       "content31": "您可以通过时间线信息分析流切分方法是否合理、迭代间隙和拖尾时间是否过长等；",
       "content32": "也可以具体定位到某个算子，查看分析它的执行时间。"

mindinsight/ui/src/main.js

@@ -23,9 +23,18 @@ import './assets/css/element.css';
 import './assets/css/reset.scss';
 import i18n from './i18n';
 import $ from 'jquery';
+import locale from '../node_modules/element-ui/lib/locale/lang/en';
+import localezh from '../node_modules/element-ui/lib/locale/lang/zh-CN';
 
+if (
+  localStorage.getItem('milang') &&
+  localStorage.getItem('milang') !== 'zh-cn'
+) {
+  Vue.use(ElementUI, {locale});
+} else {
+  Vue.use(ElementUI, {localezh});
+}
 window.$ = window.jQuery = $;
-Vue.use(ElementUI);
 
 Vue.prototype.$bus = new Vue();
 
@@ -47,7 +56,6 @@ router.onError((error) => {
 // forbidden showing production tip
 Vue.config.productionTip = false;
 
-
 /**
  * Check the browser version
  * @return {Boolen}

mindinsight/ui/src/views/train-manage/data-process.vue

@@ -316,6 +316,7 @@ export default {
         noData: true,
         size: null,
         initOver: false,
+        deviceId: null,
       },
       dataQueueChart: {
         // Data queue chart object
@@ -373,6 +374,7 @@ export default {
         // Average rate chart object
         id: 'average-rate',
         chartDom: null,
+        deviceId: null,
       },
       queueDeepChart: {
         // Queue deep chart object
@@ -438,14 +440,20 @@ export default {
      *  Tabs switch
      */
     handleClick() {
-      if (this.activeName === 'pipeLine') {
-        if (!Object.keys(this.allGraphData).length) {
-          this.$nextTick(() => {
-            this.queryAverageRate();
-          });
-        }
+      if (
+        this.activeName === 'pipeLine' &&
+        this.averageRateChart.deviceId !== this.currentCard
+      ) {
+        this.queryAverageRate();
+      } else if (
+        this.activeName === 'queueInfo' &&
+        this.connectQueueChart.deviceId !== this.currentCard
+      ) {
+        this.init();
       }
-      this.resizeCallback();
+      this.$nextTick(() => {
+        this.resizeCallback();
+      });
     },
     init() {
       this.queryProcessSummary();
@@ -652,6 +660,7 @@ export default {
         device_id: this.currentCard,
         train_id: this.trainId,
       };
+      this.connectQueueChart.deviceId = this.currentCard;
       RequestService.queryProcessSummary(params).then(
           (res) => {
             if (res && res.data) {
@@ -732,6 +741,7 @@ export default {
           device_id: this.currentCard,
         },
       };
+      this.averageRateChart.deviceId = this.currentCard;
       RequestService.queryOpQueue(params).then(
           (res) => {
             this.initOver = true;

mindinsight/ui/src/views/train-manage/graph.vue

@@ -42,17 +42,17 @@ limitations under the License.
         </el-popover>
         <div class="step"
              v-show="guide.step == 1">
-          <img src="@/assets/images/graph-step1.svg"
+          <img :src="require(`@/assets/images/graph-step1${language === 'en-us' ? '-en' : ''}.svg`)"
                alt="" />
         </div>
         <div class="step"
              v-show="guide.step == 2">
-          <img src="@/assets/images/graph-step2.svg"
+          <img :src="require(`@/assets/images/graph-step2${language === 'en-us' ? '-en' : ''}.svg`)"
                alt="" />
         </div>
         <div class="step"
              v-show="guide.step == 3">
-          <img src="@/assets/images/graph-step3.svg"
+          <img :src="require(`@/assets/images/graph-step3${language === 'en-us' ? '-en' : ''}.svg`)"
                alt="" />
         </div>
       </div>
@@ -492,6 +492,7 @@ export default {
         max: 10000,
         scale: {x: 1, y: 1},
       },
+      language: '',
     };
   },
   computed: {},
@@ -528,6 +529,7 @@ export default {
     }
 
     this.trainJobID = this.$route.query.train_id;
+    this.language = localStorage.getItem('milang') || 'zh-cn';
     document.title = `${decodeURIComponent(this.trainJobID)}-${this.$t(
         'graph.titleText',
     )}-MindInsight`;

mindinsight/ui/src/views/train-manage/profiling-dashboard.vue

@@ -320,9 +320,21 @@ limitations under the License.
                 <div>{{$t("profiling.timelineTips.content13")}}</div>
                 <br>
                 <div class="font-style">{{$t("profiling.timelineTips.title2")}}</div>
-                <div>{{$t("profiling.timelineTips.content21")}}</div>
+                <div>
+                  {{$t("profiling.timelineTips.content21.part1")}}
+                  <b>{{$t("profiling.timelineTips.content21.part2")}}</b>
+                  {{$t("profiling.timelineTips.content21.part3")}}
+                </div>
                 <div>{{$t("profiling.timelineTips.content22")}}</div>
-                <div>{{$t("profiling.timelineTips.content23")}}</div>
+                <div>
+                  {{$t("profiling.timelineTips.content23.part1")}}
+                  <b>{{$t("profiling.timelineTips.content23.part2")}}</b>
+                  {{$t("profiling.timelineTips.content23.part3")}}
+                  <b>{{$t("profiling.timelineTips.content23.part4")}}</b>
+                  {{$t("profiling.timelineTips.content23.part5")}}
+                  <b>{{$t("profiling.timelineTips.content23.part6")}}</b>
+                  {{$t("profiling.timelineTips.content23.part7")}}
+                </div>
                 <br>
                 <div class="font-style">{{$t("profiling.timelineTips.title3")}}</div>
                 <div>{{$t("profiling.timelineTips.content31")}}</div>