click to pain

.vscode/extensions.json

@@ -2,5 +2,5 @@
     "recommendations": [
         "bradlc.vscode-tailwindcss",
         "svelte.svelte-vscode"
-    ]
+    ],
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "terminal.integrated.defaultProfile.linux": "zsh"
+}

frontend/src/lib/App.svelte

@@ -8,14 +8,7 @@
 	import { COLORS, EMOJIS } from '$lib/constants';
 	import { PUBLIC_WS_INPAINTING } from '$env/static/public';
 	import type { PromptImgObject, PromptImgKey, Presence } from '$lib/types';
-	import {
-		isLoading,
-		loadingState,
-		currZoomTransform,
-		isPrompting,
-		clickedPosition,
-		showFrames
-	} from '$lib/store';
+	import { loadingState, currZoomTransform, showFrames } from '$lib/store';
 
 	import { useMyPresence, useObject, useOthers } from '$lib/liveblocks';
 
@@ -34,6 +27,7 @@
 	// Set a default value for presence
 	const initialPresence: Presence = {
 		cursor: null,
+		frame: null,
 		isPrompting: false,
 		isLoading: false,
 		isMoving: true,
@@ -54,25 +48,29 @@
 		}
 		return [];
 	}
+	let showModal = false;
 	let promptImgList: PromptImgObject[] = [];
 	$: promptImgList = getpromptImgList($promptImgStorage?.toObject());
 
+	$: isPrompting = $myPresence?.isPrompting || false;
+
 	let canvasEl: HTMLCanvasElement;
 
 	function onPaintMode(e: CustomEvent) {
-		console.log('onPaintMode', e.detail);
-		// const mode = e.detail.mode;
+		const mode = e.detail.mode;
+		if (mode == 'paint') {
+			showModal = true;
+		}
 	}
-	async function onClose(e: CustomEvent) {
-		console.log('onClose', e.detail);
-		$isPrompting = false;
+	function onClose() {
+		showModal = false;
 	}
-	async function onPrompt(e: CustomEvent) {
-		const prompt = e.detail.prompt;
-		const imgURLs = await generateImage(prompt);
-		$isPrompting = false;
-		console.log('prompt', prompt, imgURLs);
+
+	function onPrompt(e: CustomEvent) {
+		generateImage();
+		showModal = false;
 	}
+
 	function getImageCrop(cursor: { x: number; y: number }) {
 		const canvasCrop = document.createElement('canvas');
 
@@ -92,19 +90,20 @@
 
 		return base64Crop;
 	}
-	async function generateImage(_prompt: string) {
-		if (!_prompt || $isLoading == true) return;
+	async function generateImage() {
+		// if (isPrompting) return;
 		$loadingState = 'Pending';
-		$isLoading = true;
+		const prompt = $myPresence.currentPrompt;
+		const position = $myPresence.frame;
+		console.log('Generating...', prompt, position);
 		myPresence.update({
-			currentPrompt: _prompt,
 			isPrompting: true,
-			cursor: $clickedPosition
+			isLoading: true
 		});
 		const sessionHash = crypto.randomUUID();
 		const payload = {
 			fn_index: 0,
-			data: [getImageCrop($clickedPosition), _prompt, 0.75, 7.5, 30, 'patchmatch'],
+			data: [getImageCrop(position), prompt, 0.75, 7.5, 30, 'patchmatch'],
 			session_hash: sessionHash
 		};
 		console.log('payload', payload);
@@ -116,7 +115,10 @@
 		websocket.onclose = (evt) => {
 			if (!evt.wasClean) {
 				$loadingState = 'Error';
-				$isLoading = false;
+				myPresence.update({
+					isPrompting: false,
+					isLoading: false
+				});
 			}
 		};
 		websocket.onmessage = async function (event) {
@@ -131,7 +133,9 @@
 					case 'queue_full':
 						$loadingState = 'Queue full';
 						websocket.close();
-						$isLoading = false;
+						myPresence.update({
+							isPrompting: false
+						});
 						return;
 					case 'estimation':
 						const { rank, queue_size } = data;
@@ -148,11 +152,11 @@
 								throw new Error('Potential NFSW content, please try again');
 							}
 							const imgBlob = await base64ToBlob(imgBase64);
-							const imgURL = await uploadImage(imgBlob, _prompt);
+							const imgURL = await uploadImage(imgBlob, prompt);
 							const promptImg = {
-								prompt: _prompt,
+								prompt,
 								imgURL: imgURL,
-								position: $clickedPosition,
+								position,
 								date: new Date().getTime(),
 								id: nanoid()
 							};
@@ -165,7 +169,9 @@
 							$loadingState = tError?.message;
 						}
 						websocket.close();
-						$isLoading = false;
+						myPresence.update({
+							isPrompting: false
+						});
 						return;
 					case 'process_starts':
 						$loadingState = 'Processing';
@@ -173,7 +179,6 @@
 				}
 			} catch (e) {
 				console.error(e);
-				$isLoading = false;
 				$loadingState = 'Error';
 			}
 		};
