design improvements

frontend/src/lib/ColorPalette.svelte

@@ -1,17 +1,29 @@
 <script lang="ts">
 	import type { Color } from 'd3-color';
+	import * as d3 from 'd3-color';
 
 	export let colors: Color[];
 	const n = colors.length;
+	function getLabelColor(c: Color): string {
+		const color = d3.hcl(c);
+		if (color.l > 50) {
+			return d3.hcl(color.h, color.c, 0).formatHex();
+		}
+		return d3.hcl(color.h, color.c, 100).formatHex();
+	}
 </script>
 
 <div class="flex flex-col items-center">
 	<div class="flex bg-black">
 		{#each colors as color}
-			<div class="aspect-square">
+			<div class="aspect-square relative">
 				<svg class="max-w-full" width="100" viewBox="0 0 50 50">
-					<rect x="0" y="0" width="50" height="50" fill={color.hex()} />
+					<rect x="0" y="0" width="50" height="50" fill={color.formatHex()} />
 				</svg>
+				<span
+					class="absolute bottom-0 text-center text-xs pl-1 font-bold  uppercase"
+					style="color:{getLabelColor(color)}">{color.formatHex()}</span
+				>
 			</div>
 		{/each}
 	</div>

frontend/src/lib/Palette.svelte

@@ -11,20 +11,19 @@
 	$: imageSrc = promptData.images[seletecdImage].imgURL;
 </script>
 
-<div class="grid grid-cols-5">
+<div class="grid grid-cols-6 gap-3">
 	<blockquote
-		class="col-span-3 italic font-semibold max-w-prose text-base text-center line-clamp-3 my-3"
+		class="row-start-1 mx-auto col-span-6 italic font-semibold max-w-prose text-base text-center line-clamp-3 my-3"
 		title={prompt}
 	>
 		<p>{prompt}</p>
 	</blockquote>
-
-	<div class="row-start-2 col-span-3 flex items-center justify-center">
+	<div class="row-start-3 md:row-start-2 col-span-6 md:col-span-4 flex items-center justify-center">
 		<ColorPalette {colors} />
 	</div>
-	<div class="row-start-2 col-start-4 ml-auto">
+	<div class="row-start-2 col-span-6 md:col-span-2 flex justify-center pb-3">
 		<div class="relative">
-			<img class="relative max-w-[100px]" src={imageSrc} alt={prompt} />
+			<img class="relative max-w-[100px] w-full" src={imageSrc} alt={prompt} />
 			<div class="absolute flex justify-around w-full">
 				{#each promptData.images as image, i}
 					<button
@@ -38,12 +37,18 @@
 			</div>
 		</div>
 	</div>
-
-	<div class="row-start-2 col-start-5 flex items-center justify-center">
-		<button
-			class="bg-black text-white  border-2 dark:border-white border-black rounded-2xl ml-2 p-3 shadow-sm font-bold focus:outline-none focus:border-gray-400"
-		>
-			Remix
-		</button>
+	<div class="row-start-4 col-span-6 md:col-span-2 md:col-start-5 flex justify-center">
+		<div class="flex justify-center items-center">
+			<button
+				class="bg-black text-white border-2 dark:border-white border-black rounded-2xl ml-2 px-2 py-2 shadow-sm text-xs font-bold focus:outline-none focus:border-gray-400"
+			>
+				Remix
+			</button>
+			<button
+				class="bg-black text-white border-2 dark:border-white border-black rounded-2xl ml-2 px-2 py-2 shadow-sm text-xs font-bold focus:outline-none focus:border-gray-400"
+			>
+				Copy
+			</button>
+		</div>
 	</div>
 </div>

frontend/src/routes/+page.svelte

@@ -67,7 +67,7 @@
 						return;
 					case 'estimation':
 						const { msg, rank, queue_size } = data;
-						$loadingState = `${msg} ${rank}/${queue_size}`;
+						$loadingState = `On queue ${rank}/${queue_size}`;
 						break;
 					case 'process_generating':
 						$loadingState = data.success ? 'Generating' : 'Error';
@@ -111,11 +111,11 @@
 	}
 </script>
 
-<div class="max-w-screen-lg mx-auto px-3 py-8 relative z-0">
+<div class="max-w-screen-md mx-auto px-3 py-8 relative z-0">
 	<div class="relative">
-		<form class="grid grid-cols-5" on:submit|preventDefault={() => generatePalette(prompt)}>
+		<form class="grid grid-cols-6" on:submit|preventDefault={() => generatePalette(prompt)}>
 			<input
-				class="disabled:opacity-50 col-span-4 flex-grow italic dark:placeholder:text-black placeholder:text-white text-white dark:text-black placeholder:text-opacity-40 dark:bg-white bg-slate-900 border-2 border-black rounded-2xl p-3 shadow-sm focus:outline-none focus:border-gray-400 focus:ring-1 "
+				class="text-sm disabled:opacity-50 col-span-4 md:col-span-5 italic dark:placeholder:text-black placeholder:text-white text-white dark:text-black placeholder:text-opacity-40 dark:bg-white bg-slate-900 border-2 border-black rounded-2xl px-2 shadow-sm focus:outline-none focus:border-gray-400 focus:ring-1 "
 				placeholder="A photo of a beautiful sunset in San Francisco"
 				type="text"
 				name="prompt"
@@ -123,7 +123,7 @@
 				disabled={$isLoading}
 			/>
 			<button
-				class="disabled:opacity-50 flex-1 dark:bg-white dark:text-black border-2 border-black rounded-2xl ml-2 p-3 px-6 shadow-sm font-bold focus:outline-none focus:border-gray-400"
+				class="disabled:opacity-50 col-span-2 md:col-span-1 dark:bg-white dark:text-black border-2 border-black rounded-2xl ml-2 px-2 py-2  text-xs shadow-sm font-bold focus:outline-none focus:border-gray-400"
 				on:click|preventDefault={() => generatePalette(prompt)}
 				disabled={$isLoading}
 			>
@@ -139,6 +139,7 @@
 		<div class="pt-5">
 			{#each promptsData as promptData}
 				<Pallette {promptData} />
+				<div class="border-b border-gray-200 py-2" />
 			{/each}
 		</div>
 	{/if}