chore: use yarn workspaces to disassembly dependencies (#612)

* resolve server rename conflict

* feat: add running toggle stopped color

* feat: revalidate runs and tags when refreshing

* fix: make language optional

* fix: language before open_browser

* fix: scalar chart x axis value overflow

* fix: unnecessary param when cli stop

* build: customize navbar items when build

* chore: use yarn workspaces to disassembly dependencies

* fix: add missing test script

* build: update dependencies

* build: install yarn before build

* build: fix test script error

* build: remove NODE_ENV when build

* build: add wine to build windows app in linux

* build: disable app publish by default

* build: introduce lerna

* build: adapter new frontend

* build: exact version when publish

.travis.yml

@@ -63,14 +63,15 @@ jobs:
         - npm
         - yarn
         - cargo
-      env:
-        - PUBLIC_PATH="/app"
-        - API_URL="/api"
       before_install:
         - cd frontend
       install:
         - ./scripts/install.sh
+      before_script:
+        - source $HOME/.cargo/env
+        - export PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"
       script:
+        - yarn clean
         - yarn lint
         - yarn test
         - yarn build

frontend/.eslintrc.js

@@ -4,35 +4,60 @@ module.exports = {
         es6: true,
         node: true
     },
-    extends: [
-        'plugin:@typescript-eslint/recommended',
-        'plugin:react/recommended',
-        'prettier/@typescript-eslint',
-        'plugin:prettier/recommended'
-    ],
-    parser: '@typescript-eslint/parser',
+    extends: ['plugin:prettier/recommended'],
     parserOptions: {
-        ecmaFeatures: {
-            jsx: true
-        },
         ecmaVersion: 2018,
         sourceType: 'module'
     },
-    plugins: ['react-hooks'],
-    settings: {
-        react: {
-            version: 'detect'
-        }
-    },
-    ignorePatterns: ['node_modules/', 'dist/', 'out/', '_next', 'wasm/'],
+    ignorePatterns: ['node_modules/', 'dist/', 'output/', '_next'],
     rules: {
-        '@typescript-eslint/explicit-function-return-type': 'off',
-        '@typescript-eslint/no-explicit-any': 'error',
-        'react/prop-types': 'off',
-        'react/react-in-jsx-scope': 'off',
-        'react-hooks/rules-of-hooks': 'error',
-        'react-hooks/exhaustive-deps': 'warn',
         'no-console': 'warn',
         'sort-imports': 'error'
-    }
+    },
+    overrides: [
+        {
+            files: ['packages/cli/**/*', 'packages/mock/**/*', 'packages/server/**/*', 'packages/serverless/**/*'],
+            extends: [
+                'plugin:@typescript-eslint/recommended',
+                'prettier/@typescript-eslint',
+                'plugin:prettier/recommended'
+            ],
+            parser: '@typescript-eslint/parser',
+            rules: {
+                '@typescript-eslint/explicit-function-return-type': 'off',
+                '@typescript-eslint/no-explicit-any': 'error'
+            }
+        },
+        {
+            files: ['packages/core/**/*', 'packages/i18n/**/*'],
+            extends: [
+                'plugin:@typescript-eslint/recommended',
+                'plugin:react/recommended',
+                'prettier/@typescript-eslint',
+                'plugin:prettier/recommended'
+            ],
+            parser: '@typescript-eslint/parser',
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true
+                },
+                ecmaVersion: 2018,
+                sourceType: 'module'
+            },
+            plugins: ['react-hooks'],
+            settings: {
+                react: {
+                    version: 'detect'
+                }
+            },
+            rules: {
+                '@typescript-eslint/explicit-function-return-type': 'off',
+                '@typescript-eslint/no-explicit-any': 'error',
+                'react/prop-types': 'off',
+                'react/react-in-jsx-scope': 'off',
+                'react-hooks/rules-of-hooks': 'error',
+                'react-hooks/exhaustive-deps': 'warn'
+            }
+        }
+    ]
 };

frontend/.gitignore

 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
-/.pnp
+node_modules
+.pnp
 .pnp.js
 
 # testing
-/coverage
+coverage
 
 # next.js
-/.next/
-/serverless/
+.next
 
 # production
-/build
-/dist
+build
+dist
 
 # misc
 .DS_Store
@@ -25,6 +24,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+lerna-debug.log*
 
 # output
-/output/
+/output

frontend/.prettierignore

 dist
-serverless
+out
 wasm
 output

frontend/Dockerfile

-FROM node:12-alpine
-
-# Create app directory
-WORKDIR /usr/src/app
-
-ENV NODE_ENV production
-ENV PORT 8999
-ENV HOST 0.0.0.0
-
-COPY package.json .
-COPY yarn.lock .
-
-RUN yarn install --frozen-lockfile
-
-COPY dist dist
-COPY public public
-COPY ecosystem.config.js ecosystem.config.js
-
-EXPOSE 8999
-ENTRYPOINT ["yarn", "start"]

frontend/LICENSE

+../LICENSE
\ No newline at end of file

frontend/lerna.json

+{
+    "packages": [
+        "packages/*"
+    ],
+    "version": "2.0.0-beta.32",
+    "npmClient": "yarn",
+    "useWorkspaces": true,
+    "command": {
+        "version": {
+            "exact": true
+        },
+        "publish": {
+            "exact": true
+        }
+    }
+}

frontend/lint-staged.config.js

+const path = require('path');
+
 module.exports = {
-    '**/*.ts?(x)': () => ['tsc -p tsconfig.json --noEmit', 'tsc -p server/tsconfig.json --noEmit'],
+    '**/*.ts?(x)': async filenames =>
+        [
+            ...new Set(
+                filenames.map(
+                    filename => path.relative(path.join(process.cwd(), 'packages'), filename).split(path.sep)[0]
+                )
+            )
+        ].map(p => `tsc -p ${path.join(process.cwd(), 'packages', p, 'tsconfig.json')} --noEmit`),
     '**/*.(j|t)s?(x)': filenames => `eslint ${filenames.join(' ')}`
 };

frontend/package.json

 {
     "name": "visualdl",
+    "private": true,
+    "workspaces": [
+        "packages/*"
+    ],
     "version": "2.0.0-beta.26",
-    "title": "VisualDL",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
@@ -24,112 +27,31 @@
         "directory": "frontend"
     },
     "scripts": {
-        "dev": "cross-env NODE_ENV=development nodemon --watch server --ext ts --exec \"ts-node --project server/tsconfig.json\" server/index.ts",
-        "dev:wasm": "cross-env NODE_ENV=development WITH_WASM=1 nodemon --watch server --ext ts --exec \"ts-node --project server/tsconfig.json\" server/index.ts",
-        "build:next": "next build",
-        "build:server": "tsc --project server/tsconfig.json",
-        "build:wasm": "wasm-pack build --release --out-dir dist --out-name index wasm",
         "build": "./scripts/build.sh",
-        "export": "next export -o serverless",
-        "start": "pm2-runtime ecosystem.config.js",
-        "lint": "tsc -p tsconfig.json --noEmit && tsc -p server/tsconfig.json --noEmit && eslint --ext .tsx,.jsx.ts,.js --ignore-path .gitignore .",
+        "clean": "rimraf output */dist wasm/target",
+        "lint": "eslint --ext .tsx,.jsx.ts,.js --ignore-path .gitignore .",
         "format": "prettier --write \"**/*.ts\" \"**/*.tsx\" \"**/*.js\"",
-        "test": "echo \"Error: no test specified\" && exit 0",
-        "prepublishOnly": "yarn lint && yarn test && ./scripts/build.sh",
+        "test": "yarn workspaces run test",
+        "prepublishOnly": "yarn lint && yarn test && yarn build",
         "preversion": "yarn lint",
         "version": "yarn format && git add -A"
     },
