chore: render static files in memory (#638)

* bump 2.0.0-beta.2

* chore: render static files in memory

* fix: empty requests in high-dimensional chart

* feat: reduce fetching interval when components is empty

* feat: show loading tip when components is empty

* chore: delete unused files

* bump 2.0.0-beta.3

* chore: remove model_pb argument

* fix: windows file encoding error

* fix: windows path sep error

* feat: add --api-only argument

* feat: add docker runtime

* style: remove unused variable

* pref: use tuple to reduce memory usage in template render

* chore: build opencv for docker alpine to reduce image size

.clang_format.hook

-#!/bin/bash
-set -e
-
-readonly SUPPORTED_VERSION="3.8"
-
-
-version=$(clang-format -version)
-
-if ! [[ $version == *"$SUPPORTED_VERSION"* ]]; then
-    echo "clang-format version check failed."
-    echo "a version contains '$SUPPORTED_VERSION' is needed, but get '$version'"
-    echo "you can install the right version, and make an soft-link to '\$PATH' env"
-    exit -1
-fi
-
-clang-format $@

.dockerignore

@@ -103,35 +103,22 @@ ENV/
 
 .DS_Store
 
-# PyCharm IDE
+# IDE
 .idea/
+.vscode/
 
-/.vscode
+# vcs
 .tool-versions
 
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
+# frontend dependencies
 node_modules
 .pnp
 .pnp.js
 
-# testing
-coverage
-
 # next.js
 .next
 
-# production
-build
-dist
-
-# misc
-.DS_Store
-.env*
-.vscode
-
-# debug
+# frontend debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

.eslint_format.hook

@@ -2,10 +2,8 @@
 
 set -e
 
-cd frontend
-`npm bin`/lint-staged
+(cd frontend && npm run lint)
 RESULT=$?
-cd ..
 
 [ $RESULT -ne 0 ] && exit 1
 exit 0

.gitignore

@@ -101,10 +101,14 @@ ENV/
 # mypy
 .mypy_cache/
 
+# macOS
 .DS_Store
 
 # PyCharm IDE
 .idea/
 
+# VSCode
 /.vscode
+
+# asdf
 .tool-versions

.gitmodules

-[submodule "demo/pytorch-CycleGAN-and-pix2pix"]
-	path = demo/pytorch-CycleGAN-and-pix2pix
-	url = https://github.com/Superjomn/pytorch-CycleGAN-and-pix2pix.git

.pre-commit-config.yaml

@@ -15,15 +15,6 @@
     -   id: check-symlinks
     -   id: check-added-large-files
 
--   repo: local
-    hooks:
-    -   id: clang-format-with-version-check
-        name: clang-format
-        description: Format files with ClangFormat.
-        entry: bash ./.clang_format.hook -i
-        language: system
-        files: \.(c|cc|cxx|cpp|cu|h|hpp|hxx)$
-
 
 -   repo: local
     hooks:

Dockerfile

-FROM nikolaik/python-nodejs:python3.8-nodejs14
+FROM python:3-alpine as opencv
 
-WORKDIR /home/visualdl
+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())") .
+
+
+FROM nikolaik/python-nodejs:python3.8-nodejs14 AS builder
 
-COPY . /home/visualdl
+WORKDIR /home/visualdl
+COPY . .
 
