design

frontend/src/lib/ColorPalette.svelte

@@ -11,17 +11,36 @@
 		}
 		return d3.hcl(color.h, color.c, 100).formatHex();
 	}
+	let isCopying = -1;
+
+	async function copyStringToClipboard(text: string, n: number) {
+		// usingo Clipboard API
+		if (isCopying > -1) return;
+		isCopying = n;
+		await navigator.permissions.query({ name: 'clipboard-write' });
+		await navigator.clipboard.writeText(text);
+		setTimeout(() => {
+			isCopying = -1;
+		}, 500);
+	}
 </script>
 
 <div class="flex flex-col items-center">
 	<div class="flex bg-black">
-		{#each colors as color}
-			<div class="aspect-square relative">
+		{#each colors as color, i}
+			<div
+				class="cursor-pointer aspect-square relative"
+				on:click={() => copyStringToClipboard(color.formatHex(), i)}
+			>
 				<svg class="max-w-full" width="100" viewBox="0 0 50 50">
 					<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"
+					title="Copy single color"
+					class="cursor-pointer absolute bottom-0 text-center text-xs pl-1 font-bold  uppercase {isCopying ===
+					i
+						? 'animate-ping'
+						: ''}"
 					style="color:{getLabelColor(color)}">{color.formatHex()}</span
 				>
 			</div>

frontend/src/lib/Palette.svelte

@@ -14,6 +14,7 @@
 	$: imageSrc = promptData.images[seletecdImage].imgURL;
 
 	let isCopying = false;
+
 	async function copyStringToClipboard(text: string) {
 		// usingo Clipboard API
 		if (isCopying) return;
@@ -36,7 +37,7 @@
 	<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-span-6 md:col-span-2 flex justify-center pb-3">
+	<div class="row-start-2 col-span-6 md:col-span-2 flex justify-center md:justify-end pb-3">
 		<div class="relative">
 			<img class="relative max-w-[100px] w-full" src={imageSrc} alt={prompt} />
 			<div class="absolute flex justify-around w-full">
@@ -52,15 +53,24 @@
 			</div>
 		</div>
 	</div>
-	<div class="row-start-4 col-span-6 md:col-span-2 md:col-start-5 flex justify-center">
+	<div
+		class="row-start-4 col-span-6 md:col-span-2 md:col-start-5 flex justify-center md:justify-end"
+	>
 		<div class="flex justify-center items-center">
-			<button class="button" on:click={() => dispatch('remix', { prompt })}> Remix </button>
 			<button
 				class="button"
+				title="Send this prompt to input so you can remix it"
+				on:click={() => dispatch('remix', { prompt })}
+			>
+				Remix
+			</button>
+			<button
+				class="button"
+				title="Copy all colors to clipboard"
 				disabled={isCopying}
 				on:click={() => copyStringToClipboard(colors.map((color) => color.formatHex()).join(', '))}
 			>
-				{isCopying? 'Copied' : 'Copy'}
+				{isCopying ? 'Copied' : 'Copy'}
 			</button>
 		</div>
 	</div>

frontend/src/lib/utils.ts

@@ -12,7 +12,6 @@ function sortColors(colors: Color[]): Color[] {
 	return colors
 		.map((color) => d3.hcl(color))
 		.sort((a, b) => {
-			console.log(a);
 			const aa = a.h;
 			const bb = b.h;
 
@@ -109,4 +108,4 @@ function slugify(text: string) {
 		.replace(/\-\-+/g, '-')
 		.replace(/^-+/, '')
 		.replace(/-+$/, '');
-}
+}

frontend/src/routes/+page.svelte

@@ -41,7 +41,6 @@
 		};
 		const websocket = new WebSocket(PUBLIC_WS_ENDPOINT);
 		websocket.onopen = async function (event) {
-			console.log(event);
 			websocket.send(JSON.stringify({ hash: hash }));
 		};
 		websocket.onclose = (evt) => {
@@ -53,7 +52,6 @@
 		websocket.onmessage = async function (event) {
 			try {
 				const data = JSON.parse(event.data);
-				console.log(data);
 				$loadingState = '';
 				switch (data.msg) {
 					case 'send_data':
@@ -74,7 +72,6 @@
 						break;
 					case 'process_completed':
 						$loadingState = data.success ? 'Complete' : 'Error';
-						console.log(data.output);
 						const images = await extractColorsImages(data.output.data[0], _prompt);
 						promptsData = [
 							{
@@ -82,6 +79,10 @@
 								images
 							}
 						].concat(promptsData);
+						window.scrollTo({
+							top: 0,
+							behavior: 'smooth'
+						});
 						websocket.close();
 						$isLoading = false;
 						return;
@@ -90,7 +91,7 @@
 						break;
 				}
 			} catch (e) {
-				console.log(e);
+				console.error(e);
 				$isLoading = false;
 				$loadingState = 'Error';
 			}
@@ -115,20 +116,37 @@
 </script>
 
 <div class="max-w-screen-md mx-auto px-3 py-8 relative z-0">
-	<div class="relative">
+	<h1 class="text-3xl font-bold leading-normal">Palette generation with Stable Diffussion</h1>
+	<p class="text-sm">
+		Original ideas:
+
+		<a
+			class="link"
+			target="_blank"
+			rel="nofollow noopener"
+			href="https://twitter.com/mattdesl/status/1569457653298139136"
+		>
+			Matt DesLauriers
+		</a>,
+		<a class="link" href="https://drib.net/homage"> dribnet </a>
+	</p>
+	<div class="relative sticky top-0 z-50 bg-white dark:bg-black p-3">
 		<form class="grid grid-cols-6" on:submit|preventDefault={() => generatePalette(prompt)}>
 			<input
-				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 "
+				class="input"
 				placeholder="A photo of a beautiful sunset in San Francisco"
+				title="Input prompt to generate image and obtain palette"
 				type="text"
 				name="prompt"
 				bind:value={prompt}
 				disabled={$isLoading}
 			/>
 			<button
-				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"
+				class="button"
 				on:click|preventDefault={() => generatePalette(prompt)}
 				disabled={$isLoading}
+				title="Generate Palette"
+
 			>
 				Create Palette
 			</button>
@@ -138,8 +156,13 @@
 		{/if}
 	</div>
 
+	<div class="flex items-center gap-4 my-10">
+		<div class="font-bold text-sm">156 submitted palettes</div>
+		<div class="grow border-b border-gray-200" />
+	</div>
+
 	{#if promptsData}
-		<div class="pt-5">
+		<div>
 			{#each promptsData as promptData}
 				<Pallette {promptData} on:remix={remix} />
 				<div class="border-b border-gray-200 py-2" />
@@ -147,3 +170,15 @@
 		</div>
 	{/if}
 </div>
+
+<style lang="postcss" scoped>
+	.link {
+		@apply text-xs underline font-bold hover:no-underline hover:text-gray-500 visited:text-gray-500;
+	}
+	.input {
+		@apply 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;
+	}
+	.button {
+		@apply 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;
+	}
+</style>

frontend/tailwind.config.cjs

@@ -2,7 +2,11 @@
 module.exports = {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
-		extend: {}
+		extend: {
+			animation: {
+				ping: 'ping 0.5s cubic-bezier(0, 0, 0.2, 1)'
+			}
+		}
 	},
 	plugins: [require('@tailwindcss/forms'), require('@tailwindcss/line-clamp')]
 };