-    "bin": "cli.js",
-    "files": [
-        "dist",
-        "serverless",
-        "public",
-        "wasm/dist",
-        "types",
-        "index.js",
-        "cli.js",
-        "ecosystem.config.js"
-    ],
-    "dependencies": {
-        "bignumber.js": "9.0.0",
-        "dagre-d3": "0.6.4",
-        "detect-node": "2.0.4",
-        "echarts": "4.7.0",
-        "echarts-gl": "1.1.1",
-        "express": "4.17.1",
-        "hoist-non-react-statics": "3.3.2",
-        "http-proxy-middleware": "1.0.3",
-        "i18next": "19.3.3",
-        "i18next-browser-languagedetector": "4.0.2",
-        "i18next-express-middleware": "1.9.1",
-        "i18next-node-fs-backend": "2.1.3",
-        "i18next-xhr-backend": "3.2.2",
-        "isomorphic-unfetch": "3.0.0",
-        "lodash": "4.17.15",
-        "moment": "2.24.0",
-        "next": "9.3.1",
-        "nprogress": "0.2.0",
-        "open": "7.0.3",
-        "ora": "4.0.3",
-        "path-match": "1.2.4",
-        "pm2": "4.2.3",
-        "polished": "3.5.1",
-        "prop-types": "15.7.2",
-        "query-string": "6.11.1",
-        "react": "16.13.1",
-        "react-dom": "16.13.1",
-        "react-hooks-worker": "0.9.0",
-        "react-i18next": "11.3.4",
-        "react-input-range": "1.3.0",
-        "react-is": "16.13.1",
-        "react-spinners": "0.8.1",
-        "save-svg-as-png": "1.4.17",
-        "styled-components": "5.0.1",
-        "swr": "0.1.18",
-        "url": "0.11.0",
-        "yargs": "15.3.1"
-    },
     "devDependencies": {
-        "@babel/core": "7.9.0",
-        "@types/d3": "5.7.2",
-        "@types/dagre-d3": "^0.4.39",
-        "@types/echarts": "4.4.3",
-        "@types/express": "4.17.3",
-        "@types/faker": "4.1.10",
-        "@types/lodash": "4.14.149",
-        "@types/node": "13.9.3",
-        "@types/nprogress": "0.2.0",
-        "@types/react": "16.9.25",
-        "@types/react-dom": "16.9.5",
-        "@types/styled-components": "5.0.1",
-        "@types/webpack": "4.41.8",
-        "@types/yargs": "15.0.4",
-        "@typescript-eslint/eslint-plugin": "2.25.0",
-        "@typescript-eslint/parser": "2.25.0",
-        "@wasm-tool/wasm-pack-plugin": "1.2.0",
-        "babel-plugin-emotion": "10.0.29",
-        "babel-plugin-styled-components": "1.10.7",
-        "babel-plugin-typescript-to-proptypes": "1.3.2",
-        "core-js": "3",
-        "cross-env": "7.0.2",
+        "@typescript-eslint/eslint-plugin": "2.27.0",
+        "@typescript-eslint/parser": "2.27.0",
         "eslint": "6.8.0",
         "eslint-config-prettier": "6.10.1",
         "eslint-plugin-prettier": "3.1.2",
         "eslint-plugin-react": "7.19.0",
-        "eslint-plugin-react-hooks": "2.5.1",
-        "faker": "4.1.0",
+        "eslint-plugin-react-hooks": "3.0.0",
         "husky": "4.2.3",
-        "lint-staged": "10.0.9",
-        "nodemon": "2.0.2",
-        "prettier": "2.0.2",
-        "ts-node": "8.8.1",
+        "lerna": "^3.20.2",
+        "lint-staged": "10.1.2",
+        "prettier": "2.0.4",
+        "rimraf": "3.0.2",
         "typescript": "3.8.3",
-        "worker-plugin": "4.0.2",
         "yarn": "1.22.4"
     },
-    "optionalDependencies": {
-        "wasm-pack": "0.9.1"
-    },
     "engines": {
         "node": ">=10",
         "npm": ">=6"

frontend/packages/app/LICENSE

+../../../LICENSE
\ No newline at end of file

frontend/packages/app/electron-builder.yml

+appId: org.paddlepaddle.visualdl
+productName: VisualDL
+files:
+    - 'index.js'
+    - 'resources/**/*'
+directories:
+    buildResources: ./resources
+mac:
+    category: public.app-category.developer-tools
+    darkModeSupport: false
+    hardenedRuntime: true
+    gatekeeperAssess: false
+    target:
+        - zip
+win:
+    target:
+        - nsis
+    verifyUpdateCodeSignature: false
+linux:
+    target:
+        - AppImage
+nsis:
+    perMachine: true
+publish: null

frontend/packages/app/index.js

+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path');
+const http = require('http');
+const {app, BrowserWindow, screen, nativeImage} = require('electron');
+const pm2 = require('pm2');
+
+const host = 'localhost';
+
+async function getPort() {
+    return new Promise((resolve, reject) => {
+        const server = http.createServer();
+        server.listen(0);
+        server.on('listening', () => {
+            resolve(server.address().port);
+            server.close();
+        });
+        server.on('error', reject);
+    });
+}
+
+async function createWindow() {
+    const {width, height} = screen.getPrimaryDisplay().workAreaSize;
+
+    const win = new BrowserWindow({
+        minWidth: 800,
+        minHeight: 600,
+        width,
+        height,
+        icon: nativeImage.createFromPath(path.join(__dirname, 'resources/icon.png')),
+        webPreferences: {
+            devTools: false,
+            nodeIntegration: true
+        },
+        show: false
+    });
+
+    win.once('ready-to-show', () => {
+        win.show();
+    });
+
+    return win;
+}
+
+function startServer({port, host}) {
+    return new Promise((resolve, reject) => {
+        pm2.connect(err => {
+            if (err) {
+                reject(err);
+            }
+            const app = require('@visualdl/server/ecosystem.config').apps[0];
+            pm2.start(
+                {
+                    ...app,
+                    instances: 1,
+                    env: {
+                        ...app.env,
+                        HOST: host,
+                        PORT: port,
+                        BACKEND: 'http://127.0.0.1:8040'
+                    }
+                },
+                err => {
+                    pm2.disconnect();
+                    if (err) {
+                        reject(err);
+                    } else {
+                        console.log(`Server listening at http://${host}:${port}`);
+                        resolve();
+                    }
+                }
+            );
+        });
+    });
+}
+
+function stopServer() {
+    return new Promise((resolve, reject) => {
+        pm2.connect(err => {
+            if (err) {
+                reject(err);
+            }
+            pm2.killDaemon(err => {
+                pm2.disconnect();
+                if (err) {
+                    reject(err);
+                } else {
+                    console.log('Server stopped');
+                    resolve();
+                }
+            });
+        });
+    });
+}
+
+app.on('ready', async () => {
+    let port = 0;
+    try {
+        port = await getPort();
+        await startServer({port, host});
+    } catch (e) {
+        console.error(e);
+        app.exit(1);
+        return;
+    }
+
+    try {
+        const win = await createWindow();
+        win.loadURL(`http://${host}:${port}`);
+    } catch (e) {
+        console.error(e);
+        app.exit(1);
+    }
+});
+
+// app.on('activate', async () => {
+//     if (BrowserWindow.getAllWindows().length === 0) {
+//         try {
+//             await createWindow();
+//         } catch (e) {
+//             console.error(e);
+//             app.exit(1);
+//         }
+//     }
+// });
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+    app.quit();
+    // if (process.platform !== 'darwin') {
+    //     app.quit();
+    // }
+});
+
+app.on('will-quit', async event => {
+    event.preventDefault();
+    try {
+        await stopServer();
+        app.exit(0);
+    } catch (e) {
+        console.error(e);
+        app.exit(1);
+    }
+});

frontend/packages/app/package.json

+{
+    "name": "@visualdl/app",
+    "version": "2.0.0-beta.32",
+    "private": true,
+    "description": "A platform to visualize the deep learning process and result.",
+    "keywords": [
+        "visualdl",
+        "paddlepaddle",
+        "visualization",
+        "deep learning"
+    ],
+    "homepage": "https://github.com/PaddlePaddle/VisualDL",
+    "bugs": {
+        "url": "https://github.com/PaddlePaddle/VisualDL/issues"
+    },
+    "license": "Apache-2.0",
+    "author": "PeterPanZH <littlepanzh@gmail.com> (https://github.com/PeterPanZH)",
+    "contributors": [
+        "Niandalu <littlepanzh@gmail.com> (https://github.com/Niandalu)"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/PaddlePaddle/VisualDL.git",
+        "directory": "frontend/app"
+    },
+    "scripts": {
+        "dev": "electron index.js",
+        "build": "electron-builder -mwl",
+        "test": "echo \"Error: no test specified\" && exit 0"
+    },
+    "dependencies": {
+        "@visualdl/server": "^2.0.0-beta.32",
+        "pm2": "4.2.3"
+    },
+    "devDependencies": {
+        "electron": "8.2.1",
+        "electron-builder": "22.4.1"
+    },
+    "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    }
+}

frontend/packages/app/resources/logo.svg

