feat: compress EVERYTHING!

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

@@ -1,8 +1,43 @@
 import { json } from "@sveltejs/kit";
-import Jimp from "jimp";
 import type { RequestHandler } from "./$types";
 import { putObject } from "$lib/helpers/minio";
 import { generateImage } from "$lib/helpers/stability";
+import sharp from "sharp";
+
+
+async function compressImage(imageName: string, imageBuffer: Buffer) {
+
+  const ja = performance.now()
+  const jpgBuffer = await sharp(imageBuffer)
+    .jpeg({ quality: 70 })
+    .withMetadata()
+    .toBuffer();
+
+  await putObject(imageName.replace(".png", ".jpg"), jpgBuffer, { "Content-Type": "image/jpeg" });
+
+  const jb = performance.now() - ja;
+  console.log(`[AI] JPG compression took ${jb}ms`)
+
+  const wa = performance.now()
+  const webpBuffer = await sharp(imageBuffer)
+    .webp({ quality: 70 })
+    .withMetadata()
+    .toBuffer()
+
+  await putObject(imageName.replace(".png", ".webp"), webpBuffer, { "Content-Type": "image/webp" });
+  const wb = performance.now() - wa;
+  console.log(`[AI] WebP compression took ${wb}ms`)
+
+  const aa = performance.now()
+  const aviBuffer = await sharp(imageBuffer)
+    .avif({ quality: 70 })
+    .withMetadata()
+    .toBuffer()
+
+  await putObject(imageName.replace(".png", ".avif"), aviBuffer, { "Content-Type": "image/avif" });
+  const ab = performance.now() - aa;
+  console.log(`[AI] AVIF compression took ${ab}ms`)
+}
 
 export const POST: RequestHandler = async ({ params, request }) => {
 
@@ -14,33 +49,39 @@ export const POST: RequestHandler = async ({ params, request }) => {
     throw new Error("Name too long");
   }
 
-  const { hairType, hairColor, hairLength } = await request.json();
-  console.log(hairType, hairColor, hairLength)
+  const { hairType, hairColor, hairLength, skinColor } = await request.json();
+  console.log(`[AI] Generating image for ${inputName} ${JSON.stringify({ hairType, hairColor, hairLength, skinColor })}`)
 
   if (!hairType || !hairColor || !hairLength) {
     throw new Error("Missing hairType, hairColor or hairLength");
   }
 
-  const prompt = `realistic portrait oil painting of a masked ${inputName}, baroque, in the style of Charles Vess, masked ball attire, opulence, mystery, elegance, ${hairLength} ${hairType} ${hairColor} hair, darker skin`;
+  const prompt = `realistic portrait oil painting of a masked ${inputName}, baroque, in the style of Charles Vess, masked ball attire, opulence, mystery, elegance, ${hairLength} ${hairType} ${hairColor} hair, ${skinColor} skin`;
   const negativePrompt = "blurry, multiple persons, picture frame"
 
   const a = performance.now()
-  // #const image = await openai.image(prompt);
   const image = await generateImage(prompt, negativePrompt);
-  const duration = performance.now() - a;
+  const d = performance.now() - a;
+  console.log(`[AI] Image generation took ${d}ms`)
 
 
   const imageName = `${Math.random().toString(16).substring(3, 10)}-${inputName.toLowerCase().split(" ").slice(0, 5).join("-").slice(0, 25)}.png`
 
-  await putObject(imageName, Buffer.from(image.base64, 'base64'), { "Content-Type": "image/png" });
+  const imageBuffer = Buffer.from(image.base64, 'base64');
 
-  const img = await Jimp.read(Buffer.from(image.base64, "base64"));
-  const jpgBuffer = await img.quality(70).getBufferAsync(Jimp.MIME_JPEG);
+  const a2 = performance.now()
+  const pngBuffer = await sharp(imageBuffer)
+    .png({ compressionLevel: 9, adaptiveFiltering: true, force: true })
+    .withMetadata()
+    .toBuffer()
 
-  await putObject(imageName.replace(".png", ".jpg"), jpgBuffer, { "Content-Type": "image/jpeg" });
+  await putObject(imageName, pngBuffer, { "Content-Type": "image/png" });
+  const d2 = performance.now() - a2;
+  console.log(`[AI] PNG compression took ${d2}ms`)
+
+  await compressImage(imageName, imageBuffer)
 
   return json({
-    duration,
-    url: `https://s3-api.app.max-richter.dev/silvester23/${imageName}`
+    url: `https://s3.max-richter.dev/silvester23/${imageName}`
   })
 }

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

@@ -26,6 +26,7 @@ export const POST: RequestHandler = async ({ request }) => {
       hair_type: body.portraitHairType,
       hair_color: body.portraitHairColor,
       portrait_public: body.portraitPublic,
+      skin_color: body.portraitSkinColor,
     });
   } catch (e) {
     console.log(e)

src/routes/gallery/+page.svelte

@@ -93,6 +93,7 @@
 	:global(html) {
 		background-image: url(/pattern.jpg) !important;
 		backdrop-filter: brightness(0.5) !important;
+		background-size: 25%;
 	}
 	.wrapper {
 		max-width: 1300px;

src/routes/image/+page.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import ImageFrame from '$lib/components/ImageFrame.svelte';
-</script>
-
-<ImageFrame
-	src="https://s3-api.app.max-richter.dev/silvester23/13770f0-earl-maximus-of-richterla.png"
-/>