diff options
Diffstat (limited to 'tensorflow/tensorboard/components/tf-image-dashboard/demo')
-rw-r--r-- | tensorflow/tensorboard/components/tf-image-dashboard/demo/image-loader-demo.html | 73 | ||||
-rw-r--r-- | tensorflow/tensorboard/components/tf-image-dashboard/demo/index.html | 39 |
2 files changed, 112 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> diff --git a/tensorflow/tensorboard/components/tf-image-dashboard/demo/index.html b/tensorflow/tensorboard/components/tf-image-dashboard/demo/index.html new file mode 100644 index 0000000000..4645b4b783 --- /dev/null +++ b/tensorflow/tensorboard/components/tf-image-dashboard/demo/index.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="stylesheet" type="text/css" href="../../../lib/css/global.css"> + <link rel="import" href="../tf-image-dashboard.html"> + <title>Image Dashboard Demo</title> + <style> + #container{ + width: 500px; + height: 800px; + border: 2px solid grey; + } + html,body { + height: 100%; + } + </style> + </head> + <body> + <script> + TF.Urls.runsUrl = function() { + return "data/runs.json" + }; + TF.Urls.imagesUrl = function(tag, run) { + return "data/images/" + run + "/" + tag + ".json"; + }; + TF.Urls.individualImageUrl = function(query) { + return "data/individualImage/" + query + ".png"; + } + </script> + + <p>The image dashboard is deliberately inside a small container + so that it's easy to test that the scroll bars display properly.</p> + <p>Looks goofy though.</p> + <div id="container"> + <tf-image-dashboard id="demo"></tf-image-dashboard> + </div> + </body> +</html> |