doc/init Chinese doc

.gitignore

@@ -106,3 +106,7 @@ ENV/
 node_modules
 /.vscode
 package-lock.json
+
+# PyCharm IDE
+.idea/
+

.pre-commit-config.yaml

@@ -23,3 +23,9 @@
         entry: bash ./.clang_format.hook -i
         language: system
         files: \.(c|cc|cxx|cpp|cu|h|hpp|hxx|proto)$
+
+-   repo: git://github.com/guykisel/pre-commit-reject-large-files
+    sha: da21f6dac1aa20aa53598b145c5c0013cdd40d65
+    hooks:
+    -   id: reject-large-files
+        args: [--max-filesize=1000000]

.travis.yml

@@ -3,6 +3,7 @@ cache:
   - pip
   - ccache
   - yarn
+  - npm
 sudo: required
 dist: trusty
 os:

CMakeLists.txt

@@ -30,8 +30,6 @@ include(external/python)    # find python and set path
 
 include_directories(${PROJECT_SOURCE_DIR})
 include_directories(${CMAKE_CURRENT_BINARY_DIR})
-# TODO(ChunweiYan) debug, remote latter
-#include_directories(/home/superjom/project/VisualDL/build/third_party/eigen3/src/extern_eigen3)
 
 add_subdirectory(${CMAKE_CURRENT_SOURCE_DIR}/visualdl/storage)
 add_subdirectory(${CMAKE_CURRENT_SOURCE_DIR}/visualdl/logic)
@@ -40,13 +38,14 @@ add_subdirectory(${CMAKE_CURRENT_SOURCE_DIR}/visualdl/python)
 add_executable(vl_test
         ${PROJECT_SOURCE_DIR}/visualdl/test.cc
         ${PROJECT_SOURCE_DIR}/visualdl/logic/sdk_test.cc
+        ${PROJECT_SOURCE_DIR}/visualdl/logic/histogram_test.cc
         ${PROJECT_SOURCE_DIR}/visualdl/storage/storage_test.cc
         ${PROJECT_SOURCE_DIR}/visualdl/utils/test_concurrency.cc
         ${PROJECT_SOURCE_DIR}/visualdl/utils/test_image.cc
         ${PROJECT_SOURCE_DIR}/visualdl/utils/concurrency.h
         ${PROJECT_SOURCE_DIR}/visualdl/utils/filesystem.h
         )
-target_link_libraries(vl_test sdk storage entry tablet im gtest glog protobuf gflags pthread)
+target_link_libraries(vl_test sdk storage entry tablet im gtest glog protobuf gflags pthread eigen3)
 
 enable_testing ()
 

README.md

@@ -1,34 +1,14 @@
 # VisualDL
 
 
-### How to use
-#### Step 1: build frontend
-```shell
-cd frontend
-npm install
-npm run build
+### How to install
 ```
-
-this step will generate a dist directory under frontend
-
-### Step 2: copy frontend/dist to server/visualdl/frontend/dist
-```shell
-mkdir -p server/visualdl/frontend/dist
-cp -r frontend/dist server/visualdl/frontend/dist
-```
-
-#### Step 3: build and install Python package
-```shell
-cd server/
-sh build.sh
-cd dist
-sudo pip install --upgrade visualdl-0.0.1-py2-none-any.whl
+python setup.py bdist_wheel
+pip install --upgrade dist/visualdl-0.0.1-py2-none-any.whl
 ```
 
 
 ### Step 3: run
 ```
-# cd to visualdl install dir
-cd /usr/local/lib/python2.7/site-packages/visualdl/
-python visual_dl.py --port=8888
+visualDL --logdir=<some log> --port=8888
 ```

VERSION_NUMBER

@@ -0,0 +1 @@
+0.0.1

build.sh

@@ -0,0 +1,54 @@
+#!/bin/bash
+set -ex
+
+TOP_DIR=$(pwd)
+FRONTEND_DIR=$TOP_DIR/frontend
+BACKEND_DIR=$TOP_DIR/visualdl
+BUILD_DIR=$TOP_DIR/build
+
+mkdir -p $BUILD_DIR
+
+build_frontend() {
+    cd $FRONTEND_DIR
+    if [ ! -d "dist" ]; then
+      npm install
+      npm run build
+    fi
+}
+
+build_frontend_fake() {
+    cd $FRONTEND_DIR
+    mkdir -p dist
+}
+
+build_backend() {
+    cd $BUILD_DIR
+    cmake ..
+    make -j2
+}
+
+build_onnx_graph() {
+    # TODO(ChunweiYan) check protoc version here
+    cd $TOP_DIR/visualdl/server/onnx
+    protoc onnx.proto --python_out .
+}
+
+package() {
+    cp -rf $FRONTEND_DIR/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/
+}
+
+ARG=$1
+echo "ARG: " $ARG
+
+
+if [ $ARG = "travis-CI" ]; then
+    build_frontend_fake
+else
+    build_frontend
+fi
+
+build_backend
+build_onnx_graph
+package

docs/README_cn.md

