renaming, debounce input

frontend/src/lib/App.svelte

@@ -2,13 +2,13 @@
 	import Cursor from '$lib/Cursor.svelte';
 	import Frame from '$lib/Frame.svelte';
 	import PaintFrame from '$lib/PaintFrame.svelte';
-	import Canvas from '$lib/Canvas.svelte';
+	import PaintCanvas from '$lib/PaintCanvas.svelte';
 	import Menu from '$lib/Menu.svelte';
 	import PromptModal from '$lib/PromptModal.svelte';
 	import { COLORS, EMOJIS } from '$lib/constants';
 	import { PUBLIC_WS_INPAINTING } from '$env/static/public';
 	import type { PromptImgObject, PromptImgKey, Presence } from '$lib/types';
-	import { loadingState, currZoomTransform, showFrames } from '$lib/store';
+	import { loadingState, currZoomTransform } from '$lib/store';
 
 	import { useMyPresence, useObject, useOthers } from '$lib/liveblocks';
 
@@ -30,7 +30,6 @@
 		frame: null,
 		isPrompting: false,
 		isLoading: false,
-		isMoving: true,
 		currentPrompt: ''
 	};
 	myPresence.update(initialPresence);
@@ -41,18 +40,10 @@
 
 	const promptImgStorage = useObject('promptImgStorage');
 
-	function getpromptImgList(promptImgList: PromptImgObject[]): PromptImgObject[] {
-		if (promptImgList) {
-			const list: PromptImgObject[] = Object.values(promptImgList);
-			return list.sort((a, b) => a.date - b.date);
-		}
-		return [];
-	}
 	let showModal = false;
-	let promptImgList: PromptImgObject[] = [];
-	$: promptImgList = getpromptImgList($promptImgStorage?.toObject());
 
 	$: isPrompting = $myPresence?.isPrompting || false;
+	$: isLoading = $myPresence?.isLoading || false;
 
 	let canvasEl: HTMLCanvasElement;
 
@@ -69,7 +60,8 @@
 		showModal = false;
 	}
 
-	function onPrompt(e: CustomEvent) {
+	function onPrompt() {
+		console.log('onPrompt');
 		generateImage();
 		showModal = false;
 	}
@@ -94,7 +86,7 @@
 		return base64Crop;
 	}
 	async function generateImage() {
-		if (isPrompting) return;
+		if (isLoading) return;
 		$loadingState = 'Pending';
 		const prompt = $myPresence.currentPrompt;
 		const position = $myPresence.frame;
@@ -106,7 +98,7 @@
 		const sessionHash = crypto.randomUUID();
 		const payload = {
 			fn_index: 0,
-			data: [getImageCrop(position), prompt, 0.75, 7.5, 30, 'patchmatch'],
+			data: [getImageCrop(position), prompt, 0.75, 7.5, 40, 'patchmatch'],
 			session_hash: sessionHash
 		};
 		console.log('payload', payload);
@@ -137,7 +129,8 @@
 						$loadingState = 'Queue full';
 						websocket.close();
 						myPresence.update({
-							isPrompting: false
+							isPrompting: false,
+							isLoading: false
 						});
 						return;
 					case 'estimation':
@@ -167,13 +160,17 @@
 							$promptImgStorage.set(key, promptImg);
 							console.log(imgURL);
 							$loadingState = data.success ? 'Complete' : 'Error';
+							setTimeout(() => {
+								$loadingState = '';
+							}, 2000);
 						} catch (err) {
 							const tError = err as Error;
 							$loadingState = tError?.message;
 						}
 						websocket.close();
 						myPresence.update({
-							isPrompting: false
+							isPrompting: false,
+							isLoading: false
 						});
 						return;
 					case 'process_starts':
@@ -196,7 +193,7 @@
 	<PromptModal on:prompt={onPrompt} on:close={onClose} />
 {/if}
 <div class="fixed top-0 left-0 z-0 w-screen h-screen">
-	<Canvas bind:value={canvasEl} />
+	<PaintCanvas bind:canvasEl />
 
 	<main class="z-10 relative">
 		<PaintFrame transform={$currZoomTransform} interactive={!isPrompting} />

frontend/src/lib/Frame.svelte

@@ -7,6 +7,7 @@
 	export let color = '';
 	export let position = { x: 0, y: 0 };
 	export let prompt = '';
+	export let loadingState = '';
 	export let interactive = false;
 	export let isDragging = false;
 	$: coord = {
@@ -19,11 +20,11 @@
 	class="frame z-0 flex relative
 	{!interactive ? 'pointer-events-none touch-none' : ''}
 	{isDragging ? 'cursor-grabbing' : 'cursor-grab'}"
-	style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k});
-			background-image: linear-gradient(${color}, rgba(255,255,255,0));
-			color: ${color};
-	`}
+	style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); border-color: ${color};`}
 >
