fix react compatibility issues

pull/356/head
Vladimir Mandic 2021-11-04 06:34:13 -04:00
parent 3a0436bc54
commit b64e9ae69f
7 changed files with 27 additions and 29 deletions

View File

@ -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",

View File

@ -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

View File

@ -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')

View File

@ -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

View File

@ -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();
},
};

View File

@ -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 {

View File

@ -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';