mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 10:56:15 -08:00
Harvey Zhao
7dffd99cfd
Remove debugging border from the websr plugin's styling Enhance canvas sizing logic in artplayer-plugin-websr - Updated canvas positioning to center it within the player. - Introduced a new function to calculate canvas size based on the video aspect ratio. - Adjusted canvas dimensions during initialization and on resize events to maintain aspect ratio. - Ensured canvas styles are updated to reflect the calculated dimensions. feat: add comparison mode to artplayer-plugin-websr - Updated README.md to reflect new comparison feature and simplified content. - Modified package.json to remove unnecessary keywords. - Enhanced index.js to implement comparison functionality, allowing users to compare original and upscaled video. - Added new methods for enabling, disabling, and toggling comparison mode, as well as setting and getting the comparison position. - Updated TypeScript definitions to include new comparison options and methods.
8 lines
80 KiB
JavaScript
8 lines
80 KiB
JavaScript
|
|
/*!
|
|
* artplayer-plugin-websr.js v1.0.0
|
|
* Github: https://github.com/zhw2590582/ArtPlayer
|
|
* (c) 2017-2026 Harvey Zack
|
|
* Released under the MIT License.
|
|
*/
|
|
!function(e,n,t,r,s){var i="u">typeof globalThis?globalThis:"u">typeof self?self:"u">typeof window?window:"u">typeof global?global:{},o="function"==typeof i[r]&&i[r],u=o.i||{},a=o.cache||{},c="u">typeof module&&"function"==typeof module.require&&module.require.bind(module);function l(n,t){if(!a[n]){if(!e[n]){if(s[n])return s[n];var u="function"==typeof i[r]&&i[r];if(!t&&u)return u(n,!0);if(o)return o(n,!0);if(c&&"string"==typeof n)return c(n);var f=Error("Cannot find module '"+n+"'");throw f.code="MODULE_NOT_FOUND",f}_.resolve=p,_.cache={};var d=a[n]=new l.Module(n);e[n][0].call(d.exports,_,d,d.exports,i)}return a[n].exports;function _(e){var n=_.resolve(e);if(!1===n)return{};if(Array.isArray(n)){var t={__esModule:!0};return n.forEach(function(e){var n=e[0],r=e[1],s=e[2]||e[0],i=l(r);"*"===n?Object.keys(i).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:function(){return i[e]}})}):"*"===s?Object.defineProperty(t,n,{enumerable:!0,value:i}):Object.defineProperty(t,n,{enumerable:!0,get:function(){return"default"===s?i.__esModule?i.default:i:i[s]}})}),t}return l(n)}function p(t){var r=e[n][1][t];return null!=r?r:t}}function f(e){this.id=e,this.bundle=l,this.require=c,this.exports={}}l.isParcelRequire=!0,l.Module=f,l.modules=e,l.cache=a,l.parent=o,l.distDir=void 0,l.publicUrl=void 0,l.devServer=void 0,l.i=u,l.register=function(n,t){e[n]=[function(e,n){n.exports=t},{}]},Object.defineProperty(l,"root",{get:function(){return i[r]}}),i[r]=l;for(var d=0;d<n.length;d++)l(n[d]);if(t){var _=l(t);"object"==typeof exports&&"u">typeof module?module.exports=_:"function"==typeof define&&define.amd&&define(function(){return _})}}({"80h6e":[function(e,n,t,r){var s=e("@parcel/transformer-js/src/esmodule-helpers.js");s.defineInteropFlag(t),s.export(t,"default",()=>u);var i=e("@websr/websr"),o=s.interopDefault(i);function u(e={}){return n=>{let{template:{$player:t},constructor:{validator:r,utils:{append:s,setStyles:i}}}=n;(e=r({scale:2,networkName:"",weights:null,compare:!1,...e},{scale:"number",networkName:"string",weights:"?string|object",compare:"boolean"})).networkName||console.error("WebSR: networkName is required"),e.weights||console.error("WebSR: weights is required");let u=null,a=null,c=!1,l=!0,f=null,d=.5,_=!1,p=document.createElement("canvas");p.id="artplayer-websr-canvas",i(p,{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",display:"block",pointerEvents:"none",zIndex:"11",imageRendering:"crisp-edges"}),s(t,p);let h=document.createElement("div");function x(n){if(i(h,{left:100*(d=Math.max(0,Math.min(1,n)))+"%"}),e.compare){let e=100*d;i(p,{clipPath:`inset(0 0 0 ${e}%)`})}}function v(){let e=n.video;if(!e)return{displayWidth:640,displayHeight:360};let r=t.offsetWidth||640,s=t.offsetHeight||360,i=(e.videoWidth||640)/(e.videoHeight||360),o=r,u=s;return r/s>i?o=s*i:u=r/i,{displayWidth:o,displayHeight:u}}async function b(){try{let t;if(c)return!0;if(!navigator.gpu)return console.warn("WebGPU is not supported"),!1;if(!(a=await o.default.initWebGPU()))return console.warn("Failed to initialize WebGPU"),!1;if("string"==typeof e.weights){let n=await fetch(e.weights);if(!n.ok)return console.warn(`Failed to load weights from ${e.weights}`),!1;t=await n.json()}else{if("object"!=typeof e.weights)return console.warn("Invalid weights format"),!1;t=e.weights}let r=n.video;if(!r)return console.warn("Video element not found"),!1;let{displayWidth:s,displayHeight:l}=v();return p.width=s*e.scale,p.height=l*e.scale,i(p,{width:s+"px",height:l+"px"}),u=new(0,o.default)({source:r,network_name:e.networkName,weights:t,gpu:a,canvas:p}),c=!0,!0}catch(e){return console.error("WebSR initialization error:",e),!1}}async function m(){if(u&&l&&n.video)try{await u.render(n.video)}catch(e){console.error("WebSR render error:",e)}}async function y(){if(!u||!l||!n.video||n.video.paused){f=null;return}try{await u.render(n.video)}catch(e){console.error("WebSR render error:",e)}l&&!n.video.paused&&(f=requestAnimationFrame(y))}async function w(){if(!l){if(!c&&!await b())return void console.error("Failed to initialize WebSR");l=!0,setStyle(p,"display","block"),n.video&&!n.video.paused&&(f=requestAnimationFrame(y)),n.emit("artplayerPluginWebsr:enable")}}function g(){l&&(l=!1,i(p,{display:"none"}),f&&(cancelAnimationFrame(f),f=null),n.emit("artplayerPluginWebsr:disable"))}async function k(){l?g():await w()}return h.id="artplayer-websr-divider",i(h,{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"2px",height:"100%",backgroundColor:"#fff",display:e.compare?"block":"none",pointerEvents:"auto",cursor:"col-resize",zIndex:"12"}),s(t,h),document.addEventListener("mousemove",e=>{if(!_)return;let n=t.getBoundingClientRect();x((e.clientX-n.left)/n.width)}),document.addEventListener("mouseup",()=>{_=!1}),h.addEventListener("mousedown",()=>{_=!0}),document.addEventListener("touchmove",e=>{if(!_)return;let n=t.getBoundingClientRect();x((e.touches[0].clientX-n.left)/n.width)},{passive:!0}),document.addEventListener("touchend",()=>{_=!1}),h.addEventListener("touchstart",()=>{_=!0}),n.on("play",()=>{m(),l&&c&&!f&&(f=requestAnimationFrame(y))}),n.on("pause",()=>{f&&(cancelAnimationFrame(f),f=null)}),n.on("seek",()=>{l&&c&&!n.video.paused&&!f&&(f=requestAnimationFrame(y))}),n.on("resize",()=>{if(u&&p.offsetParent){let{displayWidth:n,displayHeight:t}=v();p.width=n*e.scale,p.height=t*e.scale,i(p,{width:n+"px",height:t+"px"})}}),n.on("destroy",()=>{g(),f&&(cancelAnimationFrame(f),f=null),p.parentNode&&p.parentNode.removeChild(p)}),b().then(()=>{l&&c&&n.video&&m()}).catch(e=>console.error("Failed to init WebSR:",e)),{name:"artplayerPluginWebsr",websr:()=>u,gpu:()=>a,canvas:()=>p,enable:w,disable:g,toggle:k,isEnabled:()=>l,isInitialized:()=>c,enableCompare:()=>{e.compare=!0,i(h,{display:"block"}),x(d)},disableCompare:()=>{e.compare=!1,i(h,{display:"none"}),i(p,{clipPath:"none"})},toggleCompare:()=>{e.compare?(i(h,{display:"none"}),i(p,{clipPath:"none"}),e.compare=!1):(e.compare=!0,i(h,{display:"block"}),x(d))},setComparePosition:e=>{x(e)},getComparePosition:()=>d,isComparing:()=>e.compare,update:async n=>{if((void 0!==n.weights&&n.weights!==e.weights||void 0!==n.networkName&&n.networkName!==e.networkName)&&(void 0!==n.weights&&(e.weights=n.weights),void 0!==n.networkName&&(e.networkName=n.networkName),c=!1,l&&await b()),void 0!==n.scale&&n.scale!==e.scale&&(e.scale=n.scale,p)){let{displayWidth:n,displayHeight:t}=v();p.width=n*e.scale,p.height=t*e.scale,i(p,{width:n+"px",height:t+"px"})}}}}}"u">typeof window&&(window.artplayerPluginWebsr=u)},{"@websr/websr":"sfGe3","@parcel/transformer-js/src/esmodule-helpers.js":"6ykb1"}],sfGe3:[function(require,module,exports,__globalThis){!function(e,n){module.exports=n()}(self,()=>(()=>{"use strict";var __webpack_modules__={"./src/context.ts":function(__unused_webpack_module,exports){eval("{\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nclass WebGPUContext {\n constructor(device, resolution, canvas, scale, debug) {\n this.device = device;\n this.canvas = canvas;\n this.resolution = resolution;\n this.textures = {};\n this.buffers = {};\n this.destroyed = false;\n this.scale = scale;\n this.debug = debug;\n let context = this.canvas.getContext('webgpu');\n if (context instanceof GPUCanvasContext) {\n this.context = context;\n }\n else {\n throw new Error(\"Unable to load WebGPU context\");\n }\n this.context.configure({\n device: this.device,\n format: navigator.gpu.getPreferredCanvasFormat()\n });\n this.textureUsage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT;\n this.bufferUsage = GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST;\n if (this.debug) {\n // Read output pixel value\n this.textureUsage = this.textureUsage | GPUTextureUsage.COPY_SRC;\n this.bufferUsage = this.bufferUsage | GPUBufferUsage.COPY_SRC;\n }\n this.textures['output'] = this.context.getCurrentTexture();\n }\n readBuffer(bufferName) {\n return __awaiter(this, void 0, void 0, function* () {\n if (!this.buffers[bufferName])\n throw new Error(`No buffer with name ${bufferName}`);\n const readEncoder = this.device.createCommandEncoder({\n label: `Read ${bufferName} buffer encoder`,\n });\n const buffer = this.buffers[bufferName];\n const resultBuffer = this.device.createBuffer({\n label: 'result buffer',\n size: buffer.size,\n usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST\n });\n readEncoder.copyBufferToBuffer(buffer, 0, resultBuffer, 0, resultBuffer.size);\n this.device.queue.submit([readEncoder.finish()]);\n yield resultBuffer.mapAsync(GPUMapMode.READ);\n let range = resultBuffer.getMappedRange();\n return new Float32Array(range);\n });\n }\n readTexture(textureName) {\n return __awaiter(this, void 0, void 0, function* () {\n if (!this.textures[textureName])\n throw new Error(`No texture with name ${textureName}`);\n const readEncoder = this.device.createCommandEncoder({\n label: `Read ${textureName} texture encoder`,\n });\n const texture = this.textures[textureName];\n let bitsPerPixel = 16;\n if (texture.format === 'rgba8unorm')\n bitsPerPixel = 4;\n if (texture.format === 'r32float')\n bitsPerPixel = 4;\n const resultBuffer = this.device.createBuffer({\n label: 'result buffer',\n size: texture.width * texture.height * bitsPerPixel,\n usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST\n });\n readEncoder.copyTextureToBuffer({\n texture: this.textures[textureName],\n }, {\n buffer: resultBuffer,\n bytesPerRow: texture.width * bitsPerPixel\n }, {\n width: texture.width,\n height: texture.height,\n depthOrArrayLayers: 1,\n });\n this.device.queue.submit([readEncoder.finish()]);\n yield resultBuffer.mapAsync(GPUMapMode.READ);\n if (texture.format === 'r32float')\n return new Float32Array(resultBuffer.getMappedRange());\n else if (texture.format === 'rgba32float')\n return new Float32Array(resultBuffer.getMappedRange());\n else if (texture.format === 'rgba8unorm')\n return new Uint8ClampedArray(resultBuffer.getMappedRange());\n return new Float32Array(0);\n });\n }\n destroy() {\n this.device.destroy();\n this.destroyed = true;\n }\n buffer(key, options) {\n if (!this.buffers[key]) {\n options = options || {};\n const width = options.width || this.resolution.width;\n const height = options.height || this.resolution.height;\n const channels = options.channels || 4;\n const bitdepth = options.bitdepth || 4;\n this.buffers[key] = this.device.createBuffer({\n label: key,\n size: width * height * channels * bitdepth,\n usage: this.bufferUsage\n });\n }\n return this.buffers[key];\n }\n texture(key, options) {\n if (!this.textures[key]) {\n options = options || {};\n this.textures[key] = this.device.createTexture({\n label: key,\n size: [options.width || this.resolution.width, options.height || this.resolution.height],\n format: options.format || 'rgba32float',\n usage: this.textureUsage\n });\n }\n return this.textures[key];\n }\n}\nexports[\"default\"] = WebGPUContext;\n\n\n//# sourceURL=webpack://WebSR/./src/context.ts?\n}")},"./src/layers/anime4k/conv2d-112x4.ts":(__unused_webpack_module,exports,__webpack_require__)=>{eval('{\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst base_compute_layer_1 = __webpack_require__(/*! ../base_compute_layer */ "./src/layers/base_compute_layer.ts");\nclass Anime4KConv112x4 extends base_compute_layer_1.default {\n constructor(inputs, outputBuffer, weights, first) {\n super(inputs, outputBuffer, weights);\n this.label = "Anime4KConv112x4";\n const kernels = weights.weights;\n this.createUniform("kernels", "array<mat4x4f, 28>");\n let read_buffers = \'\';\n for (let i = 0; i< 7; i++) {\n if (first) {\n read_buffers += `\n let pixel_val${i} = inputBuffer${i}[buff_ind];\n result += kernels[${4 * i}]*max(pixel_val${i}, vec4f(0.0));\n result += kernels[${4 * i + 2}]*max(-1.0*pixel_val${i}, vec4f(0.0));\n `;\n }\n else {\n read_buffers += `\n let pixel_val${i} = inputBuffer${i}[buff_ind];\n result += kernels[${4 * i + 1}]*max(pixel_val${i}, vec4f(0.0));\n result += kernels[${4 * i + 3}]*max(-1.0*pixel_val${i}, vec4f(0.0));`;\n }\n }\n this.shader = this.createStandardShader(`\n \n @compute @workgroup_size(${this.num_work_groups}, ${this.num_work_groups}) fn main( @builtin(global_invocation_id) id: vec3<u32>) {\n \n let x = id.x;\n let y = id.y;\n \n let i = id.y*${this.resolution.width} + x;\n var result = vec4f(0.0, 0.0, 0.0, 0.0);\n \n let coord = vec2<i32>( i32(x), i32(y));\n \n let buff_ind = coord.y*${this.resolution.width} + coord.x;\n ${read_buffers}\n \n outputBuffer[i] = result;\n }\n `);\n this.setUniform("kernels", new Float32Array(kernels));\n this.defaultSetup();\n }\n defaultPipelineConfig() {\n return {\n label: `${this.label}-pipeline`,\n layout: \'auto\',\n compute: {\n module: this.shader,\n entryPoint: \'main\',\n },\n };\n }\n defaultBindGroup() {\n const entries = [];\n this.inputs.forEach(function (input, i) {\n if (input instanceof GPUExternalTexture) {\n entries.push({ binding: i, resource: input });\n }\n else if (input instanceof GPUTexture) {\n entries.push({ binding: i, resource: input.createView() });\n }\n else if (input instanceof GPUBuffer) {\n entries.push({ binding: i, resource: { buffer: input } });\n }\n });\n this.uniforms.forEach((uniform, i) => {\n entries.push({\n binding: i + this.inputs.length,\n resource: {\n buffer: this.buffers[uniform.name]\n }\n });\n });\n if (this.output instanceof GPUBuffer) {\n entries.push({\n binding: this.inputs.length + this.uniforms.length,\n resource: {\n buffer: this.output\n }\n });\n }\n if (entries.length === 0)\n return null;\n return this.device.createBindGroup({\n layout: this.pipeline.getBindGroupLayout(0),\n entries\n });\n }\n}\nexports["default"] = Anime4KConv112x4;\n\n\n//# sourceURL=webpack://WebSR/./src/layers/anime4k/conv2d-112x4.ts?\n}')},"./src/layers/anime4k/conv2d-16x4.ts":(__unused_webpack_module,exports,__webpack_require__)=>{eval('{\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst base_compute_layer_1 = __webpack_require__(/*! ../base_compute_layer */ "./src/layers/base_compute_layer.ts");\nclass Anime4KConv16x4 extends base_compute_layer_1.default {\n constructor(inputs, outputBuffer, weights) {\n super(inputs, outputBuffer, weights);\n this.label = "Anime4KConv16x4";\n const kernels = weights.weights;\n const bias = weights.bias;\n this.createUniform("kernel_offsets", "array<vec4f, 9>");\n this.createUniform("kernels", "array<mat4x4f, 36>");\n this.createUniform("bias", "vec4f");\n this.shader = this.createStandardShader(`\n \n @compute @workgroup_size(${this.num_work_groups}, ${this.num_work_groups}) fn main( @builtin(global_invocation_id) id: vec3<u32>) {\n \n let x = id.x;\n let y = id.y;\n \n let i = id.y*${this.resolution.width} + x;\n var result = vec4f(0.0, 0.0, 0.0, 0.0);\n \n let coord = vec2<i32>( i32(x), i32(y));\n \n for(var i = 0u; i< 9; i++){\n let pixel_loc = coord + vec2<i32>(kernel_offsets[i].xy);\n let buff_ind = pixel_loc.y*${this.resolution.width} + pixel_loc.x;\n \n let pix_val0 = inputBuffer0[buff_ind];\n let pix_val1 = inputBuffer1[buff_ind];\n \n result += kernels[i]*max(pix_val0, vec4f(0.0));\n result += kernels[i+9]*max(pix_val1, vec4f(0.0));\n result += kernels[i+18]*max(-1.0*pix_val0, vec4f(0.0));\n result += kernels[i+27]*max(-1.0*pix_val1, vec4f(0.0));\n } \n \n\n \n result += bias;\n \n outputBuffer[i] = result;\n }\n `);\n this.setUniform("kernel_offsets", new Float32Array([\n -1, -1, 0, 0,\n -1, 0, 0, 0,\n -1, 1, 0, 0,\n 0, -1, 0, 0,\n 0, 0, 0, 0,\n 0, 1, 0, 0,\n 1, -1, 0, 0,\n 1, 0, 0, 0,\n 1, 1, 0, 0,\n ]));\n this.setUniform("kernels", new Float32Array(kernels));\n this.setUniform("bias", new Float32Array(bias));\n this.defaultSetup();\n }\n}\nexports["default"] = Anime4KConv16x4;\n\n\n//# sourceURL=webpack://WebSR/./src/layers/anime4k/conv2d-16x4.ts?\n}')},"./src/layers/anime4k/conv2d-3x4.ts":(__unused_webpack_module,exports,__webpack_require__)=>{eval('{\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst base_compute_layer_1 = __webpack_require__(/*! ../base_compute_layer */ "./src/layers/base_compute_layer.ts");\nclass Anime4KConv3x4 extends base_compute_layer_1.default {\n constructor(inputTextures, outputBuffer, weights) {\n super(inputTextures, outputBuffer, weights);\n this.label = "Anime4KConv3x4";\n const kernels = weights.weights;\n const bias = weights.bias;\n this.createUniform("kernel_offsets", "array<vec4f, 9>");\n this.createUniform("kernels", "array<mat4x4f, 9>");\n this.createUniform("bias", "vec4f");\n // Set up pipeline in Lazy Load\n this.setUniform("kernel_offsets", new Float32Array([\n -1, -1, 0, 0,\n -1, 0, 0, 0,\n -1, 1, 0, 0,\n 0, -1, 0, 0,\n 0, 0, 0, 0,\n 0, 1, 0, 0,\n 1, -1, 0, 0,\n 1, 0, 0, 0,\n 1, 1, 0, 0,\n ]));\n this.setUniform("kernels", new Float32Array(kernels));\n this.setUniform("bias", new Float32Array(bias));\n }\n lazyLoadSetup() {\n const externalTexture = this.inputs[0] instanceof GPUExternalTexture;\n const textureLoad = externalTexture ? \'textureLoad(inputTexture0, coord + offset)\' :\n \'textureLoad(inputTexture0, coord + offset, 0)\';\n this.shader = this.createStandardShader(`\n \n @compute @workgroup_size(${this.num_work_groups}, ${this.num_work_groups}) fn main( @builtin(global_invocation_id) id: vec3<u32>) {\n \n let x = id.x;\n let y = id.y;\n \n let i = id.y*${this.resolution.width} + x;\n var result = vec4f(0.0, 0.0, 0.0, 0.0);\n \n let coord = vec2<i32>( i32(x), i32(y));\n \n for(var i = 0u; i< 9; i++){\n let offset = vec2<i32>(kernel_offsets[i].xy);\n result += kernels[i]*${textureLoad};\n } \n \n result += bias;\n \n outputBuffer[i] = result;\n }\n `);\n this.pipeline = this.device.createComputePipeline(this.defaultPipelineConfig());\n this.bindGroup = this.defaultBindGroup();\n }\n}\nexports["default"] = Anime4KConv3x4;\n\n\n//# sourceURL=webpack://WebSR/./src/layers/anime4k/conv2d-3x4.ts?\n}')},"./src/layers/anime4k/conv2d-56x4.ts":(__unused_webpack_module,exports,__webpack_require__)=>{eval('{\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst base_compute_layer_1 = __webpack_require__(/*! ../base_compute_layer */ "./src/layers/base_compute_layer.ts");\nclass Anime4KConv56x4 extends base_compute_layer_1.default {\n constructor(inputs, outputBuffer, weights) {\n super(inputs, outputBuffer, weights);\n this.label = "Anime4KConv56x4";\n const kernels = weights.weights;\n const bias = weights.bias;\n this.createUniform("kernels", "array<mat4x4f, 14>");\n this.createUniform("bias", "vec4f");\n let read_buffers = \'\';\n for (let i = 0; i< 7; i++) {\n read_buffers += `\n let pixel_val${i} = inputBuffer${i}[buff_ind];\n result += kernels[${2 * i}]*max(pixel_val${i}, vec4f(0.0));\n result += kernels[${2 * i + 1}]*max(-1.0*pixel_val${i}, vec4f(0.0));\n `;\n }\n this.shader = this.createStandardShader(`\n \n @compute @workgroup_size(${this.num_work_groups}, ${this.num_work_groups}) fn main( @builtin(global_invocation_id) id: vec3<u32>) {\n \n let x = id.x;\n let y = id.y;\n \n let i = id.y*${this.resolution.width} + x;\n var result = vec4f(0.0, 0.0, 0.0, 0.0);\n \n let coord = vec2<i32>( i32(x), i32(y));\n \n let buff_ind = coord.y*${this.resolution.width} + coord.x;\n ${read_buffers}\n \n result += bias;\n \n outputBuffer[buff_ind] = result;\n }\n `);\n this.setUniform("kernels", new Float32Array(kernels));\n this.setUniform("bias", new Float32Array(bias));\n this.defaultSetup();\n }\n defaultPipelineConfig() {\n return {\n label: `${this.label}-pipeline`,\n layout: \'auto\',\n compute: {\n module: this.shader,\n entryPoint: \'main\',\n },\n };\n }\n defaultBindGroup() {\n const entries = [];\n this.inputs.forEach(function (input, i) {\n if (input instanceof GPUExternalTexture) {\n entries.push({ binding: i, resource: input });\n }\n else if (input instanceof GPUTexture) {\n entries.push({ binding: i, resource: input.createView() });\n }\n else if (input instanceof GPUBuffer) {\n entries.push({ binding: i, resource: { buffer: input } });\n }\n });\n this.uniforms.forEach((uniform, i) => {\n entries.push({\n binding: i + this.inputs.length,\n resource: {\n buffer: this.buffers[uniform.name]\n }\n });\n });\n if (this.output instanceof GPUBuffer) {\n entries.push({\n binding: this.inputs.length + this.uniforms.length,\n resource: {\n buffer: this.output\n }\n });\n }\n if (entries.length === 0)\n return null;\n return this.device.createBindGroup({\n layout: this.pipeline.getBindGroupLayout(0),\n entries\n });\n }\n}\nexports["default"] = Anime4KConv56x4;\n\n\n//# sourceURL=webpack://WebSR/./src/layers/anime4k/conv2d-56x4.ts?\n}')},"./src/layers/anime4k/conv2d-8x4.ts":(__unused_webpack_module,exports,__webpack_require__)=>{eval('{\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst base_compute_layer_1 = __webpack_require__(/*! ../base_compute_layer */ "./src/layers/base_compute_layer.ts");\nclass Anime4KConv8x4 extends base_compute_layer_1.default {\n constructor(inputs, outputBuffer, weights) {\n super(inputs, outputBuffer, weights);\n this.label = "Anime4KConv8x4";\n const kernels = weights.weights;\n const bias = weights.bias;\n this.createUniform("kernel_offsets", "array<vec4f, 9>");\n this.createUniform("kernels", "array<mat4x4f, 18>");\n this.createUniform("bias", "vec4f");\n this.shader = this.createStandardShader(`\n \n @compute @workgroup_size(${this.num_work_groups}, ${this.num_work_groups}) fn main( @builtin(global_invocation_id) id: vec3<u32>) {\n \n let x = id.x;\n let y = id.y;\n \n let i = id.y*${this.resolution.width} + x;\n var result = vec4f(0.0, 0.0, 0.0, 0.0);\n \n let coord = vec2<i32>( i32(x), i32(y));\n \n for(var i = 0u; i< 9; i++){\n let pixel_loc = coord + vec2<i32>(kernel_offsets[i].xy);\n let buff_ind = pixel_loc.y*${this.resolution.width} + pixel_loc.x;\n \n let pix_val = inputBuffer0[buff_ind];\n \n result += kernels[i]*max(pix_val, vec4f(0.0));\n result += kernels[i+9]*max(-1.0*pix_val, vec4f(0.0));\n } \n \n result += bias;\n \n outputBuffer[i] = result;\n }\n `);\n this.setUniform("kernel_offsets", new Float32Array([\n -1, -1, 0, 0,\n -1, 0, 0, 0,\n -1, 1, 0, 0,\n 0, -1, 0, 0,\n 0, 0, 0, 0,\n 0, 1, 0, 0,\n 1, -1, 0, 0,\n 1, 0, 0, 0,\n 1, 1, 0, 0,\n ]));\n this.setUniform("kernels", new Float32Array(kernels));\n this.setUniform("bias", new Float32Array(bias));\n this.defaultSetup();\n }\n}\nexports["default"] = Anime4KConv8x4;\n\n\n//# sourceURL=webpack://WebSR/./src/layers/anime4k/conv2d-8x4.ts?\n}')},"./src/layers/anime4k/conv2d-concat2.ts":(__unused_webpack_module,exports,__webpack_require__)=>{eval('{\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst base_compute_layer_1 = __webpack_require__(/*! ../base_compute_layer */ "./src/layers/base_compute_layer.ts");\nclass Anime4KConcat2 extends base_compute_layer_1.default {\n constructor(inputs, outputBuffer, weights) {\n super(inputs, outputBuffer, weights);\n this.label = "Anime4KConcat2";\n this.createUniform("bias", "vec4f");\n const bias = weights.bias;\n this.shader = this.createStandardShader(`\n \n @compute @workgroup_size(${this.num_work_groups}, ${this.num_work_groups}) fn main( @builtin(global_invocation_id) id: vec3<u32>) {\n \n let x = id.x;\n let y = id.y;\n \n let i = id.y*${this.resolution.width} + x;\n var result = vec4f(0.0, 0.0, 0.0, 0.0);\n \n let coord = vec2<i32>( i32(x), i32(y));\n \n let buff_ind = coord.y*${this.resolution.width} + coord.x;\n \n outputBuffer[buff_ind] = inputBuffer0[buff_ind] + inputBuffer1[buff_ind] + bias;\n }\n `);\n this.setUniform("bias", new Float32Array(bias));\n this.defaultSetup();\n }\n}\nexports["default"] = Anime4KConcat2;\n\n\n//# sourceURL=webpack://WebSR/./src/layers/anime4k/conv2d-concat2.ts?\n}')},"./src/layers/anime4k/display.ts":(__unused_webpack_module,exports,__webpack_require__)=>{eval('{\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst base_render_layer_1 = __webpack_require__(/*! ../base_render_layer */ "./src/layers/base_render_layer.ts");\nclass DisplayLayer extends base_render_layer_1.default {\n constructor(inputs, output) {\n super(inputs, output);\n this.label = "DisplayLayer";\n this.vertexScale = {\n width: 1,\n height: 1\n };\n this.sampler = this.device.createSampler({\n addressModeU: "repeat",\n addressModeV: "repeat",\n magFilter: "linear",\n minFilter: "linear",\n mipmapFilter: "linear",\n });\n }\n lazyLoadSetup() {\n const externalTexture = this.inputs[1] instanceof GPUExternalTexture;\n const textureLoad = externalTexture ? \'textureSampleBaseClampToEdge(inputTexture, ourSampler, input.tex_coord)\' :\n \'textureSample(inputTexture, ourSampler, input.tex_coord)\';\n this.shader = this.device.createShaderModule({\n label: `${this.label}-shader`,\n code: `\n \n ${this.defaultVertexShader()}\n @group(0) @binding(0) var<storage, read_write>inputBuffer0: array<vec4f>;\n @group(0) @binding(1) var inputTexture: ${externalTexture ? \'texture_external\' : \'texture_2d<f32>\'};\n @group(0) @binding(2) var ourSampler: sampler;\n \n @fragment fn fragmentMain(input: VertexShaderOutput) -> @location(0) vec4f {\n \n let x = ${this.resolution.width}.0*(input.tex_coord.x);\n let y = ${this.resolution.height}.0*(input.tex_coord.y);\n \n let y2 = u32(floor(y));\n let x2 = u32(floor(x));\n \n let i = y2*${Math.floor(this.resolution.width)} + x2;\n \n let x_floor = u32(fract(x)*2.0);\n let y_floor = u32(fract(y)*2.0);\n \n //I don t know, I think this is right? I found this by trial and error\n let c_index: u32 = x_floor + y_floor*2; \n \n let value = inputBuffer0[i][c_index];\n \n let bicubic = ${textureLoad};\n \n return bicubic + vec4f(value);\n \n } \n `\n });\n this.pipeline = this.device.createRenderPipeline(this.defaultPipelineConfig());\n this.bindGroup = this.defaultBindGroup();\n this.renderPassDescriptor = this.defaultRenderPassDescriptor();\n }\n defaultBindGroup() {\n const entries = [];\n this.inputs.forEach(function (input, i) {\n if (input instanceof GPUExternalTexture) {\n entries.push({ binding: i, resource: input });\n }\n else if (input instanceof GPUTexture) {\n entries.push({ binding: i, resource: input.createView() });\n }\n else if (input instanceof GPUBuffer) {\n entries.push({ binding: i, resource: { buffer: input } });\n }\n });\n entries.push({ binding: this.inputs.length, resource: this.sampler });\n return this.device.createBindGroup({\n layout: this.pipeline.getBindGroupLayout(0),\n entries\n });\n }\n}\nexports["default"] = DisplayLayer;\n\n\n//# sourceURL=webpack://WebSR/./src/layers/anime4k/display.ts?\n}')},"./src/layers/anime4k/display_1x.ts":(__unused_webpack_module,exports,__webpack_require__)=>{eval('{\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst base_render_layer_1 = __webpack_require__(/*! ../base_render_layer */ "./src/layers/base_render_layer.ts");\nclass DisplayLayer extends base_render_layer_1.default {\n constructor(inputs, output) {\n super(inputs, output);\n this.label = "DisplayLayer";\n this.vertexScale = {\n width: 1,\n height: 1\n };\n this.sampler = this.device.createSampler({\n addressModeU: "repeat",\n addressModeV: "repeat",\n magFilter: "linear",\n minFilter: "linear",\n mipmapFilter: "linear",\n });\n }\n lazyLoadSetup() {\n const externalTexture = this.inputs[1] instanceof GPUExternalTexture;\n const textureLoad = externalTexture ? \'textureSampleBaseClampToEdge(inputTexture, ourSampler, input.tex_coord)\' :\n \'textureSample(inputTexture, ourSampler, input.tex_coord)\';\n this.shader = this.device.createShaderModule({\n label: `${this.label}-shader`,\n code: `\n \n ${this.defaultVertexShader()}\n @group(0) @binding(0) var<storage, read_write>inputBuffer0: array<vec4f>;\n @group(0) @binding(1) var inputTexture: ${externalTexture ? \'texture_external\' : \'texture_2d<f32>\'};\n @group(0) @binding(2) var ourSampler: sampler;\n \n @fragment fn fragmentMain(input: VertexShaderOutput) -> @location(0) vec4f {\n \n let x = ${this.resolution.width}.0*(input.tex_coord.x);\n let y = ${this.resolution.height}.0*(input.tex_coord.y);\n \n let y2 = u32(floor(y));\n let x2 = u32(floor(x));\n \n let i = y2*${Math.floor(this.resolution.width)} + x2;\n \n let bicubic = ${textureLoad};\n \n return bicubic + inputBuffer0[i];\n \n } \n `\n });\n this.pipeline = this.device.createRenderPipeline(this.defaultPipelineConfig());\n this.bindGroup = this.defaultBindGroup();\n this.renderPassDescriptor = this.defaultRenderPassDescriptor();\n }\n defaultBindGroup() {\n const entries = [];\n this.inputs.forEach(function (input, i) {\n if (input instanceof GPUExternalTexture) {\n entries.push({ binding: i, resource: input });\n }\n else if (input instanceof GPUTexture) {\n entries.push({ binding: i, resource: input.createView() });\n }\n else if (input instanceof GPUBuffer) {\n entries.push({ binding: i, resource: { buffer: input } });\n }\n });\n entries.push({ binding: this.inputs.length, resource: this.sampler });\n return this.device.createBindGroup({\n layout: this.pipeline.getBindGroupLayout(0),\n entries\n });\n }\n}\nexports["default"] = DisplayLayer;\n\n\n//# sourceURL=webpack://WebSR/./src/layers/anime4k/display_1x.ts?\n}')},"./src/layers/anime4k/display_3c.ts":(__unused_webpack_module,exports,__webpack_require__)=>{eval('{\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst base_render_layer_1 = __webpack_require__(/*! ../base_render_layer */ "./src/layers/base_render_layer.ts");\nclass DisplayLayer3C extends base_render_layer_1.default {\n constructor(inputs, output) {\n super(inputs, output);\n this.label = "DisplayLayer3C";\n this.vertexScale = {\n width: 1,\n height: 1\n };\n this.sampler = this.device.createSampler({\n addressModeU: "repeat",\n addressModeV: "repeat",\n magFilter: "linear",\n minFilter: "linear",\n mipmapFilter: "linear",\n });\n }\n lazyLoadSetup() {\n const externalTexture = this.inputs[3] instanceof GPUExternalTexture;\n const textureLoad = externalTexture ? \'textureSampleBaseClampToEdge(inputTexture, ourSampler, input.tex_coord)\' :\n \'textureSample(inputTexture, ourSampler, input.tex_coord)\';\n this.shader = this.device.createShaderModule({\n label: `${this.label}-shader`,\n code: `\n \n ${this.defaultVertexShader()}\n @group(0) @binding(0) var<storage, read_write>inputBuffer0: array<vec4f>;\n @group(0) @binding(1) var<storage, read_write>inputBuffer1: array<vec4f>;\n @group(0) @binding(2) var<storage, read_write>inputBuffer2: array<vec4f>;\n @group(0) @binding(3) var inputTexture: ${externalTexture ? \'texture_external\' : \'texture_2d<f32>\'};\n @group(0) @binding(4) var ourSampler: sampler;\n \n @fragment fn fragmentMain(input: VertexShaderOutput) -> @location(0) vec4f {\n \n let x = ${this.resolution.width}.0*(input.tex_coord.x);\n let y = ${this.resolution.height}.0*(input.tex_coord.y);\n \n let y2 = u32(floor(y));\n let x2 = u32(floor(x));\n \n let i = y2*${Math.floor(this.resolution.width)} + x2;\n \n let x_floor = u32(fract(x)*2.0);\n let y_floor = u32(fract(y)*2.0);\n \n //I don t know, I think this is right? I found this by trial and error\n let c_index: u32 = x_floor + y_floor*2; \n \n let value = inputBuffer0[i][c_index];\n let value1 = inputBuffer1[i][c_index];\n let value2 = inputBuffer2[i][c_index];\n \n let bicubic = ${textureLoad};\n \n return bicubic + vec4f(value, value1, value2, value2);\n \n } \n `\n });\n this.pipeline = this.device.createRenderPipeline(this.defaultPipelineConfig());\n this.bindGroup = this.defaultBindGroup();\n this.renderPassDescriptor = this.defaultRenderPassDescriptor();\n }\n defaultPipelineConfig() {\n return {\n label: `${this.label}-pipeline`,\n layout: \'auto\',\n vertex: {\n module: this.shader,\n entryPoint: \'vertexMain\',\n },\n fragment: {\n module: this.shader,\n entryPoint: \'fragmentMain\',\n targets: [{ format: this.output.format }],\n },\n };\n }\n defaultBindGroup() {\n const entries = [];\n this.inputs.forEach(function (input, i) {\n if (input instanceof GPUExternalTexture) {\n entries.push({ binding: i, resource: input });\n }\n else if (input instanceof GPUTexture) {\n entries.push({ binding: i, resource: input.createView() });\n }\n else if (input instanceof GPUBuffer) {\n entries.push({ binding: i, resource: { buffer: input } });\n }\n });\n entries.push({ binding: this.inputs.length, resource: this.sampler });\n return this.device.createBindGroup({\n layout: this.pipeline.getBindGroupLayout(0),\n entries\n });\n }\n}\nexports["default"] = DisplayLayer3C;\n\n\n//# sourceURL=webpack://WebSR/./src/layers/anime4k/display_3c.ts?\n}')},"./src/layers/base_compute_layer.ts":(__unused_webpack_module,exports,__webpack_require__)=>{eval('{\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst base_layer_1 = __webpack_require__(/*! ./base_layer */ "./src/layers/base_layer.ts");\nclass ComputeLayer extends base_layer_1.default {\n constructor(inputTextures, outputBuffer, weights) {\n super(inputTextures, outputBuffer, weights);\n this.num_work_groups = 8;\n }\n createStandardShader(computeShader) {\n return this.device.createShaderModule({\n label: `${this.label}-shader`,\n code: `\n \n ${this.computeShaderInputs()}\n \n ${computeShader}\n `\n });\n }\n computeShaderInputs() {\n const inputs = [];\n for (let i = 0; i< this.inputs.length; i++) {\n if (this.inputs[i] instanceof GPUTexture) {\n inputs.push(`@group(0) @binding(${i}) var inputTexture${i}: texture_2d<f32>;`);\n }\n else if (this.inputs[i] instanceof GPUExternalTexture) {\n inputs.push(`@group(0) @binding(${i}) var inputTexture${i}: texture_external;`);\n }\n else if (this.inputs[i] instanceof GPUBuffer) {\n inputs.push(`@group(0) @binding(${i}) var<storage, read_write>inputBuffer${i}: array<vec4f>;`);\n }\n else {\n console.log(this.inputs[i]);\n throw new Error("Input is undefined or non of the correct input type");\n }\n }\n // console.log("This layer", this.label);\n // console.log(this.inputs.length);\n this.uniforms.forEach((uniform, i) => {\n inputs.push(`@group(0) @binding(${i + this.inputs.length}) var<uniform>${uniform.name}: ${uniform.type};`);\n });\n inputs.push(`@group(0) @binding(${this.inputs.length + this.uniforms.length}) var<storage, read_write>outputBuffer: array<vec4f>;`);\n return inputs.join(\'\\n\');\n }\n defaultPipelineConfig() {\n return {\n label: `${this.label}-pipeline`,\n layout: \'auto\',\n compute: {\n module: this.shader,\n entryPoint: \'main\',\n },\n };\n }\n defaultSetup() {\n this.pipeline = this.device.createComputePipeline(this.defaultPipelineConfig());\n this.bindGroup = this.defaultBindGroup();\n }\n lazyLoadSetup() {\n }\n run() {\n const encoder = this.device.createCommandEncoder({ label: this.label });\n if (!this.pipeline)\n this.lazyLoadSetup();\n const pass = encoder.beginComputePass({ label: this.label });\n pass.setPipeline(this.pipeline);\n if (this.hasExternalTexture()) {\n this.bindGroup = this.defaultBindGroup();\n }\n if (this.bindGroup) {\n pass.setBindGroup(0, this.bindGroup);\n }\n // Dividing into work groups speeds up inference. If width or height aren\'t cleandly divided by work groups, we round to the nearest multiple of work-groups\n // Physically, this means shaving a few pixels (up to num_work_groups-1) off the bottom and right edges of the canvas but users shouldn\'t notice?\n pass.dispatchWorkgroups(Math.floor(this.resolution.width / this.num_work_groups), Math.floor(this.resolution.height / this.num_work_groups));\n pass.end();\n this.device.queue.submit([encoder.finish()]);\n }\n}\nexports["default"] = ComputeLayer;\n\n\n//# sourceURL=webpack://WebSR/./src/layers/base_compute_layer.ts?\n}')},"./src/layers/base_layer.ts":(__unused_webpack_module,exports)=>{eval('{\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nclass Layer {\n constructor(inputs, output, weights) {\n this.context = globalThis.context;\n this.device = this.context.device;\n this.resolution = this.context.resolution;\n this.inputs = inputs;\n this.output = output;\n this.uniforms = [];\n this.buffers = {};\n this.weights = weights;\n }\n createUniform(name, type) {\n this.uniforms.push({ name, type });\n }\n setUniform(name, value) {\n const buffer = this.device.createBuffer({\n label: `layer-${this.label}-buffer-${name}`,\n size: value.byteLength,\n usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,\n });\n this.device.queue.writeBuffer(buffer, /*bufferOffset=*/ 0, value);\n this.buffers[name] = buffer;\n }\n defaultBindGroup() {\n const entries = [];\n this.inputs.forEach(function (input, i) {\n if (input instanceof GPUExternalTexture) {\n entries.push({ binding: i, resource: input });\n }\n else if (input instanceof GPUTexture) {\n entries.push({ binding: i, resource: input.createView() });\n }\n else if (input instanceof GPUBuffer) {\n entries.push({ binding: i, resource: { buffer: input } });\n }\n });\n this.uniforms.forEach((uniform, i) => {\n entries.push({\n binding: i + this.inputs.length,\n resource: {\n buffer: this.buffers[uniform.name]\n }\n });\n });\n if (this.output instanceof GPUBuffer) {\n entries.push({\n binding: this.inputs.length + this.uniforms.length,\n resource: {\n buffer: this.output\n }\n });\n }\n if (entries.length === 0)\n return null;\n return this.device.createBindGroup({\n layout: this.pipeline.getBindGroupLayout(0),\n entries\n });\n }\n hasExternalTexture() {\n for (const input of this.inputs) {\n if (input instanceof GPUExternalTexture)\n return true;\n }\n return false;\n }\n lazyLoadSetup() { }\n run() { }\n}\nexports["default"] = Layer;\n\n\n//# sourceURL=webpack://WebSR/./src/layers/base_layer.ts?\n}')},"./src/layers/base_render_layer.ts":(__unused_webpack_module,exports,__webpack_require__)=>{eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst base_layer_1 = __webpack_require__(/*! ./base_layer */ \"./src/layers/base_layer.ts\");\nclass RenderLayer extends base_layer_1.default {\n constructor(inputs, output, weights) {\n super(inputs, output, weights);\n this.vertexScale = this.context.resolution;\n }\n defaultVertexShader() {\n return `\n \n struct VertexShaderOutput {\n @builtin(position) position: vec4f,\n @location(0) tex_coord: vec2f,\n };\n\n @vertex\n fn vertexMain( @builtin(vertex_index) vertexIndex : u32) -> VertexShaderOutput{\n let pos = array(\n // 1st triangle\n vec2f( -1.0, -1.0), // center\n vec2f( 1.0, -1.0), // right, center\n vec2f( -1.0, 1.0), // center, top\n \n // 2st triangle\n vec2f( -1.0, 1.0), // center, top\n vec2f( 1.0, -1.0), // right, center\n vec2f( 1.0, 1.0), // right, top\n );\n \n var vsOutput: VertexShaderOutput;\n let xy = pos[vertexIndex];\n vsOutput.position = vec4f(xy, 0.0, 1.0);\n vsOutput.tex_coord = xy*0.5 + 0.5;\n vsOutput.tex_coord.y = - 1.0* vsOutput.tex_coord.y + 1.0;\n vsOutput.tex_coord.x = vsOutput.tex_coord.x*${this.vertexScale.width};\n vsOutput.tex_coord.y = vsOutput.tex_coord.y*${this.vertexScale.height};\n return vsOutput;\n }\n `;\n }\n defaultPipelineConfig() {\n return {\n label: `${this.label}-pipeline`,\n layout: 'auto',\n vertex: {\n module: this.shader,\n entryPoint: 'vertexMain',\n },\n fragment: {\n module: this.shader,\n entryPoint: 'fragmentMain',\n targets: [{ format: this.output.format }],\n },\n };\n }\n defaultSetup() {\n this.pipeline = this.device.createRenderPipeline(this.defaultPipelineConfig());\n this.bindGroup = this.defaultBindGroup();\n this.renderPassDescriptor = this.defaultRenderPassDescriptor();\n }\n defaultRenderPassDescriptor() {\n return {\n label: `${this.label}-render-pass`,\n colorAttachments: [\n {\n view: this.output.createView(),\n clearValue: [0, 0, 0, 1],\n loadOp: 'clear',\n storeOp: 'store',\n },\n ],\n };\n }\n createStandardShader(fragmentShader) {\n return this.device.createShaderModule({\n label: `${this.label}-shader`,\n code: `\n \n ${this.defaultVertexShader()}\n \n ${this.fragmentShaderInputs()}\n \n ${fragmentShader}\n `\n });\n }\n fragmentShaderInputs() {\n const inputs = [];\n for (let i = 0; i< this.inputs.length; i++) {\n let type = (this.inputs[i] instanceof GPUTexture) ? 'texture_2d<f32>' : 'texture_external';\n inputs.push(`@group(0) @binding(0) var inputTexture${i}: ${type};`);\n }\n this.uniforms.forEach((uniform, i) => {\n inputs.push(`@group(0) @binding(${i + this.inputs.length}) var<uniform>${uniform.name}: ${uniform.type};`);\n });\n return inputs.join('\\n');\n }\n run() {\n const encoder = this.device.createCommandEncoder({ label: this.label });\n if (!this.pipeline)\n this.lazyLoadSetup();\n const pass = encoder.beginRenderPass(this.renderPassDescriptor);\n pass.setPipeline(this.pipeline);\n if (this.hasExternalTexture()) {\n this.bindGroup = this.defaultBindGroup();\n }\n if (this.bindGroup) {\n pass.setBindGroup(0, this.bindGroup);\n }\n pass.draw(6); // call our vertex shader 6 times\n pass.end();\n this.device.queue.submit([encoder.finish()]);\n }\n setOutput(outputTexture) {\n this.output = outputTexture;\n this.renderPassDescriptor = this.defaultRenderPassDescriptor();\n }\n}\nexports[\"default\"] = RenderLayer;\n\n\n//# sourceURL=webpack://WebSR/./src/layers/base_render_layer.ts?\n}")},"./src/layers/utils/gaussian.ts":(__unused_webpack_module,exports,__webpack_require__)=>{eval('{\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst base_render_layer_1 = __webpack_require__(/*! ../base_render_layer */ "./src/layers/base_render_layer.ts");\nclass GuassianLayer extends base_render_layer_1.default {\n constructor(inputTextures, outputTexture) {\n super(inputTextures, outputTexture);\n this.label = "Gaussian";\n this.createUniform("gaussian", "array<vec3f, 3>");\n this.createUniform("kernel_offsets", "array<vec4f, 9>");\n this.shader = this.createStandardShader(`\n \n @fragment fn fragmentMain(input: VertexShaderOutput) -> @location(0) vec4f {\n \n var val = 0.0;\n \n for(var i = 0u; i< 3; i++){\n \n let a = vec3f(\n textureLoad(inputTexture0, vec2<i32>(input.tex_coord + kernel_offsets[i*3].xy), 0).x,\n textureLoad(inputTexture0, vec2<i32>(input.tex_coord + kernel_offsets[i*3].xy), 0).x,\n textureLoad(inputTexture0, vec2<i32>(input.tex_coord + kernel_offsets[i*3].xy), 0).x\n );\n \n val += dot(a, gaussian[i]);\n \n } \n \n \n return vec4f(val, val, val, 1.0);\n } \n `);\n this.setUniform("gaussian", new Float32Array([\n 0.0675, 0.125, 0.0675, 0.0,\n 0.125, 0.250, 0.1250, 0.0,\n 0.0675, 0.125, 0.0675, 0.0\n ]));\n this.setUniform("kernel_offsets", new Float32Array([\n -1, -1, 0, 0,\n 0, -1, 0, 0,\n 1, -1, 0, 0,\n -1, 0, 0, 0,\n 0, 0, 0, 0,\n 1, 0, 0, 0,\n -1, 1, 0, 0,\n 0, 1, 0, 0,\n 1, 1, 0, 0,\n ]));\n this.defaultSetup();\n }\n}\nexports["default"] = GuassianLayer;\n\n\n//# sourceURL=webpack://WebSR/./src/layers/utils/gaussian.ts?\n}')},"./src/layers/utils/rgb_2_yuv.ts":(__unused_webpack_module,exports,__webpack_require__)=>{eval('{\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst base_render_layer_1 = __webpack_require__(/*! ../base_render_layer */ "./src/layers/base_render_layer.ts");\nclass RGB2YUV extends base_render_layer_1.default {\n constructor(inputTextures, outputTexture) {\n super(inputTextures, outputTexture);\n this.createUniform("rgb2yuv", "mat3x3f");\n this.shader = this.createStandardShader(`\n \n @fragment fn fragmentMain(input: VertexShaderOutput) -> @location(0) vec4f {\n \n let color = textureLoad(inputTexture0, vec2<i32>(input.tex_coord), 0); \n let yuv = rgb2yuv*color.xyz;\n \n return vec4f(yuv, 1.0);\n } \n `);\n this.setUniform("rgb2yuv", new Float32Array([\n 0.299, -0.1473, 0.615, 1.0,\n 0.587, -.2886, -.51499, 1.0,\n 0.114, 0.436, -.1001, 1.0\n ]));\n this.defaultSetup();\n }\n}\nexports["default"] = RGB2YUV;\n\n\n//# sourceURL=webpack://WebSR/./src/layers/utils/rgb_2_yuv.ts?\n}')},"./src/main.ts":function(__unused_webpack_module,exports,__webpack_require__){eval('{\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst context_1 = __webpack_require__(/*! ./context */ "./src/context.ts");\nconst renderer_1 = __webpack_require__(/*! ./renderer */ "./src/renderer.ts");\nconst network_list_1 = __webpack_require__(/*! ./networks/network_list */ "./src/networks/network_list.ts");\nconst utils_1 = __webpack_require__(/*! ./utils */ "./src/utils.ts");\nclass WebSR {\n constructor(params) {\n if (!network_list_1.NetworkList[params.network_name])\n throw Error(`Network ${params.network_name} is not defined or implemented`);\n this.source = params.source;\n const source = this.source;\n this.resolution = params.resolution ? params.resolution : {\n width: (0, utils_1.getSourceWidth)(source),\n height: (0, utils_1.getSourceHeight)(source)\n };\n const scale = network_list_1.NetworkScales[params.network_name];\n if (params.canvas)\n this.canvas = params.canvas;\n else {\n this.canvas = new HTMLCanvasElement();\n this.canvas.width = this.resolution.width * scale;\n this.canvas.height = this.resolution.height * scale;\n }\n this.scale = scale;\n this.context = new context_1.default(params.gpu, this.resolution, this.canvas, this.scale, this.debug);\n globalThis.context = this.context;\n this.network = new network_list_1.NetworkList[params.network_name](params.weights);\n this.renderer = new renderer_1.default(this.network, this.source);\n }\n switchNetwork(network, weights) {\n if (!network_list_1.NetworkList[network])\n throw Error(`Network ${network} is not defined or implemented`);\n this.network = new network_list_1.NetworkList[network](weights);\n this.renderer.switchNetwork(this.network);\n }\n static initWebGPU() {\n return __awaiter(this, void 0, void 0, function* () {\n if (!navigator.gpu)\n return false;\n const adapter = yield navigator.gpu.requestAdapter();\n if (!adapter)\n return false;\n const device = yield adapter.requestDevice();\n if (!device)\n return false;\n return device;\n });\n }\n start() {\n return __awaiter(this, void 0, void 0, function* () {\n yield this.renderer.start();\n });\n }\n stop() {\n return __awaiter(this, void 0, void 0, function* () {\n yield this.renderer.stop();\n });\n }\n render(source) {\n return __awaiter(this, void 0, void 0, function* () {\n yield this.renderer.render(source);\n });\n }\n destroy() {\n return __awaiter(this, void 0, void 0, function* () {\n yield this.renderer.stop();\n this.context.destroy();\n });\n }\n}\nexports["default"] = WebSR;\n\n\n//# sourceURL=webpack://WebSR/./src/main.ts?\n}')},"./src/networks/anime4k/cnn-2x-l.ts":function(__unused_webpack_module,exports,__webpack_require__){eval('{\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst base_network_1 = __webpack_require__(/*! ../base_network */ "./src/networks/base_network.ts");\nconst conv2d_3x4_1 = __webpack_require__(/*! ../../layers/anime4k/conv2d-3x4 */ "./src/layers/anime4k/conv2d-3x4.ts");\nconst display_3c_1 = __webpack_require__(/*! ../../layers/anime4k/display_3c */ "./src/layers/anime4k/display_3c.ts");\nconst conv2d_16x4_1 = __webpack_require__(/*! ../../layers/anime4k/conv2d-16x4 */ "./src/layers/anime4k/conv2d-16x4.ts");\nconst conv2d_112x4_1 = __webpack_require__(/*! ../../layers/anime4k/conv2d-112x4 */ "./src/layers/anime4k/conv2d-112x4.ts");\nconst conv2d_concat2_1 = __webpack_require__(/*! ../../layers/anime4k/conv2d-concat2 */ "./src/layers/anime4k/conv2d-concat2.ts");\nconst utils_1 = __webpack_require__(/*! ../../utils */ "./src/utils.ts");\nclass Anime4KCNN2XL extends base_network_1.default {\n constructor(weights) {\n super(weights);\n }\n model() {\n const layers = [];\n const weights = this.weights.layers;\n const context = this.context;\n layers.push(new conv2d_3x4_1.default([context.input], context.buffer(\'conv2d_tf\'), weights[\'conv2d_tf\']));\n layers.push(new conv2d_3x4_1.default([context.input], context.buffer(\'conv2d_tf1\'), weights[\'conv2d_tf1\']));\n for (let i = 1; i< 7; i++) {\n let source = (i == 1) ? `conv2d_tf` : `conv2d_${i - 1}_tf`;\n layers.push(new conv2d_16x4_1.default([context.buffer(source), context.buffer(source + "1")], context.buffer(`conv2d_${i}_tf`), weights[`conv2d_${i}_tf`]));\n layers.push(new conv2d_16x4_1.default([context.buffer(source), context.buffer(source + "1")], context.buffer(`conv2d_${i}_tf1`), weights[`conv2d_${i}_tf1`]));\n }\n for (let c = 0; c < 3; c++) {\n const sources_0 = [];\n const sources_1 = [];\n for (let i = 0; i < 7; i++) {\n let source = (i == 0) ? `conv2d_tf` : `conv2d_${i}_tf`;\n sources_0.push(context.buffer(source));\n sources_1.push(context.buffer(source + "1"));\n }\n const dest = (c == 0) ? `conv2d_last_tf` : `conv2d_last_tf${c}`;\n layers.push(new conv2d_112x4_1.default(sources_0, context.buffer(`conv2d_last_${c}_pt1`), weights[dest], true));\n layers.push(new conv2d_112x4_1.default(sources_1, context.buffer(`conv2d_last_${c}_pt2`), weights[dest], false));\n layers.push(new conv2d_concat2_1.default([context.buffer(`conv2d_last_${c}_pt1`), context.buffer(`conv2d_last_${c}_pt2`)], context.buffer(dest), weights[dest]));\n }\n const paint = new display_3c_1.default([context.buffer(\'conv2d_last_tf\'), context.buffer(\'conv2d_last_tf1\'), context.buffer(\'conv2d_last_tf2\'), context.input], context.texture(\'output\'));\n layers.push(paint);\n return layers;\n }\n feedForward(source) {\n return __awaiter(this, void 0, void 0, function* () {\n if ((0, utils_1.isHTMLVideoElement)(source) || (0, utils_1.isVideoFrame)(source)) {\n this.context.input = this.context.device.importExternalTexture({ source });\n }\n else {\n const bitmap = (0, utils_1.isImageBitmap)(source) ? source : yield createImageBitmap(source);\n const width = (0, utils_1.getSourceWidth)(source);\n const height = (0, utils_1.getSourceHeight)(source);\n this.context.device.queue.copyExternalImageToTexture({ source: bitmap }, { texture: this.context.texture(\'input\', { format: "rgba8unorm" }) }, [width, height]);\n this.context.input = this.context.texture(\'input\');\n }\n this.layers[0].inputs[0] = this.context.input;\n this.layers[1].inputs[0] = this.context.input;\n this.layers[this.layers.length - 1].inputs[3] = this.context.input;\n this.layers[0].lazyLoadSetup();\n this.layers[this.layers.length - 1].lazyLoadSetup();\n this.layers.forEach(function (layer) {\n layer.run();\n });\n });\n }\n}\nexports["default"] = Anime4KCNN2XL;\n\n\n//# sourceURL=webpack://WebSR/./src/networks/anime4k/cnn-2x-l.ts?\n}')},"./src/networks/anime4k/cnn-2x-m.ts":function(__unused_webpack_module,exports,__webpack_require__){eval("{\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst base_network_1 = __webpack_require__(/*! ../base_network */ \"./src/networks/base_network.ts\");\nconst conv2d_3x4_1 = __webpack_require__(/*! ../../layers/anime4k/conv2d-3x4 */ \"./src/layers/anime4k/conv2d-3x4.ts\");\nconst conv2d_8x4_1 = __webpack_require__(/*! ../../layers/anime4k/conv2d-8x4 */ \"./src/layers/anime4k/conv2d-8x4.ts\");\nconst conv2d_56x4_1 = __webpack_require__(/*! ../../layers/anime4k/conv2d-56x4 */ \"./src/layers/anime4k/conv2d-56x4.ts\");\nconst display_3c_1 = __webpack_require__(/*! ../../layers/anime4k/display_3c */ \"./src/layers/anime4k/display_3c.ts\");\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./src/utils.ts\");\nclass Anime4KCNN2XM extends base_network_1.default {\n constructor(weights) {\n super(weights);\n }\n model() {\n const layers = [];\n const weights = this.weights.layers;\n const context = this.context;\n const conv2d_tf = new conv2d_3x4_1.default([context.input], context.buffer('conv2d_tf'), weights['conv2d_tf']);\n const conv2d_1_tf = new conv2d_8x4_1.default([context.buffer('conv2d_tf')], context.buffer('conv2d_1_tf'), weights['conv2d_1_tf']);\n const conv2d_2_tf = new conv2d_8x4_1.default([context.buffer('conv2d_1_tf')], context.buffer('conv2d_2_tf'), weights['conv2d_2_tf']);\n const conv2d_3_tf = new conv2d_8x4_1.default([context.buffer('conv2d_2_tf')], context.buffer('conv2d_3_tf'), weights['conv2d_3_tf']);\n const conv2d_4_tf = new conv2d_8x4_1.default([context.buffer('conv2d_3_tf')], context.buffer('conv2d_4_tf'), weights['conv2d_4_tf']);\n const conv2d_5_tf = new conv2d_8x4_1.default([context.buffer('conv2d_4_tf')], context.buffer('conv2d_5_tf'), weights['conv2d_5_tf']);\n const conv2d_6_tf = new conv2d_8x4_1.default([context.buffer('conv2d_5_tf')], context.buffer('conv2d_6_tf'), weights['conv2d_6_tf']);\n const conv2d_7_tf = new conv2d_56x4_1.default([context.buffer('conv2d_tf'), context.buffer('conv2d_1_tf'), context.buffer('conv2d_2_tf'), context.buffer('conv2d_3_tf'), context.buffer('conv2d_4_tf'), context.buffer('conv2d_5_tf'), context.buffer('conv2d_6_tf')], context.buffer('conv2d_7_tf'), weights['conv2d_7_tf']);\n const conv2d_7_tf1 = new conv2d_56x4_1.default([context.buffer('conv2d_tf'), context.buffer('conv2d_1_tf'), context.buffer('conv2d_2_tf'), context.buffer('conv2d_3_tf'), context.buffer('conv2d_4_tf'), context.buffer('conv2d_5_tf'), context.buffer('conv2d_6_tf')], context.buffer('conv2d_7_tf1'), weights['conv2d_7_tf1']);\n const conv2d_7_tf2 = new conv2d_56x4_1.default([context.buffer('conv2d_tf'), context.buffer('conv2d_1_tf'), context.buffer('conv2d_2_tf'), context.buffer('conv2d_3_tf'), context.buffer('conv2d_4_tf'), context.buffer('conv2d_5_tf'), context.buffer('conv2d_6_tf')], context.buffer('conv2d_7_tf2'), weights['conv2d_7_tf2']);\n const paint = new display_3c_1.default([context.buffer('conv2d_7_tf'), context.buffer('conv2d_7_tf1'), context.buffer('conv2d_7_tf2'), context.input], context.texture('output'));\n layers.push(conv2d_tf, conv2d_1_tf, conv2d_2_tf, conv2d_3_tf, conv2d_4_tf, conv2d_5_tf, conv2d_6_tf, conv2d_7_tf, conv2d_7_tf1, conv2d_7_tf2, paint);\n return layers;\n }\n feedForward(source) {\n return __awaiter(this, void 0, void 0, function* () {\n if ((0, utils_1.isHTMLVideoElement)(source) || (0, utils_1.isVideoFrame)(source)) {\n this.context.input = this.context.device.importExternalTexture({ source });\n }\n else {\n const bitmap = (0, utils_1.isImageBitmap)(source) ? source : yield createImageBitmap(source);\n const width = (0, utils_1.getSourceWidth)(source);\n const height = (0, utils_1.getSourceHeight)(source);\n this.context.device.queue.copyExternalImageToTexture({ source: bitmap }, { texture: this.context.texture('input', { format: \"rgba8unorm\" }) }, [width, height]);\n this.context.input = this.context.texture('input');\n }\n this.layers[0].inputs[0] = this.context.input;\n this.layers[this.layers.length - 1].inputs[3] = this.context.input;\n this.layers[0].lazyLoadSetup();\n this.layers[this.layers.length - 1].lazyLoadSetup();\n this.layers.forEach(function (layer) {\n layer.run();\n });\n });\n }\n}\nexports[\"default\"] = Anime4KCNN2XM;\n\n\n//# sourceURL=webpack://WebSR/./src/networks/anime4k/cnn-2x-m.ts?\n}")},"./src/networks/anime4k/cnn-2x-s.ts":function(__unused_webpack_module,exports,__webpack_require__){eval("{\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst base_network_1 = __webpack_require__(/*! ../base_network */ \"./src/networks/base_network.ts\");\nconst conv2d_3x4_1 = __webpack_require__(/*! ../../layers/anime4k/conv2d-3x4 */ \"./src/layers/anime4k/conv2d-3x4.ts\");\nconst conv2d_8x4_1 = __webpack_require__(/*! ../../layers/anime4k/conv2d-8x4 */ \"./src/layers/anime4k/conv2d-8x4.ts\");\nconst display_1 = __webpack_require__(/*! ../../layers/anime4k/display */ \"./src/layers/anime4k/display.ts\");\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./src/utils.ts\");\nclass Anime4KCNN2XS extends base_network_1.default {\n constructor(weights) {\n super(weights);\n }\n model() {\n const layers = [];\n const weights = this.weights.layers;\n const context = this.context;\n const conv2d_tf = new conv2d_3x4_1.default([context.input], context.buffer('conv2d_tf'), weights['conv2d_tf']);\n const conv2d_1_tf = new conv2d_8x4_1.default([context.buffer('conv2d_tf')], context.buffer('conv2d_1_tf'), weights['conv2d_1_tf']);\n const conv2d_2_tf = new conv2d_8x4_1.default([context.buffer('conv2d_1_tf')], context.buffer('conv2d_2_tf'), weights['conv2d_2_tf']);\n const conv2d_last_tf = new conv2d_8x4_1.default([context.buffer('conv2d_2_tf')], context.buffer('conv2d_last_tf'), weights['conv2d_last_tf']);\n const paint = new display_1.default([context.buffer('conv2d_last_tf'), context.input], context.texture('output'));\n layers.push(conv2d_tf, conv2d_1_tf, conv2d_2_tf, conv2d_last_tf, paint);\n return layers;\n }\n feedForward(source) {\n return __awaiter(this, void 0, void 0, function* () {\n if ((0, utils_1.isHTMLVideoElement)(source) || (0, utils_1.isVideoFrame)(source)) {\n this.context.input = this.context.device.importExternalTexture({ source });\n }\n else {\n const bitmap = (0, utils_1.isImageBitmap)(source) ? source : yield createImageBitmap(source);\n const width = (0, utils_1.getSourceWidth)(source);\n const height = (0, utils_1.getSourceHeight)(source);\n this.context.device.queue.copyExternalImageToTexture({ source: bitmap }, { texture: this.context.texture('input', { format: \"rgba8unorm\" }) }, [width, height]);\n this.context.input = this.context.texture('input');\n }\n this.layers[0].inputs[0] = this.context.input;\n this.layers[this.layers.length - 1].inputs[1] = this.context.input;\n this.layers[0].lazyLoadSetup();\n this.layers[this.layers.length - 1].lazyLoadSetup();\n this.layers.forEach(function (layer) {\n layer.run();\n });\n });\n }\n}\nexports[\"default\"] = Anime4KCNN2XS;\n\n\n//# sourceURL=webpack://WebSR/./src/networks/anime4k/cnn-2x-s.ts?\n}")},"./src/networks/anime4k/cnn-restore-l.ts":function(__unused_webpack_module,exports,__webpack_require__){eval('{\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst base_network_1 = __webpack_require__(/*! ../base_network */ "./src/networks/base_network.ts");\nconst conv2d_3x4_1 = __webpack_require__(/*! ../../layers/anime4k/conv2d-3x4 */ "./src/layers/anime4k/conv2d-3x4.ts");\nconst conv2d_16x4_1 = __webpack_require__(/*! ../../layers/anime4k/conv2d-16x4 */ "./src/layers/anime4k/conv2d-16x4.ts");\nconst display_1x_1 = __webpack_require__(/*! ../../layers/anime4k/display_1x */ "./src/layers/anime4k/display_1x.ts");\nconst utils_1 = __webpack_require__(/*! ../../utils */ "./src/utils.ts");\nclass Anime4KCNNRL extends base_network_1.default {\n constructor(weights) {\n super(weights);\n }\n model() {\n const layers = [];\n const weights = this.weights.layers;\n const context = this.context;\n layers.push(new conv2d_3x4_1.default([context.input], context.buffer(\'conv2d_tf\'), weights[\'conv2d_tf\']));\n layers.push(new conv2d_3x4_1.default([context.input], context.buffer(\'conv2d_tf1\'), weights[\'conv2d_tf1\']));\n for (let i = 1; i < 4; i++) {\n let source = (i == 1) ? `conv2d_tf` : `conv2d_${i - 1}_tf`;\n layers.push(new conv2d_16x4_1.default([context.buffer(source), context.buffer(source + "1")], context.buffer(`conv2d_${i}_tf`), weights[`conv2d_${i}_tf`]));\n layers.push(new conv2d_16x4_1.default([context.buffer(source), context.buffer(source + "1")], context.buffer(`conv2d_${i}_tf1`), weights[`conv2d_${i}_tf1`]));\n }\n layers.push(new conv2d_16x4_1.default([context.buffer(\'conv2d_3_tf\'), context.buffer(\'conv2d_3_tf1\')], context.buffer(`conv2d_out_tf`), weights[`conv2d_out_tf`]));\n const paint = new display_1x_1.default([context.buffer(\'conv2d_out_tf\'), context.input], context.texture(\'output\'));\n layers.push(paint);\n return layers;\n }\n feedForward(source) {\n return __awaiter(this, void 0, void 0, function* () {\n if ((0, utils_1.isHTMLVideoElement)(source) || (0, utils_1.isVideoFrame)(source)) {\n this.context.input = this.context.device.importExternalTexture({ source });\n }\n else {\n const bitmap = (0, utils_1.isImageBitmap)(source) ? source : yield createImageBitmap(source);\n const width = (0, utils_1.getSourceWidth)(source);\n const height = (0, utils_1.getSourceHeight)(source);\n this.context.device.queue.copyExternalImageToTexture({ source: bitmap }, { texture: this.context.texture(\'input\', { format: "rgba8unorm" }) }, [width, height]);\n this.context.input = this.context.texture(\'input\');\n }\n this.layers[0].inputs[0] = this.context.input;\n this.layers[1].inputs[0] = this.context.input;\n this.layers[this.layers.length - 1].inputs[1] = this.context.input;\n this.layers.forEach(function (layer) {\n layer.run();\n });\n });\n }\n}\nexports["default"] = Anime4KCNNRL;\n\n\n//# sourceURL=webpack://WebSR/./src/networks/anime4k/cnn-restore-l.ts?\n}')},"./src/networks/anime4k/cnn-restore-m.ts":function(__unused_webpack_module,exports,__webpack_require__){eval("{\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst base_network_1 = __webpack_require__(/*! ../base_network */ \"./src/networks/base_network.ts\");\nconst conv2d_3x4_1 = __webpack_require__(/*! ../../layers/anime4k/conv2d-3x4 */ \"./src/layers/anime4k/conv2d-3x4.ts\");\nconst conv2d_8x4_1 = __webpack_require__(/*! ../../layers/anime4k/conv2d-8x4 */ \"./src/layers/anime4k/conv2d-8x4.ts\");\nconst conv2d_56x4_1 = __webpack_require__(/*! ../../layers/anime4k/conv2d-56x4 */ \"./src/layers/anime4k/conv2d-56x4.ts\");\nconst display_1x_1 = __webpack_require__(/*! ../../layers/anime4k/display_1x */ \"./src/layers/anime4k/display_1x.ts\");\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./src/utils.ts\");\nclass Anime4KCNNRM extends base_network_1.default {\n constructor(weights) {\n super(weights);\n }\n model() {\n const layers = [];\n const weights = this.weights.layers;\n const context = this.context;\n const conv2d_tf = new conv2d_3x4_1.default([context.input], context.buffer('conv2d_tf'), weights['conv2d_tf']);\n const conv2d_1_tf = new conv2d_8x4_1.default([context.buffer('conv2d_tf')], context.buffer('conv2d_1_tf'), weights['conv2d_1_tf']);\n const conv2d_2_tf = new conv2d_8x4_1.default([context.buffer('conv2d_1_tf')], context.buffer('conv2d_2_tf'), weights['conv2d_2_tf']);\n const conv2d_3_tf = new conv2d_8x4_1.default([context.buffer('conv2d_2_tf')], context.buffer('conv2d_3_tf'), weights['conv2d_3_tf']);\n const conv2d_4_tf = new conv2d_8x4_1.default([context.buffer('conv2d_3_tf')], context.buffer('conv2d_4_tf'), weights['conv2d_4_tf']);\n const conv2d_5_tf = new conv2d_8x4_1.default([context.buffer('conv2d_4_tf')], context.buffer('conv2d_5_tf'), weights['conv2d_5_tf']);\n const conv2d_6_tf = new conv2d_8x4_1.default([context.buffer('conv2d_5_tf')], context.buffer('conv2d_6_tf'), weights['conv2d_6_tf']);\n const conv2d_out_tf = new conv2d_56x4_1.default([context.buffer('conv2d_tf'), context.buffer('conv2d_1_tf'), context.buffer('conv2d_2_tf'), context.buffer('conv2d_3_tf'), context.buffer('conv2d_4_tf'), context.buffer('conv2d_5_tf'), context.buffer('conv2d_6_tf')], context.buffer('conv2d_out_tf'), weights['conv2d_out_tf']);\n const paint = new display_1x_1.default([context.buffer('conv2d_out_tf'), context.input], context.texture('output'));\n layers.push(conv2d_tf, conv2d_1_tf, conv2d_2_tf, conv2d_3_tf, conv2d_4_tf, conv2d_5_tf, conv2d_6_tf, conv2d_out_tf, paint);\n return layers;\n }\n feedForward(source) {\n return __awaiter(this, void 0, void 0, function* () {\n if ((0, utils_1.isHTMLVideoElement)(source) || (0, utils_1.isVideoFrame)(source)) {\n this.context.input = this.context.device.importExternalTexture({ source });\n }\n else {\n const bitmap = (0, utils_1.isImageBitmap)(source) ? source : yield createImageBitmap(source);\n const width = (0, utils_1.getSourceWidth)(source);\n const height = (0, utils_1.getSourceHeight)(source);\n this.context.device.queue.copyExternalImageToTexture({ source: bitmap }, { texture: this.context.texture('input', { format: \"rgba8unorm\" }) }, [width, height]);\n this.context.input = this.context.texture('input');\n }\n this.layers[0].inputs[0] = this.context.input;\n this.layers[1].inputs[0] = this.context.input;\n this.layers[this.layers.length - 1].inputs[1] = this.context.input;\n this.layers.forEach(function (layer) {\n layer.run();\n });\n });\n }\n}\nexports[\"default\"] = Anime4KCNNRM;\n\n\n//# sourceURL=webpack://WebSR/./src/networks/anime4k/cnn-restore-m.ts?\n}")},"./src/networks/anime4k/cnn-restore-s.ts":function(__unused_webpack_module,exports,__webpack_require__){eval("{\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst base_network_1 = __webpack_require__(/*! ../base_network */ \"./src/networks/base_network.ts\");\nconst conv2d_3x4_1 = __webpack_require__(/*! ../../layers/anime4k/conv2d-3x4 */ \"./src/layers/anime4k/conv2d-3x4.ts\");\nconst conv2d_8x4_1 = __webpack_require__(/*! ../../layers/anime4k/conv2d-8x4 */ \"./src/layers/anime4k/conv2d-8x4.ts\");\nconst display_1x_1 = __webpack_require__(/*! ../../layers/anime4k/display_1x */ \"./src/layers/anime4k/display_1x.ts\");\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./src/utils.ts\");\nclass Anime4KCNNRS extends base_network_1.default {\n constructor(weights) {\n super(weights);\n }\n model() {\n const layers = [];\n const weights = this.weights.layers;\n const context = this.context;\n const conv2d_tf = new conv2d_3x4_1.default([context.input], context.buffer('conv2d_tf'), weights['conv2d_tf']);\n const conv2d_1_tf = new conv2d_8x4_1.default([context.buffer('conv2d_tf')], context.buffer('conv2d_1_tf'), weights['conv2d_1_tf']);\n const conv2d_2_tf = new conv2d_8x4_1.default([context.buffer('conv2d_1_tf')], context.buffer('conv2d_2_tf'), weights['conv2d_2_tf']);\n const conv2d_last_tf = new conv2d_8x4_1.default([context.buffer('conv2d_2_tf')], context.buffer('conv2d_out_tf'), weights['conv2d_out_tf']);\n const paint = new display_1x_1.default([context.buffer('conv2d_out_tf'), context.input], context.texture('output'));\n layers.push(conv2d_tf, conv2d_1_tf, conv2d_2_tf, conv2d_last_tf, paint);\n return layers;\n }\n feedForward(source) {\n return __awaiter(this, void 0, void 0, function* () {\n if ((0, utils_1.isHTMLVideoElement)(source) || (0, utils_1.isVideoFrame)(source)) {\n this.context.input = this.context.device.importExternalTexture({ source });\n }\n else {\n const bitmap = (0, utils_1.isImageBitmap)(source) ? source : yield createImageBitmap(source);\n const width = (0, utils_1.getSourceWidth)(source);\n const height = (0, utils_1.getSourceHeight)(source);\n this.context.device.queue.copyExternalImageToTexture({ source: bitmap }, { texture: this.context.texture('input', { format: \"rgba8unorm\" }) }, [width, height]);\n this.context.input = this.context.texture('input');\n }\n this.layers[0].inputs[0] = this.context.input;\n this.layers[this.layers.length - 1].inputs[1] = this.context.input;\n this.layers.forEach(function (layer) {\n layer.run();\n });\n });\n }\n}\nexports[\"default\"] = Anime4KCNNRS;\n\n\n//# sourceURL=webpack://WebSR/./src/networks/anime4k/cnn-restore-s.ts?\n}")},"./src/networks/base_network.ts":function(__unused_webpack_module,exports){eval('{\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nclass NeuralNetwork {\n constructor(weights) {\n this.weights = weights;\n this.context = globalThis.context;\n this.layers = this.model();\n }\n model() {\n return [];\n }\n lastLayer() {\n return this.layers[this.layers.length - 1];\n }\n feedForward(source) {\n return __awaiter(this, void 0, void 0, function* () {\n this.layers.forEach(layer =>{\n layer.run();\n });\n });\n }\n}\nexports["default"] = NeuralNetwork;\n\n\n//# sourceURL=webpack://WebSR/./src/networks/base_network.ts?\n}')},"./src/networks/network_list.ts":(__unused_webpack_module,exports,__webpack_require__)=>{eval('{\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nexports.NetworkScales = exports.NetworkList = void 0;\nconst cnn_2x_s_1 = __webpack_require__(/*! ./anime4k/cnn-2x-s */ "./src/networks/anime4k/cnn-2x-s.ts");\nconst cnn_2x_m_1 = __webpack_require__(/*! ./anime4k/cnn-2x-m */ "./src/networks/anime4k/cnn-2x-m.ts");\nconst cnn_2x_l_1 = __webpack_require__(/*! ./anime4k/cnn-2x-l */ "./src/networks/anime4k/cnn-2x-l.ts");\nconst cnn_restore_l_1 = __webpack_require__(/*! ./anime4k/cnn-restore-l */ "./src/networks/anime4k/cnn-restore-l.ts");\nconst cnn_restore_m_1 = __webpack_require__(/*! ./anime4k/cnn-restore-m */ "./src/networks/anime4k/cnn-restore-m.ts");\nconst cnn_restore_s_1 = __webpack_require__(/*! ./anime4k/cnn-restore-s */ "./src/networks/anime4k/cnn-restore-s.ts");\nconst poc_network_1 = __webpack_require__(/*! ./poc_network */ "./src/networks/poc_network.ts");\nexports.NetworkList = {\n "anime4k/cnn-2x-s": cnn_2x_s_1.default,\n "anime4k/cnn-2x-m": cnn_2x_m_1.default,\n "anime4k/cnn-2x-l": cnn_2x_l_1.default,\n "anime4k/cnn-restore-s": cnn_restore_s_1.default,\n "anime4k/cnn-restore-m": cnn_restore_m_1.default,\n "anime4k/cnn-restore-l": cnn_restore_l_1.default,\n "sb2702/blur-poc": poc_network_1.default\n};\nexports.NetworkScales = {\n "anime4k/cnn-2x-s": 2,\n "anime4k/cnn-2x-m": 2,\n "anime4k/cnn-2x-l": 2,\n "anime4k/cnn-restore-s": 1,\n "anime4k/cnn-restore-m": 1,\n "anime4k/cnn-restore-l": 1,\n "sb2702/blur-poc": 1\n};\n\n\n//# sourceURL=webpack://WebSR/./src/networks/network_list.ts?\n}')},"./src/networks/poc_network.ts":(__unused_webpack_module,exports,__webpack_require__)=>{eval('{\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst base_network_1 = __webpack_require__(/*! ./base_network */ "./src/networks/base_network.ts");\nconst rgb_2_yuv_1 = __webpack_require__(/*! ../layers/utils/rgb_2_yuv */ "./src/layers/utils/rgb_2_yuv.ts");\nconst gaussian_1 = __webpack_require__(/*! ../layers/utils/gaussian */ "./src/layers/utils/gaussian.ts");\nclass PoCNetwork extends base_network_1.default {\n constructor() {\n super();\n }\n model() {\n const layers = [];\n const context = this.context;\n layers.push(new rgb_2_yuv_1.default([context.texture(\'input\')], context.texture(\'yuv\')));\n layers.push(new gaussian_1.default([context.texture(\'yuv\')], context.texture(\'output\')));\n return layers;\n }\n}\nexports["default"] = PoCNetwork;\n\n\n//# sourceURL=webpack://WebSR/./src/networks/poc_network.ts?\n}')},"./src/renderer.ts":function(__unused_webpack_module,exports,__webpack_require__){eval('{\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, "__esModule", ({ value: true }));\nconst display_1 = __webpack_require__(/*! ./layers/anime4k/display */ "./src/layers/anime4k/display.ts");\nconst base_render_layer_1 = __webpack_require__(/*! ./layers/base_render_layer */ "./src/layers/base_render_layer.ts");\nconst utils_1 = __webpack_require__(/*! ./utils */ "./src/utils.ts");\nclass WebSRRenderer {\n constructor(network, source) {\n this.context = globalThis.context;\n this.network = network;\n this.source = source;\n this.active = false;\n }\n switchNetwork(network) {\n this.network = network;\n }\n start() {\n return __awaiter(this, void 0, void 0, function* () {\n if (this.context.destroyed) {\n throw new Error("WebSR instance was destroyed");\n }\n this.active = true;\n yield this.renderStep();\n });\n }\n stop() {\n return __awaiter(this, void 0, void 0, function* () {\n this.active = false;\n if (this.vfc && this.source && (0, utils_1.isHTMLVideoElement)(this.source))\n this.source.cancelVideoFrameCallback(this.vfc);\n });\n }\n renderStep() {\n return __awaiter(this, void 0, void 0, function* () {\n const lastLayer = this.network.lastLayer();\n if (lastLayer instanceof display_1.default)\n lastLayer.setOutput(this.context.context.getCurrentTexture());\n yield this.render();\n if (this.active && this.source && (0, utils_1.isHTMLVideoElement)(this.source)) {\n this.vfc = this.source.requestVideoFrameCallback(this.renderStep.bind(this));\n }\n });\n }\n render(source) {\n return __awaiter(this, void 0, void 0, function* () {\n const lastLayer = this.network.lastLayer();\n if (lastLayer instanceof base_render_layer_1.default)\n lastLayer.setOutput(this.context.context.getCurrentTexture());\n yield this.network.feedForward(source ? source : this.source);\n });\n }\n}\nexports["default"] = WebSRRenderer;\n\n\n//# sourceURL=webpack://WebSR/./src/renderer.ts?\n}')},"./src/utils.ts":(__unused_webpack_module,exports)=>{eval("{\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.isMainThread = isMainThread;\nexports.isHTMLVideoElement = isHTMLVideoElement;\nexports.isHTMLImageElement = isHTMLImageElement;\nexports.isImageBitmap = isImageBitmap;\nexports.isVideoFrame = isVideoFrame;\nexports.isVideoSource = isVideoSource;\nexports.isImageSource = isImageSource;\nexports.getSourceWidth = getSourceWidth;\nexports.getSourceHeight = getSourceHeight;\n/**\n * Check if we're running on the main thread (not in a worker)\n */\nfunction isMainThread() {\n return typeof HTMLVideoElement !== 'undefined';\n}\n/**\n * Check if a source is a video element (main thread only)\n */\nfunction isHTMLVideoElement(source) {\n return typeof HTMLVideoElement !== 'undefined' && source instanceof HTMLVideoElement;\n}\n/**\n * Check if a source is an image element (main thread only)\n */\nfunction isHTMLImageElement(source) {\n return typeof HTMLImageElement !== 'undefined' && source instanceof HTMLImageElement;\n}\n/**\n * Check if a source is an ImageBitmap (works in both contexts)\n */\nfunction isImageBitmap(source) {\n return typeof ImageBitmap !== 'undefined' && source instanceof ImageBitmap;\n}\n/**\n * Check if a source is a VideoFrame (worker context)\n */\nfunction isVideoFrame(source) {\n return typeof VideoFrame !== 'undefined' && source instanceof VideoFrame;\n}\n/**\n * Check if a source is any type of video source\n */\nfunction isVideoSource(source) {\n return isHTMLVideoElement(source) || isVideoFrame(source);\n}\n/**\n * Check if a source is any type of image source\n */\nfunction isImageSource(source) {\n return isHTMLImageElement(source) || isImageBitmap(source);\n}\n/**\n * Get the width of a media source\n */\nfunction getSourceWidth(source) {\n if (isHTMLVideoElement(source))\n return source.videoWidth;\n if (isHTMLImageElement(source))\n return source.naturalWidth;\n if (isVideoFrame(source))\n return source.displayWidth;\n if (isImageBitmap(source))\n return source.width;\n return 0;\n}\n/**\n * Get the height of a media source\n */\nfunction getSourceHeight(source) {\n if (isHTMLVideoElement(source))\n return source.videoHeight;\n if (isHTMLImageElement(source))\n return source.naturalHeight;\n if (isVideoFrame(source))\n return source.displayHeight;\n if (isImageBitmap(source))\n return source.height;\n return 0;\n}\n\n\n//# sourceURL=webpack://WebSR/./src/utils.ts?\n}")}},__webpack_module_cache__={};function __webpack_require__(e){var n=__webpack_module_cache__[e];if(void 0!==n)return n.exports;var t=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e].call(t.exports,t,t.exports,__webpack_require__),t.exports}var __webpack_exports__=__webpack_require__("./src/main.ts");return __webpack_exports__.default})())},{}],"6ykb1":[function(e,n,t,r){t.interopDefault=function(e){return e&&e.__esModule?e:{default:e}},t.defineInteropFlag=function(e){Object.defineProperty(e,"__esModule",{value:!0})},t.exportAll=function(e,n){return Object.keys(e).forEach(function(t){"default"===t||"__esModule"===t||Object.prototype.hasOwnProperty.call(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:function(){return e[t]}})}),n},t.export=function(e,n,t){Object.defineProperty(e,n,{enumerable:!0,get:t})}},{}]},["80h6e"],"80h6e","parcelRequire4dc0",{}); |