+	{#if loadingState}
+		<span class="text-white drop-shadow-lg">{loadingState}</span>
+	{/if}
 	<div class="small-frame z-0 flex relative" />
 	<LoadingIcon />
 	<h2 class="text-lg">Click to paint</h2>
@@ -37,7 +38,7 @@
 		transform-origin: 0 0;
 	}
 	.small-frame {
-		@apply pointer-events-none touch-none absolute top-1/2  left-1/2 border-2 border-spacing-3 border-sky-500 w-[256px] h-[256px];
+		@apply pointer-events-none touch-none absolute top-1/2 left-1/2 border-2 border-spacing-3  w-[256px] h-[256px];
 		transform: translateX(-50%) translateY(-50%);
 	}
 </style>

frontend/src/lib/Menu.svelte

@@ -4,7 +4,6 @@
 	const dispatch = createEventDispatcher();
 
 	const onKeyup = (e: KeyboardEvent) => {
-		e.preventDefault();
 		if (e.key === 'Enter') {
 			dispatch('paintMode', { mode: 'paint' });
 		}

frontend/src/lib/{Canvas.svelte → PaintCanvas.svelte}

@@ -15,8 +15,7 @@
 	const height = 512 * 4;
 	const width = 512 * 4;
 
-	let canvasEl: HTMLCanvasElement;
-	export { canvasEl as value };
+	export let canvasEl: HTMLCanvasElement = undefined;
 
 	let containerEl: HTMLDivElement;
 	let canvasCtx: CanvasRenderingContext2D;

frontend/src/lib/PaintFrame.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import LoadingIcon from '$lib/LoadingIcon.svelte';
 	import Frame from '$lib/Frame.svelte';
 	import { drag } from 'd3-drag';
 	import { select } from 'd3-selection';
@@ -8,9 +7,8 @@
 	import type { ZoomTransform } from 'd3-zoom';
 	import { onMount } from 'svelte';
 
-	import { loadingState } from '$lib/store';
 	import { useMyPresence } from '$lib/liveblocks';
-
+	import { loadingState } from '$lib/store';
 	const myPresence = useMyPresence();
 
 	export let transform: ZoomTransform;
@@ -27,7 +25,7 @@
 	$: prompt = $myPresence?.currentPrompt;
 
 	onMount(() => {
-		function dragstarted(event: Event) {
+		function dragstarted() {
 			isDragging = true;
 		}
 
@@ -59,5 +57,5 @@
 </script>
 
 <div bind:this={frameElement}>
-	<Frame {color} {position} {prompt} {transform} {isDragging} {interactive} />
+	<Frame {color} {position} loadingState={$loadingState} {prompt} {transform} {isDragging} {interactive} />
 </div>

frontend/src/lib/PromptModal.svelte

@@ -3,39 +3,49 @@
 	import { useMyPresence } from '$lib/liveblocks';
 
 	const dispatch = createEventDispatcher();
-	let prompt: string;
+	let prompt = '';
 	let inputEl: HTMLInputElement;
 	const myPresence = useMyPresence();
 
-	$: {
-		myPresence.update({
-			currentPrompt: prompt,
-			isPrompting: true
-		});
-	}
-
 	const onKeyup = (e: KeyboardEvent) => {
 		if (e.key === 'Escape') {
-			dispatch('close');
 			myPresence.update({
 				currentPrompt: '',
 				isPrompting: false
 			});
+			dispatch('close');
 		}
 	};
 	onMount(() => {
 		inputEl.focus();
+		prompt = '';
 		window.addEventListener('keyup', onKeyup);
 		return () => {
 			window.removeEventListener('keyup', onKeyup);
 		};
 	});
 
+	let timer: NodeJS.Timeout;
+	function debouce(newPrompt: string) {
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			prompt = newPrompt;
+			myPresence.update({
+				currentPrompt: prompt,
+				isPrompting: true
+			});
+		}, 100);
+	}
 	function onPrompt() {
 		if (prompt.trim() !== '') {
-			dispatch('prompt', prompt);
+			console.log('Prompting with: ', prompt);
+			dispatch('prompt');
 		}
 	}
+	function onInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+		debouce(target.value);
+	}
 </script>
 
 <form
@@ -45,8 +55,8 @@
 >
 	<input
 		bind:this={inputEl}
-		bind:value={prompt}
 		on:click|stopPropagation
+		on:input={onInput}
 		class="input"
 		placeholder="Type a prompt..."
 		title="Input prompt to generate image and obtain palette"

frontend/src/lib/store.ts

@@ -1,13 +1,6 @@
 import { writable } from 'svelte/store';
 import { type ZoomTransform, zoomIdentity } from 'd3-zoom';
 
-
 export const loadingState = writable<string>('');
-export const isLoading = writable<boolean>(false);
-export const isPrompting = writable<boolean>(false);
-export const clickedPosition = writable<{ x: number; y: number }>();
-export const showFrames = writable<boolean>(false);
-
-
 export const currZoomTransform = writable<ZoomTransform>(zoomIdentity);
 

frontend/src/lib/types.ts

@@ -9,7 +9,6 @@ export type Presence = {
 	} | null;
 	isPrompting: boolean;
 	isLoading: boolean;
-	isMoving: boolean;
 	currentPrompt: string
 }