feat: add name limit

src/lib/components/Questions.svelte

@@ -10,10 +10,12 @@
 
 	let data = persisted<{
 		name: string;
+		showNameLengthError: boolean;
 		nameAccepted?: boolean;
 
 		provideAdelsTitel?: boolean;
 		adelsTitel?: string;
+		showAdelsTitelLengthError: boolean;
 		adelsTitelAccepted?: boolean;
 		adelsTitelSuggestions?: string[];
 
@@ -32,8 +34,10 @@
 		createPersonality?: boolean;
 	}>('data', {
 		name: '',
+		showNameLengthError: false,
 		nameAccepted: false,
 		adelsTitel: undefined,
+		showAdelsTitelLengthError: false,
 		adelsTitelSuggestions: [],
 		provideAdelsTitel: undefined,
 		portraitPublic: true,
@@ -42,6 +46,14 @@
 		createPersonality: undefined
 	});
 
+	$: if ($data.name.length > 99) {
+		$data.showNameLengthError = true;
+	}
+
+	$: if ($data?.adelsTitel?.length > 99) {
+		$data.showAdelsTitelLengthError = true;
+	}
+
 	let loadingAdelsTitel = false;
 	async function fetchAdelsTitel() {
 		if (loadingAdelsTitel) return;
@@ -94,11 +106,20 @@
 	<section in:slide={{ delay: 500 }}>
 		<TextSplit content="Wie lauten Euer Vor- und Nachname, edler Gast?" />
 		<input placeholder="Name" type="text" bind:value={$data.name} />
+
+		{#if $data.name.length > 99}
+			<p class="error">
+				Wir bitten um Entschuldigung, aber dieser Name ist zu lang. (maximal 100 Zeichen)
+			</p>
+		{:else if $data.showNameLengthError}
+			<p class="hint">{$data.name.length}/100 Zeichen</p>
+		{/if}
 		{#if !$data.nameAccepted}
 			<button
+				disabled={$data.name.length > 99}
 				on:click={() => {
 					$data.nameAccepted = true;
-				}}>Name akzeptieren</button
+				}}>Name speichern</button
 			>
 		{/if}
 	</section>
@@ -158,6 +179,14 @@
 					>
 						ja</button
 					>
+					<button
+						on:click={() => {
+							$data.adelsTitel = '';
+							$data.provideAdelsTitel = true;
+						}}
+					>
+						ich habe bereits einen
+					</button>
 					<button
 						on:click={() => {
 							$data.adelsTitel = '';
@@ -177,12 +206,26 @@
 			{:else if typeof $data.adelsTitel === 'string'}
 				<TextSplit content="Euer Adelstitel" />
 				<input placeholder="Name" type="text" bind:value={$data.adelsTitel} />
+				{#if $data.adelsTitel.length > 99}
+					<p class="error">
+						Wir bitten um Entschuldigung, aber dieser Titel ist zu lang. (maximal 100 Zeichen)
+					</p>
+				{:else if $data.showAdelsTitelLengthError}
+					<p class="hint">{$data.name.length}/100 Zeichen</p>
+				{/if}
 				{#if !$data.adelsTitelAccepted}
 					<button
+						disabled={$data.adelsTitel.length > 99}
 						on:click={() => {
 							$data.adelsTitelAccepted = true;
 						}}>akzeptieren</button
 					>
+					<button
+						on:click={() => {
+							$data.adelsTitel = undefined;
+							fetchAdelsTitel();
+						}}>neue vorschläge</button
+					>
 				{/if}
 			{:else if $data.adelsTitelSuggestions?.length}
 				<p>Adelstitel Vorschläge</p>
@@ -308,6 +351,23 @@
 		margin-bottom: 200px;
 	}
 
+	p.error {
+		background: red;
+		color: white;
+		padding: 9px;
+		border-radius: 5px;
+		font-size: 0.5em;
+		font-weight: 200;
+		font-family: sans-serif;
+	}
+
+	p.hint {
+		font-size: 0.6em;
+		font-family: sans-serif;
+		font-weight: 200;
+		opacity: 0.6;
+	}
+
 	.portrait-frame.loaded {
 		margin-top: 100px;
 		border: none;
@@ -323,6 +383,12 @@
 		cursor: pointer;
 	}
 
+	button:disabled {
+		opacity: 0.4;
+		pointer-events: none;
+		user-select: none;
+	}
+
 	.wrapper {
 		display: flex;
 		flex-direction: column;

src/lib/helpers/openai.ts

@@ -18,7 +18,7 @@ function processChatGptResult(resultString: string) {
 export async function chat(prompt: string, { isList, temperature }: { isList?: boolean, temperature?: number } = {}) {
 
   const chatCompletion = await openai.chat.completions.create({
-    model: "gpt-4",
+    model: "gpt-3.5-turbo",
     temperature: temperature ?? 0.9,
     messages: [
       {

src/routes/api/ai/image/[name]/+server.ts

@@ -45,7 +45,7 @@ export const POST: RequestHandler = async ({ params, request }) => {
   if (!inputName) {
     throw new Error("Missing name");
   }
-  if (inputName.length > 50) {
+  if (inputName.length > 100) {
     throw new Error("Name too long");
   }