wip: save image if user is logged + save in persistent storage

.gitignore

@@ -11,4 +11,5 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 prisma/dev.db
-prisma/migrations/*
+prisma/migrations/*
+uploads/*

prisma/schema.prisma

@@ -29,6 +29,7 @@ model Gallery {
   createdAt DateTime   @default(now())
   prompt    String
   image     String
+  isPublic  Boolean    @default(false)
   reactions Reaction[]
   model     Model      @relation(fields: [modelId], references: [id])
   modelId   String

src/lib/components/community/Card.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { CommunityCard } from "$lib/type";
   import Button from "$lib/components/Button.svelte";
+  import { env } from "$env/dynamic/public";
 
 	import Reactions from "./reactions/Reactions.svelte";
 
@@ -11,7 +12,7 @@
   class="cursor-pointer group bg-neutral-700 rounded-xl h-[400px] relative flex items-start justify-between flex-col p-5 transition-all duration-200 brightness-75 hover:brightness-100 z-[1] overflow-hidden"
 >
   <div class="w-full h-full absolute top-0 left-0 -z-[1] rounded-xl overflow-hidden">
-    <div class="w-full h-full bg-center bg-cover transition-all duration-200 group-hover:scale-110 " style="background-image: url('https://huggingface.co/datasets/enzostvs/loras-studio/resolve/main/{card.image}?expose=true');"></div>
+    <div class="w-full h-full bg-center bg-cover transition-all duration-200 group-hover:scale-110 " style="background-image: url('{env.PUBLIC_FILE_UPLOAD_DIR}/{card.image}');"></div>
   </div>
   <div class="group-hover:opacity-100 opacity-0 translate-y-full group-hover:translate-y-0 transition-all duration-200 flex flex-col gap-4 w-full">
     <div class="bg-black/40 backdrop-blur-sm border border-white/30 rounded-lg px-6 py-3 text-white transition-all duration-200 w-full">

src/lib/components/generate/Response.svelte

@@ -39,6 +39,8 @@
     generation = value;
   })
 
+  $: console.log(generation);
+
   // create a ms countup depending on the generation time, to show the user how long it took to generate the image
   let ms = 0;
   let interval: any;

src/lib/stores/use-generation.ts

@@ -1,8 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import type { CommunityCard } from "$lib/type";
 import { writable } from "svelte/store";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const generationStore = writable<{
   form?: Record<string, any>,
+  gallery?: CommunityCard,
   image?: string | ArrayBuffer | null,
 }>(undefined);

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

@@ -13,7 +13,8 @@ export async function GET(request : RequestEvent) {
     where: {
       OR: [
         { prompt: { contains: search } },
-      ]
+      ],
+      isPublic: true
     },
     orderBy: {
       ...(filter === 'new' ? {

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

@@ -2,8 +2,15 @@
 
 import { json, type RequestEvent } from '@sveltejs/kit';
 import { env } from '$env/dynamic/private'
+import { env as publicEnv } from '$env/dynamic/public';
+import { promises } from 'fs';
+import { randomUUID } from 'crypto';
 
-export async function POST({ request } : RequestEvent) {
+import { tokenIsAvailable } from '$lib/utils';
+import prisma from '$lib/prisma';
+
+export async function POST({ request, cookies } : RequestEvent) {
+  const token = cookies.get('hf_access_token')
   const generation = await request.json()
 
   if (!generation?.model?.id) {
@@ -31,8 +38,12 @@ export async function POST({ request } : RequestEvent) {
     },
     body: JSON.stringify(generation),
   })
-  .then((res) => res.blob())
-  .then((blob) => blob)
+  .then((response) => {
+    return response.arrayBuffer()
+  })
+  .then((response) => {
+    return Buffer.from(response)
+  })
   .catch((error) => {
     return {
       error: error.message,
@@ -47,9 +58,45 @@ export async function POST({ request } : RequestEvent) {
     }, { status: 400 })
   }
 
-  return new Response(response, {
-    headers: {
-      'Content-Type': 'image/png',
-    },
+  let gallery;
+
+  if (token) {
+    const user = await tokenIsAvailable(token)
+    if (user?.sub) {      
+      const dir = await promises.opendir(env.SECRET_FILE_UPLOAD_DIR).catch(() => null)
+      if (!dir) {
+        await promises.mkdir(env.SECRET_FILE_UPLOAD_DIR)
+      }
+      const file_name_formatted = randomUUID() + "_" + generation?.inputs?.replaceAll(/[^a-zA-Z0-9]/g, "-") + ".png"
+      await promises.writeFile(`${publicEnv.PUBLIC_FILE_UPLOAD_DIR}/${file_name_formatted}`, response)
+
+      gallery = await prisma.gallery.create({
+        data: {
+          image: file_name_formatted,
+          prompt: generation.inputs,
+          isPublic: false,
+          user: {
+            connect: {
+              sub: user.sub
+            }
+          },
+          model: {
+            connect: {
+              id: generation.model.id
+            }
+          },
+        }
+      })
+      .catch((error) => {
+        console.log(error)
+      })
+    } 
+  }
+
+  const image = Buffer.from(response).toString('base64')
+
+  return json({
+    image: "data:image/png;base64," + image,
+    gallery
   })
 }

src/routes/generate/+page.svelte

@@ -37,20 +37,14 @@
 			},
 			body: JSON.stringify(form)
 		});
-		const blob = await request?.clone()?.blob()
 
-		if (blob) {
-      const reader = new FileReader()
-      reader.readAsDataURL(blob)
-      reader.onloadend = () => {
-        const base64data = reader.result
-				generationStore.set({
-					image: base64data,
-					form: form
-				})
-      }
-    }
+		const response = await request.json();
 
+		generationStore.set({
+			image: response?.image,
+			gallery: response?.gallery,
+			form: form
+		})
     loading = false
 	}
 </script>

vite.config.ts

@@ -1,10 +1,15 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { enhancedImages } from '@sveltejs/enhanced-img';
-import { defineConfig } from 'vite';
+import { defineConfig, searchForWorkspaceRoot } from 'vite';
 
 export default defineConfig({
 	plugins: [
 		enhancedImages(),
 		sveltekit()
 	],
+	server: {
+		fs: {
+			allow: [searchForWorkspaceRoot(process.cwd()),'/uploads']
+		}
+	}
 });