From b64e9ae69ff68114412361c90cd417ac3145fd59 Mon Sep 17 00:00:00 2001 From: Vladimir Mandic Date: Thu, 4 Nov 2021 06:34:13 -0400 Subject: [PATCH] fix react compatibility issues --- .build.json | 5 +---- CHANGELOG.md | 3 ++- src/face/facemesh.ts | 2 +- src/image/image.ts | 10 +++++----- src/image/imagefx.ts | 28 ++++++++++++++-------------- src/util/env.ts | 4 ++-- tfjs/tf-browser.ts | 4 ++-- 7 files changed, 27 insertions(+), 29 deletions(-) diff --git a/.build.json b/.build.json index e5c619de..344ce9b0 100644 --- a/.build.json +++ b/.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", diff --git a/CHANGELOG.md b/CHANGELOG.md index 91e160cf..a22fc2be 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/face/facemesh.ts b/src/face/facemesh.ts index 8795f25f..a2557d9d 100644 --- a/src/face/facemesh.ts +++ b/src/face/facemesh.ts @@ -108,7 +108,7 @@ export async function predict(input: Tensor, config: Config): Promise 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 diff --git a/src/image/imagefx.ts b/src/image/imagefx.ts index 055d5879..35c48787 100644 --- a/src/image/imagefx.ts +++ b/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); - return currentProgram; + gl.useProgram((currentProgram ? currentProgram.id : null) || null); + 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.uniform2f(program?.uniform['px'], pixelSizeX, pixelSizeY); + gl.uniform1fv(program.uniform['m'], m); + 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(); }, }; diff --git a/src/util/env.ts b/src/util/env.ts index 474a7473..0671cb11 100644 --- a/src/util/env.ts +++ b/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 { diff --git a/tfjs/tf-browser.ts b/tfjs/tf-browser.ts index fb500de8..da8fc890 100644 --- a/tfjs/tf-browser.ts +++ b/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-wasm/dist/index.js'; +// export * from '@tensorflow/tfjs-backend-webgl/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';