https://www.versely.studio/_next/static/chunks/7241.7159f80329407929.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7241],{57241:(e,t,r)=>{r.r(t),r.d(t,{default:()=>z});var a=r(95155),n=r(12115),i=r(9036),o=r(87444),l=r(77716),s=r(34416),d=r(82214),c=r(61622);let u={person:{id:"Xenova/modnet",revision:"fa2fa546052fba4c08921230a26cc69a333fca12",file:"onnx/model.onnx",bytes:0x18b0780,licence:"Apache-2.0",name:"MODNet",inputName:"input",mean:[.5,.5,.5],std:[.5,.5,.5],dtype:"fp32",logits:!1,webgpuOnly:!1},subject:{id:"studioludens/birefnet-lite-512",revision:"4a3c40c36c94093cc1e724d9ea428b8fa4b57dc7",file:"onnx/model_fp16.onnx",bytes:0x5dec134,licence:"MIT",name:"BiRefNet-lite",inputName:"input_image",mean:[.485,.456,.406],std:[.229,.224,.225],dtype:"fp16",logits:!0,webgpuOnly:!0}},h=e=>Math.round(u[e].bytes/1048576*10)/10,m=e=>Math.max(2,2*Math.round(e/2));function f(e,t){if(!(e>0)||!(t>0))return{width:0,height:0,scaled:!1};let r=Math.min(1,1920/Math.max(e,t),1080/Math.min(e,t));return{width:m(e*r),height:m(t*r),scaled:r<1}}function p(e,t,r,a){if("subject"===e)return{width:512,height:512};let n="high"===t?384:256,i=e=>Math.max(32,32*Math.round(e/32));return r>0&&a>0?r>=a?{width:i(r/a*n),height:n}:{width:n,height:i(a/r*n)}:{width:n,height:n}}let g=[23.976,24,25,29.97,30,48,50,59.94,60],b={off:0,light:.5,strong:.85};class w{get(e){let t=Math.max(0,Math.min(this.masks.length-1,e));if("off"===this.smoothing)return this.masks[t];for((t<this.idx||!this.buf)&&(this.buf=new Uint8Array(this.masks[0]),this.tmp=new Uint8Array(this.buf.length),this.idx=0);this.idx<t;){this.idx++,function(e,t,r,a){var n;let i=t.length,o=a&&a.length===i?a:new Uint8Array(i),l=null!=(n=b[r])?n:0;if(l<=0||!e||e.length!==i)return o.set(t);let s=1-.7*l;for(let r=0;r<i;r++){let a=e[r],n=t[r]-a,i=n<0?-n:n,l=s+(1-s)*(i<=24?0:i>=96?1:(i-24)/72);o[r]=Math.round(a+l*n)}}(this.buf,this.masks[this.idx],this.smoothing,this.tmp);let e=this.buf;this.buf=this.tmp,this.tmp=e}return this.buf}constructor(e,t){this.masks=e,this.smoothing=t,this.idx=-1,this.buf=null,this.tmp=null}}function v(e){let t=new Uint8Array(256);for(let r=0;r<256;r++){if("soft"===e){t[r]=r;continue}let a=Math.max(0,Math.min(1,(r/255-.3)/.4));t[r]=Math.round(a*a*(3-2*a)*255)}return t}let x={mp4:["video/mp4;codecs=avc1.640028,mp4a.40.2","video/mp4;codecs=avc1.4d0028,mp4a.40.2","video/mp4;codecs=avc1.42E01E,mp4a.40.2","video/mp4;codecs=avc1,mp4a","video/mp4"],webm:["video/webm;codecs=vp9,opus","video/webm;codecs=vp8,opus","video/webm"]};function y(e,t){for(let r of x[e])try{if(t(r))return r}catch(e){}return null}async function k(){try{if("undefined"==typeof navigator||!("gpu"in navigator)||!navigator.gpu)return!1;return!!await navigator.gpu.requestAdapter()}catch(e){return!1}}let j=new Map;function M(){return new DOMException("Stopped.","AbortError")}function N(e,t,a,n){let i="".concat(e,":").concat(t),o=j.get(i);if(o)return o;let l=u[e],s=(async()=>{let i=await Promise.all([r.e(4803),r.e(4126),r.e(5376),r.e(3928)]).then(r.bind(r,49911));if(null==n?void 0:n.aborted)throw M();let o=new Map,s=0;null==a||a({fraction:null,message:"Loading ".concat(l.name," in this browser…")});let d=await i.AutoModel.from_pretrained(l.id,{revision:l.revision,device:t,dtype:l.dtype,progress_callback:t=>{var r,n,i;if(!(null==t?void 0:t.file))return;let d=o.get(t.file),c=t.file.endsWith(".onnx")?l.bytes:4096;if("initiate"!==t.status||d)if("progress"===t.status)o.set(t.file,{loaded:Math.max(null!=(r=null==d?void 0:d.loaded)?r:0,null!=(n=t.loaded)?n:0),total:t.total&&t.total>0?t.total:c});else{if("done"!==t.status)return;let e=null!=(i=null==d?void 0:d.total)?i:c;o.set(t.file,{loaded:e,total:e})}else o.set(t.file,{loaded:0,total:c});let u=0,m=0,f=!1;for(let[e,t]of o)u+=Math.min(t.loaded,t.total),m+=t.total,e.endsWith(".onnx")&&(f=!0);f||(m+=l.bytes);let p=m>0?u/m:0;p>s&&(s=p,null==a||a({fraction:Math.min(1,p),message:"Downloading ".concat(l.name," (").concat(h(e)," MB, first run only)…")}))}});if(null==n?void 0:n.aborted)throw M();let{Tensor:c}=i,u=null;return{kind:e,provider:t,async run(e,t,r){var a,n,i,o,s;u=function(e,t,r,a,n,i){let o=t*r,l=i&&i.length===3*o?i:new Float32Array(3*o),s=1/(255*n[0]),d=1/(255*n[1]),c=1/(255*n[2]),u=a[0]/n[0],h=a[1]/n[1],m=a[2]/n[2];for(let t=0,r=0;t<o;t++,r+=4)l[t]=e[r]*s-u,l[o+t]=e[r+1]*d-h,l[2*o+t]=e[r+2]*c-m;return l}(e,t,r,l.mean,l.std,null!=u?u:void 0);let h=new c("float32",new Float32Array(u),[1,3,r,t]),m=await d({[l.inputName]:h}),f=null!=(i=null!=(n=null!=(a=m.output)?a:m.logits)?n:m.output_image)?i:Object.values(m)[0];if(!(null==f?void 0:f.data)||!(null==f?void 0:f.dims))throw Error("The model returned no mask.");let p=f.type&&"float32"!==f.type&&"function"==typeof f.to?f.to("float32"):f,g=p.dims,b=g[g.length-2],w=g[g.length-1],v=p.data,x=l.logits&&!m.output_image,y=function(e,t){if(!e.length)return{valid:!1,hasForeground:!1};let r=1/0,a=-1/0;for(let n=0;n<e.length;n++){let i=e[n];if(!Number.isFinite(i))return{valid:!1,hasForeground:!1};t&&(i=1/(1+Math.exp(-i))),i<r&&(r=i),i>a&&(a=i)}return{valid:!0,hasForeground:a>=.05&&a-r>=.005}}(v,x),k=function(e,t,r){let a=e.length,n=new Uint8Array(a);for(let r=0;r<a;r++){let a=e[r];t&&(a=1/(1+Math.exp(-a))),a>0?a>1&&(a=1):a=0,n[r]=Math.round(255*a)}return n}(v,x);try{null==(o=p.dispose)||o.call(p),p!==f&&(null==(s=f.dispose)||s.call(f))}catch(e){}return{mask:k,width:w,height:b,inspection:y}}}})();return j.set(i,s),s.catch(()=>j.delete(i)),s}function E(e,t,r){return new Promise((a,n)=>{if(null==r?void 0:r.aborted)return n(M());if(1e-4>Math.abs(e.currentTime-t)&&e.readyState>=2)return a();let i=t=>{e.removeEventListener("seeked",o),e.removeEventListener("error",l),null==r||r.removeEventListener("abort",s),window.clearTimeout(d),t?n(t):a()},o=()=>i(),l=()=>i(Error("The browser could not read a frame from this video.")),s=()=>i(M()),d=window.setTimeout(()=>i(Error("The browser stopped responding while reading frames. Try an MP4 (H.264) file.")),15e3);e.addEventListener("seeked",o),e.addEventListener("error",l),null==r||r.addEventListener("abort",s),e.currentTime=t})}async function C(e){if(Number.isFinite(e.duration)&&e.duration>0)return e.duration;await new Promise(t=>{let r=()=>{window.clearTimeout(n),e.removeEventListener("durationchange",a),t()},a=()=>{Number.isFinite(e.duration)&&r()},n=window.setTimeout(r,5e3);e.addEventListener("durationchange",a),e.currentTime=1e101});let t=Number.isFinite(e.duration)?e.duration:0;try{await E(e,0)}catch(e){}return t}async function S(e){if("function"!=typeof e.requestVideoFrameCallback)return null;let t=e.muted;e.muted=!0;let r=[];try{await E(e,0),await new Promise(t=>{let a=0,n=()=>{window.clearTimeout(i);try{e.cancelVideoFrameCallback(a)}catch(e){}t()},i=window.setTimeout(n,1500),o=(t,i)=>{if(r.push(i.mediaTime),r.length>=14)return n();a=e.requestVideoFrameCallback(o)};a=e.requestVideoFrameCallback(o),e.play().catch(n)})}catch(e){}finally{e.pause(),e.muted=t}let a=[];for(let e=1;e<r.length;e++)a.push(r[e]-r[e-1]);let n=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:30,r=e.filter(e=>Number.isFinite(e)&&e>1/240&&e<1).sort((e,t)=>

