https://gardify.de/_next/static/chunks/app/scan/page-80c86944bc2db05f.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6694],{2827:(e,t,n)=>{"use strict";n.d(t,{G8:()=>a,Po:()=>s,Tt:()=>i});let s="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mOsmmdcDwAEsQHMPljKRgAAAABJRU5ErkJggg==",a=5242880,i="https://meetings-eu1.hubspot.com/mwolfs/gardify-team"},4205:(e,t,n)=>{"use strict";n.d(t,{ScanClientWrapper:()=>N});var s=n(5155),a=n(5772),i=n(2115),l=n(6545),r=n(6072),c=n(5894),d=n(8442),o=n(6677),m=n(7673),u=n(9339);let h=(0,u.createServerReference)("405ea6c8620b341325e5a81191ff812e6159fc838a",u.callServer,void 0,u.findSourceMapURL,"getPlantScanResult");var g=n(2827);let f="gardify-session-storage-change";var x=n(8500),p=n.n(x);function j({scanResult:e}){let t=e.images&&0!==e.images.length?e.images.slice(0,4):[];return(0,s.jsx)(c.default,{xs:12,className:"alternative-bg rounded-4 p-3 shadow",children:(0,s.jsxs)(r.default,{className:"g-4 align-items-center",children:[(0,s.jsx)(c.default,{xs:12,md:6,children:(0,s.jsx)("div",{className:"d-flex gap-2",children:t.map(t=>(0,s.jsx)("div",{className:"rounded overflow-hidden",style:{width:75,height:75},children:(0,s.jsx)(a.default,{src:t.image.thumbnailLink,alt:e.species.scientificNameWithoutAuthor,className:"w-100 h-100 object-fit-cover",width:75,height:75,placeholder:"blur",blurDataURL:g.Po})},t.image.thumbnailLink))})}),(0,s.jsxs)(c.default,{xs:12,md:6,className:"d-flex flex-row justify-content-between align-items-center gap-4",children:[(0,s.jsxs)("div",{className:"d-flex flex-column flex-grow-0 gap-2",children:[(0,s.jsxs)("div",{className:"d-flex flex-column",children:[(0,s.jsx)("span",{className:"text-muted fst-italic",children:e.species.scientificNameWithoutAuthor}),(0,s.jsx)("span",{className:"fw-bold",children:e.species.commonNames[0]})]}),(0,s.jsx)(p(),{href:{pathname:"/search/plants",query:{q:e.species.scientificNameWithoutAuthor}},className:"btn btn-sm btn-secondary",children:"In Gardify suchen"})]}),(0,s.jsx)("div",{className:"d-flex align-items-center justify-content-center bg-primary rounded-circle p-4",style:{width:67.5,height:67.5},children:(0,s.jsxs)("span",{className:"text-white text-nowrap fw-bold fs-5",children:[(100*e.score).toFixed(0)," %"]})})]})]})})}function b({scanResult:e}){let{results:t}=e;return(0,s.jsx)(r.default,{className:"g-3 m-0",children:t.map(e=>(0,s.jsx)(j,{scanResult:e},`${e.species.scientificNameWithoutAuthor}-${e.score}`))})}function w(e){let{acceptedFileTypes:t,name:n,multiple:a,capture:l,isMobile:r,fileCallback:c}=e,d=(0,i.useRef)(null),o=async e=>{if(e.preventDefault(),e.stopPropagation(),d.current?.classList.remove("bg-light"),e.dataTransfer.getData("isDropzoneFile").includes("false"))return;let t=[...e.dataTransfer.files];t&&t.length>0&&c(t)},m=async e=>{let t=e.target.files?[...e.target.files]:[];t&&0!==t.length&&c(t)};return(0,s.jsxs)("div",{ref:d,className:"d-flex flex-column justify-content-center align-items-center border border-secondary rounded-2 gap-4 p-4 w-100",onDragEnter:e=>{e.preventDefault(),e.stopPropagation(),e.dataTransfer.dropEffect="copy",d.current?.classList.add("bg-light")},onDragOver:e=>{e.preventDefault(),e.stopPropagation(),d.current?.classList.add("bg-light")},onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),d.current?.classList.remove("bg-light")},onDrop:e=>o(e),children:[(0,s.jsx)("input",{id:`fileSelect${n}`,type:"file",className:"d-none",accept:t,multiple:a,onChange:e=>m(e)}),r&&l&&(0,s.jsx)("input",{id:`cameraCapture${n}`,type:"file",className:"d-none",accept:t,capture:l,onChange:e=>m(e)}),(0,s.jsxs)("div",{className:"d-flex flex-column gap-2",children:[(0,s.jsx)("label",{htmlFor:`fileSelect${n}`,className:"btn btn-primary",children:r?`${n} aus Galerie`:`${n} hochladen`}),r&&l&&(0,s.jsxs)("label",{htmlFor:`cameraCapture${n}`,className:"btn btn-primary",children:[n," mit Kamera"]})]}),!r&&(0,s.jsxs)("span",{className:"text-secondary small",children:["Oder ziehe ",a?"die":"das"," ",n," zum Hochladen hierher."]})]})}function y(e){let{isMobile:t,onFileSelect:n}=e;return(0,s.jsxs)("div",{className:"d-flex flex-column justify-content-center align-items-center gap-3 alternative-bg rounded-4 shadow p-4",children:[(0,s.jsx)(w,{name:"Bild",multiple:!1,acceptedFileTypes:"image/*",isMobile:t,capture:"environment",fileCallback:e=>{e.length>0&&n?.(e[0])}}),(0,s.jsxs)("div",{className:"d-flex flex-column gap-2",children:[(0,s.jsx)("strong",{children:"F\xfcr optimale Ergebnisse beachte bitte Folgendes:"}),(0,s.jsxs)("ul",{className:"mb-0",children:[(0,s.jsx)("li",{children:"Stelle sicher, dass nur die zu bestimmende Pflanze auf dem Foto zu sehen ist."}),(0,s.jsx)("li",{children:"Fotografiere Bl\xfcten, Bl\xe4tter, ggf. Fr\xfcchte sowie St\xe4ngel oder Stamm m\xf6glichst zentriert und scharf."})]})]})]})}function N({isMobile:e}){var t,u;let x,p,j,[w,v]=(t="gardify_scan_session",u=e=>null!==e&&Date.now()-e.timestamp<864e5&&Array.isArray(e.result?.results),x=(0,i.useCallback)(e=>{let n=n=>{n.detail===t&&e()};return window.addEventListener(f,n),()=>window.removeEventListener(f,n)},[t]),p=(0,i.useCallback)(()=>window.sessionStorage.getItem(t),[t]),j=(0,i.useSyncExternalStore)(x,p,()=>null),[(0,i.useMemo)(()=>

