1const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/index-B-hj9qub.js","assets/index-Bax0X-_a.js","assets/index-DncVM4z9.css"])))=>i.map(i=>d[i]); 2import{r as c,j as t,m as n,a as z,F as L,h as S,_}from"./index-Bax0X-_a.js";import{P}from"./Panel-Bm2-_1sG.js";import{R as F}from"./RelatedTools-4PyNnFA9.js";const x=a=>a?a<1024?a+" B":a<1024*1024?(a/1024).toFixed(1)+" KB":(a/(1024*1024)).toFixed(2)+" MB":"";function q(){const[a,l]=c.useState([]),[v,u]=c.useState(!1),[N,w]=c.useState(!1),R=c.useRef(null),g=c.useRef(null);async function k(){if(g.current)return g.current;const e=await _(()=>import("./index-B-hj9qub.js"),__vite__mapDeps([0,1,2]));return g.current=e.removeBackground,e.removeBackground}async function j(e){const p=[...e].filter(s=>s.type.startsWith("image/"));if(!p.length)return;const h=p.map((s,m)=>({id:Date.now()+"-"+m,name:s.name,originalSize:s.size,originalUrl:URL.createObjectURL(s),status:"queued",progress:0,url:null,newSize:0}));l(s=>[...h,...s]);const D=await k();for(const s of h){const m=p[h.indexOf(s)];l(r=>r.map(i=>i.id===s.id?{...i,status:"processing"}:i));try{const r=await D(m,{model:"isnet_quint8",device:"gpu",output:{format:"image/png",quality:.9},progress:(o,d,b)=>{const B=b?d/b:0,y=o.startsWith("fetch");l(U=>U.map(f=>f.id===s.id?{...f,progress:B,status:y?"loading-model":"processing"}:f)),y||w(!0)}});w(!0);const i=URL.createObjectURL(r);l(o=>o.map(d=>d.id===s.id?{...d,status:"done",url:i,newSize:r.size,progress:1}:d)),S.log({type:"bg-remove",label:m.name,size:x(r.size)})}catch(r){l(i=>i.map(o=>o.id===s.id?{...o,status:"error",error:r.message}:o))}}}return t.jsxs(P,{title:"Background Remover",hint:"Strips backgrounds from photos using on-device AI. Uses WebGPU when available, falls back to CPU. First image downloads a small model (~8 MB), cached after.",children:[t.jsxs(n.label,{whileHover:{scale:1.01},whileTap:{scale:.99},onDragEnter:e=>{e.preventDefault(),u(!0)},onDragOver:e=>{e.preventDefault(),u(!0)},onDragLeave:e=>{e.preventDefault(),u(!1)},onDrop:e=>{e.preventDefault(),u(!1),j(e.dataTransfer.files)},className:`flex min-h-[180px] cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-8 transition-all ${v?"border-fuchsia-400 bg-fuchsia-500/10":"border-white/15 bg-white/[0.02] hover:border-fuchsia-400/60 hover:bg-white/[0.04]"}`,children:[t.jsx("input",{ref:R,type:"file",accept:"image/*",multiple:!0,hidden:!0,onChange:e=>j(e.target.files)}),t.jsx(n.div,{animate:v?{y:-6,scale:1.1,rotate:5}:{y:0,scale:1,rotate:0},className:"text-4xl",children:"â¨"}),t.jsxs("p",{className:"text-sm text-slate-300",children:[t.jsx("span",{className:"font-medium text-white",children:"Drop a photo"})," here or click to choose"]}),t.jsx("p",{className:"text-xs text-slate-500",children:N?"Model ready â runs locally in your browser":"Model downloads on first use"})]}),t.jsx("div",{className:"mt-6 space-y-3",children:t.jsx(z,{initial:!1,children:a.map(e=>t.jsxs(n.div,{layout:!0,initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,x:20},transition:{duration:.3},className:"rounded-xl border border-white/10 bg-white/[0.03] p-3",children:[t.jsxs("div",{className:"flex items-center gap-3",children:[t.jsxs("div",{className:"grid grid-cols-2 gap-1",children:[t.jsx("img",{src:e.originalUrl,alt:"",className:"h-14 w-14 rounded-md object-cover"}),t.jsx("div",{className:"h-14 w-14 rounded-md",style:{background:"repeating-conic-gradient(#1f2330 0% 25%, #2a2f3d 0% 50%) 50% / 12px 12px"},children:e.url&&t.jsx(n.img,{initial:{opacity:0,scale:.9},animate:{opacity:1,scale:1},src:e.url,alt:"",className:"h-14 w-14 rounded-md object-cover"})})]}),t.jsxs("div",{className:"min-w-0 flex-1",children:[t.jsx("p",{className:"truncate text-sm font-medium text-white",children:e.name}),t.jsxs("p",{className:"text-xs text-slate-400",children:[e.status==="queued"&&"Queuedâ¦",e.status==="loading-model"&&"Loading modelâ¦",e.status==="processing"&&"Removing backgroundâ¦",e.status==="done"&&t.jsxs(t.Fragment,{children:[x(e.originalSize)," â ",t.jsx("span",{className:"text-fuchsia-300",children:x(e.newSize)})," · transparent PNG"]}),e.status==="error"&&t.jsxs("span",{className:"text-rose-400",children:["Error: ",e.error]})]})]}),e.status==="done"&&t.jsx(n.a,{whileHover:{scale:1.05},whileTap:{scale:.95},href:e.url,download:e.name.replace(/\.[^.]+$/,"")+"-nobg.png",className:"rounded-lg bg-gradient-to-r from-fuchsia-500 to-pink-500 px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-fuchsia-500/30",children:"Download"})]}),(e.status==="processing"||e.status==="loading-model")&&t.jsx("div",{className:"mt-2 h-1 overflow-hidden rounded-full bg-white/5",children:t.jsx(n.div,{initial:{width:0},animate:{width:`${(e.progress||0)*100}%`},transition:{ease:"easeOut"},className:"h-full bg-gradient-to-r from-fuchsia-500 to-pink-500"})})]},e.id))})}),t.jsx(L,{path:"/background"}),t.jsx(F,{currentToolId:"bgremove"})]})}
2export{q as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.