build: increase yarn network timeout to avoid build error in github action (#811)

* build: increase yarn network timeout to avoid build error in github action

* chore: fix docker build

* test: ignore no test error

* bump fe to 2.0.1

* feat: dynamic envs in vdl server

* bump fe to 2.0.2

* chore: fix docker build

* bump fe to 2.0.3

* fix: demo build error

* bump fe to 2.0.4

* chore: commit demo logs

* bump fe to 2.0.5

* fix: docker build error

* docs: update demo dat

* bump fe to 2.0.6

* feat: support cdn deployment

* bump fe to 2.0.7

* feat: support cdn deployment

* bump fe to 2.0.8

* chore: remove default demo path

* fix: graph iframe target origin

* bump fe to 2.0.9

Dockerfile

@@ -4,136 +4,18 @@ WORKDIR /home/visualdl
 COPY . .
 
 RUN apt-get update && apt-get -y --no-install-recommends install cmake && rm -rf /var/lib/apt/lists/*
-RUN ["pip", "install", "--disable-pip-version-check", "-r", "requirements.txt"]
-RUN ["python", "setup.py", "bdist_wheel"]
-
-
-FROM python:3-alpine as opencv
-
-WORKDIR /opt
-
-RUN apk add -U --no-cache --virtual=build-dependencies \
-    build-base \
-    clang \
-    clang-dev ninja \
-    cmake \
-    freetype-dev \
-    g++ \
-    jpeg-dev \
-    lcms2-dev \
-    libffi-dev \
-    libgcc \
-    libxml2-dev \
-    libxslt-dev \
-    linux-headers \
-    make \
-    musl \
-    musl-dev \
-    openssl-dev \
-    zlib-dev
-RUN apk add --no-cache \
-    curl \
-    freetype \
-    gcc \
-    jpeg \
-    libjpeg \
-    tesseract-ocr \
-    zlib
-
-ENV OPENJPEG_VER 2.3.1
-ENV OPENJPEG https://github.com/uclouvain/openjpeg/archive/v${OPENJPEG_VER}.tar.gz
-RUN curl -L ${OPENJPEG} | tar zx && \
-    cd openjpeg-${OPENJPEG_VER} && \
-    mkdir build && \
-    cd build && \
-    cmake .. -DCMAKE_BUILD_TYPE=Release && \
-    make && \
-    make install && \
-    make clean
-
-ENV OPENCV_VER 4.3.0
-ENV OPENCV https://github.com/opencv/opencv/archive/${OPENCV_VER}.tar.gz
-RUN pip install numpy
-RUN curl -L ${OPENCV} | tar zx && \
-    cd opencv-${OPENCV_VER} && \
-    mkdir build && \
-    cd build && \
-    cmake -G Ninja \
-        -D CMAKE_BUILD_TYPE=RELEASE \
-        -D CMAKE_INSTALL_PREFIX=/usr/local \
-        -D WITH_FFMPEG=NO \
-        -D WITH_IPP=NO \
-        -D WITH_OPENEXR=NO \
-        -D BUILD_DOCS=OFF \
-        -D BUILD_EXAMPLES=OFF \
-        -D BUILD_opencv_python2=OFF \
-        -D BUILD_opencv_python3=ON \
-        -D BUILD_NEW_PYTHON_SUPPORT=ON \
-        -D HAVE_opencv_python3=ON \
-        -D PYTHON_EXECUTABLE=$(which python) \
-        -D PYTHON_INCLUDE_DIR=$(python -c "from distutils.sysconfig import get_python_inc; print(get_python_inc())") \
-        -D PYTHON_INCLUDE_DIR2=$(python -c "from os.path import dirname; from distutils.sysconfig import get_config_h_filename; print(dirname(get_config_h_filename()))") \
-        -D PYTHON_LIBRARY=$(python -c "from distutils.sysconfig import get_config_var;from os.path import dirname,join ; print(join(dirname(get_config_var('LIBPC')),get_config_var('LDLIBRARY')))") \
-        -D PYTHON3_NUMPY_INCLUDE_DIRS=$(python -c "import numpy; print(numpy.get_include())") \
-        -D PYTHON3_PACKAGES_PATH=$(python -c "from distutils.sysconfig import get_python_lib; print(get_python_lib())") \
-        -D BUILD_WITH_DEBUG_INFO=OFF \
-        -D BUILD_PACKAGE=OFF \
-        -D BUILD_opencv_core=ON \
-        -D BUILD_opencv_imgproc=ON \
-        -D BUILD_opencv_imgcodecs=ON \
-        -D BUILD_opencv_highgui=ON \
-        -D BUILD_opencv_video=OFF \
-        -D BUILD_opencv_videoio=OFF \
-        -D BUILD_opencv_dnn=OFF \
-        -D BUILD_opencv_apps=OFF \
-        -D BUILD_opencv_flann=OFF \
-        -D BUILD_opencv_gpu=OFF \
-        -D BUILD_opencv_ml=OFF \
-        -D BUILD_opencv_legacy=OFF \
-        -D BUILD_opencv_calib3d=OFF \
-        -D BUILD_opencv_features2d=OFF \
-        -D BUILD_opencv_java=OFF \
-        -D BUILD_opencv_objdetect=OFF \
-        -D BUILD_opencv_photo=OFF \
-        -D BUILD_opencv_nonfree=OFF \
-        -D BUILD_opencv_ocl=OFF \
-        -D BUILD_opencv_stitching=OFF \
-        -D BUILD_opencv_superres=OFF \
-        -D BUILD_opencv_ts=OFF \
-        -D BUILD_opencv_videostab=OFF \
-        -D BUILD_opencv_contrib=OFF \
-        -D BUILD_SHARED_LIBS=ON \
-        -D BUILD_TESTS=OFF \
-        -D BUILD_PERF_TESTS=OFF \
-        -D BUILD_WITH_CAROTENE=OFF \
-        -D BUILD_PNG=ON \
-        -D BUILD_JPEG=ON \
-        -D BUILD_ZLIB=ON \
-        -D BUILD_FAT_JAVA_LIB=OFF \
-        -D OPENCV_CXX11=OFF \
-        .. && \
-    ninja && \
-    ninja install && \
-    ninja clean
-RUN cp -p $(find `python -c "from distutils.sysconfig import get_python_lib; print(get_python_lib())"` -name cv2.*.so) $(python -c "from distutils.sysconfig import get_python_lib; print(get_python_lib())")/cv2.so
-RUN tar zcf packages.tar.gz -C $(python -c "from distutils.sysconfig import get_python_lib; print(get_python_lib())") .
+RUN pip install --disable-pip-version-check -r requirements.txt && python setup.py bdist_wheel
 
 
 FROM python:3-alpine
 
 WORKDIR /home/visualdl
 COPY --from=builder /home/visualdl/dist/* dist/
-COPY --from=opencv /usr/local/include/opencv* /usr/local/include/
-COPY --from=opencv /usr/local/lib/* /usr/local/lib/
-COPY --from=opencv /usr/local/lib64/* /usr/local/lib64/
-COPY --from=opencv /opt/packages.tar.gz .
-COPY requirements.txt .
 
-RUN tar zxf packages.tar.gz -C $(python -c "from distutils.sysconfig import get_python_lib; print(get_python_lib())")
-RUN apk add --no-cache jpeg-dev openjpeg-dev tiff-dev zlib-dev
-RUN apk add --no-cache --virtual .build-deps build-base linux-headers
-RUN sed -i -e '/opencv-python/d' requirements.txt
-RUN ["pip", "install", "--disable-pip-version-check", "-r", "requirements.txt"]
-RUN ["pip", "install", "--disable-pip-version-check", "--no-deps", "--find-links=dist", "visualdl"]
+RUN apk add --no-cache jpeg-dev && \
+    apk add --no-cache --virtual .build-deps build-base linux-headers zlib-dev && \
+    pip install --disable-pip-version-check --find-links=dist visualdl && \
+    apk del --no-network .build-deps && \
+    rm -rf dist
 
 ENTRYPOINT ["visualdl", "--logdir", "/home/visualdl/log", "--host", "0.0.0.0"]

Dockerfile.demo

@@ -3,27 +3,39 @@ FROM nikolaik/python-nodejs:python3.8-nodejs14 AS builder
 WORKDIR /home/visualdl
 COPY . .
 
-RUN apt-get update && apt-get -y --no-install-recommends install cmake libgl1-mesa-glx && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && apt-get -y --no-install-recommends install cmake && rm -rf /var/lib/apt/lists/*
 RUN ["pip", "install", "--disable-pip-version-check", "-r", "requirements.txt"]
 RUN ["python", "setup.py", "bdist_wheel"]
 RUN ["pip", "install", "--disable-pip-version-check", "--find-links=dist", "visualdl"]
 
 WORKDIR /home/visualdl/frontend
+
 ENV SCOPE server
 ENV PUBLIC_PATH /paddle/visualdl/demo
 ENV TELEMETRY_ID b281676ad3824647971c6fd92d65f642
+
 RUN ["./scripts/install.sh"]
 RUN ["./scripts/build.sh"]
 
 
 FROM node:14-alpine
+
 WORKDIR /home/visualdl
-COPY --from=builder /home/visualdl/frontend/ ./
+COPY --from=builder /home/visualdl/frontend/output/server.tar.gz /tmp
+
 ENV NODE_ENV production
-ENV PUBLIC_PATH /paddle/visualdl/demo
 ENV PING_URL /ping
 ENV DEMO true
 ENV HOST 0.0.0.0
 ENV PORT 8999
-RUN ["yarn", "install", "--frozen-lockfile"]
-ENTRYPOINT ["yarn", "workspace" , "@visualdl/server", "start"]
+
+RUN apk update && \
+    apk upgrade && \
+    apk add --no-cache --virtual .build-deps git && \
+    tar zxf /tmp/server.tar.gz && \
+    rm /tmp/server.tar.gz && \
+    yarn install --no-lockfile && \
+    yarn cache clean && \
+    apk del --no-network .build-deps
+
+ENTRYPOINT ["yarn", "start"]

frontend/Dockerfile

@@ -6,9 +6,19 @@ RUN ["./scripts/install.sh"]
 RUN ["./scripts/build.sh"]
 
 FROM node:14-alpine
+
 WORKDIR /home/visualdl
 COPY --from=builder /home/visualdl/output/server.tar.gz /tmp
-RUN ["tar", "zxf", "/tmp/server.tar.gz"]
+
 ENV NODE_ENV production
-RUN ["yarn", "install", "--no-lockfile"]
+
+RUN apk update && \
+    apk upgrade && \
+    apk add --no-cache --virtual .build-deps git && \
+    tar zxf /tmp/server.tar.gz && \
+    rm /tmp/server.tar.gz && \
+    yarn install --no-lockfile && \
+    yarn cache clean && \
+    apk del --no-network .build-deps
+
 ENTRYPOINT ["yarn", "start"]

frontend/lerna.json

@@ -2,7 +2,7 @@
     "packages": [
         "packages/*"
     ],
-    "version": "2.0.0",
+    "version": "2.0.9",
     "npmClient": "yarn",
     "useWorkspaces": true,
     "command": {

frontend/lint-staged.config.js

 const path = require('path');
 const fs = require('fs');
 
-const getPackages = filenames => [
-    ...new Set(filenames.map(filename => path.relative(path.join(__dirname, 'packages'), filename).split(path.sep)[0]))
-];
+const getPackages = filenames =>
+    [
+        ...new Set(
+            filenames.map(filename => path.relative(path.join(__dirname, 'packages'), filename).split(path.sep)[0])
+        )
+    ].filter(p => p !== '..');
 
 module.exports = {
     // lint all files when global package.json or eslint config changes.
@@ -29,7 +32,7 @@ module.exports = {
         ...getPackages(filenames).map(p => {
             const filename = path.join(__dirname, 'packages', p, 'package.json');
             const packageFile = JSON.parse(fs.readFileSync(filename, 'utf-8'));
-            if (packageFile.scripts.test === 'jest') {
+            if (packageFile.scripts.test.startsWith('jest')) {
                 return `yarn workspace @visualdl/${p} run test --silent --bail --findRelatedTests ${filenames.join(
                     ' '
                 )}`;

frontend/packages/cli/package.json

 {
     "name": "@visualdl/cli",
-    "version": "2.0.0",
+    "version": "2.0.9",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
@@ -34,7 +34,7 @@
         "dist"
     ],
     "dependencies": {
-        "@visualdl/server": "2.0.0",
+        "@visualdl/server": "2.0.9",
         "open": "7.2.1",
         "ora": "5.0.0",
         "pm2": "4.4.1",

frontend/packages/core/builder/environment.js

-process.env.SNOWPACK_PUBLIC_PATH =
-    process.env.PUBLIC_PATH === '/' || !process.env.PUBLIC_PATH ? '' : process.env.PUBLIC_PATH;
-process.env.SNOWPACK_PUBLIC_API_URL = process.env.API_URL || `${process.env.SNOWPACK_PUBLIC_PATH}/api`;
+// This file is used to generate environment variables which used by the app
+
+// PUBLIC_PATH is for assets, can be set to a CDN address
+process.env.SNOWPACK_PUBLIC_PATH = process.env.CDN_VERSION
+    ? `https://visualdl-static.cdn.bcebos.com/assets/${process.env.CDN_VERSION}`
+    : process.env.PUBLIC_PATH === '/' || !process.env.PUBLIC_PATH
+    ? ''
+    : process.env.PUBLIC_PATH;
+
+// BASE_URI is for env and router, must be local address which starts with a `/` or empty string
+// if it is not set and PUBLIC_PATH is not a CDN address, it will be set to the same value of PUBLIC_PATH
+process.env.SNOWPACK_PUBLIC_BASE_URI =
+    process.env.SNOWPACK_PUBLIC_PATH.startsWith('/') || process.env.PUBLIC_PATH === ''
+        ? process.env.SNOWPACK_PUBLIC_PATH
+        : process.env.BASE_URI === '/' || !process.env.BASE_URI
+        ? ''
+        : process.env.BASE_URI;
+
+// API_URL is for api requests
+// it will be set to `${BASE_URI}/api` by default
+// if it is set to a absolute address refer to another hostname, CORS headers must be set
+process.env.SNOWPACK_PUBLIC_API_URL = process.env.API_URL || `${process.env.SNOWPACK_PUBLIC_BASE_URI}/api`;
+
+// TELEMETRY_ID is for Baidu Tongji
+// set to an empty string will disable telemetry
 process.env.SNOWPACK_PUBLIC_TELEMETRY_ID = process.env.TELEMETRY_ID || '';
+
+// API_TOKEN_KEY is for vdl-service
+// if it is set, api requests will add an additional header `X-VisualDL-Instance-ID` from the token key in query string
 process.env.SNOWPACK_PUBLIC_API_TOKEN_KEY = process.env.API_TOKEN_KEY || '';
+
+// supported languages
 process.env.SNOWPACK_PUBLIC_LANGUAGES = process.env.LANGUAGES || 'en,zh';
+// default language
 process.env.SNOWPACK_PUBLIC_DEFAULT_LANGUAGE = process.env.DEFAULT_LANGUAGE || 'en';

frontend/packages/core/builder/post-build.js

+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-console */
+
+require('dotenv').config();
+require('./environment');
+
+const path = require('path');
+const {promises: fs} = require('fs');
+const {BosClient} = require('@baiducloud/sdk');
+const mime = require('mime-types');
+const {minify} = require('html-minifier');
+
+const endpoint = process.env.BOS_ENDPOINT || 'http://bj.bcebos.com';
+const ak = process.env.BOS_AK;
+const sk = process.env.BOS_SK;
+
+const version = process.env.CDN_VERSION || 'latest';
+
+const config = {
+    endpoint,
+    credentials: {
+        ak,
+        sk
+    }
+};
+
+const bucket = 'visualdl-static';
+
+const client = new BosClient(config);
+
+async function getFiles(dir) {
+    const result = [];
+    try {
+        const files = await fs.readdir(dir, {withFileTypes: true});
+        for (const file of files) {
+            if (file.isFile()) {
+                const name = path.join(dir, file.name);
+                result.push({
+                    name,
+                    mime: mime.lookup(name),
+                    size: (await fs.stat(name)).size
+                });
+            } else if (file.isDirectory()) {
+                result.push(...(await getFiles(path.join(dir, file.name))));
+            }
+        }
+    } catch (e) {
+        console.error(e);
+    }
+    return result;
+}
+
+async function pushCdn(directory) {
+    if (!ak || !sk) {
+        console.error('No AK and SK specified!');
+        process.exit(1);
+    }
+
+    let files = [];
+    try {
+        const stats = await fs.stat(directory);
+        if (stats.isDirectory()) {
+            files = (await getFiles(directory)).map(file => ({filename: path.relative(directory, file.name), ...file}));
+        } else if (stats.isFile()) {
+            files.push({
+                filename: path.relative(path.basename(directory)),
+                name: directory,
+                mime: mime.lookup(directory),
+                size: stats.size
+            });
+        } else {
+            console.error(`${directory} does not exist!`);
+            process.exit(1);
+        }
+    } catch (e) {
+        console.error(e);
+        process.exit(1);
+    }
+    for (const file of files) {
+        (function (f) {
+            client
+                .putObjectFromFile(bucket, `assets/${version}/${f.filename}`, f.name, {
+                    'content-length': f.size,
+                    'content-type': `${f.mime}; charset=utf-8`
+                })
+                .then(() => console.log([f.name, f.mime, f.size].join(', ')))
+                .catch(error => console.error(f, error));
+        })(file);
+    }
+}
+
+const dist = path.resolve(__dirname, '../dist');
+const dest = path.join(dist, '__snowpack__');
+const publicDir = path.resolve(__dirname, '../public');
+
+function envProviderTemplate(baseUri) {
+    return `
+        <script type="module">
+            import env from '${baseUri}/__snowpack__/env.local.js'; globalThis.env = env;
+        </script>
+    `;
+}
+
+const ENV_INJECT = 'const env = globalThis.env || {}; export default env;';
+const ENV_PROVIDER = envProviderTemplate(process.env.SNOWPACK_PUBLIC_BASE_URI);
+const ENV_TEMPLATE_PROVIDER = envProviderTemplate('%BASE_URI%');
+
+async function injectProvider(input, provider, output) {
+    const file = await fs.readFile(input, 'utf-8');
+    const scriptPos = file.indexOf('<script ');
+    const newFile = file.slice(0, scriptPos) + provider + file.slice(scriptPos);
+    await fs.writeFile(
+        output || input,
+        minify(newFile, {
+            collapseWhitespace: true,
+            removeAttributeQuotes: true,
+            removeComments: true,
+            sortAttributes: true,
+            sortClassName: true
+        }),
+        'utf-8'
+    );
+}
+
+async function main() {
+    await injectProvider(path.join(dist, 'index.html'), ENV_PROVIDER);
+    await injectProvider(path.join(publicDir, 'index.html'), ENV_TEMPLATE_PROVIDER, path.join(dist, 'index.tpl.html'));
+
+    const envFile = path.join(dest, 'env.js');
+    await fs.rename(envFile, path.join(dest, 'env.local.js'));
+    await fs.writeFile(envFile, ENV_INJECT, 'utf-8');
+
+    if (process.env.CDN_VERSION) {
+        // TODO: do not upload index.html & index.tpl.html & __snowpack__/env.local.js
+        await pushCdn(dist);
+    }
+}
+
+main();

frontend/packages/core/package.json

 {
     "name": "@visualdl/core",
-    "version": "2.0.0",
+    "version": "2.0.9",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
@@ -24,18 +24,19 @@
     },
     "scripts": {
         "dev": "snowpack dev",
-        "build": "snowpack build",
+        "build": "snowpack build && node builder/post-build.js",
         "start": "yarn dev --reload",
-        "test": "jest"
+        "test": "jest --passWithNoTests"
     },
     "main": "dist/index.html",
     "files": [
-        "dist"
+        "dist",
+        "builder/environment.js"
     ],
     "dependencies": {
         "@tippyjs/react": "4.1.0",
-        "@visualdl/netron": "2.0.0",
-        "@visualdl/wasm": "2.0.0",
+        "@visualdl/netron": "2.0.9",
+        "@visualdl/wasm": "2.0.9",
         "bignumber.js": "9.0.0",
         "d3-format": "2.0.0",
         "echarts": "4.9.0",
@@ -70,6 +71,7 @@
         "@babel/plugin-proposal-class-properties": "7.10.4",
         "@babel/preset-env": "7.11.5",
         "@babel/preset-react": "7.10.4",
+        "@baiducloud/sdk": "1.0.0-rc.22",
         "@snowpack/app-scripts-react": "1.10.0",
         "@snowpack/plugin-dotenv": "2.0.1",
         "@snowpack/plugin-run-script": "2.1.1",
@@ -91,11 +93,13 @@
         "@types/react-router-dom": "5.1.5",
         "@types/snowpack-env": "2.3.0",
         "@types/styled-components": "5.1.3",
-        "@visualdl/mock": "2.0.0",
+        "@visualdl/mock": "2.0.9",
         "babel-plugin-styled-components": "1.11.1",
+        "dotenv": "8.2.0",
         "enhanced-resolve": "4.3.0",
         "express": "4.17.1",
         "fs-extra": "9.0.1",
+        "html-minifier": "4.0.0",
         "http-proxy-middleware": "1.0.5",
         "jest": "26.4.2",
         "snowpack": "2.10.1",

frontend/packages/core/snowpack.config.js

@@ -31,7 +31,9 @@ module.exports = {
     },
     proxy: {
         ...[mock.pathname, icons.pathname, netron.pathname, wasm.pathname].reduce((m, pathname) => {
-            m[(process.env.PUBLIC_PATH || '') + pathname] = `http://${devServer.host}:${devServer.port}${pathname}`;
+            m[
+                process.env.SNOWPACK_PUBLIC_BASE_URI + pathname
+            ] = `http://${devServer.host}:${devServer.port}${pathname}`;
             return m;
         }, {})
     },
@@ -41,7 +43,7 @@ module.exports = {
         port
     },
     buildOptions: {
-        baseUrl: process.env.PUBLIC_PATH || '/',
+        baseUrl: process.env.SNOWPACK_PUBLIC_PATH || '/',
         clean: true
     },
     installOptions: {

frontend/packages/core/src/App.tsx

@@ -16,6 +16,7 @@ import routes from '~/routes';
 import styled from 'styled-components';
 import {useTranslation} from 'react-i18next';
 
+const BASE_URI: string = import.meta.env.SNOWPACK_PUBLIC_BASE_URI;
 const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
 
 const Main = styled.main`
@@ -53,7 +54,7 @@ const Progress: FunctionComponent = () => {
 const Telemetry: FunctionComponent = () => {
     const location = useLocation();
     useEffect(() => {
-        globalThis._hmt.push(['_trackPageview', PUBLIC_PATH + location.pathname]);
+        globalThis._hmt.push(['_trackPageview', BASE_URI + location.pathname]);
     }, [location.pathname]);
     return null;
 };
@@ -89,7 +90,7 @@ const App: FunctionComponent = () => {
                     <BodyLoading />
                 ) : (
                     <Main>
-                        <Router basename={PUBLIC_PATH || '/'}>
+                        <Router basename={BASE_URI || '/'}>
                             <Telemetry />
                             <Header>
                                 <Navbar />

frontend/packages/core/src/components/GraphPage/Graph.tsx

@@ -11,6 +11,12 @@ import {useTranslation} from 'react-i18next';
 
 const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
 
+let IFRAME_HOST = `${window.location.protocol}//${window.location.host}`;
+if (PUBLIC_PATH.startsWith('http')) {
+    const url = new URL(PUBLIC_PATH);
+    IFRAME_HOST = `${url.protocol}//${url.host}`;
+}
+
 const toolboxHeight = rem(40);
 
 const Wrapper = styled.div`
@@ -169,7 +175,7 @@ const Graph = React.forwardRef<GraphRef, GraphProps>(
                     type,
                     data
                 },
-                `${window.location.protocol}//${window.location.host}`
+                IFRAME_HOST
             );
         }, []);
         useEffect(() => {

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

@@ -27,6 +27,7 @@ import styled from 'styled-components';
 import useNavItems from '~/hooks/useNavItems';
 import {useTranslation} from 'react-i18next';
 
+const BASE_URI: string = import.meta.env.SNOWPACK_PUBLIC_BASE_URI;
 const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
 const API_TOKEN_KEY: string = import.meta.env.SNOWPACK_PUBLIC_API_TOKEN_KEY;
 
@@ -194,7 +195,7 @@ const Navbar: FunctionComponent = () => {
         i18n.changeLanguage(nextLanguage);
     }, [i18n]);
 
-    const currentPath = useMemo(() => pathname.replace(PUBLIC_PATH, ''), [pathname]);
+    const currentPath = useMemo(() => pathname.replace(BASE_URI, ''), [pathname]);
 
     const [navItems] = useNavItems();
     const [items, setItems] = useState<NavbarItemProps[]>([]);
@@ -239,7 +240,7 @@ const Navbar: FunctionComponent = () => {
     return (
         <Nav>
             <div className="left">
-                <Logo href={appendApiToken(PUBLIC_PATH + '/index')}>
+                <Logo href={appendApiToken(BASE_URI + '/index')}>
                     <img alt="PaddlePaddle" src={PUBLIC_PATH + logo} />
                     <span>VisualDL</span>
                 </Logo>

frontend/packages/demo/.gitignore

 data
+!logs/**/*.log

frontend/packages/demo/builder/io.ts

 /* eslint-disable no-console */
 
 import crypto, {BinaryLike} from 'crypto';
+import {promises as fs, writeFileSync} from 'fs';
 
-import fetch from 'node-fetch';
-import {promises as fs} from 'fs';
 import path from 'path';
 import querystring from 'querystring';
 
@@ -49,6 +48,11 @@ export default class IO {
     constructor(url: string, dataDir: string) {
         this.url = url;
         this.dataDir = dataDir;
+
+        writeFileSync(path.join(this.dataDir, IO.metaFileName), JSON.stringify(this.metadata), {
+            encoding: 'utf-8',
+            flag: 'w'
+        });
     }
 
     public static isSameUri(url1: Pick<MetaData, 'uri' | 'query'>, url2: Pick<MetaData, 'uri' | 'query'>) {
@@ -136,13 +140,14 @@ export default class IO {
         return filename;
     }
 
-    fetch(uri: string, query?: Query) {
+    async fetch(uri: string, query?: Query) {
+        const {default: fetch} = await import('node-fetch');
         let url = this.url + apiUrl + uri;
         if (!isEmpty(query)) {
             url += '?' + querystring.stringify(query);
         }
         try {
-            return fetch(url);
+            return await fetch(url);
         } catch (e) {
             console.error(e);
         }

frontend/packages/demo/package.json

 {
     "name": "@visualdl/demo",
-    "version": "2.0.0",
+    "version": "2.0.9",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
@@ -28,7 +28,7 @@
         "dist"
     ],
     "scripts": {
-        "build": "rimraf dist && ts-node --script-mode builder/index.ts && tsc && cpy data dist/ --parents",
+        "build": "rimraf dist data && ts-node --script-mode builder/index.ts && tsc && cpy data dist/ --parents",
         "test": "echo \"Error: no test specified\" && exit 0"
     },
     "devDependencies": {

frontend/packages/demo/tsconfig.json

 {
     "compilerOptions": {
-        "target": "es5",
+        "target": "ES2018",
+        "module": "commonjs",
         "lib": [
             "esnext",
-            "esnext.asynciterable",
-            "dom"
+            "esnext.asynciterable"
         ],
         "moduleResolution": "node",
         "esModuleInterop": true,
         "resolveJsonModule": true,
-        "downlevelIteration": true,
         "declaration": true,
         "skipLibCheck": true,
         "outDir": "dist"
-    },
-    "include": [
-        "index.ts",
-        "builder"
-    ]
+    }
 }

frontend/packages/mock/package.json

 {
     "name": "@visualdl/mock",
-    "version": "2.0.0",
+    "version": "2.0.9",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",

frontend/packages/mock/tsconfig.json

 {
     "compilerOptions": {
-        "target": "es2018",
+        "target": "ES2018",
         "module": "commonjs",
         "lib": [
             "esnext",
-            "esnext.asynciterable",
-            "dom"
+            "esnext.asynciterable"
         ],
         "moduleResolution": "node",
         "esModuleInterop": true,
+        "resolveJsonModule": true,
         "declaration": true,
         "skipLibCheck": true,
         "outDir": "dist"

frontend/packages/netron/package.json

 {
     "name": "@visualdl/netron",
-    "version": "2.0.0",
+    "version": "2.0.9",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",

frontend/packages/netron/src/index.js

@@ -91,7 +91,7 @@ host.BrowserHost = class {
 
     message(type, data) {
         if (window.parent) {
-            window.parent.postMessage({type: type, data: data});
+            window.parent.postMessage({type: type, data: data}, '*');
         }
     }
 

frontend/packages/server/global.d.ts

+declare module '@visualdl/core/builder/environment';

frontend/packages/server/index.ts

@@ -2,6 +2,7 @@
 
 import {config} from 'dotenv';
 import express from 'express';
+import {promises as fs} from 'fs';
 import path from 'path';
 import resolve from 'enhanced-resolve';
 
@@ -14,15 +15,45 @@ const host = process.env.HOST || 'localhost';
 const port = Number.parseInt(process.env.PORT || '', 10) || 8999;
 const backend = process.env.BACKEND;
 const delay = Number.parseInt(process.env.DELAY || '', 10);
-const publicPath = process.env.PUBLIC_PATH || '/';
-const apiUrl = process.env.API_URL || `${process.env.PUBLIC_PATH || ''}/api`;
 const pingUrl = process.env.PING_URL;
 
 const root = path.dirname(resolve.sync(__dirname, '@visualdl/core'));
 
 const app = express();
 
+async function parseTemplate() {
+    const template = await fs.readFile(path.resolve(root, 'index.tpl.html'), {encoding: 'utf-8'});
+    return template.replace(/%(.+?)%/g, (_matched, key) => process.env[key] ?? '');
+}
+
+async function extendEnv() {
+    const content = await fs.readFile(path.resolve(root, '__snowpack__/env.local.js'), {encoding: 'utf-8'});
+    const match = content.match(/export default\s*({.*})/);
+    const env = JSON.parse(match[1]);
+    return Object.keys(env).reduce((m, key) => {
+        if (process.env[key] != null) {
+            m[key] = process.env[key];
+        }
+        return m;
+    }, env);
+}
+
 async function start() {
+    require('@visualdl/core/builder/environment');
+
+    // snowpack uses PUBLIC_URL & MODE in template
+    // https://www.snowpack.dev/#environment-variables
+    process.env.MODE = process.env.NODE_ENV;
+    if (process.env.PUBLIC_PATH != null) {
+        process.env.PUBLIC_URL = process.env.PUBLIC_PATH;
+    }
+
+    const baseUri = process.env.SNOWPACK_PUBLIC_BASE_URI;
+    const apiUrl = process.env.SNOWPACK_PUBLIC_API_URL;
+
+    const template = await parseTemplate();
+    const env = await extendEnv();
+
     if (backend) {
         const {createProxyMiddleware} = await import('http-proxy-middleware');
         app.use(
@@ -46,20 +77,25 @@ async function start() {
         console.warn('Server is running in production mode but no backend address specified.');
     }
 
-    if (publicPath !== '/') {
+    if (baseUri !== '') {
         app.get('/', (_req, res) => {
-            res.redirect(publicPath);
+            res.redirect(baseUri);
         });
     }
 
-    if (pingUrl && pingUrl !== '/' && pingUrl !== publicPath && pingUrl.startsWith('/')) {
+    if (pingUrl && pingUrl !== '/' && pingUrl !== baseUri && pingUrl.startsWith('/')) {
         app.get(pingUrl, (_req, res) => {
-            res.type('text/plain');
-            res.status(200).send('OK!');
+            res.type('text/plain').status(200).send('OK!');
         });
     }
 
-    app.use(publicPath, express.static(root, {index: false}));
+    app.get(`${baseUri}/__snowpack__/env.local.js`, (_req, res) => {
+        res.type('.js')
+            .status(200)
+            .send(`export default ${JSON.stringify(env)};`);
+    });
+
+    app.use(baseUri || '/', express.static(root, {index: false}));
 
     app.get(/\.wasm/, (_req, res, next) => {
         res.type('application/wasm');
@@ -67,7 +103,7 @@ async function start() {
     });
 
     app.get('*', (_req, res) => {
-        res.sendFile('index.html', {root});
+        res.type('.html').status(200).send(template);
     });
 
     const server = app.listen(port, host, () => {

frontend/packages/server/package.json

 {
     "name": "@visualdl/server",
-    "version": "2.0.0",
+    "version": "2.0.9",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
@@ -36,7 +36,7 @@
         "ecosystem.config.d.ts"
     ],
     "dependencies": {
-        "@visualdl/core": "2.0.0",
+        "@visualdl/core": "2.0.9",
         "dotenv": "8.2.0",
         "enhanced-resolve": "4.3.0",
         "express": "4.17.1",
@@ -47,14 +47,14 @@
         "@types/enhanced-resolve": "3.0.6",
         "@types/express": "4.17.8",
         "@types/node": "14.6.4",
-        "@visualdl/mock": "2.0.0",
+        "@visualdl/mock": "2.0.9",
         "cross-env": "7.0.2",
         "nodemon": "2.0.4",
         "ts-node": "9.0.0",
         "typescript": "4.0.2"
     },
     "optionalDependencies": {
-        "@visualdl/demo": "2.0.0"
+        "@visualdl/demo": "2.0.9"
     },
     "engines": {
         "node": ">=12",

frontend/packages/server/tsconfig.json

@@ -10,6 +10,7 @@
         "outDir": "dist"
     },
     "files": [
-        "index.ts"
+        "index.ts",
+        "global.d.ts"
     ]
 }

frontend/packages/wasm/package.json

 {
     "name": "@visualdl/wasm",
-    "version": "2.0.0",
+    "version": "2.0.9",
     "title": "VisualDL",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [

frontend/scripts/install.sh

@@ -27,7 +27,7 @@ fi
 export PATH=$PATH
 
 # yarn install
-yarn install --frozen-lockfile
+yarn install --frozen-lockfile --network-timeout 1000000
 
 # re-install esbuild
 # I don't know why...

frontend/yarn.lock

@@ -1156,6 +1156,17 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@baiducloud/sdk@1.0.0-rc.22":
+  version "1.0.0-rc.22"
+  resolved "https://registry.yarnpkg.com/@baiducloud/sdk/-/sdk-1.0.0-rc.22.tgz#a82e4811f9d4e5dda75e465e370f0430f03ff769"
+  integrity sha512-HZaEqWxaflU9HyVVqB5ZgTxht1l2yRds0Ce0qfVR80G7vTKPFNML0YbYNnzj+YVLJb4CRCta23fxkcBoH6Jqiw==
+  dependencies:
+    async "^2.6.1"
+    debug "^3.1.0"
+    q "^1.5.1"
+    underscore "^1.9.1"
+    urlencode "^1.1.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -3878,7 +3889,7 @@ async@1.5:
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
   integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
 
-async@^2.6.3, async@~2.6.1:
+async@^2.6.1, async@^2.6.3, async@~2.6.1:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
   integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
@@ -4512,6 +4523,14 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
+camel-case@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.1"
+
 camel-case@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.1.tgz#1fc41c854f00e2f7d0139dfeba1542d6896fe547"
@@ -4723,7 +4742,7 @@ claygl@^1.2.1:
   resolved "https://registry.yarnpkg.com/claygl/-/claygl-1.3.0.tgz#7a6e2903210519ac358848f5d78070ed211685f3"
   integrity sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==
 
-clean-css@^4.2.3:
+clean-css@^4.2.1, clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
   integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
@@ -4885,7 +4904,7 @@ combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@2, commander@^2.20.0:
+commander@2, commander@^2.19.0, commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -7696,6 +7715,19 @@ html-minifier-terser@^5.0.1:
     relateurl "^0.2.7"
     terser "^4.6.3"
 
+html-minifier@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-4.0.0.tgz#cca9aad8bce1175e02e17a8c33e46d8988889f56"
+  integrity sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==
+  dependencies:
+    camel-case "^3.0.0"
+    clean-css "^4.2.1"
+    commander "^2.19.0"
+    he "^1.2.0"
+    param-case "^2.1.1"
+    relateurl "^0.2.7"
+    uglify-js "^3.5.1"
+
 html-parse-stringify2@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
@@ -7875,7 +7907,7 @@ i18next@19.7.0:
   dependencies:
     "@babel/runtime" "^7.10.1"
 
-iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
+iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.11:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -9410,6 +9442,11 @@ loud-rejection@^1.0.0:
     currently-unhandled "^0.4.1"
     signal-exit "^3.0.0"
 
+lower-case@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
+  integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
+
 lower-case@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.1.tgz#39eeb36e396115cc05e29422eaea9e692c9408c7"
@@ -10030,6 +10067,13 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
+no-case@^2.2.0:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
+  integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
+  dependencies:
+    lower-case "^1.1.1"
+
 no-case@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.3.tgz#c21b434c1ffe48b39087e86cfb4d2582e9df18f8"
@@ -10728,6 +10772,13 @@ parallel-transform@^1.1.0:
     inherits "^2.0.3"
     readable-stream "^2.1.5"
 
+param-case@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
+  integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
+  dependencies:
+    no-case "^2.2.0"
+
 param-case@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.3.tgz#4be41f8399eff621c56eebb829a5e451d9801238"
@@ -13640,7 +13691,7 @@ typescript@4.0.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.2.tgz#7ea7c88777c723c681e33bf7988be5d008d05ac2"
   integrity sha512-e4ERvRV2wb+rRZ/IQeb3jm2VxBsirQLpQhdxplZ2MEzGvDkkMmPglecnNDfSUBivMjP93vRbngYYDQqQ/78bcQ==
 
-uglify-js@^3.1.4:
+uglify-js@^3.1.4, uglify-js@^3.5.1:
   version "3.10.4"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.10.4.tgz#dd680f5687bc0d7a93b14a3482d16db6eba2bfbb"
   integrity sha512-kBFT3U4Dcj4/pJ52vfjCSfyLyvG9VYYuGYPmrPvAxRw/i7xHiT4VvCev+uiEMcEEiu6UNB6KgWmGtSUYIWScbw==
@@ -13662,6 +13713,11 @@ undefsafe@^2.0.2:
   dependencies:
     debug "^2.2.0"
 
+underscore@^1.9.1:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.11.0.tgz#dd7c23a195db34267186044649870ff1bab5929e"
+  integrity sha512-xY96SsN3NA461qIRKZ/+qox37YXPtSBswMGfiNptr+wrt6ds4HaMw23TP612fEyGekRE6LNRiLYr/aqbHXNedw==
+
 unfetch@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.1.0.tgz#6ec2dd0de887e58a4dee83a050ded80ffc4137db"
@@ -13802,6 +13858,11 @@ update-notifier@^4.0.0:
     semver-diff "^3.1.1"
     xdg-basedir "^4.0.0"
 
+upper-case@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+  integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
+
 uri-js@^4.2.2:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.0.tgz#aa714261de793e8a82347a7bcc9ce74e86f28602"
@@ -13829,6 +13890,13 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+urlencode@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/urlencode/-/urlencode-1.1.0.tgz#1f2ba26f013c85f0133f7a3ad6ff2730adf7cbb7"
+  integrity sha1-HyuibwE8hfATP3o61v8nMK33y7c=
+  dependencies:
+    iconv-lite "~0.4.11"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"

scripts/build.sh

@@ -13,8 +13,9 @@ build_frontend() {
     cd "$FRONTEND_DIR"
     . ./scripts/install.sh
     SCOPE="serverless" \
-      PUBLIC_PATH="/{{PUBLIC_PATH}}" \
-      API_URL="/{{PUBLIC_PATH}}/api" \
+      PUBLIC_PATH="{{PUBLIC_PATH}}" \
+      BASE_URI="{{BASE_URI}}" \
+      API_URL="{{API_URL}}" \
       API_TOKEN_KEY="{{API_TOKEN_KEY}}" \
       TELEMETRY_ID="{{TELEMETRY_ID}}" \
       PATH="$PATH" \

visualdl/server/app.py

@@ -87,7 +87,9 @@ def create_app(args):
 
         template = Template(
             os.path.join(server_path, template_file_path),
-            PUBLIC_PATH=public_path.lstrip('/'),
+            PUBLIC_PATH=public_path,
+            BASE_URI=public_path,
+            API_URL=api_path,
             API_TOKEN_KEY='',
             TELEMETRY_ID='63a600296f8a71f576c4806376a9245b' if args.telemetry else ''
         )