1{if(null===j)return null;try{let e=JSON.parse(j);if(u&&!u(e))return null;return e}catch{return null}},[j,null,u]),(0,i.useCallback)(e=>{let n=window.sessionStorage.getItem(t),s=null;try{null!==n&&(s=JSON.parse(n))}catch{}let a=e instanceof Function?e(s):e;try{null==a?window.sessionStorage.removeItem(t):window.sessionStorage.setItem(t,JSON.stringify(a))}catch{}window.dispatchEvent(new CustomEvent(f,{detail:t}))},[t,null])]),[A,S]=(0,i.useState)(!1),[E,k]=(0,i.useState)(!1),[C,L]=(0,i.useState)(null),F=(0,i.useSyncExternalStore)(()=>()=>{},()=>!0,()=>!1),P=w?.result??null,z=w?.imagePreview??null,D=async e=>new Promise((t,n)=>{let s=document.createElement("img");s.src=URL.createObjectURL(e),s.onload=()=>{let e=document.createElement("canvas");e.width=s.width,e.height=s.height;let a=e.getContext("2d");a?(a.drawImage(s,0,0),e.toBlob(e=>{e?t(new File([e],"scan.jpg",{type:"image/jpeg"})):n(Error("Failed to convert image to blob."))},"image/jpeg")):n(Error("Failed to get canvas context."))},s.onerror=()=>{n(Error("Failed to load image for conversion."))}}),R=async e=>{try{let t=(await n.e(2e3).then(n.t.bind(n,5079,23))).default,s=await t({blob:e,toType:"image/jpeg",quality:.8});return new File([Array.isArray(s)?s[0]:s],"scan.jpg",{type:"image/jpeg"})}catch(e){throw Error("Unable to convert HEIC image to JPEG: "+e)}},U=async e=>{if("image/jpeg"===e.type||"image/png"===e.type)return e;let t=async()=>"image/heic"===e.type||"image/heif"===e.type||e.name.toLowerCase().endsWith(".heic")||e.name.toLowerCase().endsWith(".heif")?await R(e):await D(e);try{return await t()}catch{return e}},O=async e=>{let t;if(A)return;if(e.size>g.G8)return void L("Die Datei ist zu gro\xdf. Maximal 5 MB erlaubt.");S(!0),L(null),e=await U(e);let[{result:n,error:s},a]=await Promise.all([h(e),(t=e,new Promise((e,n)=>{let s=document.createElement("img"),a=URL.createObjectURL(t);s.src=a,s.onload=()=>{URL.revokeObjectURL(a);let t=Math.min(1,300/s.width,300/s.height),i=document.createElement("canvas");i.width=Math.round(s.width*t),i.height=Math.round(s.height*t);let l=i.getContext("2d");l?(l.drawImage(s,0,0,i.width,i.height),e(i.toDataURL("image/jpeg",.7))):n(Error("Failed to get canvas context."))},s.onerror=()=>{URL.revokeObjectURL(a),n(Error("Failed to load image for thumbnail."))}})).catch(()=>"")]);if(s||!n){L(s?.message||"Fehler beim Scannen der Pflanze."),S(!1);return}v({result:n,imagePreview:a,timestamp:Date.now()}),S(!1)},B=()=>{v(null)};return(0,s.jsxs)("div",{className:"scan-client-wrapper d-flex justify-content-center align-items-center",children:[F?P?P.results.length>0?(0,s.jsxs)("div",{className:"d-flex flex-column gap-3",children:[z&&(0,s.jsxs)("div",{className:"alternative-bg rounded-4 shadow p-3 d-flex align-items-center justify-content-between gap-3",children:[(0,s.jsxs)("div",{children:[(0,s.jsx)("p",{className:"fw-semibold mb-1",children:"Letzte Analyse"}),(0,s.jsx)("p",{className:"text-muted small mb-0",children:"Wir haben dein Foto und die Ergebnisse f\xfcr dich zwischengespeichert. So kannst du sie direkt wieder aufrufen."})]}),(0,s.jsx)(a.default,{src:z,alt:"Gescanntes Bild",width:96,height:96,unoptimized:!0,className:"rounded-3 object-fit-cover flex-shrink-0",style:{width:96,height:96}})]}),(0,s.jsxs)("h2",{className:"fs-3",children:["Scan Ergebnisse"," ",(0,s.jsxs)("span",{className:"small",children:["(",P.results.length,")"]})]}),(0,s.jsxs)("div",{className:"d-flex flex-row justify-content-between align-items-center",children:[(0,s.jsx)("button",{className:"btn btn-primary",onClick:B,children:"Neuen Scan starten"}),(0,s.jsx)("button",{type:"button",className:"btn btn-primary rounded-circle d-flex align-items-center justify-content-center fs-4 p-0",style:{width:"48px",height:"48px"},onClick:()=>k(!0),children:"?"})]}),(0,s.jsx)(b,{scanResult:P}),(0,s.jsxs)("div",{className:"d-flex flex-column align-items-center justify-content-center mt-4",children:[(0,s.jsx)("h4",{children:"Sieht nicht nach deiner Pflanze aus? "}

1),(0,s.jsx)("p",{className:"text-muted",children:"Versuche es nochmal mit einem anderen Bild."}),(0,s.jsx)("button",{className:"btn btn-primary",onClick:B,children:"Neuen Scan starten"})]})]}):(0,s.jsxs)("div",{className:"d-flex flex-column align-items-center justify-content-center gap-3",children:[(0,s.jsxs)("div",{className:"d-flex align-items-center justify-content-center flex-column flex-md-row gap-3",children:[(0,s.jsxs)("div",{className:"text-center",children:[(0,s.jsx)("h4",{children:"Es tut uns leid."}),(0,s.jsxs)("p",{className:"mb-0",children:["Wir konnten keine Pflanzen finden.",(0,s.jsx)("br",{}),"Versuche es nochmal mit einem anderen Bild."]})]}),(0,s.jsx)(a.default,{src:"/assets/images/decorative/tulps.svg",width:145,height:200,alt:"Dekorative Tulpen"})]}),(0,s.jsx)("button",{className:"btn btn-primary",onClick:B,children:"Neuen Scan starten"})]}):(0,s.jsx)(r.default,{className:"justify-content-center mt-2 mt-md-5",children:(0,s.jsxs)(c.default,{xs:12,lg:8,className:"mx-auto",children:[C&&(0,s.jsx)(d.A,{variant:"danger",className:"mb-3",children:C}),!A&&(0,s.jsx)(y,{isMobile:e,onFileSelect:O}),A&&(0,s.jsxs)("div",{className:"d-flex flex-column justify-content-center align-items-center gap-3",children:[(0,s.jsx)(l.A,{animation:"grow",role:"status",className:"text-primary"}),(0,s.jsx)("span",{className:"text-secondary text-nowrap",children:"Die Pflanze wird bestimmt..."})]})]})}):(0,s.jsx)(l.A,{animation:"grow",role:"status",className:"text-primary mt-4"}),(0,s.jsx)(o.A,{show:E,centered:!0,onHide:()=>k(!1),contentClassName:"rounded-4 p-3",children:(0,s.jsxs)(m.A,{children:[(0,s.jsx)("h3",{children:"Wie funktioniert der Pflanzenscan?"}),(0,s.jsx)("p",{children:'Es wird zun\xe4chst versucht, die von dir fotografierte Pflanzenart zu ermitteln. \xdcber den Button "In Gardify suchen" werden dir dann alle bereits in Gardify hinterlegten Sorten angezeigt und du kannst sie direkt in deinen Garten abspeichern.'}),(0,s.jsx)("button",{className:"btn btn-primary w-100",onClick:()=>k(!1),children:"Alles klar"})]})})]})}},6600:(e,t,n)=>{Promise.resolve().then(n.bind(n,7979)),Promise.resolve().then(n.bind(n,4205))}},e=>{e.O(0,[8500,8437,6765,7182,6677,2346,8441,3794,7358],()=>e(e.s=6600)),_N_E=e.O()}]);