manage error

app/api/route.ts

@@ -6,13 +6,11 @@ const prisma = new PrismaClient()
 export async function POST(
   request: Request,
 ) {
-  const { inputs } = await request.json()
-
+  const { inputs } = await request.json()  
   const response = await fetch('https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0', {
     method: 'POST',
     body: JSON.stringify({
       inputs,
-      stream: true,
     }),
     headers: {
       Authorization: `Bearer ${process.env.NEXT_PUBLIC_APP_HF_TOKEN}`,
@@ -21,6 +19,10 @@ export async function POST(
     },
   })
 
+  // avoid json parse error
+  const res = await response.clone().json().catch(() => ({}));
+  if (res?.error) return Response.json({ status: response.status, ok: false, message: res.error });
+
   const blob = await response.blob()
   const headers = new Headers();
   headers.set("Content-Type", "image/*");
@@ -35,5 +37,6 @@ export async function POST(
     },
   })
   
-  return Response.json({ blob: new_blob, status: 200, statusText: "OK", headers });
+  return Response.json({ blob: new_blob, status: 200, ok: true, headers });
+
 }

components/main/collections/collection.tsx

@@ -9,7 +9,7 @@ interface Props {
   index: number;
   collection: CollectionType;
   className?: string;
-  onOpen: (id: number) => void;
+  onOpen: (id: string) => void;
 }
 
 export const Collection: React.FC<Props> = ({

components/main/collections/index.tsx

@@ -23,8 +23,24 @@ export const Collections: React.FC<{ category: string }> = ({ category }) => {
     <>
       <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">
         {collections?.map((collection: CollectionType, i: number) =>
-          collection?.id === -1 ? (
-            <CollectionLoading key={i} prompt={collection.prompt} />
+          collection?.loading ? (
+            <CollectionLoading
+              key={i}
+              prompt={collection.prompt}
+              error={collection.error}
+              className={classNames("", {
+                "!translate-y-12":
+                  breakpoint === "XL"
+                    ? i % 5 === 1 || i % 5 === 3
+                    : breakpoint === "L"
+                    ? i % 4 === 1 || i % 4 === 3
+                    : breakpoint === "S"
+                    ? i % 3 === 1
+                    : breakpoint === "XS"
+                    ? i % 2 === 1
+                    : false,
+              })}
+            />
           ) : (
             <Collection
               key={category + collection.id}

components/main/collections/loading.tsx

@@ -1,27 +1,42 @@
-import { useMemo } from "react";
 import { motion } from "framer-motion";
-
-import { Collection as CollectionType } from "@/utils/type";
+import { FaSadCry } from "react-icons/fa";
+import classNames from "classnames";
 
 interface Props {
   prompt: string;
+  error?: string;
+  className?: string;
 }
 
-export const CollectionLoading: React.FC<Props> = ({ prompt }) => {
+export const CollectionLoading: React.FC<Props> = ({
+  prompt,
+  error,
+  className,
+}) => {
   return (
-    <div className="h-[377px] w-full relative">
+    <div className={`h-[377px] w-full relative ${className}`}>
       <motion.div
         initial={{ y: 100, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.35, delay: 0.1 }}
-        className="rounded-3xl h-[377px] cursor-pointer group overflow-hidden relative z-[1] group bg-primary/70 flex flex-col justify-between p-8"
+        className={classNames(
+          "rounded-3xl h-[377px] cursor-pointer group relative group flex flex-col justify-between p-8 z-[1]",
+          {
+            "bg-primary/70": !error,
+            "bg-red-500/80 ring-8 ring-red-400/20": error,
+          }
+        )}
       >
-        <div className="loading-dots translate-y-[5px]">
-          <span />
-          <span />
-          <span />
-        </div>
-        <p className="text-white/50 font-semibold text-xl">{prompt}</p>
+        {error ? (
+          <FaSadCry className="text-white/60 text-5xl" />
+        ) : (
+          <div className="loading-dots translate-y-[5px]">
+            <span />
+            <span />
+            <span />
+          </div>
+        )}
+        <p className="text-white/70 font-semibold text-xl">{error ?? prompt}</p>
       </motion.div>
     </div>
   );

components/main/hooks/useInputGeneration.ts

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useId, useState } from "react"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { useLocalStorage } from 'react-use';
 
@@ -26,10 +26,13 @@ export const useInputGeneration = () => {
   const { mutate: submit, isLoading: loading } = useMutation(
     ["generation"],
     async () => {
+      // generate string random ID
+      const id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
       if (!hasMadeFirstGeneration) setFirstGenerationDone()
       client.setQueryData(["collections"], (old) => {
         return [{
-          id: -1,
+          id,
+          loading: true,
           blob: {
             type: "image/png",
             data: new ArrayBuffer(0),
@@ -49,23 +52,26 @@ export const useInputGeneration = () => {
       })
       const data = await response.json()
 
-      if (!response.ok) {
-        throw new Error(data.message)
-      }
-
       client.setQueryData(["collections"], (old) => {
         const newArray = [...old as Collection[]]
-        const index = newArray.findIndex((item: Collection) => item.id === -1)
+        const index = newArray.findIndex((item: Collection) => item.id === id)
+        
+        console.log(data, index, newArray[index])
 
-        newArray[index] = data?.blob as Collection
+        newArray[index] = !data.ok ? {
+          ...newArray[index],
+          error: data.message
+        } : data?.blob as Collection
 
         return newArray
       })
 
+      if (!data.ok) return null
+
       setGenerationsId(myGenerationsId?.length ? [...myGenerationsId, data?.blob?.id] : [data?.blob?.id])
       setOpen(data?.blob?.id)
       return data ?? {}
-    },
+    }
   )
 
   const { data: hasMadeFirstGeneration } = useQuery(["firstGenerationDone"], () => {

components/modal/useCollection.ts

@@ -3,7 +3,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query"
 
 import { Collection } from "@/utils/type"
 
-export const useCollection = (id?: number) => {
+export const useCollection = (id?: string) => {
   const { data: open } = useQuery(["modal"], () => {
     return null
   }, {
@@ -12,7 +12,7 @@ export const useCollection = (id?: number) => {
     refetchOnReconnect: false,
     initialData: null
   })
-  const setOpen = (id: number | null) => client.setQueryData(["modal"], () => id)
+  const setOpen = (id: string | null) => client.setQueryData(["modal"], () => id)
 
   const client = useQueryClient()
 

utils/type.ts

@@ -1,9 +1,11 @@
 export interface Collection {
-  id: number;
+  id: string;
   blob: {
     type: string;
     data: ArrayBuffer
   };
   prompt: string;
   createdAt: string;
+  error?: string;
+  loading?: boolean;
 }