mishig's picture
mishig HF Staff
new build
f55b820
raw
history blame
7.45 kB
import{S as fe,i as me,s as he,k as u,a as z,q as ae,H as ge,l as f,m as v,h as c,c as H,r as ne,n as i,I as se,p as we,F as r,b as le,J as ce,K as X,L as be,M as ve,A as de,N as _e,o as ye,z as Ie,O as Ee,P as re}from"../../chunks/index-c0a82f06.js";const{document:Z,window:pe}=Ee;function De(d){let k,s,q,_,W,S,w,l,y,I,L,C,n,p,M,o,j,U,N,B,P,x,J,K,b,E,Y,T,G,F,V,Q,t;return{c(){k=u("link"),s=u("script"),_=u("script"),S=u("script"),l=z(),y=u("div"),I=u("canvas"),C=z(),n=u("div"),p=u("div"),M=z(),o=u("div"),j=u("p"),U=ae("pro tip: upload img by pasting OR dropping on the canvas"),N=z(),B=u("div"),P=u("label"),x=u("input"),J=ae(`
upload img`),K=z(),b=u("div"),E=u("input"),Y=z(),T=u("button"),G=ae("diffuse the f rest"),this.h()},l(e){const a=ge('[data-svelte="svelte-bw39ln"]',Z.head);k=f(a,"LINK",{href:!0,rel:!0}),s=f(a,"SCRIPT",{src:!0});var h=v(s);h.forEach(c),_=f(a,"SCRIPT",{src:!0});var g=v(_);g.forEach(c),S=f(a,"SCRIPT",{src:!0});var A=v(S);A.forEach(c),a.forEach(c),l=H(e),y=f(e,"DIV",{class:!0});var m=v(y);I=f(m,"CANVAS",{class:!0}),v(I).forEach(c),C=H(m),n=f(m,"DIV",{class:!0});var D=v(n);p=f(D,"DIV",{id:!0}),v(p).forEach(c),M=H(D),o=f(D,"DIV",{});var R=v(o);j=f(R,"P",{class:!0});var O=v(j);U=ne(O,"pro tip: upload img by pasting OR dropping on the canvas"),O.forEach(c),N=H(R),B=f(R,"DIV",{class:!0});var $=v(B);P=f($,"LABEL",{class:!0});var ee=v(P);x=f(ee,"INPUT",{accept:!0,style:!0,type:!0}),J=ne(ee,`
upload img`),ee.forEach(c),$.forEach(c),K=H(R),b=f(R,"DIV",{class:!0});var te=v(b);E=f(te,"INPUT",{type:!0,class:!0,placeholder:!0}),Y=H(te),T=f(te,"BUTTON",{class:!0});var ie=v(T);G=ne(ie,"diffuse the f rest"),ie.forEach(c),te.forEach(c),R.forEach(c),D.forEach(c),m.forEach(c),this.h()},h(){i(k,"href","https://cdnjs.cloudflare.com/ajax/libs/drawingboard.js/0.4.2/drawingboard.css"),i(k,"rel","stylesheet"),se(s.src,q="https://code.jquery.com/jquery-1.12.4.min.js")||i(s,"src",q),se(_.src,W="https://cdnjs.cloudflare.com/ajax/libs/drawingboard.js/0.4.2/drawingboard.min.js")||i(_,"src",W),se(S.src,w="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js")||i(S,"src",w),i(I,"class",L="border-[1.2px] desktop:mt-[34px] "+(d[5]?"":"hidden")),i(p,"id","board-container"),i(j,"class","no-hover:hidden mt-2 opacity-50"),i(x,"accept","image/*"),we(x,"display","none"),i(x,"type","file"),i(P,"class","with-hover:hidden border py-1 px-1.5 bg-slate-200 cursor-pointer"),i(B,"class","mt-1"),i(E,"type","text"),i(E,"class","border-2 py-1"),i(E,"placeholder","Add prompt"),i(T,"class","bg-blue-500 hover:bg-blue-700 text-white font-bold py-1.5 px-4"),i(b,"class",F="flex gap-x-2 mt-2 items-center justify-center "+(d[1]?"animate-pulse":"")),i(n,"class",V="flex flex-col items-center "+(d[1]?"pointer-events-none":"")),i(y,"class","flex flex-wrap gap-x-4 gap-y-2 justify-center my-8")},m(e,a){r(Z.head,k),r(Z.head,s),r(Z.head,_),r(Z.head,S),le(e,l,a),le(e,y,a),r(y,I),d[10](I),r(y,C),r(y,n),r(n,p),d[11](p),r(n,M),r(n,o),r(o,j),r(j,U),r(o,N),r(o,B),r(B,P),r(P,x),d[12](x),r(P,J),r(o,K),r(o,b),r(b,E),ce(E,d[0]),r(b,Y),r(b,T),r(T,G),Q||(t=[X(pe,"drop",be(ve(d[8]))),X(pe,"paste",d[9]),X(x,"change",d[7]),X(E,"input",d[13]),X(T,"click",d[6])],Q=!0)},p(e,[a]){a&32&&L!==(L="border-[1.2px] desktop:mt-[34px] "+(e[5]?"":"hidden"))&&i(I,"class",L),a&1&&E.value!==e[0]&&ce(E,e[0]),a&2&&F!==(F="flex gap-x-2 mt-2 items-center justify-center "+(e[1]?"animate-pulse":""))&&i(b,"class",F),a&2&&V!==(V="flex flex-col items-center "+(e[1]?"pointer-events-none":""))&&i(n,"class",V)},i:de,o:de,d(e){c(k),c(s),c(_),c(S),e&&c(l),e&&c(y),d[10](null),d[11](null),d[12](null),Q=!1,_e(t)}}}const oe=500,ue=3e3;function Ce(d,k,s){let q="",_=!1,W=!1,S,w,l,y,I,L,C,n=400,p,M,o,j=!1;async function U(){if(!l)return;const t=l.createImageData(w.width,w.height),e=t.data;for(let g=0,A=e.length;g<A;g+=4)e[g]=40*Math.random()*7,e[g+1]=40*Math.random()*7,e[g+2]=40*Math.random()*7,e[g+3]=255;const a=await createImageBitmap(t),h=performance.now()-y;l.globalAlpha=Math.min(h,ue)/ue,l.drawImage(a,0,0,n,n),_&&window.requestAnimationFrame(U)}function N(t){if(!l)return;const e=performance.now()-I;l.globalAlpha=Math.min(e,oe)/oe,l.drawImage(t,0,0,n,n),e<oe&&window.requestAnimationFrame(()=>N(t))}async function B(t){const e=t.toDataURL("png"),h=await(await fetch(e)).blob(),g=new File([h],"canvas shot.png",{type:"image/png"}),A=t.getContext("2d").getImageData(0,0,n,n),m=await createImageBitmap(A);return{imgFile:g,imgBitmap:m}}async function P(){if(!q)return alert("Please add prompt");if(!w||!l)return;s(1,_=!0),s(5,j=!1),K(),y=performance.now(),U();const{imgFile:t,imgBitmap:e}=await B(w),a=new FormData;a.append("prompt",q),a.append("strength","0.85"),a.append("image",t);try{const h=await fetch("https://sdb.pcuenca.net/i2i",{method:"POST",body:a}),g=JSON.parse(await h.text()),{images:A}=g;if(!A.length)return alert("All the results were flagged. Please try again with diffeerent sketch + prompt");const m=await Promise.all(A.map(async R=>{const O=new Image;return O.src=`data:image/png;base64, ${R}`,await new Promise(($,ee)=>{O.onload=()=>$(O)}),O}));s(1,_=!1),C&&clearInterval(C),s(5,j=!0);let D=0;I=performance.now(),N(m[D%m.length]),L=()=>{C&&clearInterval(C),I=performance.now(),D=D+1,N(m[D%m.length])},C=setInterval(()=>{D=D+1,I=performance.now(),N(m[D%m.length])},2500),!W&&m.length>1&&x()}catch(h){console.error(h),alert("Error happened, queue might be full. Please try again in a bit :)")}}function x(){const t=document.createElement("div");t.className="drawing-board-control";const e=document.createElement("button");e.innerHTML="\u23EF",e.onclick=L,t.append(e);const a=document.querySelector(".drawing-board-controls");a&&(a.appendChild(t),W=!0,s(2,p.onclick=()=>{C&&clearInterval(C)},p))}function J(){const t=document.createElement("div");t.className="drawing-board-control";const e=document.createElement("button");e.innerHTML="\u{1F9F9}",e.onclick=()=>{l==null||l.clearRect(0,0,n,n)},t.append(e);const a=document.querySelector(".drawing-board-controls");a&&a.appendChild(t)}function K(){const t=o.getContext("2d");s(4,o.width=w.width,o),s(4,o.height=w.height,o),t.drawImage(w,0,0)}async function b(t){const e=new Image;e.src=URL.createObjectURL(t),await new Promise((g,A)=>{e.onload=()=>g(e)});const{width:a,height:h}=e;l==null||l.drawImage(e,0,0,a,h,0,0,n,n)}function E(){var e;const t=(e=M.files)==null?void 0:e[0];t&&b(t)}function Y(t){var h;if(!((h=t.dataTransfer)!=null&&h.files))return;t.preventDefault();const a=Array.from(t.dataTransfer.files)[0];b(a)}function T(t){if(!t.clipboardData)return;const e=Array.from(t.clipboardData.files);if(e.length===0)return;t.preventDefault();const a=e[0];b(a)}ye(async()=>{const{innerWidth:t}=window;n=Math.min(n,Math.floor(t*.75)),s(2,p.style.width=`${n}px`,p),s(2,p.style.height=`${n}px`,p),s(4,o.style.width=`${n}px`,o),s(4,o.style.height=`${n}px`,o),await Ie(),S=new window.DrawingBoard.Board("board-container",{size:10,controls:["Color",{Size:{type:"dropdown"}},{DrawingMode:{filler:!1}}],webStorage:!1,enlargeYourContainer:!0}),w=S.canvas,l=w.getContext("2d"),w.ondragover=function(e){return e.preventDefault(),!1},J()});function G(t){re[t?"unshift":"push"](()=>{o=t,s(4,o)})}function F(t){re[t?"unshift":"push"](()=>{p=t,s(2,p)})}function V(t){re[t?"unshift":"push"](()=>{M=t,s(3,M)})}function Q(){q=this.value,s(0,q)}return[q,_,p,M,o,j,P,E,Y,T,G,F,V,Q]}class je extends fe{constructor(k){super(),me(this,k,Ce,De,he,{})}}export{je as default};