video-background-removal / assets /index-DG-aHmpJ.js
ibelem's picture
Upload 9 files
8a7706c verified
import*as u from"https://ibelem.github.io/transformersjs-dists/3.7.3_1.23.0-dev.20250906/transformers.js";(function(){const s=document.createElement("link").relList;if(s&&s.supports&&s.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const n of e)if(n.type==="childList")for(const c of n.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&i(c)}).observe(document,{childList:!0,subtree:!0});function a(e){const n={};return e.integrity&&(n.integrity=e.integrity),e.referrerPolicy&&(n.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?n.credentials="include":e.crossOrigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function i(e){if(e.ep)return;e.ep=!0;const n=a(e);fetch(e.href,n)}})();u.env.backends.onnx.wasm.proxy=!1;u.env.backends.onnx.wasm.simd=!0;u.env.backends.onnx.wasm.numThreads=1;u.env.backends.onnx.wasm.wasmPaths="https://ibelem.github.io/transformersjs-dists/3.7.3_1.23.0-dev.20250906/";const S=document.getElementById("device"),g=document.getElementById("status"),x=document.getElementById("container"),h=document.getElementById("canvas"),p=document.getElementById("output-canvas"),o=document.getElementById("video"),v=document.getElementById("size"),B=document.getElementById("size-value"),I=document.getElementById("scale"),F=document.getElementById("scale-value");function D(t,s){o.width=p.width=h.width=Math.round(t),o.height=p.height=h.height=Math.round(s)}g.textContent="Loading model...";function T(t,s){const a="webnn-gpu",i="fp16",e=["webnn-gpu","webnn-cpu","webnn-npu"],n=["fp16","fp32","int8"],c=(t||a).toLowerCase(),O=s&&n.includes(s.toLowerCase())?s.toLowerCase():i,P=e.includes(c)?{freeDimensionOverrides:{batch_size:1,height:256,width:320},logSeverityLevel:0}:{logSeverityLevel:0};return{device:c,dtype:O,sessionOptions:P}}const L=new URLSearchParams(window.location.search);let{device:l,dtype:U,sessionOptions:W}=T(L.get("device"),L.get("dtype")),r="WebNN GPU";switch(l){case"webgpu":r="WebGPU";break;case"webnn-gpu":r="WebNN GPU";break;case"webnn-cpu":r="WebNN CPU";break;case"webnn-npu":r="WebNN NPU";break;default:r="WebNN GPU"}S.textContent=r;["webgpu","webnn-gpu","webnn-cpu","webnn-npu"].includes(l)||(g.textContent=`Unsupported device ${l}. Falling back to WebNN GPU.`,l="webnn-gpu");const k="Xenova/modnet";let b;try{b=await u.pipeline("background-removal",k,{device:l,dtype:U,session_options:W})}catch(t){throw g.textContent=t.message,alert(t.message),t}let f=256;b.processor.feature_extractor.size={shortest_edge:f};v.addEventListener("input",()=>{f=Number(v.value),b.processor.feature_extractor.size={shortest_edge:f},B.textContent=f});v.disabled=!1;["webnn-gpu","webnn-cpu","webnn-npu"].includes(l)&&(v.disabled=!0);let d=.5;I.addEventListener("input",()=>{d=Number(I.value),D(o.videoWidth*d,o.videoHeight*d),F.textContent=d});I.disabled=!1;g.textContent="Ready";let w=!1,E;const C=h.getContext("2d",{willReadFrequently:!0}),z=p.getContext("2d",{willReadFrequently:!0}),N=document.getElementById("show-video-btn");let m=!1;function y(t){t?(o.style.display="block",o.style.width="100%",o.style.height="100%",p.style.display="none"):(o.style.display="none",p.style.display="block")}N.addEventListener("pointerdown",()=>{w&&(m=!0,y(!0))});N.addEventListener("pointerup",()=>{m&&(m=!1,y(!1))});N.addEventListener("pointerleave",()=>{m&&(m=!1,y(!1))});y(!1);function _(){const{width:t,height:s}=h;w||(w=!0,(async function(){C.drawImage(o,0,0,t,s);const a=C.getImageData(0,0,t,s),i=new u.RawImage(a.data,t,s,4),[e]=await b(i);if(z.putImageData(new ImageData(e.data,e.width,e.height),0,0),E!==void 0){const n=1e3/(performance.now()-E);g.textContent=`FPS: ${n.toFixed(2)}`}E=performance.now(),w=!1})()),window.requestAnimationFrame(_)}navigator.mediaDevices.getUserMedia({video:!0}).then(t=>{o.srcObject=t,o.play();const s=t.getVideoTracks()[0],{width:a,height:i}=s.getSettings();D(a*d,i*d);const e=a/i,[n,c]=e>720/405?[720,720/e]:[405*e,405];x.style.width=`${n}px`,x.style.height=`${c}px`,setTimeout(_,50)}).catch(t=>{alert(t)});