wip

frontend/src/lib/App.svelte

@@ -178,22 +178,31 @@
 </div>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-	class="fixed w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 items-center justify-center bg-black text-white bg-opacity-80 px-3 overflow-y-scroll
+	class="fixed w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 items-center justify-center bg-black text-white bg-opacity-90 px-3 overflow-y-scroll
 	{showAbout ? 'flex' : 'hidden'}"
 	on:click={() => (showAbout = false)}
 >
 	<div class="max-w-md">
 		<h2 class="font-bold text-xl font-mono mb-8">Stable Difussion Multiplayer</h2>
 		<p>
-			Hugging Face face GPU Spaces https://huggingface.co/docs/hub/spaces-gpus Diffusers
-			https://huggingface.co/docs/diffusers/index
+			Hugging Face face GPU Spaces <a
+				href="https://huggingface.co/docs/hub/spaces-gpus"
+				class="text-blue-400 hover:text-blue-600 underline"
+				>https://huggingface.co/docs/hub/spaces-gpus</a
+			>
+			Diffusers
+			<a
+				href="https://huggingface.co/docs/diffusers/index"
+				class="text-blue-400 hover:text-blue-600 underline"
+				>https://huggingface.co/docs/diffusers/index</a
+			>
 		</p>
 		<p>
 			Thanks to <a
 				href="https://twitter.com/lkwq007"
 				target="_blank"
 				rel="noopener noreferrer"
-				class="text-blue-400 underline hover:no-underline"
+				class="text-blue-400 hover:text-blue-600 underline"
 			>
 				Lnyan</a
 			>
@@ -202,11 +211,10 @@
 				href="https://github.com/lkwq007/stablediffusion-infinity"
 				target="_blank"
 				rel="noopener noreferrer"
-				class="text-blue-400 underline hover:no-underline"
+				class="text-blue-400 hover:text-blue-600 underline"
 				>Stable Diffusion Infinity
 			</a>.
 		</p>
-		<h2 class="font-bold text-lg font-mono" />
 		<p class="mb-6">
 			Runwayml Inpaiting Stable Diffusion
 			<a
@@ -255,9 +263,9 @@
 		{/if}
 	</main>
 </div>
-<div class="fixed top-0 right-0 z-10 p-2">
+<!-- <div class="fixed top-0 right-0 z-10 p-2">
 	<ShareWithCommunity />
-</div>
+</div> -->
 <div class="fixed bottom-32 left-0 right-0 z-10 my-2">
 	<Menu on:prompt={onPrompt} {isLoading} on:toggleAbout={() => (showAbout = !showAbout)} />
 </div>

frontend/src/lib/Buttons/AboutButton.svelte

@@ -1,4 +1,4 @@
-<button on:click class="button-paint" title="Prompt and Paint">
+<button on:click title="Prompt and Paint" class="underline w-[210px] text-sm">
 	<span>About</span>
 </button>
 
@@ -6,7 +6,4 @@
 	/* .button {
 		@apply disabled:opacity-50 dark:bg-white dark:text-black bg-black text-white rounded-2xl text-xs shadow-sm focus:outline-none focus:border-gray-400;
 	} */
-	.button-paint {
-		@apply text-xs md:text-sm font-mono bg-blue-100 text-blue-900 min-w-[25ch] flex justify-center items-center disabled:opacity-50 rounded-xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
-	}
 </style>

frontend/src/lib/Buttons/RoomsSelector.svelte

