提交 0f136bfa 编写于 作者: W WeiFeng-mindinsight

UI support display in English

上级 4035f361
因为 它太大了无法显示 source diff 。你可以改为 查看blob
因为 它太大了无法显示 source diff 。你可以改为 查看blob
因为 它太大了无法显示 source diff 。你可以改为 查看blob
...@@ -28,11 +28,26 @@ limitations under the License. ...@@ -28,11 +28,26 @@ limitations under the License.
:default-active="getActive()" :default-active="getActive()"
class="el-menu-demo" class="el-menu-demo"
mode="horizontal"> mode="horizontal">
<el-menu-item index="/summary-manage">{{$t("summaryManage.summaryList")}}</el-menu-item> <el-menu-item index="/summary-manage"
<el-menu-item index="/model-traceback">{{$t("summaryManage.modelTraceback")}}</el-menu-item> :title='$t("summaryManage.summaryList")'>
<el-menu-item index="/data-traceback">{{$t("summaryManage.dataTraceback")}}</el-menu-item> {{$t("summaryManage.summaryList")}}
<el-menu-item index="/compare-plate">{{$t("summaryManage.comparePlate")}}</el-menu-item> </el-menu-item>
<el-menu-item index="/hardware-visual">{{$t("summaryManage.hardwareVisual")}}</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> </el-menu>
</div> </div>
</div> </div>
...@@ -46,7 +61,7 @@ limitations under the License. ...@@ -46,7 +61,7 @@ limitations under the License.
|| !this.$route.path.indexOf('/compare-plate') || !this.$route.path.indexOf('/compare-plate')
|| !this.$route.path.indexOf('/hardware-visual')"> || !this.$route.path.indexOf('/hardware-visual')">
<div class="reload-training" <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('/image') > 0
|| this.$route.path.indexOf('/histogram') > 0 || this.$route.path.indexOf('/histogram') > 0
|| this.$route.path.indexOf('/tensor') > 0 || this.$route.path.indexOf('/tensor') > 0
...@@ -54,13 +69,13 @@ limitations under the License. ...@@ -54,13 +69,13 @@ limitations under the License.
|| !this.$route.path.indexOf('/compare-plate')"> || !this.$route.path.indexOf('/compare-plate')">
<!-- automatic refresh switch --> <!-- automatic refresh switch -->
<el-switch v-model="isTimeReload" <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')" timeReloadValue+$t('header.timeSecond')+$t('symbols.rightbracket')"
@change="timeReload"></el-switch> @change="timeReload"></el-switch>
<i class="el-icon-edit" <i class="el-icon-edit"
:title="$t('header.timeReloadScope')" :title="$t('header.timeReloadScope')"
v-if="isTimeReload && !isShowInp" v-if="isTimeReload && !isShowInp"
@click="editTime"></i> @click="editTime"></i>
<el-input v-if="isTimeReload && isShowInp" <el-input v-if="isTimeReload && isShowInp"
v-model="newReloadValue" v-model="newReloadValue"
...@@ -68,23 +83,23 @@ limitations under the License. ...@@ -68,23 +83,23 @@ limitations under the License.
@input="timeValueChange"></el-input> @input="timeValueChange"></el-input>
<i class="el-icon-check" <i class="el-icon-check"
v-if="isTimeReload && isShowInp" v-if="isTimeReload && isShowInp"
@click="saveTimeValue"></i> @click="saveTimeValue"></i>
<i class="el-icon-close" <i class="el-icon-close"
v-if="isTimeReload && isShowInp" v-if="isTimeReload && isShowInp"
@click="cancelTimeValue"></i> @click="cancelTimeValue"></i>
</div> </div>
<div class="reload-hardware" <div class="reload-hardware"
v-if="!this.$route.path.indexOf('/hardware-visual')"> v-if="!this.$route.path.indexOf('/hardware-visual')">
<!-- automatic refresh switch --> <!-- automatic refresh switch -->
<el-switch v-model="isHardwareTimeReload" <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')" hardwareTimeReloadValue+$t('header.timeSecond')+$t('symbols.rightbracket')"
@change="hardwareTimeReload"></el-switch> @change="hardwareTimeReload"></el-switch>
<i class="el-icon-edit" <i class="el-icon-edit"
:title="$t('header.timeReloadScope')" :title="$t('header.timeReloadScope')"
v-if="isHardwareTimeReload && !isShowHardwareInp" v-if="isHardwareTimeReload && !isShowHardwareInp"
@click="editHardwareTime"></i> @click="editHardwareTime"></i>
<el-input v-if="isHardwareTimeReload && isShowHardwareInp" <el-input v-if="isHardwareTimeReload && isShowHardwareInp"
v-model="newHardwareReloadValue" v-model="newHardwareReloadValue"
...@@ -92,14 +107,13 @@ limitations under the License. ...@@ -92,14 +107,13 @@ limitations under the License.
@input="hardwareTimeValueChange"></el-input> @input="hardwareTimeValueChange"></el-input>
<i class="el-icon-check" <i class="el-icon-check"
v-if="isHardwareTimeReload && isShowHardwareInp" v-if="isHardwareTimeReload && isShowHardwareInp"
@click="saveHardwareTimeValue"></i> @click="saveHardwareTimeValue"></i>
<i class="el-icon-close" <i class="el-icon-close"
v-if="isHardwareTimeReload && isShowHardwareInp" v-if="isHardwareTimeReload && isShowHardwareInp"
@click="cancelHardwareTimeValue"></i> @click="cancelHardwareTimeValue"></i>
</div> </div>
<!-- manual refresh switch --> <!-- manual refresh switch -->
<img src="../assets/images/reload.png" <img src="../assets/images/reload.png"
alt="" alt=""
...@@ -113,7 +127,21 @@ limitations under the License. ...@@ -113,7 +127,21 @@ limitations under the License.
width="24" width="24"
class="cl-header-img cl-reload" class="cl-header-img cl-reload"
v-if="isReload" 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>
</div> </div>
</template> </template>
...@@ -123,6 +151,7 @@ export default { ...@@ -123,6 +151,7 @@ export default {
data() { data() {
return { return {
isShowInp: false, isShowInp: false,
isLanguage: true,
timeReloadValue: this.$store.state.timeReloadValue, timeReloadValue: this.$store.state.timeReloadValue,
newReloadValue: this.$store.state.timeReloadValue, newReloadValue: this.$store.state.timeReloadValue,
isShowHardwareInp: false, isShowHardwareInp: false,
...@@ -142,6 +171,16 @@ export default { ...@@ -142,6 +171,16 @@ export default {
}, },
set(val) {}, set(val) {},
}, },
isChinese() {
let isChinese = false;
if (
localStorage.getItem('milang') &&
localStorage.getItem('milang') === 'zh-cn'
) {
isChinese = true;
}
return isChinese;
},
// set and get isHardwareTimeReload status // set and get isHardwareTimeReload status
isHardwareTimeReload: { isHardwareTimeReload: {
get() { get() {
...@@ -258,6 +297,10 @@ export default { ...@@ -258,6 +297,10 @@ export default {
return this.$route.path; return this.$route.path;
} }
}, },
changeLanguage(lan) {
localStorage.setItem('milang', lan);
window.location.reload();
},
}, },
}; };
</script> </script>
...@@ -271,6 +314,19 @@ export default { ...@@ -271,6 +314,19 @@ export default {
display: flex; display: flex;
color: $headerColor; color: $headerColor;
flex-shrink: 0; flex-shrink: 0;
.md-header-language {
width: 100px;
line-height: 64px;
.spanLine {
margin: 0 5px;
}
.spanLanguage {
cursor: pointer;
}
.active {
color: #00a5a7;
}
}
// logo style // logo style
.cl-header-logo { .cl-header-logo {
width: 161px; width: 161px;
...@@ -332,7 +388,7 @@ export default { ...@@ -332,7 +388,7 @@ export default {
.cl-header-nav { .cl-header-nav {
margin-left: 50px; margin-left: 50px;
flex: 1.5; flex: 2.2;
.el-menu { .el-menu {
border-bottom: none; border-bottom: none;
...@@ -341,6 +397,10 @@ export default { ...@@ -341,6 +397,10 @@ export default {
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
padding-top: 4px; padding-top: 4px;
max-width: 20%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.el-menu--horizontal > .el-menu-item.is-active { .el-menu--horizontal > .el-menu-item.is-active {
color: #00a5a7 !important; color: #00a5a7 !important;
......
{
"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."
}
}
...@@ -367,9 +367,21 @@ ...@@ -367,9 +367,21 @@
"content12": "- MindSpore对该网络的流切分策略;", "content12": "- MindSpore对该网络的流切分策略;",
"content13": "- 算子在Device上的执行序列和执行时长。", "content13": "- 算子在Device上的执行序列和执行时长。",
"title2": "如何查看时间线:", "title2": "如何查看时间线:",
"content21": "要查看时间线的详细信息,您可以点击 \"下载\" 按钮将带有时间线信息的文件保存到本地,再通过工具查看。", "content21": {
"part1": "要查看时间线的详细信息,您可以点击 \"",
"part2": "下载",
"part3": "\" 按钮将带有时间线信息的文件保存到本地,再通过工具查看。"
},
"content22": "我们推荐您使用谷歌插件:chrome://tracing,或 Perfetto工具:https://ui.perfetto.dev/#!/viewer", "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": "如何使用时间线:", "title3": "如何使用时间线:",
"content31": "您可以通过时间线信息分析流切分方法是否合理、迭代间隙和拖尾时间是否过长等;", "content31": "您可以通过时间线信息分析流切分方法是否合理、迭代间隙和拖尾时间是否过长等;",
"content32": "也可以具体定位到某个算子,查看分析它的执行时间。" "content32": "也可以具体定位到某个算子,查看分析它的执行时间。"
......
...@@ -23,9 +23,18 @@ import './assets/css/element.css'; ...@@ -23,9 +23,18 @@ import './assets/css/element.css';
import './assets/css/reset.scss'; import './assets/css/reset.scss';
import i18n from './i18n'; import i18n from './i18n';
import $ from 'jquery'; 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 = $; window.$ = window.jQuery = $;
Vue.use(ElementUI);
Vue.prototype.$bus = new Vue(); Vue.prototype.$bus = new Vue();
...@@ -47,7 +56,6 @@ router.onError((error) => { ...@@ -47,7 +56,6 @@ router.onError((error) => {
// forbidden showing production tip // forbidden showing production tip
Vue.config.productionTip = false; Vue.config.productionTip = false;
/** /**
* Check the browser version * Check the browser version
* @return {Boolen} * @return {Boolen}
......
...@@ -316,6 +316,7 @@ export default { ...@@ -316,6 +316,7 @@ export default {
noData: true, noData: true,
size: null, size: null,
initOver: false, initOver: false,
deviceId: null,
}, },
dataQueueChart: { dataQueueChart: {
// Data queue chart object // Data queue chart object
...@@ -373,6 +374,7 @@ export default { ...@@ -373,6 +374,7 @@ export default {
// Average rate chart object // Average rate chart object
id: 'average-rate', id: 'average-rate',
chartDom: null, chartDom: null,
deviceId: null,
}, },
queueDeepChart: { queueDeepChart: {
// Queue deep chart object // Queue deep chart object
...@@ -438,14 +440,20 @@ export default { ...@@ -438,14 +440,20 @@ export default {
* Tabs switch * Tabs switch
*/ */
handleClick() { handleClick() {
if (this.activeName === 'pipeLine') { if (
if (!Object.keys(this.allGraphData).length) { this.activeName === 'pipeLine' &&
this.$nextTick(() => { this.averageRateChart.deviceId !== this.currentCard
this.queryAverageRate(); ) {
}); this.queryAverageRate();
} } else if (
this.activeName === 'queueInfo' &&
this.connectQueueChart.deviceId !== this.currentCard
) {
this.init();
} }
this.resizeCallback(); this.$nextTick(() => {
this.resizeCallback();
});
}, },
init() { init() {
this.queryProcessSummary(); this.queryProcessSummary();
...@@ -652,6 +660,7 @@ export default { ...@@ -652,6 +660,7 @@ export default {
device_id: this.currentCard, device_id: this.currentCard,
train_id: this.trainId, train_id: this.trainId,
}; };
this.connectQueueChart.deviceId = this.currentCard;
RequestService.queryProcessSummary(params).then( RequestService.queryProcessSummary(params).then(
(res) => { (res) => {
if (res && res.data) { if (res && res.data) {
...@@ -732,6 +741,7 @@ export default { ...@@ -732,6 +741,7 @@ export default {
device_id: this.currentCard, device_id: this.currentCard,
}, },
}; };
this.averageRateChart.deviceId = this.currentCard;
RequestService.queryOpQueue(params).then( RequestService.queryOpQueue(params).then(
(res) => { (res) => {
this.initOver = true; this.initOver = true;
......
...@@ -42,17 +42,17 @@ limitations under the License. ...@@ -42,17 +42,17 @@ limitations under the License.
</el-popover> </el-popover>
<div class="step" <div class="step"
v-show="guide.step == 1"> 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="" /> alt="" />
</div> </div>
<div class="step" <div class="step"
v-show="guide.step == 2"> 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="" /> alt="" />
</div> </div>
<div class="step" <div class="step"
v-show="guide.step == 3"> 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="" /> alt="" />
</div> </div>
</div> </div>
...@@ -492,6 +492,7 @@ export default { ...@@ -492,6 +492,7 @@ export default {
max: 10000, max: 10000,
scale: {x: 1, y: 1}, scale: {x: 1, y: 1},
}, },
language: '',
}; };
}, },
computed: {}, computed: {},
...@@ -528,6 +529,7 @@ export default { ...@@ -528,6 +529,7 @@ export default {
} }
this.trainJobID = this.$route.query.train_id; this.trainJobID = this.$route.query.train_id;
this.language = localStorage.getItem('milang') || 'zh-cn';
document.title = `${decodeURIComponent(this.trainJobID)}-${this.$t( document.title = `${decodeURIComponent(this.trainJobID)}-${this.$t(
'graph.titleText', 'graph.titleText',
)}-MindInsight`; )}-MindInsight`;
......
...@@ -320,9 +320,21 @@ limitations under the License. ...@@ -320,9 +320,21 @@ limitations under the License.
<div>{{$t("profiling.timelineTips.content13")}}</div> <div>{{$t("profiling.timelineTips.content13")}}</div>
<br> <br>
<div class="font-style">{{$t("profiling.timelineTips.title2")}}</div> <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.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> <br>
<div class="font-style">{{$t("profiling.timelineTips.title3")}}</div> <div class="font-style">{{$t("profiling.timelineTips.title3")}}</div>
<div>{{$t("profiling.timelineTips.content31")}}</div> <div>{{$t("profiling.timelineTips.content31")}}</div>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册