|
import{S as Ue,i as ze,s as He,k as c,a as q,q as A,H as Ke,l as d,m as p,h as s,c as F,r as L,n,I as Ie,p as We,F as t,b as he,J as Ve,K as se,L as Ye,M as Ge,A as Me,N as Je,o as Qe,z as Xe,O as Ze,P as Ee}from"../../chunks/index-c0a82f06.js";const{document:de,window:Ne}=Ze;function $e(l){let C,r,x,_,Y,I,k,h,j,P,G,S,o,b,O,u,E,f,$,B,oe,J,re,U,ie,Q,z,M,V,le,ee,te,T,H,e,a,i,w,v,m,D,N,K,ce,W,me,ge,X,be,we,Z,ve,ye,Ce;return{c(){C=c("link"),r=c("script"),_=c("script"),I=c("script"),h=q(),j=c("div"),P=c("canvas"),S=q(),o=c("div"),b=c("div"),O=q(),u=c("div"),E=c("div"),f=c("input"),$=q(),B=c("button"),oe=A("diffuse the f rest"),re=q(),U=c("p"),ie=A("pro tip: upload img by dropping on the canvas"),Q=q(),z=c("div"),M=c("label"),V=c("input"),le=A(` |
|
You can read more in the `),Z=d(R,"A",{href:!0,rel:!0});var Be=p(Z);ve=L(Be,"model card"),Be.forEach(s),R.forEach(s),ne.forEach(s),this.h()},h(){n(C,"href","https://cdnjs.cloudflare.com/ajax/libs/drawingboard.js/0.4.2/drawingboard.css"),n(C,"rel","stylesheet"),Ie(r.src,x="https://code.jquery.com/jquery-1.12.4.min.js")||n(r,"src",x),Ie(_.src,Y="https://cdnjs.cloudflare.com/ajax/libs/drawingboard.js/0.4.2/drawingboard.min.js")||n(_,"src",Y),Ie(I.src,k="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js")||n(I,"src",k),n(P,"class",G="border-[1.2px] desktop:mt-[34px] "+(l[5]?"":"hidden")),n(b,"id","board-container"),n(f,"type","text"),n(f,"class","border-2 py-1"),n(f,"placeholder","Add prompt"),n(f,"maxlength","200"),n(B,"class","bg-blue-500 hover:bg-blue-700 text-white font-bold py-1.5 px-4"),n(E,"class",J="flex gap-x-2 mt-3 items-center justify-center "+(l[1]?"animate-pulse":"")),n(U,"class","hidden desktop:inline mt-2 opacity-50"),n(V,"accept","image/*"),We(V,"display","none"),n(V,"type","file"),n(M,"class","inline desktop:hidden border py-1 px-1.5 bg-slate-200 cursor-pointer"),n(z,"class","mt-2"),n(o,"class",ee="flex flex-col items-center "+(l[1]?"pointer-events-none":"")),n(j,"class","flex flex-wrap gap-x-4 gap-y-2 justify-center my-8"),n(H,"class","text-center"),n(N,"href","https://huggingface.co/spaces/CompVis/stable-diffusion-license"),n(N,"rel","nofollow"),n(W,"href","https://huggingface.co/spaces/CompVis/stable-diffusion-license"),n(W,"rel","nofollow"),n(X,"href","https://laion.ai/blog/laion-5b/"),n(X,"rel","nofollow"),n(Z,"href","https://huggingface.co/CompVis/stable-diffusion-v1-4"),n(Z,"rel","nofollow"),n(T,"class","prose-sm px-4 md:px-8 lg:px-24 mb-8")},m(g,y){t(de.head,C),t(de.head,r),t(de.head,_),t(de.head,I),he(g,h,y),he(g,j,y),t(j,P),l[11](P),t(j,S),t(j,o),t(o,b),l[12](b),t(o,O),t(o,u),t(u,E),t(E,f),Ve(f,l[0]),t(E,$),t(E,B),t(B,oe),t(u,re),t(u,U),t(U,ie),t(u,Q),t(u,z),t(z,M),t(M,V),l[14](V),t(M,le),he(g,te,y),he(g,T,y),t(T,H),t(H,e),t(T,a),t(T,i),t(i,w),t(T,v),t(T,m),t(m,D),t(m,N),t(N,K),t(m,ce),t(m,W),t(W,me),t(m,ge),t(m,X),t(X,be),t(m,we),t(m,Z),t(Z,ve),ye||(Ce=[se(Ne,"drop",Ye(Ge(l[8]))),se(Ne,"paste",l[9]),se(f,"keydown",l[10]),se(f,"input",l[13]),se(B,"click",l[6]),se(V,"change",l[7])],ye=!0)},p(g,y){y[0]&32&&G!==(G="border-[1.2px] desktop:mt-[34px] "+(g[5]?"":"hidden"))&&n(P,"class",G),y[0]&1&&f.value!==g[0]&&Ve(f,g[0]),y[0]&2&&J!==(J="flex gap-x-2 mt-3 items-center justify-center "+(g[1]?"animate-pulse":""))&&n(E,"class",J),y[0]&2&&ee!==(ee="flex flex-col items-center "+(g[1]?"pointer-events-none":""))&&n(o,"class",ee)},i:Me,o:Me,d(g){s(C),s(r),s(_),s(I),g&&s(h),g&&s(j),l[11](null),l[12](null),l[14](null),g&&s(te),g&&s(T),ye=!1,Je(Ce)}}}const De=500,Re=3e3;function et(){window.createImageBitmap=async function(l){return new Promise((C,r)=>{const x=document.createElement("canvas"),_=x.getContext("2d");x.width=l.width,x.height=l.height,_.putImageData(l,0,0);const Y=x.toDataURL(),I=document.createElement("img");I.addEventListener("load",()=>{C(I)}),I.src=Y})}}function tt(){const l=document.querySelectorAll("a");for(const C of l)C.target="_blank"}function at(l,C,r){let x="",_=!1,Y=!1,I,k,h,j,P,G,S,o=400,b,O,u,E=!1,f=[];async function $(){if(!h)return;const e=h.createImageData(k.width,k.height),a=e.data;for(let v=0,m=a.length;v<m;v+=4)a[v]=40*Math.random()*7,a[v+1]=40*Math.random()*7,a[v+2]=40*Math.random()*7,a[v+3]=255;const i=await createImageBitmap(e),w=performance.now()-j;h.globalAlpha=Math.min(w,Re)/Re,h.drawImage(i,0,0,o,o),_&&window.requestAnimationFrame($)}function B(e){if(!h)return;const a=performance.now()-P;h.globalAlpha=Math.min(a,De)/De,h.drawImage(e,0,0,o,o),a<De&&window.requestAnimationFrame(()=>B(e))}async function oe(e){const a=e.toDataURL("png"),w=await(await fetch(a)).blob(),v=new File([w],"canvas shot.png",{type:"image/png"}),m=e.getContext("2d").getImageData(0,0,o,o),D=await createImageBitmap(m);return{imgFile:v,imgBitmap:D}}async function J(){if(!x)return alert("Please add prompt");if(!k||!h)return;S&&clearInterval(S),r(1,_=!0),r(5,E=!1),ie(),j=performance.now(),$();const{imgFile:e,imgBitmap:a}=await oe(k),i=new FormData;i.append("prompt",x),i.append("strength","0.1"),i.append("image",e);try{const w=await fetch("https://sdb.pcuenca.net/i2i",{method:"POST",body:i}),v=JSON.parse(await w.text()),{images:m}=v;if(!m.length)return alert("All the results were flagged. Please try again with diffeerent sketch + prompt");f=await Promise.all(m.map(async N=>{const K=new Image;return K.src=`data:image/png;base64, ${N}`,await new Promise((ce,W)=>{K.onload=()=>ce(K)}),K})),r(5,E=!0);let D=0;P=performance.now(),B(f[D%f.length]),G=()=>{S&&clearInterval(S),P=performance.now(),D=D+1,B(f[D%f.length])},S=setInterval(()=>{D=D+1,P=performance.now(),B(f[D%f.length])},2500),Y||re()}catch(w){console.error(w),alert("Error happened, queue might be full. Please try again in a bit :)")}finally{r(1,_=!1)}}function re(){const e=document.createElement("div");e.className="drawing-board-control";const a=document.createElement("button");a.innerHTML="\u23EF",a.onclick=G,e.append(a);const i=document.querySelector(".drawing-board-controls");i&&f.length>1&&(i.appendChild(e),Y=!0,r(2,b.onclick=()=>{S&&clearInterval(S)},b))}function U(){const e=document.createElement("div");e.className="drawing-board-control";const a=document.createElement("button");a.innerHTML="\u{1F9F9}",a.onclick=()=>{h==null||h.clearRect(0,0,o,o),f=[],r(5,E=!1)},e.append(a);const i=document.querySelector(".drawing-board-controls");i&&i.appendChild(e)}function ie(){const e=u.getContext("2d");r(4,u.width=k.width,u),r(4,u.height=k.height,u),e.drawImage(k,0,0)}async function Q(e){S&&clearInterval(S);const a=new Image;a.src=URL.createObjectURL(e),await new Promise((v,m)=>{a.onload=()=>v(a)});const{width:i,height:w}=a;h==null||h.drawImage(a,0,0,i,w,0,0,o,o)}function z(){var a;const e=(a=O.files)==null?void 0:a[0];e&&Q(e)}function M(e){var w;if(!((w=e.dataTransfer)!=null&&w.files))return;e.preventDefault();const i=Array.from(e.dataTransfer.files)[0];Q(i)}function V(e){if(!e.clipboardData)return;const a=Array.from(e.clipboardData.files);if(a.length===0)return;e.preventDefault();const i=a[0];Q(i)}function le(e){e.code==="Enter"&&(e.preventDefault(),J())}Qe(async()=>{typeof createImageBitmap>"u"&&et();const{innerWidth:e}=window;o=Math.min(o,Math.floor(e*.75)),r(2,b.style.width=`${o}px`,b),r(2,b.style.height=`${o}px`,b),r(4,u.style.width=`${o}px`,u),r(4,u.style.height=`${o}px`,u),await Xe(),I=new window.DrawingBoard.Board("board-container",{size:10,controls:["Color",{Size:{type:"dropdown"}},{DrawingMode:{filler:!1}}],webStorage:!1,enlargeYourContainer:!0}),k=I.canvas,h=k.getContext("2d"),k.ondragover=function(a){return a.preventDefault(),!1},U(),tt()});function ee(e){Ee[e?"unshift":"push"](()=>{u=e,r(4,u)})}function te(e){Ee[e?"unshift":"push"](()=>{b=e,r(2,b)})}function T(){x=this.value,r(0,x)}function H(e){Ee[e?"unshift":"push"](()=>{O=e,r(3,O)})}return[x,_,b,O,u,E,J,z,M,V,le,ee,te,T,H]}class st extends Ue{constructor(C){super(),ze(this,C,at,$e,He,{},null,[-1,-1])}}export{st as default}; |
