Make tf.browser.fromPixels and route tf.fromPixels to it. (tensorflow#1540)

MISC
We will delete tf.fromPixels in the 1.0 branch.

Fixes tensorflow/tfjs#669

Author: Nikhil Thorat

src/engine_test.ts

@@ -32,7 +32,7 @@ describeWithFlags('fromPixels + regular math op', WEBGL_ENVS, () => {
       pixels.data[i] = 250;
     }
 
-    const a = tf.fromPixels(pixels, 4);
+    const a = tf.browser.fromPixels(pixels, 4);
     const b = tf.scalar(20, 'int32');
 
     const res = tf.add(a, b);
@@ -622,12 +622,12 @@ describeWithFlags('Switching WebGL + CPU backends', WEBGL_ENVS, () => {
 
   it('fromPixels with mixed backends works', () => {
     tf.setBackend('webgl1');
-    const a =
-        tf.fromPixels(new ImageData(new Uint8ClampedArray([1, 2, 3, 4]), 1, 1));
+    const a = tf.browser.fromPixels(
+        new ImageData(new Uint8ClampedArray([1, 2, 3, 4]), 1, 1));
 
     tf.setBackend('webgl2');
-    const b =
-        tf.fromPixels(new ImageData(new Uint8ClampedArray([5, 6, 7, 8]), 1, 1));
+    const b = tf.browser.fromPixels(
+        new ImageData(new Uint8ClampedArray([5, 6, 7, 8]), 1, 1));
 
     expectArraysClose(tf.add(a, b), [6, 8, 10]);
   });

src/index.ts

@@ -27,6 +27,7 @@ import {deprecationWarn, disableDeprecationWarnings, enableProdMode, Environment
 // Serialization.
 import * as io from './io/io';
 import * as math from './math';
+import * as browser from './ops/browser';
 import * as serialization from './serialization';
 import {setOpHandler} from './tensor';
 import * as test_util from './test_util';
@@ -69,7 +70,7 @@ export {version as version_core};
 export {nextFrame, enableProdMode, disableDeprecationWarnings, deprecationWarn};
 
 // Second level exports.
-export {environment, io, math, serialization, test_util, util, webgl};
+export {browser, environment, io, math, serialization, test_util, util, webgl};
 
 // Backend specific.
 export {KernelBackend, BackendTimingInfo, DataMover, DataStorage} from './kernels/backend';

src/kernels/backend_cpu.ts

@@ -115,7 +115,8 @@ export class MathBackendCPU implements KernelBackend {
       pixels: ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement,
       numChannels: number): Tensor3D {
     if (pixels == null) {
-      throw new Error('pixels passed to tf.fromPixels() can not be null');
+      throw new Error(
+          'pixels passed to tf.browser.fromPixels() can not be null');
     }
     let vals: Uint8ClampedArray;
     // tslint:disable-next-line:no-any
@@ -150,7 +151,7 @@ export class MathBackendCPU implements KernelBackend {
                  .data;
     } else {
       throw new Error(
-          'pixels passed to tf.fromPixels() must be either an ' +
+          'pixels passed to tf.browser.fromPixels() must be either an ' +
           `HTMLVideoElement, HTMLImageElement, HTMLCanvasElement or ` +
           `ImageData, but was ${(pixels as {}).constructor.name}`);
     }

src/kernels/backend_webgl.ts

@@ -207,7 +207,8 @@ export class MathBackendWebGL implements KernelBackend {
       pixels: ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement,
       numChannels: number): Tensor3D {
     if (pixels == null) {
-      throw new Error('pixels passed to tf.fromPixels() can not be null');
+      throw new Error(
+          'pixels passed to tf.browser.fromPixels() can not be null');
     }
     const texShape: [number, number] = [pixels.height, pixels.width];
     const outShape = [pixels.height, pixels.width, numChannels];
@@ -218,17 +219,18 @@ export class MathBackendWebGL implements KernelBackend {
           !(pixels instanceof HTMLCanvasElement) &&
           !(pixels instanceof ImageData)) {
         throw new Error(
-            'pixels passed to tf.fromPixels() must be either an ' +
+            'pixels passed to tf.browser.fromPixels() must be either an ' +
             `HTMLVideoElement, HTMLImageElement, HTMLCanvasElement or ` +
             `ImageData, but was ${(pixels as {}).constructor.name}`);
       }
       if (pixels instanceof HTMLVideoElement) {
         if (this.fromPixels2DContext == null) {
           if (document.readyState !== 'complete') {
             throw new Error(
-                'The DOM is not ready yet. Please call tf.fromPixels() ' +
-                'once the DOM is ready. One way to do that is to add an ' +
-                'event listener for `DOMContentLoaded` on the document object');
+                'The DOM is not ready yet. Please call ' +
+                'tf.browser.fromPixels() once the DOM is ready. One way to ' +
+                'do that is to add an event listener for `DOMContentLoaded` ' +
+                'on the document object');
           }
           this.fromPixels2DContext =
               document.createElement('canvas').getContext('2d');

src/ops/array_ops.ts

@@ -20,7 +20,9 @@ import {Tensor, Tensor1D, Tensor2D, Tensor3D, Tensor4D, TensorBuffer} from '../t
 import {convertToTensor, convertToTensorArray} from '../tensor_util_env';
 import {DataType, DataTypeMap, Rank, ShapeMap, TensorLike, TensorLike4D} from '../types';
 import * as util from '../util';
+
 import {getAxesPermutation, getInnerMostAxes} from './axis_util';
+import {fromPixels as browserFromPixels, toPixels as browserToPixels} from './browser';
 import {concat} from './concat_split';
 import {op} from './operation';
 import {MPRandGauss} from './rand';
@@ -306,17 +308,7 @@ function oneHot_(
 }
 
 /**
- * Creates a `tf.Tensor` from an image.
- *
- * ```js
- * const image = new ImageData(1, 1);
- * image.data[0] = 100;
- * image.data[1] = 150;
- * image.data[2] = 200;
- * image.data[3] = 255;
- *
- * tf.fromPixels(image).print();
- * ```
+ * Deprecated. Use `tf.browser.fromPixels`.
  *
  * @param pixels The input image to construct the tensor from. The
  * supported image types are all 4-channel.
@@ -328,22 +320,11 @@ function oneHot_(
 function fromPixels_(
     pixels: ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement,
     numChannels = 3): Tensor3D {
-  if (numChannels > 4) {
-    throw new Error(
-        'Cannot construct Tensor with more than 4 channels from pixels.');
-  }
-  return ENV.engine.fromPixels(pixels, numChannels);
+  return browserFromPixels(pixels, numChannels);
 }
 
 /**
- * Draws a `tf.Tensor` of pixel values to a byte array or optionally a
- * canvas.
- *
- * When the dtype of the input is 'float32', we assume values in the range
- * [0-1]. Otherwise, when input is 'int32', we assume values in the range
- * [0-255].
- *
- * Returns a promise that resolves when the canvas has been drawn to.
+ * Deprecated. Use `tf.browser.toPixels`.
  *
  * @param img A rank-2 or rank-3 tensor. If rank-2, draws grayscale. If
  *     rank-3, must have depth of 1, 3 or 4. When depth of 1, draws
@@ -356,89 +337,7 @@ function fromPixels_(
 async function toPixels(
     img: Tensor2D|Tensor3D|TensorLike,
     canvas?: HTMLCanvasElement): Promise<Uint8ClampedArray> {
-  let $img = convertToTensor(img, 'img', 'toPixels');
-  if (!(img instanceof Tensor)) {
-    // Assume int32 if user passed a native array.
-    $img = $img.toInt();
-  }
-  if ($img.rank !== 2 && $img.rank !== 3) {
-    throw new Error(
-        `toPixels only supports rank 2 or 3 tensors, got rank ${$img.rank}.`);
-  }
-  const [height, width] = $img.shape.slice(0, 2);
-  const depth = $img.rank === 2 ? 1 : $img.shape[2];
-
-  if (depth > 4 || depth === 2) {
-    throw new Error(
-        `toPixels only supports depth of size ` +
-        `1, 3 or 4 but got ${depth}`);
-  }
-
-  const minTensor = $img.min();
-  const maxTensor = $img.max();
-  const min = (await minTensor.data())[0];
-  const max = (await maxTensor.data())[0];
-  minTensor.dispose();
-  maxTensor.dispose();
-  if ($img.dtype === 'float32') {
-    if (min < 0 || max > 1) {
-      throw new Error(
-          `Tensor values for a float32 Tensor must be in the ` +
-          `range [0 - 1] but got range [${min} - ${max}].`);
-    }
-  } else if ($img.dtype === 'int32') {
-    if (min < 0 || max > 255) {
-      throw new Error(
-          `Tensor values for a int32 Tensor must be in the ` +
-          `range [0 - 255] but got range [${min} - ${max}].`);
-    }
-  } else {
-    throw new Error(
-        `Unsupported type for toPixels: ${$img.dtype}.` +
-        ` Please use float32 or int32 tensors.`);
-  }
-
-  const data = await $img.data();
-  const multiplier = $img.dtype === 'float32' ? 255 : 1;
-  const bytes = new Uint8ClampedArray(width * height * 4);
-
-  for (let i = 0; i < height * width; ++i) {
-    let r, g, b, a;
-    if (depth === 1) {
-      r = data[i] * multiplier;
-      g = data[i] * multiplier;
-      b = data[i] * multiplier;
-      a = 255;
-    } else if (depth === 3) {
-      r = data[i * 3] * multiplier;
-      g = data[i * 3 + 1] * multiplier;
-      b = data[i * 3 + 2] * multiplier;
-      a = 255;
-    } else if (depth === 4) {
-      r = data[i * 4] * multiplier;
-      g = data[i * 4 + 1] * multiplier;
-      b = data[i * 4 + 2] * multiplier;
-      a = data[i * 4 + 3] * multiplier;
-    }
-
-    const j = i * 4;
-    bytes[j + 0] = Math.round(r);
-    bytes[j + 1] = Math.round(g);
-    bytes[j + 2] = Math.round(b);
-    bytes[j + 3] = Math.round(a);
-  }
-
-  if (canvas != null) {
-    canvas.width = width;
-    canvas.height = height;
-    const ctx = canvas.getContext('2d');
-    const imageData = new ImageData(bytes, width, height);
-    ctx.putImageData(imageData, 0, 0);
-  }
-  if ($img !== img) {
-    $img.dispose();
-  }
-  return bytes;
+  return browserToPixels(img, canvas);
 }
 
 /**
@@ -1210,7 +1109,7 @@ export const cumsum = op({cumsum_});
 export const depthToSpace = op({depthToSpace_});
 export const expandDims = op({expandDims_});
 export const eye = op({eye_});
-export const fromPixels = op({fromPixels_});
+export const fromPixels = fromPixels_;
 export const multinomial = op({multinomial_});
 export const oneHot = op({oneHot_});
 export const pad = op({pad_});