Fix a TODO for gpu-pipeline (#896)

This patch mainly supports tfjs npm packages for gpu-pipeline
webgpu backend, and explicitly uses the size of buffer, which
is returned by dataToGPU.

Author: xhcao

Diff for: gpu-pipeline/webgpu/index.html

@@ -12,7 +12,6 @@ <h1>A demo of pure webgpu pipeline</h1>
     segmentation model</a> from tfjs-models. The output of the model is then fed to
     a mask processing step to mask the background with purple. And then the result
     is painted on the canvas.
-    Currently, this example only supports local built tfjs libs, and the local tfjs directory is the same level as tfjs-examples directory.
     For details on how to keep the tensor data on GPU, see our [optimization doc](https://github.com/tensorflow/tfjs/blob/master/docs/OPTIMIZATION_PURE_GPU_PIPELINE.md).
   </p>
   <p>
@@ -25,11 +24,10 @@ <h1>A demo of pure webgpu pipeline</h1>
   height: auto;
   ">
 </video>
-<!-- TODO(xinghua): Support tfjs npm packages -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
-<script src="../../../tfjs/dist/bin/tfjs-core/tf-core.js"></script>
-<script src="../../../tfjs/dist/bin/tfjs-converter/tf-converter.js"></script>
-<script src="../../../tfjs/dist/bin/tfjs-backend-webgpu/tf-backend-webgpu.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
+<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgpu"></script>
 <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-segmentation"></script>
 <script src="./gpu-shaders.js"></script>
 <script src="../ui-util.js"></script>

Diff for: gpu-pipeline/webgpu/index.js

@@ -85,7 +85,7 @@ async function init() {
     usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
   });
 
-  device.queue.writeBuffer(sizeParamBuffer, 0, new Int32Array([sizeParams.width, sizeParams.height,]));
+  device.queue.writeBuffer(sizeParamBuffer, 0, new Int32Array([sizeParams.width, sizeParams.height]));
 
   const predict = async () => {
     beginEstimateSegmentationStats();
@@ -113,6 +113,7 @@ async function init() {
           binding: 3,
           resource: {
             buffer: data.buffer,
+            size: data.bufSize,
           },
         },
         {