Improve training progress bar (#243)

1. Throttle render rate at 50 ms; previously it was 16 ms.
2. When metrics string is too long, cut it off to avoid new lines being
   created constantly
3. Adaptively set the threshold for metrics string length based on
   console width
4. Avoid very long number strings (e.g., 0.0000000007) when
  a metric has a very small positive value.

Fixes tensorflow/tfjs#1468

src/callbacks.ts

@@ -40,6 +40,10 @@ export class ProgbarLogger extends CustomCallback {
   private usPerStep: number;
   private batchesInLatestEpoch: number;
 
+  private terminalWidth: number;
+
+  private readonly RENDER_THROTTLE_MS = 50;
+
   /**
    * Construtor of LoggingCallback.
    */
@@ -64,16 +68,24 @@ export class ProgbarLogger extends CustomCallback {
         this.epochDurationMillis = null;
         this.usPerStep = null;
         this.batchesInLatestEpoch = 0;
+        this.terminalWidth = process.stderr.columns;
       },
       onBatchEnd: async (batch: number, logs?: Logs) => {
         this.batchesInLatestEpoch++;
         if (batch === 0) {
           this.progressBar = new progressBarHelper.ProgressBar(
-              'eta=:eta :bar :placeholderForLossesAndMetrics',
-              {total: this.numTrainBatchesPerEpoch + 1, head: `>`});
+              'eta=:eta :bar :placeholderForLossesAndMetrics', {
+                width: Math.floor(0.5 * this.terminalWidth),
+                total: this.numTrainBatchesPerEpoch + 1,
+                head: `>`,
+                renderThrottle: this.RENDER_THROTTLE_MS
+              });
         }
+        const maxMetricsStringLength =
+            Math.floor(this.terminalWidth * 0.5 - 12);
         const tickTokens = {
-          placeholderForLossesAndMetrics: this.formatLogsAsMetricsContent(logs)
+          placeholderForLossesAndMetrics:
+              this.formatLogsAsMetricsContent(logs, maxMetricsStringLength)
         };
         if (this.numTrainBatchesPerEpoch === 0) {
           // Undetermined number of batches per epoch.
@@ -109,16 +121,22 @@ export class ProgbarLogger extends CustomCallback {
     });
   }
 
-  private formatLogsAsMetricsContent(logs: Logs): string {
+  private formatLogsAsMetricsContent(
+      logs: Logs, maxMetricsLength?: number): string {
     let metricsContent = '';
     const keys = Object.keys(logs).sort();
     for (const key of keys) {
       if (this.isFieldRelevant(key)) {
         const value = logs[key];
-        const decimalPlaces = getDisplayDecimalPlaces(value);
-        metricsContent += `${key}=${value.toFixed(decimalPlaces)} `;
+        metricsContent += `${key}=${getSuccinctNumberDisplay(value)} `;
       }
     }
+
+    if (maxMetricsLength != null && metricsContent.length > maxMetricsLength) {
+      // Cut off metrics strings that are too long to avoid new lines being
+      // constantly created.
+      metricsContent = metricsContent.slice(0, maxMetricsLength - 3) + '...';
+    }
     return metricsContent;
   }
 
@@ -127,14 +145,31 @@ export class ProgbarLogger extends CustomCallback {
   }
 }
 
+const BASE_NUM_DIGITS = 2;
+const MAX_NUM_DECIMAL_PLACES = 4;
+
+/**
+ * Get a succint string representation of a number.
+ *
+ * Uses decimal notation if the number isn't too small.
+ * Otherwise, use engineering notation.
+ *
+ * @param x Input number.
+ * @return Succinct string representing `x`.
+ */
+export function getSuccinctNumberDisplay(x: number): string {
+  const decimalPlaces = getDisplayDecimalPlaces(x);
+  return decimalPlaces > MAX_NUM_DECIMAL_PLACES ?
+      x.toExponential(BASE_NUM_DIGITS) : x.toFixed(decimalPlaces);
+}
+
 /**
  * Determine the number of decimal places to display.
  *
  * @param x Number to display.
  * @return Number of decimal places to display for `x`.
  */
 export function getDisplayDecimalPlaces(x: number): number {
-  const BASE_NUM_DIGITS = 2;
   if (!Number.isFinite(x) || x === 0 || x > 1 || x < -1) {
     return BASE_NUM_DIGITS;
   } else {

src/callbacks_test.ts

@@ -17,7 +17,8 @@
 
 import * as tf from '@tensorflow/tfjs';
 
-import {getDisplayDecimalPlaces, progressBarHelper} from './callbacks';
+// tslint:disable-next-line:max-line-length
+import {getDisplayDecimalPlaces, getSuccinctNumberDisplay, progressBarHelper} from './callbacks';
 
 describe('progbarLogger', () => {
   // Fake progbar class written for testing.
@@ -31,6 +32,18 @@ describe('progbarLogger', () => {
     }
   }
 
+  let originalStderrColumns: number;
+
+  beforeEach(() => {
+    // In some CI environments, process.stderr.columns has a null value.
+    originalStderrColumns = process.stderr.columns;
+    process.stderr.columns = 100;
+  });
+
+  afterEach(() => {
+    process.stderr.columns = originalStderrColumns;
+  });
+
   it('Model.fit with loss, no metric, no validation, verobse = 1', async () => {
     const fakeProgbars: FakeProgbar[] = [];
     spyOn(progressBarHelper, 'ProgressBar')
@@ -261,6 +274,38 @@ describe('progbarLogger', () => {
   });
 });
 
+describe('getSuccinctNumberDisplay', () => {
+  it('Not finite', () => {
+    expect(getSuccinctNumberDisplay(Infinity)).toEqual('Infinity');
+    expect(getSuccinctNumberDisplay(-Infinity)).toEqual('-Infinity');
+    expect(getSuccinctNumberDisplay(NaN)).toEqual('NaN');
+  });
+
+  it('zero', () => {
+    expect(getSuccinctNumberDisplay(0)).toEqual('0.00');
+  });
+
+  it('Finite and positive', () => {
+    expect(getSuccinctNumberDisplay(300)).toEqual('300.00');
+    expect(getSuccinctNumberDisplay(30)).toEqual('30.00');
+    expect(getSuccinctNumberDisplay(1)).toEqual('1.00');
+    expect(getSuccinctNumberDisplay(1e-2)).toEqual('0.0100');
+    expect(getSuccinctNumberDisplay(1e-3)).toEqual('1.00e-3');
+    expect(getSuccinctNumberDisplay(4e-3)).toEqual('4.00e-3');
+    expect(getSuccinctNumberDisplay(1e-6)).toEqual('1.00e-6');
+  });
+
+  it('Finite and negative', () => {
+    expect(getSuccinctNumberDisplay(-300)).toEqual('-300.00');
+    expect(getSuccinctNumberDisplay(-30)).toEqual('-30.00');
+    expect(getSuccinctNumberDisplay(-1)).toEqual('-1.00');
+    expect(getSuccinctNumberDisplay(-1e-2)).toEqual('-0.0100');
+    expect(getSuccinctNumberDisplay(-1e-3)).toEqual('-1.00e-3');
+    expect(getSuccinctNumberDisplay(-4e-3)).toEqual('-4.00e-3');
+    expect(getSuccinctNumberDisplay(-1e-6)).toEqual('-1.00e-6');
+  });
+});
+
 describe('getDisplayDecimalPlaces', () => {
   it('Not finite', () => {
     expect(getDisplayDecimalPlaces(Infinity)).toEqual(2);