Refactor code structure for improved readability and maintainability

Remove debugging border from the websr plugin's styling

Enhance canvas sizing logic in artplayer-plugin-websr

- Updated canvas positioning to center it within the player.
- Introduced a new function to calculate canvas size based on the video aspect ratio.
- Adjusted canvas dimensions during initialization and on resize events to maintain aspect ratio.
- Ensured canvas styles are updated to reflect the calculated dimensions.

feat: add comparison mode to artplayer-plugin-websr

- Updated README.md to reflect new comparison feature and simplified content.
- Modified package.json to remove unnecessary keywords.
- Enhanced index.js to implement comparison functionality, allowing users to compare original and upscaled video.
- Added new methods for enabling, disabling, and toggling comparison mode, as well as setting and getting the comparison position.
- Updated TypeScript definitions to include new comparison options and methods.

packages/artplayer-plugin-websr/types/artplayer-plugin-websr.d.ts

@@ -0,0 +1,94 @@
+import type Artplayer from 'artplayer';
+
+interface Option {
+    /**
+     * Upscale factor
+     * @default 2
+     */
+    scale?: number;
+    /**
+     * Network name for upscaling (required)
+     * e.g., 'anime4k/cnn-2x-m-an'
+     */
+    networkName: string;
+    /**
+     * Weights for the neural network (required)
+     * Can be a URL string or a pre-loaded weights object
+     * e.g., '/path/to/weights.json' or { layers: [...] }
+     */
+    weights: string | object;
+    /**
+     * Enable comparison mode
+     * @default false
+     */
+    compare?: boolean;
+}
+
+interface Result {
+    name: 'artplayerPluginWebsr';
+    /**
+     * Get WebSR instance
+     */
+    websr: () => any;
+    /**
+     * Get GPU context
+     */
+    gpu: () => any;
+    /**
+     * Get canvas element
+     */
+    canvas: () => HTMLCanvasElement;
+    /**
+     * Enable WebSR upscaling
+     */
+    enable: () => Promise<void>;
+    /**
+     * Disable WebSR upscaling
+     */
+    disable: () => void;
+    /**
+     * Toggle WebSR upscaling
+     */
+    toggle: () => Promise<void>;
+    /**
+     * Check if WebSR is enabled
+     */
+    isEnabled: () => boolean;
+    /**
+     * Check if WebSR is initialized
+     */
+    isInitialized: () => boolean;
+    /**
+     * Update options at runtime
+     * Supported options: enabled, weights, networkName, scale
+     */
+    update: (option: Partial<Option>) => Promise<void>;
+    /**
+     * Enable comparison mode
+     */
+    enableCompare: () => void;
+    /**
+     * Disable comparison mode
+     */
+    disableCompare: () => void;
+    /**
+     * Toggle comparison mode
+     */
+    toggleCompare: () => void;
+    /**
+     * Set comparison split position (0-1)
+     */
+    setComparePosition: (pos: number) => void;
+    /**
+     * Get current comparison split position (0-1)
+     */
+    getComparePosition: () => number;
+    /**
+     * Check if comparison mode is enabled
+     */
+    isComparing: () => boolean;
+}
+
+declare const artplayerPluginWebsr: (option?: Option) => (art: Artplayer) => Result;
+
+export default artplayerPluginWebsr