1 files changed, 73 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-image-dashboard/demo/image-loader-demo.html b/tensorflow/tensorboard/components/tf-image-dashboard/demo/image-loader-demo.html
new file mode 100644
index 0000000000..7aafd247f3
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-image-dashboard/demo/image-loader-demo.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+    <script src="../../../bower_components/d3/d3.js"></script>
+    <script src="../../../bower_components/plottable/plottable.js"></script>
+    <link rel="stylesheet" type="text/css" href="../../../bower_components/plottable/plottable.css">
+    <link rel="import" href="../tf-image-dashboard.html">
+    <title>Event Dashboard Demo Demo</title>
+  </head>
+  <body>
+    <script>
+      TF.Urls.runsUrl = function() {
+        return "data/runs.json"
+      };
+      TF.Urls.scalarsUrl = function(tag, run) {
+        return "data/" + run + "/" + tag + ".json";
+      };
+    </script>
+
+    <dom-module id="x-demo">
+      <style>
+      #loader {
+        width: 300px;
+        height: 300px;
+      }
+      </style>
+      <template>
+        <tf-image-loader
+          id="loader"
+          run="[[run]]"
+          tag="[[tag]]"
+          images-generator="[[imagesGenerator]]"
+          individual-image-generator="[[individualImageGenerator]]"
+        ></tf-image-loader>
+      </template>
+      <script>
+      var imagesUrl = function(tag, run) {
+        return "data/images/" + run + "/" + tag + ".json";
+      };
+      var individualImageUrl = function(query) {
+        return "data/individualImage/" + query + ".png";
+      };
+      Polymer({
+        is: "x-demo",
+        properties: {
+          run: {
+            type: String,
+            value: "train",
+          },
+          tag: {
+            type: String,
+            value: "reconstruction_07%2Fimage%2F2"
+          },
+          imagesGenerator: {
+            type: Function,
+            value: function() {
+              return imagesUrl;
+            },
+          },
+          individualImageGenerator: {
+            type: Function,
+            value: function() {
+              return individualImageUrl;
+            },
+          },
+        },
+      });
+      </script>
+    </dom-module>
+    <x-demo id="demo"></x-demo>
+  </body>
+</html>