huggingface-projects/stable-diffusion-multiplayer

1<script lang="ts">2	import RoomsSelector from '$lib/Buttons/RoomsSelector.svelte';3	import AboutButton from '$lib/Buttons/AboutButton.svelte';4	import { toggleAbout } from '$lib/store';5	import { createEventDispatcher } from 'svelte';6 7	const dispatch = createEventDispatcher();8	// const broadcast = useBroadcastEvent();9 10	export let isLoading = false;11</script>12 13<svelte:window14	on:keypress={(e) => {15		if (e.key === 'Enter') {16			dispatch('showModal', { showModal: true });17		}18	}}19/>20<div class="flex flex-col md:flex-row items-center justify-between px-4 md:px-12 gap-3 md:gap-0">21	<AboutButton22		{isLoading}23		on:click={() => {24			$toggleAbout = !$toggleAbout;25		}}26	/>27 28	<button29		on:click={() => dispatch('showModal', { showModal: true })}30		title="Click to prompt, and paint. The generated image will show up in the frame."31		disabled={isLoading}32		class="{isLoading33			? 'cursor-wait'34			: '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"35		><span class="mr-3">🖍</span>Paint36		<span37			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]"38			><svg39				class="text-sm mr-1.5"40				width="1em"41				height="1em"42				viewBox="0 0 10 13"43				fill="currentColor"44				xmlns="http://www.w3.org/2000/svg"45			>46				<path47					fill-rule="evenodd"48					clip-rule="evenodd"49					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"50					fill="currentColor"51				/>52			</svg>53			Enter</span54		></button55	>56	<RoomsSelector {isLoading} />57</div>58