[js/web] do not use nodejs type 'Buffer' in web (#9839)

* [js/web] do not use nodejs type 'Buffer' in web

* resolve comments and validate tests

* remove 'Buffer' in test

Author: fs-eire

js/web/lib/onnxjs/attribute.ts

@@ -7,7 +7,7 @@ import {onnxruntime} from './ort-schema/ort-generated';
 import ortFbs = onnxruntime.experimental.fbs;
 
 import {Tensor} from './tensor';
-import {LongUtil} from './util';
+import {decodeUtf8String, LongUtil} from './util';
 
 export declare namespace Attribute {
   export interface DataTypeMap {
@@ -171,7 +171,7 @@ export class Attribute {
       // string attributes are returned as string, so no conversion is needed.
       if (attr instanceof onnx.AttributeProto) {
         const utf8String = value as Uint8Array;
-        return Buffer.from(utf8String.buffer, utf8String.byteOffset, utf8String.byteLength).toString();
+        return decodeUtf8String(utf8String);
       }
     }
 
@@ -181,8 +181,7 @@ export class Attribute {
       // format strings attributes are returned as string[], so no conversion is needed.
       if (attr instanceof onnx.AttributeProto) {
         const utf8Strings = value as Uint8Array[];
-        return utf8Strings.map(
-            utf8String => Buffer.from(utf8String.buffer, utf8String.byteOffset, utf8String.byteLength).toString());
+        return utf8Strings.map(decodeUtf8String);
       }
     }
 

js/web/lib/onnxjs/session.ts

@@ -63,7 +63,7 @@ export class Session {
         if (typeof fetch === 'undefined') {
           // node
           const buf = await promisify(readFile)(arg);
-          this.initialize(Buffer.from(buf), isOrtFormat);
+          this.initialize(buf, isOrtFormat);
         } else {
           // browser
           const response = await fetch(arg);

js/web/lib/onnxjs/tensor.ts

@@ -9,7 +9,7 @@ import {onnxruntime} from './ort-schema/ort-generated';
 
 import ortFbs = onnxruntime.experimental.fbs;
 
-import {ProtoUtil, ShapeUtil} from './util';
+import {decodeUtf8String, ProtoUtil, ShapeUtil} from './util';
 
 export declare namespace Tensor {
   export interface DataTypeMap {
@@ -217,8 +217,7 @@ export class Tensor {
       // When it's STRING type, the value should always be stored in field
       // 'stringData'
       tensorProto.stringData!.forEach((str, i) => {
-        const buf = Buffer.from(str.buffer, str.byteOffset, str.byteLength);
-        value.data[i] = buf.toString();
+        value.data[i] = decodeUtf8String(str);
       });
 
     } else if (

js/web/lib/onnxjs/util.ts

@@ -1249,3 +1249,7 @@ export class PoolConvUtil {
 
 export const MIN_CLIP = -3.4028234663852886e+38;
 export const MAX_CLIP = 3.4028234663852886e+38;
+
+export function decodeUtf8String(buffer: Uint8Array): string {
+  return new TextDecoder().decode(buffer);
+}

js/web/package.json

@@ -43,6 +43,7 @@
     "@types/mocha": "^8.2.2",
     "@types/npmlog": "^4.1.2",
     "@types/platform": "^1.3.3",
+    "base64-js": "^1.5.1",
     "chai": "^4.3.4",
     "dir-compare": "^3.3.0",
     "electron": "^12.2.3",

js/web/test/test-runner.ts

@@ -43,20 +43,20 @@ function fromInternalTensor(tensor: Tensor): ort.Tensor {
   return new ort.Tensor(tensor.type, tensor.data as ort.Tensor.DataType, tensor.dims);
 }
 
-async function loadFile(uri: string): Promise<Uint8Array|ArrayBuffer> {
+async function loadFile(uri: string): Promise<Uint8Array> {
   if (typeof fetch === 'undefined') {
     // node
     return promisify(readFile)(uri);
   } else {
     // browser
     const response = await fetch(uri);
-    return response.arrayBuffer();
+    return new Uint8Array(await response.arrayBuffer());
   }
 }
 
 async function loadTensorProto(uriOrData: string|Uint8Array): Promise<Test.NamedTensor> {
   const buf = (typeof uriOrData === 'string') ? await loadFile(uriOrData) : uriOrData;
-  const tensorProto = onnxProto.TensorProto.decode(Buffer.from(buf));
+  const tensorProto = onnxProto.TensorProto.decode(buf);
   const tensor = Tensor.fromProto(tensorProto);
   // add property 'name' to the tensor object.
   const namedTensor = fromInternalTensor(tensor) as unknown as Test.NamedTensor;

js/web/test/test-shared.ts

@@ -1,18 +1,19 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 
+import * as base64 from 'base64-js';
 import * as fs from 'fs';
 import {promisify} from 'util';
 
 import {Attribute} from '../lib/onnxjs/attribute';
 import {Graph} from '../lib/onnxjs/graph';
 
 export function base64toBuffer(data: string): Uint8Array {
-  return Buffer.from(data, 'base64');
+  return base64.toByteArray(data);
 }
 
 export function bufferToBase64(buffer: Uint8Array): string {
-  return Buffer.from(buffer).toString('base64');
+  return base64.fromByteArray(buffer);
 }
 
 async function readFile(file: string) {
@@ -22,14 +23,13 @@ async function readFile(file: string) {
   } else {
     // browser
     const response = await fetch(file);
-    const buffer = await response.arrayBuffer();
-    return Buffer.from(buffer);
+    return new Uint8Array(await response.arrayBuffer());
   }
 }
 
 export async function readJsonFile(file: string): Promise<any> {
   const content = await readFile(file);
-  return JSON.parse(content.toString());
+  return JSON.parse(new TextDecoder().decode(content));
 }
 
 /**

js/web/webpack.config.js

@@ -245,7 +245,7 @@ function buildTestRunnerConfig({
       new webpack.DefinePlugin({ BUILD_DEFS: DEFAULT_BUILD_DEFS }),
       new webpack.WatchIgnorePlugin({ paths: [/\.js$/, /\.d\.ts$/] }),
       new NodePolyfillPlugin({
-        excludeAliases: ["console"]
+        excludeAliases: ["console", "Buffer"]
       }),
     ],
     module: {