Use MLTensor for Code and Image Classification samples

Fixed partial of #275

code/.eslintrc.js

@@ -3,6 +3,7 @@ module.exports = {
     'CodeMirror': 'readonly',
     'executeCodeSnippet': 'readonly',
     'sizeOfShape': 'readonly',
+    'MLTensorUsage': 'readonly',
   },
   ignorePatterns: ['libs/'],
 };

code/samples/matmul.js

@@ -1,25 +1,30 @@
 // Step 0: Create a context and graph builder for 'gpu', 'cpu' or 'npu'.
 const context = await navigator.ml.createContext({deviceType: 'gpu'});
 const builder = new MLGraphBuilder(context);
+const descA = {dataType: 'float32', dimensions: [3, 4], shape: [3, 4]};
+const descB = {dataType: 'float32', dimensions: [4, 3], shape: [4, 3]};
 // Step 1: Create a computational graph calculating `c = a * b`.
-const a = builder.input('a', {
-  dataType: 'float32',
-  dimensions: [3, 4],
-  shape: [3, 4],
-});
-const b = builder.input('b', {
-  dataType: 'float32',
-  dimensions: [4, 3],
-  shape: [4, 3],
-});
+const a = builder.input('a', descA);
+const b = builder.input('b', descB);
 const c = builder.matmul(a, b);
 // Step 2: Compile it into an executable graph.
 const graph = await builder.build({c});
 // Step 3: Bind input and output buffers to the graph and execute.
 const bufferA = new Float32Array(3*4).fill(1.0);
 const bufferB = new Float32Array(4*3).fill(0.8);
-const bufferC = new Float32Array(3*3);
-const results = await context.compute(
-    graph, {'a': bufferA, 'b': bufferB}, {'c': bufferC});
+descA.usage = MLTensorUsage.WRITE;
+descB.usage = MLTensorUsage.WRITE;
+const tensorA = await context.createTensor(descA);
+const tensorB = await context.createTensor(descB);
+context.writeTensor(tensorA, bufferA);
+context.writeTensor(tensorB, bufferB);
+const tensorC = await context.createTensor({
+  dataType: 'float32',
+  dimensions: [3, 3],
+  shape: [3, 3],
+  usage: MLTensorUsage.READ,
+});
+context.dispatch(graph, {a: tensorA, b: tensorB}, {c: tensorC});
+const results = await context.readTensor(tensorC);
 // Step 4: Retrieve the results.
-console.log(`values: ${results.outputs.c}`);
+console.log(`values: ${new Float32Array(results)}`);

code/samples/mul_add.js

@@ -1,21 +1,30 @@
-const operandType = {dataType: 'float32', dimensions: [2, 2], shape: [2, 2]};
+const desc = {dataType: 'float32', dimensions: [2, 2], shape: [2, 2]};
 const context = await navigator.ml.createContext();
 const builder = new MLGraphBuilder(context);
 // 1. Create a computational graph 'C = 0.2 * A + B'.
 const constant = builder.constant(
     {dataType: 'float32'}, new Float32Array([0.2]));
-const A = builder.input('A', operandType);
-const B = builder.input('B', operandType);
+const A = builder.input('A', desc);
+const B = builder.input('B', desc);
 const C = builder.add(builder.mul(A, constant), B);
 // 2. Build the graph into an executable.
 const graph = await builder.build({'C': C});
 // 3. Bind inputs to the graph and execute for the result.
 const bufferA = new Float32Array(4).fill(1.0);
 const bufferB = new Float32Array(4).fill(0.8);
-const bufferC = new Float32Array(4);
-const inputs = {'A': bufferA, 'B': bufferB};
-const outputs = {'C': bufferC};
-const results = await context.compute(graph, inputs, outputs);
+desc.usage = MLTensorUsage.WRITE;
+const tensorA = await context.createTensor(desc);
+const tensorB = await context.createTensor(desc);
+context.writeTensor(tensorA, bufferA);
+context.writeTensor(tensorB, bufferB);
+const tensorC = await context.createTensor({
+  ...desc,
+  usage: MLTensorUsage.READ,
+});
+const inputs = {'A': tensorA, 'B': tensorB};
+const outputs = {'C': tensorC};
+context.dispatch(graph, inputs, outputs);
 // The computed result of [[1, 1], [1, 1]] is in the buffer associated with
 // the output operand.
