add inceptionv3 page in playground

tensorspace-team · Nov 29, 2018 · 438c4ad · 438c4ad
1 parent aa17b0a
commit 438c4ad
Show file tree

Hide file tree

Showing 6 changed files with 1,942 additions and 1 deletion.
diff --git a/assets/data/tabby.json b/assets/data/tabby.json
diff --git a/assets/img/playground/tabby.jpg b/assets/img/playground/tabby.jpg
diff --git a/assets/jslib/tensorspace.min.js b/assets/jslib/tensorspace.min.js
diff --git a/html/playground/inceptionv3.html b/html/playground/inceptionv3.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>TensorSpace Playground - InceptionV3</title>
+
+    <meta name="description" content="TensorSpace.js Playground">
+    <meta name="author" content="syt123450 / https://github.com/syt123450">
+    <link rel='icon' href='../../assets/img/common/logo.ico' type=‘image/x-ico’>
+    <meta name="viewport" content="width = device-width, initial-scale =1.0, maximum-scale = 1.0, user-scalable = no">
+
+    <script src="../../assets/jslib/jquery.min.js"></script>
+    <link rel="stylesheet" href="../../assets/csslib/bootstrap.min.css">
+    <script src="../../assets/jslib/bootstrap.min.js"></script>
+    <script src="../../assets/jslib/three.min.js"></script>
+    <script src="../../assets/jslib/tween.min.js"></script>
+    <script src="../../assets/jslib/tf.min.js"></script>
+    <script src="../../assets/jslib/TrackballControls.js"></script>
+    <script src="../../assets/jslib/stats.min.js"></script>
+    <script src="../../assets/jslib/tensorspace.min.js"></script>
+
+    <link rel="stylesheet" href="../../assets/csslib/material.fonts.css">
+    <link rel="stylesheet" href="../../assets/csslib/material.min.css">
+    <script src="../../assets/jslib/material.min.js"></script>
+
+    <link rel="stylesheet" href="../../css/common.css">
+    <link rel="stylesheet" href="../../css/playground.css">
+    <link rel="stylesheet" href="../../css/playgroundAlex.css">
+    <link rel="stylesheet" href="../../css/imageSelector.css">
+
+    <script src="../../js/playground.js"></script>
+    <script src="../../js/inceptionv3.js"></script>
+
+</head>
+<body>
+
+<nav>
+
+    <div class="container">
+
+        <div id="logo">
+            <a href="../../index.html">
+                <img src="../../assets/img/common/logoSmall.png">
+                <div>TensorSpace.js</div>
+            </a>
+        </div>
+
+        <ul class="hidden-xs">
+            <li><a href="../docs/startIntro.html">Documentation</a></li>
+            <li class="now"><a href="index.html">Playground</a></li>
+            <!--<li><a href="../gallery.html">Gallery</a></li>-->
+            <li><a href="../../index.html#download">Download</a></li>
+            <!--<li><a href="../developer.html">Developer</a></li>-->
+
+            <a href="https://github.com/tensorspace-team/tensorspace" class="github-corner-playground" aria-label="View source on Github">
+                <svg viewBox="0 0 250 250" aria-hidden="true">
+                    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+                    <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+                          fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+                    <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+                          fill="currentColor" class="octo-body"></path>
+                </svg>
+            </a>
+
+        </ul>
+
+    </div>
+
+    <ul id="more" class="nav nav-tabs visible-xs">
+        <li>
+            <a>
+                <span class="glyphicon glyphicon-th-large"></span>
+            </a>
+        </li>
+    </ul>
+
+    <ul id="nav-collapse" class="nav navbar-nav">
+        <li><a href="../../index.html">Home</a></li>
+        <li><a href="../docs/startIntro.html">Documentation</a></li>
+        <li><a href="../../index.html#download">Download</a></li>
+        <!--<li><a href="../developer.html">Developer</a></li>-->
+    </ul>
+
+    <div class="language">
+        <div class="selected">
+            <div>EN</div>
+        </div>
+        <div>
+            <div><a href="inceptionv3_zh.html">中</a></div>
+        </div>
+    </div>
+
+</nav>
+
+<aside id="playgroundNav">
+    <div><a href="index.html">Introduction</a></div>
+    <div><a href="lenet.html">LeNet</a><span class="aside-size-of-model">0.2MB</span></div>
+    <div><a href="trainingLeNet.html">LeNet Training Visualization</a></div>
+    <div><a href="alexnet.html">AlexNet</a><span class="aside-size-of-model">237MB</span></div>
+    <div><a href="vgg16.html">VGG-16</a><span class="aside-size-of-model">527MB</span></div>
+    <div class="now-label">InceptionV3<span class="aside-size-of-model">96MB</span></div>
+    <div><a href="resnet50.html">ResNet-50</a><span class="aside-size-of-model">98MB</span></div>
+    <div><a href="mobilenetv1.html">MobileNetv1</a><span class="aside-size-of-model">16MB</span></div>
+    <div><a href="yolov2-tiny.html">YOLOv2-tiny</a><span class="aside-size-of-model">60MB</span></div>
+    <div><a href="acgan.html">ACGAN</a><span class="aside-size-of-model">3MB</span></div>
+    <img id="close" src="../../assets/img/playground/close.png">
+</aside>
+
+<div id="curtain"></div>
+
+<button id="playgroundMenu" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
+    <i class="material-icons">menu</i>
+</button>
+
+<main>
+
+    <div id="loadingPad">
+        <img id="loading" src="../../assets/img/loading/mouseLoading.gif">
+        <div class="loading-label">
+            Downloading InceptionV3 pre-trained model...<br>96MB <span class="span-estimate">- Estimate 1min to 5min</span>
+        </div>
+    </div>
+    <div id="modelArea"></div>
+    <div id="controlPanel">
+
+        <div class="panelTitle">InceptionV3</div>
+        <div class="nav-size-of-model">( Model Size: 96MB )</div>
+
+        <img id="labelImage" src="../../assets/img/playground/tabby.jpg">
+
+        <button id="selectorTrigger" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
+            Select an image
+        </button>
+
+        <div id="hint">InceptionV3 thinks its a</div>
+
+        <div id="PredictResult">?</div>
+
+    </div>
+
+    <div id="selector">
+        <header>Select an Image to Predict</header>
+        <main>
+            <div>
+                <img id="data1" src="../../assets/img/playground/tabby.jpg">
+            </div>
+            <div>
+                <img id="data2" src="../../assets/img/playground/macaw.jpg">
+            </div>
+            <div>
+                <img id="data3" src="../../assets/img/playground/tigerShark.jpg">
+            </div>
+            <div>
+                <img id="data4" src="../../assets/img/playground/golfBall.jpg">
+            </div>
+            <div>
+                <img id="data5" src="../../assets/img/playground/golfCart.jpg">
+            </div>
+        </main>
+        <footer>
+            <div id="executePredict">Predict</div>
+            <div id="cancelPredict">Cancel</div>
+        </footer>
+    </div>
+
+    <div id="selectorCurtain"></div>
+
+</main>
+
+</body>
+</html>
diff --git a/html/playground/inceptionv3_zh.html b/html/playground/inceptionv3_zh.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>体验TensorSpace - InceptionV3</title>
+
+    <meta name="description" content="TensorSpace.js Playground">
+    <meta name="author" content="syt123450 / https://github.com/syt123450">
+    <link rel='icon' href='../../assets/img/common/logo.ico' type=‘image/x-ico’>
+    <meta name="viewport" content="width = device-width, initial-scale =1.0, maximum-scale = 1.0, user-scalable = no">
+
+    <script src="../../assets/jslib/jquery.min.js"></script>
+    <link rel="stylesheet" href="../../assets/csslib/bootstrap.min.css">
+    <script src="../../assets/jslib/bootstrap.min.js"></script>
+    <script src="../../assets/jslib/three.min.js"></script>
+    <script src="../../assets/jslib/tween.min.js"></script>
+    <script src="../../assets/jslib/tf.min.js"></script>
+    <script src="../../assets/jslib/TrackballControls.js"></script>
+    <script src="../../assets/jslib/stats.min.js"></script>
+    <script src="../../assets/jslib/tensorspace.min.js"></script>
+
+    <link rel="stylesheet" href="../../assets/csslib/material.fonts.css">
+    <link rel="stylesheet" href="../../assets/csslib/material.min.css">
+    <script src="../../assets/jslib/material.min.js"></script>
+
+    <link rel="stylesheet" href="../../css/common.css">
+    <link rel="stylesheet" href="../../css/playground.css">
+    <link rel="stylesheet" href="../../css/playgroundAlex.css">
+    <link rel="stylesheet" href="../../css/imageSelector.css">
+
+    <script src="../../js/playground.js"></script>
+    <script src="../../js/inceptionv3.js"></script>
+
+</head>
+<body>
+
+<nav>
+
+    <div class="container">
+
+        <div id="logo">
+            <a href="../../index_zh.html">
+                <img src="../../assets/img/common/logoSmall.png">
+                <div>TensorSpace.js</div>
+            </a>
+        </div>
+
+        <ul class="hidden-xs">
+            <li><a href="../docs/startIntro_zh.html">文档</a></li>
+            <li class="now"><a href="index_zh.html">体验TensorSpace</a></li>
+            <!--<li><a href="../gallery_zh.html">Gallery</a></li>-->
+            <li><a href="../../index_zh.html#download">下载</a></li>
+            <!--<li><a href="../developer_zh.html">Developer</a></li>-->
+
+            <a href="https://github.com/tensorspace-team/tensorspace" class="github-corner-playground" aria-label="View source on Github">
+                <svg viewBox="0 0 250 250" aria-hidden="true">
+                    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+                    <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+                          fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+                    <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+                          fill="currentColor" class="octo-body"></path>
+                </svg>
+            </a>
+
+        </ul>
+
+    </div>
+
+    <ul id="more" class="nav nav-tabs visible-xs">
+        <li>
+            <a>
+                <span class="glyphicon glyphicon-th-large"></span>
+            </a>
+        </li>
+    </ul>
+
+    <ul id="nav-collapse" class="nav navbar-nav">
+        <li><a href="../../index_zh.html">首页</a></li>
+        <li><a href="../docs/startIntro_zh.html">文档</a></li>
+        <li><a href="../../index_zh.html#download">下载</a></li>
+        <!--<li><a href="../developer_zh.html">Developer</a></li>-->
+    </ul>
+
+    <div class="language">
+        <div>
+            <div><a href="inceptionv3.html">EN</a></div>
+        </div>
+        <div class="selected">
+            <div>中</div>
+        </div>
+    </div>
+
+</nav>
+
+<aside id="playgroundNav">
+    <div><a href="index_zh.html">简介</a></div>
+    <div><a href="lenet_zh.html">LeNet</a><span class="aside-size-of-model">0.2MB</span></div>
+    <div><a href="trainingLeNet_zh.html">LeNet 训练可视化</a></div>
+    <div><a href="alexnet_zh.html">AlexNet</a><span class="aside-size-of-model">237MB</span></div>
+    <div><a href="vgg16_zh.html">VGG-16</a><span class="aside-size-of-model">527MB</span></div>
+    <div class="now-label">InceptionV3<span class="aside-size-of-model">96MB</span></div>
+    <div><a href="resnet50_zh.html">ResNet-50</a><span class="aside-size-of-model">98MB</span></div>
+    <div><a href="mobilenetv1_zh.html">MobileNetv1</a><span class="aside-size-of-model">16MB</span></div>
+    <div><a href="yolov2-tiny_zh.html">YOLOv2-tiny</a><span class="aside-size-of-model">60MB</span></div>
+    <div><a href="acgan_zh.html">ACGAN</a><span class="aside-size-of-model">3MB</span></div>
+    <img id="close" src="../../assets/img/playground/close.png">
+</aside>
+
+<div id="curtain"></div>
+
+<button id="playgroundMenu" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
+    <i class="material-icons">menu</i>
+</button>
+
+<main>
+
+    <div id="loadingPad">
+        <img id="loading" src="../../assets/img/loading/mouseLoading.gif">
+        <div class="loading-label">
+            正在下载InceptionV3预训练模型...<br>237MB <span class="span-estimate">- 估计3min到10min</span>
+        </div>
+    </div>
+    <div id="modelArea"></div>
+    <div id="controlPanel">
+
+        <div class="panelTitle">InceptionV3</div>
+        <div class="nav-size-of-model">( Model Size: 96MB )</div>
+
+        <img id="labelImage" src="../../assets/img/playground/tabby.jpg">
+
+        <button id="selectorTrigger" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
+            选择一张图片
+        </button>
+
+        <div id="hint">InceptionV3认为这是一个</div>
+
+        <div id="PredictResult">?</div>
+
+    </div>
+
+    <div id="selector">
+        <header>选择一张图片进行预测</header>
+        <main>
+            <div>
+                <img id="data1" src="../../assets/img/playground/tabby.jpg">
+            </div>
+            <div>
+                <img id="data2" src="../../assets/img/playground/macaw.jpg">
+            </div>
+            <div>
+                <img id="data3" src="../../assets/img/playground/tigerShark.jpg">
+            </div>
+            <div>
+                <img id="data4" src="../../assets/img/playground/golfBall.jpg">
+            </div>
+            <div>
+                <img id="data5" src="../../assets/img/playground/golfCart.jpg">
+            </div>
+        </main>
+        <footer>
+            <div id="executePredict">预测</div>
+            <div id="cancelPredict">取消</div>
+        </footer>
+    </div>
+
+    <div id="selectorCurtain"></div>
+
+</main>
+
+</body>
+</html>