1 files changed, 185 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-graph/demo/tf-graph-demo.html b/tensorflow/tensorboard/components/tf-graph/demo/tf-graph-demo.html
new file mode 100644
index 0000000000..d6e736d185
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-graph/demo/tf-graph-demo.html
@@ -0,0 +1,185 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../tf-graph-board/tf-graph-board.html">
+<link rel="import" href="../../tf-graph-loader/tf-graph-loader.html">
+<link rel="import" href="../../tf-graph/tf-graph-controls.html">
+<!-- Element for tf-graph demo page
+
+Example
+
+<tf-graph-demo></tf-graph-demo>
+
+-->
+
+<dom-module id="tf-graph-demo">
+<template>
+<style>
+
+:host /deep/ {
+  font-family: 'Roboto', sans-serif;
+}
+
+.main {
+  position: absolute;
+  right: 0;
+  left: 250px;
+  height: 100%;
+}
+
+.side {
+  position: absolute;
+  left: 0;
+  width: 250px;
+  height: 100%;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+.all {
+  position: relative;
+  width: 100%;
+  height: 100%
+}
+
+</style>
+<div class="all">
+  <div class="side">
+    <tf-graph-controls
+        color-by-params="[[colorByParams]]"
+        has-stats="[[hasStats]]"
+        color-by="{{colorBy}}"
+        datasets="[[datasets]]",
+        selected-dataset="{{selectedDataset}}"
+        selected-file="{{selectedFile}}"
+    ></tf-graph-controls>
+    <tf-graph-loader id="loader"
+        datasets="[[datasets]]",
+        selected-dataset="[[selectedDataset]]"
+        selected-file="[[selectedFile]]"
+        out-graph-hierarchy="{{graphHierarchy}}"
+        out-graph="{{graph}}"
+        out-graph-name="{{graphName}}"
+        has-stats="{{hasStats}}"
+        progress="{{_progress}}"
+    ></tf-graph-loader>
+  </div>
+  <div class="main">
+    <tf-graph-board id="graphboard"
+        graph-hierarchy="[[graphHierarchy]]"
+        graph="[[graph]]"
+        has-stats="[[hasStats]]"
+        graph-name="[[graphName]]"
+        progress="[[_progress]]"
+        color-by="[[colorBy]]"
+        color-by-params="{{colorByParams}}"
+    ></tf-graph-board>
+  </div>
+</div>
+</template>
+</dom-module>
+
+<script>
+(function(){
+
+var datasets = [
+  {
+    name: "Mnist Eval",
+    path: "mnist_eval.pbtxt",
+  },
+  {
+    name: "Mnist Train (with stats)",
+    path: "mnist_train.pbtxt",
+    statsPath: "mnist_train_stats.json"
+  },
+  {
+    name: "Inception Train (huge)",
+    path: "inception_train.pbtxt",
+  },
+  {
+    name: "Inception Train Eval",
+    path: "inception_train_eval.pbtxt",
+  },
+  {
+    name: "Inception Test",
+    path: "inception_test_eval.pbtxt",
+  },
+  {
+    name: "PTB Word LSTM Train",
+    path: "ptb_word_lstm_train.pbtxt",
+  },
+  {
+    name: "PTB Word LSTM Train Eval",
+    path: "ptb_word_lstm_train_eval.pbtxt",
+  },
+  {
+    name: "PTB Word LSTM Test",
+    path: "ptb_word_lstm_test_eval.pbtxt",
+  },
+  {
+    name: "Cifar10 Train",
+    path: "cifar10_train.pbtxt",
+  },
+  {
+    name: "Cifar10 Multi-GPU Train",
+    path: "cifar10_multi_gpu_train.pbtxt",
+  },
+  {
+    name: "Cifar10 Eval",
+    path: "cifar10_eval.pbtxt",
+  },
+  {
+    name: "Fatcat LSTM",
+    path: "fatcat_lstm.pbtxt",
+  },
+  {
+    name: "Legacy Inception Renamed",
+    path: "legacy_inception_renamed.pbtxt",
+  },
+  {
+    name: "Wolfe (Broken)",
+    path: "wolfe1.pbtxt",
+  },
+  {
+    name: "Wolfe (Fixed)",
+    path: "wolfe2.pbtxt",
+  },
+  {
+    name: "AlexNet",
+    path: "alexnet.pbtxt",
+  },
+  {
+    name: "TestError404",
+    path: "nofile"
+  }
+];
+
+Polymer({
+  is: 'tf-graph-demo',
+  properties: {
+    hasStats: Boolean,
+    datasets: {
+      type: Object,
+      value: function() {
+        return this._getDatasets();
+      }
+    },
+    selectedDataset: {
+      type: Number,
+      value: 1
+    },
+    _progress: Object
+  },
+  _getDatasets: function() {
+    return _.map(datasets, function(dataset) {
+      var result = {
+        name: dataset.name,
+        path: this.resolveUrl('tf_model_zoo/' + dataset.path)
+      };
+      if (dataset.statsPath != null) {
+        result.statsPath = this.resolveUrl('tf_model_zoo/' + dataset.statsPath);
+      }
+      return result;
+    }, this);
+  }
+});
+})();
+</script>