mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-23 22:01:20 -08:00
fix(build): update cpy options to use flat for output directory
This commit is contained in:
Harvey Zhao committed
1 parent
699bf09577
commit
3bf0707faa
95 files changed
+29
-90819
No files matched your search
@@ -4,724 +4,4 @@
|
||||
* (c) 2017-2026 Harvey Zhao
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
var __defProp = Object.defineProperty;
|
||||
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
||||
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
||||
const _Upscaler = class _Upscaler {
|
||||
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.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.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 = /* @__PURE__ */ new Map();
|
||||
this.workerInstance = null;
|
||||
this.messageHandlers = {};
|
||||
this.progressCallback = null;
|
||||
this.processingType = null;
|
||||
this.realtimeLoopId = null;
|
||||
this.realtimeState = null;
|
||||
this.init();
|
||||
}
|
||||
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 TypeError("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;
|
||||
}
|
||||
let onLoaded, onError;
|
||||
const cleanup = () => {
|
||||
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);
|
||||
});
|
||||
};
|
||||
await ensureMetadata();
|
||||
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;
|
||||
if (typeof canvasElement.transferControlToOffscreen !== "function") {
|
||||
throw new TypeError("OffscreenCanvas is not supported in this environment");
|
||||
}
|
||||
offscreen = canvasElement.transferControlToOffscreen();
|
||||
canvasElement._upscalerTransferred = true;
|
||||
}
|
||||
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;
|
||||
}
|
||||
const initPayload = {
|
||||
cmd: "realtimeInit",
|
||||
data: {
|
||||
upscaled: firstInit ? offscreen : null,
|
||||
resolution: {
|
||||
width,
|
||||
height,
|
||||
scale,
|
||||
outputWidth: width * scale,
|
||||
outputHeight: height * scale
|
||||
},
|
||||
network_name: network.name,
|
||||
weights
|
||||
}
|
||||
};
|
||||
if (firstInit && offscreen) {
|
||||
this.getWorker().postMessage(initPayload, [offscreen]);
|
||||
} else {
|
||||
this.getWorker().postMessage(initPayload);
|
||||
}
|
||||
this.realtimeState = {
|
||||
running: true,
|
||||
video: videoElement,
|
||||
canvas: canvasElement,
|
||||
scale,
|
||||
busy: false,
|
||||
frameIndex: 0,
|
||||
captureCanvas,
|
||||
captureCtx
|
||||
};
|
||||
const loop = async () => {
|
||||
if (!this.realtimeState || !this.realtimeState.running)
|
||||
return;
|
||||
const state = this.realtimeState;
|
||||
const v = state.video;
|
||||
const haveCurrentData = v.HAVE_CURRENT_DATA || 2;
|
||||
if (!v.paused && !v.ended && !state.busy && v.readyState >= haveCurrentData && v.videoWidth > 0 && v.videoHeight > 0) {
|
||||
state.busy = true;
|
||||
try {
|
||||
const captureCanvas2 = state.captureCanvas;
|
||||
const captureCtx2 = state.captureCtx;
|
||||
if (!captureCanvas2 || !captureCtx2) {
|
||||
throw new Error("Missing capture canvas");
|
||||
}
|
||||
captureCtx2.drawImage(v, 0, 0, captureCanvas2.width, captureCanvas2.height);
|
||||
const frame = await createImageBitmap(captureCanvas2);
|
||||
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();
|
||||
}
|
||||
};
|
||||
__publicField(_Upscaler, "DEFAULT_TIMEOUTS", { IMAGE: 3e5, VIDEO: 36e5, METADATA: 1e4 });
|
||||
__publicField(_Upscaler, "DEFAULT_DELAYS", { INIT: 500, NETWORK: 300 });
|
||||
let Upscaler = _Upscaler;
|
||||
function artplayerPluginWebsr(option = {
|
||||
networkSize: "medium",
|
||||
compare: false,
|
||||
weightsBaseUrl: "/weights",
|
||||
workerUrl: "/worker/main.js",
|
||||
videoScale: 2
|
||||
}) {
|
||||
return (art) => {
|
||||
const { $video, $player } = art.template;
|
||||
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";
|
||||
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 displayWidth2 = containerWidth;
|
||||
let displayHeight2 = containerHeight;
|
||||
if (containerWidth / containerHeight > aspectRatio) {
|
||||
displayWidth2 = containerHeight * aspectRatio;
|
||||
} else {
|
||||
displayHeight2 = containerWidth / aspectRatio;
|
||||
}
|
||||
return { displayWidth: displayWidth2, displayHeight: displayHeight2 };
|
||||
}
|
||||
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
|
||||
});
|
||||
let realtimeStarted = false;
|
||||
async function startRealtime() {
|
||||
if (realtimeStarted)
|
||||
return;
|
||||
realtimeStarted = true;
|
||||
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
|
||||
);
|
||||
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`;
|
||||
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)";
|
||||
if (compareEnabled) {
|
||||
$player.appendChild($handler);
|
||||
$handler.addEventListener("mousedown", handleMouseDown);
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
document.addEventListener("mouseup", handleMouseUp);
|
||||
updateCompareMask();
|
||||
}
|
||||
function updateCompareMask() {
|
||||
if (compareEnabled) {
|
||||
const { displayWidth: displayWidth2, displayHeight: displayHeight2 } = 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 - displayWidth2) / 2;
|
||||
const canvasTop = (containerHeight - displayHeight2) / 2;
|
||||
const handlerX = canvasLeft + displayWidth2 * comparePosition / 100;
|
||||
$handler.style.top = `${canvasTop}px`;
|
||||
$handler.style.left = `${handlerX}px`;
|
||||
$handler.style.height = `${displayHeight2}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: displayWidth2 } = calcCanvasSize();
|
||||
const containerWidth = $player.offsetWidth || 640;
|
||||
const canvasLeft = (containerWidth - displayWidth2) / 2;
|
||||
const x = e.clientX - rect.left;
|
||||
const relativeX = x - canvasLeft;
|
||||
comparePosition = relativeX / displayWidth2 * 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: displayWidth2, displayHeight: displayHeight2 } = calcCanvasSize();
|
||||
$canvas.style.width = `${displayWidth2}px`;
|
||||
$canvas.style.height = `${displayHeight2}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
|
||||
};
|
||||
};
|
||||
}
|
||||
if (typeof window !== "undefined") {
|
||||
window.artplayerPluginWebsr = artplayerPluginWebsr;
|
||||
}
|
||||
export {
|
||||
artplayerPluginWebsr as default
|
||||
};
|
||||
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
|
||||
Reference in new issue
Block a user