-console.log('Output value: ' + results.outputs.C);
+const results = await context.readTensor(tensorC);
+console.log('Output value: ' + new Float32Array(results));

code/samples/simple_graph.js

@@ -50,15 +50,26 @@ const graph = await builder.build({'output': output});
 // Setup the input buffers with value 1.
 const inputBuffer1 = new Float32Array(TENSOR_SIZE).fill(1);
 const inputBuffer2 = new Float32Array(TENSOR_SIZE).fill(1);
-const outputBuffer = new Float32Array(TENSOR_SIZE);
+
+desc.usage = MLTensorUsage.WRITE;
+const inputTensor1 = await context.createTensor(desc);
+const inputTensor2 = await context.createTensor(desc);
+context.writeTensor(inputTensor1, inputBuffer1);
+context.writeTensor(inputTensor2, inputBuffer2);
+
+const outputTensor = await context.createTensor({
+  ...desc,
+  usage: MLTensorUsage.READ,
+});
 
 // Execute the compiled graph with the specified inputs.
 const inputs = {
-  'input1': inputBuffer1,
-  'input2': inputBuffer2,
+  'input1': inputTensor1,
+  'input2': inputTensor2,
 };
-const outputs = {'output': outputBuffer};
-const results = await context.compute(graph, inputs, outputs);
+const outputs = {'output': outputTensor};
+context.dispatch(graph, inputs, outputs);
 
-console.log('Output value: ' + results.outputs.output);
+const results = await context.readTensor(outputTensor);
+console.log('Output value: ' + new Float32Array(results));
 // Output value: 2.25,2.25,2.25,2.25,2.25,2.25,2.25,2.25

image_classification/.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   globals: {
     'MLGraphBuilder': 'readonly',
+    'MLTensorUsage': 'readonly',
   },
 };

image_classification/efficientnet_fp16_nchw.js

