diff --git a/README.md b/README.md
index 23062a3cda899da287ecdfa458e163bbd807fc4d..990bf98e0f373bf0bcf0f237611cf5d7347cb65b 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,22 @@
-# VisualDL
\ No newline at end of file
+# VisualDL
+
+
+### How to use
+#### Step 1: build and install Python package
+```shell
+python setup.py bdist_wheel
+cd dist
+pip install visualdl-0.0.1-py2-none-any.whl
+```
+
+#### Step 2: build frontend
+```shell
+cd visualdl/frontend
+npm install
+npm run build
+```
+
+### Step 3: run
+```
+python bin/visual_dl.py --port=8888
+```
diff --git a/bin/visual_dl.py b/bin/visual_dl.py
index 3efef160cbc8561bdac0e01307c9975f8194c4c6..7d2121a721e88b05b7e80d60714a2714fdb25baa 100644
--- a/bin/visual_dl.py
+++ b/bin/visual_dl.py
@@ -1,14 +1,16 @@
 """ entry point of visual_dl
 """
 import json
+import os
+import sys
 from optparse import OptionParser
 
-from flask import Flask
-from flask import request
+from flask import Flask, redirect
+from flask import send_from_directory
 
 from visualdl.log import logger
 
-app = Flask(__name__)
+app = Flask(__name__, static_url_path="")
 
 
 def option_parser():
@@ -44,12 +46,23 @@ def gen_result(status, msg):
     return result
 
 
-@app.route('/')
+server_path = os.path.abspath(os.path.dirname(sys.argv[0]))
+static_file_path = "../visualdl/frontend/dist/"
+
+
+@app.route('/static/<path:filename>')
+def serve_static(filename):
+    return send_from_directory(
+        os.path.join(server_path, static_file_path), filename)
+
+
+@app.route("/")
 def index():
-    """
+    return redirect('/static/index.html', code=302)
 
-    :return:
-    """
+
+@app.route('/hello')
+def hello():
     result = gen_result(0, "Hello, this is VisualDL!")
     return json.dumps(result)
 
diff --git a/docs/backend_architecture.md b/docs/backend_architecture.md
index 4ef9a6eab8fa95ef0c62ebea4dbe63efa1a6b9f8..eaa3b0aecc5bac704e9ec3e2d4518d931dd825ba 100644
--- a/docs/backend_architecture.md
+++ b/docs/backend_architecture.md
@@ -48,4 +48,3 @@ IM 与 Server 的关系是
 ### Protobuf API
 - 决定了底层的数据格式，protobuf 提供了序列化的公共界面
 - SDK通过Protobuf API操作底层数据
-
diff --git a/docs/data_structure.md b/docs/data_structure.md
index 32a3abe613daf136875fefba7d02a667aa7633b4..56982ad79bce8ac93938e60c59aac66af1ff6408 100644
--- a/docs/data_structure.md
+++ b/docs/data_structure.md
@@ -159,7 +159,7 @@ histogram 需要得到tensor的分布，因此会把完整的tensor 的数值存
 ]
 ```
 
-## graph 
+## graph
 graph 会复杂一些，可能无法借用上述类型
 
 ```javascript
diff --git a/docs/visualization.md b/docs/visualization.md
index b715139864d0ef13d35f346af88b8a9d965c05ff..1ae6929578d3468a948a5752d14deee66d066572 100644
--- a/docs/visualization.md
+++ b/docs/visualization.md
@@ -6,4 +6,4 @@
 
 # 前端增量
 
-# 前端采样
\ No newline at end of file
+# 前端采样
diff --git a/setup.py b/setup.py
index fd6b7b9346955f91d9513eeb0f994fdbcee35325..7865a8735e7f62e243cd82d7426075cbc5d31b8c 100644
--- a/setup.py
+++ b/setup.py
@@ -1,12 +1,10 @@
 from setuptools import setup
 
-setup(name="visualdl",
-      version="0.0.1",
-      packages=['visualdl'],
-      include_package_data=True,
-      install_requires=[
-        'flask>=0.12.1'
-      ],
-      url='http://www.baidu.com/',
-      license='Apache 2.0',
-)
+setup(
+    name="visualdl",
+    version="0.0.1",
+    packages=['visualdl'],
+    include_package_data=True,
+    install_requires=['flask>=0.12.1'],
+    url='http://www.baidu.com/',
+    license='Apache 2.0', )
diff --git a/visualdl/__init__.py b/visualdl/__init__.py
index 2a1e845b9d616f445141af475268eb0d56493a64..f4d48fbf79a0280a166dcd3d572ab97b326d1680 100644
--- a/visualdl/__init__.py
+++ b/visualdl/__init__.py
@@ -1,5 +1,3 @@
 import log
 
-__all__ = [
-    'log'
-]
+__all__ = ['log']
diff --git a/visualdl/backend/test.py b/visualdl/backend/test.py
index e7c1add36848626d7e4289d78ef3077a7d09a4ef..1937343416aedc7a260ddcda33d2009c14bf7f46 100644
--- a/visualdl/backend/test.py
+++ b/visualdl/backend/test.py
@@ -46,11 +46,7 @@ class TabletTester(unittest.TestCase):
         scalar = self.tablet.as_float_scalar()
         py_captions = ["train", "test"]
         step_ids = [10, 20, 30]
-        py_records = [
-            [0.1, 0.2],
-            [0.2, 0.3],
-            [0.3, 0.4]
-        ]
+        py_records = [[0.1, 0.2], [0.2, 0.3], [0.3, 0.4]]
 
         scalar.set_captions(py_captions)
         for i in range(len(py_records)):
diff --git a/visualdl/frontend/src/index.js b/visualdl/frontend/src/index.js
index 74c3dd0a64db71261214c06f1b652b1c6a53bc7b..3c31ecf63fe3520f76c9db70c29d865a511e18c1 100644
--- a/visualdl/frontend/src/index.js
+++ b/visualdl/frontend/src/index.js
@@ -6,4 +6,3 @@ new App({
         titleName: 'VisualDL'
     }
 }).attach(document.getElementById('root'));
-