mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-30 12:01:20 -08:00
feat: update changelog with Parcel to Vite refactor
feat: add danmuku plugin documentation and i18n setup guide - Created a new documentation file for the danmuku plugin with code examples. - Added a comprehensive guide for language settings (i18n) including default languages, importing languages, adding new languages, and modifying existing languages. - Included code snippets for initializing the Artplayer with different language settings. Add internationalization support for multiple languages in Artplayer - Introduced Arabic (ar), Czech (cs), Spanish (es), Persian (fa), French (fr), Indonesian (id), Polish (pl), Russian (ru), Turkish (tr), Vietnamese (vi), and Traditional Chinese (zh-tw) translations. - Created corresponding JavaScript and ES module files for each language containing translated strings for player controls and settings. - Added a new documentation file for language settings in the project. feat: add initial implementation of start option page with interactive code execution buttons feat: add danmuku plugin documentation and i18n setup guide - Created a new documentation file for the danmuku plugin, providing code examples for usage. - Added a comprehensive guide for language settings, including default languages, importing languages, adding new languages, and modifying existing languages. - Included code snippets for initializing the Artplayer with different language settings and importing language files. refactor: update danmuku worker implementation and remove unused i18n files - Changed the way the Danmuku class creates a Web Worker by using a worker loader instead of creating a blob. - Removed Arabic, Czech, Spanish, Persian, French, Indonesian, Polish, Russian, Turkish, Vietnamese, and Traditional Chinese i18n files as they are no longer needed. - Updated the Vite build configuration to disable banners for inline workers and added a plugin to remove worker banners from generated code. feat: add danmuku plugin and i18n setup documentation - Created a new documentation file for the danmuku plugin, providing code examples for usage. - Added a new documentation file for language settings (i18n), detailing how to set default languages, import languages, and add new languages. - Included code snippets for initializing the Artplayer with different language settings and examples for modifying existing languages. feat: add danmuku plugin and i18n setup documentation - Created a new documentation file for the danmuku plugin with code examples. - Added a new documentation file for language settings (i18n) including import instructions and examples for setting default and custom languages. - Updated the i18n documentation to include details on adding and modifying languages. feat: add danmuku plugin and i18n setup documentation - Created a new JavaScript file for the danmuku plugin documentation with multiple code execution buttons. - Added a new JavaScript file for i18n (internationalization) setup documentation, including instructions for language settings, importing languages, and modifying language options. - Included examples for setting default languages and adding new languages in the i18n documentation. Refactor code structure for improved readability and maintainability
This commit is contained in:
Harvey Zhao committed
1 parent
ddb78cf850
commit
699bf09577
397 files changed
+99776
-8638
No files matched your search
@@ -1,8 +1,7 @@
|
||||
|
||||
/*!
|
||||
* artplayer-plugin-websr.js v1.0.0
|
||||
* artplayer-plugin-websr.js v1.0.1
|
||||
* Github: https://github.com/zhw2590582/ArtPlayer
|
||||
* (c) 2017-2026 Harvey Zhao
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(e,t,r,i,s){var a="u">typeof globalThis?globalThis:"u">typeof self?self:"u">typeof window?window:"u">typeof global?global:{},o="function"==typeof a[i]&&a[i],n=o.i||{},l=o.cache||{},d="u">typeof module&&"function"==typeof module.require&&module.require.bind(module);function u(t,r){if(!l[t]){if(!e[t]){if(s[t])return s[t];var n="function"==typeof a[i]&&a[i];if(!r&&n)return n(t,!0);if(o)return o(t,!0);if(d&&"string"==typeof t)return d(t);var c=Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}h.resolve=function(r){var i=e[t][1][r];return null!=i?i:r},h.cache={};var m=l[t]=new u.Module(t);e[t][0].call(m.exports,h,m,m.exports,a)}return l[t].exports;function h(e){var t=h.resolve(e);if(!1===t)return{};if(Array.isArray(t)){var r={__esModule:!0};return t.forEach(function(e){var t=e[0],i=e[1],s=e[2]||e[0],a=u(i);"*"===t?Object.keys(a).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:function(){return a[e]}})}):"*"===s?Object.defineProperty(r,t,{enumerable:!0,value:a}):Object.defineProperty(r,t,{enumerable:!0,get:function(){return"default"===s?a.__esModule?a.default:a:a[s]}})}),r}return u(t)}}u.isParcelRequire=!0,u.Module=function(e){this.id=e,this.bundle=u,this.require=d,this.exports={}},u.modules=e,u.cache=l,u.parent=o,u.distDir=void 0,u.publicUrl=void 0,u.devServer=void 0,u.i=n,u.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(u,"root",{get:function(){return a[i]}}),a[i]=u;for(var c=0;c<t.length;c++)u(t[c]);if(r){var m=u(r);"object"==typeof exports&&"u">typeof module?module.exports=m:"function"==typeof define&&define.amd&&define(function(){return m})}}({"80h6e":[function(e,t,r,i){var s=e("@parcel/transformer-js/src/esmodule-helpers.js"),a=e("./Upscaler.js"),o=s.interopDefault(a);window.artplayerPluginWebsr=function(e={networkSize:"medium",compare:!1,weightsBaseUrl:"/weights",workerUrl:"/worker/main.js",videoScale:2}){return t=>{let{$video:r,$player:i}=t.template,s=document.createElement("canvas");function a(){let e=t.video,r=i.offsetWidth||640,s=i.offsetHeight||360,a=(e.videoWidth||640)/(e.videoHeight||360),o=r,n=s;return r/s>a?o=s*a:n=r/a,{displayWidth:o,displayHeight:n}}if(i.appendChild(s),s.style.position="absolute",s.style.zIndex="11",s.style.pointerEvents="none",s.style.top="50%",s.style.left="50%",s.style.transform="translate(-50%, -50%)",s.style.opacity="0",s.style.transition="opacity 0.2s ease",!o.default||!o.default.isSupported||!o.default.isSupported())return void console.warn("Upscaler is not supported in this environment");let n=new(0,o.default)({networkSize:e.networkSize||"medium",weightsBaseUrl:e.weightsBaseUrl||"/weights",workerUrl:e.workerUrl||"/worker/main.js",videoScale:e.videoScale||2}),l=!1;async function d(){if(!l){l=!0;try{await new Promise((e,t)=>{if(r.readyState>=1)return void e();let i=()=>{a(),e()},s=()=>{a(),t(Error("Failed to load video metadata"))},a=()=>{r.removeEventListener("loadedmetadata",i),r.removeEventListener("error",s)};r.addEventListener("loadedmetadata",i),r.addEventListener("error",s)}),await n.startRealtimeUpscale(r,s,e.networkSize||n.networkSize),requestAnimationFrame(()=>{s.style.opacity="1"})}catch(e){console.error("artplayer-plugin-upscaler: failed to start realtime",e)}}}let{displayWidth:u,displayHeight:c}=a();s.style.width=u+"px",s.style.height=c+"px";let m=50,h=!1,p=!!e.compare,f=document.createElement("div");function g(){if(p){let{displayWidth:e,displayHeight:t}=a(),r=`linear-gradient(to right, transparent 0%, transparent ${m}%, black ${m}%, black 100%)`;s.style.maskImage=r;let o=i.offsetWidth||640,n=i.offsetHeight||360,l=(o-e)/2+e*m/100;f.style.top=(n-t)/2+"px",f.style.left=l+"px",f.style.height=t+"px",f.style.transform="translateX(-50%)"}else s.style.maskImage="none"}function w(e){p&&(h=!0)}function y(e){if(p&&h){let t=i.getBoundingClientRect(),{displayWidth:r}=a(),s=i.offsetWidth||640;m=Math.max(0,Math.min(100,m=(e.clientX-t.left-(s-r)/2)/r*100)),g()}}function v(e){h=!1}return f.style.position="absolute",f.style.width="3px",f.style.backgroundColor="rgba(255, 255, 255, 0.75)",f.style.cursor="ew-resize",f.style.zIndex="12",f.style.pointerEvents="auto",f.style.display=p?"block":"none",f.style.boxShadow="0 0 2px rgba(0, 0, 0, 0.1)",p&&(i.appendChild(f),f.addEventListener("mousedown",w),document.addEventListener("mousemove",y),document.addEventListener("mouseup",v),g()),t.on("destroy",()=>{n&&"function"==typeof n.dispose&&n.dispose(),f.removeEventListener("mousedown",w),document.removeEventListener("mousemove",y),document.removeEventListener("mouseup",v)}),t.on("resize",()=>{let{displayWidth:e,displayHeight:t}=a();s.style.width=e+"px",s.style.height=t+"px",g()}),t.on("play",()=>{d()}),{name:"artplayerPluginWebsr",upscaler:n,update:function(r={}){if(r&&"object"==typeof r){if(Object.prototype.hasOwnProperty.call(r,"compare")){let t=!!r.compare;e.compare=t,(p=t)?(f.parentNode||i.appendChild(f),f.style.display="block"Line truncated
|
||||
!function(e,t){"object"===typeof exports&&"undefined"!==typeof module?module.exports=t():"function"==typeof define&&define.amd?(t.ArtplayerPluginWebsr=t(),define(function(){return t.ArtplayerPluginWebsr})):(e="undefined"!==typeof globalThis?globalThis:e||self).ArtplayerPluginWebsr=t()}(this,function(){"use strict";var e=Object.defineProperty,t=(t,s,r)=>((t,s,r)=>s in t?e(t,s,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[s]=r)(t,"symbol"!==typeof s?s+"":s,r);const s=class e{static isSupported(){try{const e="undefined"!==typeof Worker,t="undefined"!==typeof OffscreenCanvas||"undefined"!==typeof document&&!!document.createElement("canvas").transferControlToOffscreen,s="undefined"!==typeof Blob;return e&&t&&s}catch{return!1}}static isVideoSupported(){try{return"undefined"!==typeof VideoEncoder&&"undefined"!==typeof VideoDecoder}catch{return!1}}constructor(t={}){const s=t.weightsBaseUrl||"/weights";this.networks=t.networks||{small:{name:"anime4k/cnn-2x-l",weightsUrl:`${s}/cnn-8.json`},medium:{name:"anime4k/cnn-2x-16",weightsUrl:`${s}/cnn-16.json`},large:{name:"anime4k/cnn-2x-28",weightsUrl:`${s}/cnn-28.json`}},this.weightsBaseUrl=s,this.networkSize=t.networkSize||"medium",this.workerUrl=t.workerUrl||"/worker/main.js",this.timeouts={...e.DEFAULT_TIMEOUTS,...t.timeouts||{}},this.delays={...e.DEFAULT_DELAYS,...t.delays||{}},this.imageScale="number"===typeof t.imageScale&&t.imageScale>0?t.imageScale:2,this.videoScale="number"===typeof t.videoScale&&t.videoScale>0?t.videoScale:2,this.weightsCache=new Map,this.workerInstance=null,this.messageHandlers={},this.progressCallback=null,this.processingType=null,this.realtimeLoopId=null,this.realtimeState=null,this.init()}init({prewarm:t=!0}={}){if(!e.isSupported())throw new Error("Upscaler is not supported in this environment");return t&&this.getWorker().postMessage({cmd:"isSupported"}),this}getWorker(){return this.workerInstance||(this.workerInstance=new Worker(this.workerUrl),this.workerInstance.onmessage=e=>this.handleWorkerMessage(e)),this.workerInstance}static extractProgressValue(e){const t=e.data??e.progress??e.value??e.percentage;return"number"===typeof t?Math.min(100,Math.max(0,Math.round(t))):null}handleBlobResponse(e){const t="video"===this.processingType?"videoBlob":"imageBlob",s=this.messageHandlers[t];e.data instanceof Blob&&s&&s({[t]:e.data})}requestBlob(){const e="video"===this.processingType?"getVideoBlob":"getImageBlob";this.getWorker().postMessage({cmd:e})}handleWorkerMessage(t){const{data:s}=t;if(!s.cmd)return;const{cmd:r}=s;if("progress"===r){const t=e.extractProgressValue(s);null!==t&&this.progressCallback&&this.progressCallback(t),this.messageHandlers.progress&&this.messageHandlers.progress(s)}else"finished"===r?s.data instanceof Blob?this.handleBlobResponse(s):this.requestBlob():this.messageHandlers[r]&&this.messageHandlers[r](s)}async loadWeights(e){if(this.validateNetworkSize(e),this.weightsCache.has(e))return this.weightsCache.get(e);const t=this.networks[e],s=await fetch(t.weightsUrl);if(!s.ok)throw new Error(`Failed to fetch weights: ${s.statusText}`);const r=await s.json();return this.weightsCache.set(e,r),r}static loadImageMetadata(e,t){return new Promise((s,r)=>{const i=new Blob([e],{type:t}),a=URL.createObjectURL(i),n=new Image;n.onload=()=>{URL.revokeObjectURL(a),s({width:n.width,height:n.height})},n.onerror=()=>{URL.revokeObjectURL(a),r(new Error("Failed to load image"))},n.src=a})}static loadVideoMetadata(e,t){return new Promise((s,r)=>{const i=URL.createObjectURL(e),a=document.createElement("video");a.src=i;const n=setTimeout(()=>r(new Error("Timeout")),t);a.onloadedmetadata=()=>{clearTimeout(n),URL.revokeObjectURL(i),s({width:a.videoWidth,height:a.videoHeight,duration:a.duration})},a.onerror=()=>{clearTimeout(n),URL.revokeObjectURL(i),r(new Error("Failed to load video"))}})}createOffscreenCanvas(e,t,s=2){const r="number"===typeof s&&s>0?s:1,i=document.createElement("canvas");if(i.width=e*r,i.height=t*r,"function"!==typeof i.transferControlToOffscreen)throw new TypeError("OffscreenCanvas is not supported in this environment");return i.transferControlToOffscreen()}createBlobPromise(e,t){return new Promise((s,r)=>{const i=setTimeout(()=>{this.messageHandlers[e]&&(delete this.messageHandlers[e],r(new Error(`${e} processing timeout`)))},t);this.messageHandlers[e]=t=>{delete this.messageHandlers[e],clearTimeout(i);const a=t[e]||t.data;a instanceof Blob?s(a):r(new Error(`Invalid ${e} format`))}})}validateNetworkSize(e){if(!this.networks[e])throw new Error(`Invalid networkSize: use one of ${Object.keys(this.networks).join(", ")}`)}async upscaleImage(t,s,r){if(!t)throw new Error("Image file is required");const i=s||this.networkSize;this.validateNetworkSize(i),this.processingType="image";const a=await t.arrayBuffer(),n=t.type||"image/jpeg",{width:o,height:d}=await e.loadImageMetadata(a,n),l=await this.loadWeights(i),c=this.networks[i],h="number"===typeof r&&r>0?r:this.imageScale,[m,u]=[this.createOffscreenCanvas(o,d,h),this.createOffscreLine truncated
|
||||
@@ -1,8 +1,7 @@
|
||||
|
||||
/*!
|
||||
* artplayer-plugin-websr.js v1.0.0
|
||||
* artplayer-plugin-websr.js v1.0.1
|
||||
* Github: https://github.com/zhw2590582/ArtPlayer
|
||||
* (c) 2017-2026 Harvey Zhao
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(e,t,r,n,s){var o="u">typeof globalThis?globalThis:"u">typeof self?self:"u">typeof window?window:"u">typeof global?global:{},i="function"==typeof o[n]&&o[n],a=i.i||{},c=i.cache||{},l="u">typeof module&&"function"==typeof module.require&&module.require.bind(module);function u(t,r){if(!c[t]){if(!e[t]){if(s[t])return s[t];var a="function"==typeof o[n]&&o[n];if(!r&&a)return a(t,!0);if(i)return i(t,!0);if(l&&"string"==typeof t)return l(t);var d=Error("Cannot find module '"+t+"'");throw d.code="MODULE_NOT_FOUND",d}h.resolve=function(r){var n=e[t][1][r];return null!=n?n:r},h.cache={};var f=c[t]=new u.Module(t);e[t][0].call(f.exports,h,f,f.exports,o)}return c[t].exports;function h(e){var t=h.resolve(e);if(!1===t)return{};if(Array.isArray(t)){var r={__esModule:!0};return t.forEach(function(e){var t=e[0],n=e[1],s=e[2]||e[0],o=u(n);"*"===t?Object.keys(o).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:function(){return o[e]}})}):"*"===s?Object.defineProperty(r,t,{enumerable:!0,value:o}):Object.defineProperty(r,t,{enumerable:!0,get:function(){return"default"===s?o.__esModule?o.default:o:o[s]}})}),r}return u(t)}}u.isParcelRequire=!0,u.Module=function(e){this.id=e,this.bundle=u,this.require=l,this.exports={}},u.modules=e,u.cache=c,u.parent=i,u.distDir=void 0,u.publicUrl=void 0,u.devServer=void 0,u.i=a,u.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(u,"root",{get:function(){return o[n]}}),o[n]=u;for(var d=0;d<t.length;d++)u(t[d]);if(r){var f=u(r);"object"==typeof exports&&"u">typeof module?module.exports=f:"function"==typeof define&&define.amd&&define(function(){return f})}}({hrC3O:[function(e,t,r,n){var s=e("@parcel/transformer-js/src/esmodule-helpers.js"),o=e("@swc/helpers/cjs/_async_to_generator.cjs"),i=e("@swc/helpers/cjs/_type_of.cjs"),a=e("@swc/helpers/cjs/_ts_generator.cjs"),c=e("./Upscaler.js"),l=s.interopDefault(c);window.artplayerPluginWebsr=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{networkSize:"medium",compare:!1,weightsBaseUrl:"/weights",workerUrl:"/worker/main.js",videoScale:2};return function(t){var r=t.template,n=r.$video,s=r.$player,c=document.createElement("canvas");function u(){var e=t.video,r=s.offsetWidth||640,n=s.offsetHeight||360,o=(e.videoWidth||640)/(e.videoHeight||360),i=r,a=n;return r/n>o?i=n*o:a=r/o,{displayWidth:i,displayHeight:a}}if(s.appendChild(c),c.style.position="absolute",c.style.zIndex="11",c.style.pointerEvents="none",c.style.top="50%",c.style.left="50%",c.style.transform="translate(-50%, -50%)",c.style.opacity="0",c.style.transition="opacity 0.2s ease",!l.default||!l.default.isSupported||!l.default.isSupported())return void console.warn("Upscaler is not supported in this environment");var d=new(0,l.default)({networkSize:e.networkSize||"medium",weightsBaseUrl:e.weightsBaseUrl||"/weights",workerUrl:e.workerUrl||"/worker/main.js",videoScale:e.videoScale||2}),f=!1;function h(){return(0,o._)(function(){return(0,a._)(this,function(t){switch(t.label){case 0:if(f)return[2];f=!0,t.label=1;case 1:return t.trys.push([1,4,,5]),[4,new Promise(function(e,t){if(n.readyState>=1)return void e();var r=function(){o(),e()},s=function(){o(),t(Error("Failed to load video metadata"))},o=function(){n.removeEventListener("loadedmetadata",r),n.removeEventListener("error",s)};n.addEventListener("loadedmetadata",r),n.addEventListener("error",s)})];case 2:return t.sent(),[4,d.startRealtimeUpscale(n,c,e.networkSize||d.networkSize)];case 3:return t.sent(),requestAnimationFrame(function(){c.style.opacity="1"}),[3,5];case 4:return console.error("artplayer-plugin-upscaler: failed to start realtime",t.sent()),[3,5];case 5:return[2]}})})()}var p=u(),m=p.displayWidth,v=p.displayHeight;c.style.width=m+"px",c.style.height=v+"px";var g=50,y=!1,w=!!e.compare,b=document.createElement("div");function k(){if(w){var e=u(),t=e.displayWidth,r=e.displayHeight,n="linear-gradient(to right, transparent 0%, transparent ".concat(g,"%, black ").concat(g,"%, black 100%)");c.style.maskImage=n;var o=s.offsetWidth||640,i=s.offsetHeight||360,a=(o-t)/2+t*g/100;b.style.top=(i-r)/2+"px",b.style.left=a+"px",b.style.height=r+"px",b.style.transform="translateX(-50%)"}else c.style.maskImage="none"}function _(e){w&&(y=!0)}function j(e){if(w&&y){var t=s.getBoundingClientRect(),r=u().displayWidth,n=s.offsetWidth||640;g=Math.max(0,Math.min(100,g=(e.clientX-t.left-(n-r)/2)/r*100)),k()}}function E(e){y=!1}return b.style.position="absolute",b.style.width="3px",b.style.backgroundColor="rgba(255, 255, 255, 0.75)",b.style.cursor="ew-resize",b.style.zIndex="12",b.style.pointerEvents="auto",b.style.display=w?"block":"none",b.style.boxShadow="0 0 2px rgba(0, 0, 0, 0.1)",w&&(s.appendChild(b),b.addEventListener("mousedown",_),document.addEventListener("mousemove",j),document.addEventListener("mouseup",E),k()),t.on("destroy",function(){d&&"function"==typeof d.dispose&&d.dispose(),b.removeEventListeLine truncated
|
||||
!function(e,t){"object"===typeof exports&&"undefined"!==typeof module?module.exports=t():"function"==typeof define&&define.amd?(t.ArtplayerPluginWebsr=t(),define(function(){return t.ArtplayerPluginWebsr})):(e="undefined"!==typeof globalThis?globalThis:e||self).ArtplayerPluginWebsr=t()}(this,function(){"use strict";var e=Object.defineProperty,t=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,i=Math.pow,n=(t,r,s)=>r in t?e(t,r,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[r]=s,o=(e,i)=>{for(var o in i||(i={}))r.call(i,o)&&n(e,o,i[o]);if(t)for(var o of t(i))s.call(i,o)&&n(e,o,i[o]);return e},a=(e,t,r)=>n(e,"symbol"!==typeof t?t+"":t,r),l=(e,t,r)=>new Promise((s,i)=>{var n=e=>{try{a(r.next(e))}catch(t){i(t)}},o=e=>{try{a(r.throw(e))}catch(t){i(t)}},a=e=>e.done?s(e.value):Promise.resolve(e.value).then(n,o);a((r=r.apply(e,t)).next())});const d=class e{static isSupported(){try{const e="undefined"!==typeof Worker,t="undefined"!==typeof OffscreenCanvas||"undefined"!==typeof document&&!!document.createElement("canvas").transferControlToOffscreen,r="undefined"!==typeof Blob;return e&&t&&r}catch(e){return!1}}static isVideoSupported(){try{return"undefined"!==typeof VideoEncoder&&"undefined"!==typeof VideoDecoder}catch(e){return!1}}constructor(t={}){const r=t.weightsBaseUrl||"/weights";this.networks=t.networks||{small:{name:"anime4k/cnn-2x-l",weightsUrl:`${r}/cnn-8.json`},medium:{name:"anime4k/cnn-2x-16",weightsUrl:`${r}/cnn-16.json`},large:{name:"anime4k/cnn-2x-28",weightsUrl:`${r}/cnn-28.json`}},this.weightsBaseUrl=r,this.networkSize=t.networkSize||"medium",this.workerUrl=t.workerUrl||"/worker/main.js",this.timeouts=o(o({},e.DEFAULT_TIMEOUTS),t.timeouts||{}),this.delays=o(o({},e.DEFAULT_DELAYS),t.delays||{}),this.imageScale="number"===typeof t.imageScale&&t.imageScale>0?t.imageScale:2,this.videoScale="number"===typeof t.videoScale&&t.videoScale>0?t.videoScale:2,this.weightsCache=new Map,this.workerInstance=null,this.messageHandlers={},this.progressCallback=null,this.processingType=null,this.realtimeLoopId=null,this.realtimeState=null,this.init()}init({prewarm:t=!0}={}){if(!e.isSupported())throw new Error("Upscaler is not supported in this environment");return t&&this.getWorker().postMessage({cmd:"isSupported"}),this}getWorker(){return this.workerInstance||(this.workerInstance=new Worker(this.workerUrl),this.workerInstance.onmessage=e=>this.handleWorkerMessage(e)),this.workerInstance}static extractProgressValue(e){var t,r,s;const i=null!=(s=null!=(r=null!=(t=e.data)?t:e.progress)?r:e.value)?s:e.percentage;return"number"===typeof i?Math.min(100,Math.max(0,Math.round(i))):null}handleBlobResponse(e){const t="video"===this.processingType?"videoBlob":"imageBlob",r=this.messageHandlers[t];e.data instanceof Blob&&r&&r({[t]:e.data})}requestBlob(){const e="video"===this.processingType?"getVideoBlob":"getImageBlob";this.getWorker().postMessage({cmd:e})}handleWorkerMessage(t){const{data:r}=t;if(!r.cmd)return;const{cmd:s}=r;if("progress"===s){const t=e.extractProgressValue(r);null!==t&&this.progressCallback&&this.progressCallback(t),this.messageHandlers.progress&&this.messageHandlers.progress(r)}else"finished"===s?r.data instanceof Blob?this.handleBlobResponse(r):this.requestBlob():this.messageHandlers[s]&&this.messageHandlers[s](r)}loadWeights(e){return l(this,null,function*(){if(this.validateNetworkSize(e),this.weightsCache.has(e))return this.weightsCache.get(e);const t=this.networks[e],r=yield fetch(t.weightsUrl);if(!r.ok)throw new Error(`Failed to fetch weights: ${r.statusText}`);const s=yield r.json();return this.weightsCache.set(e,s),s})}static loadImageMetadata(e,t){return new Promise((r,s)=>{const i=new Blob([e],{type:t}),n=URL.createObjectURL(i),o=new Image;o.onload=()=>{URL.revokeObjectURL(n),r({width:o.width,height:o.height})},o.onerror=()=>{URL.revokeObjectURL(n),s(new Error("Failed to load image"))},o.src=n})}static loadVideoMetadata(e,t){return new Promise((r,s)=>{const i=URL.createObjectURL(e),n=document.createElement("video");n.src=i;const o=setTimeout(()=>s(new Error("Timeout")),t);n.onloadedmetadata=()=>{clearTimeout(o),URL.revokeObjectURL(i),r({width:n.videoWidth,height:n.videoHeight,duration:n.duration})},n.onerror=()=>{clearTimeout(o),URL.revokeObjectURL(i),s(new Error("Failed to load video"))}})}createOffscreenCanvas(e,t,r=2){const s="number"===typeof r&&r>0?r:1,i=document.createElement("canvas");if(i.width=e*s,i.height=t*s,"function"!==typeof i.transferControlToOffscreen)throw new TypeError("OffscreenCanvas is not supported in this environment");return i.transferControlToOffscreen()}createBlobPromise(e,t){return new Promise((r,s)=>{const i=setTimeout(()=>{this.messageHandlers[e]&&(delete this.messageHandlers[e],s(new Error(`${e} processing timeout`)))},t);this.messageHandlers[e]=t=>{delete this.messageHandlers[e],clearTimeout(i);const n=t[e]||t.data;n instanceof Blob?r(n):s(new Error(`Invalid ${e} format`))}})}validateNetworkSize(e){if(!this.netLine truncated
|
||||
@@ -1,8 +1,7 @@
|
||||
|
||||
/*!
|
||||
* artplayer-plugin-websr.js v1.0.0
|
||||
* artplayer-plugin-websr.js v1.0.1
|
||||
* Github: https://github.com/zhw2590582/ArtPlayer
|
||||
* (c) 2017-2026 Harvey Zhao
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(e,t,r,i,a){var o="u">typeof globalThis?globalThis:"u">typeof self?self:"u">typeof window?window:"u">typeof global?global:{},s="function"==typeof o[i]&&o[i],n=s.i||{},l=s.cache||{},d="u">typeof module&&"function"==typeof module.require&&module.require.bind(module);function u(t,r){if(!l[t]){if(!e[t]){if(a[t])return a[t];var n="function"==typeof o[i]&&o[i];if(!r&&n)return n(t,!0);if(s)return s(t,!0);if(d&&"string"==typeof t)return d(t);var c=Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}h.resolve=function(r){var i=e[t][1][r];return null!=i?i:r},h.cache={};var m=l[t]=new u.Module(t);e[t][0].call(m.exports,h,m,m.exports,o)}return l[t].exports;function h(e){var t=h.resolve(e);if(!1===t)return{};if(Array.isArray(t)){var r={__esModule:!0};return t.forEach(function(e){var t=e[0],i=e[1],a=e[2]||e[0],o=u(i);"*"===t?Object.keys(o).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:function(){return o[e]}})}):"*"===a?Object.defineProperty(r,t,{enumerable:!0,value:o}):Object.defineProperty(r,t,{enumerable:!0,get:function(){return"default"===a?o.__esModule?o.default:o:o[a]}})}),r}return u(t)}}u.isParcelRequire=!0,u.Module=function(e){this.id=e,this.bundle=u,this.require=d,this.exports={}},u.modules=e,u.cache=l,u.parent=s,u.distDir=void 0,u.publicUrl=void 0,u.devServer=void 0,u.i=n,u.register=function(t,r){e[t]=[function(e,t){t.exports=r},{}]},Object.defineProperty(u,"root",{get:function(){return o[i]}}),o[i]=u;for(var c=0;c<t.length;c++)u(t[c]);if(r){var m=u(r);"object"==typeof exports&&"u">typeof module?module.exports=m:"function"==typeof define&&define.amd&&define(function(){return m})}}({hOg5u:[function(e,t,r,i){var a=e("@parcel/transformer-js/src/esmodule-helpers.js"),o=e("./Upscaler.js"),s=a.interopDefault(o);window.artplayerPluginWebsr=function(e={networkSize:"medium",compare:!1,weightsBaseUrl:"/weights",workerUrl:"/worker/main.js",videoScale:2}){return t=>{let{$video:r,$player:i}=t.template,a=document.createElement("canvas");function o(){let e=t.video,r=i.offsetWidth||640,a=i.offsetHeight||360,o=(e.videoWidth||640)/(e.videoHeight||360),s=r,n=a;return r/a>o?s=a*o:n=r/o,{displayWidth:s,displayHeight:n}}if(i.appendChild(a),a.style.position="absolute",a.style.zIndex="11",a.style.pointerEvents="none",a.style.top="50%",a.style.left="50%",a.style.transform="translate(-50%, -50%)",a.style.opacity="0",a.style.transition="opacity 0.2s ease",!s.default||!s.default.isSupported||!s.default.isSupported())return void console.warn("Upscaler is not supported in this environment");let n=new(0,s.default)({networkSize:e.networkSize||"medium",weightsBaseUrl:e.weightsBaseUrl||"/weights",workerUrl:e.workerUrl||"/worker/main.js",videoScale:e.videoScale||2}),l=!1;async function d(){if(!l){l=!0;try{await new Promise((e,t)=>{if(r.readyState>=1)return void e();let i=()=>{o(),e()},a=()=>{o(),t(Error("Failed to load video metadata"))},o=()=>{r.removeEventListener("loadedmetadata",i),r.removeEventListener("error",a)};r.addEventListener("loadedmetadata",i),r.addEventListener("error",a)}),await n.startRealtimeUpscale(r,a,e.networkSize||n.networkSize),requestAnimationFrame(()=>{a.style.opacity="1"})}catch(e){console.error("artplayer-plugin-upscaler: failed to start realtime",e)}}}let{displayWidth:u,displayHeight:c}=o();a.style.width=u+"px",a.style.height=c+"px";let m=50,h=!1,p=!!e.compare,f=document.createElement("div");function g(){if(p){let{displayWidth:e,displayHeight:t}=o(),r=`linear-gradient(to right, transparent 0%, transparent ${m}%, black ${m}%, black 100%)`;a.style.maskImage=r;let s=i.offsetWidth||640,n=i.offsetHeight||360,l=(s-e)/2+e*m/100;f.style.top=(n-t)/2+"px",f.style.left=l+"px",f.style.height=t+"px",f.style.transform="translateX(-50%)"}else a.style.maskImage="none"}function w(e){p&&(h=!0)}function y(e){if(p&&h){let t=i.getBoundingClientRect(),{displayWidth:r}=o(),a=i.offsetWidth||640;m=Math.max(0,Math.min(100,m=(e.clientX-t.left-(a-r)/2)/r*100)),g()}}function v(e){h=!1}return f.style.position="absolute",f.style.width="3px",f.style.backgroundColor="rgba(255, 255, 255, 0.75)",f.style.cursor="ew-resize",f.style.zIndex="12",f.style.pointerEvents="auto",f.style.display=p?"block":"none",f.style.boxShadow="0 0 2px rgba(0, 0, 0, 0.1)",p&&(i.appendChild(f),f.addEventListener("mousedown",w),document.addEventListener("mousemove",y),document.addEventListener("mouseup",v),g()),t.on("destroy",()=>{n&&"function"==typeof n.dispose&&n.dispose(),f.removeEventListener("mousedown",w),document.removeEventListener("mousemove",y),document.removeEventListener("mouseup",v)}),t.on("resize",()=>{let{displayWidth:e,displayHeight:t}=o();a.style.width=e+"px",a.style.height=t+"px",g()}),t.on("play",()=>{d()}),{name:"artplayerPluginWebsr",upscaler:n,update:function(r={}){if(r&&"object"==typeof r){if(Object.prototype.hasOwnProperty.call(r,"compare")){let t=!!r.compare;e.compare=t,(p=t)?(f.parentNode||i.appendChild(f),f.style.display="block",fLine truncated
|
||||
var e=Object.defineProperty,t=(t,s,r)=>((t,s,r)=>s in t?e(t,s,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[s]=r)(t,"symbol"!==typeof s?s+"":s,r);const s=class e{static isSupported(){try{const e="undefined"!==typeof Worker,t="undefined"!==typeof OffscreenCanvas||"undefined"!==typeof document&&!!document.createElement("canvas").transferControlToOffscreen,s="undefined"!==typeof Blob;return e&&t&&s}catch{return!1}}static isVideoSupported(){try{return"undefined"!==typeof VideoEncoder&&"undefined"!==typeof VideoDecoder}catch{return!1}}constructor(t={}){const s=t.weightsBaseUrl||"/weights";this.networks=t.networks||{small:{name:"anime4k/cnn-2x-l",weightsUrl:`${s}/cnn-8.json`},medium:{name:"anime4k/cnn-2x-16",weightsUrl:`${s}/cnn-16.json`},large:{name:"anime4k/cnn-2x-28",weightsUrl:`${s}/cnn-28.json`}},this.weightsBaseUrl=s,this.networkSize=t.networkSize||"medium",this.workerUrl=t.workerUrl||"/worker/main.js",this.timeouts={...e.DEFAULT_TIMEOUTS,...t.timeouts||{}},this.delays={...e.DEFAULT_DELAYS,...t.delays||{}},this.imageScale="number"===typeof t.imageScale&&t.imageScale>0?t.imageScale:2,this.videoScale="number"===typeof t.videoScale&&t.videoScale>0?t.videoScale:2,this.weightsCache=/* @__PURE__ */new Map,this.workerInstance=null,this.messageHandlers={},this.progressCallback=null,this.processingType=null,this.realtimeLoopId=null,this.realtimeState=null,this.init()}init({prewarm:t=!0}={}){if(!e.isSupported())throw new Error("Upscaler is not supported in this environment");return t&&this.getWorker().postMessage({cmd:"isSupported"}),this}getWorker(){return this.workerInstance||(this.workerInstance=new Worker(this.workerUrl),this.workerInstance.onmessage=e=>this.handleWorkerMessage(e)),this.workerInstance}static extractProgressValue(e){const t=e.data??e.progress??e.value??e.percentage;return"number"===typeof t?Math.min(100,Math.max(0,Math.round(t))):null}handleBlobResponse(e){const t="video"===this.processingType?"videoBlob":"imageBlob",s=this.messageHandlers[t];e.data instanceof Blob&&s&&s({[t]:e.data})}requestBlob(){const e="video"===this.processingType?"getVideoBlob":"getImageBlob";this.getWorker().postMessage({cmd:e})}handleWorkerMessage(t){const{data:s}=t;if(!s.cmd)return;const{cmd:r}=s;if("progress"===r){const t=e.extractProgressValue(s);null!==t&&this.progressCallback&&this.progressCallback(t),this.messageHandlers.progress&&this.messageHandlers.progress(s)}else"finished"===r?s.data instanceof Blob?this.handleBlobResponse(s):this.requestBlob():this.messageHandlers[r]&&this.messageHandlers[r](s)}async loadWeights(e){if(this.validateNetworkSize(e),this.weightsCache.has(e))return this.weightsCache.get(e);const t=this.networks[e],s=await fetch(t.weightsUrl);if(!s.ok)throw new Error(`Failed to fetch weights: ${s.statusText}`);const r=await s.json();return this.weightsCache.set(e,r),r}static loadImageMetadata(e,t){return new Promise((s,r)=>{const i=new Blob([e],{type:t}),a=URL.createObjectURL(i),n=new Image;n.onload=()=>{URL.revokeObjectURL(a),s({width:n.width,height:n.height})},n.onerror=()=>{URL.revokeObjectURL(a),r(new Error("Failed to load image"))},n.src=a})}static loadVideoMetadata(e,t){return new Promise((s,r)=>{const i=URL.createObjectURL(e),a=document.createElement("video");a.src=i;const n=setTimeout(()=>r(new Error("Timeout")),t);a.onloadedmetadata=()=>{clearTimeout(n),URL.revokeObjectURL(i),s({width:a.videoWidth,height:a.videoHeight,duration:a.duration})},a.onerror=()=>{clearTimeout(n),URL.revokeObjectURL(i),r(new Error("Failed to load video"))}})}createOffscreenCanvas(e,t,s=2){const r="number"===typeof s&&s>0?s:1,i=document.createElement("canvas");if(i.width=e*r,i.height=t*r,"function"!==typeof i.transferControlToOffscreen)throw new TypeError("OffscreenCanvas is not supported in this environment");return i.transferControlToOffscreen()}createBlobPromise(e,t){return new Promise((s,r)=>{const i=setTimeout(()=>{this.messageHandlers[e]&&(delete this.messageHandlers[e],r(new Error(`${e} processing timeout`)))},t);this.messageHandlers[e]=t=>{delete this.messageHandlers[e],clearTimeout(i);const a=t[e]||t.data;a instanceof Blob?s(a):r(new Error(`Invalid ${e} format`))}})}validateNetworkSize(e){if(!this.networks[e])throw new Error(`Invalid networkSize: use one of ${Object.keys(this.networks).join(", ")}`)}async upscaleImage(t,s,r){if(!t)throw new Error("Image file is required");const i=s||this.networkSize;this.validateNetworkSize(i),this.processingType="image";const a=await t.arrayBuffer(),n=t.type||"image/jpeg",{width:o,height:d}=await e.loadImageMetadata(a,n),l=await this.loadWeights(i),c=this.networks[i],h="number"===typeof r&&r>0?r:this.imageScale,[m,u]=[this.createOffscreenCanvas(o,d,h),this.createOffscreenCanvas(o,d,1)],p=this.createBlobPromise("imageBlob",this.timeouts.IMAGE);return this.getWorker().postMessage({cmd:"init",data:{imageArrayBuffer:a,imageMimeType:n,upscaled:m,original:u,resolution:{width:o,height:d},network_name:c.name,weights:l}},[m,u]),setTimeout(()=>{this.getWorker().postMessage({Line truncated
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "artplayer-plugin-websr",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.1",
|
||||
"description": "AI upscaling plugin for ArtPlayer using WebSR - real-time video super-resolution with WebGPU",
|
||||
"author": "Harvey Zhao <laozhaochaguan@gmail.com>",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,280 +1,288 @@
|
||||
export default class Upscaler {
|
||||
static DEFAULT_TIMEOUTS = { IMAGE: 300000, VIDEO: 3600000, METADATA: 10000 };
|
||||
static DEFAULT_DELAYS = { INIT: 500, NETWORK: 300 };
|
||||
static DEFAULT_TIMEOUTS = { IMAGE: 300000, VIDEO: 3600000, METADATA: 10000 }
|
||||
static DEFAULT_DELAYS = { INIT: 500, NETWORK: 300 }
|
||||
|
||||
static isSupported() {
|
||||
try {
|
||||
const hasWorker = typeof Worker !== "undefined";
|
||||
const hasOffscreen =
|
||||
typeof OffscreenCanvas !== "undefined" ||
|
||||
(typeof document !== "undefined" &&
|
||||
!!document.createElement("canvas").transferControlToOffscreen);
|
||||
const hasBlob = typeof Blob !== "undefined";
|
||||
return hasWorker && hasOffscreen && hasBlob;
|
||||
} catch {
|
||||
return false;
|
||||
const hasWorker = typeof Worker !== 'undefined'
|
||||
const hasOffscreen
|
||||
= typeof OffscreenCanvas !== 'undefined'
|
||||
|| (typeof document !== 'undefined'
|
||||
&& !!document.createElement('canvas').transferControlToOffscreen)
|
||||
const hasBlob = typeof Blob !== 'undefined'
|
||||
return hasWorker && hasOffscreen && hasBlob
|
||||
}
|
||||
catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
static isVideoSupported() {
|
||||
try {
|
||||
return (
|
||||
typeof VideoEncoder !== "undefined" &&
|
||||
typeof VideoDecoder !== "undefined"
|
||||
);
|
||||
} catch {
|
||||
return false;
|
||||
typeof VideoEncoder !== 'undefined'
|
||||
&& typeof VideoDecoder !== 'undefined'
|
||||
)
|
||||
}
|
||||
catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
constructor(options = {}) {
|
||||
const weightsBaseUrl = options.weightsBaseUrl || "/weights";
|
||||
const weightsBaseUrl = options.weightsBaseUrl || '/weights'
|
||||
|
||||
this.networks = options.networks || {
|
||||
small: {
|
||||
name: "anime4k/cnn-2x-l",
|
||||
name: 'anime4k/cnn-2x-l',
|
||||
weightsUrl: `${weightsBaseUrl}/cnn-8.json`,
|
||||
},
|
||||
medium: {
|
||||
name: "anime4k/cnn-2x-16",
|
||||
name: 'anime4k/cnn-2x-16',
|
||||
weightsUrl: `${weightsBaseUrl}/cnn-16.json`,
|
||||
},
|
||||
large: {
|
||||
name: "anime4k/cnn-2x-28",
|
||||
name: 'anime4k/cnn-2x-28',
|
||||
weightsUrl: `${weightsBaseUrl}/cnn-28.json`,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
this.weightsBaseUrl = weightsBaseUrl;
|
||||
this.networkSize = options.networkSize || "medium";
|
||||
this.workerUrl = options.workerUrl || "/worker/main.js";
|
||||
this.weightsBaseUrl = weightsBaseUrl
|
||||
this.networkSize = options.networkSize || 'medium'
|
||||
this.workerUrl = options.workerUrl || '/worker/main.js'
|
||||
|
||||
this.timeouts = {
|
||||
...Upscaler.DEFAULT_TIMEOUTS,
|
||||
...(options.timeouts || {}),
|
||||
};
|
||||
this.delays = { ...Upscaler.DEFAULT_DELAYS, ...(options.delays || {}) };
|
||||
}
|
||||
this.delays = { ...Upscaler.DEFAULT_DELAYS, ...(options.delays || {}) }
|
||||
|
||||
this.imageScale =
|
||||
typeof options.imageScale === "number" && options.imageScale > 0
|
||||
this.imageScale
|
||||
= typeof options.imageScale === 'number' && options.imageScale > 0
|
||||
? options.imageScale
|
||||
: 2;
|
||||
this.videoScale =
|
||||
typeof options.videoScale === "number" && options.videoScale > 0
|
||||
: 2
|
||||
this.videoScale
|
||||
= typeof options.videoScale === 'number' && options.videoScale > 0
|
||||
? options.videoScale
|
||||
: 2;
|
||||
: 2
|
||||
|
||||
this.weightsCache = new Map();
|
||||
this.workerInstance = null;
|
||||
this.messageHandlers = {};
|
||||
this.progressCallback = null;
|
||||
this.processingType = null;
|
||||
this.weightsCache = new Map()
|
||||
this.workerInstance = null
|
||||
this.messageHandlers = {}
|
||||
this.progressCallback = null
|
||||
this.processingType = null
|
||||
|
||||
this.realtimeLoopId = null;
|
||||
this.realtimeState = null;
|
||||
this.realtimeLoopId = null
|
||||
this.realtimeState = null
|
||||
|
||||
this.init();
|
||||
this.init()
|
||||
}
|
||||
|
||||
init({ prewarm = true } = {}) {
|
||||
if (!Upscaler.isSupported()) {
|
||||
throw new Error("Upscaler is not supported in this environment");
|
||||
throw new Error('Upscaler is not supported in this environment')
|
||||
}
|
||||
if (prewarm) {
|
||||
this.getWorker().postMessage({ cmd: "isSupported" });
|
||||
this.getWorker().postMessage({ cmd: 'isSupported' })
|
||||
}
|
||||
return this;
|
||||
return this
|
||||
}
|
||||
|
||||
getWorker() {
|
||||
if (!this.workerInstance) {
|
||||
this.workerInstance = new Worker(this.workerUrl);
|
||||
this.workerInstance.onmessage = (event) =>
|
||||
this.handleWorkerMessage(event);
|
||||
this.workerInstance = new Worker(this.workerUrl)
|
||||
this.workerInstance.onmessage = event =>
|
||||
this.handleWorkerMessage(event)
|
||||
}
|
||||
return this.workerInstance;
|
||||
return this.workerInstance
|
||||
}
|
||||
|
||||
static extractProgressValue(data) {
|
||||
const value = data.data ?? data.progress ?? data.value ?? data.percentage;
|
||||
return typeof value === "number"
|
||||
const value = data.data ?? data.progress ?? data.value ?? data.percentage
|
||||
return typeof value === 'number'
|
||||
? Math.min(100, Math.max(0, Math.round(value)))
|
||||
: null;
|
||||
: null
|
||||
}
|
||||
|
||||
handleBlobResponse(data) {
|
||||
const blobType =
|
||||
this.processingType === "video" ? "videoBlob" : "imageBlob";
|
||||
const handler = this.messageHandlers[blobType];
|
||||
const blobType
|
||||
= this.processingType === 'video' ? 'videoBlob' : 'imageBlob'
|
||||
const handler = this.messageHandlers[blobType]
|
||||
if (data.data instanceof Blob && handler) {
|
||||
handler({ [blobType]: data.data });
|
||||
handler({ [blobType]: data.data })
|
||||
}
|
||||
}
|
||||
|
||||
requestBlob() {
|
||||
const cmd =
|
||||
this.processingType === "video" ? "getVideoBlob" : "getImageBlob";
|
||||
this.getWorker().postMessage({ cmd });
|
||||
const cmd
|
||||
= this.processingType === 'video' ? 'getVideoBlob' : 'getImageBlob'
|
||||
this.getWorker().postMessage({ cmd })
|
||||
}
|
||||
|
||||
handleWorkerMessage(event) {
|
||||
const { data } = event;
|
||||
console.debug("Worker message:", data);
|
||||
if (!data.cmd) return;
|
||||
const { data } = event
|
||||
if (!data.cmd)
|
||||
return
|
||||
|
||||
const { cmd } = data;
|
||||
const { cmd } = data
|
||||
|
||||
if (cmd === "progress") {
|
||||
const progress = Upscaler.extractProgressValue(data);
|
||||
if (cmd === 'progress') {
|
||||
const progress = Upscaler.extractProgressValue(data)
|
||||
if (progress !== null && this.progressCallback) {
|
||||
this.progressCallback(progress);
|
||||
this.progressCallback(progress)
|
||||
}
|
||||
if (this.messageHandlers.progress) this.messageHandlers.progress(data);
|
||||
} else if (cmd === "finished") {
|
||||
if (this.messageHandlers.progress)
|
||||
this.messageHandlers.progress(data)
|
||||
}
|
||||
else if (cmd === 'finished') {
|
||||
if (data.data instanceof Blob) {
|
||||
this.handleBlobResponse(data);
|
||||
} else {
|
||||
this.requestBlob();
|
||||
this.handleBlobResponse(data)
|
||||
}
|
||||
} else if (this.messageHandlers[cmd]) {
|
||||
this.messageHandlers[cmd](data);
|
||||
else {
|
||||
this.requestBlob()
|
||||
}
|
||||
}
|
||||
else if (this.messageHandlers[cmd]) {
|
||||
this.messageHandlers[cmd](data)
|
||||
}
|
||||
}
|
||||
|
||||
async loadWeights(networkSize) {
|
||||
this.validateNetworkSize(networkSize);
|
||||
this.validateNetworkSize(networkSize)
|
||||
if (this.weightsCache.has(networkSize)) {
|
||||
return this.weightsCache.get(networkSize);
|
||||
return this.weightsCache.get(networkSize)
|
||||
}
|
||||
const network = this.networks[networkSize];
|
||||
const response = await fetch(network.weightsUrl);
|
||||
const network = this.networks[networkSize]
|
||||
const response = await fetch(network.weightsUrl)
|
||||
if (!response.ok)
|
||||
throw new Error(`Failed to fetch weights: ${response.statusText}`);
|
||||
const weights = await response.json();
|
||||
this.weightsCache.set(networkSize, weights);
|
||||
return weights;
|
||||
throw new Error(`Failed to fetch weights: ${response.statusText}`)
|
||||
const weights = await response.json()
|
||||
this.weightsCache.set(networkSize, weights)
|
||||
return weights
|
||||
}
|
||||
|
||||
static loadImageMetadata(arrayBuffer, mimeType) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const blob = new Blob([arrayBuffer], { type: mimeType });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const img = new Image();
|
||||
const blob = new Blob([arrayBuffer], { type: mimeType })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const img = new Image()
|
||||
|
||||
img.onload = () => {
|
||||
URL.revokeObjectURL(url);
|
||||
resolve({ width: img.width, height: img.height });
|
||||
};
|
||||
URL.revokeObjectURL(url)
|
||||
resolve({ width: img.width, height: img.height })
|
||||
}
|
||||
|
||||
img.onerror = () => {
|
||||
URL.revokeObjectURL(url);
|
||||
reject(new Error("Failed to load image"));
|
||||
};
|
||||
URL.revokeObjectURL(url)
|
||||
reject(new Error('Failed to load image'))
|
||||
}
|
||||
|
||||
img.src = url;
|
||||
});
|
||||
img.src = url
|
||||
})
|
||||
}
|
||||
|
||||
static loadVideoMetadata(file, timeoutMs) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const url = URL.createObjectURL(file);
|
||||
const video = document.createElement("video");
|
||||
video.src = url;
|
||||
const url = URL.createObjectURL(file)
|
||||
const video = document.createElement('video')
|
||||
video.src = url
|
||||
|
||||
const timeout = setTimeout(() => reject(new Error("Timeout")), timeoutMs);
|
||||
const timeout = setTimeout(() => reject(new Error('Timeout')), timeoutMs)
|
||||
|
||||
video.onloadedmetadata = () => {
|
||||
clearTimeout(timeout);
|
||||
URL.revokeObjectURL(url);
|
||||
clearTimeout(timeout)
|
||||
URL.revokeObjectURL(url)
|
||||
resolve({
|
||||
width: video.videoWidth,
|
||||
height: video.videoHeight,
|
||||
duration: video.duration,
|
||||
});
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
video.onerror = () => {
|
||||
clearTimeout(timeout);
|
||||
URL.revokeObjectURL(url);
|
||||
reject(new Error("Failed to load video"));
|
||||
};
|
||||
});
|
||||
clearTimeout(timeout)
|
||||
URL.revokeObjectURL(url)
|
||||
reject(new Error('Failed to load video'))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
createOffscreenCanvas(width, height, scale = 2) {
|
||||
const factor = typeof scale === "number" && scale > 0 ? scale : 1;
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = width * factor;
|
||||
canvas.height = height * factor;
|
||||
if (typeof canvas.transferControlToOffscreen !== "function") {
|
||||
throw new Error("OffscreenCanvas is not supported in this environment");
|
||||
const factor = typeof scale === 'number' && scale > 0 ? scale : 1
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = width * factor
|
||||
canvas.height = height * factor
|
||||
if (typeof canvas.transferControlToOffscreen !== 'function') {
|
||||
throw new TypeError('OffscreenCanvas is not supported in this environment')
|
||||
}
|
||||
return canvas.transferControlToOffscreen();
|
||||
return canvas.transferControlToOffscreen()
|
||||
}
|
||||
|
||||
createBlobPromise(blobType, timeout) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const timeoutId = setTimeout(() => {
|
||||
if (this.messageHandlers[blobType]) {
|
||||
delete this.messageHandlers[blobType];
|
||||
reject(new Error(`${blobType} processing timeout`));
|
||||
delete this.messageHandlers[blobType]
|
||||
reject(new Error(`${blobType} processing timeout`))
|
||||
}
|
||||
}, timeout);
|
||||
}, timeout)
|
||||
|
||||
this.messageHandlers[blobType] = (msg) => {
|
||||
delete this.messageHandlers[blobType];
|
||||
clearTimeout(timeoutId);
|
||||
const blob = msg[blobType] || msg.data;
|
||||
delete this.messageHandlers[blobType]
|
||||
clearTimeout(timeoutId)
|
||||
const blob = msg[blobType] || msg.data
|
||||
if (blob instanceof Blob) {
|
||||
resolve(blob);
|
||||
} else {
|
||||
reject(new Error(`Invalid ${blobType} format`));
|
||||
resolve(blob)
|
||||
}
|
||||
};
|
||||
});
|
||||
else {
|
||||
reject(new Error(`Invalid ${blobType} format`))
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
validateNetworkSize(size) {
|
||||
if (!this.networks[size]) {
|
||||
throw new Error(
|
||||
"Invalid networkSize: use one of " +
|
||||
Object.keys(this.networks).join(", "),
|
||||
);
|
||||
`Invalid networkSize: use one of ${
|
||||
Object.keys(this.networks).join(', ')}`,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
async upscaleImage(imageFile, networkSize, scaleOverride) {
|
||||
if (!imageFile) throw new Error("Image file is required");
|
||||
const size = networkSize || this.networkSize;
|
||||
this.validateNetworkSize(size);
|
||||
if (!imageFile)
|
||||
throw new Error('Image file is required')
|
||||
const size = networkSize || this.networkSize
|
||||
this.validateNetworkSize(size)
|
||||
|
||||
this.processingType = "image";
|
||||
const arrayBuffer = await imageFile.arrayBuffer();
|
||||
const mimeType = imageFile.type || "image/jpeg";
|
||||
this.processingType = 'image'
|
||||
const arrayBuffer = await imageFile.arrayBuffer()
|
||||
const mimeType = imageFile.type || 'image/jpeg'
|
||||
const { width, height } = await Upscaler.loadImageMetadata(
|
||||
arrayBuffer,
|
||||
mimeType,
|
||||
);
|
||||
)
|
||||
|
||||
const weights = await this.loadWeights(size);
|
||||
const network = this.networks[size];
|
||||
const scale =
|
||||
typeof scaleOverride === "number" && scaleOverride > 0
|
||||
const weights = await this.loadWeights(size)
|
||||
const network = this.networks[size]
|
||||
const scale
|
||||
= typeof scaleOverride === 'number' && scaleOverride > 0
|
||||
? scaleOverride
|
||||
: this.imageScale;
|
||||
: this.imageScale
|
||||
const [canvasUp, canvasOrig] = [
|
||||
this.createOffscreenCanvas(width, height, scale),
|
||||
this.createOffscreenCanvas(width, height, 1),
|
||||
];
|
||||
]
|
||||
|
||||
const blobPromise = this.createBlobPromise(
|
||||
"imageBlob",
|
||||
'imageBlob',
|
||||
this.timeouts.IMAGE,
|
||||
);
|
||||
)
|
||||
|
||||
this.getWorker().postMessage(
|
||||
{
|
||||
cmd: "init",
|
||||
cmd: 'init',
|
||||
data: {
|
||||
imageArrayBuffer: arrayBuffer,
|
||||
imageMimeType: mimeType,
|
||||
@@ -286,64 +294,65 @@ export default class Upscaler {
|
||||
},
|
||||
},
|
||||
[canvasUp, canvasOrig],
|
||||
);
|
||||
)
|
||||
|
||||
setTimeout(() => {
|
||||
this.getWorker().postMessage({
|
||||
cmd: "network",
|
||||
cmd: 'network',
|
||||
data: {
|
||||
name: network.name,
|
||||
imageArrayBuffer: arrayBuffer,
|
||||
imageMimeType: mimeType,
|
||||
weights,
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
this.getWorker().postMessage({
|
||||
cmd: "getImageBlob",
|
||||
cmd: 'getImageBlob',
|
||||
data: { imageArrayBuffer: arrayBuffer, imageMimeType: mimeType },
|
||||
});
|
||||
}, this.delays.NETWORK);
|
||||
}, this.delays.INIT);
|
||||
})
|
||||
}, this.delays.NETWORK)
|
||||
}, this.delays.INIT)
|
||||
|
||||
return blobPromise;
|
||||
return blobPromise
|
||||
}
|
||||
|
||||
async upscaleVideo(videoFile, networkSize, scaleOverride) {
|
||||
if (!videoFile) throw new Error("Video file is required");
|
||||
const size = networkSize || this.networkSize;
|
||||
this.validateNetworkSize(size);
|
||||
if (!videoFile)
|
||||
throw new Error('Video file is required')
|
||||
const size = networkSize || this.networkSize
|
||||
this.validateNetworkSize(size)
|
||||
|
||||
if (!Upscaler.isVideoSupported()) {
|
||||
throw new Error("WebCodecs API not supported. Requires Chrome 94+");
|
||||
throw new Error('WebCodecs API not supported. Requires Chrome 94+')
|
||||
}
|
||||
|
||||
this.processingType = "video";
|
||||
this.processingType = 'video'
|
||||
const { width, height, duration } = await Upscaler.loadVideoMetadata(
|
||||
videoFile,
|
||||
this.timeouts.METADATA,
|
||||
);
|
||||
)
|
||||
|
||||
const weights = await this.loadWeights(size);
|
||||
const network = this.networks[size];
|
||||
const scale =
|
||||
typeof scaleOverride === "number" && scaleOverride > 0
|
||||
const weights = await this.loadWeights(size)
|
||||
const network = this.networks[size]
|
||||
const scale
|
||||
= typeof scaleOverride === 'number' && scaleOverride > 0
|
||||
? scaleOverride
|
||||
: this.videoScale;
|
||||
: this.videoScale
|
||||
const [canvasOut, canvasIn] = [
|
||||
this.createOffscreenCanvas(width, height, scale),
|
||||
this.createOffscreenCanvas(width, height, 1),
|
||||
];
|
||||
]
|
||||
|
||||
const blobPromise = this.createBlobPromise(
|
||||
"videoBlob",
|
||||
'videoBlob',
|
||||
this.timeouts.VIDEO,
|
||||
);
|
||||
)
|
||||
|
||||
this.getWorker().postMessage(
|
||||
{
|
||||
cmd: "process",
|
||||
cmd: 'process',
|
||||
file: videoFile,
|
||||
fileSize: videoFile.size,
|
||||
duration,
|
||||
@@ -360,9 +369,9 @@ export default class Upscaler {
|
||||
skipDemuxProgress: true,
|
||||
},
|
||||
[canvasOut, canvasIn],
|
||||
);
|
||||
)
|
||||
|
||||
return blobPromise;
|
||||
return blobPromise
|
||||
}
|
||||
|
||||
async startRealtimeUpscale(
|
||||
@@ -372,78 +381,79 @@ export default class Upscaler {
|
||||
scaleOverride,
|
||||
) {
|
||||
if (!videoElement || !canvasElement) {
|
||||
throw new Error("videoElement and canvasElement are required");
|
||||
throw new Error('videoElement and canvasElement are required')
|
||||
}
|
||||
|
||||
const size = networkSize || this.networkSize;
|
||||
this.validateNetworkSize(size);
|
||||
const size = networkSize || this.networkSize
|
||||
this.validateNetworkSize(size)
|
||||
|
||||
const network = this.networks[size];
|
||||
const weights = await this.loadWeights(size);
|
||||
const network = this.networks[size]
|
||||
const weights = await this.loadWeights(size)
|
||||
|
||||
const scale =
|
||||
typeof scaleOverride === "number" && scaleOverride > 0
|
||||
const scale
|
||||
= typeof scaleOverride === 'number' && scaleOverride > 0
|
||||
? scaleOverride
|
||||
: this.videoScale;
|
||||
: this.videoScale
|
||||
|
||||
const ensureMetadata = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (videoElement.readyState >= 1) {
|
||||
resolve();
|
||||
return;
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
const onLoaded = () => {
|
||||
cleanup();
|
||||
resolve();
|
||||
};
|
||||
const onError = () => {
|
||||
cleanup();
|
||||
reject(new Error("Failed to load video metadata"));
|
||||
};
|
||||
let onLoaded, onError
|
||||
const cleanup = () => {
|
||||
videoElement.removeEventListener("loadedmetadata", onLoaded);
|
||||
videoElement.removeEventListener("error", onError);
|
||||
};
|
||||
videoElement.addEventListener("loadedmetadata", onLoaded);
|
||||
videoElement.addEventListener("error", onError);
|
||||
});
|
||||
};
|
||||
|
||||
await ensureMetadata();
|
||||
|
||||
const width = videoElement.videoWidth;
|
||||
const height = videoElement.videoHeight;
|
||||
if (!width || !height) {
|
||||
throw new Error("Invalid video dimensions");
|
||||
videoElement.removeEventListener('loadedmetadata', onLoaded)
|
||||
videoElement.removeEventListener('error', onError)
|
||||
}
|
||||
onLoaded = () => {
|
||||
cleanup()
|
||||
resolve()
|
||||
}
|
||||
onError = () => {
|
||||
cleanup()
|
||||
reject(new Error('Failed to load video metadata'))
|
||||
}
|
||||
videoElement.addEventListener('loadedmetadata', onLoaded)
|
||||
videoElement.addEventListener('error', onError)
|
||||
})
|
||||
}
|
||||
|
||||
const firstInit = !canvasElement._upscalerTransferred;
|
||||
await ensureMetadata()
|
||||
|
||||
let offscreen = null;
|
||||
const width = videoElement.videoWidth
|
||||
const height = videoElement.videoHeight
|
||||
if (!width || !height) {
|
||||
throw new Error('Invalid video dimensions')
|
||||
}
|
||||
|
||||
const firstInit = !canvasElement._upscalerTransferred
|
||||
|
||||
let offscreen = null
|
||||
if (firstInit) {
|
||||
canvasElement.width = width * scale;
|
||||
canvasElement.height = height * scale;
|
||||
canvasElement.width = width * scale
|
||||
canvasElement.height = height * scale
|
||||
|
||||
if (typeof canvasElement.transferControlToOffscreen !== "function") {
|
||||
throw new Error("OffscreenCanvas is not supported in this environment");
|
||||
if (typeof canvasElement.transferControlToOffscreen !== 'function') {
|
||||
throw new TypeError('OffscreenCanvas is not supported in this environment')
|
||||
}
|
||||
|
||||
offscreen = canvasElement.transferControlToOffscreen();
|
||||
canvasElement._upscalerTransferred = true;
|
||||
offscreen = canvasElement.transferControlToOffscreen()
|
||||
canvasElement._upscalerTransferred = true
|
||||
}
|
||||
|
||||
const captureCanvas = document.createElement("canvas");
|
||||
captureCanvas.width = width;
|
||||
captureCanvas.height = height;
|
||||
const captureCtx = captureCanvas.getContext("2d");
|
||||
const captureCanvas = document.createElement('canvas')
|
||||
captureCanvas.width = width
|
||||
captureCanvas.height = height
|
||||
const captureCtx = captureCanvas.getContext('2d')
|
||||
|
||||
if (this.realtimeLoopId) {
|
||||
cancelAnimationFrame(this.realtimeLoopId);
|
||||
this.realtimeLoopId = null;
|
||||
cancelAnimationFrame(this.realtimeLoopId)
|
||||
this.realtimeLoopId = null
|
||||
}
|
||||
|
||||
const initPayload = {
|
||||
cmd: "realtimeInit",
|
||||
cmd: 'realtimeInit',
|
||||
data: {
|
||||
upscaled: firstInit ? offscreen : null,
|
||||
resolution: {
|
||||
@@ -456,12 +466,13 @@ export default class Upscaler {
|
||||
network_name: network.name,
|
||||
weights,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
if (firstInit && offscreen) {
|
||||
this.getWorker().postMessage(initPayload, [offscreen]);
|
||||
} else {
|
||||
this.getWorker().postMessage(initPayload);
|
||||
this.getWorker().postMessage(initPayload, [offscreen])
|
||||
}
|
||||
else {
|
||||
this.getWorker().postMessage(initPayload)
|
||||
}
|
||||
|
||||
this.realtimeState = {
|
||||
@@ -473,113 +484,121 @@ export default class Upscaler {
|
||||
frameIndex: 0,
|
||||
captureCanvas,
|
||||
captureCtx,
|
||||
};
|
||||
}
|
||||
|
||||
const loop = async () => {
|
||||
if (!this.realtimeState || !this.realtimeState.running) return;
|
||||
const state = this.realtimeState;
|
||||
const v = state.video;
|
||||
if (!this.realtimeState || !this.realtimeState.running)
|
||||
return
|
||||
const state = this.realtimeState
|
||||
const v = state.video
|
||||
|
||||
const haveCurrentData = v.HAVE_CURRENT_DATA || 2;
|
||||
const haveCurrentData = v.HAVE_CURRENT_DATA || 2
|
||||
|
||||
if (
|
||||
!v.paused &&
|
||||
!v.ended &&
|
||||
!state.busy &&
|
||||
v.readyState >= haveCurrentData &&
|
||||
v.videoWidth > 0 &&
|
||||
v.videoHeight > 0
|
||||
!v.paused
|
||||
&& !v.ended
|
||||
&& !state.busy
|
||||
&& v.readyState >= haveCurrentData
|
||||
&& v.videoWidth > 0
|
||||
&& v.videoHeight > 0
|
||||
) {
|
||||
state.busy = true;
|
||||
state.busy = true
|
||||
try {
|
||||
const captureCanvas = state.captureCanvas;
|
||||
const captureCtx = state.captureCtx;
|
||||
const captureCanvas = state.captureCanvas
|
||||
const captureCtx = state.captureCtx
|
||||
if (!captureCanvas || !captureCtx) {
|
||||
throw new Error("Missing capture canvas");
|
||||
throw new Error('Missing capture canvas')
|
||||
}
|
||||
captureCtx.drawImage(v, 0, 0, captureCanvas.width, captureCanvas.height);
|
||||
const frame = await createImageBitmap(captureCanvas);
|
||||
state.frameIndex += 1;
|
||||
captureCtx.drawImage(v, 0, 0, captureCanvas.width, captureCanvas.height)
|
||||
const frame = await createImageBitmap(captureCanvas)
|
||||
state.frameIndex += 1
|
||||
|
||||
this.getWorker().postMessage(
|
||||
{
|
||||
cmd: "realtimeFrame",
|
||||
cmd: 'realtimeFrame',
|
||||
frame,
|
||||
},
|
||||
[frame],
|
||||
);
|
||||
} catch (e) {
|
||||
console.warn("realtimeFrame error", e);
|
||||
} finally {
|
||||
)
|
||||
}
|
||||
catch (e) {
|
||||
console.warn('realtimeFrame error', e)
|
||||
}
|
||||
finally {
|
||||
if (this.realtimeState) {
|
||||
this.realtimeState.busy = false;
|
||||
this.realtimeState.busy = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.realtimeLoopId = requestAnimationFrame(loop);
|
||||
};
|
||||
this.realtimeLoopId = requestAnimationFrame(loop)
|
||||
}
|
||||
|
||||
this.realtimeLoopId = requestAnimationFrame(loop);
|
||||
this.realtimeLoopId = requestAnimationFrame(loop)
|
||||
}
|
||||
|
||||
stopRealtimeUpscale() {
|
||||
if (this.realtimeLoopId) {
|
||||
cancelAnimationFrame(this.realtimeLoopId);
|
||||
this.realtimeLoopId = null;
|
||||
cancelAnimationFrame(this.realtimeLoopId)
|
||||
this.realtimeLoopId = null
|
||||
}
|
||||
if (this.realtimeState) {
|
||||
this.realtimeState.running = false;
|
||||
this.realtimeState = null;
|
||||
this.realtimeState.running = false
|
||||
this.realtimeState = null
|
||||
}
|
||||
}
|
||||
|
||||
async downloadUpscaled(file, networkSize, filename = null) {
|
||||
const isVideo = file.type.startsWith("video");
|
||||
const size = networkSize || this.networkSize;
|
||||
const isVideo = file.type.startsWith('video')
|
||||
const size = networkSize || this.networkSize
|
||||
const blob = isVideo
|
||||
? await this.upscaleVideo(file, size)
|
||||
: await this.upscaleImage(file, size);
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download =
|
||||
filename || `upscaled_${Date.now()}.${isVideo ? "mp4" : "png"}`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
return blob;
|
||||
: await this.upscaleImage(file, size)
|
||||
const url = URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download
|
||||
= filename || `upscaled_${Date.now()}.${isVideo ? 'mp4' : 'png'}`
|
||||
link.click()
|
||||
URL.revokeObjectURL(url)
|
||||
return blob
|
||||
}
|
||||
|
||||
getSupportedNetworks() {
|
||||
return Object.keys(this.networks);
|
||||
return Object.keys(this.networks)
|
||||
}
|
||||
|
||||
static async getGPUCapability() {
|
||||
try {
|
||||
if (navigator.gpu) {
|
||||
const adapter = await navigator.gpu.requestAdapter();
|
||||
const adapter = await navigator.gpu.requestAdapter()
|
||||
if (adapter) {
|
||||
const buffer = adapter.limits.maxStorageBufferBindingSize / 512;
|
||||
const texture = 8192 * 8192;
|
||||
return Math.min(buffer, texture);
|
||||
const buffer = adapter.limits.maxStorageBufferBindingSize / 512
|
||||
const texture = 8192 * 8192
|
||||
return Math.min(buffer, texture)
|
||||
}
|
||||
}
|
||||
const canvas = document.createElement("canvas");
|
||||
const gl = canvas.getContext("webgl2");
|
||||
if (gl) return gl.getParameter(gl.MAX_TEXTURE_SIZE) ** 2;
|
||||
return 8388608;
|
||||
} catch {
|
||||
return 8388608;
|
||||
const canvas = document.createElement('canvas')
|
||||
const gl = canvas.getContext('webgl2')
|
||||
if (gl)
|
||||
return gl.getParameter(gl.MAX_TEXTURE_SIZE) ** 2
|
||||
return 8388608
|
||||
}
|
||||
catch {
|
||||
return 8388608
|
||||
}
|
||||
}
|
||||
|
||||
static getBackendType() {
|
||||
try {
|
||||
if (navigator.gpu) return "webgpu";
|
||||
if (document.createElement("canvas").getContext("webgl2")) return "webgl";
|
||||
return "unknown";
|
||||
} catch {
|
||||
return "unknown";
|
||||
if (navigator.gpu)
|
||||
return 'webgpu'
|
||||
if (document.createElement('canvas').getContext('webgl2'))
|
||||
return 'webgl'
|
||||
return 'unknown'
|
||||
}
|
||||
catch {
|
||||
return 'unknown'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -590,24 +609,24 @@ export default class Upscaler {
|
||||
progress: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
onProgress(callback) {
|
||||
if (typeof callback === "function") {
|
||||
this.progressCallback = callback;
|
||||
if (typeof callback === 'function') {
|
||||
this.progressCallback = callback
|
||||
}
|
||||
}
|
||||
|
||||
dispose() {
|
||||
this.stopRealtimeUpscale();
|
||||
this.stopRealtimeUpscale()
|
||||
if (this.workerInstance) {
|
||||
this.workerInstance.terminate();
|
||||
this.workerInstance = null;
|
||||
this.workerInstance.terminate()
|
||||
this.workerInstance = null
|
||||
}
|
||||
this.messageHandlers = {};
|
||||
this.progressCallback = null;
|
||||
this.processingType = null;
|
||||
this.weightsCache.clear();
|
||||
this.messageHandlers = {}
|
||||
this.progressCallback = null
|
||||
this.processingType = null
|
||||
this.weightsCache.clear()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,243 +1,254 @@
|
||||
import Upscaler from "./Upscaler.js";
|
||||
import Upscaler from './Upscaler.js'
|
||||
|
||||
function artplayerPluginWebsr(
|
||||
option = {
|
||||
networkSize: "medium",
|
||||
compare: false,
|
||||
weightsBaseUrl: "/weights",
|
||||
workerUrl: "/worker/main.js",
|
||||
videoScale: 2,
|
||||
},
|
||||
option = {
|
||||
networkSize: 'medium',
|
||||
compare: false,
|
||||
weightsBaseUrl: '/weights',
|
||||
workerUrl: '/worker/main.js',
|
||||
videoScale: 2,
|
||||
},
|
||||
) {
|
||||
return (art) => {
|
||||
const { $video, $player } = art.template;
|
||||
return (art) => {
|
||||
const { $video, $player } = art.template
|
||||
|
||||
const $canvas = document.createElement("canvas");
|
||||
$player.appendChild($canvas);
|
||||
const $canvas = document.createElement('canvas')
|
||||
$player.appendChild($canvas)
|
||||
|
||||
$canvas.style.position = "absolute";
|
||||
$canvas.style.zIndex = "11";
|
||||
$canvas.style.pointerEvents = "none";
|
||||
$canvas.style.top = "50%";
|
||||
$canvas.style.left = "50%";
|
||||
$canvas.style.transform = "translate(-50%, -50%)";
|
||||
$canvas.style.opacity = "0";
|
||||
$canvas.style.transition = "opacity 0.2s ease";
|
||||
$canvas.style.position = 'absolute'
|
||||
$canvas.style.zIndex = '11'
|
||||
$canvas.style.pointerEvents = 'none'
|
||||
$canvas.style.top = '50%'
|
||||
$canvas.style.left = '50%'
|
||||
$canvas.style.transform = 'translate(-50%, -50%)'
|
||||
$canvas.style.opacity = '0'
|
||||
$canvas.style.transition = 'opacity 0.2s ease'
|
||||
|
||||
function calcCanvasSize() {
|
||||
const videoElement = art.video;
|
||||
const containerWidth = $player.offsetWidth || 640;
|
||||
const containerHeight = $player.offsetHeight || 360;
|
||||
const videoWidth = videoElement.videoWidth || 640;
|
||||
const videoHeight = videoElement.videoHeight || 360;
|
||||
const aspectRatio = videoWidth / videoHeight;
|
||||
let displayWidth = containerWidth;
|
||||
let displayHeight = containerHeight;
|
||||
if (containerWidth / containerHeight > aspectRatio) {
|
||||
displayWidth = containerHeight * aspectRatio;
|
||||
} else {
|
||||
displayHeight = containerWidth / aspectRatio;
|
||||
}
|
||||
return { displayWidth, displayHeight };
|
||||
}
|
||||
function calcCanvasSize() {
|
||||
const videoElement = art.video
|
||||
const containerWidth = $player.offsetWidth || 640
|
||||
const containerHeight = $player.offsetHeight || 360
|
||||
const videoWidth = videoElement.videoWidth || 640
|
||||
const videoHeight = videoElement.videoHeight || 360
|
||||
const aspectRatio = videoWidth / videoHeight
|
||||
let displayWidth = containerWidth
|
||||
let displayHeight = containerHeight
|
||||
if (containerWidth / containerHeight > aspectRatio) {
|
||||
displayWidth = containerHeight * aspectRatio
|
||||
}
|
||||
else {
|
||||
displayHeight = containerWidth / aspectRatio
|
||||
}
|
||||
return { displayWidth, displayHeight }
|
||||
}
|
||||
|
||||
if (!Upscaler || !Upscaler.isSupported || !Upscaler.isSupported()) {
|
||||
console.warn("Upscaler is not supported in this environment");
|
||||
return;
|
||||
}
|
||||
if (!Upscaler || !Upscaler.isSupported || !Upscaler.isSupported()) {
|
||||
console.warn('Upscaler is not supported in this environment')
|
||||
return
|
||||
}
|
||||
|
||||
const upscaler = new Upscaler({
|
||||
networkSize: option.networkSize || "medium",
|
||||
weightsBaseUrl: option.weightsBaseUrl || "/weights",
|
||||
workerUrl: option.workerUrl || "/worker/main.js",
|
||||
videoScale: option.videoScale || 2,
|
||||
});
|
||||
const upscaler = new Upscaler({
|
||||
networkSize: option.networkSize || 'medium',
|
||||
weightsBaseUrl: option.weightsBaseUrl || '/weights',
|
||||
workerUrl: option.workerUrl || '/worker/main.js',
|
||||
videoScale: option.videoScale || 2,
|
||||
})
|
||||
|
||||
let realtimeStarted = false;
|
||||
let realtimeStarted = false
|
||||
|
||||
async function startRealtime() {
|
||||
if (realtimeStarted) return;
|
||||
realtimeStarted = true;
|
||||
async function startRealtime() {
|
||||
if (realtimeStarted)
|
||||
return
|
||||
realtimeStarted = true
|
||||
|
||||
try {
|
||||
await new Promise((resolve, reject) => {
|
||||
if ($video.readyState >= 1) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
const onLoaded = () => {
|
||||
cleanup();
|
||||
resolve();
|
||||
};
|
||||
const onError = () => {
|
||||
cleanup();
|
||||
reject(new Error("Failed to load video metadata"));
|
||||
};
|
||||
const cleanup = () => {
|
||||
$video.removeEventListener("loadedmetadata", onLoaded);
|
||||
$video.removeEventListener("error", onError);
|
||||
};
|
||||
$video.addEventListener("loadedmetadata", onLoaded);
|
||||
$video.addEventListener("error", onError);
|
||||
});
|
||||
try {
|
||||
await new Promise((resolve, reject) => {
|
||||
if ($video.readyState >= 1) {
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
let onLoaded, onError
|
||||
const cleanup = () => {
|
||||
$video.removeEventListener('loadedmetadata', onLoaded)
|
||||
$video.removeEventListener('error', onError)
|
||||
}
|
||||
onLoaded = () => {
|
||||
cleanup()
|
||||
resolve()
|
||||
}
|
||||
onError = () => {
|
||||
cleanup()
|
||||
reject(new Error('Failed to load video metadata'))
|
||||
}
|
||||
$video.addEventListener('loadedmetadata', onLoaded)
|
||||
$video.addEventListener('error', onError)
|
||||
})
|
||||
|
||||
await upscaler.startRealtimeUpscale(
|
||||
$video,
|
||||
$canvas,
|
||||
option.networkSize || upscaler.networkSize,
|
||||
);
|
||||
await upscaler.startRealtimeUpscale(
|
||||
$video,
|
||||
$canvas,
|
||||
option.networkSize || upscaler.networkSize,
|
||||
)
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
$canvas.style.opacity = "1";
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(
|
||||
"artplayer-plugin-upscaler: failed to start realtime",
|
||||
e,
|
||||
);
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
$canvas.style.opacity = '1'
|
||||
})
|
||||
}
|
||||
catch (e) {
|
||||
console.error(
|
||||
'artplayer-plugin-upscaler: failed to start realtime',
|
||||
e,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const { displayWidth, displayHeight } = calcCanvasSize();
|
||||
$canvas.style.width = displayWidth + "px";
|
||||
$canvas.style.height = displayHeight + "px";
|
||||
const { displayWidth, displayHeight } = calcCanvasSize()
|
||||
$canvas.style.width = `${displayWidth}px`
|
||||
$canvas.style.height = `${displayHeight}px`
|
||||
|
||||
let comparePosition = 50;
|
||||
let isDragging = false;
|
||||
let compareEnabled = !!option.compare;
|
||||
let comparePosition = 50
|
||||
let isDragging = false
|
||||
let compareEnabled = !!option.compare
|
||||
|
||||
const $handler = document.createElement("div");
|
||||
$handler.style.position = "absolute";
|
||||
$handler.style.width = "3px";
|
||||
$handler.style.backgroundColor = "rgba(255, 255, 255, 0.75)";
|
||||
$handler.style.cursor = "ew-resize";
|
||||
$handler.style.zIndex = "12";
|
||||
$handler.style.pointerEvents = "auto";
|
||||
$handler.style.display = compareEnabled ? "block" : "none";
|
||||
$handler.style.boxShadow = "0 0 2px rgba(0, 0, 0, 0.1)";
|
||||
const $handler = document.createElement('div')
|
||||
$handler.style.position = 'absolute'
|
||||
$handler.style.width = '3px'
|
||||
$handler.style.backgroundColor = 'rgba(255, 255, 255, 0.75)'
|
||||
$handler.style.cursor = 'ew-resize'
|
||||
$handler.style.zIndex = '12'
|
||||
$handler.style.pointerEvents = 'auto'
|
||||
$handler.style.display = compareEnabled ? 'block' : 'none'
|
||||
$handler.style.boxShadow = '0 0 2px rgba(0, 0, 0, 0.1)'
|
||||
|
||||
if (compareEnabled) {
|
||||
$player.appendChild($handler)
|
||||
$handler.addEventListener('mousedown', handleMouseDown)
|
||||
document.addEventListener('mousemove', handleMouseMove)
|
||||
document.addEventListener('mouseup', handleMouseUp)
|
||||
updateCompareMask()
|
||||
}
|
||||
|
||||
function updateCompareMask() {
|
||||
if (compareEnabled) {
|
||||
const { displayWidth, displayHeight } = calcCanvasSize()
|
||||
const gradient = `linear-gradient(to right, transparent 0%, transparent ${comparePosition}%, black ${comparePosition}%, black 100%)`
|
||||
$canvas.style.maskImage = gradient
|
||||
|
||||
const containerWidth = $player.offsetWidth || 640
|
||||
const containerHeight = $player.offsetHeight || 360
|
||||
const canvasLeft = (containerWidth - displayWidth) / 2
|
||||
const canvasTop = (containerHeight - displayHeight) / 2
|
||||
const handlerX
|
||||
= canvasLeft + (displayWidth * comparePosition) / 100
|
||||
|
||||
$handler.style.top = `${canvasTop}px`
|
||||
$handler.style.left = `${handlerX}px`
|
||||
$handler.style.height = `${displayHeight}px`
|
||||
$handler.style.transform = 'translateX(-50%)'
|
||||
}
|
||||
else {
|
||||
$canvas.style.maskImage = 'none'
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseDown(_e) {
|
||||
if (compareEnabled) {
|
||||
isDragging = true
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseMove(e) {
|
||||
if (compareEnabled && isDragging) {
|
||||
const rect = $player.getBoundingClientRect()
|
||||
const { displayWidth } = calcCanvasSize()
|
||||
const containerWidth = $player.offsetWidth || 640
|
||||
const canvasLeft = (containerWidth - displayWidth) / 2
|
||||
const x = e.clientX - rect.left
|
||||
const relativeX = x - canvasLeft
|
||||
comparePosition = (relativeX / displayWidth) * 100
|
||||
comparePosition = Math.max(0, Math.min(100, comparePosition))
|
||||
updateCompareMask()
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseUp(_e) {
|
||||
isDragging = false
|
||||
}
|
||||
|
||||
art.on('destroy', () => {
|
||||
if (upscaler && typeof upscaler.dispose === 'function') {
|
||||
upscaler.dispose()
|
||||
}
|
||||
$handler.removeEventListener('mousedown', handleMouseDown)
|
||||
document.removeEventListener('mousemove', handleMouseMove)
|
||||
document.removeEventListener('mouseup', handleMouseUp)
|
||||
})
|
||||
|
||||
art.on('resize', () => {
|
||||
const { displayWidth, displayHeight } = calcCanvasSize()
|
||||
$canvas.style.width = `${displayWidth}px`
|
||||
$canvas.style.height = `${displayHeight}px`
|
||||
updateCompareMask()
|
||||
})
|
||||
|
||||
art.on('play', () => {
|
||||
startRealtime()
|
||||
})
|
||||
|
||||
function update(newOption = {}) {
|
||||
if (!newOption || typeof newOption !== 'object')
|
||||
return
|
||||
|
||||
if (Object.prototype.hasOwnProperty.call(newOption, 'compare')) {
|
||||
const nextCompare = !!newOption.compare
|
||||
option.compare = nextCompare
|
||||
compareEnabled = nextCompare
|
||||
|
||||
if (compareEnabled) {
|
||||
$player.appendChild($handler);
|
||||
$handler.addEventListener("mousedown", handleMouseDown);
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
document.addEventListener("mouseup", handleMouseUp);
|
||||
updateCompareMask();
|
||||
if (!$handler.parentNode) {
|
||||
$player.appendChild($handler)
|
||||
}
|
||||
$handler.style.display = 'block'
|
||||
$handler.addEventListener('mousedown', handleMouseDown)
|
||||
document.addEventListener('mousemove', handleMouseMove)
|
||||
document.addEventListener('mouseup', handleMouseUp)
|
||||
updateCompareMask()
|
||||
}
|
||||
|
||||
function updateCompareMask() {
|
||||
if (compareEnabled) {
|
||||
const { displayWidth, displayHeight } = calcCanvasSize();
|
||||
const gradient = `linear-gradient(to right, transparent 0%, transparent ${comparePosition}%, black ${comparePosition}%, black 100%)`;
|
||||
$canvas.style.maskImage = gradient;
|
||||
|
||||
const containerWidth = $player.offsetWidth || 640;
|
||||
const containerHeight = $player.offsetHeight || 360;
|
||||
const canvasLeft = (containerWidth - displayWidth) / 2;
|
||||
const canvasTop = (containerHeight - displayHeight) / 2;
|
||||
const handlerX =
|
||||
canvasLeft + (displayWidth * comparePosition) / 100;
|
||||
|
||||
$handler.style.top = canvasTop + "px";
|
||||
$handler.style.left = handlerX + "px";
|
||||
$handler.style.height = displayHeight + "px";
|
||||
$handler.style.transform = "translateX(-50%)";
|
||||
} else {
|
||||
$canvas.style.maskImage = "none";
|
||||
}
|
||||
else {
|
||||
$canvas.style.maskImage = 'none'
|
||||
$handler.style.display = 'none'
|
||||
$handler.removeEventListener('mousedown', handleMouseDown)
|
||||
document.removeEventListener('mousemove', handleMouseMove)
|
||||
document.removeEventListener('mouseup', handleMouseUp)
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseDown(e) {
|
||||
if (compareEnabled) {
|
||||
isDragging = true;
|
||||
}
|
||||
if (newOption.networkSize) {
|
||||
const nextSize = newOption.networkSize
|
||||
option.networkSize = nextSize
|
||||
if (
|
||||
upscaler
|
||||
&& typeof upscaler.stopRealtimeUpscale === 'function'
|
||||
) {
|
||||
upscaler.stopRealtimeUpscale()
|
||||
}
|
||||
|
||||
function handleMouseMove(e) {
|
||||
if (compareEnabled && isDragging) {
|
||||
const rect = $player.getBoundingClientRect();
|
||||
const { displayWidth } = calcCanvasSize();
|
||||
const containerWidth = $player.offsetWidth || 640;
|
||||
const canvasLeft = (containerWidth - displayWidth) / 2;
|
||||
const x = e.clientX - rect.left;
|
||||
const relativeX = x - canvasLeft;
|
||||
comparePosition = (relativeX / displayWidth) * 100;
|
||||
comparePosition = Math.max(0, Math.min(100, comparePosition));
|
||||
updateCompareMask();
|
||||
}
|
||||
realtimeStarted = false
|
||||
if (!art.paused) {
|
||||
startRealtime()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseUp(e) {
|
||||
isDragging = false;
|
||||
}
|
||||
|
||||
art.on("destroy", () => {
|
||||
if (upscaler && typeof upscaler.dispose === "function") {
|
||||
upscaler.dispose();
|
||||
}
|
||||
$handler.removeEventListener("mousedown", handleMouseDown);
|
||||
document.removeEventListener("mousemove", handleMouseMove);
|
||||
document.removeEventListener("mouseup", handleMouseUp);
|
||||
});
|
||||
|
||||
art.on("resize", () => {
|
||||
const { displayWidth, displayHeight } = calcCanvasSize();
|
||||
$canvas.style.width = displayWidth + "px";
|
||||
$canvas.style.height = displayHeight + "px";
|
||||
updateCompareMask();
|
||||
});
|
||||
|
||||
art.on("play", () => {
|
||||
startRealtime();
|
||||
});
|
||||
|
||||
function update(newOption = {}) {
|
||||
if (!newOption || typeof newOption !== "object") return;
|
||||
|
||||
if (Object.prototype.hasOwnProperty.call(newOption, "compare")) {
|
||||
const nextCompare = !!newOption.compare;
|
||||
option.compare = nextCompare;
|
||||
compareEnabled = nextCompare;
|
||||
|
||||
if (compareEnabled) {
|
||||
if (!$handler.parentNode) {
|
||||
$player.appendChild($handler);
|
||||
}
|
||||
$handler.style.display = "block";
|
||||
$handler.addEventListener("mousedown", handleMouseDown);
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
document.addEventListener("mouseup", handleMouseUp);
|
||||
updateCompareMask();
|
||||
} else {
|
||||
$canvas.style.maskImage = "none";
|
||||
$handler.style.display = "none";
|
||||
$handler.removeEventListener("mousedown", handleMouseDown);
|
||||
document.removeEventListener("mousemove", handleMouseMove);
|
||||
document.removeEventListener("mouseup", handleMouseUp);
|
||||
}
|
||||
}
|
||||
|
||||
if (newOption.networkSize) {
|
||||
const nextSize = newOption.networkSize;
|
||||
option.networkSize = nextSize;
|
||||
if (
|
||||
upscaler &&
|
||||
typeof upscaler.stopRealtimeUpscale === "function"
|
||||
) {
|
||||
upscaler.stopRealtimeUpscale();
|
||||
}
|
||||
realtimeStarted = false;
|
||||
if (!art.paused) {
|
||||
startRealtime();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
name: "artplayerPluginWebsr",
|
||||
upscaler,
|
||||
update,
|
||||
};
|
||||
};
|
||||
return {
|
||||
name: 'artplayerPluginWebsr',
|
||||
upscaler,
|
||||
update,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.artplayerPluginWebsr = artplayerPluginWebsr;
|
||||
if (typeof window !== 'undefined') {
|
||||
window.artplayerPluginWebsr = artplayerPluginWebsr
|
||||
}
|
||||
|
||||
export default artplayerPluginWebsr
|
||||
@@ -1,19 +1,19 @@
|
||||
import type Artplayer from 'artplayer';
|
||||
import type Artplayer from 'artplayer'
|
||||
|
||||
interface Option {
|
||||
compare?: boolean;
|
||||
networkSize?: 'small' | 'medium' | 'large';
|
||||
weightsBaseUrl?: string;
|
||||
workerUrl?: string;
|
||||
videoScale?: number;
|
||||
compare?: boolean
|
||||
networkSize?: 'small' | 'medium' | 'large'
|
||||
weightsBaseUrl?: string
|
||||
workerUrl?: string
|
||||
videoScale?: number
|
||||
}
|
||||
|
||||
interface Result {
|
||||
name: 'artplayerPluginWebsr';
|
||||
upscaler: any;
|
||||
update: (option: Option) => void;
|
||||
name: 'artplayerPluginWebsr'
|
||||
upscaler: any
|
||||
update: (option: Option) => void
|
||||
}
|
||||
|
||||
declare const artplayerPluginWebsr: (option?: Option) => (art: Artplayer) => Result;
|
||||
declare const artplayerPluginWebsr: (option?: Option) => (art: Artplayer) => Result
|
||||
|
||||
export default artplayerPluginWebsr
|
||||
Reference in new issue
Block a user