mishig's picture
mishig HF Staff
new build
240cebb
raw
history blame
5.36 kB
import{S as te,i as ae,s as ne,k as v,a as V,q as J,H as se,l as y,m as D,h as p,c as z,r as K,n as l,I as W,F as d,b as Y,J as G,K as Q,A as X,L as re,o as oe,z as ie,M as le,N as Z}from"../../chunks/index-3db9fbe0.js";const{document:U}=le;function ce(h){let E,s,j,g,P,u,r,I,S,M,o,i,_,n,m,q,w,T,N,F,k,L,A,O,t;return{c(){E=v("link"),s=v("script"),g=v("script"),u=V(),r=v("div"),I=v("canvas"),M=V(),o=v("div"),i=v("div"),_=V(),n=v("div"),m=v("input"),q=V(),w=v("button"),T=J("diffuse the f rest"),F=V(),k=v("p"),L=J("pro tip: upload img by dropping on the canvas"),this.h()},l(e){const a=se('[data-svelte="svelte-18yikln"]',U.head);E=y(a,"LINK",{href:!0,rel:!0}),s=y(a,"SCRIPT",{src:!0});var C=D(s);C.forEach(p),g=y(a,"SCRIPT",{src:!0});var f=D(g);f.forEach(p),a.forEach(p),u=z(e),r=y(e,"DIV",{class:!0});var x=D(r);I=y(x,"CANVAS",{class:!0}),D(I).forEach(p),M=z(x),o=y(x,"DIV",{class:!0});var c=D(o);i=y(c,"DIV",{id:!0}),D(i).forEach(p),_=z(c),n=y(c,"DIV",{class:!0});var b=D(n);m=y(b,"INPUT",{type:!0,class:!0,placeholder:!0}),q=z(b),w=y(b,"BUTTON",{class:!0});var R=D(w);T=K(R,"diffuse the f rest"),R.forEach(p),b.forEach(p),F=z(c),k=y(c,"P",{class:!0});var B=D(k);L=K(B,"pro tip: upload img by dropping on the canvas"),B.forEach(p),c.forEach(p),x.forEach(p),this.h()},h(){l(E,"href","https://cdnjs.cloudflare.com/ajax/libs/drawingboard.js/0.4.2/drawingboard.css"),l(E,"rel","stylesheet"),W(s.src,j="https://code.jquery.com/jquery-1.12.4.min.js")||l(s,"src",j),W(g.src,P="https://cdnjs.cloudflare.com/ajax/libs/drawingboard.js/0.4.2/drawingboard.min.js")||l(g,"src",P),l(I,"class",S="border-2 "+(h[4]?"":"hidden")),l(i,"id","board-container"),l(m,"type","text"),l(m,"class","border-2 "),l(m,"placeholder","Add prompt"),l(w,"class","bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4"),l(n,"class",N="flex gap-x-2 mt-4 items-center justify-center "+(h[1]?"animate-pulse":"")),l(k,"class","mt-2 opacity-50"),l(o,"class",A="flex flex-col items-center "+(h[1]?"pointer-events-none":"")),l(r,"class","flex flex-wrap gap-x-4 gap-y-2 justify-center mt-8")},m(e,a){d(U.head,E),d(U.head,s),d(U.head,g),Y(e,u,a),Y(e,r,a),d(r,I),h[6](I),d(r,M),d(r,o),d(o,i),h[7](i),d(o,_),d(o,n),d(n,m),G(m,h[0]),d(n,q),d(n,w),d(w,T),d(o,F),d(o,k),d(k,L),O||(t=[Q(m,"input",h[8]),Q(w,"click",h[5])],O=!0)},p(e,[a]){a&16&&S!==(S="border-2 "+(e[4]?"":"hidden"))&&l(I,"class",S),a&1&&m.value!==e[0]&&G(m,e[0]),a&2&&N!==(N="flex gap-x-2 mt-4 items-center justify-center "+(e[1]?"animate-pulse":""))&&l(n,"class",N),a&2&&A!==(A="flex flex-col items-center "+(e[1]?"pointer-events-none":""))&&l(o,"class",A)},i:X,o:X,d(e){p(E),p(s),p(g),e&&p(u),e&&p(r),h[6](null),h[7](null),O=!1,re(t)}}}const H=500,$=3e3;function de(h,E,s){let j="",g=!1,P=!1,u,r,I,S,M,o,i=400,_,n,m=!1;async function q(){if(!r)return;const t=r.createImageData(u.width,u.height),e=t.data;for(let f=0,x=e.length;f<x;f+=4)e[f]=40*Math.random()*7,e[f+1]=40*Math.random()*7,e[f+2]=40*Math.random()*7,e[f+3]=255;const a=await createImageBitmap(t),C=performance.now()-I;r.globalAlpha=Math.min(C,$)/$,r.drawImage(a,0,0,i,i),g&&window.requestAnimationFrame(q)}function w(t){if(!r)return;const e=performance.now()-S;r.globalAlpha=Math.min(e,H)/H,r.drawImage(t,0,0,i,i),e<H&&window.requestAnimationFrame(()=>w(t))}async function T(t){const e=t.toDataURL("png"),C=await(await fetch(e)).blob(),f=new File([C],"canvas shot.png",{type:"image/png"}),x=t.getContext("2d").getImageData(0,0,i,i),c=await createImageBitmap(x);return{imgFile:f,imgBitmap:c}}async function N(){if(!j)return alert("Please add prompt");if(!u||!r)return;s(1,g=!0),s(4,m=!1),k(),I=performance.now(),q();const{imgFile:t,imgBitmap:e}=await T(u),a=new FormData;a.append("prompt",j),a.append("image",t);const C=await fetch("https://sdb.pcuenca.net/i2i",{method:"POST",body:a});try{const f=JSON.parse(await C.text()),{images:x}=f,c=await Promise.all(x.map(async R=>{const B=new Image;return B.src=`data:image/png;base64, ${R}`,await new Promise((ee,pe)=>{B.onload=()=>ee(B)}),B}));s(1,g=!1),o&&clearInterval(o),s(4,m=!0);let b=0;S=performance.now(),w(c[b%c.length]),M=()=>{o&&clearInterval(o),S=performance.now(),b=b+1,w(c[b%c.length])},o=setInterval(()=>{b=b+1,S=performance.now(),w(c[b%c.length])},2500),P||F()}catch(f){console.error(f),alert("Error happened: please see console")}}function F(){const t=document.createElement("div");t.className="drawing-board-control";const e=document.createElement("button");e.innerHTML="\u23EF",e.onclick=M,t.append(e);const a=document.querySelector(".drawing-board-controls");a&&(a.appendChild(t),P=!0,a.onclick=()=>{o&&clearInterval(o)})}function k(){const t=n.getContext("2d");s(3,n.width=u.width,n),s(3,n.height=u.height,n),t.drawImage(u,0,0)}oe(async()=>{const{innerWidth:t}=window;i=Math.min(i,Math.floor(t*.75)),s(2,_.style.width=`${i}px`,_),s(2,_.style.height=`${i}px`,_),s(3,n.style.width=`${i}px`,n),s(3,n.style.height=`${i}px`,n),await ie(),u=new window.DrawingBoard.Board("board-container",{size:10,controls:["Color",{Size:{type:"dropdown"}},{DrawingMode:{filler:!1}}],droppable:!0,webStorage:!1,enlargeYourContainer:!0}).canvas,r=u.getContext("2d")});function L(t){Z[t?"unshift":"push"](()=>{n=t,s(3,n)})}function A(t){Z[t?"unshift":"push"](()=>{_=t,s(2,_)})}function O(){j=this.value,s(0,j)}return[j,g,_,n,m,N,L,A,O]}class me extends te{constructor(E){super(),ae(this,E,de,ce,ne,{})}}export{me as default};