1e-t);if(r.length<3)return t;let a=1/r[Math.floor(r.length/2)],n=0,i=1/0;for(let e of g){let t=Math.abs(a-e)/e;t<i&&(n=e,i=t)}return i<.03?n:Math.min(120,Math.max(1,Math.round(100*a)/100))}(a,0);return n>0?n:null}class T extends Error{}class _ extends Error{}async function F(e){var t;let{video:r,canvas:a,paint:n,signal:i}=e;if("undefined"==typeof MediaRecorder||"function"!=typeof a.captureStream)throw Error("This browser cannot record a canvas (no MediaRecorder or captureStream). Try Chrome, Edge or Firefox.");let o=e.format,l=y(o,e=>MediaRecorder.isTypeSupported(e));l||(l=y(o="mp4"===o?"webm":"mp4",e=>MediaRecorder.isTypeSupported(e)));let s="function"==typeof r.requestVideoFrameCallback;r.pause(),await E(r,0,i),n(r.currentTime);let d=s?a.captureStream():a.captureStream(e.fps),c=function(e){try{if("function"==typeof e.captureStream)return e.captureStream();if("function"==typeof e.mozCaptureStream)return e.mozCaptureStream()}catch(e){}return null}(r),u=c?c.getAudioTracks():[],h=new MediaStream([...d.getVideoTracks(),...u]),m=new MediaRecorder(h,{...l?{mimeType:l}:{},videoBitsPerSecond:(t=a.width,Math.round(Math.min(12e6,Math.max(25e5,t*a.height*Math.max(e.fps,24)*.12))))}),f=[];m.ondataavailable=e=>{e.data&&e.data.size>0&&f.push(e.data)};let p=new Promise(e=>m.onstop=()=>e()),g=!0,b=!1,w=0,v=0,x=()=>void 0,k=Number.isFinite(r.duration)?r.duration:0,j=()=>{"hidden"===document.visibilityState&&(b=!0,r.pause(),x())};document.addEventListener("visibilitychange",j);let N=()=>{if(g=!1,cancelAnimationFrame(w),s&&v)try{r.cancelVideoFrameCallback(v)}catch(e){}document.removeEventListener("visibilitychange",j),r.pause()};r.muted=!1,r.volume=1,m.start(250);try{await r.play()}catch(e){if(N(),"inactive"!==m.state&&m.stop(),await p,h.getTracks().forEach(e=>e.stop()),e instanceof DOMException&&"NotAllowedError"===e.name)throw new T("The browser needs a click before it will play the clip with sound.");throw Error("The clip could not be played back for recording.")}if(await new Promise(t=>{let a=!1,o=()=>{a||(a=!0,window.clearTimeout(l),r.removeEventListener("ended",o),i.removeEventListener("abort",o),t())};x=o;let l=window.setTimeout(o,(k+15)*1e3);if(r.addEventListener("ended",o),i.addEventListener("abort",o),s){let t=(a,i)=>{var l;if(g){if(n(i.mediaTime),null==(l=e.onProgress)||l.call(e,k?Math.min(1,i.mediaTime/k):0),b)return o();v=r.requestVideoFrameCallback(t)}};v=r.requestVideoFrameCallback(t)}else{let t=()=>{var a;if(g){if(n(r.currentTime),null==(a=e.onProgress)||a.call(e,k?Math.min(1,r.currentTime/k):0),b)return o();w=requestAnimationFrame(t)}};w=requestAnimationFrame(t)}b&&o()}),N(),"inactive"!==m.state&&m.stop(),await p,h.getTracks().forEach(e=>e.stop()),null==c||c.getTracks().forEach(e=>e.stop()),i.aborted)throw M();if(b)throw new _("This tab went into the background, which stops the browser painting frames, so the recording was discarded. Keep the tab in front and export again; the analysis is kept.");if(!f.length)throw Error("The recorder produced no data in this browser. Try the other format, or Chrome.");let C=f[0].type||l||"video/webm";return{blob:new Blob(f,{type:C}),mime:C,ext:C.includes("mp4")?"mp4":"webm",audio:u.length>0}}let P="#00b140",R="inline-flex h-10 items-center justify-center rounded-lg border border-border/70 bg-background px-4 text-sm font-semibold transition-colors hover:border-primary/50 disabled:opacity-50",L="inline-flex h-11 items-center justify-center rounded-lg gradient-primary px-5 text-sm font-semibold text-primary-foreground shadow-lg shadow-primary/25 disabled:opacity-60";function U(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=e.getContext("2d",t?{willReadFrequently:!0}:void 0);if(!r)throw Error("This browser could not create a drawing canvas.");return r}function A(e,t){return!!(null==t?void 0:t.aborted)||e instanceof DOMException&&"AbortError"===e.name}class I{draw(e,t,r,a,n,i){let o=e.canvas.width,l=e.canvas.height;i.edges!==this.lutMode&&(this.lut=v(i.edges),this.lutMode=i.edges),this.mask.width===a&&this.mask.height===n&&this.maskData||(this.mask.width=a,this.mask.height=n,this.maskData=new ImageData(a,n));let s=this.maskData.data,d=this.lut;for(let e=0,t=3;e<r.length;e++,t+=4)s[t]=d[r[e]];U(this.mask).putImageData(this.maskData,0,0),(this.fg.width!==o||this.fg.height!==l)&&(this.fg.width=o,this.fg.height=l);let u=U(this.fg);u.globalCompositeOperation="source-over",u.clearRect(0,0,o,l),u.drawImage(t,0,0,o,l),u.globalCompositeOperation="destination-in",u.imageSmoothingEnabled=!0,u.imageSmoothingQuality="high",u.drawImage(this.mask,0,0,o,l),u.globalCompositeOperation="source-over",e.globalCompositeOperation="source-over","colour"===i.mode?(e.fillStyle=i.colour,e.fillRect(0,0,o,l)):"image"===i.mode&&i.image?(e.fillStyle="#000",e.fillRect(0,0,o,l),(0,c.nk)(e,i.image,i.image.naturalWi

1dth,i.image.naturalHeight,o,l,"cover")):"blur"===i.mode?this.drawBlur(e,t,o,l,i.blur):(e.fillStyle="#000",e.fillRect(0,0,o,l)),e.drawImage(this.fg,0,0)}drawBlur(e,t,r,a,n){let i="string"==typeof U(this.small).filter,o=i?4:Math.max(6,Math.round(n/2)),l=Math.max(2,Math.ceil(r/o)),s=Math.max(2,Math.ceil(a/o));(this.small.width!==l||this.small.height!==s)&&(this.small.width=l,this.small.height=s);let d=U(this.small);if(d.imageSmoothingEnabled=!0,d.imageSmoothingQuality="high",i){let e=n/o,r=Math.ceil(2*e);d.filter="blur(".concat(e,"px)"),d.drawImage(t,-r,-r,l+2*r,s+2*r),d.filter="none"}else d.drawImage(t,0,0,l,s);e.imageSmoothingEnabled=!0,e.imageSmoothingQuality="high",e.drawImage(this.small,0,0,r,a)}constructor(){this.mask=document.createElement("canvas"),this.fg=document.createElement("canvas"),this.small=document.createElement("canvas"),this.maskData=null,this.lut=v("soft"),this.lutMode="soft"}}function z(){var e;let[t,r]=(0,n.useState)(null),[c,m]=(0,n.useState)(null),[g,b]=(0,n.useState)(null),[v,x]=(0,n.useState)(null),[j,M]=(0,n.useState)(null),[z,O]=(0,n.useState)(null),[W,D]=(0,n.useState)(null),[B,q]=(0,n.useState)([]),[G,H]=(0,n.useState)("person"),[V,Q]=(0,n.useState)("standard"),[Y,$]=(0,n.useState)("full"),[J,K]=(0,n.useState)("colour"),[X,Z]=(0,n.useState)(P),[ee,et]=(0,n.useState)(24),[er,ea]=(0,n.useState)(null),[en,ei]=(0,n.useState)(null),[eo,el]=(0,n.use

1State)("light"),[es,ed]=(0,n.useState)("soft"),[ec,eu]=(0,n.useState)("webm"),[eh,em]=(0,n.useState)("idle"),[ef,ep]=(0,n.useState)(null),[eg,eb]=(0,n.useState)(""),[ew,ev]=(0,n.useState)(!1),[ex,ey]=(0,n.useState)(null),[ek,ej]=(0,n.useState)(null),eM=(0,n.useRef)(null),eN=(0,n.useRef)(null),eE=(0,n.useRef)(null),eC=(0,n.useRef)(null),eS=(0,n.useRef)(null),eT=(0,n.useRef)(null),e_=(0,n.useRef)(!1),eF="idle"!==eh&&"needs-click"!==eh,eP={mode:J,colour:X,blur:ee,image:er,edges:es},eR=(0,n.useRef)(eP);eR.current=eP;let eL=t?"".concat(t.name,":").concat(t.size,":").concat(t.lastModified,":").concat(G,":").concat(V,":").concat(Y):"";(0,n.useEffect)(()=>{let e=!0;if(k().then(t=>{e&&(D(t),t||$("half"))}),"undefined"!=typeof MediaRecorder){let e=e=>MediaRecorder.isTypeSupported(e),t=[];y("mp4",e)&&t.push("mp4"),y("webm",e)&&t.push("webm"),q(t),t.length&&eu(t[0])}return()=>{e=!1}},[]),(0,n.useEffect)(()=>()=>{var e;return null==(e=eE.current)?void 0:e.abort()},[]),(0,n.useEffect)(()=>()=>void(c&&URL.revokeObjectURL(c)),[c]),(0,n.useEffect)(()=>()=>void(ek&&URL.revokeObjectURL(ek.url)),[ek]),(0,n.useEffect)(()=>{!1===W&&"subject"===G&&H("person")},[W,G]),(0,n.useEffect)(()=>{eS.current=null,ev(!1)},[G,V]);let eU=()=>{var t;return null!=(t=(e=eC).current)?t:e.current=new I};async function eA(e){var t,a,n;let i=e[0];if(!i)return;null==(t=eE.current)||t.abort(),M(null),O(null);let o=(0,s.vH)(i,"video");if(!o.ok)return void M(null!=(a=o.error)?a:"That file can't be processed here.");O(null!=(n=o.warning)?n:null),ej(null),b(null),x(null),ev(!1),ey(null),eS.current=null,eT.current=null,em("idle"),r(i),m(URL.createObjectURL(i))}(0,n.useEffect)(()=>{let e=eM.current;if(!e||!c)return;let t=!0,r=async()=>{let r=e.videoWidth,a=e.videoHeight;if(!r||!a)return void M("This browser can't decode the picture in that file. Try an MP4 (H.264) or WebM export.");let n=await C(e);if(!t)return;if(!(n>0))return void M("This browser couldn't read how long that video is. Re-export it as MP4 (H.264) and try again.");n>20.5&&M("This clip is ".concat(Math.round(n)," seconds long. The free tool handles up to ").concat(20," seconds, because every frame is analysed on your device. Trim it first with the free video trimmer."));let i=f(r,a);eN.current&&(eN.current.width=i.width,eN.current.height=i.height);let o=await S(e);if(t){x(o);try{await E(e,.001),t&&eN.current&&U(eN.current).drawImage(e,0,0,i.width,i.height)}catch(e){}t&&b({duration:n,w:r,h:a})}},a=()=>M("This browser can't open that video. Try an MP4 (H.264) or WebM file.");return e.readyState>=1?r():e.addEventListener("loadedmetadata",r,{once:!0}),e.addEventListener("error",a,{once:!0}),()=>{t=!1,e.removeEventListener("loadedmetadata",r),e.removeEventListener("error",a)}},[c]);let eI=(0,n.useCallback)(e=>{ep(e.fraction),eb(e.message)},[]);async function ez(e,t,r,a){let n=(null!=W?W:await k())&&!e_.current;if("subject"===G&&!n)throw Error("Any-subject mode needs WebGPU, which this browser doesn't offer. Switch to People mode, which also runs without it.");let i=await N(G,n?"webgpu":"wasm",eI,a);eb("Checking the model on the first frame…"),ep(null);let o=await i.run(e,t,r);if("webgpu"===i.provider&&(!o.inspection.valid||!o.inspection.hasForeground))if("subject"===G){if(!o.inspection.valid)throw e_.current=!0,Error("Your graphics driver returned an unusable mask. People mode can run on the CPU instead.")}else{eb("Double-checking on the CPU path…");let n=await N(G,"wasm",eI,a),l=await n.run(e,t,r);o.inspection.valid&&(!l.inspection.hasForeground||o.inspection.hasForeground)||(e_.current=!0,i=n,o=l)}return{engine:i,first:o}}function eO(e,t,r,a){(a.width!==t||a.height!==r)&&(a.width=t,a.height=r);let n=U(a,!0);return n.drawImage(e,0,0,t,r),n.getImageData(0,0,t,r).data}let eW=(0,n.useCallback)(()=>{let e=eS.current,t=eN.current;e&&t&&eU().draw(U(t),e.frame,e.mask.mask,e.mask.width,e.mask.height,eR.current)},[]);async function eD(){let e=eM.current,t=eN.current;if(!e||!t||!g||eF)return;let r=new AbortController;eE.current=r,em("previewing"),M(null),ep(null),eb("Preparing the model…");try{let{width:a,height:n}=p(G,V,g.w,g.h);await E(e,.001,r.signal);let i=eO(e,a,n,document.createElement("canvas")),o=document.createElement("canvas");o.width=t.width,o.height=t.height,U(o).drawImage(e,0,0,o.width,o.height);let{engine:l,first:s}=await ez(i,a,n,r.signal);if(r.signal.aborted)return;eS.current={frame:o,mask:s},ev(!0),ey("".concat(u[G].name," via ").concat("webgpu"===l.provider?"WebGPU":"WASM (CPU)")),eW(),s.inspection.hasForeground||O("person"===G?"No person was found in the first frame. People mode is trained on people; for a product or a pet, try Any subject.":"No clear subject was found in the first frame.")}catch(e){A(e,r.signal)||M(e instanceof Error?e.message:"The preview failed on this device.")}finally{eE.current===r&&(eE.current=null),em("idle"),ep(null)}}async function eB(e){let t=eM.current,r=eN.current,{width:a,height:n}=p(G,V,g.w,g.h),i=function(e,t){let r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"full",a=Math.min(Math.max(1,t||30),30),n="half"===r?a/2:a,i=Math.max(1,Math.ceil(Math.max(0,e)*n-1e-6));return{sampleFps:n,count:i}}(g.duration,null!=v?v:30,Y),o=document.createElement("canvas"),l=Array(i.count),s=performance.now(),d=0,c=null,u=0,h=0,m=U(r);t.muted=!0,t.pause();for(let r=0;r<i.count;r++){var f,b,w,x;let s;if(e.aborted)throw new DOMException("Stopped.","AbortError");await E(t,(f=r,b=g.duration,Math.max(0,Math.min((f+.5)/i.sampleFps,Math.max(0,b-.001)))),e);let p=eO(t,a,n,o);if(c)s=await c.run(p,a,n);else{let t=await ez(p,a,n,e);c=t.engine,s=t.first,d=performance.now()}l[r]=s.mask,u=s.width,h=s.height;let v=r+1;(r%4==0||v===i.count)&&eU().draw(m,t,s.mask,u,h,eR.current);let y=(w=i.count,x=performance.now()-d,v<3?null:x/(v-1)*(w-v)/1e3);ep(v/i.count),eb("Analysing frame ".concat(v," of ").concat(i.count)+(null!=y?" \xb7 ".concat(!Number.isFinite(y)||y<0?"":y<5?"a few seconds":y<90?"about ".concat(5*Math.round(y/5)," s"):"about ".concat(Math.round(y/60)," min")," left, then a ").concat(Math.ceil(g.duration)," s recording pass"):""))}return{key:eL,masks:l,mw:u,mh:h,plan:i,provider:(null==c?void 0:c.provider)==="webgpu"?"WebGPU":"WASM (CPU)",seconds:(performance.now()-s)/1e3}}async function eq(e,r){var a;let n=eM.current,i=eN.current;em("rendering"),ep(0),eb("Recording the final clip in real time (with 

1sound). Keep this tab in front…");let o=new w(e.masks,eo),l=U(i),s=null!=v?v:30,c=await F({video:n,canvas:i,format:ec,fps:s,signal:r,paint:t=>{let r=function(e,t,r){let a=Math.round((e+.5/Math.max(1,t||r.sampleFps))*r.sampleFps-.5);return Math.max(0,Math.min(r.count-1,a))}(t,s,e.plan);eU().draw(l,n,o.get(r),e.mw,e.mh,eR.current)},onProgress:e=>ep(e)}),h="colour"===J?X.toLowerCase()===P?"green-screen":"colour":J;ej({url:URL.createObjectURL(c.blob),size:c.blob.size,ext:c.ext,audio:c.audio,name:"".concat(t.name.replace(/\.[^.]+$/,""),"-").concat("green-screen"===h?"green-screen":"new-background",".").concat(c.ext),note:"".concat(i.width,"\xd7").concat(i.height," \xb7 ").concat(v?"".concat(v," fps source"):"frame rate not measured"," \xb7 ").concat(c.ext.toUpperCase()," \xb7 ").concat(c.audio?"source audio kept":"no audio captured in this browser"," \xb7 ").concat(u[G].name," via ").concat(e.provider,", ").concat(e.plan.count," masks in ").concat(!Number.isFinite(a=e.seconds)||a<=0?"0 s":a<60?"".concat(Math.round(a)," s"):"".concat(Math.floor(a/60)," min ").concat(Math.round(a%60)," s"))}),(0,d.A5)("free_tool_video_background_remover",{seconds:Math.round(g.duration),masks:e.plan.count,model:G,engine:e.provider,background:h,format:c.ext})}async function eG(){if(!t||!g||eF)return;if(g.duration>20.5)return void M("This clip is ".concat(Math.round(g.duration)," seconds long. Trim it to ").concat(20," seconds or less first."));if("image"===J&&!er)return void M("Choose a background image first, or pick a colour or blur.");if(!B.length)return void M("This browser can't record video (no MediaRecorder). Try Chrome, Edge or Firefox on a laptop or desktop.");let e=new AbortController;eE.current=e,M(null),ej(null),ep(null);try{let t=eT.current;t&&t.key===eL||(eT.current=null,em("analysing"),eb("Preparing the model…"),eT.current=t=await eB(e.signal),ey("".concat(u[G].name," via ").concat(t.provider))),await eq(t,e.signal),em("idle")}catch(t){if(t instanceof T)return void em("needs-click");if(em("idle"),A(t,e.signal))return;t instanceof _?M(t.message):M(t instanceof Error?t.message:"The export failed on this device.")}finally{eE.current===e&&(eE.current=null),ep(null)}}(0,n.useEffect)(()=>{ew&&!eF&&eW()},[ew,eF,J,X,ee,er,es,eW]);let eH=!!eT.current&&eT.current.key===eL,eV=!!g&&g.duration>20.5,eQ=g?f(g.w,g.h):null;return(0,a.jsxs)("div",{className:"space-y-5",children:[(0,a.jsxs)("p",{className:"text-sm text-muted-foreground",children:["Clips up to ",20," seconds; anything above 1080p is scaled down to 1080p. Every frame is analysed on your device, which is slower than real time: with WebGPU, roughly one to three minutes for a 20-second clip on a recent laptop, and several times longer on the CPU fallback. The export then plays the clip once in real time to record it with its sound."]}),(0,a.jsx)(i.A,{accept:"video/mp4,video/webm,video/quicktime,video/*",label:t?"".concat(t.name," \xb7 ").concat((0,s.zi)(t.size)):"Drop a short video",hint:"MP4, MOV or WebM, up to ".concat(20," seconds. Processed in your browser. Nothing is uploaded."),onFiles:eA,disabled:eF}),!1===W&&(0,a.jsx)("p",{className:"rounded-lg bg-muted/50 p-3 text-sm text-muted-foreground",children:"This browser doesn't offer WebGPU, so the model runs on the CPU. It works, but expect several minutes for a short clip; masks are set to every other frame to halve the wait. Chrome or Edge on a recent laptop is much faster."}),z&&!j&&(0,a.jsx)("p",{className:"text-sm text-amber-500",children:z}),j&&(0,a.jsxs)("p",{role:"alert",className:"rounded-lg border border-destructive/40 bg-destructive/5 p-3 text-sm",children:[j,eV&&(0,a.jsxs)(a.Fragment,{children:[" ",(0,a.jsx)("a",{href:"/free-tools/video-trimmer",className:"text-primary underline-offset-4 hover:underline",children:"Open the video trimmer"})]})]}),c&&(0,a.jsxs)("div",{className:"grid gap-4 md:grid-cols-2",children:[(0,a.jsxs)("div",{className:"rounded-2xl border border-border/60 bg-card p-3",children:[(0,a.jsxs)("p",{className:"mb-2 text-xs font-medium text-muted-foreground",children:["Source",g?" \xb7 ".concat(g.w,"\xd7").concat(g.h," \xb7 ").concat(g.duration.toFixed(1)," s"):"",v?" \xb7 ".concat(v," fps"):""]}

1),(0,a.jsx)("video",{ref:eM,src:c,playsInline:!0,muted:!0,preload:"auto",className:"max-h-72 w-full rounded-lg bg-black object-contain"})]}),(0,a.jsxs)("div",{className:"rounded-2xl border border-border/60 bg-card p-3",children:[(0,a.jsxs)("p",{className:"mb-2 text-xs font-medium text-muted-foreground",children:["rendering"===eh?"Recording…":ew?"Preview".concat(eQ?" \xb7 ".concat(eQ.width,"\xd7").concat(eQ.height):""):"First frame",ex?" \xb7 ".concat(ex):""]}),(0,a.jsx)("canvas",{ref:eN,className:"max-h-72 w-full rounded-lg bg-black object-contain","aria-label":"Preview of the video with its background replaced"})]})]}),t&&!g&&!j&&(0,a.jsx)("p",{className:"text-sm text-muted-foreground",children:"Reading the video and measuring its frame rate…"}),t&&g&&!eV&&(0,a.jsx)(o.xP,{children:(0,a.jsxs)("div",{className:"space-y-6",children:[(0,a.jsxs)("div",{className:"grid gap-6 lg:grid-cols-2",children:[(0,a.jsxs)(l.Nk,{label:"Subject",hint:"person"===G?"MODNet \xb7 ".concat(h("person")," MB"):"BiRefNet-lite \xb7 ".concat(h("subject")," MB \xb7 WebGPU only"),children:[(0,a.jsx)(l.Iz,{"aria-label":"What to keep",value:G,onChange:e=>{if("subject"===e&&!1===W)return void M("Any-subject mode needs WebGPU, which this browser doesn't offer.");H(e)},options:[{value:"person",label:"People"},{value:"subject",label:"Any subject"}]}),(0,a.jsx)("p",{className:"text-xs text-muted-foreground",children:"person"===G?"Portrait matting built for people: talking heads, dance, fitness. Fastest option.":"General cutout for products, pets and objects. Slower per frame and needs WebGPU."})]}),(0,a.jsxs)(l.Nk,{label:"Background",children:[(0,a.jsx)(l.Iz,{"aria-label":"Background",value:J,onChange:K,options:[{value:"colour",label:"Colour",swatch:X},{value:"blur",label:"Blur"},{value:"image",label:"Image"}]}),"colour"===J&&(0,a.jsxs)("div",{className:"flex flex-wrap items-end gap-3",children:[(0,a.jsx)(l.qM,{id:"vbr-colour",label:"Colour",value:X,onChange:Z}),(0,a.jsx)("button",{type:"button",className:R,onClick:()=>Z(P),children:"Chroma green"}),(0,a.jsx)("button",{type:"button",className:R,onClick:()=>Z("#0047bb"),children:"Chroma blue"})]}),"blur"===J&&(0,a.jsx)(l.k1,{id:"vbr-blur",label:"Blur strength",value:ee,min:6,max:60,onChange:et,format:e=>"".concat(e," px")}),"image"===J&&(0,a.jsxs)("label",{className:"".concat(R," cursor-pointer"),children:[(0,a.jsx)("input",{type:"file",accept:"image/png,image/jpeg,image/webp",className:"sr-only",onChange:e=>{!function(e){let t=null==e?void 0:e[0];if(!t)return;let r=(0,s.vH)(t,"image");if(!r.ok){var a;M(null!=(a=r.error)?a:"That image can't be used.");return}let n=URL.createObjectURL(t),i=new Image;i.onload=()=>{URL.revokeObjectURL(n),ea(i),ei(t.name),K("image")},i.onerror=()=>{URL.revokeObjectURL(n),M("That image could not be opened in this browser. Try a PNG or JPEG.")},i.src=n}(e.target.files),e.target.value=""}}),en?"Background: ".concat(en):"Choose a background image"]})]}),(0,a.jsxs)(l.Nk,{label:"Mask detail",hint:"subject"===G?"Fixed at 512\xd7512":void 0,children:[(0,a.jsx)(l.Iz,{"aria-label":"Mask detail",value:V,onChange:Q,options:[{value:"standard",label:"Standard"},{value:"high",label:"High"}]}),(0,a.jsx)(l.Iz,{"aria-label":"Mask rate",value:Y,onChange:$,size:"sm",options:[{value:"full",label:"Every frame"},{value:"half",label:"Every other frame"}]}),(0,a.jsx)("p",{className:"text-xs text-muted-foreground",children:"High traces hair and fingers more closely and takes longer. Every other frame roughly halves the wait; edges lag a little on fast movement."})]}),(0,a.jsxs)(l.Nk,{label:"Clean-up",children:[(0,a.jsx)(l.Iz,{"aria-label":"Flicker smoothing",value:eo,onChange:el,options:[{value:"off",label:"No smoothing"},{value:"light",label:"Light"},{value:"strong",label:"Strong"}]}),(0,a.jsx)(l.Iz,{"aria-label":"Edges",value:es,onChange:ed,size:"sm",options:[{value:"soft",label:"Soft edges"},{value:"crisp",label:"Crisp edges"}]}),(0,a.jsx)("p",{className:"text-xs text-muted-foreground",children:"Smoothing blends each mask with the one before to calm edge flicker, and lets real movement through. Crisp edges key more cleanly in an editor."})]})]}),B.length>1&&(0,a.jsx)(l.Nk,{label:"Format",children:(0,a.jsx)(l.Iz,{"aria-label":"Output format",value:ec,onChange:eu,options:B.map(e=>({value:e,label:"mp4"===e?"MP4 (H.264)":"WebM (VP9)"}))})}),(0,a.jsx)("div",{className:"flex flex-wrap items-center gap-3",children:eF?(0,a.jsx)("button",{className:R,onClick:()=>{var e;return null==(e=eE.current)?void 0:e.abort()},children:"Stop"}):"needs-click"===eh?(0,a.jsx)("button",{className:L,onClick:eG,children:"Record the final video"}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("button",{className:L,onClick:eG,disabled:!B.length,children:eH?"Export again":ek?"Remove background again":"Remove background"}),(0,a.jsx)("button",{className:R,onClick:eD,children:ew?"Preview again":"Preview first frame"})]})}),"needs-click"===eh&&(0,a.jsx)("p",{className:"text-sm text-muted-foreground",children:"Analysis finished. Your browser wants a click before it plays the clip with sound for the recording pass."}),eH&&!eF&&"needs-click"!==eh&&(0,a.jsxs)("p",{className:"text-xs text-muted-foreground",children:["The analysis is kept, so a new background, clean-up or format only re-runs the ",Math.

1ceil(g.duration)," s recording pass."]}),eF&&(0,a.jsx)(o.uM,{value:ef,label:eg||"Working…"}),!ew&&!eF&&(0,a.jsxs)("p",{className:"text-xs text-muted-foreground",children:["The first preview or run downloads the model once (",h(G)," MB) from Hugging Face into your browser cache. Your video is never uploaded."]})]})}),(0,a.jsx)(o.I8,{show:!!ek,children:ek&&(0,a.jsxs)("div",{className:"space-y-4 rounded-2xl border border-border/60 bg-card p-4 md:p-5",children:[(0,a.jsxs)("div",{className:"flex flex-wrap items-center justify-between gap-3",children:[(0,a.jsxs)("p",{className:"text-xs font-medium text-muted-foreground",children:[ek.note," \xb7 ",(0,s.zi)(ek.size)]}),(0,a.jsxs)("a",{href:ek.url,download:ek.name,className:L,children:["Download ",ek.ext.toUpperCase()]})]}),(0,a.jsx)("video",{src:ek.url,controls:!0,playsInline:!0,className:"max-h-[28rem] w-full rounded-lg bg-black"}),(0,a.jsxs)("p",{className:"text-xs leading-relaxed text-muted-foreground",children:["Browsers can't reliably record transparent video, so this tool does not export alpha. For a cut-out you can move around in an editor, export on chroma green and key it there, or use the free"," ",(0,a.jsx)("a",{href:"/free-tools/chroma-key",className:"text-primary underline-offset-4 hover:underline",children:"chroma key"})," ","tool."]})]})})]})}},77716:(e,t,r)=>{r.d(t,{qM:()=>f,iq:()=>p,Nk:()=>c,JA:()=>h,Iz:()=>u,k1:()=>m,r_:()=>g});var a=r(95155),n=r(12115),i=r(57249),o=r(80891),l=r(64269);let s=n.forwardRef((e,t)=>{let{className:r,...n}=e;return(0,a.jsxs)(o.bL,{ref:t,className:(0,l.cn)("relative flex w-full touch-none select-none items-center",r),...n,children:[(0,a.jsx)(o.CC,{className:"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary",children:(0,a.jsx)(o.Q6,{className:"absolute h-full bg-primary"})}),(0,a.jsx)(o.zi,{className:"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"})]})});s.displayName=o.bL.displayName;var d=r(4874);function c(e){let{label:t,hint:r,children:n,className:i}=e;return(0,a.jsxs)("div",{className:(0,l.cn)("space-y-2.5",i),children:[(0,a.jsxs)("div",{className:"flex flex-wrap items-baseline justify-between gap-2",children:[(0,a.jsx)("span",{className:"text-sm font-semibold tracking-tight text-foreground",children:t}),r?(0,a.jsx)("span",{className:"text-xs text-muted-foreground",children:r}):null]}),n]})}function u(e){let{value:t,onChange:r,options:n,"aria-label":o,className:s,size:c="md"}=e,u=(0,d.b)(),h=Math.max(0,n.findIndex(e=>e.value===t)),m=Math.max(1,n.length),f="sm"===c?"h-8 px-2.5 text-[11px]":"h-9 px-3 text-xs sm:px-3.5 sm:text-[13px]";return(0,a.jsxs)("div",{role:"group","aria-label":o,className:(0,l.cn)("relative inline-flex max-w-full flex-wrap gap-1 rounded-full border border-border/70 bg-muted/30 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] backdrop-blur-sm","sm"===c?"p-0.5":"p-1",s),children:[n.length<=6&&(0,a.jsx)(i.P.span,{"aria-hidden":!0,className:"pointer-events-none absolute inset-y-1 left-1 hidden rounded-full gradient-primary shadow-md shadow-primary/25 sm:block",style:{width:"calc((100% - 0.5rem) / ".concat(m,")")},animate:{x:"calc(".concat(h," * 100%)")},transition:{duration:.28*!!u,ease:d.GA}}),n.map(e=>{let n=e.value===t;return(0,a.jsxs)("button",{type:"button","aria-pressed":n,onClick:()=>r(e.value),className:(0,l.cn)("relative z-10 inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-full font-semibold transition-colors duration-200 motion-reduce:transition-none",f,n?"bg-foreground text-background sm:bg-transparent sm:text-primary-foreground":"text-muted-foreground hover:text-foreground"),children:[e.swatch?(0,a.jsx)("span",{className:"h-2.5 w-2.5 shrink-0 rounded-full ring-1 ring-black/10 dark:ring-white/15",style:{background:e.swatch}}):null,e.label]},e.value)})]})}function h(e){let{value:t,onChange:r,options:n,"aria-label":o,className:s}=e,c=(0,d.b)();return(0,a.jsx)("div",{role:"group","aria-label":o,className:(0,l.cn)("flex flex-wrap gap-2",s),children:n.map(e=>{let n=e.value===t;return(0,a.jsxs)(i.P.button,{type:"button","aria-pressed":n,onClick:()=>r(e.value),whileTap:c?{scale:.97}:void 0,className:(0,l.cn)("inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-semibold transition-all duration-200",n?"border-transparent bg-gradient-to-br from-primary to-[hsl(230_75%_58%)] text-primary-foreground shadow-md shadow-primary/25":"border-border/80 bg-background/60 text-muted-foreground hover:border-primary/35 hover:text-foreground"),children:[e.swatch?(0,a.jsx)("span",{className:"h-2.5 w-2.5 shrink-0 rounded-full ring-1 ring-black/10 dark:ring-white/20",style:{background:e.swatch}}):null,e.label]},e.value)})})}function m(e){let{id:t,label:r,value:i,min:o,max:d,step:c=1,onChange:u,format:h,className:m}=e,f=(0,n.useId)(),p=null!=t?t:f,g=h?h(i):String(i);return(0,a.jsxs)("div",{className:(0,l.cn)("space-y-2",m),children:[(0,a.jsxs)("div",{className:"flex items-center justify-between gap-3",children:[(0,a.jsx)("label",{htmlFor:p,className:"text-sm font-medium text-foreground",children:r}),(0,a.jsx)("span",{className:"rounded-full border border-primary/20 bg-primary/10 px-2.5 py-0.5 text-[11px] font-semibold tabular-nums text-primary shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]",children:g})]}),(0,a.jsx)(s,{id:p,min:o,max:d,step:c,value:[i],onValueChange:e=>{let t=e[0];"number"==typeof t&&u(t)},className:"py-1 [&_[role=slider]]:h-4 [&_[role=slider]]:w-4 [&_[role=slider]]:border-primary/80 [&_[role=slider]]:sha

1dow-md [&_[role=slider]]:shadow-primary/20 [&_span.absolute]:gradient-primary"})]})}function f(e){let{id:t,label:r,value:i,onChange:o,className:s}=e,d=(0,n.useId)(),c=null!=t?t:d;return(0,a.jsxs)("div",{className:(0,l.cn)("inline-flex flex-col gap-1.5",s),children:[r?(0,a.jsx)("label",{htmlFor:c,className:"text-sm font-medium text-foreground",children:r}):null,(0,a.jsxs)("label",{htmlFor:c,className:"group relative inline-flex h-10 w-14 cursor-pointer items-center justify-center overflow-hidden rounded-xl border border-border/70 bg-muted/30 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] transition hover:border-primary/40",children:[(0,a.jsx)("span",{"aria-hidden":!0,className:"absolute inset-1 rounded-lg ring-1 ring-black/10 dark:ring-white/10",style:{background:i}}),(0,a.jsx)("input",{id:c,type:"color",value:i,onChange:e=>o(e.target.value),className:"absolute inset-0 cursor-pointer opacity-0"})]}),(0,a.jsx)("span",{className:"font-mono text-[10px] uppercase tracking-wide text-muted-foreground",children:i})]})}function p(e){let{items:t,className:r}=e;return(0,a.jsx)("div",{className:(0,l.cn)("flex flex-wrap items-end gap-4",r),children:t.map(e=>{var t;return(0,a.jsx)(f,{...e},e.label+(null!=(t=e.id)?t:""))})})}function g(e){let{children:t,className:r,...n}=e;return(0,a.jsx)("button",{type:"button",className:(0,l.cn)("inline-flex items-center justify-center rounded-xl bg-gradient-to-br from-primary to-[hsl(230_75%_58%)] px-4 py-2.5 text-sm font-semibold text-primary-foreground shadow-md shadow-primary/25 transition hover:opacity-95 disabled:cursor-not-allowed disabled:opacity-50",r),...n,children:t})}},82214:(e,t,r)=>{r.d(t,{A5:()=>n});let a=new Set(["payment","free_trial","trial_started","trial_converted","subscription_started","subscription_upgraded","subscription_downgraded","subscription_renewed","subscription_cancel_scheduled","subscription_reactivated","subscription_ended"]);function n(e,t){let r=function(e){let t=e.trim().toLowerCase().replace(/[^a-z0-9_:-]+/g,"_").replace(/^_+|_+$/g,"").slice(0,64);return!t||a.has(t)?null:t}(e);if(r)try{var n,i;null==(n=(i=window).datafast)||n.call(i,r,function(e){if(!e)return;let t={},r=0;for(let[a,n]of Object.entries(e)){if(r>=10)break;if(null==n)continue;let e=a.trim().toLowerCase().replace(/-/g,"_").replace(/[^a-z0-9_]+/g,"_").replace(/^_+|_+$/g,"").slice(0,64);e&&"email"!==e&&(t[e]=String(n).slice(0,255),r+=1)}return r?t:void 0}(t))}catch(e){}}}}]);