18 lines
15 KiB
JavaScript
18 lines
15 KiB
JavaScript
|
(()=>{var e={};e.id=2460,e.ids=[2460],e.modules={3295:e=>{"use strict";e.exports=require("next/dist/server/app-render/after-task-async-storage.external.js")},10846:e=>{"use strict";e.exports=require("next/dist/compiled/next-server/app-page.runtime.prod.js")},17791:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>a});let a=(0,r(12907).registerClientReference)(function(){throw Error("Attempted to call the default export of \"/app/app/background-remover/page.tsx\" from the server, but it's on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.")},"/app/app/background-remover/page.tsx","default")},19121:e=>{"use strict";e.exports=require("next/dist/server/app-render/action-async-storage.external.js")},23002:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>c});var a=r(60687),n=r(43210);let s=(0,r(62688).A)("loader-circle",[["path",{d:"M21 12a9 9 0 1 1-6.219-8.56",key:"13zald"}]]),l=[2048,1536,1280,1024,864,720];async function i(e,t=2048){let r=await createImageBitmap(e),{width:a,height:n}=r,s=Math.min(1,t/Math.max(a,n)),l=Math.max(1,Math.round(a*s)),o=Math.max(1,Math.round(n*s)),d=document.createElement("canvas");return d.width=l,d.height=o,d.getContext("2d").drawImage(r,0,0,l,o),r.close(),await new Promise(e=>d.toBlob(t=>e(t),"image/png"))}function o(e){if(e)try{URL.revokeObjectURL(e)}catch{}}let d=[{key:"ormbg",label:"ORMBG"},{key:"u2net",label:"U2NET"},{key:"basnet",label:"BASNET"},{key:"deeplab",label:"DEEPLAB"},{key:"tracer",label:"TRACER-B7"},{key:"u2net_human_seg",label:"U2NET (Human)"},{key:"isnet-general-use",label:"ISNET (General)"},{key:"isnet-anime",label:"ISNET (Anime)"},{key:"bria",label:"BRIA RMBG1.4"},{key:"inspyrenet",label:"INSPYRENET"}];function c(){let[e,t]=(0,n.useState)(null),[r,c]=(0,n.useState)(null),[u,m]=(0,n.useState)(null),[p,h]=(0,n.useState)(()=>Object.fromEntries(d.map(e=>[e.key,"idle"]))),[b,g]=(0,n.useState)({}),x=(0,n.useRef)({}),[f,v]=(0,n.useState)(null),[w,k]=(0,n.useState)(50),[y,j]=(0,n.useState)(!0),N=(0,n.useRef)(null),P=(0,n.useRef)(!1),R=(0,n.useRef)(new Map),z=(0,a.jsx)("style",{children:`
|
||
|
|
html, body { width: 100%; overflow-x: hidden; }
|
||
|
|
:root { font-size: 17px; }
|
||
|
|
.checkerboard {
|
||
|
|
background-size: 24px 24px;
|
||
|
|
background-image:
|
||
|
|
linear-gradient(45deg,#2a2a2a 25%,transparent 25%),
|
||
|
|
linear-gradient(-45deg,#2a2a2a 25%,transparent 25%),
|
||
|
|
linear-gradient(45deg,transparent 75%,#2a2a2a 75%),
|
||
|
|
linear-gradient(-45deg,transparent 75%,#2a2a2a 75%);
|
||
|
|
background-position: 0 0,0 12px,12px -12px,-12px 0;
|
||
|
|
}
|
||
|
|
.slider-handle { position: absolute; top: 0; bottom: 0; width: 0; left: calc(var(--reveal, 50) * 1%); }
|
||
|
|
.slider-handle::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; left: -1px; background: rgba(255,255,255,0.85); }
|
||
|
|
.slider-thumb { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 9999px; background: rgba(24,24,27,0.9); border: 1px solid rgba(255,255,255,0.85); display: grid; place-items: center; cursor: ew-resize; }
|
||
|
|
/* Mobile: keep the page from panning left/right while using the slider */
|
||
|
|
.app-frame { touch-action: pan-y; overscroll-behavior-x: contain; }
|
||
|
|
`}),C=(0,n.useCallback)(async e=>{if(o(r),Object.values(x.current).forEach(e=>o(e?.previewUrl)),R.current.clear(),t(e),g({}),v(null),k(50),h(Object.fromEntries(d.map(e=>[e.key,"idle"]))),!e){c(null),m(null);return}try{let t=await createImageBitmap(e);m({w:t.width,h:t.height}),t.close()}catch{}let a=await i(e,2048);c(URL.createObjectURL(a))},[r]),E=(0,n.useCallback)(async t=>{let r=R.current;if(r.has(t))return r.get(t);if(!e)throw Error("No file selected");let a=await i(e,t);return r.set(t,a),a},[e]),M=(0,n.useCallback)(async()=>{if(!e)return;g({}),h(e=>{let t={...e};return d.forEach(e=>t[e.key]="pending"),t});let t=async t=>{let r=y?l:[Math.max(u?.w||0,u?.h||0)||4096],a=performance.now();for(let n of r)try{let r=y?await E(n):e,s=new FormData;s.append("file",r),s.append("method",t);let l=await fetch("/api/bgremove",{method:"POST",body:s});if(!l.ok){let e=await l.text().catch(()=>""),t=/out of memory|onnxruntime|cuda|allocate|500/i.test(e);if(y&&t){e||l.status;continue}throw Error(e||`HTTP ${l.status}`)}let o=await l.blob(),d=performance.now()-a,c=await i(o),u=URL.createObjectURL(c);g(e=>({...e,[t]:{fullBlob:o,previewUrl:u,bytes:o.size,ms:d}})),h(e=>({...e,[t]:"ok"})),await new Promise(e=>setTimeout(e,150));return}catch(e){if(e?.message||String(e),!y)break}h(e=>({...e,[t]:"error"}))},r=y?1:2,a=[...d.map(e=>e.key)],n=[],s=()=>{for(;n.length<r&&a.length;){let e=t(a.shift()).finally(()=>{n=n.filter(t=>t!==e)});n.push(e)}};for(s();n.length;)await Promise.race(n),s();v(e=>{if(e)return e;for(let e of d)if(x.current[e.key])return e.key;return d[0]?.key??null})},[e,y,u,E]),S=(0,n.useMemo)(()=>u&&u.w/u.h||16/9,[u]),U=(0,n.useCallback)(e=>{let t=N.current;if(!t)return;let r=t.getBoundingClientRect();k(Math.min(100,Math.max(0,(e-r.left)/r.width*100)))},[]),_=()=>P.current=!1,B=f?b[f]:void 0,L=!!(f&&B?.fullBlob),T=(0,n.useCallback)(async()=>{if(!e||!f)return;h(e=>({...e,[f]:"pending"}));let t=performance.now();try{let r=new FormData;r.append("file",e),r.append("method",f);let a=await fetch("/api/bgremove",{method:"POST",body:r});if(!a.ok)throw Error(await a.text());let n=await a.blob(),s=performance.now()-t,l=await i(n),d=URL.createObjectURL(l),c=x.current[f];c&&o(c.previewUrl),g(e=>({...e,[f]:{fullBlob:n,previewUrl:d,bytes:n.size,ms:s}})),h(e=>({...e,[f]:"ok"}))}catch{h(e=>({...e,[f]:"error"}))}},[e,f]),$=(0,n.useMemo)(()=>d.filter(e=>"ok"===p[e.key]).length,[p]),A=(0,n.useMemo)(()=>d.filter(e=>"pending"===p[e.key]).length,[p]);function D({s:e}){return(0,a.jsx)("span",{className:`inline-block w-2 h-2 rounded-full ${"ok"===e?"bg-emerald-500":"pending"===e?"bg-amber-400 animate-pulse":"error"===e?"bg-rose-500":"bg-zinc-600"}`})}return(0,a.jsxs)("div",{className:"p-6 text-zinc-100 overflow-x-hidden",children:[z,(0,a.jsxs)("div",{className:"mx-auto w-full max-w-[1200px] px-4",children:[(0,a.jsxs)("div",{className:"mb-4 flex items-center justify-between gap-3",children:[(0,a.jsx)("h1",{className:"text-2xl font-semibold",children:"Background Remover"}),(0,a.jsx)("a",{href:"https://makearmy.io",className:"px-3 py-1 rounded-md border border-zinc-700 hover:bg-zinc-800/60 text-sm",children:"Back to main"})]}),(0,a.jsxs)("div",{className:"text-zinc-400 mb-3",children:[(0,a.jsx)("span",{className:"text-zinc-300",children:"Source:"})," ",e?.name??(0,a.jsx)("span",{className:"italic",children:"— none —"})]}),(0,a.jsxs)("div",{ref:N,className:"app-frame checkerboard relative w-full rounded-2xl border border-zinc-800/80 shadow-inner",style:{aspectRatio:`${S}`,maxWidth:"1200px",maxHeight:"80vh",marginInline:"auto"},onDragOver:e=>e.preventDefault(),onDrop:e=>{e.preventDefault();let t=e.dataTransfer.files?.[0];t&&C(t)},onMouseDown:e=>{P.current=!0,U(e.clientX)},onMouseMove:e=>{P.current&&U(e.clientX)},onMouseLeave:_,onMouseUp:_,onTouchStart:e=>{P.current=!0,U(e.touches[0].clientX)},onTouchMove:e=>{P.current&&(e.preventDefault(),U(e.touches[0].clientX))},onTouchEnd:()=>P.current=!1,children:[!r&&(0,a.jsxs)("label",{className:"absolute inset-0 grid place-items-center cursor-pointer",children:[(0,a.jsx)("input",{type:"file",accept:"image/*",class
|