Add a deploy script to deploy all or one example to GCP. (tensorflow#31)

This PR:
- Adds deploy.sh which deploys all or 1 examples by going into directories, calling `yarn`, `yarn build` and then copying the `dist` folder to GCP. This is in bash so we don't need to make a package.json in the root of the repository.
- Adds links in the README to the statically hosted examples.
- Adds an `await tf.nextFrame()` to MNIST train loop which allows UI to update

The script can either be used without arguments, which deploys all demos:
```./deploy.sh```
Or you can pass a single argument specifying a single demo to deploy:
```./deploy.sh mnist```

This script assumes that a directory in this repo corresponds to an example.

I also created an "assets" folder in our GCP bucket, which mirrors this repo. Our bucket then looks like:

gs://tfjs-examples/assets/webcam-transfer-learning/pacman.js
gs://tfjs-examples/assets/...
gs://tfjs-examples/addition-rnn/dist/index.html
gs://tfjs-examples/mnist/dist/index.html
...

Author: Nikhil Thorat

addition-rnn/README.md

@@ -8,3 +8,4 @@ Note: this example is a port of the Keras addition RNN example with a UI.
 
 You can find the original Keras python code [here](https://github.com/keras-team/keras/blob/master/examples/addition_rnn.py).
 
+[See this example live!](https://storage.googleapis.com/tfjs-examples/addition-rnn/dist/index.html)

addition-rnn/package.json

@@ -11,7 +11,7 @@
   },
   "scripts": {
     "watch": "NODE_ENV=development parcel --no-hmr --open index.html ",
-    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url /"
+    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url ./"
   },
   "devDependencies": {
     "babel-plugin-transform-runtime": "~6.23.0",

deploy.sh

@@ -0,0 +1,58 @@
+#!/usr/bin/env bash
+# Copyright 2018 Google Inc. All Rights Reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+# =============================================================================
+
+# This script deploys examples to GCP so they can be statically hosted.
+#
+# The script can either be used without arguments, which deploys all demos:
+# ./deploy.sh
+# Or you can pass a single argument specifying a single demo to deploy:
+# ./deploy.sh mnist
+#
+# This script assumes that a directory in this repo corresponds to an example.
+#
+# Example directories should have:
+#  - package.json
+#  - `yarn build` script which generates a dist/ folder in the example directory.
+
+if [ -z "$1" ]
+  then
+    EXAMPLES=$(ls -d */)
+else
+  EXAMPLES=$1
+  if [ ! -d "$EXAMPLES" ]; then
+    echo "Error: Could not find example $1"
+    echo "Make sure the first argument to this script matches the example dir"
+    exit 1
+  fi
+fi
+
+for i in $EXAMPLES; do
+  cd ${i}
+  # Strip any trailing slashes.
+  EXAMPLE_NAME=${i%/}
+
+  echo "building ${EXAMPLE_NAME}..."
+  yarn
+  yarn build
+  gsutil mkdir -p gs://tfjs-examples/$EXAMPLE_NAME
+  gsutil mkdir -p gs://tfjs-examples/$EXAMPLE_NAME/dist
+  gsutil -m cp dist/* gs://tfjs-examples/$EXAMPLE_NAME/dist
+  cd ..
+done
+
+gsutil -m setmeta -h "Cache-Control:private" "gs://tfjs-examples/**.html"
+gsutil -m setmeta -h "Cache-Control:private" "gs://tfjs-examples/**.css"
+gsutil -m setmeta -h "Cache-Control:private" "gs://tfjs-examples/**.js"

iris/README.md

@@ -20,3 +20,5 @@ To launch the demo, do
 yarn
 yarn watch
 ```
+
+[See this example live!](https://storage.googleapis.com/tfjs-examples/iris/dist/index.html)

iris/package.json

@@ -11,7 +11,7 @@
   },
   "scripts": {
     "watch": "NODE_ENV=development parcel --no-hmr --open index.html ",
-    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url /"
+    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url ./"
   },
   "devDependencies": {
     "babel-plugin-transform-runtime": "~6.23.0",

mnist-core/README.md

@@ -6,3 +6,5 @@ This example shows you how to train MNIST only using the [TensorFlow.js core]
 Note: currently the entire dataset of MNIST images is stored in a PNG image we have
 sprited, and the code in `data.js` is responsible for converting it into
 `Tensor`s. This will become much simpler in the near future.
+
+[See this example live!](https://storage.googleapis.com/tfjs-examples/mnist-core/dist/index.html)

mnist-core/package.json

@@ -10,7 +10,7 @@
   },
   "scripts": {
     "watch": "NODE_ENV=development parcel --no-hmr --open index.html ",
-    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url /"
+    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url ./"
   },
   "devDependencies": {
     "babel-plugin-transform-runtime": "~6.23.0",

mnist/README.md

@@ -11,3 +11,5 @@ be reduced by computing accuracy over fewer examples less often.
 Note: currently the entire dataset of MNIST images is stored in a PNG image we have
 sprited, and the code in `data.js` is responsible for converting it into
 `Tensor`s. This will become much simpler in the near future.
+
+[See this example live!](https://storage.googleapis.com/tfjs-examples/mnist/dist/index.html)

mnist/index.js

@@ -102,6 +102,8 @@ async function train() {
       testBatch.xs.dispose();
       testBatch.labels.dispose();
     }
+
+    await tf.nextFrame();
   }
 }
 

mnist/package.json

@@ -11,7 +11,7 @@
   },
   "scripts": {
     "watch": "NODE_ENV=development parcel --no-hmr --open index.html ",
-    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url /"
+    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url ./"
   },
   "devDependencies": {
     "babel-plugin-transform-runtime": "~6.23.0",

mobilenet/README.md

@@ -8,3 +8,5 @@ Keras pretrained mobilenet model and hosted online for your convenience.
 
 If you want, you can port your own mobilenet model by using the Keras converter script which
 can be found [here](https://github.com/tensorflow/tfjs-layers/blob/master/scripts/keras_model_converter.py).
+
+[See this example live!](https://storage.googleapis.com/tfjs-examples/mobilenet/dist/index.html)

mobilenet/package.json

@@ -10,7 +10,7 @@
   },
   "scripts": {
     "watch": "NODE_ENV=development parcel --no-hmr --open index.html ",
-    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url /"
+    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url ./"
   },
   "devDependencies": {
     "babel-plugin-transform-runtime": "~6.23.0",

polynomial-regression-core/README.md

@@ -1,3 +1,5 @@
 # TensorFlow.js Example: Fitting a curve to synthetic data
 
-This example shows you how to use TensorFlow.js operations and optimizers (the lower level api) to write a simple model that learns the coefficients of polynomial that we want to use to describe our data. In this toy example, we generate synthetic data by adding some noise to a polynomial function. Then starting with random coefficients, we train a model to learn the true coefficients that data was generated with.
+This example shows you how to use TensorFlow.js operations and optimizers (the lower level api) to write a simple model that learns the coefficients of polynomial that we want to use to describe our data. In this toy example, we generate synthetic data by adding some noise to a polynomial function. Then starting with random coefficients, we train a model to learn the true coefficients that data was generated with.
+
+[See this example live!](https://storage.googleapis.com/tfjs-examples/dist/polynomial-regression-core/index.html)

polynomial-regression-core/package.json

@@ -12,7 +12,7 @@
   },
   "scripts": {
     "watch": "NODE_ENV=development parcel --no-hmr --open index.html ",
-    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url /"
+    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url ./"
   },
   "devDependencies": {
     "babel-plugin-transform-runtime": "~6.23.0",

polynomial-regression/README.md

@@ -2,3 +2,5 @@
 
 This example creates a synthetic polynomial dataset and fits the polynomial
 curve using the layers API.
+
+[See this example live!](https://storage.googleapis.com/tfjs-examples/polynomial-regression/dist/index.html)

polynomial-regression/package.json

@@ -10,7 +10,7 @@
   },
   "scripts": {
     "watch": "NODE_ENV=development parcel --no-hmr --open index.html ",
-    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url /"
+    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url ./"
   },
   "devDependencies": {
     "babel-plugin-transform-runtime": "~6.23.0",

sentiment/README.md

@@ -22,3 +22,5 @@ To launch the demo, do
 yarn
 yarn watch
 ```
+
+[See this example live!](https://storage.googleapis.com/tfjs-examples/sentiment/dist/index.html)

sentiment/package.json

@@ -11,7 +11,7 @@
   },
   "scripts": {
     "watch": "NODE_ENV=development parcel --no-hmr --open index.html ",
-    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url /"
+    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url ./"
   },
   "devDependencies": {
     "babel-plugin-transform-runtime": "~6.23.0",

translation/README.md

@@ -16,3 +16,5 @@ To launch the demo, do
 yarn
 yarn watch
 ```
+
+[See this example live!](https://storage.googleapis.com/tfjs-examples/translation/dist/index.html)

translation/package.json

@@ -11,7 +11,7 @@
   },
   "scripts": {
     "watch": "NODE_ENV=development parcel --no-hmr --open index.html ",
-    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url /"
+    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url ./"
   },
   "devDependencies": {
     "babel-plugin-transform-runtime": "~6.23.0",

webcam-transfer-learning/README.md

@@ -7,4 +7,4 @@ In this example, we'll use a pretrained [MobileNet](https://github.com/tensorflo
 using an internal mobilenet activation to predict 4 different classes from the
 webcam defined by the user.
 
-You can find this demo here: ...
+[See this example live!](https://storage.googleapis.com/tfjs-examples/webcam-transfer-learning/dist/index.html)

webcam-transfer-learning/index.html

@@ -18,9 +18,8 @@
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-teal.min.css" />
 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-<script src="https://storage.googleapis.com/tfjs-examples/webcam-transfer-learning/modernizr-1.5.min.js"></script>
 <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
-
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Webcam Pacman</title>
 
 <style>
@@ -209,7 +208,7 @@
     height: 186px;
     position: relative;
     margin-bottom: 9px;
-    background: url('https://storage.googleapis.com/tfjs-examples/webcam-transfer-learning/bck.png');
+    background: url('https://storage.googleapis.com/tfjs-examples/assets/webcam-transfer-learning/bck.png');
   }
   #logo-l {
     width: 200px;
@@ -354,6 +353,7 @@
       <div id="train-status"></div>
     </div>
   </div>
+  <div id="copyright">PAC-MAN™ & © BANDAI NAMCO Entertainment Inc.</div>
 </div>
-<script src="https://storage.googleapis.com/tfjs-examples/webcam-transfer-learning/pacman-google.js"></script>
+<script src="https://storage.googleapis.com/tfjs-examples/assets/webcam-transfer-learning/pacman-google.js"></script>
 <script src="index.js"></script>

webcam-transfer-learning/package.json

@@ -11,7 +11,7 @@
   },
   "scripts": {
     "watch": "NODE_ENV=development parcel --no-hmr --open index.html ",
-    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url /"
+    "build": "NODE_ENV=production parcel build index.html  --no-minify --public-url ./"
   },
   "devDependencies": {
     "babel-plugin-transform-runtime": "~6.23.0",