Add tests for WEBGPU_USE_IMPORT

Author: Yang Gu

tfjs-backend-webgpu/src/backend_webgpu.ts

@@ -587,7 +587,7 @@ export class WebGPUBackend extends KernelBackend {
       if (info.texture instanceof GPUExternalTexture) {
         return info.texture;
       } else {
-        return (info.texture as GPUTexture).createView();
+        return info.texture.createView();
       }
     }
     return {

tfjs-backend-webgpu/src/backend_webgpu_test.ts

@@ -222,26 +222,30 @@ describeWebGPU('backend webgpu', () => {
     const textureManager = backend.getTextureManager();
     textureManager.dispose();
 
-    for (let tmpUseImport of [false, true]) {
-      {
-        tf.env().set('WEBGPU_USE_IMPORT', tmpUseImport);
+    {
+      const video = document.createElement('video');
+      const source = document.createElement('source');
+      source.src =
+          // tslint:disable-next-line:max-line-length
+          'data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAAAu1tZGF0AAACrQYF//+p3EXpvebZSLeWLNgg2SPu73gyNjQgLSBjb3JlIDE1NSByMjkwMSA3ZDBmZjIyIC0gSC4yNjQvTVBFRy00IEFWQyBjb2RlYyAtIENvcHlsZWZ0IDIwMDMtMjAxOCAtIGh0dHA6Ly93d3cudmlkZW9sYW4ub3JnL3gyNjQuaHRtbCAtIG9wdGlvbnM6IGNhYmFjPTEgcmVmPTMgZGVibG9jaz0xOjA6MCBhbmFseXNlPTB4MzoweDExMyBtZT1oZXggc3VibWU9NyBwc3k9MSBwc3lfcmQ9MS4wMDowLjAwIG1peGVkX3JlZj0xIG1lX3JhbmdlPTE2IGNocm9tYV9tZT0xIHRyZWxsaXM9MSA4eDhkY3Q9MSBjcW09MCBkZWFkem9uZT0yMSwxMSBmYXN0X3Bza2lwPTEgY2hyb21hX3FwX29mZnNldD0tMiB0aHJlYWRzPTMgbG9va2FoZWFkX3RocmVhZHM9MSBzbGljZWRfdGhyZWFkcz0wIG5yPTAgZGVjaW1hdGU9MSBpbnRlcmxhY2VkPTAgYmx1cmF5X2NvbXBhdD0wIGNvbnN0cmFpbmVkX2ludHJhPTAgYmZyYW1lcz0zIGJfcHlyYW1pZD0yIGJfYWRhcHQ9MSBiX2JpYXM9MCBkaXJlY3Q9MSB3ZWlnaHRiPTEgb3Blbl9nb3A9MCB3ZWlnaHRwPTIga2V5aW50PTI1MCBrZXlpbnRfbWluPTEgc2NlbmVjdXQ9NDAgaW50cmFfcmVmcmVzaD0wIHJjX2xvb2thaGVhZD00MCByYz1jcmYgbWJ0cmVlPTEgY3JmPTI4LjAgcWNvbXA9MC42MCBxcG1pbj0wIHFwbWF4PTY5IHFwc3RlcD00IGlwX3JhdGlvPTEuNDAgYXE9MToxLjAwAIAAAAAwZYiEAD//8m+P5OXfBeLGOfKE3xkODvFZuBflHv/+VwJIta6cbpIo4ABLoKBaYTkTAAAC7m1vb3YAAABsbXZoZAAAAAAAAAAAAAAAAAAAA+gAAAPoAAEAAAEAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAIYdHJhawAAAFx0a2hkAAAAAwAAAAAAAAAAAAAAAQAAAAAAAAPoAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAACgAAAAWgAAAAAAJGVkdHMAAAAcZWxzdAAAAAAAAAABAAAD6AAAAAAAAQAAAAABkG1kaWEAAAAgbWRoZAAAAAAAAAAAAAAAAAAAQAAAAEAAVcQAAAAAAC1oZGxyAAAAAAAAAAB2aWRlAAAAAAAAAAAAAAAAVmlkZW9IYW5kbGVyAAAAATttaW5mAAAAFHZtaGQAAAABAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAAD7c3RibAAAAJdzdHNkAAAAAAAAAAEAAACHYXZjMQAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAACgAFoASAAAAEgAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABj//wAAADFhdmNDAWQACv/hABhnZAAKrNlCjfkhAAADAAEAAAMAAg8SJZYBAAZo6+JLIsAAAAAYc3R0cwAAAAAAAAABAAAAAQAAQAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAEAAAABAAAAFHN0c3oAAAAAAAAC5QAAAAEAAAAUc3RjbwAAAAAAAAABAAAAMAAAAGJ1ZHRhAAAAWm1ldGEAAAAAAAAAIWhkbHIAAAAAAAAAAG1kaXJhcHBsAAAAAAAAAAAAAAAALWlsc3QAAAAlqXRvbwAAAB1kYXRhAAAAAQAAAABMYXZmNTguMTIuMTAw';
+      source.type = 'video/mp4';
+      video.appendChild(source);
+      document.body.appendChild(video);
+
+      video.autoplay = true;
+      video.loop = true;
+      video.muted = true;
+      video.preload = 'auto';
+      await video.play();
+
+      // ensure video element to be loaded
+      if ('requestVideoFrameCallback' in video) {
+        // tslint:disable-next-line:no-any
+        await new Promise(go => (video as any).requestVideoFrameCallback(go));
+      }
 
-        const video = document.createElement('video');
-        video.autoplay = true;
-        const source = document.createElement('source');
-        source.src =
-            // tslint:disable-next-line:max-line-length
-            'data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZQAAAu1tZGF0AAACrQYF//+p3EXpvebZSLeWLNgg2SPu73gyNjQgLSBjb3JlIDE1NSByMjkwMSA3ZDBmZjIyIC0gSC4yNjQvTVBFRy00IEFWQyBjb2RlYyAtIENvcHlsZWZ0IDIwMDMtMjAxOCAtIGh0dHA6Ly93d3cudmlkZW9sYW4ub3JnL3gyNjQuaHRtbCAtIG9wdGlvbnM6IGNhYmFjPTEgcmVmPTMgZGVibG9jaz0xOjA6MCBhbmFseXNlPTB4MzoweDExMyBtZT1oZXggc3VibWU9NyBwc3k9MSBwc3lfcmQ9MS4wMDowLjAwIG1peGVkX3JlZj0xIG1lX3JhbmdlPTE2IGNocm9tYV9tZT0xIHRyZWxsaXM9MSA4eDhkY3Q9MSBjcW09MCBkZWFkem9uZT0yMSwxMSBmYXN0X3Bza2lwPTEgY2hyb21hX3FwX29mZnNldD0tMiB0aHJlYWRzPTMgbG9va2FoZWFkX3RocmVhZHM9MSBzbGljZWRfdGhyZWFkcz0wIG5yPTAgZGVjaW1hdGU9MSBpbnRlcmxhY2VkPTAgYmx1cmF5X2NvbXBhdD0wIGNvbnN0cmFpbmVkX2ludHJhPTAgYmZyYW1lcz0zIGJfcHlyYW1pZD0yIGJfYWRhcHQ9MSBiX2JpYXM9MCBkaXJlY3Q9MSB3ZWlnaHRiPTEgb3Blbl9nb3A9MCB3ZWlnaHRwPTIga2V5aW50PTI1MCBrZXlpbnRfbWluPTEgc2NlbmVjdXQ9NDAgaW50cmFfcmVmcmVzaD0wIHJjX2xvb2thaGVhZD00MCByYz1jcmYgbWJ0cmVlPTEgY3JmPTI4LjAgcWNvbXA9MC42MCBxcG1pbj0wIHFwbWF4PTY5IHFwc3RlcD00IGlwX3JhdGlvPTEuNDAgYXE9MToxLjAwAIAAAAAwZYiEAD//8m+P5OXfBeLGOfKE3xkODvFZuBflHv/+VwJIta6cbpIo4ABLoKBaYTkTAAAC7m1vb3YAAABsbXZoZAAAAAAAAAAAAAAAAAAAA+gAAAPoAAEAAAEAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAIYdHJhawAAAFx0a2hkAAAAAwAAAAAAAAAAAAAAAQAAAAAAAAPoAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAQAAAAACgAAAAWgAAAAAAJGVkdHMAAAAcZWxzdAAAAAAAAAABAAAD6AAAAAAAAQAAAAABkG1kaWEAAAAgbWRoZAAAAAAAAAAAAAAAAAAAQAAAAEAAVcQAAAAAAC1oZGxyAAAAAAAAAAB2aWRlAAAAAAAAAAAAAAAAVmlkZW9IYW5kbGVyAAAAATttaW5mAAAAFHZtaGQAAAABAAAAAAAAAAAAAAAkZGluZgAAABxkcmVmAAAAAAAAAAEAAAAMdXJsIAAAAAEAAAD7c3RibAAAAJdzdHNkAAAAAAAAAAEAAACHYXZjMQAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAACgAFoASAAAAEgAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABj//wAAADFhdmNDAWQACv/hABhnZAAKrNlCjfkhAAADAAEAAAMAAg8SJZYBAAZo6+JLIsAAAAAYc3R0cwAAAAAAAAABAAAAAQAAQAAAAAAcc3RzYwAAAAAAAAABAAAAAQAAAAEAAAABAAAAFHN0c3oAAAAAAAAC5QAAAAEAAAAUc3RjbwAAAAAAAAABAAAAMAAAAGJ1ZHRhAAAAWm1ldGEAAAAAAAAAIWhkbHIAAAAAAAAAAG1kaXJhcHBsAAAAAAAAAAAAAAAALWlsc3QAAAAlqXRvbwAAAB1kYXRhAAAAAQAAAABMYXZmNTguMTIuMTAw';
-        source.type = 'video/mp4';
-        video.appendChild(source);
-        document.body.appendChild(video);
-
-        // On mobile safari the ready state is ready immediately.
-        if (video.readyState < 2) {
-          await new Promise(resolve => {
-            video.addEventListener('loadeddata', () => resolve(video));
-          });
-        }
+      for (const tmpUseImport of [false, true]) {
+        tf.env().set('WEBGPU_USE_IMPORT', tmpUseImport);
         const res = await tf.browser.fromPixelsAsync(video);
         expect(res.shape).toEqual([90, 160, 3]);
         const data = await res.data();
@@ -250,51 +254,51 @@ describeWebGPU('backend webgpu', () => {
         const usedTexturesAfterFromPixel = textureManager.getNumUsedTextures();
         expect(freeTexturesAfterFromPixel).toEqual(1);
         expect(usedTexturesAfterFromPixel).toEqual(0);
-        document.body.removeChild(video);
       }
 
-      {
-        const img = new Image(10, 10);
-        img.src = 'data:image/gif;base64' +
-            ',R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
-
-        await new Promise(resolve => {
-          img.onload = () => resolve(img);
-        });
-
-        const resImage = await tf.browser.fromPixelsAsync(img);
-        expect(resImage.shape).toEqual([10, 10, 3]);
-
-        const dataImage = await resImage.data();
-        expect(dataImage[0]).toEqual(0);
-        expect(dataImage.length).toEqual(10 * 10 * 3);
-        const freeTexturesAfterFromPixel = textureManager.getNumFreeTextures();
-        const usedTexturesAfterFromPixel = textureManager.getNumUsedTextures();
-        expect(freeTexturesAfterFromPixel).toEqual(2);
-        expect(usedTexturesAfterFromPixel).toEqual(0);
-      }
+      document.body.removeChild(video);
+      tf.env().set('WEBGPU_USE_IMPORT', useImport);
+    }
 
-      {
-        const img = new Image(10, 10);
-        img.src =
-            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAABfSURBVChTY/gPBu8NLd/KqLxT1oZw4QAqDZSDoPeWDj9WrYUIAgG6NBAhm4FFGoIgxuCUBiKgMfikv1bW4pQGav334wdUGshBk/6SVQAUh0p/mzIDTQ6oFSGNHfz/DwAwi8mNzTi6rwAAAABJRU5ErkJggg==';
-        await new Promise(resolve => {
-          img.onload = () => resolve(img);
-        });
-        const resImage = await tf.browser.fromPixelsAsync(img);
-        expect(resImage.shape).toEqual([10, 10, 3]);
-
-        const dataImage = await resImage.data();
-        expect(dataImage[0]).toEqual(255);
-        expect(dataImage.length).toEqual(10 * 10 * 3);
-        const freeTexturesAfterFromPixel = textureManager.getNumFreeTextures();
-        const usedTexturesAfterFromPixel = textureManager.getNumUsedTextures();
-        expect(freeTexturesAfterFromPixel).toEqual(2);
-        expect(usedTexturesAfterFromPixel).toEqual(0);
-      }
+    {
+      const img = new Image(10, 10);
+      img.src = 'data:image/gif;base64' +
+          ',R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
+
+      await new Promise(resolve => {
+        img.onload = () => resolve(img);
+      });
+
+      const resImage = await tf.browser.fromPixelsAsync(img);
+      expect(resImage.shape).toEqual([10, 10, 3]);
+
+      const dataImage = await resImage.data();
+      expect(dataImage[0]).toEqual(0);
+      expect(dataImage.length).toEqual(10 * 10 * 3);
+      const freeTexturesAfterFromPixel = textureManager.getNumFreeTextures();
+      const usedTexturesAfterFromPixel = textureManager.getNumUsedTextures();
+      expect(freeTexturesAfterFromPixel).toEqual(2);
+      expect(usedTexturesAfterFromPixel).toEqual(0);
     }
 
-    tf.env().set('WEBGPU_USE_IMPORT', useImport);
+    {
+      const img = new Image(10, 10);
+      img.src =
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAABfSURBVChTY/gPBu8NLd/KqLxT1oZw4QAqDZSDoPeWDj9WrYUIAgG6NBAhm4FFGoIgxuCUBiKgMfikv1bW4pQGav334wdUGshBk/6SVQAUh0p/mzIDTQ6oFSGNHfz/DwAwi8mNzTi6rwAAAABJRU5ErkJggg==';
+      await new Promise(resolve => {
+        img.onload = () => resolve(img);
+      });
+      const resImage = await tf.browser.fromPixelsAsync(img);
+      expect(resImage.shape).toEqual([10, 10, 3]);
+
+      const dataImage = await resImage.data();
+      expect(dataImage[0]).toEqual(255);
+      expect(dataImage.length).toEqual(10 * 10 * 3);
+      const freeTexturesAfterFromPixel = textureManager.getNumFreeTextures();
+      const usedTexturesAfterFromPixel = textureManager.getNumUsedTextures();
+      expect(freeTexturesAfterFromPixel).toEqual(2);
+      expect(usedTexturesAfterFromPixel).toEqual(0);
+    }
   });
 });