-RUN ["apt", "update"]
-RUN ["apt", "-y", "install", "cmake"]
+RUN apt-get update && apt-get -y --no-install-recommends install cmake && rm -rf /var/lib/apt/lists/*
 RUN ["pip", "install", "-r", "requirements.txt"]
+RUN ["python", "setup.py", "bdist_wheel"]
+
+
+FROM python:3-alpine
+
+WORKDIR /home/visualdl
+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 --from=builder /home/visualdl/dist/* dist/
+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"]
 
-CMD ["python", "setup.py", "bdist_wheel"]
+ENTRYPOINT ["visualdl", "--logdir", "/home/visualdl/log"]

Dockerfile.demo

-FROM tatsushid/tinycore-python:2.7
-
-RUN pip install visualdl
-WORKDIR /
-COPY ./demo/vdl_create_scratch_log vdl_create_scratch_log
-RUN python /vdl_create_scratch_log
-
-ENTRYPOINT ["visualdl", "--logdir=/scratch_log"]
\ No newline at end of file

docker-compose.yml

+version: '3.8'
+services:
+  backend:
+    build: .
+    expose:
+      - "8000"
+    volumes:
+      - "log:/home/visualdl/log"
+    command: ["--api-only", "--host=0.0.0.0", "--port=8000"]
+  frontend:
+    build: ./frontend
+    depends_on:
+      - backend
+    ports:
+      - "8999:8999"
+    environment:
+      BACKEND: http://backend:8000
+      HOST: 0.0.0.0
+      PORT: 8999
+volumes:
+  log:

frontend/.dockerignore

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next
+
+# production
+build
+dist
+
+# misc
+.DS_Store
+.env*
+.vscode
+.idea
+.tool-versions
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+packages/*/*.log
+
+# output
+/output
+
+# wasm target
+packages/wasm/target

frontend/Dockerfile

+FROM node:14 AS builder
+WORKDIR /home/visualdl
+COPY . .
+ENV SCOPE server
+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"]
+ENTRYPOINT ["yarn", "start"]

frontend/LICENSE

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

frontend/LICENSE

+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "{}"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright {yyyy} {name of copyright owner}
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

frontend/packages/cli/LICENSE

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

frontend/packages/core/LICENSE

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

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