+<svg height="31" viewBox="0 0 50 31" width="50" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="evenodd" transform="translate(0 .0625)"><path d="m2.446115.0742695c-1.32588958 0-2.40434375 1.0740707-2.40434375 2.39411403s1.07845417 2.39382156 2.40434375 2.39382156 2.40434375-1.07377823 2.40434375-2.39382156-1.07845417-2.39411403-2.40434375-2.39411403" transform="translate(23.010417 .023203)"/><path d="m.23204292 23.3006269h3.46595625c.06922708 0 .13199166-.0401668.16068125-.1029517l10.45446458-22.89241762c.0531687-.1163081-.0322146-.24831243-.1605833-.24831243h-3.4659563c-.0691292 0-.1318937.04026424-.1605833.10295168l-10.45456252 22.89241757c-.05307083.1163081.0323125.2483125.16058334.2483125" transform="translate(24.0875 6.652667)"/><path d="m2.48757292.0742695c-1.32588959 0-2.40434375 1.0740707-2.40434375 2.39411403s1.07845416 2.39382156 2.40434375 2.39382156c1.32588958 0 2.40434375-1.07377823 2.40434375-2.39382156s-1.07845417-2.39411403-2.40434375-2.39411403" transform="translate(43.866667 .023203)"/><path d="m17.4206283.05694515h-3.4659562c-.0691292 0-.1318938.04026424-.1605834.10304917l-4.08253745 8.93954011h-8.13765833c-.1075125 0-.2050375.06278493-.24900209.16047204l-1.31139791 2.91052983c-.04513959.1002219.02849375.2135077.13884583.2135077h8.05922708l-4.87203958 10.6682704c-.05307083.1163081.0323125.2483125.16058333.2483125h3.46595625c.06922709 0 .13199167-.0401668.16058334-.1029517l10.45456253-22.89241762c.0531687-.1163081-.0322146-.24831243-.1605834-.24831243" transform="translate(0 6.652667)"/><path d="m29.3354319 12.1665001c-.3381063-2.99856519-2.8049209-5.35027016-5.8800917-5.45507419-.0279062-.00107241-.0550292.00302226-.0813687.00887179-.0140021-.0049721-.0284938-.00887179-.0441605-.00887179h-2.1002145c-.0522875 0-.0995813.03032005-.121123.07779872l-1.2130895 2.67576877c-.0396563.08754793.0247729.18679491.1211229.18679491h2.1414375c.4538437-.00653197.7861729.02330061 1.1568854.08062598 1.7253896.26693343 2.7979687 1.52672661 2.7732937 3.19686421-.0235 1.5783974-1.3395979 2.8354608-2.9250645 2.8354608h-7.669225c-.1306209 0-.2491.0760439-.3029542.1943018l-1.2729167 2.7896396c-.0615896.1347341.0376.2880892.1863354.2880892h8.9637813c3.7159375 0 6.6818333-3.1934519 6.2673521-6.8702698"/><path d="m50.1567746 12.1665001c-.3381063-2.99856519-2.8049209-5.35027016-5.8801896-5.45507419-.0279063-.00107241-.0549313.00302226-.0813688.00887179-.0139041-.0049721-.0283958-.00887179-.0440625-.00887179h-2.1003125c-.0521895 0-.0995812.03032005-.1211229.07779872l-1.2130896 2.67576877c-.0395583.08754793.024675.18679491.1212209.18679491h2.1413396c.4539416-.00653197.7862708.02330061 1.1569833.08062598 1.7252917.26693343 2.7978708 1.52672661 2.7731958 3.19686421-.0235 1.5783974-1.3395979 2.8354608-2.9250646 2.8354608h-7.669127c-.1306209 0-.2491.0760439-.3030521.1943018l-1.2729167 2.7896396c-.0614916.1347341.0376979.2880892.1863354.2880892h8.9638792c3.7158396 0 6.6817354-3.1934519 6.2673521-6.8702698"/></g></svg>
\ No newline at end of file

frontend/packages/cli/LICENSE

+../../../LICENSE
\ No newline at end of file

frontend/cli.js → frontend/packages/cli/index.ts

@@ -2,6 +2,13 @@
 
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-console */
+
+import ora, {Ora} from 'ora';
+import ecosystem from '@visualdl/server/ecosystem.config';
+import pm2 from 'pm2';
+
+const app = ecosystem.apps[0];
+
 const argv = require('yargs')
     .usage('Usage: $0 <command> [options]')
     .command('start', 'Start VisualDL server')
@@ -22,7 +29,6 @@ const argv = require('yargs')
     .describe('b', 'Backend API address')
     .boolean('open')
     .describe('open', 'Open browser when server is ready')
-    .demandOption(['b'])
     .help('h')
     .alias('h', 'help')
     .epilog('Visit https://github.com/PaddlePaddle/VisualDL for more information.').argv;
@@ -34,7 +40,7 @@ const exit = () => {
     process.exit(1);
 };
 
