feat: added model selector

web/src/routes/+page.svelte

@@ -1,9 +1,38 @@
 <script lang="ts">
-	import { ProgressRadial, getToastStore } from '@skeletonlabs/skeleton';
+	import { ProgressRadial, getToastStore, RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
 
 	let inputText = '';
 	let imageUrl = '';
 
+	const models = [
+		{
+			name: "Runway v2.5",
+			value: "runway-v2.5",
+		},
+		{
+			name: "Dall-e 3",
+			value: "dall-e-3",
+		},
+		{
+			name: "Stable Diffusion 3",
+			value: "stable-diffusion-3",
+		},
+		{
+			name: "Pollinations",
+			value: "pollinations"
+		},
+		{
+			name: "RealVis XL 4",
+			value: "realvisxl-v4",
+		},
+		{
+			name: "CyberRealistic",
+			value: "cyberrealistic-v3.3",
+		}
+	]
+
+	let currentModel = models[0].value;
+
 	let generateFutureAbortController = new AbortController();
 	let generateFutureAbortSignal = generateFutureAbortController.signal;
 
@@ -33,7 +62,8 @@
 		isGenerating = true;
 		try {
 			const response = await fetch(
-				`/api/forward/gen_image?prompt=${encodeURIComponent(inputText)}`,
+				`/api/forward/gen_image?prompt=${encodeURIComponent(inputText)}&model=${encodeURIComponent(currentModel)}`,
+
 				{ signal }
 			);
 			if (response.ok) {
@@ -150,6 +180,16 @@
 				</div>
 			{/await}
 		</div>
+	<div class="px-4 mb-4">
+		<p>Bildgenerations-Model</p>
+		<RadioGroup active="variant-filled-primary" hover="hover:variant-soft-primary">
+			{#each models as model}
+				<RadioItem bind:group={currentModel} value={model.value}>
+					{model.name}
+				</RadioItem>
+			{/each}
+		</RadioGroup>
+	</div>
 	</center>
 
 	<form on:submit|preventDefault={handleSubmit} class="flex flex-col md:flex-row space-x-4">