+ {
+ $toggleAbout = !$toggleAbout;
+ }}
+ />
+
+
+
diff --git a/frontend/src/lib/PaintCanvas.svelte b/frontend/src/lib/PaintCanvas.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..b29bced450808a680347ca60a1263e0ba2b365fd
--- /dev/null
+++ b/frontend/src/lib/PaintCanvas.svelte
@@ -0,0 +1,284 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/lib/PaintFrame.svelte b/frontend/src/lib/PaintFrame.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..ca27252c4d4e437420007cb64444bbbf03081f48
--- /dev/null
+++ b/frontend/src/lib/PaintFrame.svelte
@@ -0,0 +1,320 @@
+
+
+
+
+
+
diff --git a/frontend/src/lib/PromptModal.svelte b/frontend/src/lib/PromptModal.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..d24b7910c89bb3ec2526ec7e0be5efeeffe28fb5
--- /dev/null
+++ b/frontend/src/lib/PromptModal.svelte
@@ -0,0 +1,92 @@
+
+
+
diff --git a/frontend/src/lib/constants.ts b/frontend/src/lib/constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b2e5c7453d915b4110ae86eafd60f97862ab55ab
--- /dev/null
+++ b/frontend/src/lib/constants.ts
@@ -0,0 +1,21 @@
+export const COLORS = [
+ '#505669',
+ '#414AA6',
+ '#1C5B92',
+ '#216B44',
+ '#893301',
+ '#912728',
+ '#98184D',
+ '#743095',
+ '#5F4199',
+ '#8f3f94'
+];
+
+export const EMOJIS = ['🐝', '🐌', '🐞', '🐜', '🦋', '🐛', '🐝', '🐞', '🦟', '🦗', '🕷', '🦂', '🐢', '🐍', '🦎', '🦖', '🦕', '🐙', '🦑', '🐠', '🐟', '🐡', '🐬', '🦈', '🐳', '🐋', '🐊', '🐅', '🐆', '🦓', '🦍', '🦧', '🐘', '🦛', '🦏', '🐪', '🐫', '🦒', '🐃', '🐂', '🐄', '🐎', '🐖',
+ '🐏', '🐑', '🐐', '🐕', '🐩', '🐈', '🐓', '🦃', '🦅', '🦆', '🦢', '🦉', '🦚', '🦜', '🦇', '🐁', '🐀', '🐿', '🐇', '🐿', '🦔', '🦇', '🐻', '🐻', '🐨', '🐼', '🐵', '🙈', '🙉', '🙊', '🐒', '🐉', '🐲', '🦕', '🦖', '🐊', '🐢', '🦎', '🐍', '🐦', '🐧', '🦅', '🦆', '🦉', '🦇']
+
+export const MAX_CAPACITY = 50;
+
+export const GRID_SIZE = 32
+
+export const FRAME_SIZE = 512
\ No newline at end of file
diff --git a/frontend/src/lib/liveblocks/LiveblocksProvider.svelte b/frontend/src/lib/liveblocks/LiveblocksProvider.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..440663e97a99504e8b6a328daaec4c4302b01019
--- /dev/null
+++ b/frontend/src/lib/liveblocks/LiveblocksProvider.svelte
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+ {#if isLoading}
+
+
+ {#if prompt}
+
+
+ {prompt}
+
+ {/if}
+
+
+
+ toggleDrag()}
+ title="Enable dragging to move the frame"
+ >
+ {#if $loadingState !== ''}
+
+
+ {#if $loadingState === 'NFSW'}
+
+ {:else}
+ {dragEnabled ? '🤚 Drag me' : '🤚 Enable Drag'}
+ {/if}
+ NSFW Alert
++ Possible NSFW result detected, please try again +
+ {/if} +{$loadingState}...
+
+ {#if !isLoading}
+
+
+
+
+
+ {/if}
+ {$presence.count}
+ *
+ * USAGE NOTE:
+ * This is a custom Svelte store, `set` does nothing, only `update`.
+ * `update` does NOT take a function like regular Svelte stores,
+ * it takes an object and works like `useUpdateMyPresence` in Liveblocks
+ */
+
+export function useMyPresence(_options: { addToHistory: boolean } = {}) {
+ const room = useRoom();
+ const { subscribe, set } = writable{$self.info.name}
+ */
+export function useSelf(): Writable
+
+ {/if}
+ No room selected
+Please select a room in the URL
+
+${p}
+
`,y=new URLSearchParams({title:`Room ${r}`,description:h}).toString();window.open(`https://huggingface.co/spaces/huggingface-projects/stable-diffusion-multiplayer/discussions/new?${y}`,"_blank")}return e.$$set=u=>{"isLoading"in u&&n(0,s=u.isLoading)},[s,o,a]}class ah extends ke{constructor(t){super(),xe(this,t,oh,sh,Ce,{isLoading:0})}}function lh(e){let t,n,r,i,s,o,a,l,u,f,p,h,d,y,g,x,w,C,T,E,S;return C=new ah({props:{isLoading:e[0]}}),{c(){t=D("div"),n=D("details"),r=D("summary"),i=te("More"),s=ie(),o=D("p"),a=te("Instructions: move the "),l=D("span"),u=te("blue square"),f=te(`,
+ click "\u{1F58D} Paint".`),p=ie(),h=D("div"),d=D("button"),y=Q("svg"),g=Q("path"),x=te(`
+ About`),w=ie(),pe(C.$$.fragment),this.h()},l(P){t=U(P,"DIV",{class:!0});var O=k(t);n=U(O,"DETAILS",{});var z=k(n);r=U(z,"SUMMARY",{class:!0});var X=k(r);i=ne(X,"More"),X.forEach(_),s=se(z),o=U(z,"P",{class:!0});var K=k(o);a=ne(K,"Instructions: move the "),l=U(K,"SPAN",{class:!0});var M=k(l);u=ne(M,"blue square"),M.forEach(_),f=ne(K,`,
+ click "\u{1F58D} Paint".`),K.forEach(_),p=se(z),h=U(z,"DIV",{class:!0});var F=k(h);d=U(F,"BUTTON",{class:!0});var B=k(d);y=ee(B,"svg",{width:!0,height:!0,viewBox:!0,class:!0});var v=k(y);g=ee(v,"path",{fill:!0,"fill-rule":!0,d:!0,"clip-rule":!0}),k(g).forEach(_),v.forEach(_),x=ne(B,`
+ About`),B.forEach(_),w=se(F),me(C.$$.fragment,F),F.forEach(_),z.forEach(_),O.forEach(_),this.h()},h(){c(r,"class","md:hidden"),c(l,"class","text-blue-700 bg-blue-300/60 px-0.5"),c(o,"class","inline"),c(g,"fill","currentColor"),c(g,"fill-rule","evenodd"),c(g,"d","M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2zm0 7a1 1 0 0 0-1 1a1 1 0 1 1-2 0a3 3 0 1 1 4.44 2.633a1.404 1.404 0 0 0-.383.288a.303.303 0 0 0-.057.085v.494a1 1 0 1 1-2 0V13c0-.58.253-1.047.539-1.38c.281-.33.63-.572.94-.742A1 1 0 0 0 12 9zm.999 4.011v-.004v.005zM12 15a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2H12z"),c(g,"clip-rule","evenodd"),c(y,"width",".9em"),c(y,"height",".9em"),c(y,"viewBox","0 0 24 24"),c(y,"class","mr-1"),c(d,"class","items-center inline-flex"),c(h,"class","flex justify-between py-2 gap-3"),n.open=e[1],c(t,"class","md:w-[210px] text-sm md:flex flex-col order-last md:order-none")},m(P,O){re(P,t,O),m(t,n),m(n,r),m(r,i),m(n,s),m(n,o),m(o,a),m(o,l),m(l,u),m(o,f),m(n,p),m(n,h),m(h,d),m(d,y),m(y,g),m(d,x),m(h,w),_e(C,h,null),T=!0,E||(S=Re(d,"click",e[2]),E=!0)},p(P,[O]){const z={};O&1&&(z.isLoading=P[0]),C.$set(z),(!T||O&2)&&(n.open=P[1])},i(P){T||(J(C.$$.fragment,P),T=!0)},o(P){q(C.$$.fragment,P),T=!1},d(P){P&&_(t),ge(C),E=!1,S()}}}function uh(e,t,n){let{isLoading:r=!1}=t,i=!0;Ot(()=>(s(),window.addEventListener("resize",s),()=>{window.removeEventListener("resize",s)}));function s(){n(1,i=window.innerWidth>768)}function o(a){cr.call(this,e,a)}return e.$$set=a=>{"isLoading"in a&&n(0,r=a.isLoading)},[r,i,o]}class ch extends ke{constructor(t){super(),xe(this,t,uh,lh,Ce,{isLoading:0})}}function fh(e){let t,n,r,i,s,o,a,l,u,f,p,h,d,y,g,x,w;return n=new ch({props:{isLoading:e[0]}}),n.$on("click",e[4]),y=new Gf({props:{isLoading:e[0]}}),{c(){t=D("div"),pe(n.$$.fragment),r=ie(),i=D("button"),s=D("span"),o=te("\u{1F58D}"),a=te(`Paint
+ `),l=D("span"),u=Q("svg"),f=Q("path"),p=te(`
+ Enter`),d=ie(),pe(y.$$.fragment),this.h()},l(C){t=U(C,"DIV",{class:!0});var T=k(t);me(n.$$.fragment,T),r=se(T),i=U(T,"BUTTON",{title:!0,class:!0});var E=k(i);s=U(E,"SPAN",{class:!0});var S=k(s);o=ne(S,"\u{1F58D}"),S.forEach(_),a=ne(E,`Paint
+ `),l=U(E,"SPAN",{class:!0});var P=k(l);u=ee(P,"svg",{class:!0,width:!0,height:!0,viewBox:!0,fill:!0,xmlns:!0});var O=k(u);f=ee(O,"path",{"fill-rule":!0,"clip-rule":!0,d:!0,fill:!0}),k(f).forEach(_),O.forEach(_),p=ne(P,`
+ Enter`),P.forEach(_),E.forEach(_),d=se(T),me(y.$$.fragment,T),T.forEach(_),this.h()},h(){c(s,"class","mr-3"),c(f,"fill-rule","evenodd"),c(f,"clip-rule","evenodd"),c(f,"d","M8.5 8.5V0H9.5V9.5H1.70711L4.03553 11.8284C4.2308 12.0237 4.2308 12.3403 4.03553 12.5355C3.84027 12.7308 3.52369 12.7308 3.32843 12.5355L0.146447 9.35355C-0.0488155 9.15829 -0.0488155 8.84171 0.146447 8.64645L3.32843 5.46447C3.52369 5.2692 3.84027 5.2692 4.03553 5.46447C4.2308 5.65973 4.2308 5.97631 4.03553 6.17157L1.70711 8.5H8.5Z"),c(f,"fill","currentColor"),c(u,"class","text-sm mr-1.5"),c(u,"width","1em"),c(u,"height","1em"),c(u,"viewBox","0 0 10 13"),c(u,"fill","currentColor"),c(u,"xmlns","http://www.w3.org/2000/svg"),c(l,"class","bg-blue-800 text-gray-300 rounded-lg px-2 py-0.5 text-base ml-4 hidden sm:flex items-center translate-y-[2px]"),c(i,"title","Click to prompt, and paint. The generated image will show up in the frame."),i.disabled=e[0],c(i,"class",h=(e[0]?"cursor-wait":"cursor-pointer")+" order-first md:order-none text-xl md:text-3xl bg-blue-600 text-white px-4 py-1 md:px-6 md:py-2 rounded-2xl ring ring-blue-500 font-semibold shadow-2xl shadow-blue-500 self-center flex items-center hover:saturate-150"),c(t,"class","flex flex-col md:flex-row items-center justify-between px-4 md:px-12 gap-3 md:gap-0")},m(C,T){re(C,t,T),_e(n,t,null),m(t,r),m(t,i),m(i,s),m(s,o),m(i,a),m(i,l),m(l,u),m(u,f),m(l,p),m(t,d),_e(y,t,null),g=!0,x||(w=[Re(window,"keypress",e[3]),Re(i,"click",e[5])],x=!0)},p(C,[T]){const E={};T&1&&(E.isLoading=C[0]),n.$set(E),(!g||T&1)&&(i.disabled=C[0]),(!g||T&1&&h!==(h=(C[0]?"cursor-wait":"cursor-pointer")+" order-first md:order-none text-xl md:text-3xl bg-blue-600 text-white px-4 py-1 md:px-6 md:py-2 rounded-2xl ring ring-blue-500 font-semibold shadow-2xl shadow-blue-500 self-center flex items-center hover:saturate-150"))&&c(i,"class",h);const S={};T&1&&(S.isLoading=C[0]),y.$set(S)},i(C){g||(J(n.$$.fragment,C),J(y.$$.fragment,C),g=!0)},o(C){q(n.$$.fragment,C),q(y.$$.fragment,C),g=!1},d(C){C&&_(t),ge(n),ge(y),x=!1,ur(w)}}}function hh(e,t,n){let r;he(e,wn,u=>n(1,r=u));const i=lr();let{isLoading:s=!1}=t;const o=u=>{u.key==="Enter"&&i("showModal",{showModal:!0})},a=()=>{be(wn,r=!r,r)},l=()=>i("showModal",{showModal:!0});return e.$$set=u=>{"isLoading"in u&&n(0,s=u.isLoading)},[s,r,i,o,a,l]}class dh extends ke{constructor(t){super(),xe(this,t,hh,fh,Ce,{isLoading:0})}}function ph(e){let t,n,r,i,s,o,a,l,u,f;return{c(){t=D("form"),n=D("div"),r=D("input"),i=ie(),s=D("button"),o=D("span"),a=te("\u{1F58D}"),l=te(" Paint"),this.h()},l(p){t=U(p,"FORM",{class:!0});var h=k(t);n=U(h,"DIV",{class:!0});var d=k(n);r=U(d,"INPUT",{class:!0,placeholder:!0,title:!0,type:!0,name:!0}),i=se(d),s=U(d,"BUTTON",{class:!0,type:!0});var y=k(s);o=U(y,"SPAN",{class:!0});var g=k(o);a=ne(g,"\u{1F58D}"),g.forEach(_),l=ne(y," Paint"),y.forEach(_),d.forEach(_),h.forEach(_),this.h()},h(){r.value=e[0],c(r,"class","flex-1 outline-none ring-0 border-none text-xl 2xl:text-2xl py-3 px-3"),c(r,"placeholder","Describe your prompt"),c(r,"title","Input prompt to generate image and obtain palette"),c(r,"type","text"),c(r,"name","prompt"),c(o,"class","mr-2"),c(s,"class","font-semibold bg-blue-700 text-white border-l-2 px-5 text-xl 2xl:text-2xl spacing tracking-wide hover:saturate-150"),c(s,"type","submit"),c(n,"class","flex bg-white overflow-hidden rounded-2xl w-full max-w-lg 2xl:max-w-xl"),c(t,"class","fixed w-screen top-0 left-0 bottom-0 right-0 h-screen z-50 flex items-center justify-center bg-black bg-opacity-80")},m(p,h){re(p,t,h),m(t,n),m(n,r),e[7](r),m(n,i),m(n,s),m(s,o),m(o,a),m(s,l),e[8](n),u||(f=[Re(r,"click",Rs(e[6])),Re(r,"input",e[4]),Re(t,"submit",e[3])],u=!0)},p(p,[h]){h&1&&r.value!==p[0]&&(r.value=p[0])},i:de,o:de,d(p){p&&_(t),e[7](null),e[8](null),u=!1,ur(f)}}}function mh(e,t,n){const r=lr();let{initPrompt:i=""}=t,s,o,a;const l=Pn(),u=C=>{C.key==="Escape"&&r("showModal",{showModal:!1})};Ot(()=>(o.focus(),n(0,s=i),window.addEventListener("keyup",u),window.addEventListener("pointerdown",y,!0),()=>{window.removeEventListener("keyup",u),window.removeEventListener("pointerdown",y,!0)}));let f;function p(C){clearTimeout(f),f=setTimeout(()=>{n(0,s=C),l.update({currentPrompt:s,status:fe.prompting})},100)}function h(C){C.stopPropagation(),C.preventDefault(),C.stopImmediatePropagation(),s.trim()!==""&&r("paint")}function d(C){const T=C.target;p(T.value)}function y(C){a.contains(C.target)||(l.update({status:fe.ready}),r("showModal",{showModal:!1}))}function g(C){cr.call(this,e,C)}function x(C){_t[C?"unshift":"push"](()=>{o=C,n(1,o)})}function w(C){_t[C?"unshift":"push"](()=>{a=C,n(2,a)})}return e.$$set=C=>{"initPrompt"in C&&n(5,i=C.initPrompt)},[s,o,a,h,d,i,g,x,w]}class _h extends ke{constructor(t){super(),xe(this,t,mh,ph,Ce,{initPrompt:5})}}function hi(e,t,n){const r=e.slice();return r[18]=t[n].connectionId,r[19]=t[n].presence,r}function di(e){var r;let t,n;return t=new _h({props:{initPrompt:(r=e[0])==null?void 0:r.currentPrompt}}),t.$on("paint",e[10]),t.$on("showModal",e[9]),{c(){pe(t.$$.fragment)},l(i){me(t.$$.fragment,i)},m(i,s){_e(t,i,s),n=!0},p(i,s){var a;const o={};s&1&&(o.initPrompt=(a=i[0])==null?void 0:a.currentPrompt),t.$set(o)},i(i){n||(J(t.$$.fragment,i),n=!0)},o(i){q(t.$$.fragment,i),n=!1},d(i){ge(t,i)}}}function pi(e){let t=[],n=new Map,r,i,s=[...e[4]];const o=a=>a[18];for(let a=0;a
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/robots.txt b/static/robots.txt
new file mode 100644
index 0000000000000000000000000000000000000000..e9e57dc4d41b9b46e05112e9f45b7ea6ac0ba15e
--- /dev/null
+++ b/static/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/static/vite-manifest.json b/static/vite-manifest.json
new file mode 100644
index 0000000000000000000000000000000000000000..0221113e3323a6e9c2cdcbdeafd39f089a90afc7
--- /dev/null
+++ b/static/vite-manifest.json
@@ -0,0 +1,109 @@
+{
+ "node_modules/@sveltejs/kit/src/runtime/client/start.js": {
+ "file": "_app/immutable/start-01a14595.js",
+ "src": "node_modules/@sveltejs/kit/src/runtime/client/start.js",
+ "isEntry": true,
+ "imports": [
+ "_index-4781a106.js",
+ "_singletons-e8802a59.js"
+ ],
+ "dynamicImports": [
+ ".svelte-kit/generated/nodes/0.js",
+ ".svelte-kit/generated/nodes/1.js",
+ ".svelte-kit/generated/nodes/2.js"
+ ]
+ },
+ "src/routes/+layout.svelte": {
+ "file": "_app/immutable/components/pages/_layout.svelte-2e7ed5f6.js",
+ "src": "src/routes/+layout.svelte",
+ "isEntry": true,
+ "imports": [
+ "_index-4781a106.js"
+ ],
+ "css": [
+ "_app/immutable/assets/_layout-d90db7b5.css"
+ ]
+ },
+ "node_modules/@sveltejs/kit/src/runtime/components/error.svelte": {
+ "file": "_app/immutable/components/error.svelte-443b2358.js",
+ "src": "node_modules/@sveltejs/kit/src/runtime/components/error.svelte",
+ "isEntry": true,
+ "imports": [
+ "_index-4781a106.js",
+ "_stores-36fae70e.js"
+ ]
+ },
+ "src/routes/+page.svelte": {
+ "file": "_app/immutable/components/pages/_page.svelte-5ae30844.js",
+ "src": "src/routes/+page.svelte",
+ "isEntry": true,
+ "imports": [
+ "_index-4781a106.js",
+ "_singletons-e8802a59.js",
+ "_stores-36fae70e.js"
+ ],
+ "css": [
+ "_app/immutable/assets/_page-ff237a95.css"
+ ]
+ },
+ "src/routes/+page.ts": {
+ "file": "_app/immutable/modules/pages/_page.ts-e9fa0128.js",
+ "src": "src/routes/+page.ts",
+ "isEntry": true,
+ "imports": [
+ "__page-802cc2a3.js"
+ ]
+ },
+ "_singletons-e8802a59.js": {
+ "file": "_app/immutable/chunks/singletons-e8802a59.js",
+ "imports": [
+ "_index-4781a106.js"
+ ]
+ },
+ "_index-4781a106.js": {
+ "file": "_app/immutable/chunks/index-4781a106.js"
+ },
+ "_stores-36fae70e.js": {
+ "file": "_app/immutable/chunks/stores-36fae70e.js",
+ "imports": [
+ "_index-4781a106.js",
+ "_singletons-e8802a59.js"
+ ]
+ },
+ "__page-802cc2a3.js": {
+ "file": "_app/immutable/chunks/_page-802cc2a3.js"
+ },
+ ".svelte-kit/generated/nodes/0.js": {
+ "file": "_app/immutable/chunks/0-dd39116a.js",
+ "src": ".svelte-kit/generated/nodes/0.js",
+ "isDynamicEntry": true,
+ "imports": [
+ "src/routes/+layout.svelte"
+ ]
+ },
+ ".svelte-kit/generated/nodes/1.js": {
+ "file": "_app/immutable/chunks/1-bf704c85.js",
+ "src": ".svelte-kit/generated/nodes/1.js",
+ "isDynamicEntry": true,
+ "imports": [
+ "node_modules/@sveltejs/kit/src/runtime/components/error.svelte"
+ ]
+ },
+ ".svelte-kit/generated/nodes/2.js": {
+ "file": "_app/immutable/chunks/2-9d823c2e.js",
+ "src": ".svelte-kit/generated/nodes/2.js",
+ "isDynamicEntry": true,
+ "imports": [
+ "__page-802cc2a3.js",
+ "src/routes/+page.svelte"
+ ]
+ },
+ "src/routes/+page.css": {
+ "file": "_app/immutable/assets/_page-ff237a95.css",
+ "src": "src/routes/+page.css"
+ },
+ "src/routes/+layout.css": {
+ "file": "_app/immutable/assets/_layout-d90db7b5.css",
+ "src": "src/routes/+layout.css"
+ }
+}
\ No newline at end of file