fix to new gradio api, re-enable mutiples

frontend/src/lib/Palette.svelte

@@ -8,10 +8,11 @@
 
 	export let promptData: ColorsPrompt;
 
-	$: prompt = promptData.prompt;
-	$: colors = promptData.images[0].colors.map((e) => d3.rgb(e));
-	$: imageSrc = promptData.images[0].imgURL;
+	let seletecdImage = 0;
 
+	$: prompt = promptData.prompt;
+	$: colors = promptData.images[seletecdImage].colors.map((e) => d3.rgb(e));
+	$: imageSrc = promptData.images[seletecdImage].imgURL;
 	let isCopying = false;
 
 	async function copyStringToClipboard(text: string) {
@@ -46,7 +47,7 @@
 				src={imageSrc}
 				alt={prompt}
 			/>
-			<!-- <div class="absolute flex justify-around w-full">
+			<div class="absolute flex justify-around w-full">
 				{#each promptData.images as image, i}
 					<button
 						class="{seletecdImage === i
@@ -56,7 +57,7 @@
 						on:mousemove={() => (seletecdImage = i)}
 					/>
 				{/each}
-			</div> -->
+			</div>
 		</div>
 	</div>
 	<div

frontend/src/lib/utils.ts

@@ -51,7 +51,7 @@ export function extractPalette(
 		img.onload = async () => {
 			const w = img.width;
 			const h = img.height;
-			const canvas: HTMLCanvasElement = document.createElement('canvas');
+			const canvas = document.createElement('canvas');
 			canvas.width = w;
 			canvas.height = h;
 			const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
@@ -60,8 +60,15 @@ export function extractPalette(
 			const pixelArray = createPixelArray(imageData.data, w * h, quality);
 			const cmap = quantize(pixelArray, colorCount);
 			const colors: number[][] = cmap.palette();
+			const tempCanvas = document.createElement('canvas');
+			tempCanvas.width = w / 5;
+			tempCanvas.height = h / 5;
+			const tempCtx = tempCanvas.getContext('2d') as CanvasRenderingContext2D;
+			tempCtx.drawImage(img, 0, 0, w, h, 0, 0, w / 5, h / 5);
 
-			const imgBlob: Blob = await new Promise((r) => canvas.toBlob(r, 'image/jpeg', 0.95));
+			const imgBlob: Blob = await new Promise((_resolve) =>
+				tempCanvas.toBlob(_resolve, 'image/jpeg', 0.8)
+			);
 			const colorsRGB = colors.map((color) => d3.rgb(...(color as [number, number, number])));
 			resolve({
 				colors: sortColors(colorsRGB),
@@ -108,4 +115,4 @@ function slugify(text: string) {
 		.replace(/\-\-+/g, '-')
 		.replace(/^-+/, '')
 		.replace(/-+$/, '');
-}
+}

frontend/src/routes/+page.svelte

@@ -61,22 +61,17 @@
 		if (!_prompt || $isLoading == true) return;
 		$loadingState = 'Pending';
 		$isLoading = true;
-		const hash = crypto.randomUUID();
+		const sessionHash = crypto.randomUUID();
+
 		const payload = {
 			fn_index: 2,
-			data: [
-				// prompt, samples, steps, scale, seed
-				_prompt,
-				1,
-				40,
-				7.5,
-				Number(randomSeed())
-			]
+			data: [_prompt],
+			session_hash: sessionHash
 		};
 		const websocket = new WebSocket(PUBLIC_WS_ENDPOINT);
-		websocket.onopen = async function (event) {
-			websocket.send(JSON.stringify({ hash: hash }));
-		};
+		// websocket.onopen = async function (event) {
+		// 	websocket.send(JSON.stringify({ hash: sessionHash }));
+		// };
 		websocket.onclose = (evt) => {
 			if (!evt.wasClean) {
 				$loadingState = 'Error';
@@ -133,20 +128,26 @@
 		const nsfwColors = ['#040404', '#B7B7B7', '#565656', '#747474', '#6C6C6C'];
 
 		const colorImages = [];
+		let isNSFW = false;
 		for (const base64img of images) {
 			const { colors, imgBlob } = await extractPalette(base64img);
 			if (
-				colors.map((color) => color.formatHex().toUpperCase()).every((c) => nsfwColors.includes(c))
+				!colors.map((color) => color.formatHex().toUpperCase()).every((c) => nsfwColors.includes(c))
 			) {
-				console.error('Possible NSFW image');
-				throw new Error('Possible NSFW image');
+				const url = await uploadImage(imgBlob, _prompt);
+				const colorsImage: ColorsImage = {
+					colors,
+					imgURL: url
+				};
+				colorImages.push(colorsImage);
+			} else {
+				isNSFW = true;
 			}
-			const url = await uploadImage(imgBlob, _prompt);
-			const colorsImage: ColorsImage = {
-				colors,
-				imgURL: url
-			};
-			colorImages.push(colorsImage);
+		}
+
+		if (colorImages.length === 0 && isNSFW) {
+			console.error('Possible NSFW image');
+			throw new Error('Possible NSFW image');
 		}
 		return colorImages;
 	}