@@ -0,0 +1,111 @@
+# VisualDL (Visualize the Deep Learning)
+
+## 介绍
+VisualDL是一个面向深度学习任务设计的可视化工具，包含了scalar、参数分布、模型结构、图像可视化等功能，项目正处于高速迭代中，新的优化组件会不断加入。
+
+目前大多数DNN平台均使用Python作为配置语言，VisualDL原生支持python的使用，
+通过在模型配置中添加几行配置，便可以为冷冰冰的训练过程提供丰富的可视化支持。
+
+除了Python SDK之外，VisualDL底层采用C++编写，其暴露的C++ SDK也可以深入其他的平台中，
+实现原生的性能和定制效果。
+
+## 组件
+VisualDL 目前支持4种组件：
+
+- graph
+- scalar
+- image
+- histogram
+
+### graph
+兼容 ONNX(Open Neural Network Exchange)[https://github.com/onnx/onnx], 通过与 python SDK的结合，VisualDL可以兼容包括 PaddlePaddle, pytorch, mxnet在内的大部分主流DNN平台。
+
+<p align="center">
+<img src="./images/introduction_graph.png"/>
+</p>
+
+### scalar
+可以用于展示训练测试的误差趋势
+
+<p align="center">
+<img src="./images/introduction_scalar.png"/>
+</p>
+
+### image
+可以用于可视化任何tensor，或模型生成的图片
+
+<p align="center">
+<img src="./images/introduction_image.png"/>
+</p>
+
+### histogram
+
+用于可视化任何tensor中元素分布的变化趋势
+
+<p align="center">
+<img src="./images/introduction_histogram.png"/>
+</p>
+
+## SDK
+VisualDL 同时提供了python SDK 和 C++ SDK 来实现不同方式的使用。
+### Python SDK
+以最简单的Scalar组件为例，尝试创建一个scalar组件并插入多个时间步的数据：
+
+```python
+import random
+from visualdl import LogWriter
+
+logdir = "./tmp"
+logger = LogWriter(dir, sync_cycle=10)
+
+# mark the components with 'train' label.
+with logger.mode("train"):
+    # create a scalar component called 'scalars/scalar0'
+    scalar0 = logger.scalar("scalars/scalar0")
+
+
+# add some records during DL model running, lets start from another block.
+with logger.mode("train"):
+    # add scalars
+    for step in range(100):
+        scalar0.add_record(step, random.random())
+```
+
+### C++ SDK
+上面 Python SDK 中代码完全一致的C++ SDK用法如下
+```c++
+#include <cstdlib>
+#include <string>
+#include "visualdl/sdk.h"
+
+namespace vs = visualdl;
+namepsace cp = visualdl::components;
+
+int main() {
+  const std::string dir = "./tmp";
+  vs::LogWriter logger(dir, 10);
+
+  logger.SetMode("train");
+  auto tablet = logger.NewTablet("scalars/scalar0");
+
+  cp::Scalar<float> scalar0(tablet);
+
+  for (int step = 0; step < 1000; step++) {
+    float v = (float)std::rand() / RAND_MAX;
+    scalar0.AddRecord(step, v);
+  }
+
+  return 0;
+}
+```
+## 启动Board
+当训练过程中已经产生了日志数据，就可以启动board进行实时预览可视化信息
+
+```
+visualDL --logdir <some log dir>
+```
+
+board 还支持一下参数来实现远程的访问：
+
+- `--host` 设定IP
+- `--port` 设定端口

frontend/mock/data/plugin/graphs/graphs.js

@@ -0,0 +1,115 @@
+/**
+ * get mock data
+ *
+ * @param {string} path request path
+ * @param {Object} queryParam query params
+ * @param {Object} postParam post params
+ * @return {Object}
+ */
+module.exports = function (path, queryParam, postParam) {
+    return {
+        // moock delay
+        _timeout: 0,
+        // mock http status
+        _status: 200,
+        // mock response data
+        _data: {
+            status: 0,
+            msg: 'SUCCESS',
+            data: {
+                title: {
+                    text: 'Graph 简单示例'
+                },
+                tooltip: {},
+                animationDurationUpdate: 1500,
+                animationEasingUpdate: 'quinticInOut',
+                series : [
+                    {
+                        type: 'graph',
+                        layout: 'none',
+                        symbolSize: 50,
+                        roam: true,
+                        label: {
+                            normal: {
+                                show: true
+                            }
+                        },
+                        edgeSymbol: ['circle', 'arrow'],
+                        edgeSymbolSize: [4, 10],
+                        edgeLabel: {
+                            normal: {
+                                textStyle: {
+                                    fontSize: 20
+                                }
+                            }
+                        },
+                        data: [{
+                            name: '节点1',
+                            x: 300,
+                            y: 300
+                        }, {
+                            name: '节点2',
+                            x: 800,
+                            y: 300
+                        }, {
+                            name: '节点3',
+                            x: 550,
+                            y: 100
+                        }, {
+                            name: '节点4',
+                            x: 550,
+                            y: 500
+                        }],
+                        // links: [],
+                        links: [{
+                            source: 0,
+                            target: 1,
+                            symbolSize: [5, 20],
+                            label: {
+                                normal: {
+                                    show: true
+                                }
+                            },
+                            lineStyle: {
+                                normal: {
+                                    width: 5,
+                                    curveness: 0.2
+                                }
+                            }
+                        }, {
+                            source: '节点2',
+                            target: '节点1',
+                            label: {
+                                normal: {
+                                    show: true
+                                }
+                            },
+                            lineStyle: {
+                                normal: { curveness: 0.2 }
+                            }
+                        }, {
+                            source: '节点1',
+                            target: '节点3'
+                        }, {
+                            source: '节点2',
+                            target: '节点3'
+                        }, {
+                            source: '节点2',
+                            target: '节点4'
+                        }, {
+                            source: '节点1',
+                            target: '节点4'
+                        }],
+                        lineStyle: {
+                            normal: {
+                                opacity: 0.9,
+                                width: 2,
+                                curveness: 0
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+    };
+};