@@ -183,9 +188,8 @@
 <!-- Show the current user's cursor location -->
 <div class="text touch-none pointer-events-none">
 	{$loadingState}
-	{$isLoading}
 </div>
-{#if $isPrompting}
+{#if showModal}
 	<PromptModal on:prompt={onPrompt} on:close={onClose} />
 {/if}
 <div class="fixed top-0 left-0 z-0 w-screen h-screen">
@@ -204,18 +208,6 @@
 				/>
 			{/each}
 		{/if}
-		<!-- {#if $clickedPosition}
-			<Frame color={COLORS[0]} position={$clickedPosition} transform={$currZoomTransform} />
-		{/if} -->
-		{#if $myPresence?.cursor}
-			<!-- <Frame color={COLORS[0]} position={$myPresence.cursor} transform={$currZoomTransform} />
-			<Cursor
-				color={COLORS[0]}
-				position={$myPresence.cursor}
-				transform={$currZoomTransform}
-			/> -->
-		{/if}
-
 		<!-- When others connected, iterate through others and show their cursors -->
 		{#if $others}
 			{#each [...$others] as { connectionId, presence } (connectionId)}

frontend/src/lib/Canvas.svelte

@@ -3,7 +3,7 @@
 	import { select } from 'd3-selection';
 	import { onMount } from 'svelte';
 	import { PUBLIC_UPLOADS } from '$env/static/public';
-	import { currZoomTransform, isPrompting, clickedPosition } from '$lib/store';
+	import { currZoomTransform } from '$lib/store';
 	import { round } from '$lib/utils';
 
 	import { useMyPresence, useObject } from '$lib/liveblocks';
@@ -39,28 +39,28 @@
 	}
 
 	onMount(() => {
+		const margin = {
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0
+		};
 		const scale = width / containerEl.clientWidth;
 		const zoomHandler = zoom()
-			.scaleExtent([1 / scale / 2, 1])
+			.scaleExtent([1 / scale, 1])
 			// .extent([
 			// 	[0, 0],
 			// 	[width, height]
 			// ])
 			.translateExtent([
-				[-width * 0.3, -height * 0.3],
-				[width * 1.3, height * 1.3]
+				[-margin.left, -margin.top],
+				[width + margin.right, height + margin.bottom]
 			])
 			.tapDistance(10)
 			.on('zoom', zoomed);
 
 		const selection = select(canvasEl.parentElement)
 			.call(zoomHandler as any)
-			.on('dblclick.zoom', () => {
-				$isPrompting = true;
-				$clickedPosition = $myPresence.cursor;
-				console.log('clicked', $clickedPosition);
-				return null;
-			})
 			.call(zoomHandler.scaleTo as any, 1 / scale / 1.5)
 			.on('pointermove', handlePointerMove)
 			.on('pointerleave', handlePointerLeave);

frontend/src/lib/Menu.svelte

@@ -5,8 +5,8 @@
 	const dispatch = createEventDispatcher();
 </script>
 
-<div class="grid grid-cols-4 gap-3 text-sm w-max mx-auto">
-	<div class="flex items-center">
+<div class="grid grid-cols-1 gap-3 w-max mx-auto">
+	<!-- <div class="flex items-center">
 		<input
 			id="showframes"
 			type="checkbox"
@@ -16,28 +16,28 @@
 		<label for="showframes" class="text-white dark:text-white cursor-pointer ml-2">
 			Show Frames
 		</label>
-	</div>
-	<button class="button" title="Move" on:click={() => dispatch('paintMode', { mode: 'move' })}>
+	</div> -->
+	<!-- <button class="button" title="Move" on:click={() => dispatch('paintMode', { mode: 'move' })}>
 		Move
-	</button>
+	</button> -->
 	<button
 		class="button-paint bg-violet-100 text-violet-900"
 		title="New Paint Frame"
 		on:click={() => dispatch('paintMode', { mode: 'paint' })}
 	>
 		<span
-			class="rounded-sm h-5 w-5 m-1 flex justify-center items-center border-2 border-dashed border-violet-700 mr-2"
+			class="rounded-sm h-6 w-6 flex justify-center items-center border-2 border-dashed border-violet-700 mr-2"
 			>+</span
 		>
-		Paint
+		<span>Paint</span>
 	</button>
 </div>
 
 <style lang="postcss" scoped>
-	.button {
+	/* .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 flex justify-center items-center disabled:opacity-50  dark:bg-white dark:text-black rounded-2xl shadow-sm focus:outline-none focus:border-gray-400;
+		@apply 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;
 	}
 </style>

frontend/src/lib/PaintFrame.svelte

@@ -7,14 +7,19 @@
 	import type { ZoomTransform } from 'd3-zoom';
 	import { onMount } from 'svelte';
 
+	import { loadingState } from '$lib/store';
+	import { useMyPresence } from '$lib/liveblocks';
+
+	const myPresence = useMyPresence();
+
 	export let transform: ZoomTransform;
-	export let color = '';
+	export let color = 'black';
+	
 
 	let position = {
 		x: transform.invertX(768),
 		y: transform.invertX(768)
 	};
-	export let prompt = '';
 
 	let frameElement: HTMLDivElement;
 	$: coord = {
@@ -22,9 +27,11 @@
 		y: transform.applyY(position.y)
 	};
 
+	$: prompt = $myPresence?.currentPrompt
+
 	onMount(() => {
 		function dragstarted(event: Event) {
-			console.log(event);
+			// console.log(event);
 		}
 
 		function dragged(event: Event) {
@@ -37,7 +44,15 @@
 		}
 
 		function dragended(event: Event) {
-			console.log(event);
+			const x = round(transform.invertX(event.x) - 512 / 2);
+			const y = round(transform.invertY(event.y) - 512 / 2);
+
+			myPresence.update({
+				frame: {
+					x,
+					y
+				}
+			});
 		}
 
 		const dragHandler = drag().on('start', dragstarted).on('drag', dragged).on('end', dragended);
@@ -54,6 +69,7 @@
 	`}
 >
 	<div class="small-frame z-0 flex relative" />
+	{$loadingState}
 	<LoadingIcon />
 	<h2 class="text-lg">Click to paint</h2>
 

frontend/src/lib/PromptModal.svelte

@@ -33,7 +33,7 @@
 
 <form
 	class="fixed w-screen top-0 left-0 bottom-0 right-0 max-h-screen z-50 flex items-center justify-center bg-black bg-opacity-80 px-3"
-	on:submit|preventDefault={() => dispatch('prompt', { prompt })}
+	on:submit|preventDefault={() => dispatch('prompt')}
 	on:click={() => dispatch('close')}
 >
 	<input

frontend/src/lib/types.ts

@@ -3,6 +3,10 @@ export type Presence = {
 		x: number;
 		y: number;
 	} | null;
+	frame: {
+		x: number;
+		y: number;
+	} | null;
 	isPrompting: boolean;
 	isLoading: boolean;
 	isMoving: boolean;