fix react compatibility issues

.build.json

@@ -31,7 +31,7 @@
     },
   "build": {
     "global": {
-      "target": "es2020",
+      "target": "es2018",
       "sourcemap": false,
       "treeShaking": true,
       "ignoreAnnotations": true,
@@ -114,7 +114,6 @@
       {
         "name": "tfjs/browser/esm/custom",
         "platform": "browser",
-        "target": "esnext",
         "format": "esm",
         "input": "tfjs/tf-custom.ts",
         "output": "dist/tfjs.esm.js",
@@ -134,7 +133,6 @@
       {
         "name": "human/browser/esm/bundle",
         "platform": "browser",
-        "target": "esnext",
         "format": "esm",
         "input": "src/human.ts",
         "output": "dist/human.esm.js",
@@ -147,7 +145,6 @@
       {
         "name": "demo/browser",
         "platform": "browser",
-        "target": "esnext",
         "format": "esm",
         "input": "demo/typescript/index.ts",
         "output": "demo/typescript/index.js",

CHANGELOG.md

@@ -9,8 +9,9 @@
   
 ## Changelog
   
-### **HEAD -> main** 2021/11/02 mandic00@live.com
+### **HEAD -> main** 2021/11/03 mandic00@live.com
 
+- improve precision using wasm backend
 - refactor predict with execute
 - patch tfjs type defs
 - start 2.5 major version

src/face/facemesh.ts

@@ -108,7 +108,7 @@ export async function predict(input: Tensor, config: Config): Promise<FaceResult
         face.score = face.faceScore;
         newCache.push(box);
 
-        // other modules prefer wider crop for a face so we dispose it and do it again
+        // other modules prefer different crop for a face so we dispose it and do it again
         /*
         tf.dispose(face.tensor);
         face.tensor = config.face.detector?.rotation && config.face.mesh?.enabled && env.kernels.includes('rotatewithoffset')

src/image/image.ts

@@ -107,7 +107,7 @@ export function process(input: Input, config: Config, getTensor: boolean = true)
     if ((config.filter.height || 0) > 0) targetHeight = config.filter.height;
     else if ((config.filter.width || 0) > 0) targetHeight = originalHeight * ((config.filter.width || 0) / originalWidth);
     if (!targetWidth || !targetHeight) throw new Error('input cannot determine dimension');
-    if (!inCanvas || (inCanvas?.width !== targetWidth) || (inCanvas?.height !== targetHeight)) inCanvas = canvas(targetWidth, targetHeight);
+    if (!inCanvas || (inCanvas.width !== targetWidth) || (inCanvas.height !== targetHeight)) inCanvas = canvas(targetWidth, targetHeight);
 
     // draw input to our canvas
     const inCtx = inCanvas.getContext('2d') as CanvasRenderingContext2D;
@@ -117,14 +117,14 @@ export function process(input: Input, config: Config, getTensor: boolean = true)
       if (config.filter.flip && typeof inCtx.translate !== 'undefined') {
         inCtx.translate(originalWidth, 0);
         inCtx.scale(-1, 1);
-        inCtx.drawImage(input as AnyCanvas, 0, 0, originalWidth, originalHeight, 0, 0, inCanvas?.width, inCanvas?.height);
+        inCtx.drawImage(input as AnyCanvas, 0, 0, originalWidth, originalHeight, 0, 0, inCanvas.width, inCanvas.height);
         inCtx.setTransform(1, 0, 0, 1, 0, 0); // resets transforms to defaults
       } else {
-        inCtx.drawImage(input as AnyCanvas, 0, 0, originalWidth, originalHeight, 0, 0, inCanvas?.width, inCanvas?.height);
+        inCtx.drawImage(input as AnyCanvas, 0, 0, originalWidth, originalHeight, 0, 0, inCanvas.width, inCanvas.height);
       }
     }
 
-    if (!outCanvas || (inCanvas.width !== outCanvas.width) || (inCanvas?.height !== outCanvas?.height)) outCanvas = canvas(inCanvas.width, inCanvas.height); // init output canvas
+    if (!outCanvas || (inCanvas.width !== outCanvas.width) || (inCanvas.height !== outCanvas.height)) outCanvas = canvas(inCanvas.width, inCanvas.height); // init output canvas
 
     // imagefx transforms using gl from input canvas to output canvas
     if (config.filter.enabled && env.webgl.supported) {
@@ -170,7 +170,7 @@ export function process(input: Input, config: Config, getTensor: boolean = true)
         pixels = tf.tensor(arr, [input['height'], input['width'], depth], 'int32');
       }
     } else {
-      if (!tmpCanvas || (outCanvas.width !== tmpCanvas.width) || (outCanvas?.height !== tmpCanvas?.height)) tmpCanvas = canvas(outCanvas.width, outCanvas.height); // init output canvas
+      if (!tmpCanvas || (outCanvas.width !== tmpCanvas.width) || (outCanvas.height !== tmpCanvas.height)) tmpCanvas = canvas(outCanvas.width, outCanvas.height); // init output canvas
       if (tf.browser && env.browser) {
         if (config.backend === 'webgl' || config.backend === 'humangl' || config.backend === 'webgpu') {
           pixels = tf.browser.fromPixels(outCanvas); // safe to reuse since both backend and context are gl based

src/image/imagefx.ts

@@ -85,11 +85,11 @@ export function GLImageFilter() {
   }
 
   function createFramebufferTexture(width, height) {
-    const fbo = gl.createFramebuffer();
+    const fbo = gl.createFramebuffer() as WebGLFramebuffer;
     gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
     const renderbuffer = gl.createRenderbuffer();
     gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
-    const texture = gl.createTexture();
+    const texture = gl.createTexture() as WebGLTexture;
     gl.bindTexture(gl.TEXTURE_2D, texture);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
@@ -104,7 +104,7 @@ export function GLImageFilter() {
 
   function getTempFramebuffer(index) {
     tempFramebuffers[index] = tempFramebuffers[index] || createFramebufferTexture(fxcanvas.width, fxcanvas.height);
-    return tempFramebuffers[index];
+    return tempFramebuffers[index] as { fbo: WebGLFramebuffer, texture: WebGLTexture };
   }
 
   function draw(flags = 0) {
@@ -113,14 +113,14 @@ export function GLImageFilter() {
     let target: WebGLFramebuffer | null = null;
     let flipY = false;
     if (drawCount === 0) source = sourceTexture; // First draw call - use the source texture
-    else source = getTempFramebuffer(currentFramebufferIndex)?.texture || null; // All following draw calls use the temp buffer last drawn to
+    else source = getTempFramebuffer(currentFramebufferIndex).texture || null; // All following draw calls use the temp buffer last drawn to
     drawCount++;
     if (lastInChain && !(flags & DRAW.INTERMEDIATE)) { // Last filter in our chain - draw directly to the WebGL Canvas. We may also have to flip the image vertically now
       target = null;
       flipY = drawCount % 2 === 0;
     } else {
       currentFramebufferIndex = (currentFramebufferIndex + 1) % 2;
-      target = getTempFramebuffer(currentFramebufferIndex)?.fbo || null; // Intermediate draw call - get a temp buffer to draw to
+      target = getTempFramebuffer(currentFramebufferIndex).fbo || null; // Intermediate draw call - get a temp buffer to draw to
     }
     gl.bindTexture(gl.TEXTURE_2D, source); // Bind the source and target and draw the two triangles
     gl.bindFramebuffer(gl.FRAMEBUFFER, target);
@@ -131,8 +131,8 @@ export function GLImageFilter() {
   function compileShader(fragmentSource) {
     if (shaderProgramCache[fragmentSource]) {
       currentProgram = shaderProgramCache[fragmentSource];
-      gl.useProgram(currentProgram?.id || null);
+      gl.useProgram((currentProgram ? currentProgram.id : null) || null);
-      return currentProgram;
+      return currentProgram as GLProgram;
     }
     currentProgram = new GLProgram(gl, shaders.vertexIdentity, fragmentSource);
     const floatSize = Float32Array.BYTES_PER_ELEMENT;
@@ -142,7 +142,7 @@ export function GLImageFilter() {
     gl.enableVertexAttribArray(currentProgram.attribute['uv']);
     gl.vertexAttribPointer(currentProgram.attribute['uv'], 2, gl.FLOAT, false, vertSize, 2 * floatSize);
     shaderProgramCache[fragmentSource] = currentProgram;
-    return currentProgram;
+    return currentProgram as GLProgram;
   }
 
   const filter = {
@@ -156,7 +156,7 @@ export function GLImageFilter() {
         ? shaders.colorMatrixWithoutAlpha
         : shaders.colorMatrixWithAlpha;
       const program = compileShader(shader);
-      gl.uniform1fv(program?.uniform['m'], m);
+      gl.uniform1fv(program.uniform['m'], m);
       draw();
     },
 
@@ -292,8 +292,8 @@ export function GLImageFilter() {
       const pixelSizeX = 1 / fxcanvas.width;
       const pixelSizeY = 1 / fxcanvas.height;
       const program = compileShader(shaders.convolution);
-      gl.uniform1fv(program?.uniform['m'], m);
+      gl.uniform1fv(program.uniform['m'], m);
-      gl.uniform2f(program?.uniform['px'], pixelSizeX, pixelSizeY);
+      gl.uniform2f(program.uniform['px'], pixelSizeX, pixelSizeY);
       draw();
     },
 
@@ -349,10 +349,10 @@ export function GLImageFilter() {
       const blurSizeY = (size / 7) / fxcanvas.height;
       const program = compileShader(shaders.blur);
       // Vertical
-      gl.uniform2f(program?.uniform['px'], 0, blurSizeY);
+      gl.uniform2f(program.uniform['px'], 0, blurSizeY);
       draw(DRAW.INTERMEDIATE);
       // Horizontal
-      gl.uniform2f(program?.uniform['px'], blurSizeX, 0);
+      gl.uniform2f(program.uniform['px'], blurSizeX, 0);
       draw();
     },
 
@@ -360,7 +360,7 @@ export function GLImageFilter() {
       const blurSizeX = (size) / fxcanvas.width;
       const blurSizeY = (size) / fxcanvas.height;
       const program = compileShader(shaders.pixelate);
-      gl.uniform2f(program?.uniform['size'], blurSizeX, blurSizeY);
+      gl.uniform2f(program.uniform['size'], blurSizeX, blurSizeY);
       draw();
     },
   };

src/util/env.ts

@@ -134,14 +134,14 @@ export class Env {
     }
     this.webgpu.supported = this.browser && typeof navigator['gpu'] !== 'undefined';
     this.webgpu.backend = this.backends.includes('webgpu');
-    if (this.webgpu.supported) this.webgpu.adapter = (await navigator['gpu'].requestAdapter())?.name;
+    if (this.webgpu.supported) this.webgpu.adapter = (await navigator['gpu'].requestAdapter()).name;
     // enumerate kernels
     this.kernels = tf.getKernelsForBackend(tf.getBackend()).map((kernel) => kernel.kernelName.toLowerCase());
   }
 
   async updateCPU() {
     const cpu = { model: '', flags: [] };
-    if (this.node && this.platform?.startsWith('linux')) {
+    if (this.node && this.platform.startsWith('linux')) {
       // eslint-disable-next-line global-require
       const fs = require('fs');
       try {

tfjs/tf-browser.ts

@@ -5,8 +5,8 @@
 
 // export all from build bundle
 export * from '@tensorflow/tfjs/dist/index.js';
-export * from '@tensorflow/tfjs-backend-webgl/dist/index.js';
+// export * from '@tensorflow/tfjs-backend-webgl/dist/index.js';
-export * from '@tensorflow/tfjs-backend-wasm/dist/index.js';
+// export * from '@tensorflow/tfjs-backend-wasm/dist/index.js';
 
 // add webgpu to bundle, experimental
 // export * from '@tensorflow/tfjs-backend-webgpu/dist/index.js';