| (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[931],{2649:function(e,t,r){Promise.resolve().then(r.bind(r,7646))},7646:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return Home}});var a=r(7437),n=r(2265),s=r(6691),o=r.n(s),l=r(5051);function Modal(e){let{currentImage:t,setCurrentImage:r}=e,n=t?"https://unsplash.com/photos/".concat(t.id):null,s=t?"https://images.unsplash.com/".concat(t.url,"?auto=format&fit=crop&w=480&q=80"):null;return(0,a.jsx)("div",{className:"fixed inset-0 z-30 backdrop-blur-2xl w-full h-full bg-black top-0 left-0 transition",style:{backgroundColor:"rgba(0, 0, 0, ".concat(t?.8:0,")"),opacity:t?1:0,pointerEvents:t?"auto":"none"},children:t&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o(),{alt:"",className:"transform rounded-lg transition will-change-auto",style:{transform:"translate3d(0, 0, 0)"},layout:"fill",objectFit:"contain",src:s,unoptimized:!0}),(0,a.jsx)("div",{className:"absolute top-0 left-0 flex items-center gap-2 p-3 text-white",children:(0,a.jsx)("button",{onClick:()=>r(null),className:"rounded-full bg-black/50 p-2 text-white/75 backdrop-blur-lg transition hover:bg-black/75 hover:text-white",children:(0,a.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor","aria-hidden":"true",className:"h-5 w-5",children:(0,a.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})})})}),(0,a.jsxs)("div",{className:"absolute top-0 right-0 flex items-center gap-2 p-3 text-white",children:[(0,a.jsx)("a",{href:n,className:"rounded-full bg-black/50 p-2 text-white/75 backdrop-blur-lg transition hover:bg-black/75 hover:text-white",target:"_blank",title:"View on Unsplash",rel:"noreferrer",children:(0,a.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor","aria-hidden":"true",className:"h-5 w-5",children:(0,a.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"})})}),(0,a.jsx)("button",{onClick:()=>(function(e,t){fetch(e,{headers:new Headers({Origin:location.origin}),mode:"cors"}).then(e=>e.blob()).then(e=>{!function(e,t){let r=document.createElement("a");r.href=e,r.download=t,r.click(),r.remove()}(window.URL.createObjectURL(e),t)}).catch(e=>console.error(e))})(s,"".concat(t.id,".png")),className:"rounded-full bg-black/50 p-2 text-white/75 backdrop-blur-lg transition hover:bg-black/75 hover:text-white",title:"Download",children:(0,a.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor","aria-hidden":"true",className:"h-5 w-5",children:(0,a.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"})})})]})]})})}function SearchBar(e){let{search:t}=e;return(0,a.jsxs)("form",{onSubmit:e=>{e.preventDefault();let r=new FormData(e.target),a=r.get("text");t(a)},className:"relative mb-2",children:[(0,a.jsx)("div",{className:"absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none",children:(0,a.jsx)("svg",{className:"w-4 h-4 text-gray-500 dark:text-gray-400","aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 20 20",children:(0,a.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"})})}),(0,a.jsx)("input",{type:"search",name:"text",id:"default-search",className:"block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500",placeholder:"Search for images...",required:!0}),(0,a.jsx)("button",{type:"submit",className:"text-white absolute right-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",children:"Search"})]})}function ImageGrid(e){let{images:t,setCurrentImage:r}=e;return(0,a.jsx)("div",{className:"columns-2 gap-4 sm:columns-3 xl:columns-4 2xl:columns-5",children:t&&t.map(e=>{let{id:t,url:n,ar:s,blur:i}=e;return(0,a.jsx)("div",{href:"https://unsplash.com/photos/".concat(t),className:"after:content group cursor-pointer relative mb-4 block w-full after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:shadow-highlight",onClick:()=>{r({id:t,url:n,ar:s,blur:i})},children:(0,a.jsx)(o(),{alt:"",className:"transform rounded-lg brightness-90 transition will-change-auto group-hover:brightness-110",style:{transform:"translate3d(0, 0, 0)"},placeholder:"blur",blurDataURL:function(e){if(!e)return;let t=(0,l.Jx)(e,32,32),r=document.createElement("canvas");r.width=32,r.height=32;let a=r.getContext("2d"),n=a.createImageData(32,32);return n.data.set(t),a.putImageData(n,0,0),r.toDataURL()}(i),src:"https://images.unsplash.com/".concat(n,"?auto=format&fit=crop&w=480&q=80"),width:480,height:480/s,unoptimized:!0})},t)})})}function Home(){let[e,t]=(0,n.useState)(null),[s,o]=(0,n.useState)(null),[l,i]=(0,n.useState)(null),c=(0,n.useRef)(null);(0,n.useEffect)(()=>{c.current||(c.current=new Worker(r.tu(new URL(r.p+r.u(908),r.b)),{type:void 0}));let onMessageReceived=e=>{switch(e.data.status){case"initiate":t(!1);break;case"ready":t(!0);break;case"complete":o(e.data.output)}};return c.current.addEventListener("message",onMessageReceived),()=>c.current.removeEventListener("message",onMessageReceived)});let u=(0,n.useCallback)(e=>{c.current&&c.current.postMessage({text:e})},[]);return(0,a.jsxs)("main",{className:"mx-auto max-w-[1960px] p-4 relative",children:[(0,a.jsx)(Modal,{currentImage:l,setCurrentImage:i}),(0,a.jsx)(SearchBar,{search:u}),!1===e&&(0,a.jsx)("div",{className:"z-10 fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex items-center justify-center",children:(0,a.jsx)("div",{className:"text-white text-2xl font-bold",children:"Loading model and database..."})}),(0,a.jsx)(ImageGrid,{images:s,setCurrentImage:i})]})}}},function(e){e.O(0,[482,971,864,744],function(){return e(e.s=2649)}),_N_E=e.O()}]); |