store own generation in storage by id

app/api/collections/route.ts

@@ -2,10 +2,16 @@ import { PrismaClient } from '@prisma/client'
 
 const prisma = new PrismaClient()
 
-export async function GET() {
+export async function POST(request: Request) {
+  const { ids } = await request.json()
   const images = await prisma.image.findMany({
     orderBy: {
       id: 'desc'
+    },
+    where: {
+      id: {
+        in: ids,
+      }
     }
   })
 

assets/list_styles.json

@@ -0,0 +1,52 @@
+[
+  {
+      "name": "(No style)",
+      "prompt": "{prompt}",
+      "negative_prompt": ""
+  },
+  {
+      "name": "Cinematic",
+      "prompt": "cinematic still {prompt} . emotional, harmonious, vignette, highly detailed, high budget, bokeh, cinemascope, moody, epic, gorgeous, film grain, grainy",
+      "negative_prompt": "anime, cartoon, graphic, text, painting, crayon, graphite, abstract, glitch, deformed, mutated, ugly, disfigured"
+  },
+  {
+      "name": "Photographic",
+      "prompt": "cinematic photo {prompt} . 35mm photograph, film, bokeh, professional, 4k, highly detailed",
+      "negative_prompt": "drawing, painting, crayon, sketch, graphite, impressionist, noisy, blurry, soft, deformed, ugly"
+  },
+  {
+      "name": "Anime",
+      "prompt": "anime artwork {prompt} . anime style, key visual, vibrant, studio anime,  highly detailed",
+      "negative_prompt": "photo, deformed, black and white, realism, disfigured, low contrast"
+  },
+  {
+      "name": "Manga",
+      "prompt": "manga style {prompt} . vibrant, high-energy, detailed, iconic, Japanese comic style",
+      "negative_prompt": "ugly, deformed, noisy, blurry, low contrast, realism, photorealistic, Western comic style"
+  },
+  {
+      "name": "Digital Art",
+      "prompt": "concept art {prompt} . digital artwork, illustrative, painterly, matte painting, highly detailed",
+      "negative_prompt": "photo, photorealistic, realism, ugly"
+  },
+  {
+      "name": "Pixel art",
+      "prompt": "pixel-art {prompt} . low-res, blocky, pixel art style, 8-bit graphics",
+      "negative_prompt": "sloppy, messy, blurry, noisy, highly detailed, ultra textured, photo, realistic"
+  },
+  {
+      "name": "Fantasy art",
+      "prompt": "ethereal fantasy concept art of  {prompt} . magnificent, celestial, ethereal, painterly, epic, majestic, magical, fantasy art, cover art, dreamy",
+      "negative_prompt": "photographic, realistic, realism, 35mm film, dslr, cropped, frame, text, deformed, glitch, noise, noisy, off-center, deformed, cross-eyed, closed eyes, bad anatomy, ugly, disfigured, sloppy, duplicate, mutated, black and white"
+  },
+  {
+      "name": "Neonpunk",
+      "prompt": "neonpunk style {prompt} . cyberpunk, vaporwave, neon, vibes, vibrant, stunningly beautiful, crisp, detailed, sleek, ultramodern, magenta highlights, dark purple shadows, high contrast, cinematic, ultra detailed, intricate, professional",
+      "negative_prompt": "painting, drawing, illustration, glitch, deformed, mutated, cross-eyed, ugly, disfigured"
+  },
+  {
+      "name": "3D Model",
+      "prompt": "professional 3d model {prompt} . octane render, highly detailed, volumetric, dramatic lighting",
+      "negative_prompt": "ugly, deformed, noisy, low poly, blurry, painting"
+  }
+]

components/main/collections/index.tsx

@@ -1,19 +1,19 @@
 import classNames from "classnames";
-import { createBreakpoint } from "react-use";
+import { createBreakpoint, useLocalStorage } from "react-use";
 
 import { Collection as CollectionType } from "@/type";
 
-import { useCollections } from "../hooks/useCollections";
+import { useCollections } from "@/components/main/hooks/useCollections";
 import { Collection } from "./collection";
 import { CollectionLoading } from "./loading";
 
 const useBreakpoint = createBreakpoint({ XL: 1280, L: 1024, S: 768, XS: 640 });
 
-export const Collections = () => {
-  const { collections, loading } = useCollections();
+export const Collections: React.FC<{ category: string }> = ({ category }) => {
+  const { collections, loading } = useCollections(category);
   const breakpoint = useBreakpoint();
 
-  if (loading) return;
+  if (loading) return null;
 
   return (
     <div className="mx-auto grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5 mt-8 lg:mt-14">
@@ -22,11 +22,10 @@ export const Collections = () => {
           <CollectionLoading key={i} prompt={collection.prompt} />
         ) : (
           <Collection
-            key={i}
+            key={category + collection.id}
             index={i}
             collection={collection}
             className={classNames("", {
-              // translate second and fourth item per row, row of 5 items
               "!translate-y-12":
                 breakpoint === "XL"
                   ? i % 5 === 1 || i % 5 === 3

components/main/hooks/useCollections.ts

@@ -1,14 +1,22 @@
-import { Collection } from "@/type";
 import { useQuery } from "@tanstack/react-query";
+import { useLocalStorage, useUpdateEffect } from "react-use";
 
-export const useCollections = () => {
+export const useCollections = (category: string) => {
+  const [myGenerationsId] = useLocalStorage<any>('my-own-generations', []);
   const {
     data: collections,
-    isLoading: loading,
+    isFetching: loading,
+    refetch,
       } = useQuery(
     ["collections"],
     async () => {
-      const response = await fetch("/api/collections", { method: "GET" })
+      // if category is my-own, send to reauest myGenerationsId array
+      const response = await fetch("/api/collections", {
+        method: "POST",
+        body: JSON.stringify({
+          ids: category === 'my-own' ? myGenerationsId : undefined,
+        }),
+      })
       const data = await response.json()
 
       if (!response.ok) {
@@ -23,6 +31,10 @@ export const useCollections = () => {
     }
   );
 
+  useUpdateEffect(() => {
+    refetch()
+  }, [category]);
+
   return {
     collections,
     loading,

components/main/hooks/useInputGeneration.ts

@@ -1,62 +1,14 @@
 import { useState } from "react"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { Collection } from "@/type"
+import { useLocalStorage } from 'react-use';
 
-const list_styles = [
-  {
-      "name": "(No style)",
-      "prompt": "{prompt}",
-      "negative_prompt": "",
-  },
-  {
-      "name": "Cinematic",
-      "prompt": "cinematic still {prompt} . emotional, harmonious, vignette, highly detailed, high budget, bokeh, cinemascope, moody, epic, gorgeous, film grain, grainy",
-      "negative_prompt": "anime, cartoon, graphic, text, painting, crayon, graphite, abstract, glitch, deformed, mutated, ugly, disfigured",
-  },
-  {
-      "name": "Photographic",
-      "prompt": "cinematic photo {prompt} . 35mm photograph, film, bokeh, professional, 4k, highly detailed",
-      "negative_prompt": "drawing, painting, crayon, sketch, graphite, impressionist, noisy, blurry, soft, deformed, ugly",
-  },
-  {
-      "name": "Anime",
-      "prompt": "anime artwork {prompt} . anime style, key visual, vibrant, studio anime,  highly detailed",
-      "negative_prompt": "photo, deformed, black and white, realism, disfigured, low contrast",
-  },
-  {
-      "name": "Manga",
-      "prompt": "manga style {prompt} . vibrant, high-energy, detailed, iconic, Japanese comic style",
-      "negative_prompt": "ugly, deformed, noisy, blurry, low contrast, realism, photorealistic, Western comic style",
-  },
-  {
-      "name": "Digital Art",
-      "prompt": "concept art {prompt} . digital artwork, illustrative, painterly, matte painting, highly detailed",
-      "negative_prompt": "photo, photorealistic, realism, ugly",
-  },
-  {
-      "name": "Pixel art",
-      "prompt": "pixel-art {prompt} . low-res, blocky, pixel art style, 8-bit graphics",
-      "negative_prompt": "sloppy, messy, blurry, noisy, highly detailed, ultra textured, photo, realistic",
-  },
-  {
-      "name": "Fantasy art",
-      "prompt": "ethereal fantasy concept art of  {prompt} . magnificent, celestial, ethereal, painterly, epic, majestic, magical, fantasy art, cover art, dreamy",
-      "negative_prompt": "photographic, realistic, realism, 35mm film, dslr, cropped, frame, text, deformed, glitch, noise, noisy, off-center, deformed, cross-eyed, closed eyes, bad anatomy, ugly, disfigured, sloppy, duplicate, mutated, black and white",
-  },
-  {
-      "name": "Neonpunk",
-      "prompt": "neonpunk style {prompt} . cyberpunk, vaporwave, neon, vibes, vibrant, stunningly beautiful, crisp, detailed, sleek, ultramodern, magenta highlights, dark purple shadows, high contrast, cinematic, ultra detailed, intricate, professional",
-      "negative_prompt": "painting, drawing, illustration, glitch, deformed, mutated, cross-eyed, ugly, disfigured",
-  },
-  {
-      "name": "3D Model",
-      "prompt": "professional 3d model {prompt} . octane render, highly detailed, volumetric, dramatic lighting",
-      "negative_prompt": "ugly, deformed, noisy, low poly, blurry, painting",
-  },
-]
+import { Collection } from "@/type"
+import list_styles from "@/assets/list_styles.json"
 
 export const useInputGeneration = () => {
+  const [myGenerationsId, setGenerationsId] = useLocalStorage<any>('my-own-generations', []);
   const [style, setStyle] = useState<string>(list_styles[0].name)
+
   const { data: prompt } = useQuery(["prompt"], () => {
     return ''
   }, {
@@ -65,9 +17,7 @@ export const useInputGeneration = () => {
     refetchOnReconnect: false,
     initialData: ''
   })
-  const setPrompt = (str:string) => {
-    client.setQueryData(["prompt"], () => str)
-  }
+  const setPrompt = (str:string) => client.setQueryData(["prompt"], () => str)
 
   const client = useQueryClient()
 
@@ -110,7 +60,9 @@ export const useInputGeneration = () => {
         return newArray
       })
 
-      return data ?? []
+      setGenerationsId(myGenerationsId?.length ? [...myGenerationsId, data?.blob?.id] : [data?.blob?.id])
+
+      return data ?? {}
     },
   )
 
@@ -122,9 +74,7 @@ export const useInputGeneration = () => {
     refetchOnReconnect: false,
     initialData: false
   })
-  const setFirstGenerationDone = () => {
-    client.setQueryData(["firstGenerationDone"], () => true)
-  }
+  const setFirstGenerationDone = () => client.setQueryData(["firstGenerationDone"], () => true)
 
   return {
     prompt,

components/main/index.tsx

@@ -68,7 +68,7 @@ export const Main = () => {
           list_styles={list_styles}
         />
       </div>
-      <Collections />
+      <Collections category={category} />
     </main>
   );
 };