handle error

app/_actions/generate.ts

@@ -12,29 +12,40 @@ export async function generate({ brand_name, industry, description }: Form) {
   }
   const inference = new HfInference(process.env.HF_ACCESS_TOKEN);
 
-  const prompt = await inference.chatCompletion({
-    model: "meta-llama/Meta-Llama-3.1-70B-Instruct",
-    messages: [
-      { role: "user", content: "lee, a noodle restaurant" },
-      {
-        role: "assistant",
-        content:
-          'logo,Minimalist,A pair of chopsticks and a bowl of rice with the word "Lee",',
-      },
-      { role: "user", content: "cat shop" },
-      { role: "assistant", content: "wablogo,Minimalist,Leaf and cat,logo," },
-      { role: "user", content: "Ato, real estate company" },
-      {
-        role: "assistant",
-        content:
-          'logo,Minimalist,A man stands in front of a door,his shadow forming the word "A",',
-      },
-      { role: "user", content: `${brand_name}, ${description}, ${industry}` },
-    ],
-    temperature: 0.5,
-    max_tokens: 1024,
-    top_p: 0.7,
-  });
+  const prompt: any = await inference
+    .chatCompletion({
+      model: "meta-llama/Meta-Llama-3.1-70B-Instruct",
+      messages: [
+        { role: "user", content: "lee, a noodle restaurant" },
+        {
+          role: "assistant",
+          content:
+            'logo,Minimalist,A pair of chopsticks and a bowl of rice with the word "Lee",',
+        },
+        { role: "user", content: "cat shop" },
+        { role: "assistant", content: "wablogo,Minimalist,Leaf and cat,logo," },
+        { role: "user", content: "Ato, real estate company" },
+        {
+          role: "assistant",
+          content:
+            'logo,Minimalist,A man stands in front of a door,his shadow forming the word "A",',
+        },
+        { role: "user", content: `${brand_name}, ${description}, ${industry}` },
+      ],
+      temperature: 0.5,
+      max_tokens: 1024,
+      top_p: 0.7,
+    })
+    .then((res) => res)
+    .catch((err) => {
+      return { error: err.message };
+    });
+
+  if (prompt?.error) {
+    return {
+      error: prompt.error,
+    };
+  }
 
   if (prompt?.choices[0]?.message?.content) {
     const hfRequest = await inference.textToImage({

app/_components/generation/index.tsx

@@ -10,6 +10,7 @@ import { Steps } from "./step/list";
 import { Industry } from "./step/industry";
 import { Description } from "./step/description";
 import classNames from "classnames";
+import { toast } from "react-toastify";
 
 export const Generation = () => {
   const [form, setForm] = useState<Form>({
@@ -26,13 +27,14 @@ export const Generation = () => {
   const handleGenerate = async () => {
     if (loading) return;
     setLoading(true);
-    const response = await generate(form);
-    if (response.data) {
+    try {
+      const response = await generate(form);
       setResult(response.data);
-    } else {
-      console.log("Error: ", response.error);
+    } catch (err) {
+      toast.error("An error occurred. Please try again later.");
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
   return (

app/layout.tsx

@@ -1,5 +1,8 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
 import "@/assets/globals.css";
 import { Navigation } from "@/components/_navigation";
 
@@ -54,6 +57,7 @@ export default function RootLayout({
           <Navigation />
           {children}
         </div>
+        <ToastContainer />
       </body>
     </html>
   );

package-lock.json

@@ -16,6 +16,7 @@
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^5.3.0",
+        "react-toastify": "^10.0.5",
         "react-use": "^17.5.1"
       },
       "devDependencies": {
@@ -1400,6 +1401,14 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -4494,6 +4503,18 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
+      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/react-universal-interface": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",

package.json

@@ -17,6 +17,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
+    "react-toastify": "^10.0.5",
     "react-use": "^17.5.1"
   },
   "devDependencies": {