https://ai-hugging.com/assets/merge-images-CwElSjat.js

1import{G as e,H as t,J as n,K as r,Lf as i,Rf as a,U as o,Vf as s,W as c,q as l}from"./messages-Bclc1oqp.js";import{t as u}from"./download-CSRk1olw.js";import{t as d}from"./image-CUTuc2l1.js";import{t as f}from"./support-widget-BHHeCn-5.js";import{n as p,t as m}from"./header-DGJB1FzG.js";import{t as h}from"./x-B0jsCznu.js";var g=s(a(),1),_=i();function v(){let[n,i]=(0,g.useState)(null),[a,s]=(0,g.useState)(null),[l,f]=(0,g.useState)(null),p=(0,g.useRef)(null);(0,g.useEffect)(()=>{if(!n||!a){f(null);return}let e=p.current;if(!e)return;let t=e.getContext(`2d`);if(!t)return;let r=(n,r)=>new Promise(i=>{let a=new Image;a.onload=()=>{let n=640/(a.width/a.height),o=(e.height-n)/2;t.drawImage(a,r,o,640,n),i()},a.src=n});t.clearRect(0,0,e.width,e.height),Promise.all([r(n,0),r(a,640)]).then(()=>{f(e.toDataURL(`image/png`))})},[n,a]);function m(e,t){let n=e.target.files?.[0];if(!n||!n.type.startsWith(`image/`))return;let r=new FileReader;r.onload=()=>t(String(r.result)),r.readAsDataURL(n)}function v(){if(!l)return;let e=document.createElement(`a`);e.href=l,e.download=`merged_image.png`,e.click()}return(0,_.jsxs)(`section`,{className:`mx-auto mt-10 w-full max-w-5xl px-6 pb-20`,children:[(0,_.jsxs)(`div`,{className:`rounded-lg p-6 shadow-lg`,children:[(0,_.jsx)(`div`,{className:`mb-6 flex gap-4`,children:[{title:r(),value:n,set:i},{title:e(),value:a,set:s}].map(e=>(0,_.jsxs)(`div`,{className:`w-1/2`,children:[(0,_.jsx)(`h3`,{className:`mb-2 text-center text-white`,children:e.title}),(0,_.jsxs)(`label`,{className:`relative my-10 flex h-[256px] min-h-[256px] w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg border border-gray-700 bg-gray-800 transition-all duration-300 hover:border-gray-500`,style:{height:256},children:[e.value?(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(`img`,{src:e.value,alt:e.title,className:`mx-auto h-[256px] object-contain`,style:{height:256}}),(0,_.jsx)(`button`,{type:`button`,onClick:t=>{t.preventDefault(),t.stopPropagation(),e.set(``)},className:`absolute top-2 right-2 rounded-full bg-black/70 p-1 text-white`,"aria-label":`Remove image`,children:(0,_.jsx)(h,{className:`size-4`})})]}):(0,_.jsxs)(`div`,{className:`text-center text-sm text-white`,children:[(0,_.jsx)(d,{className:`mx-auto mb-5 size-12 text-rose-400`}),(0,_.jsx)(`span`,{children:o()})]}),(0,_.jsx)(`input`,{type:`file`,accept:`image/*`,className:`hidden`,onChange:t=>m(t,e.set)})]})]},e.title))}),(0,_.jsx)(`button`,{type:`button`,onClick:()=>{n&&a&&f(l)},disabled:!n||!a,className:`w-full rounded bg-rose-400 px-4 py-2 font-bold text-white hover:bg-rose-300 disabled:cursor-not-allowed disabled:opacity-50`,children:c()}),(0,_.jsx)(`canvas`,{ref:p,width:1280,height:768,className:`hidden`})]}),l&&(0,_.jsx)(`div`,{className:`mt-8 rounded-lg border border-none shadow-sm`,children:(0,_.jsxs)(`div`,{className:`p-6`,children:[(0,_.jsx)(`div`,{className:`overflow-hidden rounded-md border border-gray-600`,children:(0,_.jsx)(`img`,{src:l,alt:`Combined preview`,className:`h-auto w-full`})}),(0,_.jsxs)(`button`,{type:`button`,onClick:v,className:`mt-6 flex h-10 w-full items-center justify-center gap-2 rounded-md bg-rose-400 px-4 py-3 text-white transition-colors hover:bg-rose-300`,children:[(0,_.jsx)(u,{className:`size-5`}),t()]})]})})]})}function y(){return(0,_.jsxs)(`div`,{className:`bg-background text-foreground flex min-h-screen flex-col`,children:[(0,_.jsx)(m,{}),(0,_.jsxs)(`main`,{className:`flex-1`,children:[(0,_.jsxs)(`section`,{className:`mx-auto max-w-7xl px-6 pt-20 pb-12 text-center lg:px-8 lg:pt-20`,children:[(0,_.jsx)(`h1`,{className:`text-4xl font-bold tracking-tight`,children:n()}),(0,_.jsx)(`h2`,{className:`mt-4 text-xl tracking-tight text-gray-400 md:text-2xl`,children:l()})]}),(0,_.jsx)(v,{})]}),(0,_.jsx)(p,{}),(0,_.jsx)(f,{})]})}export{y as component};