A few fixes and improvements to the cart-pole demo (#120)

1. tf.sigmoidCrossentropyWithLogits is replaces with
   tf.losses.sigmoidCrossEntropy in the latest release of tensorflow.js
   (0.12.4)
2. Replace the unicode arrows with ASCII ones. The unicode ones doesn't
   work properly on some devices.
3. Put the cart-pole canvas on top, closer to the status message.

Author: caisq

cart-pole/index.html

@@ -25,9 +25,13 @@
   <style>
     #app-status {
       color: blue;
+      font-family: monospace;
       font-size: 150%;
       padding-bottom: 1em;
     }
+    #cart-pole-canvas {
+      display: none;
+    }
     button {
       font-size: 105%;
       min-width: 120px;
@@ -74,6 +78,10 @@ <h1>TensorFlow.js Example:<br/>Reinforcement Learning: Cart Pole </h1>
         <span id="app-status">Standing by.</span>
       </div>
 
+      <div>
+        <canvas id="cart-pole-canvas" height="150px" width="500px"></canvas>
+      </div>
+
       <div>
         <div class="horizontal-sections">
           <div class="input-div">
@@ -136,10 +144,6 @@ <h1>TensorFlow.js Example:<br/>Reinforcement Learning: Cart Pole </h1>
           <div class="canvases" id="steps-canvas"></div>
         </div>
       </div>
-
-      <div>
-        <canvas id="cart-pole-canvas" height="150px" width="500px"></canvas>
-      </div>
     </div>
 
     <script src="index.js"></script>

cart-pole/index.js

@@ -186,7 +186,7 @@ class PolicyNetwork {
       this.currentActions_ = actions.dataSync();
       const labels =
           tf.sub(1, tf.tensor2d(this.currentActions_, actions.shape));
-      return tf.sigmoidCrossEntropyWithLogits(labels, logits).asScalar();
+      return tf.losses.sigmoidCrossEntropy(labels, logits).asScalar();
     });
     return tf.variableGrads(f);
   }

cart-pole/ui.js

@@ -125,7 +125,6 @@ function enableModelControls() {
   deleteStoredModelButton.disabled = false;
 }
 
-
 /**
  * Render the current state of the system on an HTML canvas.
  *
@@ -134,6 +133,9 @@ function enableModelControls() {
  *   the rendering will happen.
  */
 function renderCartPole(cartPole, canvas) {
+  if (!canvas.style.display) {
+    canvas.style.display = 'block';
+  }
   const X_MIN = -cartPole.xThreshold;
   const X_MAX = cartPole.xThreshold;
   const xRange = X_MAX - X_MIN;
@@ -306,7 +308,7 @@ export async function setUpUI() {
         const action = policyNet.getActions(cartPole.getStateTensor())[0];
         logStatus(
             `Test in progress. ` +
-            `Action: ${action === 1 ? '←' : ' →'} (Step ${steps})`);
+            `Action: ${action === 1 ? '<--' : ' -->'} (Step ${steps})`);
         isDone = cartPole.update(action);
         renderCartPole(cartPole, cartPoleCanvas);
       });