install prisma to save blob

.env

@@ -0,0 +1,7 @@
+# Environment variables declared in this file are automatically made available to Prisma.
+# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+
+DATABASE_URL="file:./dev.db"

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+/data/*
 
 # testing
 /coverage

.next/cache/webpack/client-development/0.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f19af5233a83970caf41f7667e83119d6957731a1afe59d23d4c0e2a768b3d86
-size 34992
+oid sha256:b61cd9c662ea4604ac7974f7ad0210f21b6ceb2e1442458c432a8f0549771412
+size 68573

.next/cache/webpack/client-development/1.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:234891e5cea7b9577ecf1a1817f61fea3c959fd2ccbaf97fc592f23603d050eb
-size 5153
+oid sha256:79adbab21e70193f275d14dba745db5039d09efe4746e358e20a71220b1cc8d4
+size 1750

.next/cache/webpack/client-development/10.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fc5f14b88bb5a14976baf067a694e254c85788836f33e4f1544bf0891c6f6828
-size 457122
+oid sha256:2c0326d66ccd4c8027bd50755f48740a7d2fd318cc22d71d637e80800ee3d2b2
+size 24064

.next/cache/webpack/client-development/11.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cbd6c83761e957717a14b2a84b3fe962fa2f56cc2976477e8cf0fcfe00f5a76f
-size 6104
+oid sha256:3117969c4894077eedbc9a3b8c2a993a38050eabba3b0036a6a902d2b5600ac4
+size 11328079

.next/cache/webpack/client-development/12.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3eea80fc6132238ea407bf75bb3a648a1b95eedf61725d4b911cabed2f4a30da
-size 3636850
+oid sha256:c11d8bc715a54d8850d316d243ac120976e233ec542b9433c788c70ac545d191
+size 3628984

.next/cache/webpack/client-development/2.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:09fc7881ddecfa656d58371895bcf62eeae12b4e5b7473bee96275e772b92689
-size 24066
+oid sha256:518d31c7cf21c9294161e0349976002cfb55cc172442a803deb5751b8f418a5b
+size 428

.next/cache/webpack/client-development/3.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e6ee4e5f7dc0555735b16c9e9a534f2adc5e320dbc19344b419f54f5a68a7079
-size 227635
+oid sha256:c587ee53704e34c183e65b0a312ce5cbd82025e7eb5c70b46bdf44993f34bec9
+size 9002

.next/cache/webpack/client-development/4.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:685adc15f9da46b5b2dcdc707f9fdfb3c550313db90e9a0133a42b01be23fdde
-size 52276
+oid sha256:1ba3e7b24bab0d3a7b93dd87e145e209adb33f34351c5b5bcb84330e6a8d117d
+size 30624

.next/cache/webpack/client-development/5.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:491eb7ab8bf0ec74ddb3795fc38dc26385c707224edc47d1c87dbcef21e1ec8a
-size 1714
+oid sha256:907fd184466e030ca19f97c04a1dbf62cdb6838079a830a2e6bf4a44fc70a41c
+size 3631300

.next/cache/webpack/client-development/6.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a5fb4df0183af7e5ffad56cb0a277642115c1ae6d8074c0caf502c403137c7d8
-size 11616
+oid sha256:98d25f4d4962d61f849ed435252bdbc5629aa5ec361faf0de6e3ba45076cf62d
+size 6101

.next/cache/webpack/client-development/7.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fe413f7582eae1321387b466f43b42587b08915d310674da350c0e060246b081
-size 3565495
+oid sha256:0f4320ccf6ff4954eb14e8df7bd36c98e9a94d07301e66a5f9162b2ffe8b95d4
+size 30277

.next/cache/webpack/client-development/8.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a60741c454a20f3573bb9536741360561b82fae863b207e7ff51bd37de0907f3
-size 11318419
+oid sha256:f24b6eeeb4851031f52308fbff253290298c03bec71081054090e4e62ab9b359
+size 6517

.next/cache/webpack/client-development/9.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:588673ea1c584663784ec3260e942d9d8154165c27f0d1526a7ee3307d5ac52b
-size 5817
+oid sha256:d592538bb09693dea60f23fb614bef475c0070109faba3cebd8e2100a758cb01
+size 1675

.next/cache/webpack/client-development/index.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dd6a04baaef131b97ed5733efdbbbeab07e5bbd74f827cc3797def9e5f8a1d69
-size 176067
+oid sha256:e3d23577ffebf3b2e5dda8400694091a8971d26b0cb26919faea0f439f34fc4a
+size 183092

.next/cache/webpack/server-development/0.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f67d98f6716478bf12a5b7784cdee0fe26e448b90cbb39923111c3a2cc91eee1
-size 4538
+oid sha256:9ebed8c2ed3fcbc599dfe09a1a0525a40de0565638106d288479ce40497d64ff
+size 53903

.next/cache/webpack/server-development/1.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a6f93c5c7a9a684efc54a04937c0e29708ef9f88a64d003a7d34ef00773da391
-size 1384
+oid sha256:b31f9280c64d1dcc3450a1d9da47f4ca1c31d5c2d42ba0321501946796117f14
+size 11813

.next/cache/webpack/server-development/10.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b44c5f240f6f677392b4e94b2d295bb4bfb4a456b86b6fdce409f785b80e9ddd
-size 24135
+oid sha256:006cff238e51671646876f8ef15ebf038ab46ce48ede869fab91d756e725bda0
+size 30796

.next/cache/webpack/server-development/11.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:86bc686ea10d0661ab3010d473a9ed8310845dbd2d6c92f9119ef3eda722c34e
-size 227391
+oid sha256:f83f382236143607ab70209ebefb5fcd8ac482aedd94025ee0b851cedb3e1d28
+size 5509581

.next/cache/webpack/server-development/12.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:da86b323d6211a8ffdc18e689cec7e0051589e1892f549af7d243629672127cf
-size 6539
+oid sha256:8d145a687c93e2719b2af7729e1a35b23458dd8ef33caecd9d4c438089b88b89
+size 2864544

.next/cache/webpack/server-development/14.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8585e4160a81feb6a85110f113397f4a83546271bd591852dd39d03b1aa8b289
-size 65613
+oid sha256:31e0b77cb81f15d82794218e571623bc27089be5c8fd6ea1e3005f8dc7616f1f
+size 3373

.next/cache/webpack/server-development/2.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9250fe4816b49af7987bee3a3dca9e25c97895dd0a153f211371c95eed3913ae
-size 30803
+oid sha256:44e0a75b02ca3e7d17404ce3e60bcc9ecdaf2020ed951fa7ed4f90038f8250cb
+size 397

.next/cache/webpack/server-development/3.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b3f408cda42a62770b4ec10ac432a731251f3c84c019e4a54fb6942e35f47bfa
-size 2806105
+oid sha256:eb3b474c87838860f18d92fc1f83b38cd96b1ee91ea28144ab58a453d521b834
+size 2809144

.next/cache/webpack/server-development/4.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fe8e2688e893ef14178361c7e510c0ad08de485c56b916267d735b715da21114
-size 4241
+oid sha256:87a80a0307d74997f8fcb4e59aa09983685159bebbae8f077992f91df7dcf851
+size 6811

.next/cache/webpack/server-development/5.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8f225ddf07b9c1410a7e6c4ae2697f710d572a94ec64239bac36e94d54922483
-size 4077
+oid sha256:99bc47786fa9f09829dfcffe2d1856bb8e7e37f2d48e7b9f04a540e3c4a28a43
+size 69464

.next/cache/webpack/server-development/6.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8d565f9341446d906104d346568ca37bc40fc564c028ecf91cc02c202ee5f534
-size 1638732
+oid sha256:2c980034fde9d010ea8a0f879f60bc9e896498546f0d1b87162f1cfbb9bea304
+size 3932

.next/cache/webpack/server-development/7.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:766b38b2f3e781544acf29e8f94b1fa6f5a45bb28de75292e8453ebb382da0a1
-size 1772521
+oid sha256:f7de6f6e7160c45cb55ebb9691bf85f1f40207bfd8a0867c6bd5530e92f30b10
+size 5509483

.next/cache/webpack/server-development/8.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1226b0385435cff5d4b8f0f291a00c1c34819a818be4753b06c3d8b01d9f8fee
-size 2067928
+oid sha256:a146ee1d12953dff43fcc85a8bd5306b2779a08497f768005387818ba5e6ff18
+size 4142

.next/cache/webpack/server-development/9.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:381abe916a1f820f310484bb98f8e1ee9fb5775acdc7edee5a246692a8c8bab4
-size 8690
+oid sha256:804dfbbe6417488ec23c46baf19e47e9216343a38fc9151946d7db77985194b1
+size 4509

.next/cache/webpack/server-development/index.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:953400e4317758ba31d2c03cea3b9cbee7fdd92fb998e8588913e4f5e804e09f
-size 133229
+oid sha256:2263fcf7868a2341d7d2f8dff213ec62b0671d3cd72c3bc060fe3bed51e9ab22
+size 121096

.next/server/app-paths-manifest.json

@@ -1,4 +1,3 @@
 {
-  "/page": "app/page.js",
-  "/api/route": "app/api/route.js"
+  "/page": "app/page.js"
 }

app/api/collections/route.ts

@@ -0,0 +1,9 @@
+import { PrismaClient } from '@prisma/client'
+
+const prisma = new PrismaClient()
+
+export async function GET() {
+  const images = await prisma.image.findMany()
+
+  return Response.json({ images, status: 200, statusText: "OK" })
+}

app/api/route.ts

@@ -1,4 +1,7 @@
 import { NextResponse } from "next/server";
+import { PrismaClient } from '@prisma/client'
+
+const prisma = new PrismaClient()
 
 export async function POST(
   request: Request,
@@ -9,6 +12,7 @@ export async function POST(
     method: 'POST',
     body: JSON.stringify({
       inputs,
+      stream: true,
     }),
     headers: {
       Authorization: `Bearer ${process.env.NEXT_APP_HF_TOKEN}`,
@@ -18,9 +22,17 @@ export async function POST(
 
   const blob = await response.blob()
   const headers = new Headers();
-
   headers.set("Content-Type", "image/*");
+
+  const arrayBuffer = await blob.arrayBuffer()
+  const bytes = Buffer.from(arrayBuffer)
+
+  const new_blob = await prisma.image.create({
+    data: {
+      prompt: inputs,
+      blob: bytes,
+    },
+  })
   
-  // or just use new Response ❗️
-  return new NextResponse(blob, { status: 200, statusText: "OK", headers });
-}
+  return Response.json({ blob: new_blob, status: 200, statusText: "OK", headers });
+}

components/header.tsx

@@ -17,7 +17,7 @@ export const Header = () => {
             Fast Stable Diffusion XL <br />
             on TPU v5e ⚡
           </h1>
-          <p className="text-sm text-white mt-3">
+          <p className="text-sm text-white mt-3 text-center lg:text-left">
             Powered by{" "}
             <a
               href="https://huggingface.co"
@@ -30,7 +30,7 @@ export const Header = () => {
         <Image
           src={HeaderImage}
           alt="Hugging Face header"
-          className="absolute w-full -right-10 bottom-0 max-w-4xl z-[-1]"
+          className="absolute w-full -right-10 bottom-0 max-w-lg lg:max-w-4xl z-[-1]"
         />
       </div>
       <div className="absolute bottom-0 w-full h-full left-0 bg-gradient-to-b from-transparent to-black z-[1]" />

components/main/collections/collection.tsx

@@ -0,0 +1,53 @@
+import { motion } from "framer-motion";
+import { useMemo } from "react";
+
+interface Props {
+  collection: {
+    prompt: string;
+    blob: {
+      data: ArrayBuffer;
+      type: string;
+    };
+    id: number;
+  };
+}
+
+export const Collection: React.FC<Props> = ({ collection }) => {
+  const arrayBufferToBase64 = (buffer: ArrayBuffer) => {
+    let binary = "";
+    const bytes = [].slice.call(new Uint8Array(buffer));
+    bytes.forEach((b: any) => (binary += String.fromCharCode(b)));
+    return window.btoa(binary);
+  };
+
+  const bufferToBase64 = useMemo(() => {
+    const base64Flag = "data:image/jpeg;base64,";
+    const imageStr = arrayBufferToBase64(collection.blob.data);
+    return base64Flag + imageStr;
+  }, [collection]);
+
+  return (
+    <motion.div
+      initial={{ y: 100, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: 0.35, delay: collection.id * 0.1 }}
+      className="rounded-3xl h-[377px] bg-cover cursor-pointer z-[1] group overflow-hidden p-3 relative flex items-end group"
+    >
+      <div className="bg-[#292424] bg-opacity-60 rounded-xl p-3 border-white/20 border w-full translate-y-full opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100">
+        <p className="text-xs font-semibold text-white/60 mb-0.5">27 October</p>
+        <p className="text-lg font-medium text-white lowercase leading-snug">
+          {collection.prompt}
+        </p>
+        <p className="text-white text-sm text-right font-semibold mt-2">
+          Try it now
+        </p>
+      </div>
+      <div
+        style={{
+          backgroundImage: `url(${bufferToBase64})`,
+        }}
+        className="rounded-3xl bg-red-400 bg-cover absolute top-0 left-0 w-full h-full z-[-1] transition-all duration-200 group-hover:scale-125 bg-center"
+      />
+    </motion.div>
+  );
+};

components/main/collections/index.tsx

@@ -0,0 +1,42 @@
+import classNames from "classnames";
+import { motion } from "framer-motion";
+
+import { useCollections } from "../hooks/useCollections";
+import { Collection } from "./collection";
+
+const IMAGES = [
+  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt13.jpg",
+  "https://www.blueshadow.art/wp-content/uploads/2022/09/prompt01.jpg",
+  "https://www.blueshadow.art/wp-content/uploads/2022/09/prompt02.jpg",
+  "https://www.blueshadow.art/wp-content/uploads/2022/09/prompt06.jpg",
+  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt14.jpg",
+  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt17.jpg",
+  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt18.jpg",
+  "https://www.blueshadow.art/wp-content/uploads/2022/10/prompt27.jpg",
+  "https://www.blueshadow.art/wp-content/uploads/2022/10/prompt32.jpg",
+  "https://www.blueshadow.art/wp-content/uploads/2022/10/prompt34.jpg",
+  "https://www.blueshadow.art/wp-content/uploads/2023/01/prompt44.jpg",
+];
+
+export const Collections = () => {
+  const { collections, loading } = useCollections();
+
+  if (loading) return;
+
+  return (
+    <div className="px-6 max-w-[1722px] 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">
+      {collections.map((col, e) => (
+        <div
+          key={e}
+          className={classNames("w-full grid-cols-1 grid gap-5", {
+            "translate-y-12": e % 2,
+          })}
+        >
+          {col.map((collection, i) => (
+            <Collection key={i} collection={collection} />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};

components/main/hooks/useCollections.ts

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { useMount } from "react-use";
+
+export const useCollections = () => {
+  const [collections, setCollections] = useState([[], [], [], [], []])
+  const [loading, setLoading] = useState<boolean>(false)
+
+  useMount(() => {
+    setLoading(true)
+    fetch("/api/collections", { method: "GET" })
+      .then(async (res) => res.json())
+      .then((data) => {
+        const chunked = data.images.reduce((acc: any, _: any, i:number) => {
+          acc[i % 5].push(data.images[i])
+          return acc
+        }, [[], [], [], [], []])
+        setCollections(chunked)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  })
+
+  return {
+    collections,
+    loading,
+  }
+};

components/main/hooks/useInputGeneration.ts

@@ -16,8 +16,9 @@ export const useInputGeneration = () => {
           })
         }
       )
-      .then(res => {
-        console.log(res)
+      .then(async res => res.json())
+      .then(data => {
+        console.log(data)
         resolve(true)
       })
       .finally(() => {
@@ -34,4 +35,4 @@ export const useInputGeneration = () => {
     submit,
   }
 
-}
+}

components/main/index.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { useState } from "react";
-import classNames from "classnames";
-import { motion } from "framer-motion";
 import { HiUserGroup, HiHeart } from "react-icons/hi2";
 
 import { InputGeneration } from "@/components/input-generation";
 import { Button } from "@/components/button";
+
 import { useInputGeneration } from "./hooks/useInputGeneration";
+import { Collections } from "./collections";
 
 const categories = [
   {
@@ -22,20 +22,6 @@ const categories = [
   },
 ];
 
-const IMAGES = [
-  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt13.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2022/09/prompt01.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2022/09/prompt02.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2022/09/prompt06.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt14.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt17.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt18.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2022/10/prompt27.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2022/10/prompt32.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2022/10/prompt34.jpg",
-  "https://www.blueshadow.art/wp-content/uploads/2023/01/prompt44.jpg",
-];
-
 export const Main = () => {
   const { prompt, setPrompt, submit, loading } = useInputGeneration();
   const [category, setCategory] = useState<string>("community");
@@ -43,14 +29,14 @@ export const Main = () => {
   return (
     <main className="pt-6 z-[2] relative">
       <div className="px-6 mx-auto max-w-7xl">
-        <div className="flex items-center justify-between w-full -translate-y-1/2">
+        <div className="flex flex-col lg:flex-row items-center justify-between w-full -translate-y-1/2">
           <InputGeneration
             prompt={prompt}
             onChange={setPrompt}
             onSubmit={submit}
             loading={loading}
           />
-          <div className="flex items-center justify-end gap-5 w-full">
+          <div className="flex items-center justify-center lg:justify-end gap-5 w-full mt-6 lg:mt-0">
             {categories.map(({ key, label, icon }) => (
               <Button
                 key={key}
@@ -64,35 +50,7 @@ export const Main = () => {
           </div>
         </div>
       </div>
-      <div className="px-6 max-w-[1722px] mx-auto grid grid-cols-5 gap-5 mt-14">
-        {Array.from({ length: 5 }).map((_, e) => (
-          <div
-            key={e}
-            className={classNames("w-full grid-cols-1 grid gap-5", {
-              "translate-y-12": e % 2,
-            })}
-          >
-            {Array.from({ length: 6 }).map((_, i) => (
-              <motion.div
-                key={i}
-                initial={{ y: 100, opacity: 0 }}
-                animate={{ y: 0, opacity: 1 }}
-                transition={{ duration: 0.35, delay: i * 0.1 }}
-                className="rounded-3xl h-[377px] bg-cover cursor-pointer relative z-[1] group overflow-hidden"
-              >
-                <div
-                  style={{
-                    backgroundImage: `url(${
-                      IMAGES[Math.floor(Math.random() * IMAGES.length)]
-                    })`,
-                  }}
-                  className="rounded-3xl bg-cover absolute top-0 left-0 w-full h-full z-[-1] transition-all duration-200 group-hover:scale-125"
-                />
-              </motion.div>
-            ))}
-          </div>
-        ))}
-      </div>
+      <Collections />
     </main>
   );
 };

package-lock.json

@@ -8,7 +8,9 @@
       "name": "hf-fast-image-generation",
       "version": "0.1.0",
       "dependencies": {
+        "@prisma/client": "^5.5.2",
         "classnames": "^2.3.2",
+        "filereader": "^0.10.3",
         "framer-motion": "^10.16.4",
         "next": "13.5.6",
         "react": "^18",
@@ -17,15 +19,17 @@
         "react-use": "^17.4.0"
       },
       "devDependencies": {
-        "@types/node": "^20",
+        "@types/node": "^20.8.9",
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "autoprefixer": "^10",
         "eslint": "^8",
         "eslint-config-next": "13.5.6",
         "postcss": "^8",
+        "prisma": "^5.5.2",
         "tailwindcss": "^3",
-        "typescript": "^5"
+        "ts-node": "^10.9.1",
+        "typescript": "^5.2.2"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -60,6 +64,28 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "0.3.9"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
@@ -396,6 +422,38 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@prisma/client": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.5.2.tgz",
+      "integrity": "sha512-54XkqR8M+fxbzYqe+bIXimYnkkcGqgOh0dn0yWtIk6CQT4IUCAvNFNcQZwk2KqaLU+/1PHTSWrcHtx4XjluR5w==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@prisma/engines-version": "5.5.1-1.aebc046ce8b88ebbcb45efe31cbe7d06fd6abc0a"
+      },
+      "engines": {
+        "node": ">=16.13"
+      },
+      "peerDependencies": {
+        "prisma": "*"
+      },
+      "peerDependenciesMeta": {
+        "prisma": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@prisma/engines": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-5.5.2.tgz",
+      "integrity": "sha512-Be5hoNF8k+lkB3uEMiCHbhbfF6aj1GnrTBnn5iYFT7GEr3TsOEp1soviEcBR0tYCgHbxjcIxJMhdbvxALJhAqg==",
+      "devOptional": true,
+      "hasInstallScript": true
+    },
+    "node_modules/@prisma/engines-version": {
+      "version": "5.5.1-1.aebc046ce8b88ebbcb45efe31cbe7d06fd6abc0a",
+      "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-5.5.1-1.aebc046ce8b88ebbcb45efe31cbe7d06fd6abc0a.tgz",
+      "integrity": "sha512-O+qHFnZvAyOFk1tUco2/VdiqS0ym42a3+6CYLScllmnpbyiTplgyLt2rK/B9BTjYkSHjrgMhkG47S0oqzdIckA=="
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz",
@@ -410,6 +468,30 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tsconfig/node10": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
+      "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
+      "dev": true
+    },
+    "node_modules/@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+      "dev": true
+    },
+    "node_modules/@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+      "dev": true
+    },
+    "node_modules/@tsconfig/node16": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+      "dev": true
+    },
     "node_modules/@types/js-cookie": {
       "version": "2.2.7",
       "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
@@ -422,12 +504,12 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.8.8",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.8.tgz",
-      "integrity": "sha512-YRsdVxq6OaLfmR9Hy816IMp33xOBjfyOgUd77ehqg96CFywxAPbDbXvAsuN2KVg2HOT8Eh6uAfU+l4WffwPVrQ==",
+      "version": "20.8.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.9.tgz",
+      "integrity": "sha512-UzykFsT3FhHb1h7yD4CA4YhBHq545JC0YnEz41xkipN88eKQtL6rSgocL5tbAP6Ola9Izm/Aw4Ora8He4x0BHg==",
       "dev": true,
       "dependencies": {
-        "undici-types": "~5.25.1"
+        "undici-types": "~5.26.4"
       }
     },
     "node_modules/@types/prop-types": {
@@ -596,6 +678,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/acorn-walk": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -1125,6 +1216,12 @@
         "toggle-selection": "^1.0.6"
       }
     },
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "dev": true
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1251,6 +1348,15 @@
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "dev": true
     },
+    "node_modules/diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -1950,6 +2056,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/filereader": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/filereader/-/filereader-0.10.3.tgz",
+      "integrity": "sha512-7F8w6GSXuHLN80ukaVOcHgBaiTRHUZr8GeEhNdqfAECcnBoROg4i8hTl+KqtF4yUPffOJVHEFg4iDJb7xIYFng=="
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -2943,6 +3054,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "dev": true
+    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -3530,6 +3647,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prisma": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/prisma/-/prisma-5.5.2.tgz",
+      "integrity": "sha512-WQtG6fevOL053yoPl6dbHV+IWgKo25IRN4/pwAGqcWmg7CrtoCzvbDbN9fXUc7QS2KK0LimHIqLsaCOX/vHl8w==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "@prisma/engines": "5.5.2"
+      },
+      "bin": {
+        "prisma": "build/index.js"
+      },
+      "engines": {
+        "node": ">=16.13"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -4329,6 +4462,55 @@
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
       "dev": true
     },
+    "node_modules/ts-node": {
+      "version": "10.9.1",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
+      "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+      "dev": true,
+      "dependencies": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ts-node/node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+      "dev": true
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.2",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz",
@@ -4464,9 +4646,9 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "5.25.3",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.25.3.tgz",
-      "integrity": "sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==",
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true
     },
     "node_modules/update-browserslist-db": {
@@ -4514,6 +4696,12 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+      "dev": true
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -4638,6 +4826,15 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

package.json

@@ -9,7 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@prisma/client": "^5.5.2",
     "classnames": "^2.3.2",
+    "filereader": "^0.10.3",
     "framer-motion": "^10.16.4",
     "next": "13.5.6",
     "react": "^18",
@@ -18,14 +20,16 @@
     "react-use": "^17.4.0"
   },
   "devDependencies": {
-    "@types/node": "^20",
+    "@types/node": "^20.8.9",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10",
     "eslint": "^8",
     "eslint-config-next": "13.5.6",
     "postcss": "^8",
+    "prisma": "^5.5.2",
     "tailwindcss": "^3",
-    "typescript": "^5"
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2"
   }
 }

prisma/schema.prisma

@@ -0,0 +1,14 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = "file:../data/dev.db"
+}
+
+model Image {
+  id     Int    @id @default(autoincrement())
+  prompt String
+  blob   Bytes
+}