@@ -67,12 +67,14 @@ const HighDimensionalChart: FunctionComponent<HighDimensionalChartProps> = ({
     const {t} = useTranslation('common');
 
     const {data, error, loading} = useRunningRequest<Data>(
-        `/embeddings/embedding?${queryString.stringify({
-            run,
-            tag,
-            dimension: Number.parseInt(dimension, 10),
-            reduction
-        })}`,
+        run && tag
+            ? `/embeddings/embedding?${queryString.stringify({
+                  run,
+                  tag,
+                  dimension: Number.parseInt(dimension, 10),
+                  reduction
+              })}`
+            : null,
         !!running
     );
 

frontend/packages/core/hooks/useNavItems.ts

-import {useEffect, useMemo} from 'react';
+import {useEffect, useState} from 'react';
 
 import ee from '~/utils/event';
 import {fetcher} from '~/utils/fetch';
@@ -13,10 +13,12 @@ export const navMap = {
 } as const;
 
 const useNavItems = () => {
-    const {data: components, mutate} = useRequest<(keyof typeof navMap)[]>('/components', fetcher, {
-        refreshInterval: 61 * 1000,
-        dedupingInterval: 29 * 1000,
-        errorRetryInterval: 29 * 1000,
+    const [components, setComponents] = useState<string[]>([]);
+
+    const {data, mutate} = useRequest<(keyof typeof navMap)[]>('/components', fetcher, {
+        refreshInterval: components.length ? 61 * 1000 : 15 * 1000,
+        dedupingInterval: 14 * 1000,
+        errorRetryInterval: 15 * 1000,
         errorRetryCount: Number.POSITIVE_INFINITY,
         revalidateOnFocus: true,
         revalidateOnReconnect: true,
@@ -31,11 +33,11 @@ const useNavItems = () => {
         };
     }, [mutate]);
 
-    const navItems = useMemo(() => intersection(allNavItems, components?.map(component => navMap[component]) ?? []), [
-        components
-    ]);
+    useEffect(() => {
+        setComponents(intersection(allNavItems, data?.map(component => navMap[component]) ?? []));
+    }, [data]);
 
-    return navItems;
+    return components;
 };
 
 export default useNavItems;

frontend/packages/core/index.js

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

frontend/packages/core/package.json

@@ -25,7 +25,8 @@
     },
     "scripts": {
         "dev": "next",
-        "build": "next build",
+        "build": "echo 'This package does not need to build. Please use @visualdl/server or @visualdl/serverless to build from source.'; echo 'If you want to test build function, please run `build:next` instead.'",
+        "build:next": "next build",
         "export": "next export",
         "start": "next start",
         "test": "echo \"Error: no test specified\" && exit 0"

frontend/packages/core/pages/index.tsx

-import {NextI18NextPage, Router} from '~/utils/i18n';
+import {NextI18NextPage, Router, useTranslation} from '~/utils/i18n';
 import React, {useEffect} from 'react';
-import {headerHeight, primaryColor, size} from '~/utils/style';
+import {headerHeight, primaryColor, rem, size} from '~/utils/style';
 
 import HashLoader from 'react-spinners/HashLoader';
 import styled from 'styled-components';
@@ -9,15 +9,20 @@ import useNavItems from '~/hooks/useNavItems';
 const Loading = styled.div`
     ${size(`calc(100vh - ${headerHeight})`, '100vw')}
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     overscroll-behavior: none;
     cursor: progress;
+    font-size: ${rem(16)};
+    line-height: ${rem(60)};
 `;
 
 const Index: NextI18NextPage = () => {
     const navItmes = useNavItems();
 
+    const {t} = useTranslation('common');
+
     useEffect(() => {
         if (navItmes.length) {
             Router.replace(`/${navItmes[0]}`);
@@ -27,13 +32,14 @@ const Index: NextI18NextPage = () => {
     return (
         <Loading>
             <HashLoader size="60px" color={primaryColor} />
+            <span>{t('common:loading')}</span>
         </Loading>
     );
 };
 
 Index.getInitialProps = () => {
     return {
-        namespacesRequired: []
+        namespacesRequired: ['common']
     };
 };
 

frontend/packages/core/public/locales/en/common.json

 {
-    "scalars": "Scalars",
-    "samples": "Samples",
+    "confirm": "Confirm",
+    "empty": "Nothing to display",
+    "error": "Error occurred",
     "graphs": "Graphs",
     "high-dimensional": "High Dimensional",
+    "loading": "Please wait while loading data",
+    "next-page": "Next Page",
+    "previous-page": "Prev Page",
+    "run": "Run",
+    "running": "Running",
+    "runs": "Runs",
+    "samples": "Samples",
+    "scalars": "Scalars",
     "search": "Search",
-    "search-tags": "Search tags in RegExp",
-    "search-result": "Search Result",
     "search-empty": "Nothing found. Please try again with another word. <1/>Or you can <3>see all charts</3>.",
-    "unselected-empty": "Nothing selected. <1/>Please select display data from right side.",
-    "empty": "Empty",
+    "search-result": "Search Result",
+    "search-runs": "Search runs",
+    "search-tags": "Search tags in RegExp",
     "select": "Please Select",
     "select-all": "Select All",
-    "runs": "Runs",
     "select-runs": "Select Runs",
-    "search-runs": "Search runs",
-    "running": "Running",
-    "stopped": "Stopped",
-    "run": "Run",
-    "stop": "Stop",
     "start-realtime-refresh": "Start realtime refresh",
+    "stop": "Stop",
     "stop-realtime-refresh": "Stop realtime refresh",
-    "loading": "Loading",
-    "error": "Error occurred",
-    "previous-page": "Prev Page",
-    "next-page": "Next Page",
+    "stopped": "Stopped",
     "total-page": "{{count}} page, jump to",
     "total-page_plural": "{{count}} pages, jump to",
-    "confirm": "Confirm"
+    "unselected-empty": "Nothing selected. <1/>Please select display data from right side."
 }

frontend/packages/core/public/locales/en/graphs.json

 {
-    "scale": "Scale",
+    "click-node": "Click a node to view its detail",
     "download-image": "Download Image",
-    "restore-image": "Restore Image",
+    "input": "Input",
+    "node-data-shape": "Shape",
+    "node-data-type": "Data Type",
     "node-info": "Node Info",
-    "node-type": "Node Type",
     "node-name": "Node Name",
-    "node-data-shape": "Shape",
-    "input": "Input",
-    "output": "Output",
+    "node-type": "Node Type",
     "op-type": "Operator Type",
-    "node-data-type": "Data Type",
-    "click-node": "Click a node to view its detail"
+    "output": "Output",
+    "restore-image": "Restore Image",
+    "scale": "Scale"
 }

frontend/packages/core/public/locales/en/high-dimensional.json

 {
-    "display-all-label": "Display All Labels",
-    "dimension": "Dimension",
     "2d": "2D",
     "3d": "3D",
-    "reduction-method": "Reduction Method",
+    "dimension": "Dimension",
+    "display-all-label": "Display All Labels",
     "pca": "PCA",
+    "reduction-method": "Reduction Method",
     "tsne": "T-SNE"
 }

frontend/packages/core/public/locales/en/samples.json

 {
-    "image": "image",
     "audio": "audio",
-    "text": "text",
+    "brightness": "Brightness",
+    "contrast": "Contrast",
+    "download-image": "Download $t(image)",
+    "image": "image",
     "show-actual-size": "Show Actual Image Size",
     "step": "Step",
-    "download-image": "Download $t(image)",
-    "brightness": "Brightness",
-    "contrast": "Contrast"
+    "text": "text"
 }

frontend/packages/core/public/locales/en/scalars.json

 {
-    "smoothing": "Smoothing",
-    "value": "Value",
+    "axis": "Axis",
+    "download-image": "Download image",
+    "ignore-outliers": "Ignore outliers in chart scaling",
+    "maximize": "Maximize",
+    "minimize": "Minimize",
+    "restore": "Restore",
     "smoothed": "Smoothed",
-    "x-axis": "X-Axis",
-    "x-axis-value": {
-        "step": "Step",
-        "relative": "Relative",
-        "wall": "Wall Time"
-    },
+    "smoothing": "Smoothing",
     "tooltip-sorting": "Tooltip Sorting",
     "tooltip-sorting-value": {
+        "ascending": "Ascending",
         "default": "Default",
         "descending": "Descending",
-        "ascending": "Ascending",
         "nearest": "Nearest"
     },
-    "ignore-outliers": "Ignore outliers in chart scaling",
-    "maximize": "Maximize",
-    "minimize": "Minimize",
-    "restore": "Restore",
-    "axis": "Axis",
-    "download-image": "Download image"
+    "value": "Value",
+    "x-axis": "X-Axis",
+    "x-axis-value": {
+        "relative": "Relative",
+        "step": "Step",
+        "wall": "Wall Time"
+    }
 }

frontend/packages/core/public/locales/zh/common.json

 {
-    "scalars": "标量数据",
-    "samples": "样本数据",
+    "confirm": "确定",
+    "empty": "暂无数据",
+    "error": "发生错误",
     "graphs": "网络结构",
     "high-dimensional": "高维数据映射",
+    "loading": "数据载入中，请稍等",
+    "next-page": "下一页",
+    "previous-page": "上一页",
+    "run": "运行",
+    "running": "运行中",
+    "runs": "数据流",
+    "samples": "样本数据",
+    "scalars": "标量数据",
     "search": "搜索",
-    "search-tags": "搜索标签（支持正则）",
-    "search-result": "搜索结果",
     "search-empty": "没有找到您期望的内容，你可以尝试其他搜索词<1/>或者点击<3>查看全部图表</3>",
-    "unselected-empty": "未选中任何数据<1/>请在右侧操作栏选择要展示的数据",
-    "empty": "空空如也",
+    "search-result": "搜索结果",
+    "search-runs": "搜索数据流",
+    "search-tags": "搜索标签（支持正则）",
     "select": "请选择",
     "select-all": "全选",
-    "runs": "数据流",
     "select-runs": "选择数据流",
-    "search-runs": "搜索数据流",
-    "running": "运行中",
-    "stopped": "已停止",
-    "run": "运行",
-    "stop": "停止",
     "start-realtime-refresh": "运行实时数据刷新",
+    "stop": "停止",
     "stop-realtime-refresh": "停止实时数据刷新",
-    "loading": "载入中",
-    "error": "发生错误",
-    "previous-page": "上一页",
-    "next-page": "下一页",
+    "stopped": "已停止",
     "total-page": "共 {{count}} 页，跳转至",
     "total-page_plural": "共 {{count}} 页，跳转至",
-    "confirm": "确定"
+    "unselected-empty": "未选中任何数据<1/>请在右侧操作栏选择要展示的数据"
 }

frontend/packages/i18n/LICENSE

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

frontend/packages/mock/LICENSE

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

frontend/packages/server/LICENSE

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

frontend/packages/server/index.ts

@@ -42,6 +42,8 @@ async function start() {
     } else if (isDev) {
         const {default: mock} = await import('@visualdl/mock');
         server.use(config.env.API_URL, mock({delay: delay ? () => Math.random() * delay : 0}));
+    } else {
+        console.warn('Server is running in production mode but no backend address specified.');
     }
 
     const {default: nextI18Next} = await import('@visualdl/core/utils/i18n');
@@ -70,12 +72,16 @@ async function start() {
 }
 
 if (require.main === module) {
-    const cwd = process.cwd();
-    const wd = path.dirname(require.resolve('@visualdl/core'));
-    process.chdir(wd);
-    process.on('exit', () => process.chdir(cwd));
-    process.on('uncaughtException', () => process.chdir(cwd));
-    process.on('unhandledRejection', () => process.chdir(cwd));
+    const core = require.resolve('@visualdl/core');
+    // after webpack building, we dont need to chdir
+    if ('string' === typeof core) {
+        const cwd = process.cwd();
+        const wd = path.dirname(core);
+        process.chdir(wd);
+        process.on('exit', () => process.chdir(cwd));
+        process.on('uncaughtException', () => process.chdir(cwd));
+        process.on('unhandledRejection', () => process.chdir(cwd));
+    }
     start();
 }
 

frontend/packages/server/package.json

@@ -25,6 +25,7 @@
     "scripts": {
         "dev": "cross-env NODE_ENV=development nodemon --watch index.ts --watch webpack.config.js --exec \"ts-node index.ts\"",
         "build": "cross-env API_URL=/api ts-node --script-mode build.ts",
+        "build:webpack": "webpack",
         "start": "pm2-runtime ecosystem.config.js",
         "test": "echo \"Error: no test specified\" && exit 0"
     },

frontend/packages/server/webpack.config.js

@@ -22,6 +22,12 @@ module.exports = {
         extensions: ['.wasm', '.ts', '.mjs', '.js', '.json']
     },
     externals: (context, request, callback) => {
+        if (request.indexOf(__dirname) === 0) {
+            return callback();
+        }
+        if (/node_modules\/webpack\/buildin/.test(request)) {
+            return callback();
+        }
         if (/^\./.test(request)) {
             return callback();
         }

frontend/packages/serverless/LICENSE

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

frontend/packages/wasm/LICENSE

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

frontend/scripts/build.sh

@@ -3,13 +3,17 @@
 set -e
 
 WORKING_PATH=$(pwd)
-SERVER_DIR="packages/server/dist"
+SERVER_DIR="packages/server"
 SERVER_DIR_PATH="$WORKING_PATH/$SERVER_DIR"
 SERVERLESS_DIR="packages/serverless/dist"
 SERVERLESS_DIR_PATH="$WORKING_PATH/$SERVERLESS_DIR"
 OUTPUT="output"
 OUTPUT_PATH="$WORKING_PATH/$OUTPUT"
 
+if [ -f "$HOME/.cargo/env" ]; then
+    source "$HOME/.cargo/env"
+fi
+
 # clean
 yarn clean
 
@@ -30,10 +34,10 @@ mkdir -p "$OUTPUT_PATH"
 
 # package server files
 if [ -d "$SERVER_DIR_PATH" ]; then
-    (cd "$SERVER_DIR_PATH" && tar zcf "${OUTPUT_PATH}/server.tar.gz" .)
+    tar zcf "${OUTPUT_PATH}/server.tar.gz" --exclude="node_modules" --exclude="*.log" --exclude=".gitignore" --exclude=".DS_Store" --dereference -C "$SERVER_DIR_PATH" .
 fi
 
 # package serverless files
 if [ -d "$SERVERLESS_DIR_PATH" ]; then
-    (cd "$SERVERLESS_DIR_PATH" && tar zcf "${OUTPUT_PATH}/serverless.tar.gz" .)
+    tar zcf "${OUTPUT_PATH}/serverless.tar.gz" -C "$SERVERLESS_DIR_PATH" .
 fi

visualdl/server/app.py

@@ -19,7 +19,6 @@ import json
 import os
 import time
 import sys
-import signal
 import multiprocessing
 import threading
 import re
@@ -29,12 +28,13 @@ from visualdl.reader.reader import LogReader
 from argparse import ArgumentParser
 from visualdl.utils import update_util
 
-from flask import (Flask, Response, redirect, request, send_file, send_from_directory)
+from flask import (Flask, Response, redirect, request, send_file)
 from flask_babel import Babel
 
 import visualdl.server
-from visualdl.server import (lib, template)
+from visualdl.server import lib
 from visualdl.server.log import logger
+from visualdl.server.template import Template
 from visualdl.python.cache import MemCache
 
 error_retry_times = 3
@@ -46,7 +46,6 @@ support_language = ["en", "zh"]
 default_language = support_language[0]
 
 server_path = os.path.abspath(os.path.dirname(sys.argv[0]))
-static_file_path = os.path.join(SERVER_DIR, "./static")
 template_file_path = os.path.join(SERVER_DIR, "./dist")
 mock_data_path = os.path.join(SERVER_DIR, "./mock_data/")
 
@@ -56,17 +55,17 @@ class ParseArgs(object):
                  logdir,
                  host="0.0.0.0",
                  port=8040,
-                 model_pb="",
                  cache_timeout=20,
                  language=None,
-                 public_path=None):
+                 public_path=None,
+                 api_only=False):
         self.logdir = logdir
         self.host = host
         self.port = port
-        self.model_pb = model_pb
         self.cache_timeout = cache_timeout
         self.language = language
         self.public_path = public_path
+        self.api_only = api_only
 
 
 def try_call(function, *args, **kwargs):
@@ -98,12 +97,6 @@ def parse_args():
         default="0.0.0.0",
         action="store",
         help="api service ip")
-    parser.add_argument(
-        "-m",
-        "--model_pb",
-        type=str,
-        action="store",
-        help="model proto in ONNX format or in Paddle framework format")
     parser.add_argument(
         "--logdir",
         required=True,
@@ -129,9 +122,14 @@ def parse_args():
         "--public-path",
         type=str,
         action="store",
-        default="/app",
+        default="/",
         help="set public path"
     )
+    parser.add_argument(
+        "--api-only",
+        action="store_true",
+        help="serve api only"
+    )
 
     args = parser.parse_args()
     if not args.logdir:
@@ -178,23 +176,31 @@ def create_app(args):
             lang = request.accept_languages.best_match(support_language)
         return lang
 
-    @app.route("/")
-    def base():
-        return redirect(public_path, code=302)
+    if not args.api_only:
+
+        template = Template(os.path.join(server_path, template_file_path), PUBLIC_PATH=public_path.strip('/'))
 
-    @app.route(public_path + "/")
-    def index():
-        lang = get_locale()
-        if lang == default_language:
-            return redirect(public_path + '/index', code=302)
-        return redirect(public_path + '/' + lang + '/index', code=302)
+        @app.route("/")
+        def base():
+            return redirect(public_path, code=302)
 
-    @app.route(public_path + '/<path:filename>')
-    def serve_static(filename):
-        print(static_file_path, filename)
-        return send_from_directory(
-            os.path.join(server_path, static_file_path), filename
-            if re.search(r'\..+$', filename) else filename + '.html')
+        @app.route("/favicon.ico")
+        def favicon():
+            icon = os.path.join(template_file_path, 'favicon.ico')
+            if os.path.exists(icon):
+                return send_file(icon)
+            return "file not found", 404
+
+        @app.route(public_path + "/")
+        def index():
+            lang = get_locale()
+            if lang == default_language:
+                return redirect(public_path + '/index', code=302)
+            return redirect(public_path + '/' + lang + '/index', code=302)
+
+        @app.route(public_path + '/<path:filename>')
+        def serve_static(filename):
+            return template.render(filename if re.search(r'\..+$', filename) else filename + '.html')
 
     @app.route(api_path + "/components")
     def components():
@@ -334,37 +340,22 @@ def _open_browser(app, index_url):
     webbrowser.open(index_url)
 
 
-def render_template(args):
-    template.render(
-        template_file_path,
-        static_file_path,
-        PUBLIC_PATH=args.public_path.strip('/'))
-
-
-def clean_template(signalnum, frame):
-    template.clean(static_file_path)
-    sys.exit(0)
-
-
 def _run(logdir,
          host="127.0.0.1",
          port=8080,
-         model_pb="",
          cache_timeout=20,
          language=None,
          public_path="/app",
+         api_only=False,
          open_browser=False):
     args = ParseArgs(
         logdir=logdir,
         host=host,
         port=port,
-        model_pb=model_pb,
         cache_timeout=cache_timeout,
         language=language,
-        public_path=public_path)
-    render_template(args)
-    for sig in [signal.SIGINT, signal.SIGHUP, signal.SIGTERM]:
-        signal.signal(sig, clean_template)
+        public_path=public_path,
+        api_only=api_only)
     logger.info(" port=" + str(args.port))
     app = create_app(args)
     index_url = "http://" + host + ":" + str(port) + args.public_path
@@ -378,19 +369,19 @@ def _run(logdir,
 def run(logdir,
         host="127.0.0.1",
         port=8040,
-        model_pb="",
         cache_timeout=20,
         language=None,
         public_path="/app",
+        api_only=False,
         open_browser=False):
     kwarg = {
         "logdir": logdir,
         "host": host,
         "port": port,
-        "model_pb": model_pb,
         "cache_timeout": cache_timeout,
         "language": language,
         "public_path": public_path,
+        "api_only": api_only,
         "open_browser": open_browser
     }
 
@@ -401,9 +392,6 @@ def run(logdir,
 
 def main():
     args = parse_args()
-    render_template(args)
-    for sig in [signal.SIGINT, signal.SIGHUP, signal.SIGTERM]:
-        signal.signal(sig, clean_template)
     logger.info(" port=" + str(args.port))
     app = create_app(args)
     app.run(debug=False, host=args.host, port=args.port, threaded=False)

visualdl/server/template.py

@@ -14,25 +14,30 @@
 # =======================================================================
 
 import os
-from shutil import (copytree, rmtree)
+import mimetypes
+from flask import (Response, send_from_directory)
 
 
-def render(path, dest, **context):
-    clean(dest)
-    copytree(path, dest)
-    for root, dirs, files in os.walk(dest):
-        for file in files:
-            if file.endswith(".html") or file.endswith(".js") or file.endswith(".css"):
-                file_path = os.path.join(root, file)
-                content = ""
-                with open(file_path, "r") as f:
-                    content = f.read()
-                for key, value in context.items():
-                    content = content.replace("{{" + key + "}}", value)
-                with open(file_path, "w") as f:
-                    f.write(content)
+class Template(object):
+    extname = [".html", ".js", ".css"]
 
+    def __init__(self, path, **context):
+        if not os.path.exists(path):
+            raise Exception("template file does not exist.")
+        self.path = path
+        self.files = {}
+        for root, dirs, files in os.walk(path):
+            for file in files:
+                if any(file.endswith(name) for name in self.extname):
+                    file_path = os.path.join(root, file)
+                    rel_path = os.path.relpath(file_path, path).replace(os.path.sep, '/')
+                    with open(file_path, "r", encoding="UTF-8") as f:
+                        content = f.read()
+                        for key, value in context.items():
+                            content = content.replace("{{" + key + "}}", value)
+                    self.files[rel_path] = content, mimetypes.guess_type(file)[0]
 
-def clean(path):
-    if os.path.exists(path):
-        rmtree(path)
+    def render(self, file):
+        if file in self.files:
+            return Response(response=self.files[file][0], mimetype=self.files[file][1])
+        return send_from_directory(self.path, file)

visualdl/version.py

@@ -13,4 +13,4 @@
 # limitations under the License.
 # =======================================================================
 
-vdl_version = '2.0.0-beta.1'
+vdl_version = '2.0.0-beta.3'