feat: add some ai stuff

src/routes/+layout.svelte

@@ -1,16 +1,5 @@
 <script lang="ts">
+	import './global.css';
 </script>
 
 <slot />
-
-<style global>
-	:global(html, body) {
-		height: 100%;
-		margin: 0;
-		padding: 0;
-		background-color: black;
-		/* background-image: url(/confetti.png); */
-		background-size: 80%;
-		backdrop-filter: brightness(0.5);
-	}
-</style>

src/routes/+page.svelte

@@ -1,25 +1,36 @@
 <script lang="ts">
+	import FadeIn from '$lib/components/FadeIn.svelte';
+	import Questions from '$lib/components/Questions.svelte';
+	import TextSplit from '$lib/components/TextSplit.svelte';
 	import Button from '$lib/components/button.svelte';
 	import Confetti from '$lib/components/confetti.svelte';
 	import Curtains from '$lib/components/curtains.svelte';
 	import Mask from '$lib/components/mask.svelte';
 	import Maskenball from '$lib/components/maskenball.svelte';
 	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
 	let curtainsVisible = false;
 	let buttonVisible = false;
 	let maskVisible = false;
+	let maskSmall = false;
+	let contentVisible = false;
+	let questionVisible = false;
 
 	onMount(() => {
-		curtainsVisible = true;
+		// curtainsVisible = true;
+		curtainsVisible = false;
+		maskVisible = true;
+		maskSmall = true;
+		questionVisible = true;
 		setTimeout(() => {
-			buttonVisible = true;
+			// buttonVisible = true;
 		}, 1500);
 	});
 </script>
 
 <Confetti />
 <Curtains visible={curtainsVisible} />
-<div class="center">
+<div class="center" class:maskSmall>
 	{#if maskVisible}
 		<Mask />
 		<Maskenball />
@@ -28,28 +39,75 @@
 	{#if buttonVisible}
 		<span class="enter-button" class:visible={buttonVisible}>
 			<Button
+				--font-size="2em"
 				on:click={() => {
 					curtainsVisible = false;
 					buttonVisible = false;
 					setTimeout(() => {
 						maskVisible = true;
+						setTimeout(() => {
+							maskSmall = true;
+							contentVisible = true;
+						}, 7000);
 					}, 1000);
 				}}>Enter the Dungeon</Button
 			>
 		</span>
 	{/if}
-	>
 </div>
 
+{#if contentVisible}
+	<div class="einladung" out:fade>
+		<TextSplit
+			content="Wir laden dich herzlich ein, an unserer exklusiven Silvesterparty teilzunehmen, die dieses Jahr im magischen Ambiente eines Maskenballs stattfindet. Tauche ein in eine Nacht voller Geheimnisse, Eleganz und festlichem Glanz."
+		/>
+
+		<span in:fade={{ delay: 8000, duration: 1000 }}>
+			<Button
+				on:click={() => {
+					contentVisible = false;
+					questionVisible = true;
+				}}>Einladung annehmen</Button
+			>
+		</span>
+	</div>
+{/if}
+
+{#if questionVisible}
+	<Questions />
+{/if}
+
 <style>
 	.center {
-		display: grid;
-		position: absolute;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		align-items: center;
 		height: 100vh;
 		width: 100vw;
 		top: 0px;
-		transform: translateY(-5%);
 		place-content: center;
+		transition: height 3s ease;
+	}
+
+	.center.maskSmall {
+		height: 30vh;
+	}
+
+	:global(.center.maskSmall > p) {
+		font-size: 2em;
+	}
+
+	.einladung {
+		font-family: Parisienne;
+		font-size: 2em;
+		max-width: 500px;
+
+		margin: 0 auto;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 50px;
 	}
 
 	.enter-button {
@@ -68,9 +126,4 @@
 			opacity: 1;
 		}
 	}
-
-	:global(canvas) {
-		position: relative !important;
-		z-index: -1 !important;
-	}
 </style>

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

@@ -0,0 +1,27 @@
+import { json } from "@sveltejs/kit";
+import type { RequestHandler } from "./$types";
+import { putObject } from "$lib/helpers/s3";
+import { generateImage } from "$lib/helpers/stability";
+
+
+export const GET: RequestHandler = async ({ params }) => {
+
+  const inputName = params.name;
+
+  const prompt = `realistic profile portrait oil painting of a masked ${inputName}, baroque, Charles Vess, masked ball attire, Charles Vess, opulence, mystery, elegance, medium-length blond hair, darker skin`;
+  const negativePrompt = "blurry, multiple persons, picture frame"
+  const a = performance.now()
+  const image = await generateImage(prompt, negativePrompt);
+  const duration = performance.now() - a;
+
+  console.log({ duration })
+
+  const imageName = `${image.seed}-${inputName.toLowerCase().split(" ").slice(0, 5).join("-").slice(0, 25)}.png`
+
+  const res = await putObject(imageName, Buffer.from(image.base64, 'base64'), { "Content-Type": "image/png" });
+
+  return json({
+    ...res,
+    url: `https://s3.app.max-richter.dev/silvester23/${imageName}`
+  })
+}

src/routes/api/ai/image/[name]/GET.ts

@@ -0,0 +1,25 @@
+import { json } from "@sveltejs/kit";
+import type { RequestHandler } from "./$types";
+import { putObject } from "$lib/helpers/s3";
+
+
+
+export const GET: RequestHandler = async ({ params }) => {
+
+  const inputName = params.name;
+
+  const prompt = `upper body realistic portrait oil painting of a masked ${inputName}, Baroque, Charles Vess, masked ball attire, Charles Vess, opulence, mystery, elegance, dark long hair`;
+  const negativePrompt = "blurry, multiple persons, picture frame";
+
+  const image = generateImage(prompt, negativePrompt);
+
+  const imageName = `txt2img_${image.seed}.png`;
+
+  const res = await putObject(imageName, Buffer.from(image.base64, 'base64'), { contentType: "image/png" });
+
+  return json({
+    ...res,
+    url: `https://s3.app.max-richter.dev/silvester23/${imageName}`
+  });
+};
+

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

@@ -0,0 +1,14 @@
+import { type RequestHandler } from "@sveltejs/kit";
+import { chat } from "$lib/helpers/chatgpt";
+
+
+export const GET: RequestHandler = async function ({ params }) {
+
+  const inputName = params.name
+
+  const prompt = `Generate 10 variants of the name ${inputName}. The names should sound very much like the original but also like noble names from the 1900 century. Examples could be "lady rosalind of whitmore" "lord byron of castlemore" "Lord Max Richter". Only respond with 10 names seperated be newlines`;
+
+  const res = await chat(prompt);
+
+  return new Response(res);
+}

src/routes/api/s3/+server.ts

@@ -0,0 +1,8 @@
+import { getBuckets } from "$lib/helpers/s3";
+import { json } from "@sveltejs/kit";
+import type { RequestHandler } from "./$types";
+
+export const GET: RequestHandler = async () => {
+  const buckets = await getBuckets()
+  return json(buckets)
+}

src/routes/global.css

@@ -0,0 +1,19 @@
+
+/* parisienne-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Parisienne';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/parisienne-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+html, body {
+		height: 100%;
+		margin: 0;
+		padding: 0;
+		background-color: black;
+		/* background-image: url(/confetti.png); */
+		background-size: 80%;
+		backdrop-filter: brightness(0.5);
+}