-const exitIfError = (err, exitCode = 1, spinner) => {
+const exitIfError = (err?: Error, exitCode = 1, spinner?: Ora) => {
     if (!err) {
         return;
     }
@@ -64,34 +70,28 @@ const banner = `
 
 `;
 
-const pm2 = require('pm2');
 pm2.connect(err => {
     exitIfError(err, 2);
 
     pm2.list((err, list) => {
         exitIfError(err, 2);
 
-        const ecosystem = require('./ecosystem.config');
-
-        const app = ecosystem.apps[0];
         const host = argv.host || 'localhost';
         const port = Number.parseInt(argv.port, 10) || 8999;
         const url = `http://${host}:${port}`;
 
-        const ora = require('ora');
-
         if (command === 'start') {
             if (list.find(item => item.name === app.name)) {
-                exitIfError('VisualDL server is already running', 1);
+                exitIfError(new Error('VisualDL server is already running'), 1);
             }
             const spinner = ora('Starting VisualDL server...').start();
             pm2.start(
                 {
                     ...app,
                     env: {
-                        NODE_ENV: 'production',
+                        ...app.env,
                         HOST: host,
-                        PORT: port,
+                        PORT: port + '',
                         BACKEND: argv.backend
                     }
                 },
@@ -110,12 +110,12 @@ pm2.connect(err => {
             );
         } else if (command === 'stop') {
             if (!list.find(item => item.name === app.name)) {
-                exitIfError('VisualDL server is not running', 1);
+                exitIfError(new Error('VisualDL server is not running'), 1);
             }
             const spinner = ora('Stopping VisualDL server...').start();
             pm2.delete(app.name, err => {
                 exitIfError(err, 2);
-                const end = err => {
+                const end = (err?: Error) => {
                     pm2.disconnect();
                     exitIfError(err, 2);
 

frontend/packages/cli/package.json

+{
+    "name": "@visualdl/cli",
+    "version": "2.0.0-beta.32",
+    "description": "A platform to visualize the deep learning process and result.",
+    "keywords": [
+        "visualdl",
+        "paddlepaddle",
+        "visualization",
+        "deep learning"
+    ],
+    "homepage": "https://github.com/PaddlePaddle/VisualDL",
+    "bugs": {
+        "url": "https://github.com/PaddlePaddle/VisualDL/issues"
+    },
+    "license": "Apache-2.0",
+    "author": "PeterPanZH <littlepanzh@gmail.com> (https://github.com/PeterPanZH)",
+    "contributors": [
+        "Niandalu <littlepanzh@gmail.com> (https://github.com/Niandalu)"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/PaddlePaddle/VisualDL.git",
+        "directory": "frontend/cli"
+    },
+    "scripts": {
+        "dev": "cross-env NODE_ENV=development ts-node index.ts",
+        "build": "tsc",
+        "start": "node index.js",
+        "test": "echo \"Error: no test specified\" && exit 0"
+    },
+    "bin": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "dependencies": {
+        "@visualdl/server": "^2.0.0-beta.32",
+        "open": "7.0.3",
+        "ora": "4.0.3",
+        "pm2": "4.2.3",
+        "yargs": "15.3.1"
+    },
+    "devDependencies": {
+        "@types/node": "13.11.0",
+        "@types/yargs": "15.0.4",
+        "cross-env": "7.0.2",
+        "ts-node": "8.8.2",
+        "typescript": "3.8.3"
+    },
+    "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    },
+    "gitHead": "d9641c770d9bc4037b2f1cb644fba198bd11a752"
+}

frontend/packages/cli/tsconfig.json

+{
+    "compilerOptions": {
+        "target": "es5",
+        "lib": [
+            "esnext",
+            "esnext.asynciterable",
+            "dom"
+        ],
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "declaration": true,
+        "skipLibCheck": true,
+        "outDir": "dist"
+    }
+}

frontend/packages/core/.gitignore

+out

frontend/packages/core/.npmignore

+dist
+out

frontend/packages/core/LICENSE

+../../../LICENSE
\ No newline at end of file

frontend/packages/core/build.ts

+/* eslint-disable no-console */
+
+import ora from 'ora';
+import path from 'path';
+import {spawn} from 'child_process';
+import {writeFileSync} from 'fs';
+
+const next = require.resolve('next/dist/bin/next');
+export const projectRoot = path.dirname(require.resolve('@visualdl/core'));
+
+export default function (action: string, ...args: string[]): Promise<number> {
+    return new Promise((resolve, reject) => {
+        const capitalizedAction = action.replace(/^./, w => w.toUpperCase());
+
+        const spinner = ora(`${capitalizedAction} in process...`).start();
+
+        const log = path.join(process.cwd(), `${action}.log`);
+        writeFileSync(log, '', {flag: 'w'});
+
+        const p = spawn(next, [action, ...args], {
+            cwd: projectRoot,
+            env: {
+                ...process.env,
+                NODE_ENV: 'production'
+            }
+        });
+
+        p.stdout.on('data', data => writeFileSync(log, data, {flag: 'a'}));
+        p.stderr.on('data', data => writeFileSync(log, data, {flag: 'a'}));
+
+        p.on('close', code => {
+            if (code) {
+                spinner.fail(`${capitalizedAction} failed!`);
+                console.error(`Please refer to ${log} for more detail.`);
+                reject(code);
+            } else {
+                spinner.succeed(`${capitalizedAction} complete!`);
+                resolve(code);
+            }
+        });
+    });
+}

frontend/components/HighDimensionalPage/HighDimensionalChart.tsx → frontend/packages/core/components/HighDimensionalPage/HighDimensionalChart.tsx

@@ -14,7 +14,7 @@ const height = rem(600);
 const divideWasm = () =>
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
-    import('~/wasm/dist').then(({divide}) => (params: DivideParams) =>
+    import('@visualdl/wasm').then(({divide}) => (params: DivideParams) =>
         (divide(params.points, params.labels, !!params.visibility, params.keyword ?? '') as unknown) as [
             Point[],
             Point[]

frontend/components/Navbar.tsx → frontend/packages/core/components/Navbar.tsx

@@ -11,10 +11,18 @@ import {
     transitionProps
 } from '~/utils/style';
 
+import intersection from 'lodash/intersection';
 import styled from 'styled-components';
 import {useRouter} from 'next/router';
 
-const navItems = ['scalars', 'samples', 'graphs', 'high-dimensional'];
+const buildNavItems = process.env.NAV_ITEMS;
+const allNavItems = ['scalars', 'samples', 'graphs', 'high-dimensional'];
+const navItems = buildNavItems
+    ? intersection(
+          buildNavItems.split(',').map(item => item.trim()),
+          allNavItems
+      )
+    : allNavItems;
 
 const Nav = styled.nav`
     background-color: ${navbarBackgroundColor};

frontend/components/ScalarsPage/ScalarChart.tsx → frontend/packages/core/components/ScalarsPage/ScalarChart.tsx

@@ -27,15 +27,11 @@ const width = em(430);
 const height = em(320);
 
 const smoothWasm = () =>
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore
-    import('~/wasm/dist').then(({transform}) => (params: TransformParams) =>
+    import('@visualdl/wasm').then(({transform}) => (params: TransformParams) =>
         (transform(params.datasets, params.smoothing) as unknown) as Dataset[]
     );
 const rangeWasm = () =>
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore
-    import('~/wasm/dist').then(({range}) => (params: RangeParams) =>
+    import('@visualdl/wasm').then(({range}) => (params: RangeParams) =>
         (range(params.datasets, params.outlier) as unknown) as Range
     );
 

frontend/packages/core/index.js

+module.exports = require('./dist');

frontend/packages/core/next.config.d.ts

+declare type NextEnv = {
+    API_URL: string;
+    DEFAULT_LANGUAGE: string;
+    LANGUAGES: string[];
+    LOCALE_PATH: string;
+};
+
+declare interface NextConfig {
+    env: NextEnv;
+}
+
+const nextConfig: NextConfig;
+
+export default nextConfig;
+
+export const env: NextEnv;

frontend/next.config.js → frontend/packages/core/next.config.js

@@ -31,6 +31,7 @@ module.exports = {
         DEFAULT_LANGUAGE,
         LOCALE_PATH,
         LANGUAGES,
+        NAV_ITEMS: process.env.NAV_ITEMS,
         PUBLIC_PATH: publicPath,
         API_URL: apiUrl
     },
@@ -44,11 +45,9 @@ module.exports = {
     experimental: {
         basePath: publicPath
     },
-    webpack: (config, {dev, webpack}) => {
+    webpack: config => {
         const WorkerPlugin = require('worker-plugin');
 
-        config.output.webassemblyModuleFilename = 'static/wasm/[modulehash].wasm';
-
         config.resolve = config.resolve || {};
         config.resolve.alias = config.resolve.alias || {};
         config.resolve.alias['~'] = path.resolve(__dirname);
@@ -66,19 +65,6 @@ module.exports = {
             })
         ];
 
-        if (!dev || !!process.env.WITH_WASM) {
-            const WasmPackPlugin = require('@wasm-tool/wasm-pack-plugin');
-            config.plugins.push(
-                new WasmPackPlugin({
-                    crateDirectory: path.resolve(__dirname, 'wasm'),
-                    outDir: 'dist',
-                    outName: 'index'
-                })
-            );
-        } else {
-            config.plugins.push(new webpack.IgnorePlugin(/^~\/wasm\//));
-        }
-
         return config;
     }
 };

frontend/packages/core/package.json

+{
+    "name": "@visualdl/core",
+    "version": "2.0.0-beta.32",
+    "title": "VisualDL",
+    "description": "A platform to visualize the deep learning process and result.",
+    "keywords": [
+        "visualdl",
+        "paddlepaddle",
+        "visualization",
+        "deep learning"
+    ],
+    "homepage": "https://github.com/PaddlePaddle/VisualDL",
+    "bugs": {
+        "url": "https://github.com/PaddlePaddle/VisualDL/issues"
+    },
+    "license": "Apache-2.0",
+    "author": "PeterPanZH <littlepanzh@gmail.com> (https://github.com/PeterPanZH)",
+    "contributors": [
+        "Niandalu <littlepanzh@gmail.com> (https://github.com/Niandalu)"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/PaddlePaddle/VisualDL.git",
+        "directory": "frontend/core"
+    },
+    "scripts": {
+        "dev": "next",
+        "build": "next build",
+        "export": "next export",
+        "start": "next start",
+        "test": "echo \"Error: no test specified\" && exit 0"
+    },
+    "dependencies": {
+        "@visualdl/i18n": "^2.0.0-beta.32",
+        "@visualdl/wasm": "^2.0.0-beta.32",
+        "bignumber.js": "9.0.0",
+        "dagre-d3": "0.6.4",
+        "echarts": "4.7.0",
+        "echarts-gl": "1.1.1",
+        "isomorphic-unfetch": "3.0.0",
+        "lodash": "4.17.15",
+        "moment": "2.24.0",
+        "next": "9.3.4",
+        "nprogress": "0.2.0",
+        "polished": "3.5.1",
+        "prop-types": "15.7.2",
+        "query-string": "6.12.0",
+        "react": "16.13.1",
+        "react-dom": "16.13.1",
+        "react-hooks-worker": "0.9.0",
+        "react-input-range": "1.3.0",
+        "react-is": "16.13.1",
+        "react-spinners": "0.8.1",
+        "save-svg-as-png": "1.4.17",
+        "styled-components": "5.1.0",
+        "swr": "0.2.0"
+    },
+    "devDependencies": {
+        "@babel/core": "7.9.0",
+        "@types/d3": "5.7.2",
+        "@types/dagre-d3": "0.4.39",
+        "@types/echarts": "4.4.5",
+        "@types/lodash": "4.14.149",
+        "@types/node": "13.11.0",
+        "@types/nprogress": "0.2.0",
+        "@types/react": "16.9.32",
+        "@types/react-dom": "16.9.6",
+        "@types/styled-components": "5.0.1",
+        "@types/webpack": "4.41.10",
+        "@visualdl/mock": "^2.0.0-beta.32",
+        "babel-plugin-emotion": "10.0.33",
+        "babel-plugin-styled-components": "1.10.7",
+        "babel-plugin-typescript-to-proptypes": "1.3.2",
+        "core-js": "3.6.4",
+        "cross-env": "7.0.2",
+        "css-loader": "3.5.1",
+        "ora": "4.0.3",
+        "typescript": "3.8.3",
+        "worker-plugin": "4.0.2"
+    },
+    "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    },
+    "gitHead": "d9641c770d9bc4037b2f1cb644fba198bd11a752"
+}

frontend/packages/core/pages/api/[...method].ts

+import mock from '@visualdl/mock';
+
+const delay = Number.parseInt(process.env.DELAY || '', 10);
+
+export default mock({delay: delay ? () => Math.random() * delay : 0});

frontend/pages/samples.tsx → frontend/packages/core/pages/samples.tsx

@@ -8,7 +8,7 @@ import AsideDivider from '~/components/AsideDivider';
 import ChartPage from '~/components/ChartPage';
 import Checkbox from '~/components/Checkbox';
 import Content from '~/components/Content';
-import Field from '~/components/Field';
+// import Field from '~/components/Field';
 // import Icon from '~/components/Icon';
 import Preloader from '~/components/Preloader';
 import RunSelect from '~/components/RunSelect';
@@ -16,8 +16,8 @@ import RunningToggle from '~/components/RunningToggle';
 import SampleChart from '~/components/SamplesPage/SampleChart';
 import TagFilter from '~/components/TagFilter';
 import Title from '~/components/Title';
-import {rem} from '~/utils/style';
-import styled from 'styled-components';
+// import {rem} from '~/utils/style';
+// import styled from 'styled-components';
 import useTagFilter from '~/hooks/useTagFilter';
 
 // const StyledIcon = styled(Icon)`
@@ -33,10 +33,6 @@ import useTagFilter from '~/hooks/useTagFilter';
 //     vertical-align: text-top;
 // `;
 
-const SubField = styled(Field)`
-    margin-left: ${rem(26)};
-`;
-
 type Item = {
     run: string;
     label: string;
@@ -81,11 +77,9 @@ const Samples: NextI18NextPage = () => {
                 </Checkbox>
             </Field> */}
             {showImage && (
-                <SubField>
-                    <Checkbox value={showActualSize} onChange={setShowActualSize}>
-                        {t('show-actual-size')}
-                    </Checkbox>
-                </SubField>
+                <Checkbox value={showActualSize} onChange={setShowActualSize}>
+                    {t('show-actual-size')}
+                </Checkbox>
             )}
             {/* <AsideDivider />
             <Field>

frontend/resource/scalars/index.ts → frontend/packages/core/resource/scalars/index.ts

@@ -4,7 +4,7 @@ import {ChartDataParams, RangeParams, TooltipData, TransformParams, xAxisMap} fr
 import {formatTime, quantile} from '~/utils';
 
 import BigNumber from 'bignumber.js';
-import {I18n} from '~/utils/i18next/types';
+import {I18n} from '@visualdl/i18n';
 import cloneDeep from 'lodash/cloneDeep';
 import compact from 'lodash/compact';
 import maxBy from 'lodash/maxBy';

frontend/packages/core/tsconfig.json

+{
+    "compilerOptions": {
+        "jsx": "preserve",
+        "target": "es2018",
+        "module": "esnext",
+        "moduleResolution": "node",
+        "lib": [
+            "esnext",
+            "esnext.asynciterable",
+            "dom"
+        ],
+        "esModuleInterop": true,
+        "allowJs": true,
+        "resolveJsonModule": true,
+        "sourceMap": true,
+        "strict": true,
+        "noEmit": true,
+        "baseUrl": ".",
+        "paths": {
+            "~/*": [
+                "./*"
+            ]
+        },
+        "types": [
+            "@types/node"
+        ],
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "isolatedModules": true
+    },
+    "exclude": [
+        "server",
+        "node_modules"
+    ],
+    "include": [
+        "next-env.d.ts",
+        "**/*.ts",
+        "**/*.tsx"
+    ]
+}

frontend/types/app-shim.d.ts → frontend/packages/core/types/app-shim.d.ts

@@ -52,8 +52,3 @@ declare module '*.module.sass' {
     const classes: {readonly [key: string]: string};
     export default classes;
 }
-
-declare module '*.wasm' {
-    const wasm: Record<string, Function>;
-    export default wasm;
-}

frontend/utils/chart.ts → frontend/packages/core/utils/chart.ts

@@ -147,7 +147,7 @@ export const yAxis = {
     axisLabel: {
         fontSize: 12,
         color: '#666',
-        formatter: (v: number) => Number.parseFloat(v.toPrecision(5))
+        formatter: (v: number) => (v < 0.0001 ? v.toExponential(1) : Number.parseFloat(v.toFixed(4)))
     },
     splitLine: {
         lineStyle: {

frontend/utils/i18n.ts → frontend/packages/core/utils/i18n.ts

 import {NextComponentType, NextPageContext} from 'next';
 
-import NextI18Next from './i18next';
+import NextI18Next from '@visualdl/i18n';
 import {env} from '../next.config';
 import moment from 'moment';
 
@@ -27,6 +27,10 @@ const nextI18Next = new NextI18Next({
     }, {} as Record<string, string>)
 });
 
+export default nextI18Next;
+
+export const {i18n, appWithTranslation, withTranslation, useTranslation, Router, Link, Trans} = nextI18Next;
+
 // from ~/node_modules/next/types/index.d.ts
 // https://gitlab.com/kachkaev/website-frontend/-/blob/master/src/i18n.ts#L64-68
 export type NextI18NextPage<P = {}, IP = P> = NextComponentType<
@@ -34,7 +38,3 @@ export type NextI18NextPage<P = {}, IP = P> = NextComponentType<
     IP & {namespacesRequired: string[]},
     P & {namespacesRequired: string[]}
 >;
-
-export default nextI18Next;
-
-export const {i18n, appWithTranslation, withTranslation, useTranslation, Router, Link, Trans} = nextI18Next;

frontend/packages/i18n/LICENSE

+../../../LICENSE
\ No newline at end of file

frontend/packages/i18n/middleware.d.ts

+import {Handler} from 'express';
+import NextI18Next from './types';
+
+declare function nextI18NextMiddleware(nexti18next: NextI18Next): Handler[];
+
+export default nextI18NextMiddleware;

frontend/packages/i18n/middleware.js

+module.exports = require('./dist/middlewares/next-i18next-middleware');

frontend/packages/i18n/package.json

+{
+    "name": "@visualdl/i18n",
+    "version": "2.0.0-beta.32",
+    "description": "A platform to visualize the deep learning process and result.",
+    "keywords": [
+        "visualdl",
+        "paddlepaddle",
+        "visualization",
+        "deep learning"
+    ],
+    "homepage": "https://github.com/PaddlePaddle/VisualDL",
+    "bugs": {
+        "url": "https://github.com/PaddlePaddle/VisualDL/issues"
+    },
+    "license": "Apache-2.0",
+    "author": "PeterPanZH <littlepanzh@gmail.com> (https://github.com/PeterPanZH)",
+    "contributors": [
+        "Niandalu <littlepanzh@gmail.com> (https://github.com/Niandalu)"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/PaddlePaddle/VisualDL.git",
+        "directory": "frontend/i18n"
+    },
+    "scripts": {
+        "build": "tsc",
+        "test": "echo \"Error: no test specified\" && exit 0"
+    },
+    "files": [
+        "dist",
+        "types.d.ts",
+        "middleware.js",
+        "middleware.d.ts"
+    ],
+    "main": "dist/index.js",
+    "types": "types.d.ts",
+    "dependencies": {
+        "detect-node": "2.0.4",
+        "hoist-non-react-statics": "3.3.2",
+        "i18next": "19.3.4",
+        "i18next-browser-languagedetector": "4.0.2",
+        "i18next-express-middleware": "1.9.1",
+        "i18next-node-fs-backend": "2.1.3",
+        "i18next-xhr-backend": "3.2.2",
+        "path-match": "1.2.4",
+        "prop-types": "15.7.2",
+        "react-i18next": "11.3.4",
+        "url": "0.11.0"
+    },
+    "devDependencies": {
+        "@types/express": "4.17.4",
+        "@types/hoist-non-react-statics": "3.3.1",
+        "@types/node": "13.11.0",
+        "@types/react": "16.9.32",
+        "@types/react-dom": "16.9.6",
+        "typescript": "3.8.3"
+    },
+    "peerDependencies": {
+        "express": "^4.17.1",
+        "next": "^9.3.4",
+        "react": "^16.13.1",
+        "react-dom": "^16.13.1"
+    },
+    "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    },
+    "gitHead": "d9641c770d9bc4037b2f1cb644fba198bd11a752"
+}

frontend/utils/i18next/components/Link.tsx → frontend/packages/i18n/src/components/Link.tsx

@@ -18,7 +18,7 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {Config, I18n} from '../types';
+import {Config, I18n} from '../../types';
 import NextLink, {LinkProps} from 'next/link';
 import {lngPathCorrector, subpathIsRequired} from '../utils';
 

frontend/utils/i18next/config/create-config.ts → frontend/packages/i18n/src/config/create-config.ts

@@ -2,7 +2,7 @@
 
 import {consoleMessage, isServer} from '../utils';
 
-import {Config} from '../types';
+import {Config} from '../../types';
 import {defaultConfig} from './default-config';
 
 const deepMergeObjects = ['backend', 'detection'];
@@ -33,7 +33,8 @@ export const createConfig = (userConfig: Config): Config => {
     if (isServer()) {
         const fs = eval("require('fs')");
         const path = require('path'); // eslint-disable-line @typescript-eslint/no-var-requires
-        const projectRoot = process.cwd();
+
+        const projectRoot = combinedConfig.projectRoot || process.cwd();
         let serverLocalePath = localePath;
 
         /*

frontend/utils/i18next/create-i18next-client.ts → frontend/packages/i18n/src/create-i18next-client.ts

-import {Config, InitPromise} from './types';
+import {Config, InitPromise} from '../types';
 
 import I18nextBrowserLanguageDetector from 'i18next-browser-languagedetector';
 import i18n from 'i18next';

frontend/utils/i18next/hocs/app-with-translation.tsx → frontend/packages/i18n/src/hocs/app-with-translation.tsx

@@ -4,7 +4,7 @@ import {I18nextProvider, withSSR} from 'react-i18next';
 import {isServer, lngFromReq, lngPathCorrector, lngsToLoad} from '../utils';
 
 import {AppContext} from 'next/app';
-import {I18n} from '../types';
+import {I18n} from '../../types';
 import NextI18Next from '../index';
 import {NextPageContext} from 'next';
 import {NextStaticProvider} from '../components';

frontend/utils/i18next/hocs/with-internals.tsx → frontend/packages/i18n/src/hocs/with-internals.tsx

 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {NextI18NextInternals} from '../types';
+import {NextI18NextInternals} from '../../types';
 import React from 'react';
 
 export const withInternals = (WrappedComponent: any, config: NextI18NextInternals) => {

frontend/utils/i18next/index.ts → frontend/packages/i18n/src/index.ts

@@ -9,7 +9,7 @@ import {
     Trans as TransType,
     UseTranslation,
     WithTranslationHocType
-} from './types';
+} from '../types';
 import {Trans, useTranslation, withTranslation} from 'react-i18next';
 import {appWithTranslation, withInternals} from './hocs';
 

frontend/utils/i18next/utils/console-message.ts → frontend/packages/i18n/src/utils/console-message.ts

 /* eslint-disable no-console */
 
-import {Config} from '../types';
+import {Config} from '../../types';
 import NextI18Next from '../index';
 
 type MessageType = 'error' | 'info' | 'warn';

frontend/utils/i18next/utils/lng-from-req.ts → frontend/packages/i18n/src/utils/lng-from-req.ts

-import {Config} from '../types';
+import {Config} from '../../types';
 import {Request} from 'express';
 
 export const lngFromReq = (req: Request) => {

frontend/utils/i18next/utils/lng-path-corrector.ts → frontend/packages/i18n/src/utils/lng-path-corrector.ts

@@ -3,7 +3,7 @@
 import {format as formatUrl, parse as parseUrl} from 'url';
 import {removeSubpath, subpathFromLng, subpathIsPresent, subpathIsRequired} from './index';
 
-import {Config} from '../types';
+import {Config} from '../../types';
 
 const parseAs = (originalAs: string | undefined, href: any) => {
     const asType = typeof originalAs;

frontend/utils/i18next/utils/subpath-from-lng.ts → frontend/packages/i18n/src/utils/subpath-from-lng.ts

-import {Config} from '../types';
+import {Config} from '../../types';
 
 export const subpathFromLng = (config: Config, language: string | null) => {
     if (typeof language !== 'string') {

frontend/utils/i18next/utils/subpath-is-required.ts → frontend/packages/i18n/src/utils/subpath-is-required.ts

-import {Config} from '../types';
+import {Config} from '../../types';
 
 export const subpathIsRequired = (config: Config, language: string) =>
     typeof config.localeSubpaths?.[language] === 'string';

frontend/packages/i18n/tsconfig.json

+{
+    "compilerOptions": {
+        "jsx": "react",
+        "target": "es5",
+        "lib": [
+            "esnext",
+            "esnext.asynciterable",
+            "dom"
+        ],
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "allowSyntheticDefaultImports": true,
+        "outDir": "dist"
+    },
+    "include": [
+        "src/**/*"
+    ]
+}

frontend/utils/i18next/types.ts → frontend/packages/i18n/types.d.ts

 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+declare module 'detect-node';
+declare module 'path-match';
+
 import * as React from 'react';
 
 import {TFunction as I18NextTFunction, InitOptions, i18n} from 'i18next';
@@ -14,6 +17,7 @@ import {LinkProps} from 'next/link';
 import {SingletonRouter} from 'next/router';
 
 export type InitConfig = {
+    projectRoot?: string;
     browserLanguageDetection?: boolean;
     serverLanguageDetection?: boolean;
     strictMode?: boolean;

frontend/packages/mock/LICENSE

+../../../LICENSE
\ No newline at end of file

frontend/mock/graphs/graph.ts → frontend/packages/mock/data/graphs/graph.ts

+/* eslint-disable @typescript-eslint/camelcase */
+
 export default {
     status: 0,
     msg: '',

frontend/utils/mock.ts → frontend/packages/mock/index.ts

-import path from 'path';
-import faker from 'faker';
 import {Request, Response} from 'express';
 
+import faker from 'faker';
+import path from 'path';
+
 const sleep = (time: number) => {
     return new Promise(resolve => setTimeout(resolve, time));
 };
 
 export type Options = {
-    path: string;
+    path?: string;
     delay?: number | ((method: string) => number);
 };
 
 export default (options: Options) => {
     return async (req: Request, res: Response) => {
-        const method = req.path.replace(/^\//, '');
+        let method = req.path;
+        if (!method) {
+            method = Array.isArray(req.query.method) ? req.query.method.join('/') : req.query.method;
+        } else {
+            method = method.replace(/^\//, '');
+        }
 
         if (!method) {
             res.status(404).send({});
@@ -21,7 +27,7 @@ export default (options: Options) => {
         }
 
         try {
-            let {default: mock} = await import(path.resolve(options.path, method));
+            let {default: mock} = await import(path.resolve(options.path || path.join(__dirname, 'data'), method));
 
             if ('function' === typeof mock) {
                 mock = await mock(req, res);

frontend/packages/mock/package.json

+{
+    "name": "@visualdl/mock",
+    "version": "2.0.0-beta.32",
+    "description": "A platform to visualize the deep learning process and result.",
+    "keywords": [
+        "visualdl",
+        "paddlepaddle",
+        "visualization",
+        "deep learning"
+    ],
+    "homepage": "https://github.com/PaddlePaddle/VisualDL",
+    "bugs": {
+        "url": "https://github.com/PaddlePaddle/VisualDL/issues"
+    },
+    "license": "Apache-2.0",
+    "author": "PeterPanZH <littlepanzh@gmail.com> (https://github.com/PeterPanZH)",
+    "contributors": [
+        "Niandalu <littlepanzh@gmail.com> (https://github.com/Niandalu)"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/PaddlePaddle/VisualDL.git",
+        "directory": "frontend/mock"
+    },
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "tsc",
+        "test": "echo \"Error: no test specified\" && exit 0"
+    },
+    "dependencies": {
+        "faker": "4.1.0",
+        "isomorphic-unfetch": "3.0.0"
+    },
+    "devDependencies": {
+        "@types/express": "4.17.4",
+        "@types/faker": "4.1.11",
+        "@types/node": "13.11.0",
+        "typescript": "3.8.3"
+    },
+    "peerDependencies": {
+        "express": "^4.17.1"
+    },
+    "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    },
+    "gitHead": "d9641c770d9bc4037b2f1cb644fba198bd11a752"
+}

frontend/packages/mock/tsconfig.json

+{
+    "compilerOptions": {
+        "target": "es5",
+        "lib": [
+            "esnext",
+            "esnext.asynciterable",
+            "dom"
+        ],
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "declaration": true,
+        "skipLibCheck": true,
+        "outDir": "dist"
+    }
+}

frontend/packages/server/.gitignore

+*.log

frontend/packages/server/LICENSE

+../../../LICENSE
\ No newline at end of file

frontend/packages/server/build.ts

+/* eslint-disable no-console */
+
+import builder, {projectRoot} from '@visualdl/core/build';
+import {cp, mkdir, rm} from 'shelljs';
+
+import config from './webpack.config';
+import path from 'path';
+import webpack from 'webpack';
+
+const dist = path.resolve(__dirname, 'dist');
+console.log('Building server');
+console.log(`Source: ${projectRoot}`);
+console.log(`Destination: ${dist}`);
+
+async function start() {
+    try {
+        await builder('build');
+        rm('-rf', dist);
+        mkdir('-p', dist);
+        cp(
+            '-Rf',
+            ['dist', 'pages', 'public', 'next.config.js', 'package.json'].map(file => path.join(projectRoot, file)),
+            dist
+        );
+    } catch (e) {
+        process.exit(e);
+    }
+    console.log('Webpack building...');
+    const compiler = webpack(config as webpack.Configuration);
+    compiler.run(err => {
+        if (err) {
+            console.error(err);
+            process.exit(1);
+        }
+    });
+}
+
+start();

frontend/packages/server/ecosystem.config.d.ts

+declare type App = {
+    name: string;
+    script: string;
+    cwd: string;
+    args: string;
+    instances: number;
+    autorestart: boolean;
+    watch: boolean;
+    exec_mode: string;
+    max_memory_restart: string;
+    wait_ready: boolean;
+    env: {
+        [key: string]: string;
+        NODE_ENV: string;
+    };
+};
+
+declare const ecosystem: {
+    apps: App[];
+};
+
+export default ecosystem;

frontend/ecosystem.config.js → frontend/packages/server/ecosystem.config.js

@@ -5,8 +5,8 @@ module.exports = {
     apps: [
         {
             name: 'visualdl',
-            script: 'dist/server/index.js',
-            cwd: __dirname,
+            script: 'index.js',
+            cwd: require('path').resolve(__dirname, './dist'),
             args: '',
             instances: 'max',
             autorestart: true,

frontend/server/index.ts → frontend/packages/server/index.ts

-#!/usr/bin/env node
-
 /* eslint-disable no-console */
 
-import config from '../next.config';
+import config from '@visualdl/core/next.config';
 import express from 'express';
 import next from 'next';
-import {nextI18NextMiddleware} from '../utils/i18next/middlewares';
-import nextI18next from '../utils/i18n';
-import path from 'path';
+import nextI18Next from '@visualdl/core/utils/i18n';
+import nextI18NextMiddleware from '@visualdl/i18n/middleware';
 import {setConfig} from 'next/config';
 
 const isDev = process.env.NODE_ENV !== 'production';
@@ -15,9 +12,9 @@ const isDev = process.env.NODE_ENV !== 'production';
 setConfig(config);
 
 const host = process.env.HOST || 'localhost';
-const port = Number.parseInt(process.env.PORT, 10) || 8999;
+const port = Number.parseInt(process.env.PORT || '', 10) || 8999;
 const backend = process.env.BACKEND;
-const delay = Number.parseInt(process.env.DELAY, 10);
+const delay = Number.parseInt(process.env.DELAY || '', 10);
 
 const server = express();
 const app = next({dev: isDev, conf: config});
@@ -30,15 +27,12 @@ async function start() {
         const {createProxyMiddleware} = await import('http-proxy-middleware');
         server.use(config.env.API_URL, createProxyMiddleware({target: backend, changeOrigin: true}));
     } else if (isDev) {
-        const {default: mock} = await import('../utils/mock');
-        server.use(
-            config.env.API_URL,
-            mock({path: path.resolve(__dirname, '../mock'), delay: delay ? () => Math.random() * delay : 0})
-        );
+        const {default: mock} = await import('@visualdl/mock');
+        server.use(config.env.API_URL, mock({delay: delay ? () => Math.random() * delay : 0}));
     }
 
-    await nextI18next.initPromise;
-    server.use(nextI18NextMiddleware(nextI18next));
+    await nextI18Next.initPromise;
+    server.use(nextI18NextMiddleware(nextI18Next));
 
     server.get(/\.wasm/, (_req, res, next) => {
         res.type('application/wasm');
@@ -51,7 +45,7 @@ async function start() {
         process.send?.('ready');
         console.log(`> Ready on http://${host}:${port}`);
         process.on('SIGINT', () => {
-            s.close((err: Error) => {
+            s.close((err: Error | undefined) => {
                 if (err) {
                     throw err;
                 }

frontend/packages/server/package.json

+{
+    "name": "@visualdl/server",
+    "version": "2.0.0-beta.32",
+    "description": "A platform to visualize the deep learning process and result.",
+    "keywords": [
+        "visualdl",
+        "paddlepaddle",
+        "visualization",
+        "deep learning"
+    ],
+    "homepage": "https://github.com/PaddlePaddle/VisualDL",
+    "bugs": {
+        "url": "https://github.com/PaddlePaddle/VisualDL/issues"
+    },
+    "license": "Apache-2.0",
+    "author": "PeterPanZH <littlepanzh@gmail.com> (https://github.com/PeterPanZH)",
+    "contributors": [
+        "Niandalu <littlepanzh@gmail.com> (https://github.com/Niandalu)"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/PaddlePaddle/VisualDL.git",
+        "directory": "frontend/server"
+    },
+    "scripts": {
+        "dev": "cross-env NODE_ENV=development nodemon --watch . --ext ts --exec \"ts-node index.ts\"",
+        "dev:wasm": "cross-env WITH_WASM=1 yarn dev",
+        "build": "cross-env API_URL=/api ts-node build.ts",
+        "start": "pm2-runtime ecosystem.config.js",
+        "test": "echo \"Error: no test specified\" && exit 0"
+    },
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist",
+        "ecosystem.config.js",
+        "ecosystem.config.d.ts"
+    ],
+    "dependencies": {
+        "@visualdl/core": "^2.0.0-beta.32",
+        "@visualdl/i18n": "^2.0.0-beta.32",
+        "express": "4.17.1",
+        "http-proxy-middleware": "1.0.3",
+        "next": "9.3.4",
+        "pm2": "4.2.3"
+    },
+    "devDependencies": {
+        "@types/express": "4.17.4",
+        "@types/node": "13.11.0",
+        "@types/shelljs": "0.8.7",
+        "@visualdl/mock": "^2.0.0-beta.32",
+        "cross-env": "7.0.2",
+        "nodemon": "2.0.2",
+        "shelljs": "0.8.3",
+        "ts-loader": "6.2.2",
+        "ts-node": "8.8.2",
+        "typescript": "3.8.3",
+        "webpack": "4.42.1",
+        "webpack-cli": "3.3.11"
+    },
+    "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    },
+    "gitHead": "d9641c770d9bc4037b2f1cb644fba198bd11a752"
+}

frontend/server/tsconfig.json → frontend/packages/server/tsconfig.json

 {
-    "extend": "../tsconfig.json",
     "compilerOptions": {
-        "jsx": "react",
         "module": "commonjs",
         "target": "ES2018",
+        "skipLibCheck": true,
         "esModuleInterop": true,
-        "typeRoots": ["../types"],
-        "outDir": "../dist"
+        "declaration": true,
+        "outDir": "dist"
     },
-    "include": [
-        "**/*"
+    "files": [
+        "index.ts"
     ]
 }

frontend/packages/server/webpack.config.js

+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const path = require('path');
+
+// TODO: add dev server
+module.exports = {
+    mode: process.env.NODE_ENV === 'development' ? 'development' : 'production',
+    entry: './index.ts',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'index.js'
+    },
+    target: 'node',
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                use: require.resolve('ts-loader')
+            }
+        ]
+    },
+    resolve: {
+        extensions: ['.wasm', '.ts', '.mjs', '.js', '.json']
+    },
+    externals: (context, request, callback) => {
+        if (/^\./.test(request)) {
+            return callback();
+        }
+        if (/^@visualdl\/core/.test(request)) {
+            return callback();
+        }
+        callback(null, 'commonjs ' + request);
+    }
+};

frontend/packages/serverless/.gitignore

+*.log

frontend/packages/serverless/LICENSE

+../../../LICENSE
\ No newline at end of file

frontend/packages/serverless/build.ts

+/* eslint-disable no-console */
+
+import builder, {projectRoot} from '@visualdl/core/build';
+
+import path from 'path';
+import rimraf from 'rimraf';
+
+const dist = path.join(__dirname, 'dist');
+console.log('Building serverless');
+console.log(`Source: ${projectRoot}`);
+console.log(`Destination: ${dist}`);
+
+function clean(): Promise<void> {
+    return new Promise((resolve, reject) => {
+        rimraf(dist, err => {
+            if (err) {
+                reject(err);
+            } else {
+                resolve();
+            }
+        });
+    });
+}
+
+async function start() {
+    try {
+        await clean();
+        await builder('build');
+        await builder('export', '-o', dist);
+    } catch (e) {
+        process.exit(e);
+    }
+    process.exit(0);
+}
+
+start();

frontend/packages/serverless/package.json

+{
+    "name": "@visualdl/serverless",
+    "version": "2.0.0-beta.32",
+    "description": "A platform to visualize the deep learning process and result.",
+    "keywords": [
+        "visualdl",
+        "paddlepaddle",
+        "visualization",
+        "deep learning"
+    ],
+    "homepage": "https://github.com/PaddlePaddle/VisualDL",
+    "bugs": {
+        "url": "https://github.com/PaddlePaddle/VisualDL/issues"
+    },
+    "license": "Apache-2.0",
+    "author": "PeterPanZH <littlepanzh@gmail.com> (https://github.com/PeterPanZH)",
+    "contributors": [
+        "Niandalu <littlepanzh@gmail.com> (https://github.com/Niandalu)"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/PaddlePaddle/VisualDL.git",
+        "directory": "frontend/serverless"
+    },
+    "main": "dist/index.html",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "cross-env PUBLIC_PATH=/app API_URL=/api ts-node build.ts",
+        "test": "echo \"Error: no test specified\" && exit 0"
+    },
+    "devDependencies": {
+        "@types/node": "13.11.0",
+        "@types/rimraf": "3.0.0",
+        "@visualdl/core": "^2.0.0-beta.32",
+        "cross-env": "7.0.2",
+        "rimraf": "3.0.2",
+        "ts-node": "8.8.2",
+        "typescript": "3.8.3"
+    },
+    "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    },
+    "gitHead": "d9641c770d9bc4037b2f1cb644fba198bd11a752"
+}

frontend/packages/serverless/tsconfig.json

+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "ES2018",
+        "skipLibCheck": true,
+        "esModuleInterop": true
+    },
+    "files": [
+        "build.ts"
+    ]
+}

frontend/wasm/.gitignore → frontend/packages/wasm/.gitignore

 target
-dist

frontend/packages/wasm/LICENSE

+../../../LICENSE
\ No newline at end of file

frontend/packages/wasm/README.md

+../../README.md
\ No newline at end of file

frontend/packages/wasm/package.json

+{
+    "name": "@visualdl/wasm",
+    "version": "2.0.0-beta.32",
+    "title": "VisualDL",
+    "description": "A platform to visualize the deep learning process and result.",
+    "keywords": [
+        "visualdl",
+        "paddlepaddle",
+        "visualization",
+        "deep learning"
+    ],
+    "homepage": "https://github.com/PaddlePaddle/VisualDL",
+    "bugs": {
+        "url": "https://github.com/PaddlePaddle/VisualDL/issues"
+    },
+    "license": "Apache-2.0",
+    "author": "PeterPanZH <littlepanzh@gmail.com> (https://github.com/PeterPanZH)",
+    "contributors": [
+        "Niandalu <littlepanzh@gmail.com> (https://github.com/Niandalu)"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/PaddlePaddle/VisualDL.git",
+        "directory": "frontend/wasm"
+    },
+    "files": [
+        "dist/index_bg.wasm",
+        "dist/index.js",
+        "dist/index.d.ts"
+    ],
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "build": "wasm-pack build --release --out-dir dist --out-name index .",
+        "test": "echo \"Error: no test specified\" && exit 0"
+    },
+    "devDependencies": {
+        "wasm-pack": "0.9.1"
+    },
+    "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged"
+        }
+    },
+    "gitHead": "d9641c770d9bc4037b2f1cb644fba198bd11a752"
+}

frontend/scripts/build.sh

@@ -2,54 +2,23 @@
 
 set -e
 
-if [ -f "$HOME/.cargo/env" ]; then
-    source $HOME/.cargo/env
-fi
-
 WORKING_PATH=`pwd`
-SERVER_DIR="dist"
+SERVER_DIR="packages/server/dist"
 SERVER_DIR_PATH="$WORKING_PATH/$SERVER_DIR"
-SERVERLESS_DIR="serverless"
+SERVERLESS_DIR="packages/serverless/dist"
 SERVERLESS_DIR_PATH="$WORKING_PATH/$SERVERLESS_DIR"
 OUTPUT="output"
 OUTPUT_PATH="$WORKING_PATH/$OUTPUT"
 
-build_server() {
-    # generate dist
-    rm -rf $SERVER_DIR_PATH
-    mkdir -p $SERVER_DIR_PATH
-
-    # next build
-    yarn build:next
-
-    # server build
-    yarn build:server
-
-    # move static files
-    cp next.config.js $SERVER_DIR_PATH
-    cp package.json $SERVER_DIR_PATH
-    cp -r public $SERVER_DIR_PATH
-}
-
-build_serverless() {
-    build_server
-
-    # generate dist
-    rm -rf $SERVERLESS_DIR_PATH
-    mkdir -p $SERVERLESS_DIR_PATH
-
-    # next export
-    yarn export
-}
+# build
+npx lerna run build
 
 # generate output
 rm -rf $OUTPUT_PATH
 mkdir -p $OUTPUT_PATH
 
-# package serverless files
-PUBLIC_PATH="/app" API_URL="/api" build_serverless
-(cd $SERVERLESS_DIR_PATH && tar zcf $OUTPUT_PATH/serverless.tar.gz .)
-
 # package server files
-PUBLIC_PATH="" API_URL="/api" build_server
 (cd $SERVER_DIR_PATH && tar zcf $OUTPUT_PATH/server.tar.gz .)
+
+# package serverless files
+(cd $SERVERLESS_DIR_PATH && tar zcf $OUTPUT_PATH/serverless.tar.gz .)

frontend/scripts/docker.sh

-#!/bin/bash
-
-set -e
-
-./scripts/build.sh
-
-docker build -t paddlepaddle/visualdl .

frontend/scripts/install.sh

 #!/bin/bash
 
-set -ex
+set -e
 
 # rust toolchain
 # https://rustup.rs/
@@ -9,11 +9,34 @@ if ! hash rustup 2>/dev/null; then
     source $HOME/.cargo/env
 fi
 
+
 # wasm-pack
+# wasm-pack will be installed by npm package
 # https://rustwasm.github.io/wasm-pack/installer/
-if ! hash wasm-pack 2>/dev/null; then
-    curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+# if ! hash wasm-pack 2>/dev/null; then
+#     curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+# fi
+
+
+# wine
+if hash apt 2>/dev/null; then
+    sudo dpkg --add-architecture i386
+    wget -nc https://download.opensuse.org/repositories/Emulators:/Wine:/Debian/xUbuntu_18.04/Release.key
+    sudo apt-key add Release.key
+    sudo apt-add-repository 'deb https://download.opensuse.org/repositories/Emulators:/Wine:/Debian/xUbuntu_18.04/ ./'
+
+    wget -nc https://dl.winehq.org/wine-builds/winehq.key
+    sudo apt-key add winehq.key
+    sudo apt-add-repository 'deb https://dl.winehq.org/wine-builds/ubuntu/ bionic main'
+
+    sudo apt update
+    sudo apt install --install-recommends winehq-stable
 fi
 
+
+# yarn
+curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
+export PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"
+
 # yarn install
 yarn install --frozen-lockfile

frontend/tsconfig.json

-{
-  "compilerOptions": {
-    "jsx": "preserve",
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "lib": [
-      "esnext",
-      "esnext.asynciterable",
-      "dom"
-    ],
-    "esModuleInterop": true,
-    "allowJs": true,
-    "resolveJsonModule": true,
-    "sourceMap": true,
-    "strict": true,
-    "noEmit": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": [
-        "./*"
-      ]
-    },
-    "types": [
-      "@types/node"
-    ],
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true
-  },
-  "exclude": [
-    "server",
-    "node_modules"
-  ],
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ]
-}

frontend/types/i18n.d.ts

-declare module 'detect-node';
-declare module 'path-match';

frontend/wasm/LICENSE

-SEE ../../LICENSE

frontend/wasm/README.md

-SEE ../README.md

scripts/build.ps1

@@ -18,14 +18,12 @@ function check_duplicated($filename_format) {
 
 function build_frontend_from_source() {
     cd $FRONTEND_DIR
-    $env:PUBLIC_PATH="/app"
-    $env:API_URL="/api"
     # TODO:
     # ./scripts/build.sh
 }
 
 function build_frontend() {
-    $PACKAGE_NAME="visualdl"
+    $PACKAGE_NAME="@visualdl/serverless"
     $SRC=npm view $PACKAGE_NAME dist.tarball
     Invoke-WebRequest -Uri "$SRC" -OutFile "$BUILD_DIR/$PACKAGE_NAME.tar.gz"
     # Need Windows 10 Insider Build 17063 and later
@@ -33,7 +31,7 @@ function build_frontend() {
 }
 
 function build_frontend_fake() {
-    mkdir -p "$BUILD_DIR/package/serverless"
+    mkdir -p "$BUILD_DIR/package/dist"
 }
 
 function build_backend() {
@@ -66,8 +64,7 @@ function clean_env() {
 }
 
 function package() {
-    mkdir -p $TOP_DIR/visualdl/server/dist
-    cp -Recurse $BUILD_DIR/package/serverless/* $TOP_DIR/visualdl/server/dist
+    cp -Recurse $BUILD_DIR/package/dist $TOP_DIR/visualdl/server/
     cp $BUILD_DIR/visualdl/logic/Release/core.pyd $TOP_DIR/visualdl
     cp $BUILD_DIR/visualdl/logic/Release/core.pyd $TOP_DIR/visualdl/python/
 }

scripts/build.sh

@@ -9,7 +9,7 @@ BUILD_DIR=$TOP_DIR/build
 mkdir -p $BUILD_DIR
 
 build_frontend_fake() {
-    mkdir -p "$BUILD_DIR/package/serverless"
+    mkdir -p "$BUILD_DIR/package/dist"
 }
 
 build_frontend_from_source() {
@@ -24,7 +24,10 @@ build_frontend_from_source() {
 }
 
 build_frontend() {
-    local PACKAGE="visualdl"
+    local PACKAGE="@visualdl/serverless"
+    local NAME=${PACKAGE#*@}
+    local NAME=${NAME////-}
+    echo $NAME
     local TAG="latest"
     local TARBALL="${PACKAGE}@${TAG}"
 
@@ -34,7 +37,7 @@ build_frontend() {
         echo "Cannot get version"
         exit 1
     fi
-    local FILENAME="${PACKAGE}-${VERSION}.tgz"
+    local FILENAME="${NAME}-${VERSION}.tgz"
 
     # get sha1sum
     local SHA1SUM=`npm view ${TARBALL} dist.shasum`
@@ -42,7 +45,7 @@ build_frontend() {
         echo "Cannot get sha1sum"
         exit 1
     fi
-    rm -f "$BUILD_DIR/${PACKAGE}-*.tgz.sha1"
+    rm -f "$BUILD_DIR/${NAME}-*.tgz.sha1"
     echo "${SHA1SUM} ${FILENAME}" > "$BUILD_DIR/${FILENAME}.sha1"
 
     local DOWNLOAD="1"
@@ -61,7 +64,7 @@ build_frontend() {
         echo "Donwloading npm package, please wait..."
 
         # remove cache
-        rm -f "$BUILD_DIR/${PACKAGE}-*.tgz"
+        rm -f "$BUILD_DIR/${NAME}-*.tgz"
 
         # download file
         FILENAME=`(cd $BUILD_DIR && npm pack ${TARBALL})`
@@ -108,8 +111,7 @@ clean_env() {
 }
 
 package() {
-    mkdir -p $TOP_DIR/visualdl/server/dist
-    cp -rf $BUILD_DIR/package/serverless/* $TOP_DIR/visualdl/server/dist
+    cp -rf $BUILD_DIR/package/dist $TOP_DIR/visualdl/server/
     cp $BUILD_DIR/visualdl/logic/core.so $TOP_DIR/visualdl
     cp $BUILD_DIR/visualdl/logic/core.so $TOP_DIR/visualdl/python/
 }