feat: add Upscaler class for image and video upscaling with Web Workers

- Implemented methods for initializing the upscaling process, loading weights, and processing images and videos.
- Added support for real-time video upscaling using OffscreenCanvas and Web Workers.
- Included utility functions for loading image and video metadata, handling blob responses, and managing network configurations.
- Introduced methods for downloading upscaled content and managing GPU capabilities.
- Added error handling and progress tracking for the upscaling process.

packages/artplayer-plugin-websr/src/Upscaler.js

@@ -0,0 +1,584 @@
+export default class Upscaler {
+  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;
+    }
+  }
+
+  static isVideoSupported() {
+    try {
+      return (
+        typeof VideoEncoder !== "undefined" &&
+        typeof VideoDecoder !== "undefined"
+      );
+    } catch {
+      return false;
+    }
+  }
+
+  constructor(options = {}) {
+    const weightsBaseUrl = options.weightsBaseUrl || "/weights";
+
+    this.networks = options.networks || {
+      small: {
+        name: "anime4k/cnn-2x-l",
+        weightsUrl: `${weightsBaseUrl}/cnn-8.json`,
+      },
+      medium: {
+        name: "anime4k/cnn-2x-16",
+        weightsUrl: `${weightsBaseUrl}/cnn-16.json`,
+      },
+      large: {
+        name: "anime4k/cnn-2x-28",
+        weightsUrl: `${weightsBaseUrl}/cnn-28.json`,
+      },
+    };
+
+    this.networkSize = options.networkSize || "medium";
+    this.weightsBaseUrl = weightsBaseUrl;
+    this.workerUrl = options.workerUrl || "/worker/main.js";
+
+    this.timeouts = {
+      ...Upscaler.DEFAULT_TIMEOUTS,
+      ...(options.timeouts || {}),
+    };
+    this.delays = { ...Upscaler.DEFAULT_DELAYS, ...(options.delays || {}) };
+
+    this.imageScale =
+      typeof options.imageScale === "number" && options.imageScale > 0
+        ? options.imageScale
+        : 2;
+    this.videoScale =
+      typeof options.videoScale === "number" && options.videoScale > 0
+        ? options.videoScale
+        : 2;
+
+    this.weightsCache = new Map();
+    this.workerInstance = null;
+    this.messageHandlers = {};
+    this.progressCallback = null;
+    this.processingType = null;
+
+    this.realtimeLoopId = null;
+    this.realtimeState = null;
+  }
+
+  init({ prewarm = true } = {}) {
+    if (!Upscaler.isSupported()) {
+      throw new Error("Upscaler is not supported in this environment");
+    }
+    if (prewarm) {
+      this.getWorker().postMessage({ cmd: "isSupported" });
+    }
+    return this;
+  }
+
+  getWorker() {
+    if (!this.workerInstance) {
+      this.workerInstance = new Worker(this.workerUrl);
+      this.workerInstance.onmessage = (event) =>
+        this.handleWorkerMessage(event);
+    }
+    return this.workerInstance;
+  }
+
+  static extractProgressValue(data) {
+    const value = data.data ?? data.progress ?? data.value ?? data.percentage;
+    return typeof value === "number"
+      ? Math.min(100, Math.max(0, Math.round(value)))
+      : null;
+  }
+
+  handleBlobResponse(data) {
+    const blobType =
+      this.processingType === "video" ? "videoBlob" : "imageBlob";
+    const handler = this.messageHandlers[blobType];
+    if (data.data instanceof Blob && handler) {
+      handler({ [blobType]: data.data });
+    }
+  }
+
+  requestBlob() {
+    const cmd =
+      this.processingType === "video" ? "getVideoBlob" : "getImageBlob";
+    this.getWorker().postMessage({ cmd });
+  }
+
+  handleWorkerMessage(event) {
+    const { data } = event;
+    if (!data.cmd) return;
+
+    const { cmd } = data;
+
+    if (cmd === "progress") {
+      const progress = Upscaler.extractProgressValue(data);
+      if (progress !== null && this.progressCallback) {
+        this.progressCallback(progress);
+      }
+      if (this.messageHandlers.progress) this.messageHandlers.progress(data);
+    } else if (cmd === "finished") {
+      if (data.data instanceof Blob) {
+        this.handleBlobResponse(data);
+      } else {
+        this.requestBlob();
+      }
+    } else if (this.messageHandlers[cmd]) {
+      this.messageHandlers[cmd](data);
+    }
+  }
+
+  async loadWeights(networkSize) {
+    this.validateNetworkSize(networkSize);
+    if (this.weightsCache.has(networkSize)) {
+      return this.weightsCache.get(networkSize);
+    }
+    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;
+  }
+
+  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();
+
+      img.onload = () => {
+        URL.revokeObjectURL(url);
+        resolve({ width: img.width, height: img.height });
+      };
+
+      img.onerror = () => {
+        URL.revokeObjectURL(url);
+        reject(new Error("Failed to load image"));
+      };
+
+      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 timeout = setTimeout(() => reject(new Error("Timeout")), timeoutMs);
+
+      video.onloadedmetadata = () => {
+        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"));
+      };
+    });
+  }
+
+  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");
+    }
+    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`));
+        }
+      }, timeout);
+
+      this.messageHandlers[blobType] = (msg) => {
+        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`));
+        }
+      };
+    });
+  }
+
+  validateNetworkSize(size) {
+    if (!this.networks[size]) {
+      throw new Error(
+        "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);
+
+    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
+        ? scaleOverride
+        : this.imageScale;
+    const [canvasUp, canvasOrig] = [
+      this.createOffscreenCanvas(width, height, scale),
+      this.createOffscreenCanvas(width, height, 1),
+    ];
+
+    const blobPromise = this.createBlobPromise(
+      "imageBlob",
+      this.timeouts.IMAGE,
+    );
+
+    this.getWorker().postMessage(
+      {
+        cmd: "init",
+        data: {
+          imageArrayBuffer: arrayBuffer,
+          imageMimeType: mimeType,
+          upscaled: canvasUp,
+          original: canvasOrig,
+          resolution: { width, height },
+          network_name: network.name,
+          weights,
+        },
+      },
+      [canvasUp, canvasOrig],
+    );
+
+    setTimeout(() => {
+      this.getWorker().postMessage({
+        cmd: "network",
+        data: {
+          name: network.name,
+          imageArrayBuffer: arrayBuffer,
+          imageMimeType: mimeType,
+          weights,
+        },
+      });
+
+      setTimeout(() => {
+        this.getWorker().postMessage({
+          cmd: "getImageBlob",
+          data: { imageArrayBuffer: arrayBuffer, imageMimeType: mimeType },
+        });
+      }, this.delays.NETWORK);
+    }, this.delays.INIT);
+
+    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 (!Upscaler.isVideoSupported()) {
+      throw new Error("WebCodecs API not supported. Requires Chrome 94+");
+    }
+
+    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
+        ? scaleOverride
+        : this.videoScale;
+    const [canvasOut, canvasIn] = [
+      this.createOffscreenCanvas(width, height, scale),
+      this.createOffscreenCanvas(width, height, 1),
+    ];
+
+    const blobPromise = this.createBlobPromise(
+      "videoBlob",
+      this.timeouts.VIDEO,
+    );
+
+    this.getWorker().postMessage(
+      {
+        cmd: "process",
+        file: videoFile,
+        fileSize: videoFile.size,
+        duration,
+        adjustedResolution: {
+          adjustedInputWidth: width,
+          adjustedInputHeight: height,
+          adjustedOutputWidth: width * scale,
+          adjustedOutputHeight: height * scale,
+        },
+        upscaled: canvasOut,
+        original: canvasIn,
+        weights,
+        network_name: network.name,
+        skipDemuxProgress: true,
+      },
+      [canvasOut, canvasIn],
+    );
+
+    return blobPromise;
+  }
+
+  async startRealtimeUpscale(
+    videoElement,
+    canvasElement,
+    networkSize,
+    scaleOverride,
+  ) {
+    if (!videoElement || !canvasElement) {
+      throw new Error("videoElement and canvasElement are required");
+    }
+
+    const size = networkSize || this.networkSize;
+    this.validateNetworkSize(size);
+
+    const network = this.networks[size];
+    const weights = await this.loadWeights(size);
+
+    const scale =
+      typeof scaleOverride === "number" && scaleOverride > 0
+        ? scaleOverride
+        : this.videoScale;
+
+    const ensureMetadata = () => {
+      return new Promise((resolve, reject) => {
+        if (videoElement.readyState >= 1) {
+          resolve();
+          return;
+        }
+        const onLoaded = () => {
+          cleanup();
+          resolve();
+        };
+        const onError = () => {
+          cleanup();
+          reject(new Error("Failed to load video metadata"));
+        };
+        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");
+    }
+
+
+    canvasElement.width = width * scale;
+    canvasElement.height = height * scale;
+
+    if (typeof canvasElement.transferControlToOffscreen !== "function") {
+      throw new Error("OffscreenCanvas is not supported in this environment");
+    }
+
+    const offscreen = canvasElement.transferControlToOffscreen();
+
+
+    if (this.realtimeLoopId) {
+      cancelAnimationFrame(this.realtimeLoopId);
+      this.realtimeLoopId = null;
+    }
+
+    this.getWorker().postMessage(
+      {
+        cmd: "realtimeInit",
+        data: {
+          upscaled: offscreen,
+          resolution: {
+            width,
+            height,
+            scale,
+            outputWidth: width * scale,
+            outputHeight: height * scale,
+          },
+          network_name: network.name,
+          weights,
+        },
+      },
+      [offscreen],
+    );
+
+
+    this.realtimeState = {
+      running: true,
+      video: videoElement,
+      canvas: canvasElement,
+      scale,
+      busy: false,
+      frameIndex: 0,
+    };
+
+    const loop = async () => {
+      if (!this.realtimeState || !this.realtimeState.running) return;
+      const state = this.realtimeState;
+      const v = state.video;
+
+      if (!v.paused && !v.ended && !state.busy) {
+        state.busy = true;
+        try {
+          const frame = await createImageBitmap(v);
+          state.frameIndex += 1;
+          
+          this.getWorker().postMessage(
+            {
+              cmd: "realtimeFrame",
+              frame,
+            },
+            [frame],
+          );
+        } catch (e) {
+          console.warn("realtimeFrame error", e);
+        } finally {
+          if (this.realtimeState) {
+            this.realtimeState.busy = false;
+          }
+        }
+      }
+
+      this.realtimeLoopId = requestAnimationFrame(loop);
+    };
+
+    this.realtimeLoopId = requestAnimationFrame(loop);
+  }
+
+  stopRealtimeUpscale() {
+    if (this.realtimeLoopId) {
+      cancelAnimationFrame(this.realtimeLoopId);
+      this.realtimeLoopId = null;
+    }
+    if (this.realtimeState) {
+      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 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;
+  }
+
+  getSupportedNetworks() {
+    return Object.keys(this.networks);
+  }
+
+  static async getGPUCapability() {
+    try {
+      if (navigator.gpu) {
+        const adapter = await navigator.gpu.requestAdapter();
+        if (adapter) {
+          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;
+    }
+  }
+
+  static getBackendType() {
+    try {
+      if (navigator.gpu) return "webgpu";
+      if (document.createElement("canvas").getContext("webgl2")) return "webgl";
+      return "unknown";
+    } catch {
+      return "unknown";
+    }
+  }
+
+  getAppState() {
+    return {
+      backend: Upscaler.getBackendType(),
+      isProcessing: false,
+      progress: 0,
+      width: 0,
+      height: 0,
+    };
+  }
+
+  onProgress(callback) {
+    if (typeof callback === "function") {
+      this.progressCallback = callback;
+    }
+  }
+
+  dispose() {
+    this.stopRealtimeUpscale();
+    if (this.workerInstance) {
+      this.workerInstance.terminate();
+      this.workerInstance = null;
+    }
+    this.messageHandlers = {};
+    this.progressCallback = null;
+    this.processingType = null;
+    this.weightsCache.clear();
+  }
+}

packages/artplayer-plugin-websr/src/index.js

@@ -1,434 +1,134 @@
-import WebSR from '@websr/websr';
+import Upscaler from "./Upscaler";
 
-export default function artplayerPluginWebsr(option = {}) {
+export default function artplayerPluginWebsr(
+    option = {
+        networkSize: "medium",
+        compare: false,
+    },
+) {
     return (art) => {
-        const {
-            template: { $player },
-            constructor: {
-                validator,
-                utils: { append, setStyles },
-            },
-        } = art;
+        const { $video, $player } = art.template;
 
-        // Default options
-        option = validator(
-            {
-                scale: 2,
-                networkName: '',
-                weights: null,
-                compare: false,
-                ...option,
-            },
-            {
-                scale: 'number',
-                networkName: 'string',
-                weights: '?string|object',
-                compare: 'boolean',
-            }
-        );
+        const $canvas = document.createElement("canvas");
+        $player.appendChild($canvas);
 
-        // Validate required parameters
-        if (!option.networkName) {
-            console.error('WebSR: networkName is required');
-        }
-        if (!option.weights) {
-            console.error('WebSR: weights is required');
+        $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%)";
+
+        const upscaler = new Upscaler(option);
+        upscaler.init();
+        upscaler.startRealtimeUpscale($video, $canvas);
+
+        // 对比模式
+        let comparePosition = 50;
+        let isDragging = false;
+
+        // 创建对比手柄
+        const $handler = document.createElement("div");
+        $handler.style.position = "absolute";
+        $handler.style.width = "3px";
+        $handler.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
+        $handler.style.cursor = "ew-resize";
+        $handler.style.zIndex = "12";
+        $handler.style.pointerEvents = "auto";
+        $handler.style.display = option.compare ? "block" : "none";
+        $handler.style.boxShadow = "0 0 4px rgba(0, 0, 0, 0.1)";
+
+        if (option.compare) {
+            $player.appendChild($handler);
+            $handler.addEventListener("mousedown", handleMouseDown);
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
+            updateCompareMask();
         }
 
-        let websr = null;
-        let gpu = null;
-        let isInitialized = false;
-        let isEnabled = true;  // Always enabled
-        let renderFrameId = null;
-        let comparePosition = 0.5;  // Comparison split position (0-1)
-        let isCompareDragging = false;
-
-        // Create canvas for upscaled output
-        const $canvas = document.createElement('canvas');
-        $canvas.id = 'artplayer-websr-canvas';
-        setStyles($canvas, {
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            display: 'block',
-            pointerEvents: 'none',
-            zIndex: '11',
-            imageRendering: 'crisp-edges',
-        });
-        append($player, $canvas);
-
-        // Create comparison divider
-        const $compareDivider = document.createElement('div');
-        $compareDivider.id = 'artplayer-websr-divider';
-        setStyles($compareDivider, {
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            width: '2px',
-            height: '100%',
-            backgroundColor: '#fff',
-            display: option.compare ? 'block' : 'none',
-            pointerEvents: 'auto',
-            cursor: 'col-resize',
-            zIndex: '12',
-        });
-        append($player, $compareDivider);
-
-        // Function to update divider position and canvas clip-path
-        function updateDividerPosition(pos) {
-            comparePosition = Math.max(0, Math.min(1, pos));
-            const offsetX = comparePosition * 100;
-            setStyles($compareDivider, {
-                left: offsetX + '%',
-            });
-            
-            // Update canvas clip-path to show only right side (upscaled)
-            if (option.compare) {
-                const clipPercent = comparePosition * 100;
-                setStyles($canvas, {
-                    clipPath: `inset(0 0 0 ${clipPercent}%)`,
-                });
-            }
-        }
-
-        // Mouse events for comparison dragging
-        document.addEventListener('mousemove', (e) => {
-            if (!isCompareDragging) return;
-            const rect = $player.getBoundingClientRect();
-            const pos = (e.clientX - rect.left) / rect.width;
-            updateDividerPosition(pos);
-        });
-
-        document.addEventListener('mouseup', () => {
-            isCompareDragging = false;
-        });
-
-        $compareDivider.addEventListener('mousedown', () => {
-            isCompareDragging = true;
-        });
-
-        // Touch events for mobile
-        document.addEventListener('touchmove', (e) => {
-            if (!isCompareDragging) return;
-            const rect = $player.getBoundingClientRect();
-            const pos = (e.touches[0].clientX - rect.left) / rect.width;
-            updateDividerPosition(pos);
-        }, { passive: true });
-
-        document.addEventListener('touchend', () => {
-            isCompareDragging = false;
-        });
-
-        $compareDivider.addEventListener('touchstart', () => {
-            isCompareDragging = true;
-        });
-
-        // Function to calculate canvas size based on video aspect ratio
         function calcCanvasSize() {
             const videoElement = art.video;
-            if (!videoElement) {
-                return { displayWidth: 640, displayHeight: 360 };
-            }
-
             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) {
-                // Container is wider than video
                 displayWidth = containerHeight * aspectRatio;
             } else {
-                // Container is taller than video
                 displayHeight = containerWidth / aspectRatio;
             }
-
             return { displayWidth, displayHeight };
         }
 
-        // Initialize WebGPU and WebSR
-        async function initWebSR() {
-            try {
-                if (isInitialized) return true;
-
-                // Check WebGPU support
-                if (!navigator.gpu) {
-                    console.warn('WebGPU is not supported');
-                    return false;
-                }
-
-                // Initialize WebGPU
-                gpu = await WebSR.initWebGPU();
-                if (!gpu) {
-                    console.warn('Failed to initialize WebGPU');
-                    return false;
-                }
-
-                // Load weights
-                let weights;
-                if (typeof option.weights === 'string') {
-                    // If weights is a URL, fetch it
-                    const weightResponse = await fetch(option.weights);
-                    if (!weightResponse.ok) {
-                        console.warn(`Failed to load weights from ${option.weights}`);
-                        return false;
-                    }
-                    weights = await weightResponse.json();
-                } else if (typeof option.weights === 'object') {
-                    // If weights is an object, use it directly
-                    weights = option.weights;
-                } else {
-                    console.warn('Invalid weights format');
-                    return false;
-                }
-
-                // Create WebSR instance
-                const videoElement = art.video;
-                if (!videoElement) {
-                    console.warn('Video element not found');
-                    return false;
-                }
-
-                // Set canvas dimensions based on video aspect ratio
+        function updateCompareMask() {
+            if (option.compare) {
                 const { displayWidth, displayHeight } = calcCanvasSize();
-                $canvas.width = displayWidth * option.scale;
-                $canvas.height = displayHeight * option.scale;
-                setStyles($canvas, {
-                    width: displayWidth + 'px',
-                    height: displayHeight + 'px',
-                });
+                const gradient = `linear-gradient(to right, transparent 0%, transparent ${comparePosition}%, black ${comparePosition}%, black 100%)`;
+                $canvas.style.maskImage = gradient;
 
-                websr = new WebSR({
-                    source: videoElement,
-                    network_name: option.networkName,
-                    weights: weights,
-                    gpu: gpu,
-                    canvas: $canvas,
-                });
+                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;
 
-                isInitialized = true;
-                return true;
-            } catch (error) {
-                console.error('WebSR initialization error:', error);
-                return false;
-            }
-        }
-
-        // Render single frame
-        async function renderSingleFrame() {
-            if (!websr || !isEnabled || !art.video) {
-                return;
-            }
-
-            try {
-                await websr.render(art.video);
-            } catch (error) {
-                console.error('WebSR render error:', error);
-            }
-        }
-
-        // Render frame function
-        async function renderFrame() {
-            if (!websr || !isEnabled || !art.video || art.video.paused) {
-                renderFrameId = null;
-                return;
-            }
-
-            try {
-                await websr.render(art.video);
-            } catch (error) {
-                console.error('WebSR render error:', error);
-            }
-
-            // Continue rendering
-            if (isEnabled && !art.video.paused) {
-                renderFrameId = requestAnimationFrame(renderFrame);
-            }
-        }
-
-        // Enable WebSR
-        async function enable() {
-            if (isEnabled) return;
-
-            if (!isInitialized) {
-                const initialized = await initWebSR();
-                if (!initialized) {
-                    console.error('Failed to initialize WebSR');
-                    return;
-                }
-            }
-
-            isEnabled = true;
-            setStyle($canvas, 'display', 'block');
-
-            // Start rendering if video is playing
-            if (art.video && !art.video.paused) {
-                renderFrameId = requestAnimationFrame(renderFrame);
-            }
-
-            art.emit('artplayerPluginWebsr:enable');
-        }
-
-        // Disable WebSR
-        function disable() {
-            if (!isEnabled) return;
-
-            isEnabled = false;
-            setStyles($canvas, {
-                display: 'none',
-            });
-
-            // Cancel ongoing render
-            if (renderFrameId) {
-                cancelAnimationFrame(renderFrameId);
-                renderFrameId = null;
-            }
-
-            art.emit('artplayerPluginWebsr:disable');
-        }
-
-        // Toggle WebSR
-        async function toggle() {
-            if (isEnabled) {
-                disable();
+                $handler.style.top = canvasTop + "px";
+                $handler.style.left = handlerX + "px";
+                $handler.style.height = displayHeight + "px";
+                $handler.style.transform = "translateX(-50%)";
             } else {
-                await enable();
+                $canvas.style.maskImage = "none";
             }
         }
 
-        // Listen to video events
-        art.on('play', () => {
-            renderSingleFrame();  // Render current frame immediately
-            if (isEnabled && isInitialized && !renderFrameId) {
-                renderFrameId = requestAnimationFrame(renderFrame);
+        function handleMouseDown(e) {
+            if (option.compare) {
+                isDragging = true;
             }
+        }
+
+        function handleMouseMove(e) {
+            if (option.compare && 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", () => {
+            upscaler.dispose();
+            $handler.removeEventListener("mousedown", handleMouseDown);
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
         });
 
-        art.on('pause', () => {
-            if (renderFrameId) {
-                cancelAnimationFrame(renderFrameId);
-                renderFrameId = null;
-            }
+        art.on("resize", () => {
+            const { displayWidth, displayHeight } = calcCanvasSize();
+            $canvas.style.width = displayWidth + "px";
+            $canvas.style.height = displayHeight + "px";
+            updateCompareMask();
         });
 
-        art.on('seek', () => {
-            if (isEnabled && isInitialized && !art.video.paused && !renderFrameId) {
-                renderFrameId = requestAnimationFrame(renderFrame);
-            }
-        });
-
-        art.on('resize', () => {
-            if (websr && $canvas.offsetParent) {
-                const { displayWidth, displayHeight } = calcCanvasSize();
-                $canvas.width = displayWidth * option.scale;
-                $canvas.height = displayHeight * option.scale;
-                setStyles($canvas, {
-                    width: displayWidth + 'px',
-                    height: displayHeight + 'px',
-                });
-            }
-        });
-
-        art.on('destroy', () => {
-            disable();
-            if (renderFrameId) {
-                cancelAnimationFrame(renderFrameId);
-                renderFrameId = null;
-            }
-            if ($canvas.parentNode) {
-                $canvas.parentNode.removeChild($canvas);
-            }
-        });
-
-        // Initialize if enabled by default
-        initWebSR().then(() => {
-            // Render first frame after initialization
-            if (isEnabled && isInitialized && art.video) {
-                renderSingleFrame();
-            }
-        }).catch(err => console.error('Failed to init WebSR:', err));
-
-        // Return plugin API
         return {
-            name: 'artplayerPluginWebsr',
-            websr: () => websr,
-            gpu: () => gpu,
-            canvas: () => $canvas,
-            enable,
-            disable,
-            toggle,
-            isEnabled: () => isEnabled,
-            isInitialized: () => isInitialized,
-            // Comparison mode methods
-            enableCompare: () => {
-                option.compare = true;
-                setStyles($compareDivider, { display: 'block' });
-                updateDividerPosition(comparePosition);
-            },
-            disableCompare: () => {
-                option.compare = false;
-                setStyles($compareDivider, { display: 'none' });
-                setStyles($canvas, { clipPath: 'none' });
-            },
-            toggleCompare: () => {
-                if (option.compare) {
-                    setStyles($compareDivider, { display: 'none' });
-                    setStyles($canvas, { clipPath: 'none' });
-                    option.compare = false;
-                } else {
-                    option.compare = true;
-                    setStyles($compareDivider, { display: 'block' });
-                    updateDividerPosition(comparePosition);
-                }
-            },
-            setComparePosition: (pos) => {
-                updateDividerPosition(pos);
-            },
-            getComparePosition: () => comparePosition,
-            isComparing: () => option.compare,
-            update: async (newOption) => {
-                // Update weights and networkName (requires re-initialization)
-                if ((newOption.weights !== undefined && newOption.weights !== option.weights) ||
-                    (newOption.networkName !== undefined && newOption.networkName !== option.networkName)) {
-                    // Update option values
-                    if (newOption.weights !== undefined) {
-                        option.weights = newOption.weights;
-                    }
-                    if (newOption.networkName !== undefined) {
-                        option.networkName = newOption.networkName;
-                    }
-                    // Mark as uninitialized to reload with new config
-                    isInitialized = false;
-                    // Reinitialize if enabled
-                    if (isEnabled) {
-                        await initWebSR();
-                    }
-                }
-
-                // Update scale factor
-                if (newOption.scale !== undefined && newOption.scale !== option.scale) {
-                    option.scale = newOption.scale;
-                    if ($canvas) {
-                        const { displayWidth, displayHeight } = calcCanvasSize();
-                        $canvas.width = displayWidth * option.scale;
-                        $canvas.height = displayHeight * option.scale;
-                        setStyles($canvas, {
-                            width: displayWidth + 'px',
-                            height: displayHeight + 'px',
-                        });
-                    }
-                }
-            },
+            name: "artplayerPluginWebsr",
         };
     };
 }
 
-if (typeof window !== 'undefined') {
+if (typeof window !== "undefined") {
     window.artplayerPluginWebsr = artplayerPluginWebsr;
 }