diff --git a/.gitignore b/.gitignore
index 18a99cd..351fe6b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
 package-lock.json
 node_modules/
 tmp/
+log/tasks.log
+log/test.log
\ No newline at end of file
diff --git a/index.mjs b/index.mjs
index 3cd13b5..0ec501c 100644
--- a/index.mjs
+++ b/index.mjs
@@ -51,7 +51,7 @@ app.use((err, req, res, next) => {
 
 // Listen to the App Engine-specified port, or 8080 otherwise
 const PORT = process.env.PORT || 8080;
-const HOST = '127.0.0.1';
+const HOST = process.env.HOST || '127.0.0.1';
 app.listen(PORT, HOST, async () => {
-    console.log('Server listening on port %s...', PORT);
+    console.log('Server listening on port %s:%s...', HOST, PORT);
 });
diff --git a/public/en/index.html b/public/en/index.html
new file mode 100644
index 0000000..05718bd
--- /dev/null
+++ b/public/en/index.html
@@ -0,0 +1,216 @@
+<!doctype html>
+<html class="no-js" lang="en-US">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width">
+    <title>HeroUnion - Open source web crawler union.</title>
+    <meta name="author" content="filesite.io">
+    <meta name="description" content="HeroUnion: Open source web crawler union.">
+    <style>
+        *,body{margin:0;padding:0}
+        body{padding:8px;max-width:640px;margin:0 auto}
+        h1{font-size:2em;font-weight:500}
+        small{font-size:65%;font-weight:400}
+        pre{background-color:#DDD;padding-bottom:3px;padding-right:3px;border-radius:0 5px 0 5px;max-width:480px}
+        code{display:block;background-color:#EEE;padding:4px}
+        dt{background-color:#EEE;padding:4px 6px}
+        dd{text-indent:1em;margin:4px 0 8px 0}
+
+        .text-center{text-align:center}
+        .text-right{text-align:right}
+        .mt-d5{margin-top:.5em}
+        .mt-1{margin-top:1em}
+        .mt-4{margin-top:4em}
+        .mx-d2{margin-left:.5em;margin-right:.2em}
+
+        .stats{background-color:#EEE;padding:10px 10px 4px 10px}
+        .col{display:inline-block;padding:13px 4px;width:20%;background:#444;color:#FFF;margin-right:4px;margin-bottom:6px;text-align:center}
+        .col strong{font-size:24px}
+        .col label{display:block;font-size:15px}
+        .info{background-color:darkblue}
+        .success{background-color:green}
+        .warning{background-color:orange;color:#444}
+        .danger{background-color:red}
+        .disable{background-color:gray}
+
+        @media(max-width:480px) {
+            h1 small{display:block}
+        }
+    </style>
+</head>
+<body>
+    <h1 class="text-center">HeroUnion<small> - Open source web crawler union</small></h1>
+
+    <hr class="mt-d5">
+    <p class="text-right">
+        <a href="/" class="mx-d2">简体中文</a>
+        <a href="/en/" class="mx-d2">English</a>
+    </p>
+
+    <h3 class="mt-1">HeroUnion download</h3>
+    <p><a href="https://github.com/filesite-io/herounion" target="_blank">https://github.com/filesite-io/herounion</a></p>
+
+    <h3 class="mt-1">HeroBot download</h3>
+    <p><a href="https://github.com/filesite-io/machete_hero" target="_blank">https://github.com/filesite-io/machete_hero</a></p>
+
+    <h3 class="mt-1">HeroUnion Stats - It's running <span class="run_time">...</span></h3>
+    <h4 class="mt-d5">Tasks Stats (Past <span class="cache_time">...</span>)</h4>
+    <div class="stats taskStatus">
+        <span class="col">
+            <strong class="total">...</strong>
+            <label>Total</label>
+        </span>
+        <span class="col info">
+            <strong class="waiting">...</strong>
+            <label>Waiting</label>
+        </span>
+        <span class="col warning">
+            <strong class="running">...</strong>
+            <label>Running</label>
+        </span>
+        <span class="col success">
+            <strong class="done">...</strong>
+            <label>Done</label>
+        </span>
+        <span class="col danger">
+            <strong class="failed">...</strong>
+            <label>Failed</label>
+        </span>
+    </div>
+
+    <h4 class="mt-d5">Notify Stats (Past <span class="cache_time">...</span>)</h4>
+    <div class="stats taskNotifyStatus">
+        <span class="col">
+            <strong class="total">...</strong>
+            <label>Total</label>
+        </span>
+        <span class="col success">
+            <strong class="done">...</strong>
+            <label>Done</label>
+        </span>
+        <span class="col danger">
+            <strong class="failed">...</strong>
+            <label>Failed</label>
+        </span>
+    </div>
+
+    <h4 class="mt-d5">Bot Stats</h4>
+    <div class="stats heroStatus">
+        <span class="col">
+            <strong class="total">...</strong>
+            <label>Total</label>
+        </span>
+        <span class="col success">
+            <strong class="idle">...</strong>
+            <label>Idle</label>
+        </span>
+        <span class="col warning">
+            <strong class="busy">...</strong>
+            <label>Busy</label>
+        </span>
+        <span class="col disable">
+            <strong class="offline">...</strong>
+            <label>Offline</label>
+        </span>
+    </div>
+
+    <h4 class="mt-d5">JSON Data</h4>
+    <pre><code id="herounion_stats">...</code></pre>
+
+    <h3 class="mt-1">Bots</h3>
+    <dl class="mt-d5" id="herobots">...</dl>
+
+
+    <footer class="mt-4 text-center">
+        &copy;copyright <a href="https://filesite.io" target="_blank">FileSite.io</a>
+    </footer>
+
+    <script src="/js/jquery-3.7.1.min.js"></script>
+    <script type="text/javascript">
+        var formatSeconds = function(secs) {
+            var str = secs + '秒';
+            if (secs > 86400) {
+                str = Math.floor(secs/86400) + ' days';
+            }else if (secs > 3600) {
+                str = Math.floor(secs/3600) + ' hours';
+            }else if (secs > 300) {
+                str = Math.floor(secs/60) + ' minutes';
+            }else if (secs > 86400*365) {
+                str = Math.floor(secs/86400/365) + ' years'
+                        + Math.floor( (secs - Math.floor(secs/86400/365)) / 86400 ) + ' days';
+            }
+
+            return str;
+        };
+
+        var renderStats = function(parentCls, data) {
+            for (var key in data) {
+                $('.' + parentCls + ' .'+key).text(data[key]);
+            }
+        };
+
+        var htmlspecialchars = function(str) {
+            return str.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;');
+        };
+
+        var renderHeros = function(heros) {
+            if (!heros || heros.length == 0) {
+                $('#herobots').text('There is no bot online.');
+                return;
+            }
+
+            var txtStatus = {idle: 'Idle', busy: 'Busy', offline: 'Offline'};
+            var html = '', item;
+            for (var index in heros) {
+                item = heros[index];
+                html += '<dt>' + htmlspecialchars(item['name']) + ' <small>'
+                        + txtStatus[item['status']] + '</small></dt>';
+                html += '<dd>'
+                        + htmlspecialchars(item['description'])
+                        + '<br>Platforms: ' + JSON.stringify(item['platforms'])
+                        + ', Contracts: ' + JSON.stringify(item['contracts'])
+                        + ', Contact: ' + htmlspecialchars(item['contact'])
+                        + '</dd>';
+            }
+
+            $('#herobots').html(html);
+        };
+
+        var loadUnionStats = function() {
+            $('.run_time').text('...');
+            var api = '/api/stats/';
+            $.ajax({
+                url: api,
+                method: 'GET',
+                dataType: 'json'
+            }).done(function(data) {
+                $('#herounion_stats').text(JSON.stringify(data, null, 4));
+                $('.run_time').text( formatSeconds(data.run_seconds) );
+                $('.cache_time').text( formatSeconds(data.cache_time) );
+                renderStats('taskStatus', data.taskStatus);
+                renderStats('taskNotifyStatus', data.taskNotifyStatus);
+                renderStats('heroStatus', data.heroStatus);
+            });
+        };
+
+        var loadHeros = function() {
+            $('#herobots').text('...');
+            var api = '/api/heros/';
+            $.ajax({
+                url: api,
+                method: 'GET',
+                dataType: 'json'
+            }).done(function(data) {
+                renderHeros(data);
+            });
+        };
+
+        //init
+        loadUnionStats();
+        loadHeros();
+
+        setInterval(loadUnionStats, 20000);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 65f8e5b..e283d4e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,9 +4,9 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width">
-    <title>HeroUnion英雄联盟 - 开源的Hero爬虫联盟</title>
+    <title>HeroUnion英雄联盟 - 开源的网络爬虫联盟</title>
     <meta name="author" content="filesite.io">
-    <meta name="description" content="HeroUnion: A union of hero bots, 开源的Hero爬虫联盟。">
+    <meta name="description" content="HeroUnion简称英雄联盟，开源的网络爬虫联盟。">
     <style>
         *,body{margin:0;padding:0}
         body{padding:8px;max-width:640px;margin:0 auto}
@@ -18,9 +18,11 @@
         dd{text-indent:1em;margin:4px 0 8px 0}
 
         .text-center{text-align:center}
-        .mt-d5{margin-top:0.5em}
+        .text-right{text-align:right}
+        .mt-d5{margin-top:.5em}
         .mt-1{margin-top:1em}
         .mt-4{margin-top:4em}
+        .mx-d2{margin-left:.5em;margin-right:.2em}
 
         .stats{background-color:#EEE;padding:10px 10px 4px 10px}
         .col{display:inline-block;padding:13px 4px;width:20%;background:#444;color:#FFF;margin-right:4px;margin-bottom:6px;text-align:center}
@@ -38,9 +40,13 @@
     </style>
 </head>
 <body>
-    <h1 class="text-center">HeroUnion英雄联盟<small> - 开源的Hero爬虫联盟</small></h1>
+    <h1 class="text-center">HeroUnion英雄联盟<small> - 开源的网络爬虫联盟</small></h1>
 
     <hr class="mt-d5">
+    <p class="text-right">
+        <a href="/" class="mx-d2">简体中文</a>
+        <a href="/en/" class="mx-d2">English</a>
+    </p>
 
     <h3 class="mt-1">HeroUnion源码下载</h3>
     <p><a href="https://github.com/filesite-io/herounion" target="_blank">https://github.com/filesite-io/herounion</a></p>