@@ -45,76 +45,77 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-{#if loadingRooms}
-	<div
-		class="text-xs md:text-sm bg-blue-600 text-blue-900 px-3 py-1 font-mono font-medium tracking-tight relative z-0 min-w-[25ch] 
-	{isLoading ? 'opacity-50' : ''}
-	{collapsed ? 'rounded-xl' : 'rounded-b-xl'}"
-		title="Choose a different room"
-		bind:this={boxEl}
-	>
-		{#if !collapsed}
-			<div class="absolute left-0 right-0 bottom-full rounded-t-xl bg-blue-100 px-1">
-				<ul class="relative overflow-y-scroll max-h-72">
-					<li class="grid-row gap-2 pb-3 sticky top-0 bg-blue-100 py-2">
-						<Room />
-						<span> room </span>
-						<People />
-						<span> players </span>
-					</li>
-					{#each rooms as room}
-						<li>
-							<!-- svelte-ignore a11y-invalid-attribute -->
-							<a
-								href="#"
-								on:click|preventDefault={() => changeRoom(room)}
-								class="grid-row gap-2 hover:bg-gray-300
-						   {room.id === $selectedRoomID ? 'text-green-600' : ''}"
-							>
-								<span>
-									{#if room.id === $selectedRoomID}
-										<Pin />
-									{/if}
-								</span>
-								<span>room {room.id} </span>
-								<span />
-								<span>{room.users_count} / {MAX_CAPACITY}</span>
-							</a>
-						</li>
-					{/each}
-				</ul>
-				<div class="border-t-2 border-t-gray-400 border-opacity-50" />
-			</div>
-		{/if}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="min-w-[25ch]">
+	{#if loadingRooms}
 		<div
-			class={isLoading ? 'cursor-wait' : 'cursor-pointer'}
-			on:click={() => (isLoading ? null : (collapsed = !collapsed))}
+			class="text-xs rounded md:text-smtext-gray-700 py-1 font-medium tracking-tight relative z-0 
+	{isLoading ? 'opacity-50' : ''}"
+			title="Choose a different room"
+			bind:this={boxEl}
 		>
-			{#if selectedRoom}
-				<div class="grid-row gap-2">
-					<Room />
-					<span>
-						room {selectedRoom?.id}
-					</span>
-					<People />
-					<span>
-						{selectedRoom?.users_count} / {MAX_CAPACITY}
-					</span>
-				</div>
-			{:else}
-				<div class="grid-row gap-2">
-					<Room />
-					<span>
-						Loading...
-						<People />
-						<span> ... / ... </span>
-					</span>
+			{#if !collapsed}
+				<div class="absolute left-0 right-0 bottom-full rounded-xl  bg-blue-600 px-1">
+					<ul class="relative overflow-y-scroll max-h-72">
+						<li class="grid-row gap-2 pb-3 sticky top-0 py-2">
+							<Room />
+							<span> room </span>
+							<People />
+							<span> players </span>
+						</li>
+						{#each rooms as room}
+							<li>
+								<!-- svelte-ignore a11y-invalid-attribute -->
+								<a
+									href="#"
+									on:click|preventDefault={() => changeRoom(room)}
+									class="grid-row gap-2 hover:bg-gray-300
+						   {room.id === $selectedRoomID ? 'text-black' : ''}"
+								>
+									<span>
+										{#if room.id === $selectedRoomID}
+											<Pin />
+										{/if}
+									</span>
+									<span>room {room.id} </span>
+									<span />
+									<span>{room.users_count} / {MAX_CAPACITY}</span>
+								</a>
+							</li>
+						{/each}
+					</ul>
+					<div class="border-t-2 border-t-gray-400 border-opacity-50" />
 				</div>
 			{/if}
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<div
+				class={isLoading ? 'cursor-wait' : 'cursor-pointer'}
+				on:click={() => (isLoading ? null : (collapsed = !collapsed))}
+			>
+				{#if selectedRoom}
+					<div class="grid-row gap-2">
+						<Room />
+						<span>
+							room {selectedRoom?.id}
+						</span>
+						<People />
+						<span>
+							{selectedRoom?.users_count} / {MAX_CAPACITY}
+						</span>
+					</div>
+				{:else}
+					<div class="grid-row gap-2">
+						<Room />
+						<span>
+							Loading...
+							<People />
+							<span> ... / ... </span>
+						</span>
+					</div>
+				{/if}
+			</div>
 		</div>
-	</div>
-{/if}
+	{/if}
+</div>
 
 <style lang="postcss" scoped>
 	.grid-row {

frontend/src/lib/Cursor.svelte

@@ -33,7 +33,7 @@
 		classList={'block z-0 col-span-2 row-span-2 text-8xl'}
 		fill={colors[Math.floor(Math.random() * colors.length)]}
 	/>
-
+	<!-- 
 	{#if emoji}
 		<div
 			class="absolute right-0 col-start-2 row-start-2 text-8xl"
@@ -41,7 +41,7 @@
 		>
 			{emoji}
 		</div>
-	{/if}
+	{/if} -->
 </div>
 
 <style lang="postcss" scoped>

frontend/src/lib/Frame.svelte

@@ -18,13 +18,13 @@
 	style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
 >
 	<div class="pointer-events-none touch-none">
-		{#if isLoading}
-			<LoadingIcon classList={'animate-spin text-4xl inline mr-2 mx-auto text-white mb-4'} />
-		{/if}
-		<div
-			class="font-bold !text-4xl text-white bg-black/60 rounded-2xl text-center p-10 line-clamp-4 flex"
-		>
-			<p class="text-4xl">Someone is painting:</p>
+		<div class="font-bold !text-4xl text-white rounded-2xl text-center p-10 line-clamp-4 flex">
+			{#if isLoading}
+				<LoadingIcon classList={'animate-spin text-4xl inline mr-2 mx-auto text-white mb-4'} />
+				<p class="text-4xl">Someone is painting:</p>
+			{:else}
+				<p class="text-4xl">Someone is typing:</p>
+			{/if}
 
 			<span class="italic font-normal">"{prompt}"</span>
 		</div>

frontend/src/lib/Icons/Cursor.svelte

@@ -7,15 +7,18 @@
 	class={classList}
 	width="1em"
 	height="1em"
-	viewBox="0 0 15 15"
-	fill="currentColor"
+	viewBox="0 0 12 12"
 	xmlns="http://www.w3.org/2000/svg"
 >
 	<path
-		stroke={fill}
-		stroke-opacity="0.3"
-		stroke-width="1"
-		d="M0.91603 0.916054L7.09131 14.9234L8.89871 8.89873L14.9234 7.09133L0.91603 0.916054Z"
+		d="M3.09022 1.77278C2.25499 1.40456 1.40358 2.25597 1.7718 3.0912L4.57875 9.45818C4.95365 10.3086 6.18455 10.2323 6.4516 9.34213L6.9637 7.63515C7.06029 7.31317 7.31219 7.06126 7.63417 6.96467L9.34117 6.45258C10.2313 6.18552 10.3076 4.95463 9.45722 4.57972L3.09022 1.77278Z"
 		{fill}
 	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M3.66305 9.86091L0.856101 3.49392C0.119663 1.82347 1.82248 0.120639 3.49294 0.857077L9.85994 3.66402C11.5607 4.41383 11.4082 6.87562 9.62784 7.40973L7.92085 7.92182L7.40875 9.62881C6.87465 11.4092 4.41286 11.5617 3.66305 9.86091ZM1.77113 3.09053C1.40291 2.2553 2.25432 1.40388 3.08955 1.7721L9.45654 4.57905C10.3069 4.95395 10.2307 6.18485 9.34049 6.4519L7.6335 6.964C7.31152 7.06059 7.05961 7.3125 6.96302 7.63448L6.45093 9.34146C6.18387 10.2316 4.95298 10.3079 4.57807 9.45751L1.77113 3.09053Z"
+		{fill}
+		fill-opacity="0.2"
+	/>
 </svg>

frontend/src/lib/Icons/People.svelte

@@ -2,21 +2,28 @@
 	export let classList = '';
 </script>
 
-<svg class={classList} height="15" viewBox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg
+	class={classList}
+	height="1em"
+	width="1em"
+	viewBox="0 0 9 7"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
 	<path
 		fill-rule="evenodd"
 		clip-rule="evenodd"
 		d="M6.41113 3.73486C6.97158 4.11531 7.3643 4.63076 7.3643 5.31801V6.54526H8.59155C8.81654 6.54526 9.00063 6.36118 9.00063 6.13618V5.31801C9.00063 4.42621 7.5402 3.8985 6.41113 3.73486Z"
-		fill="#DBAD37"
+		fill="currentColor"
 	/>
 	<path
 		d="M3.27305 3.27266C4.17677 3.27266 4.90938 2.54005 4.90938 1.63633C4.90938 0.732611 4.17677 0 3.27305 0C2.36933 0 1.63672 0.732611 1.63672 1.63633C1.63672 2.54005 2.36933 3.27266 3.27305 3.27266Z"
-		fill="#DBAD37"
+		fill="currentColor"
 	/>
 	<path
 		fill-rule="evenodd"
 		clip-rule="evenodd"
 		d="M5.72716 3.27266C6.63124 3.27266 7.36349 2.54041 7.36349 1.63633C7.36349 0.732258 6.63124 0 5.72716 0C5.53489 0 5.3549 0.0409082 5.18308 0.0981798C5.53511 0.533533 5.72715 1.07646 5.72715 1.63633C5.72715 2.1962 5.53511 2.73913 5.18308 3.17448C5.3549 3.23176 5.53489 3.27266 5.72716 3.27266ZM3.27266 3.68175C2.18041 3.68175 0 4.22992 0 5.31808V6.13624C0 6.36124 0.184087 6.54533 0.409083 6.54533H6.13625C6.36124 6.54533 6.54533 6.36124 6.54533 6.13624V5.31808C6.54533 4.22992 4.36492 3.68175 3.27266 3.68175Z"
-		fill="#DBAD37"
+		fill="currentColor"
 	/>
 </svg>

frontend/src/lib/Menu.svelte

@@ -21,13 +21,13 @@
 	});
 </script>
 
-<div class="flex justify-center">
+<div class="flex items-center justify-between px-12">
+	<AboutButton on:click={() => dispatch('toggleAbout')} />
+
 	<button
 		on:click={() => dispatch('prompt')}
-		class="text-3xl bg-blue-600 text-white px-6 py-2 rounded-xl ring ring-blue-500 font-semibold shadow-2xl"
+		class="text-3xl bg-blue-600 text-white px-6 py-2 rounded-2xl ring ring-blue-500 font-semibold shadow-2xl self-center"
 		>🖍 Paint</button
-	>
+	><RoomsSelector {isLoading} />
 	<!-- <PPButton {isLoading} on:click={() => dispatch('prompt')} /> -->
-	<RoomsSelector {isLoading} />
-	<AboutButton on:click={() => dispatch('toggleAbout')} />
 </div>

frontend/src/lib/PaintFrame.svelte

@@ -206,7 +206,7 @@
 			<div class="pointer-events-none touch-none">
 				{#if prompt}
 					<div class="pointer-events-none touch-none">
-						<div class="font-bold text-xl text-[#387CFF] text-center px-2 line-clamp-4">
+						<div class="font-bold text-4xl text-[#387CFF] text-center px-2 line-clamp-4">
 							{prompt}
 						</div>
 					</div>
@@ -216,8 +216,9 @@
 				class="absolute top-full"
 				style={`transform: scale(${Math.max(2.5 - transform.k, 1)}); transform-origin: 0 0;`}
 			>
-				<div class="px-3 py-1 bg-blue-600 text-white text-lg xl:text-2xl rounded-b-xl">
-					<!-- <PPButton {isLoading} on:click={() => dispatch('prompt')} /> -->
+				<div
+					class="px-3 py-1 bg-blue-700 text-white text-lg xl:text-2xl rounded-b-xl font-semibold"
+				>
 					{#if $loadingState !== ''}
 						<div class="">
 							{#if $loadingState === 'NFSW'}
@@ -226,7 +227,7 @@
 									Possible NSFW result detected, please try again
 								</h3>
 							{/if}
-							<p>{$loadingState}</p>
+							<p>{$loadingState}...</p>
 						</div>
 					{:else}
 						🤚 Drag me
@@ -237,9 +238,31 @@
 				class="absolute left-full"
 				style={`transform: scale(${Math.max(2.5 - transform.k, 1)}); transform-origin: 0 0;`}
 			>
-				<div class="mx-4">
-					<!-- <DragButton className={'p-1'} {isLoading} isActive={dragEnabled} on:click={toggleDrag} /> -->
-					<div class="flex bg-blue-600 rounded-lg shadow-lg">
+				{#if !isLoading}
+					<div class="mx-4 flex flex-col gap-2">
+						<button
+							on:click={() => dispatch('prompt')}
+							class="w-10 h-10 bg-blue-600 shadow-2xl shadow-blue-500 rounded-lg flex items-center justify-center text-3xl"
+						>
+							🖍
+						</button>
+						<button
+							on:click={toggleDrawMask}
+							class="w-10 h-10 bg-blue-600 shadow-2xl shadow-blue-500 rounded-lg flex items-center justify-center text-3xl"
+						>
+							<svg class="text-white" width="1em" height="1em" viewBox="0 0 100 100"
+								><path
+									fill="currentColor"
+									d="m65.453 10.826l-.053 5c3.073.034 6.144.549 9.059 1.52l1.58-4.744a34.758 34.758 0 0 0-10.586-1.776zm-5.365.352a35.131 35.131 0 0 0-10.26 3.119l2.17 4.506a30.166 30.166 0 0 1 8.799-2.674l-.71-4.951zm20.908 3.51l-2.283 4.447a30.131 30.131 0 0 1 7.447 5.394l3.522-3.549a35.101 35.101 0 0 0-8.686-6.293zM35 19.125c-19.3 0-35 15.7-35 35s15.7 35 35 35c8.934 0 17.087-3.374 23.275-8.904c.005 0 .01 0 .014.002c.065-.059.127-.121.191-.18l.125-.115a34.677 34.677 0 0 0 2.461-2.496c.083-.092.167-.183.248-.276c.399-.455.79-.919 1.165-1.394c-.482-.04-.961-.092-1.436-.155c-.318-.041-.632-.094-.947-.146c-.158-.026-.316-.046-.473-.074a29.93 29.93 0 0 1-1.383-.283a29.851 29.851 0 0 1-1.183-.301c-.065-.018-.13-.033-.194-.051C44.234 71.216 35 59.651 35 45.875a29.876 29.876 0 0 1 9.557-21.955c.162-.151.324-.302.49-.45c.249-.22.504-.436.76-.65c.158-.131.313-.266.474-.394c.415-.332.837-.656 1.27-.965a35.075 35.075 0 0 0-2.867-.965l-.03-.008c-.287-.082-.577-.155-.867-.23c-.215-.056-.43-.118-.646-.17c-.349-.084-.701-.155-1.053-.229c-.126-.026-.25-.057-.377-.082l-.002.002A34.83 34.83 0 0 0 35 19.125zm58.2 5.928l-4.028 2.967a30.012 30.012 0 0 1 4.252 8.15l4.736-1.606a34.98 34.98 0 0 0-4.96-9.511zm6.294 14.717l-4.924.87c.536 3.029.603 6.145.194 9.19l4.955.666c.48-3.562.4-7.19-.225-10.726zM93.8 54.338a30.198 30.198 0 0 1-3.936 8.314l4.143 2.801a35.162 35.162 0 0 0 4.586-9.695l-4.793-1.42zm-6.803 11.928a29.79 29.79 0 0 1-7.213 5.687l2.451 4.358a34.776 34.776 0 0 0 8.428-6.647l-3.666-3.398zm-11.394 7.638a30.155 30.155 0 0 1-9.002 1.887l.265 4.992a35.12 35.12 0 0 0 10.498-2.199l-1.761-4.68z"
+									color="currentColor"
+								/></svg
+							>
+						</button>
+						<!-- <PPButton {isLoading} on:click={() => dispatch('prompt')} /> -->
+
+						<!-- <DragButton className={'p-1'} {isLoading} isActive={dragEnabled} on:click={toggleDrag} /> -->
+						<!-- <div class="bg-blue-700 rounded-lg shadow-lg">
+						azeeza
 						<MaskButton
 							{isLoading}
 							className={'p-1'}
@@ -250,8 +273,9 @@
 							<span class="border-gray-800 border-opacity-50 border-r-2 my-2" />
 							<UndoButton className={'p-1'} {isLoading} on:click={cleanMask} />
 						{/if}
+					</div> -->
 					</div>
-				</div>
+				{/if}
 			</div>
 		</div>
 	</div>
@@ -265,16 +289,6 @@
 
 <style lang="postcss" scoped>
 	.frame {
-		@apply relative grid grid-cols-3 grid-rows-3 ring-8 ring-blue-600 w-[512px] h-[512px];
-	}
-	.hand {
-		cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAUCAYAAABvVQZ0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHSSURBVHgBzVQ9LENRFD4VozZWP4ku/jqJAYNoEQaWNpEwIYJFBINY6UCn6mKTKhYNSTuwVFBiaEgai9bP4CWKUftqv845vU+k7evr2C/5cu6799zvnHvOvQ+gUmEqNimEsKLZQ3YgA0j6TiNXeJPJlIZygEK1yFAmo4rj0Kkg0Jj4DyHyMxKyIt/I+zH5LJrau8V76lPMLa6KjU2vyKhZsbHl1YTX8/dX5X071eyPdX5xDRrr68BiNsNJ+AxsrS1sCf6DIEQub2hoNxJjxO7ivHnMNZqzzlHAIJBIvkBPV6cm7JC11RULWMw1LELRhwf6IPXxxSSRyMU1ztk5mKpmyX9aV0x2KUoitMHW1sxHjd3HWYQyGh7sY1+Z3ZTRMfcpCxLxHwZhZnIc63TEC3TU3iEXj2XdqGGOomKyBhxNq1fi6ZVF3J5tyK+rPGqHXmZX6OAgR61eVCc9UBDE332rzlu3uj0+WRs7GKGxoY5MWi8zZWZygp1KZUSg6yIR1RNzYQeV2/MQLC/MQqmM5HoYb8CDNl/w0GUTlpFLVDPfzi5myZ0DW3szX5Ex5whYLGYFp/pRTAEjyHcaFoX4RvqKPXRTOaJoHJDrmoKMlv0Lqhj8AlEeE/77ZUZMAAAAAElFTkSuQmCC')
-				8 8,
-			pointer;
-	}
-	.pen {
-		cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAExSURBVHgBnZJBjkRQEIZLt45YSIwTsLUQbuAqc4LpG3AUO9ueE5idpSFhSyKxsWCBDfKmyozZtcafVLz38r6/Sr0COCDGmEwBZ4TgB0bDfuUchvM8Z7ZtM1VVGa13m9BFuh1FEZNlmdERmfxJvryCi6JwNU2DOI4hCAJAkyVIHMe1mzCVStloS+F53lJJ0yytcA/BFKZprqXfT8FPM/u+r4ZhGJRl2ZyCkyRp0jRlfd8z13X3wyTs7oPg1YDeejeM4ghcN7quAz0ZgoC/AY7jAM/zrSRJb88M+Ov12s7zLN9ut+UAewDjOEJd18u3qqrN2eeHYfgWBMGmy1mWARnRetU0TZ9bBhecpnes4H+iVhj7AaIotoZh3DcNLMsq0MDquu6xHpKhoihf2A8LExRbBj/Uih2c7AwcBQAAAABJRU5ErkJggg==')
-				8 8,
-			pointer;
+		@apply relative grid grid-cols-3 grid-rows-3 ring-8 ring-blue-700 w-[512px] h-[512px];
 	}
 </style>