src/routes/generate/+page.svelte

<svelte:head>
	<title>Generate your Image</title>
	<meta name="description" content="Svelte demo app" />
</svelte:head>

<script lang="ts">
	import Autocomplete from "$lib/components/models/autocomplete/Autocomplete.svelte";

	export let data

	let form = {
		model: data?.model ?? null,
		prompt: ""
	}
</script>

<div class="flex items-start w-full h-full gap-16">
	<div class="w-full">
		<h1 class="text-white font-semibold text-2xl">
			Start generating
		</h1>
		<div class="mt-5 grid grid-cols-1 gap-5">
			<div>
				<p class="text-neutral-300 mb-2.5 text-base">Models</p>
				<Autocomplete
					value={form?.model}
					defaultModels={data?.models?.cards}
					onChange={(model) => form.model = model}
				/>
			</div>
		</div>
	</div>
	<div class="w-full bg-neutral-100 rounded-2xl h-full p-8">
		<p class="text-neutral-900 font-semibold text-xl">
			Result of your generation
		</p>
	</div>
</div>