@@ -8,6 +8,8 @@ export class EfficientNetFP16Nchw {
     this.context_ = null;
     this.builder_ = null;
     this.graph_ = null;
+    this.inputTensor_ = null;
+    this.outputTensor_ = null;
     this.weightsUrl_ = weightsOrigin() +
     '/test-data/models/efficientnet_fp16_nchw_optimized/weights/';
     this.inputOptions = {
@@ -18,7 +20,7 @@ export class EfficientNetFP16Nchw {
       labelUrl: './labels/labels1000.txt',
       inputShape: [1, 3, 224, 224],
     };
-    this.outputShape = [1, 1000];
+    this.outputShape_ = [1, 1000];
   }
 
   async buildConv_(input, name, blockName, clip = false, options = {}) {
@@ -75,10 +77,19 @@ export class EfficientNetFP16Nchw {
   async load(contextOptions) {
     this.context_ = await navigator.ml.createContext(contextOptions);
     this.builder_ = new MLGraphBuilder(this.context_);
-    let data = this.builder_.input('input', {
+    const inputDesc = {
       dataType: 'float32',
       dimensions: this.inputOptions.inputShape,
       shape: this.inputOptions.inputShape,
+    };
+    let data = this.builder_.input('input', inputDesc);
+    inputDesc.usage = MLTensorUsage.WRITE;
+    this.inputTensor_ = await this.context_.createTensor(inputDesc);
+    this.outputTensor_ = await this.context_.createTensor({
+      dataType: 'float32',
+      dimensions: this.outputShape_,
+      shape: this.outputShape_,
+      usage: MLTensorUsage.READ,
     });
     data = this.builder_.cast(data, 'float16');
     // Block 0
@@ -165,10 +176,12 @@ export class EfficientNetFP16Nchw {
     }
   }
 
-  async compute(inputBuffer, outputBuffer) {
-    const inputs = {'input': inputBuffer};
-    const outputs = {'output': outputBuffer};
-    const results = await this.context_.compute(this.graph_, inputs, outputs);
-    return results;
+  async compute(inputBuffer) {
+    this.context_.writeTensor(this.inputTensor_, inputBuffer);
+    const inputs = {'input': this.inputTensor_};
+    const outputs = {'output': this.outputTensor_};
+    this.context_.dispatch(this.graph_, inputs, outputs);
+    const results = await this.context_.readTensor(this.outputTensor_);
+    return new Float32Array(results);
   }
 }

image_classification/main.js

@@ -31,7 +31,6 @@ let loadTime = 0;
 let buildTime = 0;
 let computeTime = 0;
 let inputOptions;
-let outputBuffer;
 let deviceType = '';
 let lastdeviceType = '';
 let backend = '';
@@ -215,9 +214,8 @@ async function renderCamStream() {
   const inputCanvas = utils.getVideoFrame(camElement);
   console.log('- Computing... ');
   const start = performance.now();
-  const results = await netInstance.compute(inputBuffer, outputBuffer);
+  const outputBuffer = await netInstance.compute(inputBuffer);
   computeTime = (performance.now() - start).toFixed(2);
-  outputBuffer = results.outputs.output;
   console.log(`  done in ${computeTime} ms.`);
   drawInput(inputCanvas, 'camInCanvas');
   showPerfResult();
@@ -334,8 +332,6 @@ async function main() {
       netInstance = constructNetObject(instanceType);
       inputOptions = netInstance.inputOptions;
       labels = await fetchLabels(inputOptions.labelUrl);
-      outputBuffer =
-          new Float32Array(utils.sizeOfShape(netInstance.outputShape));
       isFirstTimeLoad = false;
       console.log(`- Model name: ${modelName}, Model layout: ${layout} -`);
       // UI shows model loading progress
@@ -369,12 +365,11 @@ async function main() {
       let medianComputeTime;
 
       // Do warm up
-      let results = await netInstance.compute(inputBuffer, outputBuffer);
+      let outputBuffer = await netInstance.compute(inputBuffer);
 
       for (let i = 0; i < numRuns; i++) {
         start = performance.now();
-        results = await netInstance.compute(
-            results.inputs.input, results.outputs.output);
+        outputBuffer = await netInstance.compute(inputBuffer);
         computeTime = (performance.now() - start).toFixed(2);
         console.log(`  compute time ${i+1}: ${computeTime} ms`);
         computeTimeArray.push(Number(computeTime));
@@ -384,7 +379,6 @@ async function main() {
         medianComputeTime = medianComputeTime.toFixed(2);
         console.log(`  median compute time: ${medianComputeTime} ms`);
       }
-      outputBuffer = results.outputs.output;
       console.log('outputBuffer: ', outputBuffer);
       await ui.showProgressComponent('done', 'done', 'done');
       ui.readyShowResultComponents();

image_classification/mobilenet_nchw.js

@@ -9,6 +9,8 @@ export class MobileNetV2Nchw {
     this.deviceType_ = null;
     this.builder_ = null;
     this.graph_ = null;
+    this.inputTensor_ = null;
+    this.outputTensor_ = null;
     this.dataType_ = dataType;
     this.weightsUrl_ = weightsOrigin();
     if (this.dataType_ === 'float32') {
@@ -27,7 +29,7 @@ export class MobileNetV2Nchw {
       labelUrl: './labels/labels1000.txt',
       inputShape: [1, 3, 224, 224],
     };
-    this.outputShape = [1, 1000];
+    this.outputShape_ = [1, 1000];
   }
 
   async buildConv_(input, name, relu6 = true, options = {}) {
@@ -89,10 +91,19 @@ export class MobileNetV2Nchw {
     this.context_ = await navigator.ml.createContext(contextOptions);
     this.deviceType_ = contextOptions.deviceType;
     this.builder_ = new MLGraphBuilder(this.context_);
-    let data = this.builder_.input('input', {
+    const inputDesc = {
       dataType: 'float32',
       dimensions: this.inputOptions.inputShape,
       shape: this.inputOptions.inputShape,
+    };
+    let data = this.builder_.input('input', inputDesc);
+    inputDesc.usage = MLTensorUsage.WRITE;
+    this.inputTensor_ = await this.context_.createTensor(inputDesc);
+    this.outputTensor_ = await this.context_.createTensor({
+      dataType: 'float32',
+      dimensions: this.outputShape_,
+      shape: this.outputShape_,
+      usage: MLTensorUsage.READ,
     });
     if (this.dataType_ === 'float16') {
       data = this.builder_.cast(data, 'float16');
@@ -163,10 +174,12 @@ export class MobileNetV2Nchw {
     }
   }
 
-  async compute(inputBuffer, outputBuffer) {
-    const inputs = {'input': inputBuffer};
-    const outputs = {'output': outputBuffer};
-    const results = await this.context_.compute(this.graph_, inputs, outputs);
-    return results;
+  async compute(inputBuffer) {
+    this.context_.writeTensor(this.inputTensor_, inputBuffer);
+    const inputs = {'input': this.inputTensor_};
+    const outputs = {'output': this.outputTensor_};
+    this.context_.dispatch(this.graph_, inputs, outputs);
+    const results = await this.context_.readTensor(this.outputTensor_);
+    return new Float32Array(results);
   }
 }

image_classification/mobilenet_nhwc.js

@@ -11,6 +11,8 @@ export class MobileNetV2Nhwc {
     this.deviceType_ = null;
     this.builder_ = null;
     this.graph_ = null;
+    this.inputTensor_ = null;
+    this.outputTensor_ = null;
     this.weightsUrl_ = weightsOrigin() +
       '/test-data/models/mobilenetv2_nhwc/weights/';
     this.inputOptions = {
@@ -20,7 +22,7 @@ export class MobileNetV2Nhwc {
       labelUrl: './labels/labels1001.txt',
       inputShape: [1, 224, 224, 3],
     };
-    this.outputShape = [1, 1001];
+    this.outputShape_ = [1, 1001];
   }
 
   async buildConv_(input, weightsSubName, biasSubName, relu6, options) {
@@ -87,10 +89,19 @@ export class MobileNetV2Nhwc {
     const strides = [2, 2];
     const autoPad = 'same-upper';
     const filterLayout = 'ohwi';
-    const input = this.builder_.input('input', {
+    const inputDesc = {
       dataType: 'float32',
       dimensions: this.inputOptions.inputShape,
       shape: this.inputOptions.inputShape,
+    };
+    const input = this.builder_.input('input', inputDesc);
+    inputDesc.usage = MLTensorUsage.WRITE;
+    this.inputTensor_ = await this.context_.createTensor(inputDesc);
+    this.outputTensor_ = await this.context_.createTensor({
+      dataType: 'float32',
+      dimensions: this.outputShape_,
+      shape: this.outputShape_,
+      usage: MLTensorUsage.READ,
     });
     const conv0 = this.buildConv_(
         input, '90', 'Conv_Conv2D', true, {strides, autoPad, filterLayout});
@@ -152,10 +163,12 @@ export class MobileNetV2Nhwc {
     }
   }
 
-  async compute(inputBuffer, outputBuffer) {
-    const inputs = {'input': inputBuffer};
-    const outputs = {'output': outputBuffer};
-    const results = await this.context_.compute(this.graph_, inputs, outputs);
-    return results;
+  async compute(inputBuffer) {
+    this.context_.writeTensor(this.inputTensor_, inputBuffer);
+    const inputs = {'input': this.inputTensor_};
+    const outputs = {'output': this.outputTensor_};
+    this.context_.dispatch(this.graph_, inputs, outputs);
+    const results = await this.context_.readTensor(this.outputTensor_);
+    return new Float32Array(results);
   }
 }