https://aiedit.com/assets/BackgroundRemovePanel-BvQDhPHw.js

1import{A as W,j as e,u as B,e as P,f as z}from"./index-QRiPE925.js";import{r as s}from"./vendor-react-C2vrxknb.js";import{C as O,U as C}from"./UploadArea-C1Ri67Yz.js";import{P as D}from"./PanelActionButton-Bd-VlIG4.js";import{u as T}from"./useDebounce-ClLI-4oZ.js";import{I as L}from"./InfoTip-Bq5sVhKI.js";import{E as F}from"./ErrorOverlay-CgYLOVuA.js";import{P as $}from"./PhotoPreview-Ch9qqkn8.js";import{C as G}from"./CustomCheckbox-lqS10wWM.js";import{C as H}from"./ChatMediaModal-D3JWDUXa.js";import"./photoHelpers-DYeHDDqL.js";import"./DropZoneOverlay-IhWBqzU7.js";import"./DateFilterCalendar-DTkZ2pL4.js";import"./AudioWaveformPlayer-ewv8YM_7.js";const S=(t,d)=>{if(!t.r2_urls)return null;const r=d==="original"?"original":d==="processed"?"processed":"gallery";return t.r2_urls[r]?t.r2_urls[r]:t.r2_urls.gallery?t.r2_urls.gallery:null},K=({isOpen:t,onClose:d})=>{const[r,p]=s.useState(null),[o,m]=s.useState(!0),[x,b]=s.useState(!1),[l,N]=s.useState(!1);s.useEffect(()=>{t&&u()},[t]),s.useEffect(()=>{if(!r||o)return;const a=setInterval(()=>{N(i=>!i)},2e3);return()=>clearInterval(a)},[r,o]);const u=async()=>{try{m(!0);const a=await fetch(`${W}/api/gallery?filter=background-remove&limit=1&shuffle=1`);if(!a.ok)throw new Error(`HTTP error! status: ${a.status}`);const i=await a.json();i.success&&i.items.length>0&&p(i.items[0])}catch(a){console.error("Failed to fetch background removal examples:",a)}finally{m(!1)}},h=()=>{x&&localStorage.setItem("backgroundRemoveWelcomeOverlayDismissed","true"),d()},g=()=>{x&&localStorage.setItem("backgroundRemoveWelcomeOverlayDismissed","true"),d()};return t?e.jsx("div",{className:"fixed sm:absolute inset-0 bg-black/90 sm:bg-black/80 sm:rounded-lg md:rounded-xl lg:rou

1nded-2xl flex items-center justify-center z-50 p-2 xs:p-4",children:e.jsxs("div",{className:"bg-app-bg  rounded-lg xs:rounded-xl w-full max-w-4xl max-h-[90%] overflow-hidden animate-slideUp flex flex-col",children:[e.jsxs("div",{className:"relative bg-panel-bg  p-3 xs:p-4 border-b border-border-default/50",children:[e.jsx("button",{onClick:g,className:"absolute top-1/2 right-2 xs:right-3 transform -translate-y-1/2 p-1 text-gray-400 hover:text-white hover:bg-input-bg rounded-lg transition-all duration-200",children:e.jsx("svg",{className:"w-4 h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:"2",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})})}),e.jsxs("div",{className:"flex items-center gap-2 xs:gap-3",children:[e.jsx("div",{className:"w-5 h-5 sm:w-6 sm:h-6 text-teal-400",children:e.jsxs("svg",{className:"w-full h-full",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("rect",{x:"4",y:"4",width:"16",height:"16",rx:"2",ry:"2"}),e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 9l6 6M15 9l-6 6"})]})}),e.jsx("div",{children:e.jsx("h2",{className:"text-lg xs:text-xl font-semibold text-gray-200",children:"Introduction"})})]})]}),e.jsx("div",{className:"flex-1 overflow-y-auto p-3 xs:p-4 sm:p-6",children:e.jsxs("div",{className:"flex flex-col lg:flex-row gap-3 sm:gap-4 lg:gap-6",children:[e.jsxs("div",{className:"flex-1 flex flex-col justify-center space-y-4 sm:space-y-6 lg:space-y-8",children:[e.jsx("div",{className:"flex items-center",children:e.jsxs("p",{className:"text-sm xs:text-base lg:text-base text-gray-300 leading-relaxed",children:[e.jsx("span",{className:"block sm:hidden",children:"Remove image background with AI precision. Get clean transparent cutouts instantly."}),e.jsx("span",{className:"hidden sm:block lg:hidden",children:"Remove image background with AI precision. Get clean transparent cutouts instantly."}),e.jsx("span",{className:"hidden lg:block",children:"Remove image background with AI precision. Get clean and professional transparent cutouts with perfect edge detection."})]})}),e.jsxs("div",{className:"hidden sm:grid grid-cols-2 lg:grid-cols-2 gap-2 sm:gap-3 lg:gap-4",children:[e.jsxs("div",{className:"flex items-center gap-2 xs:gap-3 text-xs xs:text-sm",children:[e.jsx("div",{className:"w-5 h-5 xs:w-6 xs:h-6 lg:w-8 lg:h-8 bg-teal-500/20 rounded-full flex items-center justify-center flex-shrink-0",children:e.jsx("svg",{className:"w-2.5 h-2.5 xs:w-3 xs:h-3 lg:w-4 lg:h-4 text-teal-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:"2",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"})})}),e.jsx("span",{className:"text-gray-300",children:"Automatic detection"})]}),e.jsxs("div",{className:"flex items-center gap-2 xs:gap-3 text-xs xs:text-sm",children:[e.jsx("div",{className:"w-5 h-5 xs:w-6 xs:h-6 lg:w-8 lg:h-8 bg-teal-500/20 rounded-full flex items-center justify-center flex-shrink-0",children:e.jsxs("svg",{className:"w-2.5 h-2.5 xs:w-3 xs:h-3 lg:w-4 lg:h-4 text-teal-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 12a3 3 0 11-6 0 3 3 0 016 0z"}),e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"})]})}),e.jsx("span",{className:"text-gray-300",children:"Transparent output"})]}),e.jsxs("div",{className:"hidden lg:flex items-center gap-2 xs:gap-3 text-xs xs:text-sm",children:[e.jsx("div",{className:"w-5 h-5 xs:w-6 xs:h-6 lg:w-8 lg:h-8 bg-teal-500/20 rounded-full flex items-center justify-center flex-shrink-0",children:e.jsx("svg",{className:"w-2.5 h-2.5 xs:w-3 xs:h-3 lg:w-4 lg:h-4 text-teal-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:"2",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"})})}),e.jsx("span",{className:"text-gray-300",children:"Precise cutouts"})]}),e.jsxs("div",{className:"hidden lg:flex items-center gap-2 xs:gap-3 text-xs xs:text-sm",children:[e.jsx("div",{className:"w-5 h-5 xs:w-6 xs:h-6 lg:w-8 lg:h-8 bg-teal-500/20 rounded-full flex items-center justify-center flex-shrink-0",children:e.jsx("svg",{className:"w-2.5 h-2.5 xs:w-3 xs:h-3 lg:w-4 lg:h-4 text-teal-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:"2",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M13 10V3L4 14h7v7l9-11h-7z"})})}),e.jsx("span",{className:"text-gray-300",children:"High quality"})]})]})]}),e.jsx("div",{className:"flex-1 lg:max-w-lg max-w-xs sm:max-w-sm mx-auto lg:mx-0 lg:[@media(max-height:800px)]:max-w-[350px]",children:o?e.jsx("div",{className:"bg-gradient-to-br from-panel-bg to-input-bg  rounded-lg sm:rounded-xl p-3 sm:p-4 lg:p-8 flex items-center justify-center border border-border-emphasis/20 min-h-[200px]",children:e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"animate-spin rounded-full h-4 w-4 sm:h-6 sm:w-6 lg:h-8 lg:w-8 border-b-2 border-teal-400 mx-auto mb-1 sm:mb-2 lg:mb-3"}),e.jsx("p",{className:"text-gray-400 text-xs sm:text-sm",children:"Loading example..."})]})}):r?e.jsx("div",{className:"bg-gradient-to-br from-panel-bg to-input-bg  rounded-lg sm:rounded-xl p-2 sm:p-3 lg:p-4 border border-border-emphasis/20",children:e.jsx("div",{className:"relative flex items-center justify-center min-h-[240px] sm:min-h-[280px]",children:e.jsxs("div",{className:"relative bg-panel-bg rounded-md lg:rounded-lg overflow-hidden w-[240px] h-[240px] sm:w-[280px] sm:h-[280px] lg:w-[400px] lg:h-[400px]",children:[e.jsxs("div",{className:"relative w-full h-full flex items-center justify-center",children:[e.jsx("img",{src:S(r,"original"),alt:"Before background removal",className:`absolute inset-0 w-full h-full object-contain transition-opacity duration-1000 ease-in-out ${l?"opacity-0":"opacity-100"}`}),e.jsx("div",{className:`absolute inset-0 w-full h-full transition-opacity duration-1000 ease-in-out ${l?"opacity-100":"opacity-0"} bg-[linear-gradient(45deg,transparent_25%,rgba(255,255,255,0.1)_25%,rgba(255,255,255,0.1)_50%,transparent_50%,transparent_75%,rgba(255,255,255,0.1)_75%),linear-gradient(45deg,transparent_25%,rgba(255,255,255,0.1)_25%,rgba(255,255,255,0.1)_50%,transparent_50%,transparent_75%,rgba(255,255,255,0.1)_75%)] bg-[length:8px_8px] bg-[position:0_0,4px_4px] flex items-center justify-center`,children:e.jsx("img",{src:S(r,"processed"),alt:"After background removal",className:"w-full h-full object-contain"})})]}),e.jsxs("div",{className:"absolute top-2 left-2 bg-black/70  px-2 py-1 rounded text-xs text-white font-medium transition-all duration-500",children:[e.jsx("span",{className:`inline-block transition-all duration-500 ${l?"opacity-0 transform translate-y-1":"opacity-100 transform translate-y-0"}`,children:"Before"}),e.jsx("span",{className:`absolute inset-0 px-2 py-1 inline-block transition-all duration-500 flex items-center justify-center ${l?"opacity-100 transform translate-y-0":"opacity-0 transform -translate-y-1"}`,children:"After"})]})]})})}):e.jsx("div",{className:"bg-gradient-to-br from-panel-bg to-input-bg  rounded-lg sm:rounded-xl p-3 sm:p-4 lg:p-6 border border-border-emphasis/20",children:e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"w-5 h-5 sm:w-8 sm:h-8 lg:w-12 lg:h-12 bg-teal-500/20 rounded-full flex items-center justify-center mx-auto mb-1 sm:mb-2 lg:mb-3",children:e.jsx("svg",{className:"w-3 h-3 sm:w-4 sm:h-4 lg:w-6 lg:h-6 text-teal-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:"2",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M13 10V3L4 14h7v7l9-11h-7z"})})}),e.jsxs("p",{className:"text-gray-400 text-xs sm:text-sm",children:[e.jsx("span",{className:"block sm:hidden",children:"Start removing!"}),e.jsx("span",{className:"hidden sm:block",children:"Start removing backgrounds to see amazing results!"})]})]})})})]})}),e.jsx("div",{className:"bg-gradient-to-br from-panel-bg to-input-bg  p-3 sm:p-4 lg:p-6 border-t border-border-emphasis/20",children:e.jsxs("div",{className:"flex flex-col xs:flex-row items-start xs:items-center justify-between gap-3 sm:gap-4",children:[e.jsxs("label",{className:"flex items-center gap-2 text-xs sm:text-sm text-gray-300 cursor-pointer group",children:[e.jsx(G,{checked:x,onChange:a=>b(a.target.checked),colorFrom:"teal-500",colorTo:"cyan-500",borderColor:"teal-500",size:"small"}),e.jsxs("span",{className:"select-none group-hover:text-white transition-colors duration-200",children:[e.jsx("span",{className:"block xs:hidden",children:"Don't show again"}),e.jsx("span",{className:"hidden xs:block",children:"Don't show again"})]})]}),e.jsxs("button",{onClick:h,className:"group relative w-full xs:w-auto px-4 sm:px-6 py-2.5 sm:py-3 rounded-xl font-medium sm:font-semibold transition-all duration-300 ease-out transform hover:scale-[1.02] focus:scale-[1.02] active:scale-95 focus:outline-none focus:ring-2 focus:ring-teal-400/50 focus:ring-offset-2 focus:ring-offset-app-bg overflow-hidden",children:[e.jsx("div",{className:"absolute inset-0 bg-gradient-to-r from-teal-500 to-cyan-500 transition-all duration-300"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-out"}),e.jsxs("div",{className:"relative z-10 flex items-center justify-center gap-2 text-white",children:[e.jsx("span",{className:"text-sm sm:text-base",children:"Start Removing"}),e.jsx("svg",{className:"w-4 h-4 sm:w-5 sm:h-5 transition-transform duration-200 group-hover:translate-x-1",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:"2",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M13 7l5 5m0 0l-5 5m5-5H6"})})]})]})]})})]})}):null},oe=({previewUrl:t,backgroundRemovedImageUrl:d,clearImage:r,handleBackgroun

1dRemove:p,isRemovingBackground:o,error:m,errorType:x,onClearError:b,onFileSelect:l,onGalleryWithFilter:N,chats:u=[]})=>{const{isAuthenticated:h}=B(),g=s.useRef(null),[a,i]=s.useState(!1),[_,j]=s.useState(!1),[q,y]=s.useState(!1);s.useEffect(()=>{localStorage.getItem("backgroundRemoveWelcomeOverlayDismissed")||i(!0)},[]);const k=s.useMemo(()=>h?{operation:"background-remove",processingParams:{model:"bria/remove-background",displayParams:{}}}:null,[h]),A=k?JSON.stringify(k):null,v=T(A,350),[M,w]=s.useState(null);s.useEffect(()=>{if(!v){w(null);return}const c=JSON.parse(v),n=new AbortController;return P(c.operation,c.processingParams,n.signal).then(f=>{f?.aborted||(f?.success&&typeof f.creditCost=="number"?w(f.creditCost):w(null))}),()=>n.abort()},[v]);const I=()=>{g.current?.click()},R=s.useCallback(()=>{j(!0)},[]),E=s.useCallback(async c=>{j(!1),y(!0);try{const n=await z(c);l&&l(n)}catch(n){console.error("Failed to load image from chat:",n)}finally{y(!1)}},[l]);return d?null:e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"relative flex-1 bg-panel-bg rounded-lg xs:rounded-xl sm:rounded-2xl p-1.5 xs:p-2 sm:p-3 md:p-4 flex flex-col md:flex-row gap-2 xs:gap-2.5 sm:gap-3 md:gap-4 overflow-auto min-h-0 h-full md:h-full",children:[m&&e.jsx("div",{className:"absolute inset-0 z-50",children:e.jsx(F,{error:m,errorType:x,onTopUpCredits:()=>console.log("Navigate to billing page"),onClose:b,className:"rounded-lg xs:rounded-xl sm:rounded-2xl"})}),e.jsxs("div",{className:"flex-1 h-[60%] md:h-auto flex flex-col md:w-1/2 md:min-h-0 overflow-visible min-h-0 order-2 md:order-1 md:justify-between",children:[e.jsx("div",{className:"flex-1 flex flex-col h-full md:h-auto md:justify-center",children:e.jsxs("div",{className:"space-y-1.5 xs:space-y-2 sm:space-y-2 md:space-y-2.5 lg:space-y-4 h-full md:h-auto flex flex-col md:block",children:[e.jsxs("div",{className:"sm:bg-gradient-to-br sm:from-panel-bg sm:to-input-bg sm: rounded-lg sm:rounded-xl p-1.5 xs:p-2 sm:p-2.5 md:p-3 lg:p-4 sm:border sm:border-border-emphasis/20 flex-1 md:flex-none flex flex-col min-h-0",children:[e.jsxs("div",{className:"flex items-center gap-1 xs:gap-1.5 sm:gap-2 mb-2 xs:mb-2.5 sm:mb-3 flex-shrink-0",children:[e.jsx("div",{className:"w-1.5 h-1.5 sm:w-2 sm:h-2 bg-emerald-400 rounded-full"}),e.jsx("label",{className:"text-xs xs:text-xs sm:text-sm md:text-xs lg:text-sm font-semibold text-gray-200",children:"Backgroun

1d Removal"})]}),e.jsx("div",{className:"flex-1 md:flex-none flex flex-col",children:e.jsxs("div",{className:"text-xs sm:text-sm text-gray-300 leading-relaxed flex-1 md:flex-none",children:[e.jsx("p",{className:"mb-2",children:"Automatically remove background from your photos."}),e.jsxs("ul",{className:"list-disc list-inside space-y-1 text-gray-400",children:[e.jsx("li",{children:"No loss of quality"}),e.jsx("li",{children:"Transparent background"}),e.jsx("li",{children:"Precise cutouts"}),e.jsx("li",{children:"Object autodetection"})]})]})})]}),e.jsx(L,{title:"",icon:"lightbulb",className:"block xs:hidden",children:"Works best with clear subject contrast against the background."}),e.jsx(L,{title:"",icon:"lightbulb",className:"hidden xs:block",children:"Works best with clear subject contrast against the background. The AI will automatically detect and preserve the main subject."})]})}),e.jsx("input",{ref:g,type:"file",accept:"image/*",onChange:c=>{const n=c.target.files[0];n&&l&&l(n)},hidden:!0}),e.jsx("div",{className:"flex-shrink-0 mt-2 xs:mt-2.5 sm:mt-3 md:mt-3 space-y-2 md:space-y-3",children:e.jsxs("div",{className:"flex gap-2",children:[t&&!o&&e.jsx(O,{onClick:I,className:"w-1/2",hasChats:h&&u.length>0,onSelectFromChat:R}),e.jsx("div",{className:t&&!o?"w-1/2":"w-full",children:e.jsx(D,{onClick:p,isLoading:o,disabled:o||!t,text:"Remove Backgroun

1d",loadingText:"Removing...",colorScheme:"emerald-teal",iconPath:null,creditCost:M})})]})})]}),t?e.jsx("div",{className:"order-1 md:order-2 md:flex-1 h-[40%] md:h-auto relative",children:e.jsx($,{previewUrl:t,onFileSelect:l,className:"h-full"})}):e.jsxs("div",{className:"order-1 md:order-2 md:w-1/2 md:h-full md:flex-1 h-[40%] md:h-auto relative",children:[e.jsx("div",{className:"md:hidden h-full",children:e.jsx(C,{onFileSelect:l,compact:!0,className:"h-full"})}),e.jsx("div",{className:"hidden md:block h-full",children:e.jsx(C,{onFileSelect:l,className:"h-full"})})]})]}),e.jsx(K,{isOpen:a,onClose:()=>i(!1)}),e.jsx(H,{isOpen:_,onClose:()=>j(!1),onImageSelectForUpload:E,uploadSelectionMode:!0,imagesOnly:!0,chats:u})]})};export{oe as default};