Skip to content

M
mindinsight

MindSpore / mindinsight

通知 7
Star 3
Fork 2
M
mindinsight
提交 0f136bfa 编写于 作者: W WeiFeng-mindinsight
浏览文件
操作

UI support display in English

上级 4035f361
展开全部 隐藏空白更改
内联 并排
Showing with 1947 addition and 44 deletion
mindinsight/ui/src/assets/images/graph-step1-en.svg 0 → 100644
浏览文件 @ 0f136bfa
此差异已折叠。
mindinsight/ui/src/assets/images/graph-step2-en.svg 0 → 100644
浏览文件 @ 0f136bfa
此差异已折叠。
mindinsight/ui/src/assets/images/graph-step3-en.svg 0 → 100644
浏览文件 @ 0f136bfa
此差异已折叠。
mindinsight/ui/src/components/header.vue
浏览文件 @ 0f136bfa
......@@ -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 0 → 100644
浏览文件 @ 0f136bfa
此差异已折叠。
mindinsight/ui/src/locales/zh-cn.json
浏览文件 @ 0f136bfa
......@@ -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
浏览文件 @ 0f136bfa
......@@ -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
浏览文件 @ 0f136bfa
......@@ -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
浏览文件 @ 0f136bfa
......@@ -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
浏览文件 @ 0f136bfa
......@@ -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>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或