fix #506 (#508)

* front-end add vue-i18n dependency

* back-end support language selection with option --language or -L

* front-end add language support with vue-i18n

frontend/package.json

@@ -29,6 +29,7 @@
     "qs": "^6.5.1",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
+    "vue-i18n": ">=7.0.0",
     "vuetify": "^0.17.7",
     "xlsx": "^0.11.3"
   },

frontend/src/App.vue

@@ -9,6 +9,7 @@
 
 <script>
 import AppMenu from './common/component/AppMenu';
+import {getLanguage} from './service';
 
 export default {
   name: 'App',
@@ -21,6 +22,10 @@ export default {
     };
   },
   created() {
+    getLanguage().then(({errno, data}) => {
+      this.$i18n.locale = data;
+    });
+
     if (location.hash && location.hash != '#/') {
       this.initialRoute = /(\#\/)(\w*)([?|&]{0,1})/.exec(location.hash)[2];
     } else {

frontend/src/assets/language/en.json

+{
+	"lang": {
+		"runs": "Runs",
+		"notRunsSelect": "None selected",
+		"metrics": "metrics",
+		"samples": "samples",
+		"graphs": "graphs",
+		"HighDimensional": "HighDimensional",
+		"text": "Text",
+		"image": "Image",
+		"audio": "Audio",
+		"showActualImageSize": "Show actual image size",
+		"startRunning": "Running",
+		"stopRunning": "Stopped",
+		"searchTagInReg": "Search tags in RegExp",
+		"scalars": "Scalars",
+		"smoothing": "Smoothing",
+		"xAxis": "X-axis",
+		"toolTipSorting": "Tooltip sorting",
+		"ignoreOutliers": "Ignore outliers in chart scaling",
+		"histogram": "Histogram",
+		"mode": "Mode",
+		"step": "Step",
+		"relative": "Relative",
+		"wall": "Wall Time",
+		"default": "default",
+		"descending": "descending",
+		"ascending": "ascending",
+		"nearest": "nearest",
+		"overlay": "Overlay",
+		"offset": "Offset",
+		"downloadImage": "Download image",
+		"restoreImage": "Restore image",
+		"scale": "Scale",
+		"nodeInfo": "Node Info",
+		"nodeName": "Name",
+		"nodeType": "Node Type",
+		"dataShape": "Shape",
+		"dataType": "Data Type",
+		"input": "Input",
+		"output": "Output",
+		"opType": "Operator Type",
+		"search": "Search",
+		"searchByLabel": "Search by label",
+		"dimension": "Dimension",
+		"2D": "2D",
+		"3D": "3D",
+		"displayAllLabel": "Display All Labels",
+		"reductionMethod": "Reduction Method",
+		"downloadDataInJson": "Download data in JSON",
+		"all": "All"
+	}
+}

frontend/src/assets/language/zh.json

+{
+	"lang": {
+		"runs": "数据流",
+		"notRunsSelect": "未选中任何数据",
+		"metrics": "度量数据",
+		"samples": "样本数据",
+		"graphs": "网络结构",
+		"HighDimensional": "高维数据映射",
+		"text": "文本",
+		"image": "图片",
+		"audio": "音频",
+		"showActualImageSize": "按真实大小显示",
+		"startRunning": "运行",
+		"stopRunning": "停止",
+		"searchTagInReg": "搜索标签(支持正则)",
+		"scalars": "标量",
+		"smoothing": "平滑度",
+		"xAxis": "x轴",
+		"toolTipSorting": "标签排序方法",
+		"ignoreOutliers": "图表缩放时忽略极端值",
+		"histogram": "直方图",
+		"mode": "模式",
+		"step": "步",
+		"relative": "相对值",
+		"wall": "时间",
+		"default": "默认",
+		"descending": "降序",
+		"ascending": "升序",
+		"nearest": "最近",
+		"overlay": "概览",
+		"offset": "偏移",
+		"downloadImage": "下载图片",
+		"restoreImage": "还原图片",
+		"scale": "比例",
+		"nodeInfo": "节点信息",
+		"nodeName": "节点名称",
+		"nodeType": "节点类型",
+		"dataShape": "数据形状",
+		"dataType": "数据类型",
+		"input": "输入",
+		"output": "输出",
+		"opType": "算子类型",
+		"search": "搜索",
+		"searchByLabel": "通过标签搜索",
+		"dimension": "维度",
+		"2D": "二维",
+		"3D": "三维",
+		"displayAllLabel": "展示所有标签",
+		"reductionMethod": "降维方法",
+		"downloadDataInJson": "下载数据(json格式)",
+		"all": "全部"
+	}
+}

frontend/src/common/component/AppMenu.vue

@@ -19,7 +19,7 @@
               :ripple="false"
               :color="runsSelectorOpen ? 'dark_primary' : 'primary'"
               :class="runsSelectorOpen ? 'runs-selected-menu-open' : 'runs-selected-menu'"
-            > <span class="runs-selected-text">Runs: {{ runs.length == 0 ? 'None selected' : runs.join(', ') }} </span>
+            > <span class="runs-selected-text">{{ $t("lang.runs") }}: {{ runs.length == 0 ? $t("lang.notRunsSelect") : runs.join(', ') }} </span>
               <v-icon>arrow_drop_down</v-icon>
             </v-btn>
             <v-list dense>
@@ -46,7 +46,7 @@
             dark
             :class="selected.toLowerCase() === item.name.toLowerCase() ? 'menu-item-selected': 'menu-item'"
             @click="handleItemClick(item)"
-          >{{ item.title }}</v-btn>
+          >{{ $t('lang.' + item.name) }}</v-btn>
         </v-toolbar-items>
       </v-toolbar>
     </div>
@@ -95,29 +95,29 @@ export default {
     };
   },
   created() {
-    this.runs = this.$route.query.runs; //maintain runs state after refresh
+    this.runs = this.$route.query.runs; // maintain runs state after refresh
     getRuns().then(({errno, data}) => {
       this.availableRuns = data;
       if (!this.runs) this.runs = data;
-      //use replace here instead of push so that user cannot go back to empty run state
-      this.$router.replace( { path: this.initialRoute, query: { runs: this.runs }});
+      // use replace here instead of push so that user cannot go back to empty run state
+      this.$router.replace( {path: this.initialRoute, query: {runs: this.runs}});
     });
   },
   watch: {
     runs: function(val) {
       if (this.runs) {
-          this.$router.push( {query: { runs: this.runs }});
+        this.$router.push( {query: {runs: this.runs}});
       }
     },
-    '$route' (to, from) { //this will get called when back button is hit that changes path or query
+    '$route'(to, from) { // this will get called when back button is hit that changes path or query
       this.runs = this.$route.query.runs;
       this.selected = this.$route.name;
-    }
+    },
   },
   methods: {
     handleItemClick: function(item) {
       this.selected = item.name;
-      this.$router.push( { path: item.url, query: { runs: this.runs }});
+      this.$router.push( {path: item.url, query: {runs: this.runs}});
     },
   },
 };
@@ -174,5 +174,4 @@ export default {
     overflow visible
 
 
-
 </style>

frontend/src/graph/ui/Config.vue

@@ -7,7 +7,7 @@
         @click="handleDownload"
         dark>
         <v-icon style="margin-right: 6px">file_download</v-icon>
-        Download image
+        {{ $t("lang.downloadImage") }}
       </v-btn>
 
       <v-btn
@@ -16,11 +16,11 @@
         @click="resetImage"
         dark>
         <v-icon style="margin-right: 6px">restore</v-icon>
-        Restore image
+        {{ $t("lang.restoreImage") }}
       </v-btn>
 
       <v-slider
-        label="Scale"
+        :label="$t('lang.scale')"
         max="1"
         min="0.1"
         step="0.1"
@@ -30,22 +30,22 @@
 
 
     <div class="node-info">
-      <h3>Node Info: </h3>
+      <h3>{{ $t("lang.nodeInfo") }}: </h3>
 
       <div v-if="curNode.nodeType === 'input'">
-        <div>Node Type: {{ curNode.nodeType }}</div>
-        <div>Name: {{ curNode.nodeInfo.name }}</div>
-        <div>Shape: {{ curNode.nodeInfo.shape }}</div>
-        <div>Data Type: {{ curNode.nodeInfo.data_type }}</div>
+        <div>{{ $t("lang.nodeType") }}: {{ curNode.nodeType }}</div>
+        <div>{{ $t("lang.nodeName") }}: {{ curNode.nodeInfo.name }}</div>
+        <div>{{ $t("lang.dataShape") }}: {{ curNode.nodeInfo.shape }}</div>
+        <div>{{ $t("lang.dataType") }}: {{ curNode.nodeInfo.data_type }}</div>
       </div>
       <div v-else-if="curNode.nodeType === 'output'">
-        <div>Node Type: {{ curNode.nodeType }}</div>
+        <div>{{ $t("lang.nodeType") }}: {{ curNode.nodeType }}</div>
       </div>
       <div v-else-if="curNode.nodeType === 'operator'">
-        <div>Node Type: {{ curNode.nodeType }}</div>
-        <div>Input: {{ curNode.nodeInfo.input }}</div>
-        <div>Operator Type: {{ curNode.nodeInfo.opType }}</div>
-        <div>Output: {{ curNode.nodeInfo.output }}</div>
+        <div>{{ $t("lang.nodeType") }}: {{ curNode.nodeType }}</div>
+        <div>{{ $t("lang.input") }}: {{ curNode.nodeInfo.input }}</div>
+        <div>{{ $t("lang.opType") }}: {{ curNode.nodeInfo.opType }}</div>
+        <div>{{ $t("lang.output") }}: {{ curNode.nodeInfo.output }}</div>
       </div>
       <div v-else/>
     </div>

frontend/src/high-dimensional/ui/Config.vue

@@ -2,8 +2,8 @@
   <div class="visual-dl-page-config-com">
 
     <v-text-field
-      label="Search"
-      hint="Search by label"
+      :label="$t('lang.search')"
+      :hint="$t('lang.searchByLabel')"
       v-model="config.searchText"
       dark
     />
@@ -11,24 +11,24 @@
 
     <v-checkbox
       class="visual-dl-page-config-checkbox"
-      label="Display All Labels"
+      :label="$t('lang.displayAllLabel')"
       v-model="config.displayWordLabel"
       dark/>
 
     <v-radio-group
-      label="Dimension"
+      :label="$t('lang.dimension')"
       v-model="config.dimension"
       dark>
       <v-radio
-        label="2D"
+        :label="$t('lang.2D')"
         value="2"/>
       <v-radio
-        label="3D"
+        :label="$t('lang.3D')"
         value="3"/>
     </v-radio-group>
 
     <v-radio-group
-      label="Reduction Method"
+      :label="$t('lang.reductionMethod')"
       v-model="config.reduction"
       dark>
       <v-radio
@@ -49,7 +49,7 @@
       dark
       block
     >
-      {{ config.running ? 'Running' : 'Stopped' }}
+      {{ config.running ? $t('lang.startRunning') : $t('lang.stopRunning') }}
     </v-btn>
   </div>
 </template>

frontend/src/index.js

 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue';
+import VueI18n from 'vue-i18n';
 import App from './App';
 import Vuetify from 'vuetify';
 import router from '@/router';
 Vue.config.productionTip = false;
 
+Vue.use(VueI18n);
+const DEFAULT_LANG = 'zh';
+const locales = {
+  zh: require('./assets/language/zh.json'),
+  en: require('./assets/language/en.json'),
+};
+
+const i18n = new VueI18n({
+  locale: DEFAULT_LANG,
+  messages: locales,
+});
+
 Vue.use(Vuetify, {
   theme: {
     primary: '#008c99',
@@ -20,6 +33,7 @@ Vue.use(Vuetify, {
 new Vue({
   el: '#root',
   router,
+  i18n: i18n,
   components: {App},
   template: '<App/>',
 });

frontend/src/metrics/Metrics.vue

@@ -8,15 +8,17 @@
           color="tag_background"
           class="visual-dl-tags-tab">
           <v-icon>search</v-icon>
-          <input type="search" v-model="config.groupNameReg"
+          <input
+            type="search"
+            v-model="config.groupNameReg"
             autocomplete="false"
-             placeholder="Search tags in RegExp"
+            :placeholder="$t('lang.searchTagInReg')"
             class="visual-dl-tags-search-input">
         </v-card>
 
         <ui-tags-tab
           :total="tagsListCount(allTagsMatchingList)"
-          :title="config.groupNameReg.trim().length == 0 ? 'All' : config.groupNameReg"
+          :title="config.groupNameReg.trim().length == 0 ? $t('lang.all') : config.groupNameReg"
           :active="selectedGroup === '' "
           @click="selectedGroup = '' "
         />
@@ -24,6 +26,7 @@
           v-for="item in groupedTags"
           :total="tagsListCount(item.tags)"
           :title="item.group"
+          :key="item.group"
           :active="item.group === selectedGroup"
           @click="selectedGroup = item.group"
         />

frontend/src/metrics/ui/Config.vue

@@ -2,7 +2,7 @@
   <div class="visual-dl-page-config-com">
     <v-checkbox
       class="visual-dl-page-config-checkbox"
-      label="Scalars"
+      :label="$t('lang.scalars')"
       v-model="config.scalar.display"
       :disabled="!config.scalar.enabled"
       dark/>
@@ -10,7 +10,7 @@
     <div class="visual-dl-page-component-block">
 
       <div class="visual-dl-page-control-block">
-          <span :class="'visual-dl-page-control-span' + (config.scalar.display ? '' : ' visual-dl-page-disabled-text')">Smoothing</span>
+        <span :class="'visual-dl-page-control-span' + (config.scalar.display ? '' : ' visual-dl-page-disabled-text')">{{ $t("lang.smoothing") }}</span>
         <v-slider
           :max="0.99"
           :min="0"
@@ -23,7 +23,7 @@
       </div>
 
       <div class="visual-dl-page-control-block">
-            <span :class="'visual-dl-page-control-span' + (config.scalar.display ? '' : ' visual-dl-page-disabled-text')">X-axis</span>
+        <span :class="'visual-dl-page-control-span' + (config.scalar.display ? '' : ' visual-dl-page-disabled-text')">{{ $t("lang.xAxis") }}</span>
         <v-select
           :items="horizontalItems"
           v-model="config.horizontal"
@@ -35,7 +35,7 @@
       </div>
 
       <div class="visual-dl-page-control-block">
-            <span :class="'visual-dl-page-control-span' + (config.scalar.display ? '' : ' visual-dl-page-disabled-text')">Tooltip sorting</span>
+        <span :class="'visual-dl-page-control-span' + (config.scalar.display ? '' : ' visual-dl-page-disabled-text')">{{ $t("lang.toolTipSorting") }}</span>
         <v-select
           :items="sortingMethodItems"
           v-model="config.sortingMethod"
@@ -48,7 +48,7 @@
 
       <v-checkbox
         class="visual-dl-page-outliers-checkbox"
-          label="Ignore outliers in chart scaling"
+        :label="$t('lang.ignoreOutliers')"
         v-model="config.outlier"
         dark
         :disabled="!config.scalar.display"/>
@@ -57,14 +57,14 @@
 
     <v-checkbox
       class="visual-dl-page-config-checkbox"
-      label="Histogram"
+      :label="$t('lang.histogram')"
       v-model="config.histogram.display"
       :disabled="!config.histogram.enabled"
       dark/>
 
     <div class="visual-dl-page-component-block">
       <div class="visual-dl-page-control-block">
-           <span :class="'visual-dl-page-control-span' + (config.histogram.display ? '' : ' visual-dl-page-disabled-text')">Mode</span>
+        <span :class="'visual-dl-page-control-span' + (config.histogram.display ? '' : ' visual-dl-page-disabled-text')">{{ $t("lang.mode") }}</span>
         <v-select
           :items="chartTypeItems"
           v-model="config.chartType"
@@ -85,7 +85,7 @@
       dark
       block
     >
-      {{ config.running ? 'Running' : 'Stopped' }}
+      {{ config.running ? $t("lang.startRunning") : $t("lang.stopRunning") }}
     </v-btn>
   </div>
 </template>
@@ -100,36 +100,59 @@ export default {
   },
   data() {
     return {
-      horizontalItems: [
+      smoothingValue: this.config.smoothing,
+      isDemo: process.env.NODE_ENV === 'demo',
+    };
+  },
+  computed: {
+    sortingMethodItems() {
+      return [
         {
-          text: 'Step',
-          value: 'step',
+          text: this.$i18n.t('lang.default'),
+          value: 'default',
         },
         {
-          text: 'Relative',
-          value: 'relative',
+          text: this.$i18n.t('lang.descending'),
+          value: 'descending',
         },
         {
-          text: 'Wall Time',
-          value: 'wall',
+          text: this.$i18n.t('lang.ascending'),
+          value: 'ascending',
+        },
+        {
+          text: this.$i18n.t('lang.nearest'),
+          value: 'nearest',
         },
-      ],
-      sortingMethodItems: [
-        'default', 'descending', 'ascending', 'nearest',
-      ],
-      chartTypeItems: [
+      ];
+    },
+    chartTypeItems() {
+      return [
         {
-          text: 'Overlay',
+          text: this.$i18n.t('lang.overlay'),
           value: 'overlay',
         },
         {
-          text: 'Offset',
+          text: this.$i18n.t('lang.offset'),
           value: 'offset',
         },
-      ],
-      smoothingValue: this.config.smoothing,
-      isDemo: process.env.NODE_ENV === 'demo',
-    };
+      ];
+    },
+    horizontalItems() {
+      return [
+        {
+          text: this.$i18n.t('lang.step'),
+          value: 'step',
+        },
+        {
+          text: this.$i18n.t('lang.relative'),
+          value: 'relative',
+        },
+        {
+          text: this.$i18n.t('lang.wall'),
+          value: 'wall',
+        },
+      ];
+    },
   },
   watch: {
     smoothingValue: _.debounce(

frontend/src/metrics/ui/ScalarChart.vue

@@ -61,7 +61,7 @@
         <v-list dense>
           <v-list-tile>
             <v-list-tile-content>
-              <v-list-tile-title>Download data in JSON</v-list-tile-title>
+              <v-list-tile-title>{{ $t("lang.downloadDataInJson") }}</v-list-tile-title>
             </v-list-tile-content>
             <v-list-tile-action>
               <v-icon>expand_more</v-icon>

frontend/src/samples/Samples.vue

@@ -8,15 +8,17 @@
           color="tag_background"
           class="visual-dl-tags-tab">
           <v-icon>search</v-icon>
-          <input type="search" v-model="config.groupNameReg"
+          <input
+            type="search"
+            v-model="config.groupNameReg"
             autocomplete="false"
-             placeholder="Search tags in RegExp"
+            :placeholder="$t('lang.searchTagInReg')"
             class="visual-dl-tags-search-input">
         </v-card>
 
         <ui-tags-tab
           :total="tagsListCount(allTagsMatchingList)"
-          :title="config.groupNameReg.trim().length == 0 ? 'All' : config.groupNameReg"
+          :title="config.groupNameReg.trim().length == 0 ? $t('lang.all') : config.groupNameReg"
           :active="selectedGroup === '' "
           @click="selectedGroup = '' "
         />
@@ -24,6 +26,7 @@
           v-for="item in groupedTags"
           :total="tagsListCount(item.tags)"
           :title="item.group"
+          :key="item.group"
           :active="item.group === selectedGroup"
           @click="selectedGroup = item.group"
         />
@@ -70,17 +73,17 @@ export default {
   },
   data() {
     return {
-      tagInfo: { image: {}, audio: {}, text: {} },
+      tagInfo: {image: {}, audio: {}, text: {}},
       config: {
         groupNameReg: '',
-        image: { enabled: false, display: false },
-        audio: { enabled: false, display: false },
-        text: { enabled: false, display: false },
+        image: {enabled: false, display: false},
+        audio: {enabled: false, display: false},
+        text: {enabled: false, display: false},
         isActualImageSize: false,
         runs: [],
         running: true,
       },
-      filteredTagsList: { image: {}, audio: {}, text: {} },
+      filteredTagsList: {image: {}, audio: {}, text: {}},
       selectedGroup: '',
     };
   },
@@ -107,7 +110,6 @@ export default {
       let list = {};
 
       Object.keys(this.tagInfo).forEach((type) => {
-
         let tags = this.tagInfo[type];
 
         let runs = Object.keys(tags);
@@ -133,7 +135,6 @@ export default {
       return list;
     },
     groupedTags() {
-
       let tagsList = this.tagsList || [];
 
       // put data in group
@@ -143,11 +144,10 @@ export default {
         let tagsForEachType = tagsList[type];
 
         tagsForEachType.forEach((item) => {
-
           let group = item.group;
 
           if (groupData[group] === undefined) {
-            groupData[group] = {}
+            groupData[group] = {};
           }
           if (groupData[group][type] === undefined) {
             groupData[group][type] = [];
@@ -207,9 +207,9 @@ export default {
     'config.groupNameReg': function(val) {
       this.throttledFilterTagsList();
     },
-    runs: function(val) {
+    'runs': function(val) {
       this.config.runs = val;
-    }
+    },
   },
   methods: {
     filterTagsList(groupNameReg) {

frontend/src/samples/ui/Config.vue

@@ -2,7 +2,7 @@
   <div class="visual-dl-page-config-com">
     <v-checkbox
       class="visual-dl-page-config-checkbox"
-      label="Image"
+      :label="$t('lang.image')"
       v-model="config.image.display"
       :disabled="!config.image.enabled"
       dark/>
@@ -10,7 +10,7 @@
     <div class="visual-dl-page-component-block">
       <v-checkbox
         class="visual-dl-page-subconfig-checkbox"
-          label="Show actual image size"
+        :label="$t('lang.showActualImageSize')"
         v-model="config.isActualImageSize"
         dark
         :disabled="!config.image.display"/>
@@ -18,14 +18,14 @@
 
     <v-checkbox
       class="visual-dl-page-config-checkbox"
-      label="Audio"
+      :label="$t('lang.audio')"
       v-model="config.audio.display"
       :disabled="!config.audio.enabled"
       dark/>
 
     <v-checkbox
       class="visual-dl-page-config-checkbox"
-      label="Text"
+      :label="$t('lang.text')"
       v-model="config.text.display"
       :disabled="!config.text.enabled"
       dark/>
@@ -39,7 +39,7 @@
       dark
       block
     >
-      {{ config.running ? 'Running' : 'Stopped' }}
+      {{ config.running ? $t('lang.startRunning') : $t('lang.stopRunning') }}
     </v-btn>
   </div>
 </template>

frontend/src/service.js

@@ -4,6 +4,8 @@ export const getPluginScalarsTags = makeService('/data/plugin/scalars/tags');
 
 export const getRuns = makeService('/data/runs');
 
+export const getLanguage = makeService('/data/language');
+
 export const getPluginScalarsScalars = makeService('/data/plugin/scalars/scalars');
 
 export const getPluginImagesTags = makeService('/data/plugin/images/tags');

visualdl/server/visualdl

@@ -48,6 +48,9 @@ error_sleep_time = 2  # seconds
 
 SERVER_DIR = os.path.join(visualdl.ROOT, 'server')
 
+support_language = ["en", "zh"]
+default_language = support_language[0]
+
 
 def try_call(function, *args, **kwargs):
     res = lib.retry(error_retry_times, function, error_sleep_time, *args,
@@ -98,6 +101,14 @@ def parse_args():
         default=20,
         help="memory cache timeout duration in seconds, default 20",
     )
+    parser.add_argument(
+        "-L",
+        "--language",
+        type=str,
+        default=default_language,
+        action="store",
+        help="set the default language")
+
     args = parser.parse_args()
     if not args.logdir:
         parser.print_help()
@@ -162,6 +173,15 @@ def runs():
     return Response(json.dumps(result), mimetype='application/json')
 
 
+@app.route('/data/language')
+def language():
+    data = args.language
+    if not data in support_language:
+        data = default_language
+    result = gen_result(0, "", data)
+    return Response(json.dumps(result), mimetype='application/json')
+
+
 @app.route("/data/plugin/scalars/tags")
 def scalar_tags():
     data = cache_get("/data/plugin/scalars/tags", try_call,