fix undefined

frontend/src/lib/Palette.svelte

@@ -10,9 +10,9 @@
 
 	let seletecdImage = 0;
 
-	$: prompt = promptData.prompt;
-	$: colors = promptData.images[seletecdImage].colors.map((e) => d3.rgb(e));
-	$: imageSrc = promptData.images[seletecdImage].imgURL;
+	$: 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) {
@@ -37,7 +37,9 @@
 		<p>{prompt}</p>
 	</blockquote>
 	<div class="row-start-3 md:row-start-2 col-span-6 md:col-span-4 flex items-center justify-center">
-		<ColorPalette {colors} />
+		{#if colors}
+			<ColorPalette {colors} />
+		{/if}
 	</div>
 	<div class="row-start-2 col-span-6 md:col-span-2 flex justify-center md:justify-end pb-3">
 		<div class="relative">

frontend/src/routes/+page.svelte

@@ -25,8 +25,8 @@
 
 	async function fetchData() {
 		const palettes = await fetch(apiUrl + '/data').then((d) => d.json());
-		if (!promptsData || palettes.length > promptsData.length) {
-			promptsData = sortData(palettes);
+		if (!promptsData || palettes?.length > promptsData?.length) {
+			promptsData = sortData(palettes)
 		}
 	}