UI improvements

frontend/src/lib/App.svelte

@@ -177,9 +177,9 @@
 		<!-- When others connected, iterate through others and show their cursors -->
 		{#if $others}
 			{#each [...$others] as { connectionId, presence } (connectionId)}
-				{#if (presence?.status === Status.prompting || presence?.status === Status.masking) && presence?.frame}
+				{#if (presence?.status === Status.loading || presence?.status === Status.prompting || presence?.status === Status.masking) && presence?.frame}
 					<Frame
-						color={COLORS[1 + (connectionId % (COLORS.length - 1))]}
+						isLoading={presence?.status === Status.loading}
 						position={presence?.frame}
 						prompt={presence?.currentPrompt}
 						transform={$currZoomTransform}

frontend/src/lib/Buttons/DragButton.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import Move from '$lib/Icons/Move.svelte';
 	export let isActive = false;
+	export let isLoading = false;
 </script>
 
 <button
 	on:click
+	disabled={isLoading}
 	class="bg-white rounded-full p-2 {isActive ? 'text-blue-700' : 'text-gray-800'}"
 	title="Enable Dragging"
 >

frontend/src/lib/Buttons/MaskButton.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import Mask from '$lib/Icons/Mask.svelte';
 	export let isActive = false;
+	export let isLoading = false;
 </script>
 
 <button
 	on:click
+	disabled={isLoading}
 	class="bg-white rounded-full p-2 {isActive ? 'text-blue-700' : 'text-gray-800'}"
 	title="Enable Masking"
 >

frontend/src/lib/Buttons/PPButton.svelte

@@ -1,13 +1,22 @@
 <script lang="ts">
+	export let isLoading = false;
 </script>
 
-<button on:click class="button-paint bg-violet-100 text-violet-900" title="New Paint Frame">
-	<span
-		class="rounded-sm h-6 w-6 flex justify-center items-center border-2 border-dashed border-violet-700 mr-2"
-	>
-		+
-	</span>
-	<span>Prompt + Paint</span>
+<button
+	on:click
+	disabled={isLoading}
+	class="button-paint bg-violet-100 text-violet-900 min-w-[25ch] "
+	title="New Paint Frame"
+>
+	{#if isLoading}
+		<span class="font-mono">paiting... </span>{:else}
+		<span
+			class="rounded-sm h-6 w-6 flex justify-center items-center border-2 border-dashed border-violet-700 mr-2"
+		>
+			+
+		</span>
+		<span>Prompt + Paint</span>
+	{/if}
 </button>
 
 <style lang="postcss" scoped>
@@ -15,6 +24,6 @@
 		@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 font-mono flex justify-center items-center disabled:opacity-50  dark:bg-white dark:text-black rounded-2xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
+		@apply font-mono flex justify-center items-center disabled:opacity-80  dark:bg-white dark:text-black rounded-2xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
 	}
 </style>

frontend/src/lib/Buttons/UndoButton.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import Undo from '$lib/Icons/Undo.svelte';
 	export let isActive = false;
+	export let isLoading = false;
 </script>
 
 <button
 	on:click
+	disabled={isLoading}
 	class="bg-white rounded-full p-2 {isActive ? 'text-blue-700' : 'text-gray-800'}"
 	title="Clear Masking"
 >

frontend/src/lib/Frame.svelte

@@ -4,12 +4,8 @@
 	import type { ZoomTransform } from 'd3-zoom';
 
 	export let transform: ZoomTransform;
-	export let color = '';
 	export let position = { x: 0, y: 0 };
 	export let prompt = '';
-	export let loadingState = '';
-	export let interactive = false;
-	export let isDragging = false;
 	export let isLoading = false;
 	$: coord = {
 		x: transform.applyX(position.x),
@@ -18,29 +14,18 @@
 </script>
 
 <div
-	class="frame {isDragging ? 'cursor-grabbing' : 'cursor-grab'}"
-	style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); border-color: ${color};`}
+	class="frame @apply absolute top-0 left-0 ring-8 ring-[#EC8E65] w-[512px] h-[512px]"
+	style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); transform-origin: 0 0;`}
 >
-	<div class={!interactive ? 'pointer-events-none touch-none' : ''}>
-		{#if loadingState}
-			<div class="col-span-2 row-start-1">
-				<span class="text-white drop-shadow-lg">{loadingState}</span>
-			</div>
-		{/if}
-		{#if isLoading}
-			<div class="col-start-2 row-start-2">
-				<LoadingIcon />
-			</div>
-		{/if}
-
-		<h2 class="text-lg"></h2>
-		<div class="absolute bottom-0 font-bold text-lg">{prompt}</div>
+	<div class="pointer-events-none touch-none">
+		<div class="font-bold text-xl text-[#EC8E65] text-center px-2 line-clamp-4">{prompt}</div>
 	</div>
+	{#if isLoading}
+		<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+			<LoadingIcon />
+		</div>
+	{/if}
 </div>
 
 <style lang="postcss" scoped>
-	.frame {
-		@apply absolute top-0 left-0  grid grid-cols-3 grid-rows-3 border-2 border-spacing-3 border-sky-500 w-[512px] h-[512px];
-		transform-origin: 0 0;
-	}
 </style>

frontend/src/lib/Icons/LoadingIcon.svelte

@@ -1,5 +1,5 @@
 <svg
-	class="animate-spin opacity-60"
+	class="animate-spin"
 	width="51"
 	height="51"
 	viewBox="0 0 21 21"
@@ -12,6 +12,6 @@
 	/>
 	<path
 		d="M10.5006 17C9.6233 17 8.77136 16.8286 7.97021 16.4896C7.19572 16.1621 6.50122 15.6924 5.90448 15.0957C5.30774 14.499 4.83797 13.8046 4.5104 13.0302C4.1714 12.2291 4 11.3772 4 10.5C4 10.2474 4.20441 10.043 4.45708 10.043C4.70974 10.043 4.91415 10.2474 4.91415 10.5C4.91415 11.2541 5.06143 11.9854 5.35345 12.6747C5.63532 13.3399 6.0378 13.9379 6.55074 14.4508C7.06368 14.9637 7.66169 15.3674 8.32698 15.6479C9.01514 15.9387 9.74646 16.0859 10.5006 16.0859C11.2548 16.0859 11.9861 15.9387 12.6756 15.6467C13.3409 15.3648 13.9389 14.9624 14.4518 14.4495C14.9647 13.9366 15.3685 13.3387 15.6491 12.6734C15.9398 11.9854 16.0871 11.2541 16.0871 10.5C16.0871 9.7459 15.9398 9.01465 15.6478 8.32529C15.3669 7.66166 14.9604 7.05857 14.4505 6.54922C13.9417 6.03876 13.3384 5.63215 12.6743 5.35205C11.9861 5.06133 11.2548 4.91406 10.5006 4.91406C10.248 4.91406 10.0436 4.70967 10.0436 4.45703C10.0436 4.20439 10.248 4 10.5006 4C11.378 4 12.2299 4.17139 13.0311 4.51035C13.8055 4.83789 14.5 5.30762 15.0968 5.9043C15.6935 6.50098 16.162 7.19668 16.4896 7.96982C16.8286 8.7709 17 9.62275 17 10.5C17 11.3772 16.8286 12.2291 16.4896 13.0302C16.1633 13.8046 15.6935 14.499 15.0968 15.0957C14.5 15.6924 13.8043 16.1608 13.0311 16.4884C12.2299 16.8286 11.378 17 10.5006 17Z"
-		fill="#1F2937"
+		fill="currentColor"
 	/>
 </svg>

frontend/src/lib/PaintCanvas.svelte

@@ -12,8 +12,8 @@
 	const myPresence = useMyPresence();
 	const promptImgStorage = useObject('promptImgStorage');
 
-	const height = 512 * 4;
-	const width = 512 * 4;
+	const height = 512 * 5;
+	const width = 512 * 5;
 
 	let containerEl: HTMLDivElement;
 	let canvasCtx: CanvasRenderingContext2D;

frontend/src/lib/PaintFrame.svelte

@@ -35,8 +35,8 @@
 	let dragEnabled = true;
 	let isDragging = false;
 	$: prompt = $myPresence?.currentPrompt;
-	$: isLoading = $myPresence?.status === Status.loading || false;
-
+	$: isLoading = $myPresence?.status === Status.loading ||  $myPresence?.status === Status.prompting || false;
+	
 	$: coord = {
 		x: transform.applyX(position.x),
 		y: transform.applyY(position.y)
@@ -95,6 +95,7 @@
 		let lastx: number;
 		let lasty: number;
 		function dragstarted(event: Event) {
+			if (isLoading) return;
 			const x = event.x / transform.k;
 			const y = event.y / transform.k;
 			lastx = x;
@@ -102,6 +103,7 @@
 		}
 
 		function dragged(event: Event) {
+			if (isLoading) return;
 			const x = event.x / transform.k;
 			const y = event.y / transform.k;
 			drawLine({ x, y, lastx, lasty });
@@ -114,6 +116,8 @@
 	}
 	function dragMoveHandler() {
 		function dragstarted(event: Event) {
+			if (isLoading) return;
+
 			const rect = (event.sourceEvent.target as HTMLElement).getBoundingClientRect();
 			if (event.sourceEvent instanceof TouchEvent) {
 				offsetX = event.sourceEvent.targetTouches[0].pageX - rect.left;
@@ -126,6 +130,8 @@
 		}
 
 		function dragged(event: Event) {
+			if (isLoading) return;
+
 			const x = round(transform.invertX(event.x - offsetX));
 			const y = round(transform.invertY(event.y - offsetY));
 			position = {
@@ -142,6 +148,8 @@
 		}
 
 		function dragended(event: Event) {
+			if (isLoading) return;
+
 			isDragging = false;
 
 			const x = round(transform.invertX(event.x - offsetX));
@@ -184,34 +192,33 @@
 		<div class="frame">
 			<canvas class={dragEnabled ? '' : 'bg-white'} bind:this={$maskEl} width="512" height="512" />
 			<div class="pointer-events-none touch-none">
-				{#if $loadingState}
-					<div class="col-span-2 row-start-1">
-						<span class="text-white drop-shadow-lg">{$loadingState}</span>
-					</div>
-				{/if}
-				{#if isLoading}
-					<div class="col-start-2 row-start-2">
-						<LoadingIcon />
+				{#if prompt}
+					<div class="pointer-events-none touch-none">
+						<div class="font-bold text-xl text-[#387CFF] text-center px-2 line-clamp-4">
+							{prompt}
+						</div>
 					</div>
 				{/if}
-
-				<h2 class="text-lg" />
-				<div class="absolute bottom-0 font-bold text-lg">{prompt}</div>
 			</div>
+			{#if isLoading}
+				<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+					<LoadingIcon />
+				</div>
+			{/if}
 			{#if !isDragging}
 				<div class="absolute top-full ">
 					<div class="py-2">
-						<PPButton on:click={() => dispatch('prompt')} />
+						<PPButton {isLoading} on:click={() => dispatch('prompt')} />
 					</div>
 				</div>
 				<div class="absolute left-full bottom-0">
 					<div class="px-2">
-						<DragButton isActive={dragEnabled} on:click={toggleDrag} />
+						<DragButton {isLoading} isActive={dragEnabled} on:click={toggleDrag} />
 						<div class="flex bg-white rounded-full mt-3">
-							<MaskButton isActive={!dragEnabled} on:click={toggleDrawMask} />
+							<MaskButton {isLoading} isActive={!dragEnabled} on:click={toggleDrawMask} />
 							{#if !dragEnabled}
 								<span class="border-gray-800 border-opacity-50 border-r-2 my-2" />
-								<UndoButton on:click={cleanMask} />
+								<UndoButton {isLoading} on:click={cleanMask} />
 							{/if}
 						</div>
 					</div>
@@ -229,7 +236,7 @@
 
 <style lang="postcss" scoped>
 	.frame {
-		@apply relative grid grid-cols-3 grid-rows-3 ring-8 ring-blue-500 w-[512px] h-[512px];
+		@apply relative grid grid-cols-3 grid-rows-3 ring-8 ring-[#387CFF] 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')