better layout

frontend/src/data.ts

@@ -27,9 +27,9 @@ export const COLOR_LIST: Color[] = [
 	{ color: [50, 155, 250], label: 'wrist wearing' }
 ];
 
-// export const API = 'https://hf.space/embed/radames/Text2Human-API';
-export const API = 'https://hf.space/embed/CVPR/Text2Human';
-
+export const API = 'https://hf.space/embed/radames/Text2Human-API';
+// export const API = 'https://hf.space/embed/CVPR/Text2Human';
+// 
 export const IMAGES_LIST = [
 	'/samples/MEN-Pants-id_00002565-02_1_front_segm.png',
 	'/samples/MEN-Pants-id_00005213-02_4_full_segm.png',

frontend/src/lib/DrawingCanvas.svelte

@@ -68,8 +68,8 @@
 	}
 	function pointerMove(e: MouseEvent) {
 		const position = getPosition(canvas, e);
-		brush.style.top = `${position.y}px`;
-		brush.style.left = `${position.x}px`;
+		brush.style.top = `${e.offsetY}px`;
+		brush.style.left = `${e.offsetX}px`;
 		if (!mouseDown) {
 			return;
 		}
@@ -94,8 +94,8 @@
 	function getPosition(canvas: HTMLCanvasElement, event: MouseEvent) {
 		const rect = canvas.getBoundingClientRect();
 		return {
-			x: event.clientX - rect.left,
-			y: event.clientY - rect.top
+			x: (event.clientX - rect.left) * (canvas.width / rect.width),
+			y: (event.clientY - rect.top) * (canvas.height / rect.height)
 		};
 	}
 	function setBrush(sBrush: Brush) {
@@ -157,7 +157,7 @@
 </script>
 
 <div>
-	<div class="inline-block relative overflow-clip">
+	<div class="relative overflow-clip">
 		<canvas
 			bind:this={canvas}
 			class="canvas"
@@ -175,7 +175,7 @@
 		<canvas bind:this={brush} class="brush" width="10" height="10" />
 		<span class="label">{$selectedBrush?.label} </span>
 		<button
-			class="absolute bottom-1 left-1"
+			class="absolute bottom-2 left-2"
 			on:click|preventDefault={() => rollBack()}
 			disabled={$drawingLayers.size <= 0}><UndoIcon /></button
 		>
@@ -184,7 +184,7 @@
 
 <style lang="postcss" scoped>
 	.canvas {
-		@apply box-border z-0 border dark:border-gray-300 border-gray-500 aspect-[256/512];
+		@apply max-w-full w-full z-0 border dark:border-gray-300 border-gray-500 aspect-[256/512];
 	}
 	.brush {
 		@apply z-10 absolute pointer-events-none -translate-x-1/2 -translate-y-1/2;

frontend/src/lib/ResultCanvas.svelte

@@ -42,9 +42,11 @@
 					}
 					a.href = base64Image;
 				};
-				a.click();
-				resolve(null);
-				console.log('Downloading image.');
+				requestAnimationFrame(() => {
+					console.log('Downloading image.');
+					a.click();
+					resolve(null);
+				});
 			} catch (err) {
 				reject();
 			}
@@ -114,13 +116,13 @@
 </script>
 
 {#if $resultImage}
-	<div class="inline-block relative overflow-clip">
+	<div class="relative overflow-clip">
 		<img class="image" alt="Generative Human Result" src={$resultImage} width="256" height="512" />
 	</div>
 {/if}
 
 <style lang="postcss" scoped>
 	.image {
-		@apply max-w-none box-border z-0 border dark:border-gray-300 border-gray-500 aspect-[256/512];
+		@apply box-border z-0 border dark:border-gray-300 border-gray-500 aspect-[256/512];
 	}
 </style>

frontend/src/routes/index.svelte

@@ -51,7 +51,7 @@
 	</article>
 	<BrushSelector />
 	<TemplateGallery />
-	<div class="drawings py-3">
+	<div class="drawings py-3 -mx-3">
 		<DrawingCanvas />
 		<!-- {#if results} -->
 		<ResultCanvas />
@@ -74,7 +74,7 @@
 
 <style lang="postcss" scoped>
 	.drawings {
-		@apply grid grid-cols-1 sm:grid-cols-2 place-items-center;
+		@apply grid grid-cols-[2fr_1.5fr] sm:grid-cols-2 place-items-center;
 	}
 	button {
 		@apply p-1 disabled:opacity-50 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;